删除交互插件destroy接口

调整绘图应用example布局页面及resize处理

README.md

@@ -17,7 +17,7 @@ viewport 使用的 github 开源的 pixi-viewport[pixi-viewport](https://github.
 - 菜单事件及处理，功能：菜单更新、菜单项显隐控制、菜单执行前后事件回调
 - 打包
 - 添加拖拽轨迹限制功能
-- 添加图形对象 可编辑属性 定义功能
+- 添加图形对象"可编辑属性"定义功能
 
 # pixijs 一些概念
 

src/jlgraphic/app/JlGraphicApp.ts

@@ -378,10 +378,10 @@ export class GraphicApp extends EventEmitter<GraphicAppEvents> {
     this.interactiveTypeOptions = { interactiveGraphicTypeIncludes: [] };
     // 创建pixi渲染app
     this.app = new Application({
-      width: dom.clientWidth,
+      // width: dom.clientWidth,
-      height: dom.clientHeight,
+      // height: dom.clientHeight,
       antialias: true,
-      resizeTo: window,
+      resizeTo: dom,
     });
     dom.appendChild(this.app.view as unknown as Node);
 
@@ -443,7 +443,9 @@ export class GraphicApp extends EventEmitter<GraphicAppEvents> {
     // 图形变换插件
     GraphicTransformPlugin.new(this).resume();
 
+    // 动画控制
     this.app.ticker.add((dt: number) => {
+      // 暂时遍历所有图形对象，TODO:后需改完只处理有动画的对象
       this.queryStore.getAllGraphics().forEach((g) => {
         g.animationMap.forEach((animation) => {
           if (animation.running) {
@@ -899,7 +901,7 @@ export class GraphicApp extends EventEmitter<GraphicAppEvents> {
       }
     }
     this.interactionPluginMap.forEach((plugin) => {
-      plugin.destroy();
+      plugin.pause();
     });
     this.canvas.destroy(true);
     this.viewport.destroy();

src/jlgraphic/plugins/InteractionPlugin.ts

@@ -33,10 +33,6 @@ export interface InteractionPlugin {
    * 是否生效
    */
   isActive(): boolean;
-  /**
-   * 关闭绑定的交互事件，清理插件相关数据(如需要),从app中移除
-   */
-  destroy(): void;
 }
 
 export abstract class BaseInteractionPlugin implements InteractionPlugin {
@@ -76,13 +72,6 @@ export abstract class BaseInteractionPlugin implements InteractionPlugin {
   isActive(): boolean {
     return !this._pause;
   }
-  /**
-   * 关闭绑定的交互事件，清理插件相关数据(如需要),从app中移除
-   */
-  destroy(): void {
-    this.pause();
-    this.app.removeInteractionPlugin(this);
-  }
 }
 
 export class AppDragEvent {
@@ -457,9 +446,4 @@ export abstract class GraphicInteractionPlugin<G extends JlGraphic>
    * @param g 图形对象
    */
   abstract unbind(g: G): void;
-
-  destroy(): void {
-    this.pause();
-    this.app.removeInteractionPlugin(this);
-  }
 }

src/layouts/DrawLayout.vue

@@ -13,14 +13,119 @@
 
         <q-btn dense flat round icon="menu" @click="toggleRightDrawer" />
       </q-toolbar>
+      <q-resize-observer @resize="onHeaderResize" />
     </q-header>
 
-    <q-drawer v-model="leftDrawerOpen" side="left" overlay>
+    <q-drawer v-model="leftDrawerOpen" bordered side="left">
+      <q-resize-observer @resize="onLeftResize" />
       <!-- drawer content -->
+      <q-list bordered padding class="rounded-borders text-primary">
+        <q-item
+          clickable
+          v-ripple
+          :active="link === 'inbox'"
+          @click="link = 'inbox'"
+          active-class="my-menu-link"
+        >
+          <q-item-section avatar>
+            <q-icon name="inbox" />
+          </q-item-section>
+
+          <q-item-section>Inbox</q-item-section>
+        </q-item>
+
+        <q-item
+          clickable
+          v-ripple
+          :active="link === 'outbox'"
+          @click="link = 'outbox'"
+          active-class="my-menu-link"
+        >
+          <q-item-section avatar>
+            <q-icon name="send" />
+          </q-item-section>
+
+          <q-item-section>Outbox</q-item-section>
+        </q-item>
+
+        <q-item
+          clickable
+          v-ripple
+          :active="link === 'trash'"
+          @click="link = 'trash'"
+          active-class="my-menu-link"
+        >
+          <q-item-section avatar>
+            <q-icon name="delete" />
+          </q-item-section>
+
+          <q-item-section>Trash</q-item-section>
+        </q-item>
+
+        <q-separator spaced />
+
+        <q-item
+          clickable
+          v-ripple
+          :active="link === 'settings'"
+          @click="link = 'settings'"
+          active-class="my-menu-link"
+        >
+          <q-item-section avatar>
+            <q-icon name="settings" />
+          </q-item-section>
+
+          <q-item-section>Settings</q-item-section>
+        </q-item>
+
+        <q-item
+          clickable
+          v-ripple
+          :active="link === 'help'"
+          @click="link = 'help'"
+          active-class="my-menu-link"
+        >
+          <q-item-section avatar>
+            <q-icon name="help" />
+          </q-item-section>
+
+          <q-item-section>Help</q-item-section>
+        </q-item>
+      </q-list>
     </q-drawer>
 
-    <q-drawer show-if-above v-model="rightDrawerOpen" side="right">
+    <q-drawer show-if-above bordered v-model="rightDrawerOpen" side="right">
+      <q-resize-observer @resize="onRightResize" />
       <!-- drawer content -->
+      <q-list bordered padding class="rounded-borders text-primary">
+        <q-item
+          clickable
+          v-ripple
+          :active="link === 'inbox'"
+          @click="link = 'inbox'"
+          active-class="my-menu-link"
+        >
+          <q-item-section avatar>
+            <q-icon name="inbox" />
+          </q-item-section>
+
+          <q-item-section>Inbox</q-item-section>
+        </q-item>
+
+        <q-item
+          clickable
+          v-ripple
+          :active="link === 'outbox'"
+          @click="link = 'outbox'"
+          active-class="my-menu-link"
+        >
+          <q-item-section avatar>
+            <q-icon name="send" />
+          </q-item-section>
+
+          <q-item-section>Outbox</q-item-section>
+        </q-item>
+      </q-list>
     </q-drawer>
 
     <q-page-container>
@@ -30,21 +135,23 @@
 </template>
 
 <script setup lang="ts">
-import { Point } from 'pixi.js';
 import { initDrawApp, loadDrawDatas } from 'src/examples/app';
-import { Link } from 'src/graphics/link/Link';
+import { JlDrawApp } from 'src/jlgraphic';
-import { GraphicIdGenerator, JlDrawApp } from 'src/jlgraphic';
 import { onMounted, onUnmounted, ref } from 'vue';
 
 const leftDrawerOpen = ref(false);
 const rightDrawerOpen = ref(false);
 function toggleLeftDrawer() {
   leftDrawerOpen.value = !leftDrawerOpen.value;
+  onResize();
 }
 function toggleRightDrawer() {
   rightDrawerOpen.value = !rightDrawerOpen.value;
+  onResize();
 }
 
+const link = ref('outbox');
+
 let drawApp: JlDrawApp | null = null;
 onMounted(() => {
   const dom = document.getElementById('draw-app-container');
@@ -52,13 +159,43 @@ onMounted(() => {
     drawApp = new JlDrawApp(dom);
     initDrawApp(drawApp);
     loadDrawDatas(drawApp);
-    window.addEventListener('resize', onResize);
   }
 });
 
+const canvasWidth = ref(0);
+const canvasHeight = ref(0);
+const headerHeight = ref(0);
+const leftWidth = ref(0);
+const rightWidth = ref(0);
+
+function onHeaderResize(size: { height: number; width: number }) {
+  headerHeight.value = size.height;
+  onResize();
+}
+function onLeftResize(size: { height: number; width: number }) {
+  leftWidth.value = size.width;
+  onResize();
+}
+function onRightResize(size: { height: number; width: number }) {
+  rightWidth.value = size.width;
+  onResize();
+}
+
 function onResize() {
+  const clientWidth = document.body.clientWidth;
+  const clientHeight = document.body.clientHeight;
+  canvasWidth.value =
+    clientWidth -
+    (leftDrawerOpen.value ? leftWidth.value : 0) -
+    (rightDrawerOpen.value ? rightWidth.value : 0);
+  canvasHeight.value = clientHeight - headerHeight.value;
+  const dom = document.getElementById('draw-app-container');
+  if (dom) {
+    dom.style.width = canvasWidth.value + 'px';
+    dom.style.height = canvasHeight.value + 'px';
+  }
   if (drawApp) {
-    drawApp.onDomResize(document.body.clientWidth, document.body.clientHeight);
+    drawApp.onDomResize(canvasWidth.value, canvasHeight.value);
   }
 }
 
@@ -66,6 +203,5 @@ onUnmounted(() => {
   if (drawApp) {
     drawApp.destroy();
   }
-  window.removeEventListener('resize', onResize);
 });
 </script>