@tencentcloud/roomkit-electron-vue3 2.4.2 → 2.6.0

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

@@ -0,0 +1,469 @@
+"use strict";
+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);
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const fabric = require("fabric");
+const emitter = require("../emitter.js");
+const arrow = require("./arrow.js");
+const initControls = require("./initControls.js");
+const initControlsRotate = require("./initControlsRotate.js");
+const useMitt = require("../../../hooks/useMitt.js");
+class FabricCanvas extends emitter.default {
+  constructor(canvasId) {
+    super();
+    __publicField(this, "canvas");
+    __publicField(this, "currentShape", null);
+    __publicField(this, "drawingTool", "");
+    __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,
+      fill: "transparent",
+      opacity: 1
+    });
+    __publicField(this, "images", []);
+    __publicField(this, "curImageIndex", 0);
+    __publicField(this, "isValidEraser", false);
+    __publicField(this, "isValidSelection", false);
+    this.canvas = new fabric.fabric.Canvas(canvasId, {
+      isDrawingMode: true,
+      selection: false,
+      includeDefaultValues: false,
+      perPixelTargetFind: true
+    });
+    this.setDrawingTool("pencil");
+    initControls.default(this.canvas);
+    initControlsRotate.default(this.canvas);
+    this.initEvent();
+  }
+  getCanvas() {
+    return this.canvas;
+  }
+  clearCanvas() {
+    this.canvas.clear();
+  }
+  setBackgroundColor(color) {
+    this.canvas.setBackgroundColor(color, () => {
+      this.canvas.renderAll();
+    });
+  }
+  setBackgroundImage(imageUrl, options) {
+    fabric.fabric.Image.fromURL(imageUrl, (image) => {
+      const canvasWidth = this.canvas.getWidth();
+      const canvasHeight = this.canvas.getHeight();
+      const scale = canvasHeight / image.height;
+      const imageWidth = image.width * scale;
+      image.set({
+        scaleX: scale,
+        scaleY: scale,
+        top: 0,
+        left: (canvasWidth - imageWidth) / 2
+      });
+      this.canvas.setBackgroundImage(
+        image,
+        () => {
+          this.canvas.renderAll();
+        },
+        options
+      );
+    });
+  }
+  addObject(object) {
+    this.canvas.add(object);
+  }
+  removeObject(object) {
+    this.canvas.remove(object);
+  }
+  removeAllObject() {
+    this.canvas.getObjects().forEach((obj) => {
+      this.canvas.remove(obj);
+    });
+  }
+  getObjects() {
+    return this.canvas.getObjects();
+  }
+  getActiveObject() {
+    return this.canvas.getActiveObject();
+  }
+  setActiveObject(object) {
+    this.canvas.setActiveObject(object);
+  }
+  setWidth(value) {
+    this.canvas.setWidth(value);
+  }
+  setHeight(value) {
+    this.canvas.setHeight(value);
+  }
+  exitTextEditing() {
+    const activeObject = this.canvas.getActiveObject();
+    if (activeObject && activeObject.type === "i-text") {
+      activeObject.exitEditing();
+    }
+  }
+  reloadCanvas() {
+    this.clearCanvas();
+    this.canvas.renderAll();
+    useMitt.default.emit("reload-canvas");
+    this.setDrawingTool("pencil");
+    this.currentShape = null;
+  }
+  setDrawingTool(tool) {
+    if (this.drawingTool === tool) return;
+    this.canvas.isDrawingMode = false;
+    this.canvas.selection = false;
+    this.canvas.perPixelTargetFind = true;
+    this.drawingTool = tool;
+    this.canvas.discardActiveObject();
+    this.canvas.requestRenderAll();
+    switch (tool) {
+      case "pencil":
+        this.drawFreeDraw();
+        break;
+      case "eraser":
+        this.setEraser();
+        break;
+      case "select":
+        this.canvas.selection = true;
+        this.canvas.perPixelTargetFind = false;
+        this.canvas.defaultCursor = "auto";
+        break;
+      case "rectangle":
+      case "triangle":
+      case "circle":
+      case "ellipse":
+      case "line":
+      case "arrow":
+        this.canvas.defaultCursor = "crosshair";
+        break;
+      case "text":
+        this.canvas.defaultCursor = "text";
+        break;
+      default:
+        this.canvas.defaultCursor = "crosshair";
+        break;
+    }
+  }
+  setOptions(options) {
+    this.options = { ...this.options, ...options };
+  }
+  drawRect(options) {
+    const rect = new fabric.fabric.Rect({ ...this.options, ...options });
+    this.canvas.add(rect);
+    this.currentShape = rect;
+    this.canvas.defaultCursor = "crosshair";
+  }
+  drawTriangle(options) {
+    const triangle = new fabric.fabric.Triangle({ ...this.options, ...options });
+    this.canvas.add(triangle);
+    this.currentShape = triangle;
+    this.canvas.defaultCursor = "crosshair";
+  }
+  drawCircle(options) {
+    const circle = new fabric.fabric.Circle({ ...this.options, ...options });
+    this.canvas.add(circle);
+    this.currentShape = circle;
+    this.canvas.defaultCursor = "crosshair";
+  }
+  drawEllipse(options) {
+    const ellipse = new fabric.fabric.Ellipse({ ...this.options, ...options });
+    this.canvas.add(ellipse);
+    this.currentShape = ellipse;
+    this.canvas.defaultCursor = "crosshair";
+  }
+  drawLine(x1, y1, x2, y2, options) {
+    const line = new fabric.fabric.Line([x1, y1, x2, y2], {
+      ...this.options,
+      ...options
+    });
+    this.canvas.add(line);
+    this.currentShape = line;
+    this.canvas.defaultCursor = "crosshair";
+  }
+  drawArrow(x1, y1, x2, y2, options) {
+    const arrow$1 = new arrow.default([x1, y1, x2, y2], { ...this.options, ...options });
+    this.canvas.add(arrow$1);
+    this.currentShape = arrow$1;
+    this.canvas.defaultCursor = "crosshair";
+  }
+  drawFreeDraw() {
+    this.canvas.freeDrawingBrush = new fabric.fabric.PencilBrush(this.canvas);
+    this.canvas.freeDrawingBrush.color = "#ff0000";
+    this.canvas.freeDrawingBrush.width = 5;
+    this.canvas.freeDrawingCursor = "default";
+    this.canvas.isDrawingMode = true;
+    this.currentShape = null;
+    this.canvas.on("path:created", (event) => {
+      const { path } = event;
+      if (path) {
+        path.set({
+          perPixelTargetFind: true
+        });
+        this.canvas.renderAll();
+      }
+    });
+  }
+  drawText(text, options) {
+    const textObj = new fabric.fabric.IText(text, {
+      fontSize: 18,
+      fill: "#ff0000",
+      editingBorderColor: "#999999",
+      cursorColor: "#999999",
+      padding: 5,
+      ...options
+    });
+    this.canvas.add(textObj);
+    this.canvas.defaultCursor = "text";
+    this.currentShape = textObj;
+    textObj.enterEditing();
+    textObj.hiddenTextarea.focus();
+    textObj.on("editing:exited", () => {
+      if (textObj.text.length > 0) {
+        this.emit("push-canvas-to-stack", null);
+      } else {
+        this.canvas.remove(textObj);
+      }
+    });
+    this.setActiveObject(textObj);
+  }
+  insertImage(url, options) {
+    fabric.fabric.Image.fromURL(url, (img) => {
+      if (options) {
+        img.set(options);
+      } else {
+        const canvasWidth = this.canvas.getWidth();
+        const canvasHeight = this.canvas.getHeight();
+        const imageWidth = img.width * img.scaleX;
+        const imageHeight = img.height * img.scaleY;
+        const left = (canvasWidth - imageWidth) / 2;
+        const top = (canvasHeight - imageHeight) / 2;
+        img.set({ left, top });
+      }
+      this.canvas.add(img);
+    });
+  }
+  insertPPT(urls) {
+    this.images = urls;
+    this.setCurrentScense(0);
+    this.emit("insert:images", urls);
+  }
+  setCurrentScense(index) {
+    this.curImageIndex = index;
+    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 = "auto";
+    this.canvas.renderAll();
+  }
+  initEvent() {
+    this.canvas.on("mouse:down", this.onMouseDown.bind(this));
+    this.canvas.on("mouse:move", this.onMouseMove.bind(this));
+    this.canvas.on("mouse:up", this.onMouseUp.bind(this));
+    this.canvas.on("object:moving", this.onObjectMoving.bind(this));
+    this.canvas.on("object:scaling", this.onObjectScaling.bind(this));
+    useMitt.default.on("exitTextEditing", this.exitTextEditing.bind(this));
+  }
+  onMouseDown(event) {
+    var _a;
+    if (this.drawingTool === "eraser") {
+      this.isDrawing = true;
+      const target = this.canvas.findTarget(event.e, false);
+      if (target) {
+        ((_a = target.group) == null ? void 0 : _a.removeWithUpdate(target)) || this.canvas.remove(target);
+        this.isValidEraser = true;
+      }
+      this.canvas.renderAll();
+      return;
+    }
+    const activeObject = this.canvas.getActiveObject();
+    if (!event.pointer || activeObject) return;
+    this.isDrawing = true;
+    const { x, y } = event.pointer;
+    this.startX = x;
+    this.startY = y;
+    this.endX = this.startX;
+    this.endY = this.startY;
+    switch (this.drawingTool) {
+      case "rectangle":
+        this.drawRect({
+          left: x,
+          top: y,
+          width: 0,
+          height: 0
+        });
+        break;
+      case "triangle":
+        this.drawTriangle({
+          left: x,
+          top: y,
+          width: 0,
+          height: 0
+        });
+        break;
+      case "circle":
+        this.drawCircle({
+          left: x,
+          top: y,
+          radius: 0
+        });
+        break;
+      case "ellipse":
+        this.drawEllipse({
+          left: x,
+          top: y,
+          rx: 0,
+          ry: 0
+        });
+        break;
+      case "line":
+        this.drawLine(x, y, x, y);
+        break;
+      case "arrow":
+        this.drawArrow(x, y, x, y);
+        break;
+      case "text":
+        this.drawText("", { left: x, top: y });
+        break;
+    }
+  }
+  onMouseMove(event) {
+    var _a;
+    if (!event.pointer) {
+      return;
+    }
+    const { x, y } = event.pointer;
+    this.endX = x;
+    this.endY = y;
+    if (this.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);
+        this.isValidEraser = true;
+      }
+      this.canvas.renderAll();
+    }
+    if (!this.isDrawing || !this.currentShape) {
+      return;
+    }
+    const width = Math.abs(x - this.startX);
+    const height = Math.abs(y - this.startY);
+    const left = Math.min(this.startX, x);
+    const top = Math.min(this.startY, y);
+    switch (this.drawingTool) {
+      case "rectangle":
+        this.currentShape.set({
+          left,
+          top,
+          width,
+          height
+        });
+        break;
+      case "triangle":
+        this.currentShape.set({
+          left,
+          top,
+          width,
+          height
+        });
+        break;
+      case "circle":
+        {
+          const radius = Math.sqrt(width * width + height * height) / 2;
+          this.currentShape.set({
+            left,
+            top,
+            radius
+          });
+        }
+        break;
+      case "ellipse":
+        this.currentShape.set({
+          left,
+          top,
+          rx: width / 2,
+          ry: height / 2
+        });
+        break;
+      case "line":
+        this.currentShape.set({
+          x2: x,
+          y2: y
+        });
+        break;
+      case "arrow":
+        this.currentShape.set({
+          x2: x,
+          y2: y
+        });
+        break;
+    }
+    this.currentShape.setCoords();
+    this.canvas.renderAll();
+  }
+  onMouseUp() {
+    if (this.isNeedPushToStack()) {
+      this.emit("push-canvas-to-stack", null);
+    }
+    this.isDrawing = false;
+    this.currentShape = null;
+    this.isValidEraser = false;
+    this.isValidSelection = false;
+  }
+  onObjectMoving(event) {
+    this.isValidSelection = true;
+  }
+  onObjectScaling(event) {
+    this.isValidSelection = true;
+  }
+  isNeedPushToStack() {
+    if (this.drawingTool === "text" || this.isValidEraser === false && this.drawingTool === "eraser" || this.isValidSelection === false && this.drawingTool === "select") {
+      return false;
+    }
+    if (this.startX === this.endX && this.startY === this.endY) {
+      if (this.currentShape !== null) {
+        this.canvas.remove(this.currentShape);
+        return false;
+      }
+    }
+    return true;
+  }
+  toDataURL(options) {
+    return this.canvas.toDataURL(options);
+  }
+  toJSON() {
+    return this.canvas.toJSON();
+  }
+  loadFromJSON(json, callback, reviver) {
+    return this.canvas.loadFromJSON(json, callback, reviver);
+  }
+  renderAll() {
+    return this.canvas.renderAll();
+  }
+  zoom(ratio = 1) {
+    const point = new fabric.fabric.Point(
+      this.canvas.width / 2,
+      this.canvas.height / 2
+    );
+    this.canvas.zoomToPoint(point, ratio);
+  }
+  getZoom() {
+    return this.canvas.getZoom();
+  }
+  zoomIn() {
+    this.zoom(this.canvas.getZoom() * 1.1);
+  }
+  zoomOut() {
+    this.zoom(this.canvas.getZoom() / 1.1);
+  }
+  destroy() {
+    this.removeAllListeners();
+    this.canvas.dispose();
+  }
+}
+exports.default = FabricCanvas;

package/lib/components/Whiteboard/core/initControls.d.ts

@@ -0,0 +1,4 @@
+import { Canvas } from 'fabric/fabric-impl';
+
+declare function initControls(canvas: Canvas): void;
+export default initControls;

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

@@ -0,0 +1,176 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const fabric = require("fabric");
+const middlecontrol = require("../resources/editor/middlecontrol.svg.js");
+const middlecontrolhoz = require("../resources/editor/middlecontrolhoz.svg.js");
+const edgecontrol = require("../resources/editor/edgecontrol.svg.js");
+const rotateicon = require("../resources/editor/rotateicon.svg.js");
+function intervalControl() {
+  const verticalImgIcon = document.createElement("img");
+  verticalImgIcon.src = middlecontrol.default;
+  const horizontalImgIcon = document.createElement("img");
+  horizontalImgIcon.src = middlecontrolhoz.default;
+  function renderIcon(ctx, left, top, _styleOverride, fabricObject) {
+    const wsize = 20;
+    const hsize = 25;
+    ctx.save();
+    ctx.translate(left, top);
+    ctx.rotate(fabric.fabric.util.degreesToRadians(fabricObject.angle));
+    ctx.drawImage(verticalImgIcon, -wsize / 2, -hsize / 2, wsize, hsize);
+    ctx.restore();
+  }
+  function renderIconHoz(ctx, left, top, _styleOverride, fabricObject) {
+    const wsize = 25;
+    const hsize = 20;
+    ctx.save();
+    ctx.translate(left, top);
+    ctx.rotate(fabric.fabric.util.degreesToRadians(fabricObject.angle));
+    ctx.drawImage(horizontalImgIcon, -wsize / 2, -hsize / 2, wsize, hsize);
+    ctx.restore();
+  }
+  fabric.fabric.Object.prototype.controls.ml = new fabric.fabric.Control({
+    x: -0.5,
+    y: 0,
+    offsetX: -1,
+    cursorStyleHandler: fabric.fabric.controlsUtils.scaleSkewCursorStyleHandler,
+    actionHandler: fabric.fabric.controlsUtils.scalingXOrSkewingY,
+    getActionName: fabric.fabric.controlsUtils.scaleOrSkewActionName,
+    render: renderIcon
+  });
+  fabric.fabric.Object.prototype.controls.mr = new fabric.fabric.Control({
+    x: 0.5,
+    y: 0,
+    offsetX: 1,
+    cursorStyleHandler: fabric.fabric.controlsUtils.scaleSkewCursorStyleHandler,
+    actionHandler: fabric.fabric.controlsUtils.scalingXOrSkewingY,
+    getActionName: fabric.fabric.controlsUtils.scaleOrSkewActionName,
+    render: renderIcon
+  });
+  fabric.fabric.Object.prototype.controls.mb = new fabric.fabric.Control({
+    x: 0,
+    y: 0.5,
+    offsetY: 1,
+    cursorStyleHandler: fabric.fabric.controlsUtils.scaleSkewCursorStyleHandler,
+    actionHandler: fabric.fabric.controlsUtils.scalingYOrSkewingX,
+    getActionName: fabric.fabric.controlsUtils.scaleOrSkewActionName,
+    render: renderIconHoz
+  });
+  fabric.fabric.Object.prototype.controls.mt = new fabric.fabric.Control({
+    x: 0,
+    y: -0.5,
+    offsetY: -1,
+    cursorStyleHandler: fabric.fabric.controlsUtils.scaleSkewCursorStyleHandler,
+    actionHandler: fabric.fabric.controlsUtils.scalingYOrSkewingX,
+    getActionName: fabric.fabric.controlsUtils.scaleOrSkewActionName,
+    render: renderIconHoz
+  });
+}
+function peakControl() {
+  const img = document.createElement("img");
+  img.src = edgecontrol.default;
+  function renderIconEdge(ctx, left, top, _styleOverride, fabricObject) {
+    const wsize = 25;
+    const hsize = 25;
+    ctx.save();
+    ctx.translate(left, top);
+    ctx.rotate(fabric.fabric.util.degreesToRadians(fabricObject.angle));
+    ctx.drawImage(img, -wsize / 2, -hsize / 2, wsize, hsize);
+    ctx.restore();
+  }
+  fabric.fabric.Object.prototype.controls.tl = new fabric.fabric.Control({
+    x: -0.5,
+    y: -0.5,
+    cursorStyleHandler: fabric.fabric.controlsUtils.scaleCursorStyleHandler,
+    actionHandler: fabric.fabric.controlsUtils.scalingEqually,
+    render: renderIconEdge
+  });
+  fabric.fabric.Object.prototype.controls.bl = new fabric.fabric.Control({
+    x: -0.5,
+    y: 0.5,
+    cursorStyleHandler: fabric.fabric.controlsUtils.scaleCursorStyleHandler,
+    actionHandler: fabric.fabric.controlsUtils.scalingEqually,
+    render: renderIconEdge
+  });
+  fabric.fabric.Object.prototype.controls.tr = new fabric.fabric.Control({
+    x: 0.5,
+    y: -0.5,
+    cursorStyleHandler: fabric.fabric.controlsUtils.scaleCursorStyleHandler,
+    actionHandler: fabric.fabric.controlsUtils.scalingEqually,
+    render: renderIconEdge
+  });
+  fabric.fabric.Object.prototype.controls.br = new fabric.fabric.Control({
+    x: 0.5,
+    y: 0.5,
+    cursorStyleHandler: fabric.fabric.controlsUtils.scaleCursorStyleHandler,
+    actionHandler: fabric.fabric.controlsUtils.scalingEqually,
+    render: renderIconEdge
+  });
+}
+function deleteControl(canvas) {
+  const deleteIcon = "data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='595.275px' height='595.275px' viewBox='200 215 230 470' xml:space='preserve'%3E%3Ccircle style='fill:%23F44336;' cx='299.76' cy='439.067' r='218.516'/%3E%3Cg%3E%3Crect x='267.162' y='307.978' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -222.6202 340.6915)' style='fill:white;' width='65.545' height='262.18'/%3E%3Crect x='266.988' y='308.153' transform='matrix(0.7071 0.7071 -0.7071 0.7071 398.3889 -83.3116)' style='fill:white;' width='65.544' height='262.179'/%3E%3C/g%3E%3C/svg%3E";
+  const delImg = document.createElement("img");
+  delImg.src = deleteIcon;
+  function renderDelIcon(ctx, left, top, _styleOverride, fabricObject) {
+    const size = fabricObject.cornerSize;
+    ctx.save();
+    ctx.translate(left, top);
+    ctx.rotate(fabric.fabric.util.degreesToRadians(fabricObject.angle));
+    ctx.drawImage(delImg, -size / 2, -size / 2, size, size);
+    ctx.restore();
+  }
+  function deleteObject() {
+    const activeObject = canvas.getActiveObjects();
+    if (activeObject) {
+      activeObject.map((item) => canvas.remove(item));
+      canvas.requestRenderAll();
+      canvas.discardActiveObject();
+    }
+  }
+  fabric.fabric.Object.prototype.controls.deleteControl = new fabric.fabric.Control({
+    x: 0.5,
+    y: -0.5,
+    offsetY: -16,
+    offsetX: 16,
+    cursorStyle: "pointer",
+    mouseUpHandler: deleteObject,
+    render: renderDelIcon,
+    cornerSize: 24
+  });
+}
+function rotationControl() {
+  const img = document.createElement("img");
+  img.src = rotateicon.default;
+  function renderIconRotate(ctx, left, top, _styleOverride, fabricObject) {
+    const wsize = 40;
+    const hsize = 40;
+    ctx.save();
+    ctx.translate(left, top);
+    ctx.rotate(fabric.fabric.util.degreesToRadians(fabricObject.angle));
+    ctx.drawImage(img, -wsize / 2, -hsize / 2, wsize, hsize);
+    ctx.restore();
+  }
+  fabric.fabric.Object.prototype.controls.mtr = new fabric.fabric.Control({
+    x: 0,
+    y: 0.5,
+    cursorStyleHandler: fabric.fabric.controlsUtils.rotationStyleHandler,
+    actionHandler: fabric.fabric.controlsUtils.rotationWithSnapping,
+    offsetY: 30,
+    withConnecton: false,
+    actionName: "rotate",
+    render: renderIconRotate
+  });
+}
+function initControls(canvas) {
+  deleteControl(canvas);
+  peakControl();
+  intervalControl();
+  rotationControl();
+  fabric.fabric.Object.prototype.set({
+    transparentCorners: false,
+    borderScaleFactor: 2.5,
+    cornerStyle: "circle",
+    cornerStrokeColor: "#0E98FC",
+    borderOpacityWhenMoving: 1
+  });
+}
+exports.default = initControls;

package/lib/components/Whiteboard/core/initControlsRotate.d.ts

@@ -0,0 +1,4 @@
+import { Canvas } from 'fabric/fabric-impl';
+
+declare function initControlsRotate(canvas: Canvas): void;
+export default initControlsRotate;