feat: 新增controls控制

JessYan0913 · Jul 21, 2023 · 6aa1187 · 6aa1187
1 parent 814b00c
commit 6aa1187
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 30 deletions.
diff --git a/packages/core/src/app.ts b/packages/core/src/app.ts
@@ -2,24 +2,24 @@ import { BaseService } from '@pictode/utils';
 import { fabric } from 'fabric';
 
 import { Rect } from './customs/rect';
-import { AppOption, ControlsOption, EventArgs, Plugin } from './types';
-
-type Model = 'select' | 'drawing' | 'rect' | 'circle';
+import { AppOption, ControlsOption, EventArgs, Model, Plugin } from './types';
+import { DEFAULT_APP_OPTION } from './utils';
 
 export class App extends BaseService<EventArgs> {
   public canvas: fabric.Canvas;
 
-  private option?: AppOption;
+  private option: AppOption & { controls: ControlsOption };
   private installedPlugins: Map<string, Plugin> = new Map();
   private canvasEl: HTMLCanvasElement;
 
   constructor(option?: AppOption) {
     super();
-    this.option = option;
+    this.option = Object.assign({}, DEFAULT_APP_OPTION, option ?? DEFAULT_APP_OPTION);
     this.canvasEl = document.createElement('canvas');
     this.canvas = new fabric.Canvas(null, {
       backgroundColor: option?.backgroundColor,
     });
+    this.setControls(this.option.controls);
   }
 
   public mount(element: HTMLElement) {
@@ -31,10 +31,19 @@ export class App extends BaseService<EventArgs> {
     this.setModel('select');
   }
 
-  public setControls(controls?: ControlsOption | boolean): App {
-    if (!controls) {
-      Reflect.set(fabric.Object.prototype, 'hasControls', false);
+  public setControls(controls: ControlsOption | boolean): App {
+    this.option.controls = controls;
+    if (typeof controls === 'boolean') {
+      this.option.controls.hasControls = controls;
     }
+
+    Object.entries(this.option.controls).forEach(([key, value]) => {
+      if (key === 'controlVisible') {
+        fabric.Object.prototype.setControlsVisibility(value);
+      } else {
+        Reflect.set(fabric.Object.prototype, key, value);
+      }
+    });
     this.render(true);
     return this;
   }
@@ -48,10 +57,6 @@ export class App extends BaseService<EventArgs> {
       fill: 'transparent',
       stroke: 'blue',
       strokeWidth: 5,
-      borderColor: 'rgb(93, 94, 214)',
-      cornerColor: 'rgb(93, 94, 214)',
-      cornerSize: 8,
-      cornerStyle: 'circle',
       rx: 5,
       ry: 5,
     });

diff --git a/packages/core/src/customs/object.ts b/packages/core/src/customs/object.ts
diff --git a/packages/core/src/customs/rect.ts b/packages/core/src/customs/rect.ts
@@ -1,8 +1,7 @@
 import { fabric } from 'fabric';
 
 const isTransparent = (color: string): boolean => {
-  const alpha = new fabric.Color(color).getAlpha();
-  return alpha === 0;
+  return new fabric.Color(color).getAlpha() === 0;
 };
 
 export class Rect extends fabric.Rect {
@@ -17,16 +16,17 @@ export class Rect extends fabric.Rect {
     if (isFillTransparent && !activeObjects?.includes(this)) {
       const tolerance = 3;
       const boundingRect = this.getBoundingRect();
+      const strokeWidth = this.strokeWidth || 1; // 边框宽度，默认为 1
       const distanceToTop = Math.abs(point.y - boundingRect.top);
       const distanceToBottom = Math.abs(point.y - boundingRect.top - boundingRect.height);
       const distanceToLeft = Math.abs(point.x - boundingRect.left);
       const distanceToRight = Math.abs(point.x - boundingRect.left - boundingRect.width);
-      return (
-        distanceToTop <= tolerance ||
-        distanceToBottom <= tolerance ||
-        distanceToLeft <= tolerance ||
-        distanceToRight <= tolerance
-      );
+      const onBorder =
+        distanceToTop <= strokeWidth + tolerance ||
+        distanceToBottom <= strokeWidth + tolerance ||
+        distanceToLeft <= strokeWidth + tolerance ||
+        distanceToRight <= strokeWidth + tolerance;
+      return onBorder;
     }
     return super.containsPoint(point, lines, absolute, calculate);
   }

diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
@@ -11,6 +11,8 @@ export interface Plugin {
 
 export interface EventArgs {}
 
+export type Model = 'select' | 'drawing' | 'rect' | 'circle';
+
 export interface ControlVisible {
   bl?: boolean;
   br?: boolean;
@@ -24,11 +26,11 @@ export interface ControlVisible {
 }
 
 export interface ControlsOption {
-  enable?: boolean;
+  hasControls?: boolean;
   padding?: number;
   borderColor?: string;
   cornerColor?: string;
-  connerStrokeColor?: string;
+  cornerStrokeColor?: string;
   cornerStyle?: 'rect' | 'circle';
   cornerSize?: number;
   rotatingPointOffset?: number;
@@ -40,5 +42,5 @@ export interface ControlsOption {
 
 export interface AppOption {
   backgroundColor?: string;
-  controls?: ControlsOption;
+  controls?: ControlsOption | boolean;
 }
diff --git a/packages/core/src/utils/index.ts b/packages/core/src/utils/index.ts
@@ -0,0 +1,16 @@
+import { AppOption, ControlsOption } from '../types';
+
+export const DEFAULT_APP_OPTION: AppOption & { controls: ControlsOption } = {
+  backgroundColor: '#ffffff',
+  controls: {
+    hasControls: true,
+    padding: 3,
+    borderColor: 'rgb(157, 157, 231)',
+    cornerColor: 'rgb(157, 157, 231)',
+    cornerStrokeColor: 'rgb(157, 157, 231)',
+    cornerStyle: 'circle',
+    cornerSize: 6,
+    rotatingPointOffset: 10,
+    transparentCorners: true,
+  },
+};