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

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

@@ -0,0 +1,152 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const Vue = require("vue");
+const type = require("../../type.js");
+const index = require("../../../../locales/index.js");
+const IconButton = require("../../../common/base/IconButton.vue.js");
+const vClickOutside = require("../../../../directives/vClickOutside.js");
+;/* empty css                       */
+const TextIcon = require("../Icon/TextIcon.vue.js");
+const H1 = require("../Image/H1.svg.js");
+const H2 = require("../Image/H2.svg.js");
+const H3 = require("../Image/H3.svg.js");
+const H4 = require("../Image/H4.svg.js");
+const BlueIcon = require("../Image/BlueIcon.svg.js");
+const PurpleIcon = require("../Image/PurpleIcon.svg.js");
+const YellowIcon = require("../Image/YellowIcon.svg.js");
+const OrangeIcon = require("../Image/OrangeIcon.svg.js");
+const RedIcon = require("../Image/RedIcon.svg.js");
+const GreenIcon = require("../Image/GreenIcon.svg.js");
+const DeepBlueIcon = require("../Image/DeepBlueIcon.svg.js");
+const BlackIcon = require("../Image/BlackIcon.svg.js");
+const DarkGrayIcon = require("../Image/DarkGrayIcon.svg.js");
+const GrayIcon = require("../Image/GrayIcon.svg.js");
+const LightGrayIcon = require("../Image/LightGrayIcon.svg.js");
+const WhiteIcon = require("../Image/WhiteIcon.svg.js");
+const _hoisted_1 = {
+  key: 0,
+  class: "text-tool-setting whiteboard-tool-setting"
+};
+const _hoisted_2 = { class: "size-setting-title setting-title" };
+const _hoisted_3 = { class: "size-setting-section setting-section" };
+const _hoisted_4 = ["onClick"];
+const _hoisted_5 = ["src"];
+const _hoisted_6 = { class: "color-setting-title setting-title" };
+const _hoisted_7 = { class: "color-setting-section setting-section" };
+const _hoisted_8 = ["onClick"];
+const _hoisted_9 = ["src"];
+const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
+  __name: "index",
+  props: {
+    activeTool: String
+  },
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const { t } = index.useI18n();
+    const textSizes = [
+      { icon: H1.default, size: 32 },
+      { icon: H2.default, size: 24 },
+      { icon: H3.default, size: 18.72 },
+      { icon: H4.default, size: 16 }
+    ];
+    const textColors = [
+      { color: "#4791FF", icon: BlueIcon.default },
+      { color: "#5940D7", icon: PurpleIcon.default },
+      { color: "#F5C342", icon: YellowIcon.default },
+      { color: "#E05734", icon: OrangeIcon.default },
+      { color: "#DC3859", icon: RedIcon.default },
+      { color: "#1AD32C", icon: GreenIcon.default },
+      { color: "#104683", icon: DeepBlueIcon.default },
+      { color: "#22262E", icon: BlackIcon.default },
+      { color: "#86909A", icon: DarkGrayIcon.default },
+      { color: "#B5BBC3", icon: GrayIcon.default },
+      { color: "#DBDDE2", icon: LightGrayIcon.default },
+      { color: "#EAEEF3", icon: WhiteIcon.default }
+    ];
+    const showSettings = Vue.ref(false);
+    const props = __props;
+    function handleHideButtonSetting() {
+      if (props.activeTool === type.DrawingTool.Text) {
+        showSettings.value = false;
+      }
+    }
+    const toolSetting = Vue.reactive({
+      drawingTool: type.DrawingTool.Text,
+      shapeOptions: {
+        strokeWidth: 18.72,
+        stroke: "#22262E"
+      }
+    });
+    const emit = __emit;
+    Vue.watch(
+      () => props.activeTool,
+      () => {
+        showSettings.value = false;
+      }
+    );
+    const onClick = () => {
+      showSettings.value = !showSettings.value;
+      emit("click", toolSetting);
+    };
+    const handleSizeClick = (size) => {
+      if (size === toolSetting.shapeOptions.strokeWidth) {
+        return;
+      }
+      toolSetting.shapeOptions.strokeWidth = size;
+      emit("click", toolSetting);
+    };
+    const handleColorClick = (color) => {
+      if (toolSetting.shapeOptions.stroke !== color) {
+        toolSetting.shapeOptions.stroke = color;
+        emit("click", toolSetting);
+      }
+    };
+    return (_ctx, _cache) => {
+      return Vue.withDirectives((Vue.openBlock(), Vue.createBlock(IconButton.default, Vue.mergeProps({ class: "tool-button" }, _ctx.$attrs, { onClickIcon: onClick }), {
+        default: Vue.withCtx(() => [
+          Vue.createVNode(TextIcon.default, {
+            class: Vue.normalizeClass({ "whiteboard-icon-active": __props.activeTool === Vue.unref(type.DrawingTool).Text })
+          }, null, 8, ["class"]),
+          showSettings.value && __props.activeTool === "Text" ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
+            Vue.createElementVNode("div", _hoisted_2, Vue.toDisplayString(Vue.unref(t)("Text Size")), 1),
+            Vue.createElementVNode("div", _hoisted_3, [
+              (Vue.openBlock(), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(textSizes, (textSize) => {
+                return Vue.createElementVNode("button", {
+                  key: textSize.size,
+                  class: Vue.normalizeClass(["size-button setting-option-button", {
+                    "button-active": textSize.size === toolSetting.shapeOptions.strokeWidth
+                  }]),
+                  onClick: Vue.withModifiers(($event) => handleSizeClick(textSize.size), ["stop"])
+                }, [
+                  Vue.createElementVNode("img", {
+                    src: textSize.icon
+                  }, null, 8, _hoisted_5)
+                ], 10, _hoisted_4);
+              }), 64))
+            ]),
+            Vue.createElementVNode("div", _hoisted_6, Vue.toDisplayString(Vue.unref(t)("Text Color")), 1),
+            Vue.createElementVNode("div", _hoisted_7, [
+              (Vue.openBlock(), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(textColors, (textColor) => {
+                return Vue.createElementVNode("button", {
+                  key: textColor.color,
+                  class: Vue.normalizeClass(["color-button setting-option-button", {
+                    "button-active": textColor.color === toolSetting.shapeOptions.stroke
+                  }]),
+                  onClick: Vue.withModifiers(($event) => handleColorClick(textColor.color), ["stop"])
+                }, [
+                  Vue.createElementVNode("img", {
+                    src: textColor.icon
+                  }, null, 8, _hoisted_9)
+                ], 10, _hoisted_8);
+              }), 64))
+            ])
+          ])) : Vue.createCommentVNode("", true)
+        ]),
+        _: 1
+      }, 16)), [
+        [Vue.unref(vClickOutside.default), handleHideButtonSetting]
+      ]);
+    };
+  }
+});
+exports.default = _sfc_main;

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

@@ -0,0 +1,4 @@
+"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");
+exports.default = index_vue_vue_type_script_setup_true_lang.default;

package/lib/components/Whiteboard/ToolBox/UndoButton.vue.d.ts

@@ -0,0 +1,10 @@
+declare const _default: import('vue').DefineComponent<{
+    step: NumberConstructor;
+}, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: (...args: any[]) => void;
+}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{
+    step: NumberConstructor;
+}>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+}, {}, {}>;
+export default _default;

package/lib/components/Whiteboard/ToolBox/UndoButton.vue.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const Vue = require("vue");
+const type = require("../type.js");
+const IconButton = require("../../common/base/IconButton.vue.js");
+const UndoIcon = require("./Icon/UndoIcon.vue.js");
+const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
+  __name: "UndoButton",
+  props: {
+    step: Number
+  },
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const onClick = () => {
+      emit("click", {
+        drawingTool: type.DrawingTool.Undo
+      });
+    };
+    return (_ctx, _cache) => {
+      return Vue.openBlock(), Vue.createBlock(IconButton.default, {
+        class: "tool-button",
+        onClickIcon: onClick
+      }, {
+        default: Vue.withCtx(() => [
+          Vue.createVNode(UndoIcon.default, {
+            class: Vue.normalizeClass({ "tool-disabled": props.step === 0 })
+          }, null, 8, ["class"])
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+exports.default = _sfc_main;

package/lib/components/Whiteboard/ToolBox/UndoButton.vue2.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const UndoButton_vue_vue_type_script_setup_true_lang = require("./UndoButton.vue.js");
+exports.default = UndoButton_vue_vue_type_script_setup_true_lang.default;

package/lib/components/Whiteboard/ToolBox/index.vue.d.ts

@@ -0,0 +1,16 @@
+import { ToolSettings } from '../type';
+
+declare const _default: import('vue').DefineComponent<{
+    step: NumberConstructor;
+    historyListLength: NumberConstructor;
+    changeTool: StringConstructor;
+}, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    updateSetting: (toolSetting: ToolSettings) => void;
+}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{
+    step: NumberConstructor;
+    historyListLength: NumberConstructor;
+    changeTool: StringConstructor;
+}>> & {
+    onUpdateSetting?: ((toolSetting: ToolSettings) => any) | undefined;
+}, {}, {}>;
+export default _default;

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

@@ -0,0 +1,174 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const Vue = require("vue");
+const utils = require("../../../utils/utils.js");
+const SelectButton_vue_vue_type_script_setup_true_lang = require("./SelectButton.vue.js");
+const LaserButton_vue_vue_type_script_setup_true_lang = require("./LaserButton.vue.js");
+const index_vue_vue_type_script_setup_true_lang = require("./Pencil/index.vue.js");
+const index_vue_vue_type_script_setup_true_lang$1 = require("./Shape/index.vue.js");
+const EraserButton_vue_vue_type_script_setup_true_lang = require("./EraserButton.vue.js");
+const index_vue_vue_type_script_setup_true_lang$2 = require("./Arrow/index.vue.js");
+const index_vue_vue_type_script_setup_true_lang$3 = require("./Text/index.vue.js");
+const ImageButton_vue_vue_type_script_setup_true_lang = require("./ImageButton.vue.js");
+const RedoButton_vue_vue_type_script_setup_true_lang = require("./RedoButton.vue.js");
+const UndoButton_vue_vue_type_script_setup_true_lang = require("./UndoButton.vue.js");
+const ClearButton_vue_vue_type_script_setup_true_lang = require("./ClearButton.vue.js");
+const DownloadButton_vue_vue_type_script_setup_true_lang = require("./DownloadButton.vue.js");
+const RetractButton_vue_vue_type_script_setup_true_lang = require("./RetractButton.vue.js");
+const TopLine = require("./Icon/TopLine.vue.js");
+const SeparatorLine = require("./Icon/SeparatorLine.vue.js");
+const _hoisted_1 = { class: "whiteboard-tool-box" };
+const _hoisted_2 = { class: "tool-box-top" };
+const _hoisted_3 = { class: "tool-box-top-lines" };
+const _hoisted_4 = {
+  key: 0,
+  class: "separator-box"
+};
+const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
+  __name: "index",
+  props: {
+    step: Number,
+    historyListLength: Number,
+    changeTool: String
+  },
+  emits: ["updateSetting"],
+  setup(__props, { emit: __emit }) {
+    let isAnnotationWin = false;
+    const annotationParam = utils.getUrlParam("isAnnotationWin");
+    if (annotationParam && annotationParam === "true") {
+      isAnnotationWin = true;
+    }
+    const props = __props;
+    const tools = [
+      {
+        id: "Select",
+        component: SelectButton_vue_vue_type_script_setup_true_lang.default,
+        showSeparator: false,
+        showAnnotationWin: true
+      },
+      {
+        id: "Laser",
+        component: LaserButton_vue_vue_type_script_setup_true_lang.default,
+        showSeparator: true,
+        showAnnotationWin: true
+      },
+      {
+        id: "Pencil",
+        component: index_vue_vue_type_script_setup_true_lang.default,
+        showSeparator: false,
+        showAnnotationWin: true
+      },
+      {
+        id: "Shape",
+        component: index_vue_vue_type_script_setup_true_lang$1.default,
+        showSeparator: false,
+        showAnnotationWin: true
+      },
+      {
+        id: "Eraser",
+        component: EraserButton_vue_vue_type_script_setup_true_lang.default,
+        showSeparator: false,
+        showAnnotationWin: true
+      },
+      {
+        id: "Arrow",
+        component: index_vue_vue_type_script_setup_true_lang$2.default,
+        showSeparator: false,
+        showAnnotationWin: true
+      },
+      {
+        id: "Text",
+        component: index_vue_vue_type_script_setup_true_lang$3.default,
+        showSeparator: true,
+        showAnnotationWin: true
+      },
+      {
+        id: "Image",
+        component: ImageButton_vue_vue_type_script_setup_true_lang.default,
+        showSeparator: false,
+        showAnnotationWin: false
+      },
+      {
+        id: "Undo",
+        component: UndoButton_vue_vue_type_script_setup_true_lang.default,
+        showSeparator: false,
+        showAnnotationWin: true
+      },
+      {
+        id: "Redo",
+        component: RedoButton_vue_vue_type_script_setup_true_lang.default,
+        showSeparator: false,
+        showAnnotationWin: true
+      },
+      {
+        id: "Clear",
+        component: ClearButton_vue_vue_type_script_setup_true_lang.default,
+        showSeparator: false,
+        showAnnotationWin: true
+      },
+      {
+        id: "Download",
+        component: DownloadButton_vue_vue_type_script_setup_true_lang.default,
+        showSeparator: false,
+        showAnnotationWin: false
+      }
+    ];
+    const filteredTools = Vue.computed(() => {
+      const filtered = tools.filter(
+        (tool) => !isAnnotationWin || tool.showAnnotationWin
+      );
+      const newElement = {
+        id: "Retract",
+        component: RetractButton_vue_vue_type_script_setup_true_lang.default,
+        showSeparator: false,
+        showAnnotationWin: true
+      };
+      if (isAnnotationWin === true) {
+        return [...filtered, newElement];
+      }
+      return filtered;
+    });
+    const activeTool = Vue.ref("Pencil");
+    const emit = __emit;
+    function setActiveButton(toolSetting) {
+      if (toolSetting.drawingTool === "Redo" || toolSetting.drawingTool === "Undo" || toolSetting.drawingTool === "Download" || toolSetting.drawingTool === "Image" || toolSetting.drawingTool === "Clear" || toolSetting.drawingTool === "Retract") {
+        emit("updateSetting", toolSetting);
+        return;
+      }
+      if (toolSetting.drawingTool === "Line" || toolSetting.drawingTool === "Rectangle" || toolSetting.drawingTool === "Circle" || toolSetting.drawingTool === "Triangle") {
+        activeTool.value = "Shape";
+      } else {
+        activeTool.value = toolSetting.drawingTool;
+      }
+      emit("updateSetting", toolSetting);
+    }
+    return (_ctx, _cache) => {
+      return Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
+        Vue.createElementVNode("div", _hoisted_2, [
+          Vue.createElementVNode("div", _hoisted_3, [
+            Vue.createVNode(TopLine.default)
+          ])
+        ]),
+        (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(filteredTools.value, (tool) => {
+          return Vue.openBlock(), Vue.createElementBlock("div", {
+            class: "box",
+            key: tool.id
+          }, [
+            (Vue.openBlock(), Vue.createBlock(Vue.resolveDynamicComponent(tool.component), {
+              onClick: setActiveButton,
+              class: Vue.normalizeClass({ active: activeTool.value === tool.id }),
+              "active-tool": activeTool.value,
+              step: props.step,
+              "history-list-length": props.historyListLength,
+              "change-tool": __props.changeTool
+            }, null, 8, ["class", "active-tool", "step", "history-list-length", "change-tool"])),
+            tool.showSeparator === true ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_4, [
+              Vue.createVNode(SeparatorLine.default)
+            ])) : Vue.createCommentVNode("", true)
+          ]);
+        }), 128))
+      ]);
+    };
+  }
+});
+exports.default = _sfc_main;

package/lib/components/Whiteboard/ToolBox/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;

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

@@ -11,6 +11,8 @@ fabric.fabric.Arrow = fabric.fabric.util.createClass(fabric.fabric.Line, {
     }
     options = options || {};
     this.callSuper("initialize", points, options);
+    this.arrowWidth = 7;
+    this.arrowHeight = 7;
   },
   _render(ctx) {
     this.callSuper("_render", ctx);
@@ -21,9 +23,9 @@ fabric.fabric.Arrow = fabric.fabric.util.createClass(fabric.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();
@@ -32,7 +34,10 @@ fabric.fabric.Arrow = fabric.fabric.util.createClass(fabric.fabric.Line, {
 });
 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 = new fabric.fabric.Arrow([x1, y1, x2, y2], {
+    ...options
+  });
+  callback(arrow);
 };
 const Arrow = fabric.fabric.Arrow;
 exports.default = Arrow;

package/lib/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/lib/components/Whiteboard/core/historyManager.js

@@ -0,0 +1,96 @@
+"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 Vue = require("vue");
+const electron = require("electron");
+const useMitt = require("../../../hooks/useMitt.js");
+const emitter = require("../emitter.js");
+class HistoryManager extends emitter.default {
+  constructor(canvas) {
+    super();
+    __publicField(this, "canvas", Vue.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() {
+    useMitt.default.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() {
+    electron.ipcRenderer.on(
+      "whiteboard:clear",
+      this.clearHistoryList = this.clearHistoryList.bind(this)
+    );
+    electron.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);
+    }
+    electron.ipcRenderer.removeAllListeners("whiteboard:clear");
+    electron.ipcRenderer.removeAllListeners("annotation:clear");
+  }
+}
+exports.default = HistoryManager;

package/lib/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;