@tencentcloud/roomkit-electron-vue3 2.5.0 → 2.6.0

package/lib/components/Whiteboard/controller/ToolBox/index.vue2.js

@@ -0,0 +1,127 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const Vue = require("vue");
+const selector = require("./image/selector.svg.js");
+const selectorActive = require("./image/selector-active.svg.js");
+const pencil = require("./image/pencil.svg.js");
+const pencilActive = require("./image/pencil-active.svg.js");
+const text = require("./image/text.svg.js");
+const textActive = require("./image/text-active.svg.js");
+const eraser = require("./image/eraser.svg.js");
+const eraserActive = require("./image/eraser-active.svg.js");
+const arrow = require("./image/arrow.svg.js");
+const arrowActive = require("./image/arrow-active.svg.js");
+const ellipse = require("./image/ellipse.svg.js");
+const ellipseActive = require("./image/ellipse-active.svg.js");
+const rectangle = require("./image/rectangle.svg.js");
+const rectangleActive = require("./image/rectangle-active.svg.js");
+const straight = require("./image/straight.svg.js");
+const straightActive = require("./image/straight-active.svg.js");
+const triangle = require("./image/triangle.svg.js");
+const triangleActive = require("./image/triangle-active.svg.js");
+const clear = require("./image/clear.svg.js");
+const useMitt = require("../../../../hooks/useMitt.js");
+const _hoisted_1 = { class: "tool-mid-box-left" };
+const _hoisted_2 = ["onClick"];
+const _hoisted_3 = ["src"];
+const _hoisted_4 = { class: "tool-box-cell-box-left" };
+const _hoisted_5 = ["src"];
+const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
+  __name: "index",
+  setup(__props) {
+    const canvas = Vue.inject("canvas");
+    const tools = Vue.ref([
+      {
+        name: "select",
+        icon: selector.default,
+        iconActive: selectorActive.default,
+        shapeType: "select"
+      },
+      {
+        name: "pencil",
+        icon: pencil.default,
+        iconActive: pencilActive.default,
+        shapeType: "pencil"
+      },
+      {
+        name: "text",
+        icon: text.default,
+        iconActive: textActive.default,
+        shapeType: "text"
+      },
+      {
+        name: "eraser",
+        icon: eraser.default,
+        iconActive: eraserActive.default,
+        shapeType: "eraser"
+      },
+      {
+        name: "triangle",
+        icon: triangle.default,
+        iconActive: triangleActive.default,
+        shapeType: "triangle"
+      },
+      {
+        name: "ellipse",
+        icon: ellipse.default,
+        iconActive: ellipseActive.default,
+        shapeType: "circle"
+      },
+      {
+        name: "rectangle",
+        icon: rectangle.default,
+        iconActive: rectangleActive.default,
+        shapeType: "rectangle"
+      },
+      {
+        name: "straight",
+        icon: straight.default,
+        iconActive: straightActive.default,
+        shapeType: "line"
+      },
+      {
+        name: "arrow",
+        icon: arrow.default,
+        iconActive: arrowActive.default,
+        shapeType: "arrow"
+      }
+    ]);
+    const currentShapType = Vue.ref("pencil");
+    function clickAppliance(type) {
+      currentShapType.value = type;
+      canvas == null ? void 0 : canvas.value.setDrawingTool(type);
+    }
+    function clickClear() {
+      canvas == null ? void 0 : canvas.value.clearCanvas();
+      useMitt.default.emit("undo-clear-canvas");
+    }
+    return (_ctx, _cache) => {
+      return Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
+        (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(tools.value, (item) => {
+          return Vue.openBlock(), Vue.createElementBlock("div", {
+            class: "tool-box-cell-box-left",
+            key: item.shapeType
+          }, [
+            Vue.createElementVNode("div", {
+              class: "tool-box-cell",
+              onClick: ($event) => clickAppliance(item.shapeType)
+            }, [
+              Vue.createElementVNode("img", {
+                src: item.shapeType === currentShapType.value ? item.iconActive : item.icon
+              }, null, 8, _hoisted_3)
+            ], 8, _hoisted_2)
+          ]);
+        }), 128)),
+        Vue.createElementVNode("div", _hoisted_4, [
+          Vue.createElementVNode("div", {
+            class: "tool-box-cell",
+            onClick: clickClear
+          }, [
+            Vue.createElementVNode("img", { src: Vue.unref(clear.default) }, null, 8, _hoisted_5)
+          ])
+        ])
+      ]);
+    };
+  }
+});
+exports.default = _sfc_main;

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

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

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

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const fabric = require("fabric");
+fabric.fabric.Arrow = fabric.fabric.util.createClass(fabric.fabric.Line, {
+  type: "arrow",
+  superType: "drawing",
+  initialize(points, options) {
+    if (!points) {
+      const { x1, x2, y1, y2 } = options;
+      points = [x1, y1, x2, y2];
+    }
+    options = options || {};
+    this.callSuper("initialize", points, options);
+  },
+  _render(ctx) {
+    this.callSuper("_render", ctx);
+    ctx.save();
+    const xDiff = this.x2 - this.x1;
+    const yDiff = this.y2 - this.y1;
+    const angle = Math.atan2(yDiff, xDiff);
+    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.closePath();
+    ctx.fillStyle = this.stroke;
+    ctx.fill();
+    ctx.restore();
+  }
+});
+fabric.fabric.Arrow.fromObject = (options, callback) => {
+  const { x1, x2, y1, y2 } = options;
+  return callback(new fabric.fabric.Arrow([x1, y1, x2, y2], options));
+};
+const Arrow = fabric.fabric.Arrow;
+exports.default = Arrow;

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

@@ -0,0 +1,82 @@
+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';
+
+interface FabricEvents {
+    'object:added': IEvent;
+    'object:modified': IEvent;
+    'object:removed': IEvent;
+    'mouse:down': IEvent;
+    'mouse:move': IEvent;
+    'mouse:up': IEvent;
+    'after:render': IEvent;
+    '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;
+    private drawingTool;
+    private isDrawing;
+    private startX;
+    private startY;
+    private endX;
+    private endY;
+    private options;
+    private images;
+    private curImageIndex;
+    private isValidEraser;
+    private isValidSelection;
+    constructor(canvasId: string);
+    getCanvas(): ICanvas;
+    clearCanvas(): void;
+    setBackgroundColor(color: string): void;
+    setBackgroundImage(imageUrl: string, options?: IImageOptions): void;
+    addObject(object: IObject): void;
+    removeObject(object: IObject): void;
+    removeAllObject(): void;
+    getObjects(): IObject[];
+    getActiveObject(): IObject | undefined | null;
+    setActiveObject(object: IObject): void;
+    setWidth(value: number | string): void;
+    setHeight(value: number | string): void;
+    exitTextEditing(): void;
+    reloadCanvas(): void;
+    setDrawingTool(tool: DrawingTool): void;
+    setOptions(options: ShapeOptions): void;
+    drawRect(options: IRectOptions): void;
+    drawTriangle(options: ITriangleOptions): void;
+    drawCircle(options: ICircleOptions): void;
+    drawEllipse(options: IEllipseOptions): void;
+    drawLine(x1: number, y1: number, x2: number, y2: number, options?: ILineOptions): void;
+    drawArrow(x1: number, y1: number, x2: number, y2: number, options?: ILineOptions): void;
+    drawFreeDraw(): void;
+    drawText(text: string, options?: ITextOptions): void;
+    insertImage(url: string, options?: IImageOptions): void;
+    insertPPT(urls: string[]): void;
+    setCurrentScense(index: number): void;
+    setEraser(options?: any): void;
+    private initEvent;
+    private onMouseDown;
+    private onMouseMove;
+    private onMouseUp;
+    private onObjectMoving;
+    private onObjectScaling;
+    private isNeedPushToStack;
+    toDataURL(options?: ICanvasOptions): any;
+    toJSON(): any;
+    loadFromJSON(json: any, callback: any, reviver?: any): ICanvas;
+    renderAll(): ICanvas;
+    zoom(ratio?: number): void;
+    getZoom(): number;
+    zoomIn(): void;
+    zoomOut(): void;
+    destroy(): void;
+}
+export default FabricCanvas;