cbvirtua 1.0.50 → 1.0.52

package/drawingBoard-main/drawingBoard-main/src/utils/DrawingBoard.ts

@@ -0,0 +1,213 @@
+import "@leafer-in/editor";
+import "@leafer-in/text-editor";
+import Tools, { INITIAL_HEIGHT, INITIAL_WIDTH } from "./Tools";
+
+import {
+  App,
+  DragEvent,
+  ICursorType,
+  ILeaf,
+  IUIJSONData,
+  Text,
+} from "leafer-ui";
+import { Ref, ref, toRef, watch } from "vue";
+import { EditorEvent } from "@leafer-in/editor";
+import History from "./History";
+import { IAppProps } from "./types";
+
+class DrawingBoard {
+  private leaferInstance: null | App = null;
+  private rootDom: null | HTMLElement = null;
+  private isSelect = false;
+  private onChange: (json: IUIJSONData) => void = () => {};
+  private history: null | History = null;
+
+  public tools: null | Tools = null;
+  public selectedGraphics: Ref<null | any> = ref(null);
+  public clearGraphicsQueue = new Map<ILeaf, ILeaf>();
+  public readonly leaferInstanceReadonly: null | App = null;
+
+  constructor({ domId, onChange, config }: IAppProps) {
+    this.rootDom = document.getElementById(domId);
+
+    if (!this.rootDom) {
+      console.warn("未找到挂载元素！");
+      return;
+    }
+
+    if (onChange) this.onChange = onChange;
+
+    this.leaferInstance = this.initApp(this.rootDom);
+    this.leaferInstanceReadonly = this.leaferInstance;
+    this.tools = new Tools(config);
+    this.history = new History(this.leaferInstance);
+    this.initEvent(this.leaferInstance);
+
+    watch(
+      () => this.tools.toolbarActiveIndex.value,
+      (newValue) => {
+        this.setEditorState(!newValue);
+        this.setCursor();
+      }
+    );
+  }
+
+  private initApp = (view: HTMLElement) => {
+    const app = new App({
+      view,
+      editor: {},
+    });
+
+    return app;
+  };
+
+  private initEvent = (app: App) => {
+    app.on(DragEvent.DOWN, this.mousedown);
+    app.on(DragEvent.DRAG, this.mousemove);
+    app.on(DragEvent.UP, this.mouseup);
+    app.editor.on(EditorEvent.SELECT, this.graphicSelected);
+    document.body.addEventListener("keydown", this.onKeyDownEvent);
+  };
+
+  public destroy() {
+    this.leaferInstance.off(DragEvent.DOWN, this.mousedown);
+    this.leaferInstance.off(DragEvent.DRAG, this.mousemove);
+    this.leaferInstance.off(DragEvent.UP, this.mouseup);
+    this.leaferInstance.editor.off(EditorEvent.SELECT, this.graphicSelected);
+    document.body.removeEventListener("keydown", this.onKeyDownEvent);
+  }
+
+  onKeyDownEvent = (event: KeyboardEvent) => {
+    // 快捷键撤销
+    if (event.ctrlKey && event.key === "z") this.historyBack();
+
+    // 快捷键取消撤销
+    if (event.ctrlKey && event.key === "y") this.historyUnBack();
+  };
+
+  private mousedown = (e: DragEvent) =>
+    this.aop(null, () => {
+      const { x, y } = e.getPage();
+
+      const graphics = this.tools.getActiveGraphics();
+
+      const graph = graphics.createdFactory!(
+        x - INITIAL_WIDTH,
+        y - INITIAL_HEIGHT
+      );
+
+      this.selectedGraphics.value = graph;
+      this.leaferInstance.tree.add(graph);
+    });
+
+  private mousemove = (e: DragEvent) =>
+    this.aop(null, () => {
+      if (!this.selectedGraphics.value) return;
+
+      const graphics = this.tools.getActiveGraphics();
+
+      // 不需要移动
+      if (graphics.notMove) return;
+
+      const { x, y } = this.selectedGraphics.value;
+
+      if (!x || !y) return;
+
+      const { x: offsetX, y: offsetY } = e.getPage();
+      const [width, height] = [offsetX - x, offsetY - y];
+
+      if(graphics.onMousemove) {
+        graphics.onMousemove(e, this, { width, height })
+      } else {
+        const scaleX = width < 0 ? -1 : 1,
+          scaleY = height < 0 ? -1 : 1;
+
+        this.selectedGraphics.value.scaleX = scaleX;
+        this.selectedGraphics.value.scaleY = scaleY;
+        this.selectedGraphics.value.width = Math.abs(width);
+        this.selectedGraphics.value.height = Math.abs(height);
+      }
+    });
+
+  private mouseup = () => {
+    if (this.isSelect) return;
+
+    if (this.tools.getActiveGraphics().isAfterRemove) {
+      this.selectedGraphics.value.remove();
+    }
+
+    this.clearGraphicsQueue.forEach((graphics) => {
+      graphics.remove();
+      this.clearGraphicsQueue.delete(graphics);
+    });
+
+    this.tools.toolbarActiveIndex.value = 0;
+    this.selectedGraphics.value = null;
+
+    const isSave = this.history.save(this.leaferInstance.tree.toJSON());
+    isSave && this.onChange(this.leaferInstance.tree.toJSON());
+  };
+
+  private aop = (beforeHandler, afterHandler) => {
+    beforeHandler && beforeHandler();
+
+    if (!this.tools.toolbarActiveIndex.value) return;
+
+    afterHandler && afterHandler();
+  };
+
+  public setEditorState = (state: boolean) => {
+    this.leaferInstance.editor.cancel();
+    this.leaferInstance.editor.hittable = state;
+    this.leaferInstance.editor.visible = state;
+  };
+
+  private graphicSelected = ({ value }: any) => {
+    if (!value || !value?.tag) {
+      this.selectedGraphics.value = null;
+      this.isSelect = false;
+      return;
+    }
+
+    this.isSelect = true;
+
+    if (value.tag === "Pen") {
+      value.children[0].name = value.name;
+      this.selectedGraphics.value = value.children[0];
+    } else {
+      this.selectedGraphics.value = value;
+    }
+  };
+
+  public setCursor = () => {
+    const cursor = (this.tools.getActiveGraphics().cursor ||
+      "crosshair") as ICursorType;
+    this.leaferInstance.cursor = this.tools.toolbarActiveIndex.value
+      ? cursor
+      : "auto";
+  };
+
+  public getSelectedGraphics = () => {
+    return toRef(
+      this.selectedGraphics.value
+        ? this.selectedGraphics.value
+        : this.tools.getActiveGraphics()
+    );
+  };
+
+  setJson = (json: IUIJSONData | null) => {
+    if (!json) return;
+    this.leaferInstance.tree.set({ children: json.children });
+    this.onChange(json);
+  };
+
+  historyBack = () => {
+    this.setJson(this.history.getBackJson());
+  };
+
+  historyUnBack = () => {
+    this.setJson(this.history.getUnBackJson());
+  };
+}
+
+export default DrawingBoard;

package/drawingBoard-main/drawingBoard-main/src/utils/History.ts

@@ -0,0 +1,70 @@
+import { App, IUIJSONData } from "leafer-ui";
+import { Ref, ref } from "vue";
+
+export const clearAppJson = (_: IUIJSONData) => {
+    _.children = _.children?.filter(({ tag }) => tag !== "SimulateElement")
+
+    return _;
+}
+
+class History {
+    queue: Ref<IUIJSONData[]> = ref([]);
+    activeIndex = this.queue.value.length
+
+    // // 撤销 || 取消撤销
+    // operate: IOperate = ''
+    // preOperate: IOperate = ''
+
+    constructor(app: App) {
+        this.save(app.tree.toJSON())
+    }
+
+    save(json: IUIJSONData) {
+        if (!json) return false;
+
+        json = clearAppJson(json);
+
+        const newJson = JSON.stringify(json);
+        const oldJson = JSON.stringify(this.queue.value[this.activeIndex - 1] || '');
+
+        // 可优化，简单对比
+        if (newJson === oldJson) return false;
+
+        if (this.queue.value.length >= 20) {
+            this.queue.value.shift();
+        }
+
+        this.queue.value.push(json);
+        this.activeIndex = this.queue.value.length;
+
+        return true;
+    }
+
+    getBackJson() {
+        // 上一次
+        const _json = this.queue.value[this.activeIndex - 2];
+
+        if (this.activeIndex < -1 || !_json) {
+            console.warn('已无更多可撤销数据');
+            return null;
+        };
+
+        this.activeIndex--;
+
+        return _json;
+    }
+
+    getUnBackJson() {
+        if (this.activeIndex >= this.queue.value.length || !this.queue.value[this.activeIndex]) {
+            console.warn('已无更多可恢复数据');
+            return null
+        }
+
+        const _json = this.queue.value[this.activeIndex]
+        this.activeIndex++;
+
+        return _json;
+    }
+}
+
+export default History

package/drawingBoard-main/drawingBoard-main/src/utils/Tools.ts

@@ -0,0 +1,241 @@
+import { Ellipse, Line, Pen, Rect, Text } from "leafer-ui";
+import Index from "../components/tools/index";
+import { render, h, ref, Ref, nextTick } from "vue";
+import { Arrow } from "@leafer-in/arrow";
+
+import SELECT_TOOl_ICON from "../assets/xuanzegongju.svg";
+import BRUSH_TOOl_ICON from "../assets/huabi.svg";
+import ERASER_TOOl_ICON from "../assets/xiangpigongju.svg";
+import RECT_TOOl_ICON from "../assets/huabigongju-juxing.svg";
+import ELLIPSE_TOOl_ICON from "../assets/huabigongju-tuoyuan.svg";
+import TEXT_TOOl_ICON from "../assets/huabigongju-wenben.svg";
+import LINE_TOOl_ICON from "../assets/zhixiangongju.svg";
+import ARROW_TOOl_ICON from "../assets/jiantougongju-hover.svg";
+
+import LineSegmentSizePlugin from "../components/plugins/LineSegmentSizePlugin";
+import LineSegmentColorPlugin from "../components/plugins/LineSegmentColorPlugin";
+import LineSegmentBackgroundColorPlugin from "../components/plugins/LineSegmentBackgroundColorPlugin";
+import { IAppProps, IToolBarItem } from "./types";
+import TextColor from "../components/plugins/TextColor";
+import TextSize from "../components/plugins/TextSize";
+
+export const INITIAL_WIDTH = 0;
+export const INITIAL_HEIGHT = 0;
+
+export const toolBarOptions: IToolBarItem[] = [
+  {
+    icon: SELECT_TOOl_ICON,
+    name: "selectTool",
+    title: "选择",
+  },
+  {
+    icon: BRUSH_TOOl_ICON,
+    name: "brushTool",
+    title: "画笔",
+    strokeWidth: 3,
+    stroke: "rgba(0, 0, 0, 1)",
+    createdFactory(x: number, y: number) {
+      const pen: Pen = new Pen({
+        name: "brushTool",
+        x,
+        y,
+        editable: true,
+      });
+
+      pen.setStyle({
+        stroke: this.stroke,
+        strokeWidth: this.strokeWidth,
+        strokeCap: "round",
+        strokeJoin: "round",
+      });
+      return pen;
+    },
+    onMousemove(e, drawingBoard, point) {
+      drawingBoard.selectedGraphics.value.lineTo(point.width, point.height);
+    },
+    menuPlugins: [LineSegmentSizePlugin, LineSegmentColorPlugin],
+  },
+  {
+    icon: RECT_TOOl_ICON,
+    name: "rectTool",
+    title: "矩形",
+    strokeWidth: 2,
+    stroke: "rgba(0, 0, 0, 1)",
+    fill: "#fff",
+    createdFactory(x: number, y: number) {
+      return new Rect({
+        name: "rectTool",
+        x,
+        y,
+        width: INITIAL_WIDTH,
+        height: INITIAL_HEIGHT,
+        strokeWidth: this.strokeWidth,
+        stroke: this.stroke,
+        fill: this.fill,
+        editable: true,
+      });
+    },
+    menuPlugins: [
+      LineSegmentSizePlugin,
+      LineSegmentColorPlugin,
+      LineSegmentBackgroundColorPlugin,
+    ],
+  },
+  {
+    icon: ELLIPSE_TOOl_ICON,
+    name: "ellipseTool",
+    title: "椭圆",
+    strokeWidth: 2,
+    stroke: "rgba(0, 0, 0, 1)",
+    fill: "#fff",
+    createdFactory(x: number, y: number) {
+      return new Ellipse({
+        name: "ellipseTool",
+        x,
+        y,
+        width: INITIAL_WIDTH,
+        height: INITIAL_HEIGHT,
+        innerRadius: 1,
+        editable: true,
+        strokeWidth: this.strokeWidth,
+        stroke: this.stroke,
+        fill: this.fill,
+      });
+    },
+
+    menuPlugins: [
+      LineSegmentSizePlugin,
+      LineSegmentColorPlugin,
+      LineSegmentBackgroundColorPlugin,
+    ],
+  },
+  {
+    icon: LINE_TOOl_ICON,
+    name: "lineTool",
+    title: "线条",
+    strokeWidth: 3,
+    stroke: "rgba(0, 0, 0, 1)",
+    createdFactory(x: number, y: number) {
+      return new Line({
+        name: "lineTool",
+        x,
+        y,
+        toPoint: { x: 0, y: 0 },
+        strokeWidth: this.strokeWidth,
+        stroke: this.stroke,
+        editable: true,
+      });
+    },
+    onMousemove(e, drawingBoard, point) {
+      drawingBoard.selectedGraphics.value.toPoint = { x: point.width, y: point.height };
+    },
+    menuPlugins: [LineSegmentSizePlugin, LineSegmentColorPlugin],
+  },
+  {
+    icon: ARROW_TOOl_ICON,
+    name: "arrowTool",
+    title: "箭头",
+    strokeWidth: 3,
+    stroke: "rgba(0, 0, 0, 1)",
+    createdFactory(x: number, y: number) {
+      return new Arrow({
+        name: "arrowTool",
+        x,
+        y,
+        toPoint: { x: 0, y: 0 },
+        strokeWidth: this.strokeWidth,
+        stroke: this.stroke,
+        editable: true,
+      });
+    },
+    onMousemove(e, drawingBoard, point) {
+      drawingBoard.selectedGraphics.value.toPoint = { x: point.width, y: point.height };
+    },
+    menuPlugins: [LineSegmentSizePlugin, LineSegmentColorPlugin],
+  },
+  {
+    icon: TEXT_TOOl_ICON,
+    name: "textTool",
+    title: "文本",
+    notMove: true,
+    cursor: "text",
+    fontSize: 24,
+    fill: "rgba(0, 0, 0, 1)",
+    createdFactory(x: number, y: number) {
+      return new Text({
+        name: "textTool",
+        x: x - 5,
+        width: 200,
+        height: 35,
+        y: y - 10,
+        text: "请双击编辑内容",
+        fontSize: this.fontSize,
+        fill: this.fill,
+        editable: true,
+      });
+    },
+    menuPlugins: [TextSize, TextColor],
+  },
+  {
+    icon: ERASER_TOOl_ICON,
+    name: "eraserTool",
+    title: "橡皮擦",
+    cursor: "grabbing",
+    isAfterRemove: true,
+    createdFactory: (x: number, y: number) =>
+      new Line({
+        x,
+        y,
+        toPoint: { x: 0, y: 0 },
+        strokeWidth: 3,
+        stroke: "rgba(0, 0, 0, 1)",
+        editable: true,
+      }),
+
+    onMousemove(e, drawingBoard) {
+      const { target } = drawingBoard.leaferInstanceReadonly.pick(
+        { x: e.x, y: e.y },
+        {
+          hitRadius: 2,
+        }
+      )!;
+
+      if (!target) return;
+
+      const has = drawingBoard.clearGraphicsQueue.has(target);
+
+      if (has) return;
+
+      drawingBoard.clearGraphicsQueue.set(target, target);
+      target.opacity = 0.5;
+    },
+  },
+];
+
+class Tools {
+  public toolbarActiveIndex: Ref<number> = ref(0);
+  constructor(config: IAppProps["config"]) {
+    this.init(config);
+  }
+
+  private init(config: IAppProps["config"]) {
+    if (config.toolbar && config.toolbar.length) {
+      config.toolbar.forEach((item) => {
+        if (item.index) {
+          toolBarOptions.splice(item.index, 0, item);
+        }
+      });
+    }
+
+    const div = document.createElement("div");
+    document.getElementById("app").append(div);
+
+    nextTick(() => render(h(Index), div));
+  }
+
+  public getActiveGraphics() {
+    return toolBarOptions[this.toolbarActiveIndex.value];
+  }
+}
+
+export default Tools;

package/drawingBoard-main/drawingBoard-main/src/utils/types.ts

@@ -0,0 +1,55 @@
+import { App, IUIJSONData, DragEvent, IUI } from "leafer-ui";
+import DrawingBoard from "./DrawingBoard";
+import { Ref } from "vue";
+
+export interface IPluginProps {
+  drawingBoard: DrawingBoard;
+}
+
+export interface IToolBarItem {
+  icon: string;
+  name: string;
+  title: string;
+
+  // 组件工具栏位置
+  index?: number;
+
+  // 禁止移动
+  notMove?: boolean;
+
+  // 手势图标
+  cursor?: string;
+
+  // 是否能够移除
+  isAfterRemove?: boolean;
+
+  // 创建图形工厂函数
+  createdFactory?: (x: number, y: number) => IUI;
+
+  // 自定义鼠标移动函数
+  onMousemove?: (
+    e: DragEvent,
+    drawingBoard: DrawingBoard,
+    point: {
+      width: number;
+      height: number;
+    }
+  ) => void;
+
+  // 菜单插件
+  menuPlugins?: Array<any>;
+  strokeWidth?: number;
+  stroke?: string;
+  fill?: string;
+  fontSize?: number;
+  [key: string]: any;
+}
+
+export interface IAppProps {
+  domId: string;
+  onChange?: (json: IUIJSONData) => void;
+  config?: {
+    // 增加自定义工具栏
+    toolbar?: Array<IToolBarItem>;
+  };
+}

package/drawingBoard-main/drawingBoard-main/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/drawingBoard-main/drawingBoard-main/tsconfig.app.json

@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": false,
+    "jsx": "preserve",
+    // "jsxImportSource": "vue",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "lib": [
+      "esnext",
+      "dom"
+    ],
+    "types": [
+      "element-plus/global",
+      "vite/client",
+    ],
+    "baseUrl": "./",
+    // "paths": {
+    //   "@/*": [
+    //     "src/*"
+    //   ],
+    // },
+    "isolatedModules": true,
+    "skipLibCheck": true
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+  ]
+}

package/drawingBoard-main/drawingBoard-main/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/drawingBoard-main/drawingBoard-main/tsconfig.node.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/drawingBoard-main/drawingBoard-main/vite.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import vueJsx from "@vitejs/plugin-vue-jsx";
+import svgLoader from 'vite-svg-loader'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [vue(), vueJsx(), svgLoader()],
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: "modern-compiler", // or "modern"
+      },
+    },
+  },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cbvirtua",
-  "version": "1.0.50",
+  "version": "1.0.52",
   "description": "",
   "main": "index.js",
   "scripts": {