66 feature鼠标中键进行画布拖拽的功能有点局限

packages/core/src/services/mouse.ts

@@ -6,6 +6,13 @@ export class Mouse extends Service {
   constructor(app: App) {
     super(app);
 
+    this.bindMouseEvent();
+    this.app.stage.on<'dragstart'>('dragstart', this.onDragStart);
+    this.app.stage.on<'dragend'>('dragend', this.onDragEnd);
+    this.app.stage.on<'wheel'>('wheel', this.onWheel);
+  }
+
+  private bindMouseEvent(): void {
     this.app.stage.on<'mousedown'>('mousedown', this.onMouseDown);
     this.app.stage.on<'mouseup'>('mouseup', this.onMouseUp);
     this.app.stage.on<'mousemove'>('mousemove', this.onMouseMove);
@@ -14,55 +21,54 @@ export class Mouse extends Service {
     this.app.stage.on<'dblclick'>('dblclick', this.onMouseDoubleClick);
     this.app.stage.on<'click'>('click', this.onMouseClick);
     this.app.stage.on<'contextmenu'>('contextmenu', this.onMouseContextmenu);
-    this.app.stage.on<'wheel'>('wheel', this.onWheel);
   }
 
+  // 释放鼠标事件
+  private unbindMouseEvent(): void {
+    this.app.stage.off('mousedown', this.onMouseDown);
+    this.app.stage.off('mouseup', this.onMouseUp);
+    this.app.stage.off('mousemove', this.onMouseMove);
+    this.app.stage.off('mouseover', this.onMouseOver);
+    this.app.stage.off('mouseout', this.onMouseOut);
+    this.app.stage.off('dblclick', this.onMouseDoubleClick);
+    this.app.stage.off('click', this.onMouseClick);
+    this.app.stage.off('contextmenu', this.onMouseContextmenu);
+  }
+
+  private onDragStart = (): void => {
+    this.unbindMouseEvent();
+  };
+
+  private onDragEnd = (event: KonvaMouseEvent): void => {
+    this.bindMouseEvent();
+    this.app.emit('mouse:up', { event });
+  };
+
   private onMouseDown = (event: KonvaMouseEvent): void => {
-    if (this.app.stage.draggable()) {
-      return;
-    }
     this.app.emit('mouse:down', { event });
   };
 
   private onMouseUp = (event: KonvaMouseEvent): void => {
-    if (this.app.stage.draggable()) {
-      return;
-    }
     this.app.emit('mouse:up', { event });
   };
 
   private onMouseMove = (event: KonvaMouseEvent): void => {
-    if (this.app.stage.draggable()) {
-      return;
-    }
     this.app.emit('mouse:move', { event });
   };
 
   private onMouseOver = (event: KonvaMouseEvent): void => {
-    if (this.app.stage.draggable()) {
-      return;
-    }
     this.app.emit('mouse:over', { event });
   };
 
   private onMouseOut = (event: KonvaMouseEvent): void => {
-    if (this.app.stage.draggable()) {
-      return;
-    }
     this.app.emit('mouse:out', { event });
   };
 
   private onMouseDoubleClick = (event: KonvaMouseEvent): void => {
-    if (this.app.stage.draggable()) {
-      return;
-    }
     this.app.emit('mouse:dbclick', { event });
   };
 
   private onMouseClick = (event: KonvaMouseEvent): void => {
-    if (this.app.stage.draggable()) {
-      return;
-    }
     this.app.emit('mouse:click', { event });
   };
 
@@ -111,14 +117,9 @@ export class Mouse extends Service {
   };
 
   public destroy(): void {
-    this.app.stage.off('mousedown', this.onMouseDown);
-    this.app.stage.off('mouseup', this.onMouseUp);
-    this.app.stage.off('mousemove', this.onMouseMove);
-    this.app.stage.off('mouseover', this.onMouseOver);
-    this.app.stage.off('mouseout', this.onMouseOut);
-    this.app.stage.off('dblclick', this.onMouseDoubleClick);
-    this.app.stage.off('click', this.onMouseClick);
-    this.app.stage.off('contextmenu', this.onMouseContextmenu);
+    this.unbindMouseEvent();
+    this.app.stage.off('dragstart', this.onDragStart);
+    this.app.stage.off('dragend', this.onDragEnd);
     this.app.stage.off('wheel', this.onWheel);
   }
 }

pictode/src/hooks/usePictode.ts

@@ -81,16 +81,32 @@ export const usePictode = () => {
     scale.value = newScale;
   };
 
+  const onMouseDown = ({ event }: EventArgs['mouse:down']) => {
+    if (event.evt.button === 1) {
+      app.triggerPanning(true);
+    }
+  };
+
+  const onMouseUp = ({ event }: EventArgs['mouse:up']) => {
+    if (event.evt.button === 1) {
+      app.triggerPanning(false);
+    }
+  };
+
   onMounted(() => {
     app.on('selected:changed', onSelectedChanged);
     app.on('tool:changed', onToolChanged);
     app.on('canvas:zoom:end', onZoomEnd);
+    app.on('mouse:down', onMouseDown);
+    app.on('mouse:up', onMouseUp);
   });
 
   onUnmounted(() => {
     app.off('selected:changed', onSelectedChanged);
     app.off('tool:changed', onToolChanged);
     app.off('canvas:zoom:end', onZoomEnd);
+    app.off('mouse:down', onMouseDown);
+    app.off('mouse:up', onMouseUp);
   });
 
   provide(PictodeAppKey, app);