refactor(事件通知): 迁移到Core内部

packages/core/ServersPlugin.ts

@@ -2,7 +2,7 @@
  * @Author: 秦少卫
  * @Date: 2023-06-20 12:52:09
  * @LastEditors: 秦少卫
- * @LastEditTime: 2024-03-05 22:02:19
+ * @LastEditTime: 2024-04-10 14:47:44
  * @Description: 内部插件
  */
 import { v4 as uuid } from 'uuid';
@@ -12,6 +12,7 @@ import { fabric } from 'fabric';
 import Editor from '../core';
 type IEditor = Editor;
 // import { v4 as uuid } from 'uuid';
+import { SelectEvent, SelectMode } from './eventType';
 
 function downFile(fileStr: string, fileType: string) {
   const anchorEl = document.createElement('a');
@@ -36,6 +37,7 @@ function transformText(objects: any) {
 class ServersPlugin {
   public canvas: fabric.Canvas;
   public editor: IEditor;
+  public selectedMode: SelectMode;
   static pluginName = 'ServersPlugin';
   static apis = [
     'insert',
@@ -48,11 +50,44 @@ class ServersPlugin {
     'saveImg',
     'clear',
     'preview',
+    'getSelectMode',
   ];
+  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;
+    this.selectedMode = SelectMode.EMPTY;
+    this._initSelectEvent();
+  }
+
+  private _initSelectEvent() {
+    this.canvas.on('selection:created', () => this._emitSelectEvent());
+    this.canvas.on('selection:updated', () => this._emitSelectEvent());
+    this.canvas.on('selection:cleared', () => this._emitSelectEvent());
+  }
+
+  private _emitSelectEvent() {
+    if (!this.canvas) {
+      throw TypeError('还未初始化');
+    }
+
+    const actives = this.canvas
+      .getActiveObjects()
+      .filter((item) => !(item instanceof fabric.GuideLine)); // 过滤掉辅助线
+    if (actives && actives.length === 1) {
+      this.selectedMode = SelectMode.ONE;
+      this.editor.emit(SelectEvent.ONE, actives);
+    } else if (actives && actives.length > 1) {
+      this.selectedMode = SelectMode.MULTI;
+      this.editor.emit(SelectEvent.MULTI, actives);
+    } else {
+      this.editor.emit(SelectEvent.CANCEL);
+    }
+  }
+
+  getSelectMode() {
+    return String(this.selectedMode);
   }
 
   insert() {

packages/core/core.ts

@@ -154,7 +154,7 @@ class Editor extends EventEmitter {
   }
 
   // 解决 listener 为 undefined 的时候卸载错误
-  off<K>(eventName, listener): this {
+  off<K>(eventName: string, listener: any): this {
     // noinspection TypeScriptValidateTypes
     return listener ? super.off(eventName, listener) : this;
   }

packages/core/plugin/FlipPlugin.ts

@@ -1,29 +1,19 @@
 import { fabric } from 'fabric';
 import type Editor from '../core';
-import { SelectEvent, SelectMode } from '../eventType';
-import { Ref } from 'vue';
+import { SelectMode } from '../eventType';
+// import { Ref } from 'vue';
 
 import { t } from '@/language/index';
-import event from '@/utils/event/notifier';
+// import event from '@/utils/event/notifier';
 
 export default class FlipPlugin {
   public canvas: fabric.Canvas;
   public editor: Editor;
   static pluginName = 'FlipPlugin';
   static apis = ['flip'];
-  selectedMode: Ref<SelectMode>;
   constructor(canvas: fabric.Canvas, editor: Editor) {
     this.canvas = canvas;
     this.editor = editor;
-    this.selectedMode = ref(SelectMode.EMPTY);
-
-    this.init();
-  }
-
-  init() {
-    event.on(SelectEvent.ONE, () => (this.selectedMode.value = SelectMode.ONE));
-    event.on(SelectEvent.MULTI, () => (this.selectedMode.value = SelectMode.MULTI));
-    event.on(SelectEvent.CANCEL, () => (this.selectedMode.value = SelectMode.EMPTY));
   }
 
   flip(type: 'X' | 'Y') {
@@ -35,7 +25,8 @@ export default class FlipPlugin {
   }
 
   contextMenu() {
-    if (this.selectedMode.value === SelectMode.ONE) {
+    const selectedMode = this.editor.getSelectMode();
+    if (selectedMode === SelectMode.ONE) {
       return [
         {
           text: '翻转',

src/components/attribute.vue

@@ -307,7 +307,6 @@ import { Spin } from 'view-ui-plus';
 import { useFont } from '@/hooks';
 
 const { fontsList, loadFont } = useFont();
-const event = inject('event');
 const update = getCurrentInstance();
 const { fabric, mixinState, canvasEditor } = useSelect();
 // 通用元素
@@ -486,8 +485,8 @@ const selectCancel = () => {
 const init = () => {
   // 获取字体数据
 
-  event.on('selectCancel', selectCancel);
-  event.on('selectOne', getObjectAttr);
+  canvasEditor.on('selectCancel', selectCancel);
+  canvasEditor.on('selectOne', getObjectAttr);
   canvasEditor.canvas.on('object:modified', getObjectAttr);
 };
 

src/components/filters.vue

@@ -2,7 +2,7 @@
  * @Author: 秦少卫
  * @Date: 2023-04-06 23:04:38
  * @LastEditors: 秦少卫
- * @LastEditTime: 2023-07-16 12:48:28
+ * @LastEditTime: 2024-04-10 14:43:26
  * @Description: 图片滤镜
 -->
 
@@ -84,7 +84,6 @@ import useSelect from '@/hooks/select';
 import { uiType, paramsFilters, combinationFilters } from '@/config/constants/filter';
 
 const { fabric, mixinState, canvasEditor } = useSelect();
-const event = inject('event');
 const update = getCurrentInstance();
 // 无参数滤镜
 const noParamsFilters = {
@@ -172,11 +171,11 @@ const handleSelectOne = () => {
 };
 
 onMounted(() => {
-  event.on('selectOne', handleSelectOne);
+  canvasEditor.on('selectOne', handleSelectOne);
 });
 
 onBeforeUnmount(() => {
-  event.off('selectOne', handleSelectOne);
+  canvasEditor.off('selectOne', handleSelectOne);
 });
 
 // 图片地址拼接

src/components/lock.vue

@@ -2,7 +2,7 @@
  * @Author: 秦少卫
  * @Date: 2022-09-03 19:16:55
  * @LastEditors: 秦少卫
- * @LastEditTime: 2023-07-16 12:39:51
+ * @LastEditTime: 2024-04-10 14:43:36
  * @Description: 锁定元素
 -->
 
@@ -17,7 +17,6 @@
 import useSelect from '@/hooks/select';
 import { onBeforeUnmount, onMounted } from 'vue';
 
-const event = inject('event');
 const { mixinState, canvasEditor } = useSelect();
 const lockAttrs = [
   'lockMovementX',
@@ -64,11 +63,11 @@ const handleSelected = (items) => {
 };
 
 onMounted(() => {
-  event.on('selectOne', handleSelected);
+  canvasEditor.on('selectOne', handleSelected);
 });
 
 onBeforeUnmount(() => {
-  event.off('selectOne', handleSelected);
+  canvasEditor.off('selectOne', handleSelected);
 });
 </script>
 

src/components/replaceImg.vue

@@ -2,7 +2,7 @@
  * @Author: 秦少卫
  * @Date: 2023-04-06 22:26:57
  * @LastEditors: 秦少卫
- * @LastEditTime: 2023-07-05 01:04:30
+ * @LastEditTime: 2024-04-10 14:37:51
  * @Description: 图片替换
 -->
 
@@ -18,7 +18,7 @@ import useSelect from '@/hooks/select';
 import { getImgStr, selectFiles, insertImgFile } from '@/utils/utils';
 
 const update = getCurrentInstance();
-const event = inject('event');
+// const canvasEditor = inject('canvasEditor');
 const { mixinState, canvasEditor } = useSelect();
 const type = ref('');
 
@@ -54,10 +54,10 @@ const init = () => {
 };
 
 onMounted(() => {
-  event.on('selectOne', init);
+  canvasEditor.on('selectOne', init);
 });
 
 onBeforeUnmount(() => {
-  event.off('selectOne', init);
+  canvasEditor.off('selectOne', init);
 });
 </script>

src/hooks/select.ts

@@ -4,16 +4,12 @@
  * @Author: June
  * @Date: 2023-04-23 21:10:05
  * @LastEditors: 秦少卫
- * @LastEditTime: 2024-04-10 14:03:55
+ * @LastEditTime: 2024-04-10 14:42:34
  */
 import { inject, onBeforeMount, onMounted, reactive } from 'vue';
-// import { SelectEvent, SelectMode } from '@/utils/event/types';
 
-import { EventType } from '@kuaitu/core';
+import Editor, { EventType } from '@kuaitu/core';
 const { SelectEvent, SelectMode } = EventType;
-
-import EventEmitter from 'events';
-
 interface Selector {
   mSelectMode: SelectMode;
   mSelectOneType: string | undefined;
@@ -32,9 +28,7 @@ export default function useSelect() {
   });
 
   const fabric = inject('fabric');
-  // const canvas = inject('canvas');
-  const canvasEditor = inject('canvasEditor');
-  const event = inject('event') as EventEmitter;
+  const canvasEditor = inject('canvasEditor') as Editor;
 
   const selectOne = (e: [fabric.Object]) => {
     state.mSelectMode = SelectMode.ONE;
@@ -59,20 +53,19 @@ export default function useSelect() {
   };
 
   onMounted(() => {
-    event.on(SelectEvent.ONE, selectOne);
-    event.on(SelectEvent.MULTI, selectMulti);
-    event.on(SelectEvent.CANCEL, selectCancel);
+    canvasEditor.on(SelectEvent.ONE, selectOne);
+    canvasEditor.on(SelectEvent.MULTI, selectMulti);
+    canvasEditor.on(SelectEvent.CANCEL, selectCancel);
   });
 
   onBeforeMount(() => {
-    event.off(SelectEvent.ONE, selectOne);
-    event.off(SelectEvent.MULTI, selectMulti);
-    event.off(SelectEvent.CANCEL, selectCancel);
+    canvasEditor.off(SelectEvent.ONE, selectOne);
+    canvasEditor.off(SelectEvent.MULTI, selectMulti);
+    canvasEditor.off(SelectEvent.CANCEL, selectCancel);
   });
 
   return {
     fabric,
-    // canvas,
     canvasEditor,
     mixinState: state,
   };

src/views/home/index.vue

@@ -164,14 +164,9 @@ import layer from '@/components/layer.vue';
 import attribute from '@/components/attribute.vue';
 
 // 功能组件
-import { CanvasEventEmitter } from '@/utils/event/notifier';
 // import { downFile } from '@/utils/utils';
 import { fabric } from 'fabric';
 
-// import test from '@kuaitu/core';
-
-// console.log(test(), '1111');
-
 const repoSrc = import.meta.env.APP_REPO;
 
 import Editor, {
@@ -199,8 +194,6 @@ import Editor, {
 // 创建编辑器
 const canvasEditor = new Editor();
 
-const event = new CanvasEventEmitter();
-
 const state = reactive({
   menuActive: 1,
   show: false,
@@ -243,7 +236,6 @@ onMounted(() => {
     repoSrc,
   });
 
-  event.init(canvas);
   state.show = true;
 });
 
@@ -285,7 +277,7 @@ const switchAttrBar = () => {
 };
 
 provide('fabric', fabric);
-provide('event', event);
+// provide('event', event);
 provide('canvasEditor', canvasEditor);
 </script>
 <style lang="less" scoped>