@tencentcloud/roomkit-electron-vue3 2.6.7 → 2.7.0

package/es/components/Whiteboard/core/arrow.mjs

@@ -9,6 +9,8 @@ fabric.Arrow = fabric.util.createClass(fabric.Line, {
     }
     options = options || {};
     this.callSuper("initialize", points, options);
+    this.arrowWidth = 7;
+    this.arrowHeight = 7;
   },
   _render(ctx) {
     this.callSuper("_render", ctx);
@@ -19,9 +21,9 @@ fabric.Arrow = fabric.util.createClass(fabric.Line, {
     ctx.translate((this.x2 - this.x1) / 2, (this.y2 - this.y1) / 2);
     ctx.rotate(angle);
     ctx.beginPath();
-    ctx.moveTo(5, 0);
-    ctx.lineTo(-5, 5);
-    ctx.lineTo(-5, -5);
+    ctx.moveTo(this.arrowWidth, 0);
+    ctx.lineTo(-this.arrowWidth, this.arrowHeight);
+    ctx.lineTo(-this.arrowWidth, -this.arrowHeight);
     ctx.closePath();
     ctx.fillStyle = this.stroke;
     ctx.fill();
@@ -30,7 +32,10 @@ fabric.Arrow = fabric.util.createClass(fabric.Line, {
 });
 fabric.Arrow.fromObject = (options, callback) => {
   const { x1, x2, y1, y2 } = options;
-  return callback(new fabric.Arrow([x1, y1, x2, y2], options));
+  const arrow = new fabric.Arrow([x1, y1, x2, y2], {
+    ...options
+  });
+  callback(arrow);
 };
 const Arrow = fabric.Arrow;
 export {

package/es/components/Whiteboard/core/historyManager.d.ts

@@ -0,0 +1,27 @@
+import { default as FabricCanvas } from './index';
+import { default as EventEmitter } from './../emitter';
+import { IEvent } from 'fabric/fabric-impl';
+
+interface HistoryManagerEvent {
+    'change-step': IEvent;
+    'change-history': IEvent;
+    [key: string | symbol]: IEvent | any | undefined;
+}
+declare class HistoryManager extends EventEmitter<HistoryManagerEvent> {
+    private canvas;
+    private step;
+    private historyList;
+    constructor(canvas: FabricCanvas);
+    private renderCanvas;
+    undo(): void;
+    redo(): void;
+    private addToUndoStack;
+    clearHistoryList(): void;
+    isCanvasEmpty(): boolean;
+    clear(): void;
+    private initEvent;
+    private setupIpcListeners;
+    private addToUndoUpdate;
+    destroy(): void;
+}
+export default HistoryManager;

package/es/components/Whiteboard/core/historyManager.mjs

@@ -0,0 +1,96 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { inject } from "vue";
+import { ipcRenderer } from "electron";
+import bus from "../../../hooks/useMitt.mjs";
+import EventEmitter from "../emitter.mjs";
+class HistoryManager extends EventEmitter {
+  constructor(canvas) {
+    super();
+    __publicField(this, "canvas", inject("canvas"));
+    __publicField(this, "step", 0);
+    __publicField(this, "historyList", []);
+    this.canvas = canvas;
+    this.initEvent();
+    this.setupIpcListeners();
+  }
+  renderCanvas(data) {
+    if (!this.canvas) return;
+    this.canvas.loadFromJSON(data, () => {
+      var _a;
+      (_a = this.canvas) == null ? void 0 : _a.renderAll();
+    });
+  }
+  undo() {
+    bus.emit("exitTextEditing");
+    if (!this.canvas || this.step === 0) return;
+    this.step = this.step - 1;
+    this.emit("change-step", this.step);
+    this.step === 0 ? this.canvas.clearCanvas() : this.renderCanvas(this.historyList[this.step - 1]);
+  }
+  redo() {
+    if (!this.canvas || this.step >= this.historyList.length) return;
+    const canvasState = this.historyList[this.step];
+    this.step = this.step + 1;
+    this.emit("change-step", this.step);
+    this.renderCanvas(canvasState);
+  }
+  addToUndoStack() {
+    if (!this.canvas) return;
+    const data = this.canvas.toJSON();
+    if (this.historyList.length !== this.step) {
+      this.historyList = this.historyList.slice(0, this.step);
+    }
+    this.historyList.push(data);
+    this.emit("change-history", this.historyList.length);
+    this.step = this.historyList.length;
+    this.emit("change-step", this.step);
+  }
+  clearHistoryList() {
+    this.historyList = [];
+    this.step = 0;
+  }
+  isCanvasEmpty() {
+    var _a;
+    return ((_a = this.canvas) == null ? void 0 : _a.getObjects().length) === 0;
+  }
+  clear() {
+    var _a;
+    if (this.isCanvasEmpty() === true) {
+      return;
+    }
+    (_a = this.canvas) == null ? void 0 : _a.clearCanvas();
+    if (this.historyList.length > 0) {
+      this.addToUndoStack();
+    }
+  }
+  initEvent() {
+    if (this.canvas) {
+      this.canvas.on("push-canvas-to-stack", this.addToUndoUpdate.bind(this));
+    }
+  }
+  setupIpcListeners() {
+    ipcRenderer.on(
+      "whiteboard:clear",
+      this.clearHistoryList = this.clearHistoryList.bind(this)
+    );
+    ipcRenderer.on(
+      "annotation:clear",
+      this.clearHistoryList = this.clearHistoryList.bind(this)
+    );
+  }
+  addToUndoUpdate() {
+    this.addToUndoStack();
+  }
+  destroy() {
+    if (this.canvas) {
+      this.canvas.off("push-canvas-to-stack", this.addToUndoUpdate);
+    }
+    ipcRenderer.removeAllListeners("whiteboard:clear");
+    ipcRenderer.removeAllListeners("annotation:clear");
+  }
+}
+export {
+  HistoryManager as default
+};

package/es/components/Whiteboard/core/index.d.ts

@@ -1,5 +1,6 @@
 import { Canvas as ICanvas, Object as IObject, ILineOptions, IImageOptions, IRectOptions, ICircleOptions, ITextOptions, IEllipseOptions, IEvent, ICanvasOptions, ITriangleOptions } from 'fabric/fabric-impl';
 import { default as EventEmitter } from './../emitter';
+import { DrawingTool, ToolSettings } from './../type';
 
 interface FabricEvents {
     'object:added': IEvent;
@@ -12,13 +13,6 @@ interface FabricEvents {
     'push-canvas-to-stack': IEvent;
     [key: string | symbol]: IEvent | any | undefined;
 }
-export type DrawingTool = 'rectangle' | 'triangle' | 'circle' | 'ellipse' | 'line' | 'arrow' | 'text' | 'pencil' | 'select' | 'eraser' | '';
-interface ShapeOptions {
-    stroke?: string;
-    strokeWidth?: number;
-    fill?: string;
-    opacity?: number;
-}
 declare class FabricCanvas extends EventEmitter<FabricEvents> {
     private canvas;
     private currentShape;
@@ -35,7 +29,7 @@ declare class FabricCanvas extends EventEmitter<FabricEvents> {
     private isValidSelection;
     constructor(canvasId: string);
     getCanvas(): ICanvas;
-    clearCanvas(): void;
+    renderCanvas(data: any): void;
     setBackgroundColor(color: string): void;
     setBackgroundImage(imageUrl: string, options?: IImageOptions): void;
     addObject(object: IObject): void;
@@ -50,9 +44,13 @@ declare class FabricCanvas extends EventEmitter<FabricEvents> {
     exitTextEditing(): void;
     setObjectsSelectable(objectsSelectable: boolean): void;
     setEvented(): void;
+    clearCanvas(): void;
     reloadCanvas(): void;
     setDrawingTool(tool: DrawingTool): void;
-    setOptions(options: ShapeOptions): void;
+    setOptions(toolSetting: ToolSettings): void;
+    setTextOptions(): ITextOptions;
+    setPencilBrushOptions(): void;
+    discardActiveObject(): void;
     drawRect(options: IRectOptions): void;
     drawTriangle(options: ITriangleOptions): void;
     drawCircle(options: ICircleOptions): void;
@@ -64,7 +62,7 @@ declare class FabricCanvas extends EventEmitter<FabricEvents> {
     insertImage(url: string, options?: IImageOptions): void;
     insertPPT(urls: string[]): void;
     setCurrentScense(index: number): void;
-    setEraser(options?: any): void;
+    setEraser(): void;
     private initEvent;
     private onMouseDown;
     private onMouseMove;

package/es/components/Whiteboard/core/index.mjs

@@ -7,21 +7,23 @@ import Arrow from "./arrow.mjs";
 import initControls from "./initControls.mjs";
 import initControlsRotate from "./initControlsRotate.mjs";
 import bus from "../../../hooks/useMitt.mjs";
+import { DrawingTool } from "../type.mjs";
 class FabricCanvas extends EventEmitter {
   constructor(canvasId) {
     super();
     __publicField(this, "canvas");
     __publicField(this, "currentShape", null);
-    __publicField(this, "drawingTool", "");
+    __publicField(this, "drawingTool", DrawingTool.None);
     __publicField(this, "isDrawing", false);
     __publicField(this, "startX", 0);
     __publicField(this, "startY", 0);
     __publicField(this, "endX", 0);
     __publicField(this, "endY", 0);
     __publicField(this, "options", {
-      stroke: "#ff0000",
       strokeWidth: 5,
+      stroke: "#22262E",
       fill: "transparent",
+      lineDash: [],
       opacity: 1
     });
     __publicField(this, "images", []);
@@ -34,7 +36,7 @@ class FabricCanvas extends EventEmitter {
       includeDefaultValues: false,
       perPixelTargetFind: true
     });
-    this.setDrawingTool("pencil");
+    this.setDrawingTool(DrawingTool.Pencil);
     initControls(this.canvas);
     initControlsRotate(this.canvas);
     this.initEvent();
@@ -42,8 +44,10 @@ class FabricCanvas extends EventEmitter {
   getCanvas() {
     return this.canvas;
   }
-  clearCanvas() {
-    this.canvas.clear();
+  renderCanvas(data) {
+    this.loadFromJSON(data, () => {
+      this.renderAll();
+    });
   }
   setBackgroundColor(color) {
     this.canvas.setBackgroundColor(color, () => {
@@ -128,11 +132,14 @@ class FabricCanvas extends EventEmitter {
     });
     this.canvas.renderAll();
   }
+  clearCanvas() {
+    this.canvas.clear();
+  }
   reloadCanvas() {
     this.clearCanvas();
     this.canvas.renderAll();
     bus.emit("reload-canvas");
-    this.setDrawingTool("pencil");
+    this.setDrawingTool(DrawingTool.Pencil);
     this.currentShape = null;
   }
   setDrawingTool(tool) {
@@ -142,27 +149,22 @@ class FabricCanvas extends EventEmitter {
     this.canvas.discardActiveObject();
     this.setObjectsSelectable(false);
     switch (tool) {
-      case "pencil":
+      case DrawingTool.Pencil:
         this.drawFreeDraw();
         break;
-      case "eraser":
+      case DrawingTool.Eraser:
         this.setEvented();
         this.setEraser();
         break;
-      case "select":
+      case DrawingTool.Select:
         this.setObjectsSelectable(true);
         this.resetActiveObject();
         this.canvas.defaultCursor = "move";
         break;
-      case "rectangle":
-      case "triangle":
-      case "circle":
-      case "ellipse":
-      case "line":
-      case "arrow":
+      case DrawingTool.Arrow:
         this.canvas.defaultCursor = "crosshair";
         break;
-      case "text":
+      case DrawingTool.Text:
         this.canvas.defaultCursor = "text";
         break;
       default:
@@ -170,14 +172,35 @@ class FabricCanvas extends EventEmitter {
         break;
     }
   }
-  setOptions(options) {
-    this.options = { ...this.options, ...options };
+  setOptions(toolSetting) {
+    this.options = toolSetting.shapeOptions;
+    this.setPencilBrushOptions();
+  }
+  setTextOptions() {
+    const options = {
+      fontSize: this.options.strokeWidth,
+      fill: this.options.stroke,
+      padding: 5,
+      selectable: false,
+      evented: false
+    };
+    return options;
+  }
+  setPencilBrushOptions() {
+    this.canvas.freeDrawingBrush.color = this.options.stroke;
+    this.canvas.freeDrawingBrush.width = this.options.strokeWidth;
+  }
+  discardActiveObject() {
+    this.canvas.discardActiveObject();
   }
   drawRect(options) {
     const rect = new fabric.Rect({
       ...this.options,
       selectable: false,
       evented: false,
+      strokeUniform: true,
+      noScaleCache: false,
+      strokeDashArray: this.options.lineDash,
       ...options
     });
     this.canvas.add(rect);
@@ -189,6 +212,9 @@ class FabricCanvas extends EventEmitter {
       ...this.options,
       selectable: false,
       evented: false,
+      strokeUniform: true,
+      noScaleCache: false,
+      strokeDashArray: this.options.lineDash,
       ...options
     });
     this.canvas.add(triangle);
@@ -200,6 +226,9 @@ class FabricCanvas extends EventEmitter {
       ...this.options,
       selectable: false,
       evented: false,
+      strokeUniform: true,
+      noScaleCache: false,
+      strokeDashArray: this.options.lineDash,
       ...options
     });
     this.canvas.add(circle);
@@ -211,6 +240,9 @@ class FabricCanvas extends EventEmitter {
       ...this.options,
       selectable: false,
       evented: false,
+      strokeUniform: true,
+      noScaleCache: false,
+      strokeDashArray: this.options.lineDash,
       ...options
     });
     this.canvas.add(ellipse);
@@ -222,18 +254,28 @@ class FabricCanvas extends EventEmitter {
       ...this.options,
       ...options,
       selectable: false,
-      evented: false
+      strokeDashArray: this.options.lineDash,
+      evented: false,
+      strokeUniform: true,
+      noScaleCache: false
     });
     this.canvas.add(line);
     this.currentShape = line;
     this.canvas.defaultCursor = "crosshair";
   }
   drawArrow(x1, y1, x2, y2, options) {
+    const customOptions = {
+      ...options,
+      arrowWidth: (options == null ? void 0 : options.arrowWidth) ?? this.options.strokeWidth,
+      arrowHeight: (options == null ? void 0 : options.arrowHeight) ?? this.options.strokeWidth
+    };
     const arrow = new Arrow([x1, y1, x2, y2], {
       ...this.options,
+      ...customOptions,
       selectable: false,
       evented: false,
-      ...options
+      strokeUniform: true,
+      noScaleCache: false
     });
     this.canvas.add(arrow);
     this.currentShape = arrow;
@@ -241,8 +283,8 @@ class FabricCanvas extends EventEmitter {
   }
   drawFreeDraw() {
     this.canvas.freeDrawingBrush = new fabric.PencilBrush(this.canvas);
-    this.canvas.freeDrawingBrush.color = "#ff0000";
-    this.canvas.freeDrawingBrush.width = 5;
+    this.canvas.freeDrawingBrush.color = this.options.stroke;
+    this.canvas.freeDrawingBrush.width = this.options.strokeWidth;
     this.canvas.freeDrawingCursor = "default";
     this.canvas.isDrawingMode = true;
     this.currentShape = null;
@@ -250,7 +292,12 @@ class FabricCanvas extends EventEmitter {
       const { path } = event;
       if (path) {
         path.set({
-          perPixelTargetFind: true
+          perPixelTargetFind: true,
+          objectCaching: false,
+          statefullCache: true,
+          strokeUniform: true,
+          noScaleCache: false,
+          subdivisionScale: 100
         });
         this.canvas.renderAll();
       }
@@ -258,10 +305,8 @@ class FabricCanvas extends EventEmitter {
   }
   drawText(text, options) {
     const textObj = new fabric.IText(text, {
-      fontSize: 18,
-      fill: "#ff0000",
-      editingBorderColor: "#999999",
-      cursorColor: "#999999",
+      fontSize: this.options.strokeWidth,
+      fill: this.options.stroke,
       padding: 5,
       selectable: false,
       evented: false,
@@ -309,11 +354,11 @@ class FabricCanvas extends EventEmitter {
         img.set({ left, top });
       }
       this.canvas.add(img);
-      bus.emit("insert-images");
-      this.setDrawingTool("select");
-      this.emit("push-canvas-to-stack", null);
+      this.setDrawingTool(DrawingTool.Select);
       this.setActiveObject(img);
+      this.emit("push-canvas-to-stack", null);
       this.canvas.requestRenderAll();
+      this.emit("insert-images", null);
     });
   }
   insertPPT(urls) {
@@ -326,9 +371,7 @@ class FabricCanvas extends EventEmitter {
     this.setBackgroundImage(this.images[this.curImageIndex]);
     this.emit("current:image", index);
   }
-  setEraser(options) {
-    this.canvas.freeDrawingBrush = new fabric.EraserBrush(this.canvas, options);
-    this.canvas.freeDrawingCursor = "pointer";
+  setEraser() {
     this.canvas.renderAll();
   }
   initEvent() {
@@ -342,7 +385,7 @@ class FabricCanvas extends EventEmitter {
   }
   onMouseDown(event) {
     var _a;
-    if (this.drawingTool === "eraser") {
+    if (this.drawingTool === DrawingTool.Eraser) {
       this.isDrawing = true;
       const target = this.canvas.findTarget(event.e, false);
       if (target) {
@@ -361,7 +404,10 @@ class FabricCanvas extends EventEmitter {
     this.endX = this.startX;
     this.endY = this.startY;
     switch (this.drawingTool) {
-      case "rectangle":
+      case DrawingTool.Pencil:
+        this.setPencilBrushOptions();
+        break;
+      case DrawingTool.Rectangle:
         this.drawRect({
           left: x,
           top: y,
@@ -369,7 +415,7 @@ class FabricCanvas extends EventEmitter {
           height: 0
         });
         break;
-      case "triangle":
+      case DrawingTool.Triangle:
         this.drawTriangle({
           left: x,
           top: y,
@@ -377,14 +423,14 @@ class FabricCanvas extends EventEmitter {
           height: 0
         });
         break;
-      case "circle":
+      case DrawingTool.Circle:
         this.drawCircle({
           left: x,
           top: y,
           radius: 0
         });
         break;
-      case "ellipse":
+      case DrawingTool.Ellipse:
         this.drawEllipse({
           left: x,
           top: y,
@@ -392,14 +438,17 @@ class FabricCanvas extends EventEmitter {
           ry: 0
         });
         break;
-      case "line":
+      case DrawingTool.Line:
         this.drawLine(x, y, x, y);
         break;
-      case "arrow":
-        this.drawArrow(x, y, x, y);
+      case DrawingTool.Arrow:
+        this.drawArrow(x, y, x, y, {
+          arrowWidth: this.options.strokeWidth,
+          arrowHeight: this.options.strokeWidth
+        });
         break;
-      case "text":
-        this.drawText("", { left: x, top: y });
+      case DrawingTool.Text:
+        this.drawText("", { options: this.setTextOptions(), left: x, top: y });
         break;
     }
   }
@@ -411,7 +460,7 @@ class FabricCanvas extends EventEmitter {
     const { x, y } = event.pointer;
     this.endX = x;
     this.endY = y;
-    if (this.drawingTool === "eraser" && this.isDrawing) {
+    if (this.drawingTool === DrawingTool.Eraser && this.isDrawing) {
       const target = this.canvas.findTarget(event.e, false);
       if (target) {
         ((_a = target.group) == null ? void 0 : _a.removeWithUpdate(target)) || this.canvas.remove(target);
@@ -427,7 +476,7 @@ class FabricCanvas extends EventEmitter {
     const left = Math.min(this.startX, x);
     const top = Math.min(this.startY, y);
     switch (this.drawingTool) {
-      case "rectangle":
+      case DrawingTool.Rectangle:
         this.currentShape.set({
           left,
           top,
@@ -435,7 +484,7 @@ class FabricCanvas extends EventEmitter {
           height
         });
         break;
-      case "triangle":
+      case DrawingTool.Triangle:
         this.currentShape.set({
           left,
           top,
@@ -443,7 +492,7 @@ class FabricCanvas extends EventEmitter {
           height
         });
         break;
-      case "circle":
+      case DrawingTool.Circle:
         {
           const radius = Math.sqrt(width * width + height * height) / 2;
           this.currentShape.set({
@@ -453,7 +502,7 @@ class FabricCanvas extends EventEmitter {
           });
         }
         break;
-      case "ellipse":
+      case DrawingTool.Ellipse:
         this.currentShape.set({
           left,
           top,
@@ -461,13 +510,13 @@ class FabricCanvas extends EventEmitter {
           ry: height / 2
         });
         break;
-      case "line":
+      case DrawingTool.Line:
         this.currentShape.set({
           x2: x,
           y2: y
         });
         break;
-      case "arrow":
+      case DrawingTool.Arrow:
         this.currentShape.set({
           x2: x,
           y2: y
@@ -487,16 +536,19 @@ class FabricCanvas extends EventEmitter {
     this.isValidSelection = false;
   }
   onObjectMoving(event) {
+    this.canvas.renderAll();
     this.isValidSelection = true;
   }
   onObjectScaling(event) {
+    this.canvas.renderAll();
     this.isValidSelection = true;
   }
   onObjectRotating(event) {
+    this.canvas.renderAll();
     this.isValidSelection = true;
   }
   isNeedPushToStack() {
-    if (this.drawingTool === "text" || this.isValidEraser === false && this.drawingTool === "eraser" || this.isValidSelection === false && this.drawingTool === "select") {
+    if (this.drawingTool === DrawingTool.Text || this.isValidEraser === false && this.drawingTool === DrawingTool.Eraser || this.isValidSelection === false && this.drawingTool === DrawingTool.Pointer || this.isValidSelection === false && this.drawingTool === DrawingTool.Laser) {
       return false;
     }
     if (this.startX === this.endX && this.startY === this.endY) {