feat: continue click event

F-star · Jun 23, 2024 · 5fee98c · 5fee98c
1 parent f2d86c4
commit 5fee98c
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 18 deletions.
diff --git a/packages/core/src/host_event_manager/host_event_manager.ts b/packages/core/src/host_event_manager/host_event_manager.ts
@@ -11,6 +11,7 @@ interface Events {
   spaceToggle(press: boolean): void;
   wheelBtnToggle(press: boolean, event: PointerEvent): void;
   contextmenu(point: IPoint): void;
+  continueClick(): void;
 }
 
 /**
@@ -84,26 +85,42 @@ export class HostEventManager {
   }
 
   private bindMouseRecordEvent() {
-    const handler = (event: PointerEvent) => {
-      if (event.button !== 1) return;
-
-      const prevWheelBtnPressing = this.isWheelBtnPressing;
-      this.isWheelBtnPressing = event.type === 'pointerdown';
-      if (prevWheelBtnPressing !== this.isWheelBtnPressing) {
-        this.eventEmitter.emit(
-          'wheelBtnToggle',
-          this.isWheelBtnPressing,
-          event,
-        );
+    let pointerDownTimeStamp = -Infinity;
+
+    const handlePointerEvent = (event: PointerEvent) => {
+      // mouse left
+      if (event.button === 0 && event.type === 'pointerdown') {
+        const now = new Date().getTime();
+        if (
+          now - pointerDownTimeStamp <
+          this.editor.setting.get('continueSelectMaxGap')
+        ) {
+          pointerDownTimeStamp = now;
+          this.eventEmitter.emit('continueClick');
+        }
+        pointerDownTimeStamp = now;
+      }
+
+      // mouse middle
+      if (event.button === 1) {
+        const prevWheelBtnPressing = this.isWheelBtnPressing;
+        this.isWheelBtnPressing = event.type === 'pointerdown';
+        if (prevWheelBtnPressing !== this.isWheelBtnPressing) {
+          this.eventEmitter.emit(
+            'wheelBtnToggle',
+            this.isWheelBtnPressing,
+            event,
+          );
+        }
       }
     };
 
-    document.addEventListener('pointerdown', handler);
-    document.addEventListener('pointerup', handler);
+    document.addEventListener('pointerdown', handlePointerEvent);
+    document.addEventListener('pointerup', handlePointerEvent);
 
     this.unbindHandlers.push(() => {
-      document.removeEventListener('pointerdown', handler);
-      document.removeEventListener('pointerup', handler);
+      document.removeEventListener('pointerdown', handlePointerEvent);
+      document.removeEventListener('pointerup', handlePointerEvent);
     });
   }
 

diff --git a/packages/core/src/setting.ts b/packages/core/src/setting.ts
@@ -124,6 +124,8 @@ export class Setting {
     angleBase: { x: 0, y: -1 }, // no use now
 
     flipObjectsWhileResizing: true,
+
+    continueSelectMaxGap: 400, // millisecond
   };
   toggle<K extends BooleanKeys<Setting['value']>>(key: K) {
     const value = this.value[key];

diff --git a/packages/core/src/tools/tool_select/tool_select.ts b/packages/core/src/tools/tool_select/tool_select.ts
@@ -55,7 +55,7 @@ export class SelectTool implements ITool {
   };
 
   // double click to active path editor
-  private onDblClick = () => {
+  private onContinueClick = () => {
     const point = this.editor.toolManager.getCurrPoint();
     const editor = this.editor;
     const handleInfo = editor.controlHandleManager.getHandleInfoByPoint(point);
@@ -92,14 +92,14 @@ export class SelectTool implements ITool {
       'hoverItemChange',
       this.handleHoverItemChange,
     );
-    this.editor.canvasElement.addEventListener('dblclick', this.onDblClick);
+    this.editor.hostEventManager.on('continueClick', this.onContinueClick);
   }
   onInactive() {
     this.editor.selectedElements.off(
       'hoverItemChange',
       this.handleHoverItemChange,
     );
-    this.editor.canvasElement.removeEventListener('dblclick', this.onDblClick);
+    this.editor.hostEventManager.off('continueClick', this.onContinueClick);
     this.editor.render();
   }