From 6aa118737dfee85adc9556afb5cbae97033d2c06 Mon Sep 17 00:00:00 2001 From: Yan Heng Date: Fri, 21 Jul 2023 15:37:02 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9Econtrols=E6=8E=A7?= =?UTF-8?q?=E5=88=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/core/src/app.ts | 29 +++++++++++++++++------------ packages/core/src/customs/object.ts | 7 ------- packages/core/src/customs/rect.ts | 16 ++++++++-------- packages/core/src/types.ts | 8 +++++--- packages/core/src/utils/index.ts | 16 ++++++++++++++++ 5 files changed, 46 insertions(+), 30 deletions(-) delete mode 100644 packages/core/src/customs/object.ts create mode 100644 packages/core/src/utils/index.ts diff --git a/packages/core/src/app.ts b/packages/core/src/app.ts index 4844e811..3db7ccd1 100644 --- 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 { public canvas: fabric.Canvas; - private option?: AppOption; + private option: AppOption & { controls: ControlsOption }; private installedPlugins: Map = 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 { 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 { 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 deleted file mode 100644 index 35879355..00000000 --- a/packages/core/src/customs/object.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { fabric } from 'fabric'; - -fabric.Object.prototype.transparentCorners = false; -fabric.Object.prototype.cornerColor = 'blue'; -fabric.Object.prototype.cornerStyle = 'circle'; - -export const BaseObject = fabric.Object; diff --git a/packages/core/src/customs/rect.ts b/packages/core/src/customs/rect.ts index 9cca6d1d..d1a64e37 100644 --- 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 index 819d14db..cf005318 100644 --- 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 new file mode 100644 index 00000000..ac437ad9 --- /dev/null +++ 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, + }, +};