@tencentcloud/roomkit-electron-vue3 2.6.7 → 2.7.1

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) {

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

@@ -1,7 +1,248 @@
-import _sfc_main from "./index.vue2.mjs";
-/* empty css            */
-import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
-const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-90cba0ec"]]);
+import { defineComponent, ref, provide, computed, onMounted, onUnmounted, openBlock, createElementBlock, createElementVNode, withDirectives, createVNode, vShow } from "vue";
+import { ipcRenderer } from "electron";
+import { DrawingTool, toolCursorStyleMap } from "./type.mjs";
+import FabricCanvas from "./core/index.mjs";
+import HistoryManager from "./core/historyManager.mjs";
+import _sfc_main$1 from "./ToolBox/index.vue.mjs";
+/* empty css                    */
+import { getUrlParam } from "../../utils/utils.mjs";
+import logger from "../../utils/common/logger/index.mjs";
+const _hoisted_1 = { class: "tool-box-out" };
+const _hoisted_2 = /* @__PURE__ */ createElementVNode("canvas", {
+  class: "whiteboard-canvas",
+  id: "canvas"
+}, null, -1);
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  setup(__props) {
+    const isAnnotationWin = ref(false);
+    const isAnnotationStarted = ref(false);
+    const canvas = ref();
+    const canvasWrapRef = ref();
+    let upperCanvas = null;
+    const step = ref(0);
+    const historyListLength = ref(0);
+    const changeTool = ref("");
+    let historyManager;
+    provide("canvas", canvas);
+    const isControllerVisiable = computed(
+      () => !isAnnotationWin.value || isAnnotationStarted.value
+    );
+    function init() {
+      const fabricCanvas = new FabricCanvas("canvas");
+      canvas.value = fabricCanvas;
+      historyManager = new HistoryManager(canvas.value);
+    }
+    const toolActiveMap = {
+      [DrawingTool.Image]: () => insertImage(),
+      [DrawingTool.Clear]: () => historyManager.clear(),
+      [DrawingTool.Redo]: () => historyManager.redo(),
+      [DrawingTool.Undo]: () => historyManager.undo(),
+      [DrawingTool.Download]: () => downloadCanvas(),
+      [DrawingTool.Retract]: () => stopWhiteboard(),
+      [DrawingTool.Select]: () => {
+        var _a;
+        return (_a = canvas.value) == null ? void 0 : _a.setDrawingTool(DrawingTool.Select);
+      }
+    };
+    function stopWhiteboard() {
+      var _a, _b;
+      (_a = canvas.value) == null ? void 0 : _a.discardActiveObject();
+      (_b = canvas.value) == null ? void 0 : _b.renderAll();
+      let isAnnotationWin2 = false;
+      const annotationParam = getUrlParam("isAnnotationWin");
+      if (annotationParam && annotationParam === "true") {
+        isAnnotationWin2 = true;
+      }
+      if (isAnnotationWin2) {
+        ipcRenderer.send("annotation:stop-from-annotation-window");
+      }
+    }
+    function resizeCanvas() {
+      var _a, _b;
+      canvas.value.setWidth((_a = canvasWrapRef.value) == null ? void 0 : _a.offsetWidth);
+      canvas.value.setHeight((_b = canvasWrapRef.value) == null ? void 0 : _b.offsetHeight);
+    }
+    function updateSetting(toolSetting) {
+      var _a, _b, _c;
+      const behavior = toolActiveMap[toolSetting.drawingTool];
+      if (behavior) {
+        behavior();
+        if (changeTool.value === DrawingTool.Select) {
+          return;
+        }
+        changeTool.value = "";
+        return;
+      }
+      const currentClass = toolCursorStyleMap[toolSetting.drawingTool];
+      Object.values(toolCursorStyleMap).forEach((className) => {
+        if (className) {
+          upperCanvas == null ? void 0 : upperCanvas.classList.remove(className);
+        }
+      });
+      if (currentClass) {
+        upperCanvas == null ? void 0 : upperCanvas.classList.add(currentClass);
+        (_a = canvas.value) == null ? void 0 : _a.setDrawingTool(toolSetting.drawingTool);
+        changeTool.value = "";
+        return;
+      }
+      (_b = canvas.value) == null ? void 0 : _b.setDrawingTool(toolSetting.drawingTool);
+      (_c = canvas.value) == null ? void 0 : _c.setOptions(toolSetting);
+      changeTool.value = "";
+    }
+    function insertImage() {
+      if (!canvas.value || !canvas.value) {
+        logger.error("Canvas is not available or not initialized.");
+        return;
+      }
+      const input = document.createElement("input");
+      input.type = "file";
+      const mimeTypes = ["image/png", "image/jpeg", "image/jpg", "image/bmp"].join(
+        ","
+      );
+      input.accept = mimeTypes;
+      input.onchange = (event) => {
+        var _a;
+        const file = (_a = event.target.files) == null ? void 0 : _a[0];
+        if (!file) {
+          logger.info("No file selected.");
+          return;
+        }
+        const validTypes = mimeTypes.split(",").map((type) => type.trim());
+        if (!validTypes.includes(file.type)) {
+          logger.error(
+            "Invalid file type. Please upload a PNG, JPEG, JPG, or BMP image."
+          );
+          return;
+        }
+        const reader = new FileReader();
+        reader.onload = (event2) => {
+          var _a2;
+          const img = new Image();
+          img.onload = () => {
+            var _a3;
+            (_a3 = canvas.value) == null ? void 0 : _a3.insertImage(img.src);
+          };
+          img.src = (_a2 = event2.target) == null ? void 0 : _a2.result;
+        };
+        reader.onerror = () => {
+          logger.error("Failed to read file.");
+        };
+        reader.readAsDataURL(file);
+      };
+      input.onerror = () => {
+        logger.error("Failed to create file input.");
+      };
+      input.click();
+    }
+    function generateImageName() {
+      const date = /* @__PURE__ */ new Date();
+      const year = date.getFullYear();
+      const month = date.getMonth() + 1;
+      const day = date.getDate();
+      const hours = date.getHours();
+      const minutes = date.getMinutes();
+      const seconds = date.getSeconds();
+      const formattedMonth = month < 10 ? `0${month}` : month;
+      const formattedDay = day < 10 ? `0${day}` : day;
+      const formattedHours = hours < 10 ? `0${hours}` : hours;
+      const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes;
+      const formattedSeconds = seconds < 10 ? `0${seconds}` : seconds;
+      return `${year}-${formattedMonth}-${formattedDay}-${formattedHours}.${formattedMinutes}.${formattedSeconds}.png`;
+    }
+    function downloadCanvas() {
+      if (!canvas.value || !canvas.value) {
+        return;
+      }
+      const dataURL = canvas.value.toDataURL({
+        format: "png"
+      });
+      const link = document.createElement("a");
+      link.style.display = "none";
+      link.href = dataURL;
+      link.download = generateImageName();
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      ipcRenderer.send("whiteboard:save-from-whiteboard-window");
+    }
+    function handleStepChange(stepNumber) {
+      step.value = stepNumber;
+    }
+    function handleHistoryChange(historyListLengthNumber) {
+      historyListLength.value = historyListLengthNumber;
+    }
+    function handleToolChange() {
+      changeTool.value = DrawingTool.Select;
+    }
+    onMounted(() => {
+      var _a, _b, _c, _d;
+      init();
+      const annotationParam = getUrlParam("isAnnotationWin");
+      if (annotationParam && annotationParam === "true") {
+        isAnnotationWin.value = true;
+      }
+      if (!isAnnotationWin.value) {
+        (_a = canvas.value) == null ? void 0 : _a.setBackgroundColor("white");
+      }
+      upperCanvas = document.querySelector(
+        ".upper-canvas.whiteboard-canvas"
+      );
+      historyManager.on("change-step", handleStepChange);
+      historyManager.on("change-history", handleHistoryChange);
+      (_b = canvas.value) == null ? void 0 : _b.on("insert-images", handleToolChange);
+      canvas.value.setWidth((_c = canvasWrapRef.value) == null ? void 0 : _c.offsetWidth);
+      canvas.value.setHeight((_d = canvasWrapRef.value) == null ? void 0 : _d.offsetHeight);
+      window.addEventListener("resize", resizeCanvas);
+    });
+    onUnmounted(() => {
+      var _a;
+      historyManager.off("change-step", handleStepChange);
+      historyManager.off("change-history", handleHistoryChange);
+      (_a = canvas.value) == null ? void 0 : _a.off("insert-images", handleToolChange);
+      window.removeEventListener("resize", resizeCanvas);
+    });
+    ipcRenderer.on("annotation:annotating-started", () => {
+      isAnnotationStarted.value = true;
+    });
+    ipcRenderer.on("annotation:annotating-stopped", () => {
+      isAnnotationStarted.value = false;
+    });
+    ipcRenderer.on("whiteboard:clear", () => {
+      if (canvas.value) {
+        canvas.value.reloadCanvas();
+        changeTool.value = DrawingTool.Pencil;
+      }
+    });
+    ipcRenderer.on("annotation:clear", () => {
+      if (canvas.value) {
+        canvas.value.reloadCanvas();
+        changeTool.value = DrawingTool.Pencil;
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", null, [
+        createElementVNode("div", {
+          class: "canvas-wrap",
+          ref_key: "canvasWrapRef",
+          ref: canvasWrapRef
+        }, [
+          withDirectives(createElementVNode("div", _hoisted_1, [
+            createVNode(_sfc_main$1, {
+              onUpdateSetting: updateSetting,
+              step: step.value,
+              "history-list-length": historyListLength.value,
+              "change-tool": changeTool.value
+            }, null, 8, ["step", "history-list-length", "change-tool"])
+          ], 512), [
+            [vShow, isControllerVisiable.value]
+          ]),
+          _hoisted_2
+        ], 512)
+      ]);
+    };
+  }
+});
 export {
-  index as default
+  _sfc_main as default
 };

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

@@ -0,0 +1,5 @@
+import _sfc_main from "./index.vue.mjs";
+/* empty css            */
+export {
+  _sfc_main as default
+};