@tencentcloud/roomkit-electron-vue3 2.6.7-beta.1 → 2.7.0

package/lib/components/Whiteboard/core/index.js

@@ -9,21 +9,23 @@ const arrow = require("./arrow.js");
 const initControls = require("./initControls.js");
 const initControlsRotate = require("./initControlsRotate.js");
 const useMitt = require("../../../hooks/useMitt.js");
+const type = require("../type.js");
 class FabricCanvas extends emitter.default {
   constructor(canvasId) {
     super();
     __publicField(this, "canvas");
     __publicField(this, "currentShape", null);
-    __publicField(this, "drawingTool", "");
+    __publicField(this, "drawingTool", type.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", []);
@@ -36,7 +38,7 @@ class FabricCanvas extends emitter.default {
       includeDefaultValues: false,
       perPixelTargetFind: true
     });
-    this.setDrawingTool("pencil");
+    this.setDrawingTool(type.DrawingTool.Pencil);
     initControls.default(this.canvas);
     initControlsRotate.default(this.canvas);
     this.initEvent();
@@ -44,8 +46,10 @@ class FabricCanvas extends emitter.default {
   getCanvas() {
     return this.canvas;
   }
-  clearCanvas() {
-    this.canvas.clear();
+  renderCanvas(data) {
+    this.loadFromJSON(data, () => {
+      this.renderAll();
+    });
   }
   setBackgroundColor(color) {
     this.canvas.setBackgroundColor(color, () => {
@@ -130,11 +134,14 @@ class FabricCanvas extends emitter.default {
     });
     this.canvas.renderAll();
   }
+  clearCanvas() {
+    this.canvas.clear();
+  }
   reloadCanvas() {
     this.clearCanvas();
     this.canvas.renderAll();
     useMitt.default.emit("reload-canvas");
-    this.setDrawingTool("pencil");
+    this.setDrawingTool(type.DrawingTool.Pencil);
     this.currentShape = null;
   }
   setDrawingTool(tool) {
@@ -144,27 +151,22 @@ class FabricCanvas extends emitter.default {
     this.canvas.discardActiveObject();
     this.setObjectsSelectable(false);
     switch (tool) {
-      case "pencil":
+      case type.DrawingTool.Pencil:
         this.drawFreeDraw();
         break;
-      case "eraser":
+      case type.DrawingTool.Eraser:
         this.setEvented();
         this.setEraser();
         break;
-      case "select":
+      case type.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 type.DrawingTool.Arrow:
         this.canvas.defaultCursor = "crosshair";
         break;
-      case "text":
+      case type.DrawingTool.Text:
         this.canvas.defaultCursor = "text";
         break;
       default:
@@ -172,14 +174,35 @@ class FabricCanvas extends emitter.default {
         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.fabric.Rect({
       ...this.options,
       selectable: false,
       evented: false,
+      strokeUniform: true,
+      noScaleCache: false,
+      strokeDashArray: this.options.lineDash,
       ...options
     });
     this.canvas.add(rect);
@@ -191,6 +214,9 @@ class FabricCanvas extends emitter.default {
       ...this.options,
       selectable: false,
       evented: false,
+      strokeUniform: true,
+      noScaleCache: false,
+      strokeDashArray: this.options.lineDash,
       ...options
     });
     this.canvas.add(triangle);
@@ -202,6 +228,9 @@ class FabricCanvas extends emitter.default {
       ...this.options,
       selectable: false,
       evented: false,
+      strokeUniform: true,
+      noScaleCache: false,
+      strokeDashArray: this.options.lineDash,
       ...options
     });
     this.canvas.add(circle);
@@ -213,6 +242,9 @@ class FabricCanvas extends emitter.default {
       ...this.options,
       selectable: false,
       evented: false,
+      strokeUniform: true,
+      noScaleCache: false,
+      strokeDashArray: this.options.lineDash,
       ...options
     });
     this.canvas.add(ellipse);
@@ -224,18 +256,28 @@ class FabricCanvas extends emitter.default {
       ...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$1 = new arrow.default([x1, y1, x2, y2], {
       ...this.options,
+      ...customOptions,
       selectable: false,
       evented: false,
-      ...options
+      strokeUniform: true,
+      noScaleCache: false
     });
     this.canvas.add(arrow$1);
     this.currentShape = arrow$1;
@@ -243,8 +285,8 @@ class FabricCanvas extends emitter.default {
   }
   drawFreeDraw() {
     this.canvas.freeDrawingBrush = new fabric.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;
@@ -252,7 +294,12 @@ class FabricCanvas extends emitter.default {
       const { path } = event;
       if (path) {
         path.set({
-          perPixelTargetFind: true
+          perPixelTargetFind: true,
+          objectCaching: false,
+          statefullCache: true,
+          strokeUniform: true,
+          noScaleCache: false,
+          subdivisionScale: 100
         });
         this.canvas.renderAll();
       }
@@ -260,10 +307,8 @@ class FabricCanvas extends emitter.default {
   }
   drawText(text, options) {
     const textObj = new fabric.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,
@@ -311,11 +356,11 @@ class FabricCanvas extends emitter.default {
         img.set({ left, top });
       }
       this.canvas.add(img);
-      useMitt.default.emit("insert-images");
-      this.setDrawingTool("select");
-      this.emit("push-canvas-to-stack", null);
+      this.setDrawingTool(type.DrawingTool.Select);
       this.setActiveObject(img);
+      this.emit("push-canvas-to-stack", null);
       this.canvas.requestRenderAll();
+      this.emit("insert-images", null);
     });
   }
   insertPPT(urls) {
@@ -328,9 +373,7 @@ class FabricCanvas extends emitter.default {
     this.setBackgroundImage(this.images[this.curImageIndex]);
     this.emit("current:image", index);
   }
-  setEraser(options) {
-    this.canvas.freeDrawingBrush = new fabric.fabric.EraserBrush(this.canvas, options);
-    this.canvas.freeDrawingCursor = "pointer";
+  setEraser() {
     this.canvas.renderAll();
   }
   initEvent() {
@@ -344,7 +387,7 @@ class FabricCanvas extends emitter.default {
   }
   onMouseDown(event) {
     var _a;
-    if (this.drawingTool === "eraser") {
+    if (this.drawingTool === type.DrawingTool.Eraser) {
       this.isDrawing = true;
       const target = this.canvas.findTarget(event.e, false);
       if (target) {
@@ -363,7 +406,10 @@ class FabricCanvas extends emitter.default {
     this.endX = this.startX;
     this.endY = this.startY;
     switch (this.drawingTool) {
-      case "rectangle":
+      case type.DrawingTool.Pencil:
+        this.setPencilBrushOptions();
+        break;
+      case type.DrawingTool.Rectangle:
         this.drawRect({
           left: x,
           top: y,
@@ -371,7 +417,7 @@ class FabricCanvas extends emitter.default {
           height: 0
         });
         break;
-      case "triangle":
+      case type.DrawingTool.Triangle:
         this.drawTriangle({
           left: x,
           top: y,
@@ -379,14 +425,14 @@ class FabricCanvas extends emitter.default {
           height: 0
         });
         break;
-      case "circle":
+      case type.DrawingTool.Circle:
         this.drawCircle({
           left: x,
           top: y,
           radius: 0
         });
         break;
-      case "ellipse":
+      case type.DrawingTool.Ellipse:
         this.drawEllipse({
           left: x,
           top: y,
@@ -394,14 +440,17 @@ class FabricCanvas extends emitter.default {
           ry: 0
         });
         break;
-      case "line":
+      case type.DrawingTool.Line:
         this.drawLine(x, y, x, y);
         break;
-      case "arrow":
-        this.drawArrow(x, y, x, y);
+      case type.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 type.DrawingTool.Text:
+        this.drawText("", { options: this.setTextOptions(), left: x, top: y });
         break;
     }
   }
@@ -413,7 +462,7 @@ class FabricCanvas extends emitter.default {
     const { x, y } = event.pointer;
     this.endX = x;
     this.endY = y;
-    if (this.drawingTool === "eraser" && this.isDrawing) {
+    if (this.drawingTool === type.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);
@@ -429,7 +478,7 @@ class FabricCanvas extends emitter.default {
     const left = Math.min(this.startX, x);
     const top = Math.min(this.startY, y);
     switch (this.drawingTool) {
-      case "rectangle":
+      case type.DrawingTool.Rectangle:
         this.currentShape.set({
           left,
           top,
@@ -437,7 +486,7 @@ class FabricCanvas extends emitter.default {
           height
         });
         break;
-      case "triangle":
+      case type.DrawingTool.Triangle:
         this.currentShape.set({
           left,
           top,
@@ -445,7 +494,7 @@ class FabricCanvas extends emitter.default {
           height
         });
         break;
-      case "circle":
+      case type.DrawingTool.Circle:
         {
           const radius = Math.sqrt(width * width + height * height) / 2;
           this.currentShape.set({
@@ -455,7 +504,7 @@ class FabricCanvas extends emitter.default {
           });
         }
         break;
-      case "ellipse":
+      case type.DrawingTool.Ellipse:
         this.currentShape.set({
           left,
           top,
@@ -463,13 +512,13 @@ class FabricCanvas extends emitter.default {
           ry: height / 2
         });
         break;
-      case "line":
+      case type.DrawingTool.Line:
         this.currentShape.set({
           x2: x,
           y2: y
         });
         break;
-      case "arrow":
+      case type.DrawingTool.Arrow:
         this.currentShape.set({
           x2: x,
           y2: y
@@ -489,16 +538,19 @@ class FabricCanvas extends emitter.default {
     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 === type.DrawingTool.Text || this.isValidEraser === false && this.drawingTool === type.DrawingTool.Eraser || this.isValidSelection === false && this.drawingTool === type.DrawingTool.Pointer || this.isValidSelection === false && this.drawingTool === type.DrawingTool.Laser) {
       return false;
     }
     if (this.startX === this.endX && this.startY === this.endY) {

package/lib/components/Whiteboard/index.vue.js

@@ -1,7 +1,248 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const index_vue_vue_type_script_setup_true_lang = require("./index.vue2.js");
-;/* empty css            */
-const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.js");
-const index = /* @__PURE__ */ _pluginVue_exportHelper.default(index_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-90cba0ec"]]);
-exports.default = index;
+const Vue = require("vue");
+const electron = require("electron");
+const type = require("./type.js");
+const index$1 = require("./core/index.js");
+const historyManager = require("./core/historyManager.js");
+const index_vue_vue_type_script_setup_true_lang = require("./ToolBox/index.vue.js");
+;/* empty css                    */
+const utils = require("../../utils/utils.js");
+const index = require("../../utils/common/logger/index.js");
+const _hoisted_1 = { class: "tool-box-out" };
+const _hoisted_2 = /* @__PURE__ */ Vue.createElementVNode("canvas", {
+  class: "whiteboard-canvas",
+  id: "canvas"
+}, null, -1);
+const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
+  __name: "index",
+  setup(__props) {
+    const isAnnotationWin = Vue.ref(false);
+    const isAnnotationStarted = Vue.ref(false);
+    const canvas = Vue.ref();
+    const canvasWrapRef = Vue.ref();
+    let upperCanvas = null;
+    const step = Vue.ref(0);
+    const historyListLength = Vue.ref(0);
+    const changeTool = Vue.ref("");
+    let historyManager$1;
+    Vue.provide("canvas", canvas);
+    const isControllerVisiable = Vue.computed(
+      () => !isAnnotationWin.value || isAnnotationStarted.value
+    );
+    function init() {
+      const fabricCanvas = new index$1.default("canvas");
+      canvas.value = fabricCanvas;
+      historyManager$1 = new historyManager.default(canvas.value);
+    }
+    const toolActiveMap = {
+      [type.DrawingTool.Image]: () => insertImage(),
+      [type.DrawingTool.Clear]: () => historyManager$1.clear(),
+      [type.DrawingTool.Redo]: () => historyManager$1.redo(),
+      [type.DrawingTool.Undo]: () => historyManager$1.undo(),
+      [type.DrawingTool.Download]: () => downloadCanvas(),
+      [type.DrawingTool.Retract]: () => stopWhiteboard(),
+      [type.DrawingTool.Select]: () => {
+        var _a;
+        return (_a = canvas.value) == null ? void 0 : _a.setDrawingTool(type.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 = utils.getUrlParam("isAnnotationWin");
+      if (annotationParam && annotationParam === "true") {
+        isAnnotationWin2 = true;
+      }
+      if (isAnnotationWin2) {
+        electron.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 === type.DrawingTool.Select) {
+          return;
+        }
+        changeTool.value = "";
+        return;
+      }
+      const currentClass = type.toolCursorStyleMap[toolSetting.drawingTool];
+      Object.values(type.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) {
+        index.default.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) {
+          index.default.info("No file selected.");
+          return;
+        }
+        const validTypes = mimeTypes.split(",").map((type2) => type2.trim());
+        if (!validTypes.includes(file.type)) {
+          index.default.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 = () => {
+          index.default.error("Failed to read file.");
+        };
+        reader.readAsDataURL(file);
+      };
+      input.onerror = () => {
+        index.default.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);
+      electron.ipcRenderer.send("whiteboard:save-from-whiteboard-window");
+    }
+    function handleStepChange(stepNumber) {
+      step.value = stepNumber;
+    }
+    function handleHistoryChange(historyListLengthNumber) {
+      historyListLength.value = historyListLengthNumber;
+    }
+    function handleToolChange() {
+      changeTool.value = type.DrawingTool.Select;
+    }
+    Vue.onMounted(() => {
+      var _a, _b, _c, _d;
+      init();
+      const annotationParam = utils.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$1.on("change-step", handleStepChange);
+      historyManager$1.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);
+    });
+    Vue.onUnmounted(() => {
+      var _a;
+      historyManager$1.off("change-step", handleStepChange);
+      historyManager$1.off("change-history", handleHistoryChange);
+      (_a = canvas.value) == null ? void 0 : _a.off("insert-images", handleToolChange);
+      window.removeEventListener("resize", resizeCanvas);
+    });
+    electron.ipcRenderer.on("annotation:annotating-started", () => {
+      isAnnotationStarted.value = true;
+    });
+    electron.ipcRenderer.on("annotation:annotating-stopped", () => {
+      isAnnotationStarted.value = false;
+    });
+    electron.ipcRenderer.on("whiteboard:clear", () => {
+      if (canvas.value) {
+        canvas.value.reloadCanvas();
+        changeTool.value = type.DrawingTool.Pencil;
+      }
+    });
+    electron.ipcRenderer.on("annotation:clear", () => {
+      if (canvas.value) {
+        canvas.value.reloadCanvas();
+        changeTool.value = type.DrawingTool.Pencil;
+      }
+    });
+    return (_ctx, _cache) => {
+      return Vue.openBlock(), Vue.createElementBlock("div", null, [
+        Vue.createElementVNode("div", {
+          class: "canvas-wrap",
+          ref_key: "canvasWrapRef",
+          ref: canvasWrapRef
+        }, [
+          Vue.withDirectives(Vue.createElementVNode("div", _hoisted_1, [
+            Vue.createVNode(index_vue_vue_type_script_setup_true_lang.default, {
+              onUpdateSetting: updateSetting,
+              step: step.value,
+              "history-list-length": historyListLength.value,
+              "change-tool": changeTool.value
+            }, null, 8, ["step", "history-list-length", "change-tool"])
+          ], 512), [
+            [Vue.vShow, isControllerVisiable.value]
+          ]),
+          _hoisted_2
+        ], 512)
+      ]);
+    };
+  }
+});
+exports.default = _sfc_main;

package/lib/components/Whiteboard/index.vue3.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const index_vue_vue_type_script_setup_true_lang = require("./index.vue.js");
+;/* empty css            */
+exports.default = index_vue_vue_type_script_setup_true_lang.default;