同步框架代码

src/jl-graphic/app/JlGraphicApp.ts

@@ -445,9 +445,13 @@ export interface IGraphicScene extends EventEmitter<GraphicAppEvents> {
    */
   toCanvasCoordinates(p: Point): Point;
   /**
-   * 加载/重新加载数据
+   * 加载/重新加载数据(若已经加载过，则不会重新加载)
    */
   reload(): Promise<void>;
+  /**
+   * 强制重新加载，无论是否已经加载过
+   */
+  forceReload(): Promise<void>;
   /**
    * 绑定到dom
    * @param dom
@@ -523,6 +527,14 @@ export interface IGraphicScene extends EventEmitter<GraphicAppEvents> {
    * 销毁
    */
   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<string, GraphicTemplate> = new Map<
@@ -630,11 +643,7 @@ abstract class GraphicSceneBase
     return this.queryStore.getAllGraphics().filter((g) => g.selected);
   }
 
-  /**
-   * 重新加载数据
-   */
-  async reload(): Promise<void> {
-    this.graphicStore.clear();
+  private async load(): Promise<void> {
     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<void> {
+    if (!this._loaded) {
+      this.graphicStore.clear();
+      await this.load();
+    } else {
+      console.debug('场景已经加载过数据,不重新加载', this);
+    }
+  }
+
+  async forceReload(): Promise<void> {
+    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) {

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();
   }
 }

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;

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