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 | ... | ... |