添加画布接口，调整相关引入

src/jlgraphic/app/BasicOperation.ts

@@ -1,19 +1,19 @@
 import { GraphicData, JlGraphic } from '../core';
 import { JlOperation } from '../operation';
-import { ICanvasProperties, IGraphicApp, JlCanvas } from './JlGraphicApp';
+import { ICanvasProperties, IGraphicApp, IJlCanvas } from './JlGraphicApp';
 
 /**
  * 更新画布操作
  */
 export class UpdateCanvasOperation extends JlOperation {
-  obj: JlCanvas;
+  obj: IJlCanvas;
   old: ICanvasProperties;
   data: ICanvasProperties;
   description = '';
 
   constructor(
     app: IGraphicApp,
-    obj: JlCanvas,
+    obj: IJlCanvas,
     old: ICanvasProperties,
     data: ICanvasProperties
   ) {

src/jlgraphic/app/JlDrawApp.ts

@@ -32,7 +32,7 @@ import {
   GraphicAppOptions,
   ICanvasProperties,
   IGraphicApp,
-  JlCanvas,
+  IJlCanvas,
 } from './JlGraphicApp';
 
 /**
@@ -76,7 +76,7 @@ export abstract class GraphicDrawAssistant<
     this.app.registerGraphicTemplates(this.graphicTemplate);
   }
 
-  public get canvas(): JlCanvas {
+  public get canvas(): IJlCanvas {
     return this.app.canvas;
   }
 

src/jlgraphic/app/JlGraphicApp.ts

@@ -114,7 +114,37 @@ export class CanvasData implements ICanvasProperties {
   }
 }
 
-export class JlCanvas extends Container {
+export interface IJlCanvas extends Container {
+  /**
+   * 获取画布属性
+   */
+  get properties(): ICanvasProperties;
+  /**
+   * 获取所属场景
+   */
+  get scene(): IGraphicScene;
+  /**
+   * 更新画布属性
+   * @param properties
+   */
+  update(properties: ICanvasProperties): void;
+  /**
+   * 添加辅助附加元素
+   * @param appends
+   */
+  addAssistantAppends(...appends: DisplayObject[]): void;
+  /**
+   * 移除辅助附加元素
+   * @param appends
+   */
+  removeAssistantAppends(...appends: DisplayObject[]): void;
+  /**
+   * 保存画布及视口缩放数据
+   */
+  saveData(): ICanvasProperties;
+}
+
+export class JlCanvas extends Container implements IJlCanvas {
   __JlCanvas = true;
   type = 'Canvas';
   scene: IGraphicScene;
@@ -382,7 +412,7 @@ export interface IGraphicScene extends EventEmitter<GraphicAppEvents> {
   /**
    * 获取画布对象
    */
-  get canvas(): JlCanvas;
+  get canvas(): IJlCanvas;
   /**
    * 获取dom
    */
@@ -1034,6 +1064,8 @@ abstract class GraphicSceneBase
    */
   destroy(): void {
     console.debug('场景销毁', this);
+    this.unbindDom();
+
     if (this.wsMsgBroker) {
       this.wsMsgBroker.close();
     }
@@ -1044,7 +1076,6 @@ abstract class GraphicSceneBase
     this.canvas.destroy(true);
     this.viewport.destroy();
     this.pixi.destroy(true, true);
-    this.unbindDom();
   }
 }
 

src/jlgraphic/app/index.ts

@@ -14,6 +14,7 @@ import {
   GraphicAppOptions,
   IGraphicApp,
   IGraphicStorage,
+  IJlCanvas,
 } from './JlGraphicApp';
 
 /**
@@ -34,10 +35,11 @@ export function newDrawApp(options: DrawAppOptions): IDrawApp {
   return new JlDrawApp(options);
 }
 
-export { AppConsts, JlCanvas, GraphicDrawAssistant };
+export { AppConsts, GraphicDrawAssistant };
 export type {
   ICanvasProperties,
   IGraphicScene,
+  IJlCanvas,
   IGraphicApp,
   IGraphicStorage,
   IDrawApp,

src/jlgraphic/core/JlGraphic.ts

@@ -10,7 +10,7 @@ import {
   Point,
   Rectangle,
 } from 'pixi.js';
-import { AppConsts, JlCanvas } from '../app';
+import { AppConsts, IJlCanvas } from '../app';
 import {
   convertRectangleToPolygonPoints,
   recursiveChildren,
@@ -277,7 +277,7 @@ DisplayObject.prototype.getCanvas = function getCanvas() {
     graphic = graphic.parent;
   }
   if (graphic) {
-    return graphic as JlCanvas;
+    return graphic as IJlCanvas;
   }
   throw new Error(`图形${this.name}不在画布中`);
 };

src/jlgraphic/global.d.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 declare namespace GlobalMixins {
-  type JlCanvasType = import('./app').JlCanvas;
+  type JlCanvasType = import('./app').IJlCanvas;
   type CanvasProperties = import('./app').ICanvasProperties;
   type GraphicApp = import('./app').IGraphicApp;
   type JlGraphicType = import('./core').JlGraphic;

src/jlgraphic/plugins/CommonMousePlugin.ts

@@ -1,5 +1,5 @@
 import { DisplayObject, FederatedMouseEvent, Graphics, Point } from 'pixi.js';
-import { IGraphicScene, JlCanvas } from '../app';
+import { IGraphicScene } from '../app';
 import { JlGraphic } from '../core';
 import {
   AppDragEvent,
@@ -173,8 +173,9 @@ export class CommonMouseTool extends AppInteractionPlugin {
   }
 
   setCursor(e: FederatedMouseEvent) {
-    this.rightTarget = e.target as DisplayObject;
-    if (e.target instanceof JlCanvas && this.app.pixi.view.style) {
+    const target = e.target as DisplayObject;
+    this.rightTarget = target;
+    if (target.isCanvas() && this.app.pixi.view.style) {
       this.app.pixi.view.style.cursor = 'grab';
     }
   }
@@ -182,7 +183,7 @@ export class CommonMouseTool extends AppInteractionPlugin {
   resumeCursor() {
     if (
       this.rightTarget &&
-      this.rightTarget instanceof JlCanvas &&
+      this.rightTarget.isCanvas() &&
       this.app.pixi.view.style
     ) {
       this.app.pixi.view.style.cursor = 'inherit';
@@ -248,7 +249,7 @@ export class CommonMouseTool extends AppInteractionPlugin {
         }
       } else {
         // 非多选
-        if (e.target instanceof JlCanvas) {
+        if ((e.target as DisplayObject).isCanvas()) {
           this.app.updateSelected();
         } else {
           if (

src/layouts/DrawLayout.vue

@@ -122,9 +122,6 @@
 <script setup lang="ts">
 import { useQuasar } from 'quasar';
 import DrawProperties from 'src/components/draw-app/DrawProperties.vue';
-import { getDrawApp, loadDrawDatas } from 'src/examples/app';
-import { getWebsocketUrl } from 'src/examples/app/configs/UrlManage';
-import { ClientEngine } from 'src/jlgraphic';
 import { useDrawStore } from 'src/stores/draw-store';
 import { onMounted, onUnmounted, ref } from 'vue';
 import { useRouter } from 'vue-router';

src/stores/draw-store.ts

@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia';
 import { destroyDrawApp, getDrawApp, initDrawApp } from 'src/examples/app';
-import { DrawAssistant, JlCanvas, IDrawApp, JlGraphic } from 'src/jlgraphic';
+import { DrawAssistant, IDrawApp, JlGraphic } from 'src/jlgraphic';
+import { IJlCanvas } from 'src/jlgraphic/app/JlGraphicApp';
 
 export const useDrawStore = defineStore('draw', {
   state: () => ({
@@ -48,7 +49,7 @@ export const useDrawStore = defineStore('draw', {
       }
       return app;
     },
-    getJlCanvas(): JlCanvas {
+    getJlCanvas(): IJlCanvas {
       return this.getDrawApp().canvas;
     },
     initDrawApp() {