Showing
9 changed files
with
71 additions
and
48 deletions
... | ... | @@ -4289,7 +4289,6 @@ App.prototype.loadFile = function (id, sameWindow, file, success, force) { |
4289 | 4289 | if (this.appIcon) { |
4290 | 4290 | this.appIcon.style.backgroundImage = `url(${platformInfo?.logo || `${getProxyPrefix()}/logo.png`})` |
4291 | 4291 | } |
4292 | - | |
4293 | 4292 | const handleLoadContent = async () => { |
4294 | 4293 | /** |
4295 | 4294 | * @typedef ConfigurationContentListItemType |
... | ... | @@ -4326,9 +4325,7 @@ App.prototype.loadFile = function (id, sameWindow, file, success, force) { |
4326 | 4325 | if (success != null) |
4327 | 4326 | success() |
4328 | 4327 | |
4329 | - | |
4330 | - | |
4331 | - useLightboxModeService?.(this) | |
4328 | + this.lightboxWebsocketService?.init?.() | |
4332 | 4329 | } |
4333 | 4330 | |
4334 | 4331 | handleLoadContent() | ... | ... |
... | ... | @@ -168,13 +168,23 @@ LocalFile.prototype.saveFile = function (title, revision, success, error, useCur |
168 | 168 | const { doSaveConfigurationContent, configurationId } = useContentData() |
169 | 169 | try { |
170 | 170 | const allCells = this.ui.editor.graph.getModel().cells || {} |
171 | + // const allCells = this.shadowPages | |
172 | + // .map(item => { | |
173 | + // console.log(item) | |
174 | + // return this.ui.editor.graph.createCellLookup([item.root]) | |
175 | + // }) | |
176 | + // .map(obj => Object.values(obj)) | |
177 | + // .reduce((prev, next) => [...prev, ...next], []) | |
178 | + | |
171 | 179 | await doSaveConfigurationContent({ |
172 | 180 | configurationContentList: [ |
173 | 181 | { |
174 | 182 | id: this.ui.configurationContentId, |
175 | 183 | content: savedData, |
176 | - contentId: this.ui.configurationContentId, | |
184 | + // contentId: this.ui.configurationContentId, | |
185 | + contentId: this.ui.currentPage.getId(), | |
177 | 186 | type: 1, |
187 | + // nodeIds: Array.from(new Set(allCells)), | |
178 | 188 | nodeIds: Object.keys(allCells), |
179 | 189 | name: this.ui.currentPage.getName() |
180 | 190 | } | ... | ... |
... | ... | @@ -482,11 +482,15 @@ EditorUi.prototype.initPages = function () { |
482 | 482 | this.editor.addListener('pageMoved', pagesChanged); |
483 | 483 | this.editor.addListener('fileLoaded', pagesChanged); |
484 | 484 | |
485 | + // TODO Thingskit 预览模式连接socket | |
486 | + const lightboxWebsocketService = useLightboxModeService(this) | |
487 | + this.lightboxWebsocketService = lightboxWebsocketService | |
485 | 488 | this.editor.addListener('pageSelected', mxUtils.bind(this, function (sender, evt) { |
486 | 489 | this.scrollToPage(); |
487 | 490 | this.updateHashObject(); |
488 | 491 | this.updateTabContainer(); |
489 | 492 | this.updateDocumentTitle(); |
493 | + this.lightboxWebsocketService?.onSelectPageChange?.() | |
490 | 494 | |
491 | 495 | if (this.toolbar != null) { |
492 | 496 | this.toolbar.updateZoom(); |
... | ... | @@ -1751,8 +1755,8 @@ EditorUi.prototype.showPageLinkDialog = function (page) { |
1751 | 1755 | if (obj.relatedPage.viewState != null) { |
1752 | 1756 | node.setAttribute('viewState', JSON.stringify( |
1753 | 1757 | obj.relatedPage.viewState, function (key, value) { |
1754 | - return (mxUtils.indexOf(EditorUi.transientViewStateProperties, key) < 0) ? value : undefined; | |
1755 | - })); | |
1758 | + return (mxUtils.indexOf(EditorUi.transientViewStateProperties, key) < 0) ? value : undefined; | |
1759 | + })); | |
1756 | 1760 | } |
1757 | 1761 | |
1758 | 1762 | if (obj.relatedPage.root != null) { | ... | ... |
1 | 1 | import type { ThingsModel } from '@/api/device/model' |
2 | 2 | import type { ImageSelectorDataType } from '@/core/Library/components/ImageSelector' |
3 | 3 | import type { CommandWayEnum } from '@/enums/commandEnum' |
4 | -import type { ActTypeEnum, AggregateTypeEnum, CommandDeliveryWayEnum, EventActionTypeEnum, EventTypeEnum, SocketSubscriberEnum } from '@/enums/datasource' | |
4 | +import type { ActTypeEnum, AggregateTypeEnum, CommandDeliveryWayEnum, DeviceTypeEnum, EventActionTypeEnum, EventTypeEnum, SocketSubscriberEnum, TransportTypeEnum } from '@/enums/datasource' | |
5 | 5 | |
6 | 6 | export enum DeleteNodeDataTypeEnum { |
7 | 7 | DATASOURCE = 'DATASOURCE', |
... | ... | @@ -82,6 +82,10 @@ export interface NodeDataDataSourceJsonType { |
82 | 82 | deviceProfileId: string |
83 | 83 | attr: string |
84 | 84 | attrInfo: ThingsModel |
85 | + | |
86 | + deviceType?: DeviceTypeEnum | |
87 | + transportType?: TransportTypeEnum | |
88 | + | |
85 | 89 | enable: boolean |
86 | 90 | chartOption?: ChartOptionType |
87 | 91 | videoOption?: VideoOptionType | ... | ... |
... | ... | @@ -31,7 +31,7 @@ function removeCellSourceAttribute(cell: MxCell) { |
31 | 31 | export function useNodeData({ cell, immediate = true }: UseNodeDataParamsType) { |
32 | 32 | const nodeData = ref<NodeDataType>() |
33 | 33 | |
34 | - const contentId = window.DrawApp.configurationContentId! | |
34 | + // const contentId = window.DrawApp.configurationContentId! | |
35 | 35 | const { configurationId } = useParseParams() |
36 | 36 | |
37 | 37 | const getCellID = () => { |
... | ... | @@ -46,7 +46,7 @@ export function useNodeData({ cell, immediate = true }: UseNodeDataParamsType) { |
46 | 46 | const basicNodeBindData = (type: ActionType): BasicNodeBindType => { |
47 | 47 | return { |
48 | 48 | id: type === ActionType.GET ? getSourceCellID () || getCellID () : getCellID(), |
49 | - contentId, | |
49 | + contentId: window.DrawApp.currentPage.getId(), | |
50 | 50 | configurationId, |
51 | 51 | } |
52 | 52 | } | ... | ... |
1 | 1 | import { LightboxModeWebsocketService } from '@/core/websocket/processor' |
2 | 2 | import type { DrawApp } from '@/fitCore/types' |
3 | -import { useContentDataStoreWithOut } from '@/store/modules/contentData' | |
4 | 3 | import { isLightboxMode, isShareMode } from '@/utils/env' |
5 | 4 | |
6 | 5 | export function useLightboxModeService(App: DrawApp) { |
7 | - if (isShareMode() || isLightboxMode()) { | |
8 | - const contentDataStore = useContentDataStoreWithOut() | |
9 | - // eslint-disable-next-line no-new | |
10 | - new LightboxModeWebsocketService(App, contentDataStore.contentData) | |
11 | - } | |
6 | + if (isShareMode() || isLightboxMode()) | |
7 | + return new LightboxModeWebsocketService(App) | |
12 | 8 | } |
13 | 9 | |
14 | 10 | window.useLightboxModeService = useLightboxModeService | ... | ... |
... | ... | @@ -7,13 +7,19 @@ interface MxEvent { |
7 | 7 | state: MxState |
8 | 8 | } |
9 | 9 | |
10 | -type DispathFn = (eventName: EventTypeEnum, event: MxEvent) => void | |
11 | - | |
12 | 10 | export class EventHandler { |
13 | - constructor(public dispathEvent: DispathFn) { | |
11 | + constructor(public service: LightboxModeWebsocketService) { | |
14 | 12 | this.initEventListener() |
15 | 13 | } |
16 | 14 | |
15 | + get nodeUtils() { | |
16 | + return this.service.nodeUtils | |
17 | + } | |
18 | + | |
19 | + get getDrawApp() { | |
20 | + return this.service.App | |
21 | + } | |
22 | + | |
17 | 23 | initEventListener() { |
18 | 24 | this.addClickEventListener() |
19 | 25 | this.addDbClickEventListener() |
... | ... | @@ -21,52 +27,43 @@ export class EventHandler { |
21 | 27 | } |
22 | 28 | |
23 | 29 | addDbClickEventListener() { |
24 | - const graphDblClick = window.DrawApp.editor.graph.dblClick | |
25 | - const dispathEvent = this.dispathEvent | |
26 | - window.DrawApp.editor.graph.dblClick = function (...args) { | |
30 | + const graphDblClick = this.getDrawApp.editor.graph.dblClick | |
31 | + const dispathEvent = this.dispathEvent.bind(this) | |
32 | + this.getDrawApp.editor.graph.dblClick = function (...args) { | |
27 | 33 | dispathEvent(EventTypeEnum.DOUBLE, args[0]) |
28 | 34 | graphDblClick.apply(this, args) |
29 | 35 | } |
30 | 36 | } |
31 | 37 | |
32 | 38 | addClickEventListener() { |
33 | - const graphDblClick = window.DrawApp.editor.graph.click | |
34 | - const dispathEvent = this.dispathEvent | |
35 | - window.DrawApp.editor.graph.click = function (...args) { | |
39 | + const graphDblClick = this.getDrawApp.editor.graph.click | |
40 | + const dispathEvent = this.dispathEvent.bind(this) | |
41 | + this.getDrawApp.editor.graph.click = function (...args) { | |
36 | 42 | dispathEvent(EventTypeEnum.SINGLE, ...args) |
37 | 43 | graphDblClick.apply(this, args) |
38 | 44 | } |
39 | 45 | } |
40 | 46 | |
41 | 47 | addMouseUpOrDownEventListener() { |
42 | - const graphFireMouseEvent = window.DrawApp.editor.graph.fireMouseEvent | |
43 | - window.DrawApp.editor.graph.fireMouseEvent = (eventName, event, sender) => { | |
48 | + const graphFireMouseEvent = this.getDrawApp.editor.graph.fireMouseEvent | |
49 | + this.getDrawApp.editor.graph.fireMouseEvent = (eventName, event, sender) => { | |
44 | 50 | if (eventName === 'mouseUp') |
45 | 51 | this.dispathEvent(EventTypeEnum.UP, event) |
46 | 52 | |
47 | 53 | if (eventName === 'mouseDown') |
48 | 54 | this.dispathEvent(EventTypeEnum.DOWN, event) |
49 | 55 | |
50 | - graphFireMouseEvent.apply(window.DrawApp.editor.graph, [eventName, event, sender]) | |
56 | + graphFireMouseEvent.apply(this.getDrawApp.editor.graph, [eventName, event, sender]) | |
51 | 57 | } |
52 | 58 | } |
53 | -} | |
54 | - | |
55 | -export class DispathEvent { | |
56 | - constructor(public service: LightboxModeWebsocketService) { | |
57 | - } | |
58 | - | |
59 | - get nodeUtils() { | |
60 | - return this.service.nodeUtils | |
61 | - } | |
62 | 59 | |
63 | 60 | dispathEvent(eventName: EventTypeEnum, event: MxEvent) { |
64 | 61 | const { state } = event |
65 | 62 | if (!state) return |
66 | 63 | const { cell } = state |
67 | 64 | if (!cell) return |
68 | - | |
69 | 65 | const id = cell.getId() |
66 | + | |
70 | 67 | const node = this.service.dataSource.find(item => item.id === id) |
71 | 68 | if (node && node.eventJson) { |
72 | 69 | const { handlerMouseDown, handlerMouseClick, handlerMouseDoubleClick, handlerMouseUp } = useNodeEvent(node.eventJson, node.dataSourceJson) | ... | ... |
... | ... | @@ -4,13 +4,14 @@ import { EntityType } from '../enum' |
4 | 4 | import { SubscriptionUpdate, TelemetrySubscriber, TelemetryWebsockerService } from '../telemetry' |
5 | 5 | import type { SubscriptionUpdateMsg, WebsocketDataMsg } from '../type/message' |
6 | 6 | import { MessageHandler } from './messageHandler' |
7 | -import { DispathEvent, EventHandler } from './eventHandler' | |
7 | +import { EventHandler } from './eventHandler' | |
8 | 8 | import type { DrawApp } from '@/fitCore/types' |
9 | 9 | import { NodeUtils } from '@/hooks/business/useNodeUtils' |
10 | 10 | import type { NodeDataActJsonType, NodeDataDataSourceJsonType, NodeDataEventJsonType, NodeDataType } from '@/api/node/model' |
11 | 11 | import type { EventTypeEnum } from '@/enums/datasource' |
12 | 12 | import { ActTypeEnum, DataSourceTypeEnum } from '@/enums/datasource' |
13 | 13 | import { fetchComponentDataSubscribers } from '@/core/Library' |
14 | +import { useContentDataStoreWithOut } from '@/store/modules/contentData' | |
14 | 15 | |
15 | 16 | export type NodeDataActJsonItemType = NodeDataActJsonType[keyof NodeDataActJsonType] |
16 | 17 | export type NodeDataEventJsonItemType = NodeDataEventJsonType[keyof NodeDataEventJsonType] |
... | ... | @@ -25,25 +26,24 @@ export interface CommandSource { |
25 | 26 | export class LightboxModeWebsocketService extends TelemetryWebsockerService { |
26 | 27 | dataSource: NodeDataType[] |
27 | 28 | |
28 | - // entityIdWithNodeRelationMap = new Map<string, Map<string, EntityAttrBindDataNode>>() | |
29 | - | |
30 | 29 | nodeUtils: NodeUtils |
31 | 30 | |
32 | 31 | messageHandler: MessageHandler |
33 | 32 | |
34 | - dispathEvent: DispathEvent | |
35 | - | |
36 | 33 | eventHandler: EventHandler |
37 | 34 | |
38 | - constructor(App: DrawApp, datasource: NodeDataType[]) { | |
35 | + constructor(public App: DrawApp) { | |
39 | 36 | super() |
40 | 37 | this.nodeUtils = new NodeUtils(App) |
41 | - this.dataSource = toRaw(unref(datasource)) | |
38 | + this.dataSource = [] | |
42 | 39 | this.openSocket() |
43 | - this.dispathEvent = new DispathEvent(this) | |
44 | 40 | this.messageHandler = new MessageHandler(this) |
45 | - this.eventHandler = new EventHandler(this.dispathEvent.dispathEvent.bind(this.dispathEvent)) | |
41 | + this.eventHandler = new EventHandler(this) | |
42 | + } | |
46 | 43 | |
44 | + init() { | |
45 | + this.unsubscribeCurrentPageData() | |
46 | + this.getSelectPageNodeData() | |
47 | 47 | this.getAllDataSubscribers() |
48 | 48 | } |
49 | 49 | |
... | ... | @@ -111,6 +111,21 @@ export class LightboxModeWebsocketService extends TelemetryWebsockerService { |
111 | 111 | } |
112 | 112 | } |
113 | 113 | |
114 | + unsubscribeCurrentPageData() { | |
115 | + const subscribers = Array.from(this.subscribersMap.values()) | |
116 | + subscribers.forEach(subscriber => this.unsubscribe(subscriber)) | |
117 | + } | |
118 | + | |
119 | + getSelectPageNodeData() { | |
120 | + const contentDataStore = useContentDataStoreWithOut() | |
121 | + const contentId = this.App.currentPage.getId() | |
122 | + this.dataSource = toRaw(unref(contentDataStore.contentData)).filter(item => item.contentId === contentId) | |
123 | + } | |
124 | + | |
125 | + onSelectPageChange() { | |
126 | + this.init() | |
127 | + } | |
128 | + | |
114 | 129 | checkDataSourceNeedSubscribe(dataSource?: NodeDataDataSourceJsonType): dataSource is NodeDataDataSourceJsonType { |
115 | 130 | return !!(dataSource && isObject(dataSource) && dataSource.deviceId && dataSource.attr) |
116 | 131 | } | ... | ... |
... | ... | @@ -197,7 +197,7 @@ export class TelemetryWebsockerService extends WebsocketService<TelemetrySubscri |
197 | 197 | } |
198 | 198 | |
199 | 199 | public unsubscribe(subscriber: TelemetrySubscriber): void { |
200 | - if (unref(this.status) === 'CONNECTING') { | |
200 | + if (unref(this.status) === 'OPEN') { | |
201 | 201 | const subscriptionCmd = subscriber.subscriptionCommand |
202 | 202 | if (subscriptionCmd instanceof SubscriptionCmd) { |
203 | 203 | subscriptionCmd.unsubscribe = true | ... | ... |