85 使用装饰器重构插件方法可用性判断

packages/plugin-alignment/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pictode/plugin-alignment",
   "private": false,
-  "version": "1.0.0",
+  "version": "1.0.1",
   "main": "dist/pictode-plugin-alignment.umd.js",
   "module": "dist/pictode-plugin-alignment.mjs",
   "types": "types/index.d.ts",

packages/plugin-alignment/src/alignment.ts

@@ -1,23 +1,8 @@
 import { App, KonvaNode } from '@pictode/core';
+import { EnabledCheck } from '@pictode/utils';
 
 import { Options } from './types';
 
-function enabledCheck(target: Alignment, propertyKey: string, descriptor: PropertyDescriptor) {
-  const originalMethod = descriptor.value; // 保存原始方法
-
-  descriptor.value = function (this: Alignment, ...args: any[]) {
-    if (this.enabled) {
-      // 检查是否启用
-      return originalMethod.apply(this, args); // 如果启用，执行原始方法
-    } else {
-      console.log(`Method ${propertyKey} is disabled.`);
-      // 如果未启用，可以选择抛出错误或者执行其他操作
-    }
-  };
-
-  return descriptor;
-}
-
 export class Alignment {
   public app: App;
   public enabled: boolean;
@@ -28,7 +13,7 @@ export class Alignment {
     this.enabled = enabled;
   }
 
-  @enabledCheck
+  @EnabledCheck
   public alignLeft(nodes: KonvaNode[]): void {
     const clientRects = nodes.map((node) => node.getClientRect());
     const minX = Math.min(...clientRects.map((node) => node.x));
@@ -45,7 +30,7 @@ export class Alignment {
     );
   }
 
-  @enabledCheck
+  @EnabledCheck
   public alignRight(nodes: KonvaNode[]): void {
     const clientRects = nodes.map((node) => node.getClientRect());
     const maxX = Math.max(...clientRects.map((node) => node.x + node.width));
@@ -62,7 +47,7 @@ export class Alignment {
     );
   }
 
-  @enabledCheck
+  @EnabledCheck
   public alignTop(nodes: KonvaNode[]): void {
     const clientRects = nodes.map((node) => node.getClientRect());
     const minY = Math.min(...clientRects.map((node) => node.y));
@@ -79,7 +64,7 @@ export class Alignment {
     );
   }
 
-  @enabledCheck
+  @EnabledCheck
   public alignBottom(nodes: KonvaNode[]): void {
     const clientRects = nodes.map((node) => node.getClientRect());
     const maxY = Math.max(...clientRects.map((node) => node.y + node.height));
@@ -96,7 +81,7 @@ export class Alignment {
     );
   }
 
-  @enabledCheck
+  @EnabledCheck
   public alignCenterX(nodes: KonvaNode[]): void {
     const clientRects = nodes.map((node) => node.getClientRect());
     const centerX = clientRects.reduce((sumX, rect) => sumX + (rect.x + rect.width / 2), 0) / clientRects.length;
@@ -114,7 +99,7 @@ export class Alignment {
     );
   }
 
-  @enabledCheck
+  @EnabledCheck
   public alignCenterY(nodes: KonvaNode[]): void {
     const clientRects = nodes.map((node) => node.getClientRect());
     const centerY = clientRects.reduce((sumY, rect) => sumY + (rect.y + rect.height / 2), 0) / clientRects.length;
@@ -132,7 +117,7 @@ export class Alignment {
     );
   }
 
-  @enabledCheck
+  @EnabledCheck
   public dispersionX(nodes: KonvaNode[]): void {
     const centerXValues = nodes.map((node) => node.getClientRect().x + node.getClientRect().width / 2);
     const isCenterXConsistent = centerXValues.every((value, index, arr) => value === arr[0]);
@@ -142,7 +127,7 @@ export class Alignment {
     this.distributeNodes(nodes, 'x');
   }
 
-  @enabledCheck
+  @EnabledCheck
   public dispersionY(nodes: KonvaNode[]): void {
     const centerYValues = nodes.map((node) => node.getClientRect().y + node.getClientRect().height / 2);
     const isCenterYConsistent = centerYValues.every((value, index, arr) => value === arr[0]);

packages/plugin-history/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pictode/plugin-history",
   "private": false,
-  "version": "1.0.1",
+  "version": "1.0.2",
   "main": "dist/pictode-plugin-history.umd.js",
   "module": "dist/pictode-plugin-history.mjs",
   "types": "types/index.d.ts",

packages/plugin-history/src/history.ts

@@ -1,4 +1,5 @@
 import { App } from '@pictode/core';
+import { EnabledCheck } from '@pictode/utils';
 
 import './methods';
 
@@ -22,6 +23,7 @@ export class History {
     this.stackSize = stackSize;
   }
 
+  @EnabledCheck
   public execute(command: BaseCmd, needExecute?: boolean): void {
     // 如果命令栈中的命令长度已经超出了最大栈长，则将最早的命令清除
     if (this.undoStack.length > this.stackSize) {
@@ -40,11 +42,8 @@ export class History {
     this.app.emit('stack:changed', { undoStack: this.undoStack, redoStack: this.redoStack });
   }
 
+  @EnabledCheck
   public undo(step: number = 1): BaseCmd | undefined {
-    if (!this.enabled) {
-      return;
-    }
-
     let command: BaseCmd | undefined;
     while (step) {
       if (this.undoStack.length > 0) {
@@ -62,10 +61,8 @@ export class History {
     return command;
   }
 
+  @EnabledCheck
   public redo(step: number = 1): BaseCmd | undefined {
-    if (!this.enabled) {
-      return;
-    }
     let command: BaseCmd | undefined;
     while (step) {
       if (this.redoStack.length > 0) {
@@ -82,19 +79,18 @@ export class History {
     return command;
   }
 
+  @EnabledCheck
   public canUndo(): boolean {
     return this.undoStack.length > 0;
   }
 
+  @EnabledCheck
   public canRedo(): boolean {
     return this.redoStack.length > 0;
   }
 
+  @EnabledCheck
   public jump(id: number): void {
-    if (!this.enabled) {
-      return;
-    }
-
     let command: BaseCmd | undefined =
       this.undoStack.length > 0 ? this.undoStack[this.undoStack.length - 1] : undefined;
 

packages/plugin-ruler/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pictode/plugin-ruler",
   "private": false,
-  "version": "1.0.0",
+  "version": "1.0.1",
   "main": "dist/pictode-plugin-ruler.umd.js",
   "module": "dist/pictode-plugin-ruler.mjs",
   "types": "types/index.d.ts",

packages/plugin-ruler/src/index.ts

@@ -1,4 +1,5 @@
 import { App, Plugin } from '@pictode/core';
+import { EnabledCheck } from '@pictode/utils';
 
 import './method';
 
@@ -31,6 +32,10 @@ export class RulerPlugin implements Plugin {
     }
   }
 
+  public get enabled(): boolean {
+    return this.isEnabled();
+  }
+
   public install(app: App) {
     this.app = app;
     for (const axis of this.axis) {
@@ -54,14 +59,15 @@ export class RulerPlugin implements Plugin {
   }
 
   public isEnabled(): boolean {
-    return this.rulers.some((ruler) => ruler.enabled);
+    return this.rulers.some((ruler) => ruler.visible);
   }
 
   public triggerVisible(visible?: boolean): void {
     const rulerVisible = visible || !this.isEnabled();
     this.rulers.forEach((ruler) => ruler.triggerVisible(rulerVisible));
   }
 
+  @EnabledCheck
   public update(): void {
     this.rulers.forEach((ruler) => ruler.update());
   }

packages/plugin-ruler/src/ruler.ts

@@ -15,7 +15,6 @@ export class Ruler {
   public jump: number = 50;
   public fill: string = '#ffffff';
   public thickness: number = 40;
-  public enabled: boolean = true;
 
   constructor(
     private app: App,
@@ -88,19 +87,19 @@ export class Ruler {
     this.ruler.remove();
   }
 
+  public get visible(): boolean {
+    return this.ruler.visible();
+  }
+
   public update = (): void => {
-    if (!this.enabled) {
-      return;
-    }
     this.updateSize();
     this.updateScale();
     this.updatePosition();
     this.updateTicks();
   };
 
-  public triggerVisible(enabled: boolean): void {
-    this.enabled = enabled;
-    this.ruler.visible(enabled);
+  public triggerVisible(visible: boolean): void {
+    this.ruler.visible(visible);
     this.update();
   }
 

packages/plugin-selector/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pictode/plugin-selector",
   "private": false,
-  "version": "1.0.2",
+  "version": "1.0.3",
   "main": "dist/pictode-plugin-selector.umd.js",
   "module": "dist/pictode-plugin-selector.mjs",
   "types": "types/index.d.ts",

packages/plugin-selector/src/selector.ts

@@ -1,4 +1,5 @@
 import { App, EventArgs, Konva, KonvaNode, util } from '@pictode/core';
+import { EnabledCheck } from '@pictode/utils';
 
 import { HightLightConfig, Options, RubberConfig, TransformerConfig } from './types';
 
@@ -121,10 +122,8 @@ export class Selector {
     target.off('removed', this.handleNodeRemoved);
   };
 
+  @EnabledCheck
   public select(...nodes: KonvaNode[]): void {
-    if (!this.enabled) {
-      return;
-    }
     if (util.shapeArrayEqual(nodes, [...this.selected.values()])) {
       return;
     }
@@ -142,6 +141,7 @@ export class Selector {
     this.app.emit('selected:changed', { selected: [...this.selected.values()] });
   }
 
+  @EnabledCheck
   public cancelSelect(...nodes: KonvaNode[]): void {
     if (this.selected.size === 0) {
       return;
@@ -159,6 +159,7 @@ export class Selector {
     this.app.emit('selected:changed', { selected: [...this.selected.values()] });
   }
 
+  @EnabledCheck
   public selectAll(): void {
     this.select(...this.app.mainLayer.getChildren());
   }
@@ -174,6 +175,7 @@ export class Selector {
     }
   }
 
+  @EnabledCheck
   public isSelected(node: KonvaNode): boolean {
     return this.selected.has(node.id());
   }

packages/utils/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pictode/utils",
   "private": false,
-  "version": "1.0.1",
+  "version": "1.0.2",
   "main": "dist/pictode-utils.umd.js",
   "module": "dist/pictode-utils.mjs",
   "types": "types/index.d.ts",

packages/utils/src/decorator.ts

@@ -0,0 +1,16 @@
+type EnabledTarget = { enabled: boolean };
+
+export function EnabledCheck<T extends EnabledTarget>(target: T, propertyKey: string, descriptor: PropertyDescriptor) {
+  const originalMethod = descriptor.value;
+
+  descriptor.value = function (this: T, ...args: any[]) {
+    if (this.enabled) {
+      return originalMethod.apply(this, args);
+    } else {
+      console.warn(`Method ${propertyKey} is disabled.`);
+      // 可以选择抛出错误或执行其他操作
+    }
+  };
+
+  return descriptor;
+}

packages/utils/src/index.ts

@@ -22,6 +22,8 @@ export * from './os';
 
 export * from './func';
 
+export * from './decorator';
+
 export const toLine = (name: string = '') => name.replace(/\B([A-Z])/g, '-$1').toLowerCase();
 
 export function replacePropertyWithValue(obj: Record<string | number | symbol, any>, value: any, newValue: any) {