feat: 添加插件api提示

ikuaitu · Aug 10, 2024 · 4642a57 · 4642a57
1 parent 55662c2
commit 4642a57
Show file tree

Hide file tree

Showing 40 changed files with 334 additions and 139 deletions.
diff --git a/packages/core/Editor.ts b/packages/core/Editor.ts
@@ -3,6 +3,13 @@ import hotkeys from 'hotkeys-js';
 import ContextMenu from './ContextMenu.js';
 import ServersPlugin from './ServersPlugin';
 import { AsyncSeriesHook } from 'tapable';
+import type {
+  IPluginMenu,
+  IPluginClass,
+  IPluginOption,
+  IEditorHooksType,
+  IPluginTempl,
+} from '@kuaitu/core';
 
 import Utils from './utils/utils';
 
@@ -44,10 +51,10 @@ class Editor extends EventEmitter {
   }
 
   // 引入组件
-  use(plugin: IPluginClass, options?: IPluginOption) {
+  use(plugin: IPluginTempl, options?: IPluginOption) {
     if (this._checkPlugin(plugin) && this.canvas) {
       this._saveCustomAttr(plugin);
-      const pluginRunTime = new plugin(this.canvas, this, options || {}) as IPluginClass;
+      const pluginRunTime = new (plugin as IPluginClass)(this.canvas, this, options || {});
       // 添加插件名称
       pluginRunTime.pluginName = plugin.pluginName;
       this.pluginMap[plugin.pluginName] = pluginRunTime;
@@ -73,7 +80,7 @@ class Editor extends EventEmitter {
   }
 
   // 检查组件
-  private _checkPlugin(plugin: IPluginClass) {
+  private _checkPlugin(plugin: IPluginTempl) {
     const { pluginName, events = [], apis = [] } = plugin;
     //名称检查
     if (this.pluginMap[pluginName]) {
@@ -103,7 +110,7 @@ class Editor extends EventEmitter {
           // eslint-disable-next-line prefer-rest-params
           const result = hook.apply(plugin, [...arguments]);
           // hook 兼容非 Promise 返回值
-          return result instanceof Promise ? result : Promise.resolve(result);
+          return (result as any) instanceof Promise ? result : Promise.resolve(result);
         });
       }
     });
@@ -120,7 +127,7 @@ class Editor extends EventEmitter {
   }
 
   // 保存组件自定义事件与API
-  private _saveCustomAttr(plugin: IPluginClass) {
+  private _saveCustomAttr(plugin: IPluginTempl) {
     const { events = [], apis = [] } = plugin;
     this.customApis = this.customApis.concat(apis);
     this.customEvents = this.customEvents.concat(events);

diff --git a/packages/core/ServersPlugin.ts b/packages/core/ServersPlugin.ts
@@ -8,10 +8,31 @@
 import { v4 as uuid } from 'uuid';
 import { selectFiles, clipboardText, downFile } from './utils/utils';
 import { fabric } from 'fabric';
-import Editor from './Editor';
-type IEditor = Editor;
+import type { IEditor, IPluginTempl } from '@kuaitu/core';
 import { SelectEvent, SelectMode } from './eventType';
 
+type IPlugin = Pick<
+  ServersPlugin,
+  | 'insert'
+  | 'loadJSON'
+  | 'getJson'
+  | 'dragAddItem'
+  | 'clipboard'
+  | 'clipboardBase64'
+  | 'saveJson'
+  | 'saveSvg'
+  | 'saveImg'
+  | 'clear'
+  | 'preview'
+  | 'getSelectMode'
+  | 'getExtensionKey'
+>;
+
+declare module '@kuaitu/core' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  interface IEditor extends IPlugin {}
+}
+
 function transformText(objects: any) {
   if (!objects) return;
   objects.forEach((item: any) => {
@@ -23,9 +44,7 @@ function transformText(objects: any) {
   });
 }
 
-class ServersPlugin {
-  public canvas: fabric.Canvas;
-  public editor: IEditor;
+class ServersPlugin implements IPluginTempl {
   public selectedMode: SelectMode;
   static pluginName = 'ServersPlugin';
   static apis = [
@@ -45,9 +64,7 @@ class ServersPlugin {
   ];
   static events = [SelectMode.ONE, SelectMode.MULTI, SelectEvent.CANCEL];
   // public hotkeys: string[] = ['left', 'right', 'down', 'up'];
-  constructor(canvas: fabric.Canvas, editor: IEditor) {
-    this.canvas = canvas;
-    this.editor = editor;
+  constructor(public canvas: fabric.Canvas, public editor: IEditor) {
     this.selectedMode = SelectMode.EMPTY;
     this._initSelectEvent();
   }

diff --git a/packages/core/index.ts b/packages/core/index.ts
@@ -42,6 +42,9 @@ export { default as AddBaseTypePlugin } from './plugin/AddBaseTypePlugin';
 import EventType from './eventType';
 import Utils from './utils/utils';
 import CustomRect from './objects/CustomRect';
+// import { extend } from 'dayjs';
 
 export { EventType, Utils, CustomRect };
 export default Editor;
+
+export * from './interface/Editor';
diff --git a/packages/core/interface/Editor.ts b/packages/core/interface/Editor.ts
@@ -0,0 +1,48 @@
+import type Editor from '@kuaitu/core';
+
+// IEditor类型包含插件实例，Editor不包含插件实例
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface IEditor extends Editor {}
+
+// 生命周期事件类型
+export type IEditorHooksType =
+  | 'hookImportBefore'
+  | 'hookImportAfter'
+  | 'hookSaveBefore'
+  | 'hookSaveAfter'
+  | 'hookTransform';
+
+// 插件实例
+export declare class IPluginTempl {
+  constructor(canvas: fabric.Canvas, editor: IEditor, options?: IPluginOption);
+  static pluginName: string;
+  static events: string[];
+  static apis: string[];
+  hotkeyEvent?: (name: string, e: KeyboardEvent) => void;
+  hookImportBefore?: (...args: unknown[]) => Promise<unknown>;
+  hookImportAfter?: (...args: unknown[]) => Promise<unknown>;
+  hookSaveBefore?: (...args: unknown[]) => Promise<unknown>;
+  hookSaveAfter?: (...args: unknown[]) => Promise<unknown>;
+  hookTransform?: (...args: unknown[]) => Promise<unknown>;
+  [propName: string]: any;
+  canvas?: fabric.Canvas;
+  editor?: IEditor;
+}
+
+export declare interface IPluginOption {
+  [propName: string]: unknown | undefined;
+}
+
+declare class IPluginClass2 extends IPluginTempl {
+  constructor();
+}
+// 插件class
+export declare interface IPluginClass {
+  new (canvas: fabric.Canvas, editor: Editor, options?: IPluginOption): IPluginClass2;
+}
+
+export declare interface IPluginMenu {
+  text: string;
+  command?: () => void;
+  child?: IPluginMenu[];
+}
diff --git a/packages/core/plugin/AddBaseTypePlugin.ts b/packages/core/plugin/AddBaseTypePlugin.ts
@@ -7,13 +7,20 @@
  */
 
 import { fabric } from 'fabric';
-import type Editor from '../Editor';
+import type { IEditor, IPluginTempl } from '@kuaitu/core';
 import { v4 as uuid } from 'uuid';
 
+type IPlugin = Pick<AddBaseTypePlugin, 'addBaseType' | 'createImgByElement'>;
+
+declare module '@kuaitu/core' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  interface IEditor extends IPlugin {}
+}
+
 export default class AddBaseTypePlugin implements IPluginTempl {
   static pluginName = 'AddBaseTypePlugin';
   static apis = ['addBaseType', 'createImgByElement'];
-  constructor(public canvas: fabric.Canvas, public editor: Editor) {
+  constructor(public canvas: fabric.Canvas, public editor: IEditor) {
     this.editor = editor;
     this.canvas = canvas;
   }
@@ -61,6 +68,7 @@ export default class AddBaseTypePlugin implements IPluginTempl {
 
   _toScale(item: fabric.Object) {
     const { width } = this.editor.getWorkspase();
+    if (width === undefined) return;
     item.scaleToWidth(width / 2);
   }
 

diff --git a/packages/core/plugin/AlignGuidLinePlugin.ts b/packages/core/plugin/AlignGuidLinePlugin.ts
@@ -5,11 +5,8 @@
  * @LastEditTime: 2024-04-10 17:32:48
  * @Description: 辅助线功能
  */
-
-import Editor from '../Editor';
-type IEditor = Editor;
-
 import { fabric } from 'fabric';
+import { IEditor, IPluginTempl } from '@kuaitu/core';
 
 declare interface VerticalLine {
   x: number;

diff --git a/packages/core/plugin/BarCodePlugin.ts b/packages/core/plugin/BarCodePlugin.ts
@@ -7,10 +7,15 @@
  */
 
 import { fabric } from 'fabric';
-import Editor from '../Editor';
 import JsBarcode from 'jsbarcode';
+import type { IEditor, IPluginTempl } from '@kuaitu/core';
 
-type IEditor = Editor;
+type IPlugin = Pick<BarCodePlugin, 'addBarcode' | 'setBarcode' | 'getBarcodeTypes'>;
+
+declare module '@kuaitu/core' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  interface IEditor extends IPlugin {}
+}
 
 // 条形码生成参数
 // https://github.com/lindell/JsBarcode/wiki/Options

diff --git a/packages/core/plugin/CenterAlignPlugin.ts b/packages/core/plugin/CenterAlignPlugin.ts
@@ -7,8 +7,14 @@
  */
 
 import { fabric } from 'fabric';
-import Editor from '../Editor';
-type IEditor = Editor;
+import type { IEditor, IPluginTempl } from '@kuaitu/core';
+
+type IPlugin = Pick<CenterAlignPlugin, 'centerH' | 'center' | 'position' | 'centerV'>;
+
+declare module '@kuaitu/core' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  interface IEditor extends IPlugin {}
+}
 
 class CenterAlignPlugin implements IPluginTempl {
   static pluginName = 'CenterAlignPlugin';

diff --git a/packages/core/plugin/ControlsPlugin.ts b/packages/core/plugin/ControlsPlugin.ts
@@ -5,16 +5,13 @@
  * @LastEditTime: 2024-07-16 14:59:25
  * @Description: 控制条插件
  */
-
-import Editor from '../Editor';
-type IEditor = Editor;
-
 import { fabric } from 'fabric';
 import verticalImg from '../assets/middlecontrol.svg?url';
 // import verticalImg from './middlecontrol.svg';
 import horizontalImg from '../assets/middlecontrolhoz.svg?url';
 import edgeImg from '../assets/edgecontrol.svg?url';
 import rotateImg from '../assets/rotateicon.svg?url';
+import type { IEditor, IPluginTempl } from '@kuaitu/core';
 
 /**
  * 实际场景: 在进行某个对象缩放的时候，由于fabricjs默认精度使用的是toFixed(2)。

diff --git a/packages/core/plugin/ControlsRotatePlugin.ts b/packages/core/plugin/ControlsRotatePlugin.ts
@@ -5,9 +5,7 @@
  * @LastEditTime: 2024-04-10 17:32:56
  * @Description: 控制条插件
  */
-
-import Editor from '../Editor';
-type IEditor = Editor;
+import type { IEditor, IPluginTempl } from '@kuaitu/core';
 
 // 定义旋转光标样式，根据转动角度设定光标旋转
 function rotateIcon(angle: number) {

diff --git a/packages/core/plugin/CopyPlugin.ts b/packages/core/plugin/CopyPlugin.ts
@@ -7,10 +7,16 @@
  */
 
 import { fabric } from 'fabric';
-import Editor from '../Editor';
-type IEditor = Editor;
 import { v4 as uuid } from 'uuid';
 import { getImgStr } from '../utils/utils';
+import type { IEditor, IPluginTempl } from '@kuaitu/core';
+
+type IPlugin = Pick<CopyPlugin, 'clone'>;
+
+declare module '@kuaitu/core' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  interface IEditor extends IPlugin {}
+}
 
 class CopyPlugin implements IPluginTempl {
   static pluginName = 'CopyPlugin';

diff --git a/packages/core/plugin/DeleteHotKeyPlugin.ts b/packages/core/plugin/DeleteHotKeyPlugin.ts
@@ -7,9 +7,14 @@
  */
 
 import { fabric } from 'fabric';
-import Editor from '../Editor';
-type IEditor = Editor;
-// import { v4 as uuid } from 'uuid';
+import type { IEditor, IPluginTempl } from '@kuaitu/core';
+
+type IPlugin = Pick<DeleteHotKeyPlugin, 'del'>;
+
+declare module '@kuaitu/core' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  interface IEditor extends IPlugin {}
+}
 
 class DeleteHotKeyPlugin implements IPluginTempl {
   static pluginName = 'DeleteHotKeyPlugin';

diff --git a/packages/core/plugin/DrawLinePlugin.ts b/packages/core/plugin/DrawLinePlugin.ts
@@ -10,8 +10,14 @@ import { v4 as uuid } from 'uuid';
 import { fabric } from 'fabric';
 import Arrow from '../objects/Arrow';
 import ThinTailArrow from '../objects/ThinTailArrow';
-import Editor from '../Editor';
-type IEditor = Editor;
+import type { IEditor, IPluginTempl } from '@kuaitu/core';
+
+type IPlugin = Pick<DrawLinePlugin, 'setLineType' | 'setMode'>;
+
+declare module '@kuaitu/core' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  interface IEditor extends IPlugin {}
+}
 
 class DrawLinePlugin implements IPluginTempl {
   static pluginName = 'DrawLinePlugin';

diff --git a/packages/core/plugin/DrawPolygonPlugin.ts b/packages/core/plugin/DrawPolygonPlugin.ts
@@ -1,9 +1,14 @@
 import { fabric } from 'fabric';
-import Editor from '../Editor';
 import { v4 as uuid } from 'uuid';
 import { shiftAngle } from '../utils/utils';
+import type { IEditor, IPluginTempl } from '@kuaitu/core';
 
-type IEditor = Editor;
+type IPlugin = Pick<DrawPolygonPlugin, 'beginDrawPolygon' | 'endDrawPolygon' | 'discardPolygon'>;
+
+declare module '@kuaitu/core' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  interface IEditor extends IPlugin {}
+}
 
 type LineCoords = [fabric.Point, fabric.Point];
 type OffListener = (ev: fabric.IEvent) => void;

diff --git a/packages/core/plugin/DringPlugin.ts b/packages/core/plugin/DringPlugin.ts
@@ -6,8 +6,14 @@
  * @Description: 拖拽插件
  */
 
-import Editor from '../Editor';
-type IEditor = Editor;
+import { IEditor, IPluginTempl } from '@kuaitu/core';
+
+type IPlugin = Pick<DringPlugin, 'startDring' | 'endDring'>;
+
+declare module '@kuaitu/core' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  interface IEditor extends IPlugin {}
+}
 
 export class DringPlugin implements IPluginTempl {
   defautOption = {};

diff --git a/packages/core/plugin/FlipPlugin.ts b/packages/core/plugin/FlipPlugin.ts
@@ -1,16 +1,21 @@
 import { fabric } from 'fabric';
-import type Editor from '../Editor';
 import { SelectMode } from '../eventType';
-// import { Ref } from 'vue';
+import type { IEditor, IPluginTempl } from '@kuaitu/core';
+
+type IPlugin = Pick<FlipPlugin, 'flip'>;
+
+declare module '@kuaitu/core' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  interface IEditor extends IPlugin {}
+}
 
-// import { t } from '@/language/index';
 const t = (key: string) => key;
 // import event from '@/utils/event/notifier';
 
 export default class FlipPlugin implements IPluginTempl {
   static pluginName = 'FlipPlugin';
   static apis = ['flip'];
-  constructor(public canvas: fabric.Canvas, public editor: Editor) {}
+  constructor(public canvas: fabric.Canvas, public editor: IEditor) {}
 
   flip(type: 'X' | 'Y') {
     const activeObject = this.canvas.getActiveObject();