fix: 移除辅助线后解除事件，修复拖拽辅助线时右键导致报错；重写getGap函数 (ikuaitu#160)

develop-assistant · Apr 15, 2023 · 5bc2369 · 5bc2369
1 parent 73e3de1
commit 5bc2369
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 32 deletions.
diff --git a/src/core/ruler/guideline.ts b/src/core/ruler/guideline.ts
@@ -37,7 +37,7 @@ export function setupGuideLine() {
       this.on('mousedown:before', (e) => {
         if (this.activeOn === 'down') {
           // 设置selectable:false后激活对象才能进行移动
-          this.canvas.setActiveObject(this, e);
+          this.canvas.setActiveObject(this, e.e);
         }
       });
 
@@ -49,7 +49,7 @@ export function setupGuideLine() {
         }
         this.canvas.fire('guideline:moving', {
           target: this,
-          e,
+          e: e.e,
         });
       });
 
@@ -63,9 +63,16 @@ export function setupGuideLine() {
         this.moveCursor = this.isHorizontal() ? 'ns-resize' : 'ew-resize';
         this.canvas.fire('guideline:mouseup', {
           target: this,
-          e,
+          e: e.e,
         });
       });
+
+      this.on('removed', () => {
+        this.off('removed');
+        this.off('mousedown:before');
+        this.off('moving');
+        this.off('mouseup');
+      });
     },
 
     getBoundingRect: function (absolute, calculate) {

diff --git a/src/core/ruler/type.d.ts b/src/core/ruler/type.d.ts
@@ -2,14 +2,16 @@
 import type CanvasRuler, { Rect } from './ruler';
 
 declare module 'fabric/fabric-impl' {
+  type EventNameExt = 'removed' | EventName;
+
   export interface Canvas {
     _setupCurrentTransform(e: Event, target: fabric.Object, alreadySelected: boolean): void;
   }
 
   export interface IObservable<T> {
     on(
       eventName: 'guideline:moving' | 'guideline:mouseup',
-      handler: (event: { target: GuideLine; e: IEvent<WheelEvent> }) => void
+      handler: (event: { e: Event; target: fabric.GuideLine }) => void
     ): T;
   }
 
@@ -19,18 +21,16 @@ declare module 'fabric/fabric-impl' {
 
   export interface IGuideLineClassOptions extends IGuideLineOptions {
     canvas: {
-      setActiveObject(
-        object: fabric.Object | IGuideLineClassOptions,
-        e?: Event | IEvent<MouseEvent>
-      ): Canvas;
-      remove<T>(...object: (fabric.Object | IGuideLineClassOptions)[]): T;
+      setActiveObject(object: fabric.Object | fabric.GuideLine, e?: Event): Canvas;
+      remove<T>(...object: (fabric.Object | fabric.GuideLine)[]): T;
     } & Canvas;
     activeOn: 'down' | 'up';
     initialize(xy: number, objObjects: IGuideLineOptions): void;
     callSuper(methodName: string, ...args: unknown[]): any;
     getBoundingRect(absolute?: boolean, calculate?: boolean): Rect;
-    on(eventName: EventName, handler: (e: IEvent<MouseEvent>) => void): T;
-    fire<T>(eventName: string, options?: any): T;
+    on(eventName: EventNameExt, handler: (e: IEvent<MouseEvent>) => void): void;
+    off(eventName: EventNameExt, handler?: (e: IEvent<MouseEvent>) => void): void;
+    fire<T>(eventName: EventNameExt, options?: any): T;
     isPointOnRuler(e: MouseEvent): 'horizontal' | 'vertical' | false;
     bringToFront(): fabric.Object;
     isHorizontal(): boolean;

diff --git a/src/core/ruler/utils.ts b/src/core/ruler/utils.ts
@@ -7,27 +7,15 @@ import { fabric } from 'fabric';
  * @returns 返回计算出的尺子间距
  */
 const getGap = (zoom: number) => {
-  const zooms = [0, 0.02, 0.03, 0.05, 0.1, 0.2, 0.5, 1, 2, 5, 10, 20];
-  const gaps = [5000, 5000, 2500, 1000, 500, 250, 100, 50, 25, 10, 5, 2];
-  let gap = 50;
-  zooms.some(function (value, index) {
-    if (zooms[index + 1]) {
-      if (value <= zoom && zooms[index + 1] >= zoom) {
-        if (zooms[index] == zoom) {
-          gap = gaps[index];
-        } else if (zooms[index + 1] == zoom) {
-          gap = gaps[index + 1];
-        } else {
-          gap = gaps[index];
-        }
-        return true;
-      }
-    } else {
-      gap = gaps[index];
-      return true;
-    }
-  });
-  return gap;
+  const zooms = [0.02, 0.03, 0.05, 0.1, 0.2, 0.5, 1, 2, 5, 10, 18];
+  const gaps = [5000, 2500, 1000, 500, 250, 100, 50, 25, 10, 5, 2];
+
+  let i = 0;
+  while (i < zooms.length && zooms[i] < zoom) {
+    i++;
+  }
+
+  return gaps[i - 1] || 5000;
 };
 
 /**