refactor(lock): 增加lock插件

Author: nihaojob

packages/core/index.ts

@@ -1,8 +1,8 @@
 /*
  * @Author: 秦少卫
  * @Date: 2023-02-03 23:29:34
- * @LastEditors: June [email protected]
- * @LastEditTime: 2024-06-19 11:04:37
+ * @LastEditors: 秦少卫
+ * @LastEditTime: 2024-07-06 12:10:52
  * @Description: 核心入口文件
  */
 import Editor from './Editor';
@@ -36,6 +36,7 @@ export { default as BarCodePlugin } from './plugin/BarCodePlugin';
 export { default as QrCodePlugin } from './plugin/QrCodePlugin';
 export { default as ImageStroke } from './plugin/ImageStroke';
 export { default as ResizePlugin } from './plugin/ResizePlugin';
+export { default as LockPlugin } from './plugin/LockPlugin';
 import EventType from './eventType';
 import Utils from './utils/utils';
 

packages/core/plugin/LockPlugin.ts

@@ -0,0 +1,86 @@
+/*
+ * @Author: 秦少卫
+ * @Date: 2024-07-06 12:10:36
+ * @LastEditors: 秦少卫
+ * @LastEditTime: 2024-07-06 12:10:38
+ * @Description: file content
+ */
+/*
+ * @Author: 秦少卫
+ * @Date: 2024-07-04 14:27:05
+ * @LastEditors: 秦少卫
+ * @LastEditTime: 2024-07-04 23:06:33
+ * @Description: file content
+ */
+import { fabric } from 'fabric';
+import type Editor from '../Editor';
+import { SelectMode } from '../eventType';
+
+export default class LockPlugin implements IPluginTempl {
+  static pluginName = 'LockPlugin';
+  static apis = ['lock', 'unLock'];
+  lockAttrs: string[];
+  constructor(public canvas: fabric.Canvas, public editor: Editor) {
+    this.lockAttrs = [
+      'lockMovementX',
+      'lockMovementY',
+      'lockRotation',
+      'lockScalingX',
+      'lockScalingY',
+    ];
+  }
+
+  hookImportAfter() {
+    this.canvas.forEachObject((obj) => {
+      if (obj.hasControls === false && obj.selectable === false) {
+        this.canvas.setActiveObject(obj);
+        this.lock();
+      }
+    });
+    return Promise.resolve();
+  }
+
+  lock() {
+    const activeObject = this.canvas.getActiveObject();
+    if (activeObject) {
+      activeObject.hasControls = false;
+      activeObject.selectable = false;
+      activeObject.evented = false;
+      // 修改默认属性
+      this.lockAttrs.forEach((key) => {
+        activeObject[key] = true;
+      });
+      this.canvas.discardActiveObject().renderAll();
+    }
+  }
+
+  unLock() {
+    const activeObject = this.canvas.getActiveObject();
+    if (activeObject) {
+      activeObject.hasControls = true;
+      activeObject.selectable = true;
+      activeObject.evented = true;
+      // 修改默认属性
+      this.lockAttrs.forEach((key) => {
+        activeObject[key] = false;
+      });
+      this.canvas.discardActiveObject().renderAll();
+    }
+  }
+
+  contextMenu() {
+    const selectedMode = this.editor.getSelectMode();
+    const activeObject = this.canvas.getActiveObject();
+    if (selectedMode === SelectMode.ONE && activeObject) {
+      if (activeObject.selectable) {
+        return [{ text: '锁定', hotkey: '', onclick: () => this.lock() }];
+      } else {
+        return [{ text: '解锁', hotkey: '', onclick: () => this.unLock() }];
+      }
+    }
+  }
+
+  destroy() {
+    console.log('pluginDestroy');
+  }
+}

src/components/lock.vue

@@ -2,7 +2,7 @@
  * @Author: 秦少卫
  * @Date: 2022-09-03 19:16:55
  * @LastEditors: 秦少卫
- * @LastEditTime: 2024-05-21 09:21:51
+ * @LastEditTime: 2024-07-06 12:20:00
  * @Description: 锁定元素
 -->
 
@@ -18,48 +18,13 @@ import useSelect from '@/hooks/select';
 import { onBeforeUnmount, onMounted } from 'vue';
 
 const { mixinState, canvasEditor } = useSelect();
-const lockAttrs = [
-  'lockMovementX',
-  'lockMovementY',
-  'lockRotation',
-  'lockScalingX',
-  'lockScalingY',
-];
 const isLock = ref(false);
-const lock = () => {
-  // 修改自定义属性
-  mixinState.mSelectActive.hasControls = false;
-  // 修改默认属性
-  lockAttrs.forEach((key) => {
-    mixinState.mSelectActive[key] = true;
-  });
-
-  mixinState.mSelectActive.selectable = false;
-
-  isLock.value = true;
-  canvasEditor.canvas.renderAll();
-};
-const unLock = () => {
-  // 修改自定义属性
-  mixinState.mSelectActive.hasControls = true;
-  // 修改默认属性
-  lockAttrs.forEach((key) => {
-    mixinState.mSelectActive[key] = false;
-  });
-  mixinState.mSelectActive.selectable = true;
-
-  isLock.value = false;
-  canvasEditor.canvas.renderAll();
-};
-
 const doLock = (isLock) => {
-  isLock ? lock() : unLock();
+  isLock ? canvasEditor.lock() : canvasEditor.unLock();
 };
 
 const handleSelected = (items) => {
-  isLock.value = !items[0].hasControls;
-  // eslint-disable-next-line prefer-destructuring
-  mixinState.mSelectActive = items[0];
+  isLock.value = !items[0].selectable;
 };
 
 onMounted(() => {

src/hooks/useSelectListen.ts

@@ -3,8 +3,8 @@
  * @version:
  * @Author: wuchenguang1998
  * @Date: 2024-05-04 14:36:49
- * @LastEditors: wuchenguang1998
- * @LastEditTime: 2024-05-04 15:27:11
+ * @LastEditors: 秦少卫
+ * @LastEditTime: 2024-07-06 12:15:19
  */
 import Editor, { EventType } from '@kuaitu/core';
 import { get } from 'lodash-es';
@@ -30,6 +30,7 @@ export default function useSelectListen(canvasEditor: Editor) {
 
   const selectOne = (e: [fabric.Object]) => {
     state.mSelectMode = SelectMode.ONE;
+    state.mSelectActive = e[0];
     if (e[0] && get(e[0], 'clip')) {
       selectCancel();
       // state.mSelectId = get(e[0], 'targetId');

src/views/home/index.vue

@@ -1,8 +1,8 @@
 <!--
  * @Author: 秦少卫
  * @Date: 2024-05-17 15:30:21
- * @LastEditors: June [email protected]
- * @LastEditTime: 2024-06-19 11:05:24
+ * @LastEditors: 秦少卫
+ * @LastEditTime: 2024-07-06 12:11:08
  * @Description: file content
 -->
 <template>
@@ -272,6 +272,7 @@ import Editor, {
   QrCodePlugin,
   ImageStroke,
   ResizePlugin,
+  LockPlugin,
 } from '@kuaitu/core';
 import Edit from '@/components/edit.vue';
 import ClipImage from '@/components/clipImage.vue';
@@ -387,6 +388,7 @@ onMounted(() => {
   canvasEditor.use(PsdPlugin);
   canvasEditor.use(ImageStroke);
   canvasEditor.use(ResizePlugin);
+  canvasEditor.use(LockPlugin);
 
   state.show = true;
   // 默认打开标尺