diff --git a/.eslintrc-auto-import.json b/.eslintrc-auto-import.json index 61875e3b..b2abc8db 100644 --- a/.eslintrc-auto-import.json +++ b/.eslintrc-auto-import.json @@ -64,4 +64,4 @@ "watchPostEffect": true, "watchSyncEffect": true } -} \ No newline at end of file +} diff --git a/.gitignore b/.gitignore index 10944ced..a3b19c7e 100644 --- a/.gitignore +++ b/.gitignore @@ -27,3 +27,4 @@ yarn.lock pnpm-lock.yaml package-lock.json typings/auto-imports.d.ts +.eslintrc-auto-import.json diff --git a/packages/core/plugin.ts b/packages/core/plugin.ts index 868d9ad5..b52c73f0 100644 --- a/packages/core/plugin.ts +++ b/packages/core/plugin.ts @@ -16,7 +16,7 @@ class FontPlugin { repoSrc: string; constructor(canvas: fabric.Canvas, editor: IEditor, config: { repoSrc: string }) { - // 初始化 + // 初始化 this.canvas = canvas; this.editor = editor; // 可插入外部配置 @@ -27,17 +27,19 @@ class FontPlugin { hookImportBefore(json: string) { return this.downFontByJSON(json); } - + // 挂载API方法 - downFontByJSON(str: string) {} - + downFontByJSON() { + // + } + // 私有方法 + 发布事件 - _createFontCSS(){ - const params = [] - this.editor.emit('textEvent1', params) + _createFontCSS() { + const params = []; + this.editor.emit('textEvent1', params); } - // 右键菜单 + // 右键菜单 contextMenu() { const selectedMode = this.editor.getSelectMode(); if (selectedMode === SelectMode.ONE) { @@ -62,9 +64,9 @@ class FontPlugin { ]; } } - + // 快捷键 - hotkeyEvent(eventName: string, e: { type, code }) { + hotkeyEvent(eventName: string, { type }: KeyboardEvent) { // eventName：hotkeys中的属性 backspace、space // type：keyUp keyDown // code：hotkeys-js Code diff --git a/packages/core/plugin/AlignGuidLinePlugin.ts b/packages/core/plugin/AlignGuidLinePlugin.ts index 143626e3..f4cbbb3c 100644 --- a/packages/core/plugin/AlignGuidLinePlugin.ts +++ b/packages/core/plugin/AlignGuidLinePlugin.ts @@ -23,21 +23,14 @@ declare interface HorizontalLine { y: number; } -class AlignGuidLinePlugin { - public canvas: fabric.Canvas; - public editor: IEditor; - public defautOption = { +class AlignGuidLinePlugin implements IPluginTempl { + defautOption = { color: 'rgba(255,95,95,1)', width: 1, }; static pluginName = 'AlignGuidLinePlugin'; - static events = ['', '']; - static apis = []; - public hotkeys: string[] = ['']; dragMode = false; - constructor(canvas: fabric.Canvas, editor: IEditor) { - this.canvas = canvas; - this.editor = editor; + constructor(public canvas: fabric.Canvas, public editor: IEditor) { this.dragMode = false; this.init(); } diff --git a/packages/core/plugin/BarCodePlugin.ts b/packages/core/plugin/BarCodePlugin.ts index 5cd2148a..450f22cd 100644 --- a/packages/core/plugin/BarCodePlugin.ts +++ b/packages/core/plugin/BarCodePlugin.ts @@ -24,15 +24,10 @@ enum CodeType { pharmacode = 'pharmacode', } -class BarCodePlugin { - public canvas: fabric.Canvas; - public editor: IEditor; +class BarCodePlugin implements IPluginTempl { static pluginName = 'BarCodePlugin'; static apis = ['addBarcode', 'setBarcode', 'getBarcodeTypes']; - constructor(canvas: fabric.Canvas, editor: IEditor) { - this.canvas = canvas; - this.editor = editor; - } + constructor(public canvas: fabric.Canvas, public editor: IEditor) {} async hookTransform(object: any) { if (object.extensionType === 'barcode') { diff --git a/packages/core/plugin/CenterAlignPlugin.ts b/packages/core/plugin/CenterAlignPlugin.ts index fb55940e..914e4a2a 100644 --- a/packages/core/plugin/CenterAlignPlugin.ts +++ b/packages/core/plugin/CenterAlignPlugin.ts @@ -10,16 +10,11 @@ import { fabric } from 'fabric'; import Editor from '../Editor'; type IEditor = Editor; -class CenterAlignPlugin { - public canvas: fabric.Canvas; - public editor: IEditor; +class CenterAlignPlugin implements IPluginTempl { static pluginName = 'CenterAlignPlugin'; static apis = ['centerH', 'center', 'position', 'centerV']; // public hotkeys: string[] = ['space']; - constructor(canvas: fabric.Canvas, editor: IEditor) { - this.canvas = canvas; - this.editor = editor; - } + constructor(public canvas: fabric.Canvas, public editor: IEditor) {} center(workspace: fabric.Rect, object: fabric.Object) { const center = workspace.getCenterPoint(); diff --git a/packages/core/plugin/ControlsPlugin.ts b/packages/core/plugin/ControlsPlugin.ts index 0b8a9f3d..ec461e21 100644 --- a/packages/core/plugin/ControlsPlugin.ts +++ b/packages/core/plugin/ControlsPlugin.ts @@ -152,8 +152,9 @@ function peakControl() { render: renderIconEdge, }); } + // 删除 -function deleteControl(canvas: fabric.Canvas) { +/*function deleteControl(canvas: fabric.Canvas) { const deleteIcon = "data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='595.275px' height='595.275px' viewBox='200 215 230 470' xml:space='preserve'%3E%3Ccircle style='fill:%23F44336;' cx='299.76' cy='439.067' r='218.516'/%3E%3Cg%3E%3Crect x='267.162' y='307.978' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -222.6202 340.6915)' style='fill:white;' width='65.545' height='262.18'/%3E%3Crect x='266.988' y='308.153' transform='matrix(0.7071 0.7071 -0.7071 0.7071 398.3889 -83.3116)' style='fill:white;' width='65.544' height='262.179'/%3E%3C/g%3E%3C/svg%3E"; const delImg = document.createElement('img'); @@ -192,7 +193,7 @@ function deleteControl(canvas: fabric.Canvas) { render: renderDelIcon, // cornerSize: 24, }); -} +}*/ // 旋转 function rotationControl() { @@ -220,13 +221,9 @@ function rotationControl() { }); } -class ControlsPlugin { - public canvas: fabric.Canvas; - public editor: IEditor; +class ControlsPlugin implements IPluginTempl { static pluginName = 'ControlsPlugin'; - constructor(canvas: fabric.Canvas, editor: IEditor) { - this.canvas = canvas; - this.editor = editor; + constructor(public canvas: fabric.Canvas, public editor: IEditor) { this.init(); } init() { diff --git a/packages/core/plugin/ControlsRotatePlugin.ts b/packages/core/plugin/ControlsRotatePlugin.ts index d18549f3..a2f3d4c5 100644 --- a/packages/core/plugin/ControlsRotatePlugin.ts +++ b/packages/core/plugin/ControlsRotatePlugin.ts @@ -14,13 +14,9 @@ function rotateIcon(angle: number) { return `url("data:image/svg+xml,%3Csvg height='18' width='18' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'%3E%3Cg fill='none' transform='rotate(${angle} 16 16)'%3E%3Cpath d='M22.4484 0L32 9.57891L22.4484 19.1478V13.1032C17.6121 13.8563 13.7935 17.6618 13.0479 22.4914H19.2141L9.60201 32.01L0 22.4813H6.54912C7.36524 14.1073 14.0453 7.44023 22.4484 6.61688V0Z' fill='white'/%3E%3Cpath d='M24.0605 3.89587L29.7229 9.57896L24.0605 15.252V11.3562C17.0479 11.4365 11.3753 17.0895 11.3048 24.0879H15.3048L9.60201 29.7308L3.90932 24.0879H8.0806C8.14106 15.3223 15.2645 8.22345 24.0605 8.14313V3.89587Z' fill='black'/%3E%3C/g%3E%3C/svg%3E ") 12 12,crosshair`; } -class ControlsRotatePlugin { - public canvas: fabric.Canvas; - public editor: IEditor; +class ControlsRotatePlugin implements IPluginTempl { static pluginName = 'ControlsRotatePlugin'; - constructor(canvas: fabric.Canvas, editor: IEditor) { - this.canvas = canvas; - this.editor = editor; + constructor(public canvas: fabric.Canvas, public editor: IEditor) { this.init(); } init() { diff --git a/packages/core/plugin/CopyPlugin.ts b/packages/core/plugin/CopyPlugin.ts index effb92d4..effa34af 100644 --- a/packages/core/plugin/CopyPlugin.ts +++ b/packages/core/plugin/CopyPlugin.ts @@ -12,17 +12,12 @@ type IEditor = Editor; import { v4 as uuid } from 'uuid'; import { getImgStr } from '../utils/utils'; -class CopyPlugin { - public canvas: fabric.Canvas; - public editor: IEditor; +class CopyPlugin implements IPluginTempl { static pluginName = 'CopyPlugin'; static apis = ['clone']; - public hotkeys: string[] = ['ctrl+v', 'ctrl+c']; - private cache: null | fabric.ActiveSelection | fabric.Object; - constructor(canvas: fabric.Canvas, editor: IEditor) { - this.canvas = canvas; - this.editor = editor; - this.cache = null; + hotkeys: string[] = ['ctrl+v', 'ctrl+c']; + private cache: null | fabric.ActiveSelection | fabric.Object = null; + constructor(public canvas: fabric.Canvas, public editor: IEditor) { this.initPaste(); } @@ -92,7 +87,7 @@ class CopyPlugin { } // 快捷键扩展回调 - hotkeyEvent(eventName: string, e: any) { + hotkeyEvent(eventName: string, e: KeyboardEvent) { if (eventName === 'ctrl+c' && e.type === 'keydown') { const activeObject = this.canvas.getActiveObject(); this.cache = activeObject; diff --git a/packages/core/plugin/DeleteHotKeyPlugin.ts b/packages/core/plugin/DeleteHotKeyPlugin.ts index 51f56c20..2c3384d9 100644 --- a/packages/core/plugin/DeleteHotKeyPlugin.ts +++ b/packages/core/plugin/DeleteHotKeyPlugin.ts @@ -11,19 +11,14 @@ import Editor from '../Editor'; type IEditor = Editor; // import { v4 as uuid } from 'uuid'; -class DeleteHotKeyPlugin { - public canvas: fabric.Canvas; - public editor: IEditor; +class DeleteHotKeyPlugin implements IPluginTempl { static pluginName = 'DeleteHotKeyPlugin'; static apis = ['del']; - public hotkeys: string[] = ['backspace']; - constructor(canvas: fabric.Canvas, editor: IEditor) { - this.canvas = canvas; - this.editor = editor; - } + hotkeys: string[] = ['backspace']; + constructor(public canvas: fabric.Canvas, public editor: IEditor) {} // 快捷键扩展回调 - hotkeyEvent(eventName: string, e: any) { + hotkeyEvent(eventName: string, e: KeyboardEvent) { if (e.type === 'keydown' && eventName === 'backspace') { this.del(); } diff --git a/packages/core/plugin/DrawLinePlugin.ts b/packages/core/plugin/DrawLinePlugin.ts index ba65c0c5..3455cd10 100644 --- a/packages/core/plugin/DrawLinePlugin.ts +++ b/packages/core/plugin/DrawLinePlugin.ts @@ -13,9 +13,7 @@ import ThinTailArrow from '../objects/ThinTailArrow'; import Editor from '../Editor'; type IEditor = Editor; -class DrawLinePlugin { - public canvas: fabric.Canvas; - public editor: IEditor; +class DrawLinePlugin implements IPluginTempl { static pluginName = 'DrawLinePlugin'; static apis = ['setLineType', 'setMode']; isDrawingLineMode: boolean; @@ -24,10 +22,7 @@ class DrawLinePlugin { pointer: any; pointerPoints: any; isDrawingLine: boolean; - constructor(canvas: fabric.Canvas, editor: IEditor) { - this.canvas = canvas; - this.editor = editor; - + constructor(public canvas: fabric.Canvas, public editor: IEditor) { this.isDrawingLine = false; this.isDrawingLineMode = false; this.lineType = ''; diff --git a/packages/core/plugin/DrawPolygonPlugin.ts b/packages/core/plugin/DrawPolygonPlugin.ts index 4fe00d24..ac3fca0c 100644 --- a/packages/core/plugin/DrawPolygonPlugin.ts +++ b/packages/core/plugin/DrawPolygonPlugin.ts @@ -8,7 +8,7 @@ type IEditor = Editor; type LineCoords = [fabric.Point, fabric.Point]; type OffListener = (ev: fabric.IEvent) => void; type OnEnd = (...args: any[]) => void; -class DrawPolygonPlugin { +class DrawPolygonPlugin implements IPluginTempl { isDrawingPolygon = false; points: fabric.Point[] = []; lines: fabric.Line[] = []; diff --git a/packages/core/plugin/DringPlugin.ts b/packages/core/plugin/DringPlugin.ts index ef8b7a1e..7feafd8e 100644 --- a/packages/core/plugin/DringPlugin.ts +++ b/packages/core/plugin/DringPlugin.ts @@ -9,18 +9,14 @@ import Editor from '../Editor'; type IEditor = Editor; -export class DringPlugin { - public canvas: fabric.Canvas; - public editor: IEditor; - public defautOption = {}; +export class DringPlugin implements IPluginTempl { + defautOption = {}; static pluginName = 'DringPlugin'; static events = ['startDring', 'endDring']; static apis = ['startDring', 'endDring']; - public hotkeys: string[] = ['space']; + hotkeys: string[] = ['space']; dragMode = false; - constructor(canvas: fabric.Canvas, editor: IEditor) { - this.canvas = canvas; - this.editor = editor; + constructor(public canvas: fabric.Canvas, public editor: IEditor) { this.dragMode = false; this.init(); } @@ -104,7 +100,7 @@ export class DringPlugin { // 快捷键扩展回调 // eslint-disable-next-line @typescript-eslint/no-explicit-any - hotkeyEvent(eventName: string, e: any) { + hotkeyEvent(eventName: string, e: KeyboardEvent) { if (e.code === 'Space' && e.type === 'keydown') { if (!this.dragMode) { this.startDring(); diff --git a/packages/core/plugin/FlipPlugin.ts b/packages/core/plugin/FlipPlugin.ts index 94094233..7376a39e 100644 --- a/packages/core/plugin/FlipPlugin.ts +++ b/packages/core/plugin/FlipPlugin.ts @@ -7,15 +7,10 @@ import { SelectMode } from '../eventType'; const t = (key: string) => key; // import event from '@/utils/event/notifier'; -export default class FlipPlugin { - public canvas: fabric.Canvas; - public editor: Editor; +export default class FlipPlugin implements IPluginTempl { static pluginName = 'FlipPlugin'; static apis = ['flip']; - constructor(canvas: fabric.Canvas, editor: Editor) { - this.canvas = canvas; - this.editor = editor; - } + constructor(public canvas: fabric.Canvas, public editor: Editor) {} flip(type: 'X' | 'Y') { const activeObject = this.canvas.getActiveObject(); diff --git a/packages/core/plugin/FontPlugin.ts b/packages/core/plugin/FontPlugin.ts index d7632229..b2a96cc1 100644 --- a/packages/core/plugin/FontPlugin.ts +++ b/packages/core/plugin/FontPlugin.ts @@ -27,17 +27,13 @@ interface FontSource { img: string; } -class FontPlugin { - public canvas: fabric.Canvas; - public editor: IEditor; +class FontPlugin implements IPluginTempl { private tempPromise: Promise | null; static pluginName = 'FontPlugin'; static apis = ['getFontList', 'loadFont', 'getFontJson', 'downFontByJSON']; repoSrc: string; cacheList: FontSource[]; - constructor(canvas: fabric.Canvas, editor: IEditor, config: { repoSrc: string }) { - this.canvas = canvas; - this.editor = editor; + constructor(public canvas: fabric.Canvas, public editor: IEditor, config: { repoSrc: string }) { this.repoSrc = config.repoSrc; this.cacheList = []; this.tempPromise = null; @@ -100,7 +96,7 @@ class FontPlugin { const fileStr = `data:text/json;charset=utf-8,${encodeURIComponent( JSON.stringify(json, null, '\t') )}`; - const dataUrl = activeObject.toDataURL(); + const dataUrl = activeObject.toDataURL({}); downFile(fileStr, 'font.json'); downFile(dataUrl, 'font.png'); } diff --git a/packages/core/plugin/FreeDrawPlugin.ts b/packages/core/plugin/FreeDrawPlugin.ts index 6e70b3c4..3cd5960c 100644 --- a/packages/core/plugin/FreeDrawPlugin.ts +++ b/packages/core/plugin/FreeDrawPlugin.ts @@ -8,7 +8,7 @@ type DrawOptions = { width: number; }; -export default class FreeDrawPlugin { +export default class FreeDrawPlugin implements IPluginTempl { static pluginName = 'FreeDrawPlugin'; static apis = ['startDraw', 'endDraw']; constructor(public canvas: fabric.Canvas, public editor: IEditor) {} diff --git a/packages/core/plugin/GroupAlignPlugin.ts b/packages/core/plugin/GroupAlignPlugin.ts index 1c0fe9d4..908215e7 100644 --- a/packages/core/plugin/GroupAlignPlugin.ts +++ b/packages/core/plugin/GroupAlignPlugin.ts @@ -10,16 +10,11 @@ import { fabric } from 'fabric'; import Editor from '../Editor'; type IEditor = Editor; -class GroupAlignPlugin { - public canvas: fabric.Canvas; - public editor: IEditor; +class GroupAlignPlugin implements IPluginTempl { static pluginName = 'GroupAlignPlugin'; static apis = ['left', 'right', 'xcenter', 'ycenter', 'top', 'bottom', 'xequation', 'yequation']; // public hotkeys: string[] = ['space']; - constructor(canvas: fabric.Canvas, editor: IEditor) { - this.canvas = canvas; - this.editor = editor; - } + constructor(public canvas: fabric.Canvas, public editor: IEditor) {} left() { const { canvas } = this; diff --git a/packages/core/plugin/GroupPlugin.ts b/packages/core/plugin/GroupPlugin.ts index 270642bd..60bd4557 100644 --- a/packages/core/plugin/GroupPlugin.ts +++ b/packages/core/plugin/GroupPlugin.ts @@ -8,18 +8,14 @@ import { fabric } from 'fabric'; import Editor from '../Editor'; +import { isGroup, isActiveSelection } from '../utils/utils'; import { v4 as uuid } from 'uuid'; type IEditor = Editor; -class GroupPlugin { - public canvas: fabric.Canvas; - public editor: IEditor; +class GroupPlugin implements IPluginTempl { static pluginName = 'GroupPlugin'; static apis = ['unGroup', 'group']; - constructor(canvas: fabric.Canvas, editor: IEditor) { - this.canvas = canvas; - this.editor = editor; - } + constructor(public canvas: fabric.Canvas, public editor: IEditor) {} // 拆分组 unGroup() { @@ -53,15 +49,16 @@ class GroupPlugin { contextMenu() { const activeObject = this.canvas.getActiveObject(); - if (activeObject && activeObject.type === 'group') { + + if (isActiveSelection(activeObject)) { + return [{ text: '组合', hotkey: 'Ctrl+V', disabled: false, onclick: () => this.group() }]; + } + + if (isGroup(activeObject)) { return [ { text: '拆分组合', hotkey: 'Ctrl+V', disabled: false, onclick: () => this.unGroup() }, ]; } - - if (this.canvas.getActiveObjects().length > 1) { - return [{ text: '组合', hotkey: 'Ctrl+V', disabled: false, onclick: () => this.group() }]; - } } destroy() { console.log('pluginDestroy'); diff --git a/packages/core/plugin/GroupTextEditorPlugin.ts b/packages/core/plugin/GroupTextEditorPlugin.ts index 47edc26a..3b7009fd 100644 --- a/packages/core/plugin/GroupTextEditorPlugin.ts +++ b/packages/core/plugin/GroupTextEditorPlugin.ts @@ -8,17 +8,14 @@ import { fabric } from 'fabric'; import Editor from '../Editor'; +import { isGroup } from '../utils/utils'; import { v4 as uuid } from 'uuid'; type IEditor = Editor; -class GroupTextEditorPlugin { - public canvas: fabric.Canvas; - public editor: IEditor; +class GroupTextEditorPlugin implements IPluginTempl { static pluginName = 'GroupTextEditorPlugin'; isDown = false; - constructor(canvas: fabric.Canvas, editor: IEditor) { - this.canvas = canvas; - this.editor = editor; + constructor(public canvas: fabric.Canvas, public editor: IEditor) { this._init(); } @@ -44,7 +41,7 @@ class GroupTextEditorPlugin { }); this.canvas.on('mouse:dblclick', (opt) => { - if (opt.target && opt.target.type === 'group') { + if (isGroup(opt.target)) { const selectedObject = this._getGroupObj(opt) as fabric.IText; if (!selectedObject) return; selectedObject.selectable = true; @@ -53,7 +50,7 @@ class GroupTextEditorPlugin { selectedObject.hasControls = false; } if (this.isText(selectedObject)) { - this._bedingTextEditingEvent(selectedObject, opt); + this._bedingTextEditingEvent(selectedObject, opt.target); return; } this.canvas.setActiveObject(selectedObject); @@ -65,7 +62,8 @@ class GroupTextEditorPlugin { // 获取点击区域内的组内文字元素 _getGroupTextObj(opt: fabric.IEvent) { const pointer = this.canvas.getPointer(opt.e, true); - const clickObj = this.canvas._searchPossibleTargets(opt.target?._objects, pointer); + if (!isGroup(opt.target)) return false; + const clickObj = this.canvas._searchPossibleTargets(opt.target._objects, pointer); if (clickObj && this.isText(clickObj)) { return clickObj; } @@ -74,23 +72,14 @@ class GroupTextEditorPlugin { _getGroupObj(opt: fabric.IEvent) { const pointer = this.canvas.getPointer(opt.e, true); - const clickObj = this.canvas._searchPossibleTargets(opt.target?._objects, pointer); + if (!isGroup(opt.target)) return false; + const clickObj = this.canvas._searchPossibleTargets(opt.target._objects, pointer); return clickObj; } // 通过组合重新组装来编辑文字，可能会耗性能。 - _bedingTextEditingEvent(textObject: fabric.IText, opt: fabric.IEvent) { - if (!opt.target) return; + _bedingTextEditingEvent(textObject: fabric.IText, groupObj: fabric.Group) { const textObjectJSON = textObject.toObject(); - const groupObj = opt.target; - - const ftype: any = { - 'i-text': 'IText', - text: 'Text', - textbox: 'Textbox', - }; - - const eltype: string = ftype[textObjectJSON.type]; const groupMatrix: number[] = groupObj.calcTransformMatrix(); @@ -101,10 +90,10 @@ class GroupTextEditorPlugin { const e: number = groupMatrix[4]; const f: number = groupMatrix[5]; - const newX = a * textObject.left + c * textObject.top + e; - const newY = b * textObject.left + d * textObject.top + f; + const newX = a * (textObject.left ?? 0) + c * (textObject.top ?? 0) + e; + const newY = b * (textObject.left ?? 0) + d * (textObject.top ?? 0) + f; - const tempText = new fabric[eltype](textObject.text, { + const tempText = new (textObject.constructor as typeof fabric.IText)(textObject.text ?? '', { ...textObjectJSON, scaleX: textObjectJSON.scaleX * a, scaleY: textObjectJSON.scaleY * a, @@ -116,10 +105,10 @@ class GroupTextEditorPlugin { }); tempText.id = uuid(); textObject.visible = false; - opt.target.addWithUpdate(); + groupObj.addWithUpdate(); tempText.visible = true; tempText.selectable = true; - tempText.hasConstrols = false; + tempText.hasControls = false; tempText.editable = true; this.canvas.add(tempText); this.canvas.setActiveObject(tempText); @@ -132,10 +121,10 @@ class GroupTextEditorPlugin { text: tempText.text, visible: true, }); - opt.target.addWithUpdate(); + groupObj.addWithUpdate(); tempText.visible = false; this.canvas.remove(tempText); - this.canvas.setActiveObject(opt.target); + this.canvas.setActiveObject(groupObj); }); } diff --git a/packages/core/plugin/HistoryPlugin.ts b/packages/core/plugin/HistoryPlugin.ts index 0a362b84..33a62f62 100644 --- a/packages/core/plugin/HistoryPlugin.ts +++ b/packages/core/plugin/HistoryPlugin.ts @@ -19,17 +19,12 @@ type extendCanvas = { historyRedo: any[]; }; -class HistoryPlugin { - public canvas: fabric.Canvas & extendCanvas; - public editor: IEditor; +class HistoryPlugin implements IPluginTempl { static pluginName = 'HistoryPlugin'; static apis = ['undo', 'redo']; static events = ['historyUpdate']; - public hotkeys: string[] = ['ctrl+z', 'ctrl+shift+z', '⌘+z', '⌘+shift+z']; - constructor(canvas: fabric.Canvas & extendCanvas, editor: IEditor) { - this.canvas = canvas; - this.editor = editor; - + hotkeys: string[] = ['ctrl+z', 'ctrl+shift+z', '⌘+z', '⌘+shift+z']; + constructor(public canvas: fabric.Canvas & extendCanvas, public editor: IEditor) { fabric.Canvas.prototype._historyNext = () => { return this.editor.getJson(); }; @@ -77,7 +72,7 @@ class HistoryPlugin { } // 快捷键扩展回调 - hotkeyEvent(eventName: string, e: any) { + hotkeyEvent(eventName: string, e: KeyboardEvent) { if (e.type === 'keydown') { switch (eventName) { case 'ctrl+z': diff --git a/packages/core/plugin/LayerPlugin.ts b/packages/core/plugin/LayerPlugin.ts index b9441456..d7190fa0 100644 --- a/packages/core/plugin/LayerPlugin.ts +++ b/packages/core/plugin/LayerPlugin.ts @@ -10,15 +10,10 @@ import { fabric } from 'fabric'; import Editor from '../Editor'; type IEditor = Editor; -class LayerPlugin { - public canvas: fabric.Canvas; - public editor: IEditor; +class LayerPlugin implements IPluginTempl { static pluginName = 'LayerPlugin'; static apis = ['up', 'upTop', 'down', 'downTop']; - constructor(canvas: fabric.Canvas, editor: IEditor) { - this.canvas = canvas; - this.editor = editor; - } + constructor(public canvas: fabric.Canvas, public editor: IEditor) {} _getWorkspace() { return this.canvas.getObjects().find((item) => item.id === 'workspace'); diff --git a/packages/core/plugin/MaterialPlugin.ts b/packages/core/plugin/MaterialPlugin.ts index 0e509c52..186fa8ef 100644 --- a/packages/core/plugin/MaterialPlugin.ts +++ b/packages/core/plugin/MaterialPlugin.ts @@ -12,9 +12,7 @@ type IEditor = Editor; import axios from 'axios'; import qs from 'qs'; -class MaterialPlugin { - public canvas: fabric.Canvas; - public editor: IEditor; +class MaterialPlugin implements IPluginTempl { static pluginName = 'MaterialPlugin'; static apis = [ 'getTemplTypeList', @@ -25,9 +23,7 @@ class MaterialPlugin { ]; apiMapUrl: { [propName: string]: string }; repoSrc: string; - constructor(canvas: fabric.Canvas, editor: IEditor, config: { repoSrc: string }) { - this.canvas = canvas; - this.editor = editor; + constructor(public canvas: fabric.Canvas, public editor: IEditor, config: { repoSrc: string }) { this.repoSrc = config.repoSrc; this.apiMapUrl = { template: config.repoSrc + '/template/type.json', diff --git a/packages/core/plugin/MoveHotKeyPlugin.ts b/packages/core/plugin/MoveHotKeyPlugin.ts index 1ab2d576..000fbaf2 100644 --- a/packages/core/plugin/MoveHotKeyPlugin.ts +++ b/packages/core/plugin/MoveHotKeyPlugin.ts @@ -11,18 +11,13 @@ import Editor from '../Editor'; type IEditor = Editor; // import { v4 as uuid } from 'uuid'; -class MoveHotKeyPlugin { - public canvas: fabric.Canvas; - public editor: IEditor; +class MoveHotKeyPlugin implements IPluginTempl { static pluginName = 'MoveHotKeyPlugin'; - public hotkeys: string[] = ['left', 'right', 'down', 'up']; - constructor(canvas: fabric.Canvas, editor: IEditor) { - this.canvas = canvas; - this.editor = editor; - } + hotkeys: string[] = ['left', 'right', 'down', 'up']; + constructor(public canvas: fabric.Canvas, public editor: IEditor) {} // 快捷键扩展回调 - hotkeyEvent(eventName: string, e: any) { + hotkeyEvent(eventName: string, e: KeyboardEvent) { if (e.type === 'keydown') { const { canvas } = this; const activeObject = canvas.getActiveObject(); diff --git a/packages/core/plugin/PathTextPlugin.ts b/packages/core/plugin/PathTextPlugin.ts index 186ccee5..cb3d5516 100644 --- a/packages/core/plugin/PathTextPlugin.ts +++ b/packages/core/plugin/PathTextPlugin.ts @@ -12,7 +12,7 @@ type DrawOptions = { defaultFontSize: number; }; -export default class PathTextPlugin { +export default class PathTextPlugin implements IPluginTempl { static pluginName = 'PathTextPlugin'; static apis = ['startTextPathDraw', 'endTextPathDraw']; private options?: DrawOptions; diff --git a/packages/core/plugin/PolygonModifyPlugin.ts b/packages/core/plugin/PolygonModifyPlugin.ts index c3a6ccd3..b49bb1a3 100644 --- a/packages/core/plugin/PolygonModifyPlugin.ts +++ b/packages/core/plugin/PolygonModifyPlugin.ts @@ -51,7 +51,7 @@ const anchorWrapper = function (anchorIndex: number, fn: fabric.Control['actionH fabricObject.calcTransformMatrix() ), actionPerformed = fn(eventData, transform, x, y), - newDim = fabricObject._setPositionDimensions({}), + // newDim = fabricObject._setPositionDimensions({}), polygonBaseSize = getObjectSizeWithStroke(fabricObject), newX = (fabricObject.points[anchorIndex].x - fabricObject.pathOffset.x) / polygonBaseSize.x, newY = (fabricObject.points[anchorIndex].y - fabricObject.pathOffset.y) / polygonBaseSize.y; @@ -97,18 +97,14 @@ function renderIconEdge( drawImg(ctx, left, top, img, 25, 25, fabric.util.degreesToRadians(fabricObject.angle || 0)); } -class PolygonModifyPlugin { +class PolygonModifyPlugin implements IPluginTempl { public isEdit: boolean; - private img: HTMLImageElement; static pluginName = 'PolygonModifyPlugin'; static events = []; static apis = ['toggleEdit', 'activeEdit', 'inActiveEdit']; constructor(public canvas: fabric.Canvas, public editor: IEditor) { this.isEdit = false; - const img = document.createElement('img'); - img.src = edgeImg; - this.img = img; this.init(); } init() { @@ -128,7 +124,6 @@ class PolygonModifyPlugin { this._ensureEvent(poly); if (poly.points == null) return; const lastControl = poly.points.length - 1; - const This = this; poly.controls = poly.points.reduce>(function ( acc, point, @@ -138,7 +133,7 @@ class PolygonModifyPlugin { positionHandler: polygonPositionHandler, actionHandler: anchorWrapper(index > 0 ? index - 1 : lastControl, actionHandler), actionName: 'modifyPolygon', - render: (...args) => renderIconEdge(...args, This.img), + render: (...args) => renderIconEdge(...args), }); Object.defineProperty(acc['p' + index], 'pointIndex', { value: index }); return acc; diff --git a/packages/core/plugin/PsdPlugin.ts b/packages/core/plugin/PsdPlugin.ts index 710716d2..dd1d1333 100644 --- a/packages/core/plugin/PsdPlugin.ts +++ b/packages/core/plugin/PsdPlugin.ts @@ -13,20 +13,15 @@ import psdToJson from '../utils/psd'; import Psd from '@webtoon/psd'; type IEditor = Editor; -class PsdPlugin { - public canvas: fabric.Canvas; - public editor: IEditor; +class PsdPlugin implements IPluginTempl { static pluginName = 'PsdPlugin'; static apis = ['insertPSD']; - constructor(canvas: fabric.Canvas, editor: IEditor) { - this.canvas = canvas; - this.editor = editor; - } + constructor(public canvas: fabric.Canvas, public editor: IEditor) {} insertPSD() { return new Promise((resolve, reject) => { selectFiles({ accept: '.psd' }) - .then((files: string | any[]) => { + .then((files) => { if (files && files.length > 0) { const file = files[0]; const reader = new FileReader(); diff --git a/packages/core/plugin/QrCodePlugin.ts b/packages/core/plugin/QrCodePlugin.ts index 4ddcc01b..027e1d3c 100644 --- a/packages/core/plugin/QrCodePlugin.ts +++ b/packages/core/plugin/QrCodePlugin.ts @@ -41,15 +41,10 @@ enum errorCorrectionLevelType { H = 'H', } -class QrCodePlugin { - public canvas: fabric.Canvas; - public editor: IEditor; +class QrCodePlugin implements IPluginTempl { static pluginName = 'QrCodePlugin'; static apis = ['addQrCode', 'setQrCode', 'getQrCodeTypes']; - constructor(canvas: fabric.Canvas, editor: IEditor) { - this.canvas = canvas; - this.editor = editor; - } + constructor(public canvas: fabric.Canvas, public editor: IEditor) {} async hookTransform(object: any) { if (object.extensionType === 'qrcode') { @@ -62,6 +57,7 @@ class QrCodePlugin { async _getBase64Str(options: any) { const qrCode = new QRCodeStyling(options); const blob = await qrCode.getRawData('png'); + if (!blob) return ''; const base64Str = await this._blobToBase64(blob); return base64Str || ''; } diff --git a/packages/core/plugin/RulerPlugin.ts b/packages/core/plugin/RulerPlugin.ts index 1f757fbb..d39aa5b8 100644 --- a/packages/core/plugin/RulerPlugin.ts +++ b/packages/core/plugin/RulerPlugin.ts @@ -13,16 +13,12 @@ type IEditor = Editor; import initRuler from '../ruler'; -class RulerPlugin { - public canvas: fabric.Canvas; - public editor: IEditor; +class RulerPlugin implements IPluginTempl { static pluginName = 'RulerPlugin'; - // static events = ['sizeChange']; + // static events = ['sizeChange']; static apis = ['hideGuideline', 'showGuideline', 'rulerEnable', 'rulerDisable']; ruler: any; - constructor(canvas: fabric.Canvas, editor: IEditor) { - this.canvas = canvas; - this.editor = editor; + constructor(public canvas: fabric.Canvas, public editor: IEditor) { this.init(); } diff --git a/packages/core/plugin/SimpleClipImagePlugin.ts b/packages/core/plugin/SimpleClipImagePlugin.ts index 2ad0f41a..c0bfdcdc 100644 --- a/packages/core/plugin/SimpleClipImagePlugin.ts +++ b/packages/core/plugin/SimpleClipImagePlugin.ts @@ -120,9 +120,9 @@ const createPolygonClip = (activeObject: fabric.Object, inverted: boolean) => { }); return { shell, clipPath }; }; -export default class SimpleClipImagePlugin { +export default class SimpleClipImagePlugin implements IPluginTempl { static pluginName = 'SimpleClipImagePlugin'; - // static events = ['sizeChange']; + // static events = ['sizeChange']; static apis = ['addClipPathToImage', 'removeClip']; constructor(public canvas: fabric.Canvas, public editor: IEditor) {} addClipPathToImage(value: string) { diff --git a/packages/core/plugin/WaterMarkPlugin.ts b/packages/core/plugin/WaterMarkPlugin.ts index 1d3abc03..21fa6452 100644 --- a/packages/core/plugin/WaterMarkPlugin.ts +++ b/packages/core/plugin/WaterMarkPlugin.ts @@ -37,16 +37,12 @@ const defaultOptions: IDrawOps = { position: POSITION.lt, }; -class WaterMarkPlugin { - public canvas: fabric.Canvas; - public editor: IEditor; +class WaterMarkPlugin implements IPluginTempl { static pluginName = 'WaterMarkPlugin'; static apis = ['drawWaterMark', 'clearWaterMMatk', 'updateDrawStatus']; private hadDraw = false; private drawOps: IDrawOps = defaultOptions; - constructor(canvas: fabric.Canvas, editor: IEditor) { - this.canvas = canvas; - this.editor = editor; + constructor(public canvas: fabric.Canvas, public editor: IEditor) { this.init(); } diff --git a/packages/core/plugin/WorkspacePlugin.ts b/packages/core/plugin/WorkspacePlugin.ts index 4a7e87d9..8f4b4cf6 100644 --- a/packages/core/plugin/WorkspacePlugin.ts +++ b/packages/core/plugin/WorkspacePlugin.ts @@ -11,9 +11,7 @@ import Editor from '../Editor'; import { throttle } from 'lodash-es'; type IEditor = Editor; -class WorkspacePlugin { - public canvas: fabric.Canvas; - public editor: IEditor; +class WorkspacePlugin implements IPluginTempl { static pluginName = 'WorkspacePlugin'; static events = ['sizeChange']; static apis = ['big', 'small', 'auto', 'one', 'setSize', 'getWorkspase', 'setWorkspaseBg']; @@ -21,9 +19,7 @@ class WorkspacePlugin { workspace: null | fabric.Rect; option: any; zoomRatio: number; - constructor(canvas: fabric.Canvas, editor: IEditor) { - this.canvas = canvas; - this.editor = editor; + constructor(public canvas: fabric.Canvas, public editor: IEditor) { this.workspace = null; this.init({ width: 900, diff --git a/packages/core/utils/utils.ts b/packages/core/utils/utils.ts index 17f615f7..97b85725 100644 --- a/packages/core/utils/utils.ts +++ b/packages/core/utils/utils.ts @@ -99,15 +99,6 @@ export function drawImg( ctx.restore(); } -export default { - getImgStr, - downFile, - selectFiles, - insertImgFile, - clipboardText, - drawImg, -}; - export function shiftAngle(start: fabric.Point, end: fabric.Point) { const startX = start.x; const startY = start.y; @@ -125,3 +116,35 @@ export function shiftAngle(start: fabric.Point, end: fabric.Point) { y: sinx + startY, }; } + +/** + * 类型工具 + */ +export const isImage = (thing: unknown): thing is fabric.Image => { + return thing instanceof fabric.Image; +}; + +export const isGroup = (thing: unknown): thing is fabric.Group => { + return thing instanceof fabric.Group; +}; + +export const isIText = (thing: unknown): thing is fabric.IText => { + return thing instanceof fabric.IText; +}; + +export const isActiveSelection = (thing: unknown): thing is fabric.ActiveSelection => { + return thing instanceof fabric.ActiveSelection; +}; + +export default { + getImgStr, + downFile, + selectFiles, + insertImgFile, + clipboardText, + drawImg, + isImage, + isGroup, + isIText, + isActiveSelection, +}; diff --git a/src/components/imgStroke.vue b/src/components/imgStroke.vue index 52ef21c8..9e3aa4f7 100644 --- a/src/components/imgStroke.vue +++ b/src/components/imgStroke.vue @@ -61,10 +61,11 @@