界面调整

src/jlgraphic/app/JlGraphicApp.ts

@@ -569,11 +569,11 @@ export class GraphicApp extends EventEmitter<GraphicAppEvents> {
 
   /**
    * dom尺寸变更处理
-   * @param width canvas容器的宽
-   * @param height canvas容器的高
+   * @param domWidth canvas容器的宽
+   * @param domHeight canvas容器的高
    */
-  onDomResize(width: number, height: number) {
-    this.updateViewport(width, height);
+  onDomResize(domWidth: number, domHeight: number) {
+    this.updateViewport(domWidth, domHeight);
   }
 
   public get queryStore(): GraphicQueryStore {

src/jlgraphic/core/JlGraphic.ts

@@ -503,18 +503,6 @@ export interface GraphicState {
 
 export interface GraphicAnimationOptions {
   name: string;
-  /**
-   * 位移路径
-   */
-  path?: IPointData[];
-  /**
-   * 是否循环运动(运动到终点后重新从开始运动)，与moveToAndFro互斥
-   */
-  cycleMove?: boolean;
-  /**
-   * 是否往复运动(运动到终点后从终点往回运动)，与cycleMove互斥
-   */
-  moveToAndFro?: boolean;
 
   run?: (dt: number) => void;
 }
@@ -526,12 +514,10 @@ export class GraphicAnimation {
    * 倍速
    */
   _xSpeed: number;
-  _finish: boolean;
   constructor(options: GraphicAnimationOptions) {
     this.options = options;
     this._running = false;
     this._xSpeed = 1;
-    this._finish = false;
   }
 
   static init(options: GraphicAnimationOptions) {

src/jlgraphic/plugins/InteractionPlugin.ts

@@ -272,6 +272,10 @@ export class DragPlugin extends BaseInteractionPlugin {
 export class ViewportMovePlugin extends BaseInteractionPlugin {
   static Name = '__viewport_move_plugin';
 
+  static MoveInterval = 20; // 移动间隔，单位ms
+  static TriggerRange = 100; // 边界触发范围,单位px
+  static DefaultMoveSpeed = 200 / ViewportMovePlugin.MoveInterval; // 默认移动速度
+
   moveHandler: NodeJS.Timeout | null = null;
   moveSpeedx = 0;
   moveSpeedy = 0;
@@ -305,7 +309,7 @@ export class ViewportMovePlugin extends BaseInteractionPlugin {
           viewport.corner.x + this.moveSpeedx,
           viewport.corner.y + this.moveSpeedy
         );
-      }, 50);
+      }, ViewportMovePlugin.MoveInterval);
     }
   }
 
@@ -317,33 +321,49 @@ export class ViewportMovePlugin extends BaseInteractionPlugin {
     }
   }
 
-  viewportMove(e: FederatedMouseEvent) {
-    const sp = e.global;
-    const viewport = this.app.viewport;
-    const range = 50; // 触发范围和移动速度范围
+  private calculateBoundaryMoveSpeed(sp: Point): {
+    moveSpeedx: number;
+    moveSpeedy: number;
+  } {
     let moveSpeedx = 0;
     let moveSpeedy = 0;
-    const ds = 3; // 移动速度减小比例控制
+    const range = ViewportMovePlugin.TriggerRange;
+    const viewport = this.app.viewport;
     if (sp.x < range) {
-      moveSpeedx = sp.x - range;
+      moveSpeedx = this.calculateMoveSpeed(sp.x - range);
     } else if (sp.x > viewport.screenWidth - range) {
-      moveSpeedx = sp.x + range - viewport.screenWidth;
+      moveSpeedx = this.calculateMoveSpeed(sp.x + range - viewport.screenWidth);
     } else {
       moveSpeedx = 0;
     }
     if (sp.y < range) {
-      moveSpeedy = sp.y - range;
+      moveSpeedy = this.calculateMoveSpeed(sp.y - range);
     } else if (sp.y > viewport.screenHeight - range) {
-      moveSpeedy = sp.y + range - viewport.screenHeight;
+      moveSpeedy = this.calculateMoveSpeed(
+        sp.y + range - viewport.screenHeight
+      );
     } else {
       moveSpeedy = 0;
     }
+    return { moveSpeedx, moveSpeedy };
+  }
+
+  calculateMoveSpeed(dd: number): number {
+    return (
+      (dd / ViewportMovePlugin.TriggerRange) *
+      ViewportMovePlugin.DefaultMoveSpeed
+    );
+  }
+
+  viewportMove(e: FederatedMouseEvent) {
+    const sp = e.global;
+    const { moveSpeedx, moveSpeedy } = this.calculateBoundaryMoveSpeed(sp);
     if (moveSpeedx == 0 && moveSpeedy == 0) {
       this.app.canvas.cursor = 'auto';
       this.stopMove();
     } else {
       this.app.canvas.cursor = 'grab';
-      this.startMove(moveSpeedx / ds, moveSpeedy / ds);
+      this.startMove(moveSpeedx, moveSpeedy);
     }
   }
 }

src/layouts/DrawLayout.vue

@@ -1,5 +1,28 @@
 <template>
-  <q-layout view="lHh Lpr lFf">
+  <q-layout view="hHh LpR fFf">
+    <q-header reveal class="bg-primary text-white">
+      <q-toolbar>
+        <q-btn dense flat round icon="menu" @click="toggleLeftDrawer" />
+
+        <q-toolbar-title>
+          <q-avatar>
+            <img src="https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg" />
+          </q-avatar>
+          Title
+        </q-toolbar-title>
+
+        <q-btn dense flat round icon="menu" @click="toggleRightDrawer" />
+      </q-toolbar>
+    </q-header>
+
+    <q-drawer v-model="leftDrawerOpen" side="left" overlay>
+      <!-- drawer content -->
+    </q-drawer>
+
+    <q-drawer show-if-above v-model="rightDrawerOpen" side="right">
+      <!-- drawer content -->
+    </q-drawer>
+
     <q-page-container>
       <div id="draw-app-container"></div>
     </q-page-container>
@@ -14,9 +37,13 @@ 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;
 }
+function toggleRightDrawer() {
+  rightDrawerOpen.value = !rightDrawerOpen.value;
+}
 
 let drawApp: JlDrawApp | null = null;
 onMounted(() => {
@@ -40,6 +67,5 @@ onUnmounted(() => {
     drawApp.destroy();
   }
   window.removeEventListener('resize', onResize);
-  document.body.style.overflow = 'auto';
 });
 </script>