From 73379f4bd3db8050f3903ade29f0269039e511f2 Mon Sep 17 00:00:00 2001 From: joylink_zhaoerwei Date: Thu, 31 Aug 2023 17:46:38 +0800 Subject: [PATCH] =?UTF-8?q?=E5=90=8C=E6=AD=A5=E6=A1=86=E6=9E=B6=E4=BB=A3?= =?UTF-8?q?=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/jl-graphic/app/JlGraphicApp.ts | 87 ++++++++++++++++++++++--- src/jl-graphic/message/MessageBroker.ts | 10 ++- src/jl-graphic/plugins/CopyPlugin.ts | 3 + src/jl-graphic/ui/ContextMenu.ts | 8 +++ 4 files changed, 96 insertions(+), 12 deletions(-) diff --git a/src/jl-graphic/app/JlGraphicApp.ts b/src/jl-graphic/app/JlGraphicApp.ts index 2026111..b47fab1 100644 --- a/src/jl-graphic/app/JlGraphicApp.ts +++ b/src/jl-graphic/app/JlGraphicApp.ts @@ -445,9 +445,13 @@ export interface IGraphicScene extends EventEmitter { */ toCanvasCoordinates(p: Point): Point; /** - * 加载/重新加载数据 + * 加载/重新加载数据(若已经加载过，则不会重新加载) */ reload(): Promise; + /** + * 强制重新加载，无论是否已经加载过 + */ + forceReload(): Promise; /** * 绑定到dom * @param dom @@ -523,6 +527,14 @@ export interface IGraphicScene extends EventEmitter { * 销毁 */ destroy(): void; + /** + * 订阅websocket消息 + */ + subscribe(sub: AppStateSubscription): void; + /** + * 取消websocket订阅 + */ + unsubscribe(destination: string): void; } abstract class GraphicSceneBase @@ -534,6 +546,7 @@ abstract class GraphicSceneBase pixi: Application; // Pixi 渲染器 viewport: Viewport; // 视口 canvas: JlCanvas; // 画布 + _loaded = false; // 是否已经加载 _dom?: HTMLElement; // 场景绑定到的dom节点 _viewportResizer?: NodeJS.Timeout; // 自动根据dom大小变化调整视口尺寸 graphicTemplateMap: Map = new Map< @@ -630,11 +643,7 @@ abstract class GraphicSceneBase return this.queryStore.getAllGraphics().filter((g) => g.selected); } - /** - * 重新加载数据 - */ - async reload(): Promise { - this.graphicStore.clear(); + private async load(): Promise { if (this._options.dataLoader) { const storage = await this._options.dataLoader(); if (storage.canvasProperty) { @@ -644,6 +653,25 @@ abstract class GraphicSceneBase await this.loadGraphic(storage.datas); } } + this._loaded = true; + } + + /** + * 重新加载数据 + */ + async reload(): Promise { + if (!this._loaded) { + this.graphicStore.clear(); + await this.load(); + } else { + console.debug('场景已经加载过数据,不重新加载', this); + } + } + + async forceReload(): Promise { + console.debug('场景强制重新加载数据', this); + this.graphicStore.clear(); + await this.load(); } /** @@ -712,6 +740,28 @@ abstract class GraphicSceneBase } } + /** + * 暂停 + */ + private pause() { + // 暂停动画 + this.animationManager.pause(); + // 取消消息订阅 + this.wsMsgBroker.unsubscribeAll(); + // 关闭所有上下文菜单 + this.menuPlugin.closeAll(); + } + + /** + * 恢复 + */ + private resume() { + // 恢复动画 + this.animationManager.resume(); + // 重新订阅 + this.wsMsgBroker.resubscribeAll(); + } + bindDom(dom: HTMLElement): void { this._dom = dom; this.pixi.resizeTo = dom; @@ -726,8 +776,8 @@ abstract class GraphicSceneBase // ); this.updateViewport(dom.clientWidth, dom.clientHeight); }, 1000); - // 恢复动画 - this.animationManager.resume(); + // 恢复 + this.resume(); } unbindDom(): void { @@ -735,8 +785,8 @@ abstract class GraphicSceneBase clearInterval(this._viewportResizer); this._dom.removeChild(this.pixi.view as unknown as Node); this._dom = undefined; - // 暂停动画 - this.animationManager.pause(); + // 暂停 + this.pause(); } } /** @@ -1096,6 +1146,11 @@ export interface IGraphicApp extends IGraphicScene { * @returns */ getScene(code: string): IGraphicScene; + /** + * 切换场景 + * @param dom + */ + switchScene(code: string, dom: HTMLElement): void; /** * 移除指定code场景 * @param code @@ -1197,6 +1252,18 @@ export class GraphicApp extends GraphicSceneBase implements IGraphicApp { return scene; } + switchScene(code: string, dom: HTMLElement): void { + const scene = this.getScene(code); + // eslint-disable-next-line @typescript-eslint/no-unused-vars + for (const [_code, pre] of this.scenes) { + if (pre.dom === dom) { + pre.unbindDom(); + break; + } + } + scene.bindDom(dom); + } + removeScene(code: string): void { const scene = this.scenes.get(code); if (scene) { diff --git a/src/jl-graphic/message/MessageBroker.ts b/src/jl-graphic/message/MessageBroker.ts index 99c9d1f..cec650b 100644 --- a/src/jl-graphic/message/MessageBroker.ts +++ b/src/jl-graphic/message/MessageBroker.ts @@ -222,17 +222,23 @@ export class AppWsMsgBroker { } } - unsbuscribeAll() { + unsubscribeAll() { this.subscriptions.forEach((record, destination) => { this.unsbuscribe(destination); }); } + resubscribeAll() { + this.subscriptions.forEach((handler, destination) => { + WsMsgCli.registerSubscription(destination, handler); + }); + } + /** * 取消所有订阅，从通用Stomp客户端移除此消息代理 */ close() { WsMsgCli.removeAppMsgBroker(this); - this.unsbuscribeAll(); + this.unsubscribeAll(); } } diff --git a/src/jl-graphic/plugins/CopyPlugin.ts b/src/jl-graphic/plugins/CopyPlugin.ts index 0821cae..381d875 100644 --- a/src/jl-graphic/plugins/CopyPlugin.ts +++ b/src/jl-graphic/plugins/CopyPlugin.ts @@ -3,6 +3,9 @@ import { IGraphicScene } from '../app'; import { JlGraphic } from '../core'; import { KeyListener } from './KeyboardPlugin'; +/** + * 图形复制插件 + */ export class GraphicCopyPlugin { container: Container; scene: IGraphicScene; diff --git a/src/jl-graphic/ui/ContextMenu.ts b/src/jl-graphic/ui/ContextMenu.ts index 065a268..8d56524 100644 --- a/src/jl-graphic/ui/ContextMenu.ts +++ b/src/jl-graphic/ui/ContextMenu.ts @@ -91,6 +91,14 @@ export class ContextMenuPlugin { this.app.pixi.stage.removeChild(menu); } } + /** + * 关闭所有菜单 + */ + closeAll() { + this.contextMenuMap.forEach((cm) => { + this.close(cm); + }); + } /** * 越界检查 * @param menu