build(package): 拆分SDK文件

package.json

@@ -18,21 +18,21 @@
     "@vueuse/core": "^10.1.0",
     "axios": "^1.3.4",
     "color-gradient-picker-vue3": "^2.0.7",
-    "events": "^3.3.0",
-    "fabric": "^5.2.1",
-    "fabric-history": "^1.6.0",
     "fontfaceobserver": "^2.1.0",
-    "hotkeys-js": "^3.8.8",
     "lodash-es": "^4.17.21",
     "number-precision": "^1.6.0",
-    "tapable": "^2.2.1",
     "uuid": "^8.3.2",
     "view-ui-plus": "^1.3.7",
+    "fabric": "^5.2.1",
     "vue": "^3.2.25",
     "vue-i18n": "9.0.0",
     "vue-router": "^4.0.16",
-    "vue3-lazyload": "^0.3.6"
+    "vue3-lazyload": "^0.3.6",
+    "@kuaitu/core": "workspace:^"
   },
+  "workspaces": [
+    "packages/*"
+  ],
   "devDependencies": {
     "@commitlint/cli": "^17.4.2",
     "@commitlint/config-conventional": "^17.4.2",
@@ -69,4 +69,4 @@
       "prettier --write"
     ]
   }
-}
+}

packages/core/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@kuaitu/core",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {
+    "events": "^3.3.0",
+    "fabric-history": "^1.6.0",
+    "fontfaceobserver": "^2.1.0",
+    "hotkeys-js": "^3.8.8",
+    "tapable": "^2.2.1",
+    "uuid": "^8.3.2"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}

packages/core/plugin/DrawLinePlugin.ts

@@ -0,0 +1,133 @@
+/*
+ * @Author: 秦少卫
+ * @Date: 2023-06-21 22:09:36
+ * @LastEditors: 秦少卫
+ * @LastEditTime: 2023-06-22 16:07:52
+ * @Description: file content
+ */
+
+import { v4 as uuid } from 'uuid';
+import { fabric } from 'fabric';
+import Arrow from '@/core12122/objects/Arrow';
+import Editor from '../core';
+type IEditor = Editor;
+
+class DrawLinePlugin {
+  public canvas: fabric.Canvas;
+  public editor: IEditor;
+  static pluginName = 'DrawLinePlugin';
+  static apis = ['setArrow', 'setMode'];
+  isDrawingLineMode: boolean;
+  isArrow: boolean;
+  lineToDraw: any;
+  pointer: any;
+  pointerPoints: any;
+  isDrawingLine: boolean;
+  constructor(canvas: fabric.Canvas, editor: IEditor) {
+    this.canvas = canvas;
+    this.editor = editor;
+
+    this.isDrawingLine = false;
+    this.isDrawingLineMode = false;
+    this.isArrow = false;
+    this.lineToDraw = null;
+    this.pointer = null;
+    this.pointerPoints = null;
+    this.init();
+  }
+
+  init() {
+    const { canvas } = this;
+    canvas.on('mouse:down', (o) => {
+      if (!this.isDrawingLineMode) return;
+      canvas.discardActiveObject();
+      canvas.getObjects().forEach((obj) => {
+        obj.selectable = false;
+        obj.hasControls = false;
+      });
+      canvas.requestRenderAll();
+      this.isDrawingLine = true;
+      this.pointer = canvas.getPointer(o.e);
+      this.pointerPoints = [this.pointer.x, this.pointer.y, this.pointer.x, this.pointer.y];
+
+      const NodeHandler = this.isArrow ? Arrow : fabric.Line;
+      this.lineToDraw = new NodeHandler(this.pointerPoints, {
+        strokeWidth: 2,
+        stroke: '#000000',
+        id: uuid(),
+      });
+
+      this.lineToDraw.selectable = false;
+      this.lineToDraw.evented = false;
+      this.lineToDraw.strokeUniform = true;
+      canvas.add(this.lineToDraw);
+    });
+
+    canvas.on('mouse:move', (o) => {
+      if (!this.isDrawingLine) return;
+      canvas.discardActiveObject();
+      const activeObject = canvas.getActiveObject();
+      if (activeObject) return;
+      this.pointer = canvas.getPointer(o.e);
+
+      if (o.e.shiftKey) {
+        // calc angle
+        const startX = this.pointerPoints[0];
+        const startY = this.pointerPoints[1];
+        const x2 = this.pointer.x - startX;
+        const y2 = this.pointer.y - startY;
+        const r = Math.sqrt(x2 * x2 + y2 * y2);
+        let angle = (Math.atan2(y2, x2) / Math.PI) * 180;
+        angle = parseInt(((angle + 7.5) % 360) / 15) * 15;
+
+        const cosx = r * Math.cos((angle * Math.PI) / 180);
+        const sinx = r * Math.sin((angle * Math.PI) / 180);
+
+        this.lineToDraw.set({
+          x2: cosx + startX,
+          y2: sinx + startY,
+        });
+      } else {
+        this.lineToDraw.set({
+          x2: this.pointer.x,
+          y2: this.pointer.y,
+        });
+      }
+
+      canvas.renderAll();
+    });
+
+    canvas.on('mouse:up', () => {
+      if (!this.isDrawingLine) return;
+      this.lineToDraw.setCoords();
+      this.isDrawingLine = false;
+      canvas.discardActiveObject();
+    });
+  }
+
+  setArrow(params: any) {
+    this.isArrow = params;
+  }
+
+  setMode(params: any) {
+    this.isDrawingLineMode = params;
+    if (!this.isDrawingLineMode) {
+      this.endRest();
+    }
+  }
+
+  endRest() {
+    this.canvas.getObjects().forEach((obj) => {
+      if (obj.id !== 'workspace') {
+        obj.selectable = true;
+        obj.hasControls = true;
+      }
+    });
+  }
+
+  destroy() {
+    console.log('pluginDestroy');
+  }
+}
+
+export default DrawLinePlugin;

src/core/plugin/RulerPlugin.ts → packages/core/plugin/RulerPlugin.ts

@@ -11,7 +11,7 @@ import Editor from '../core';
 // import { throttle } from 'lodash-es';
 type IEditor = Editor;
 
-import initRuler from '@/core/ruler';
+import initRuler from '@/core12122/ruler';
 
 class RulerPlugin {
   public canvas: fabric.Canvas;

pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+packages:
+  - 'packages/*'