@tencentcloud/roomkit-electron-vue3 2.5.0 → 2.6.0

package/src/TUIRoom/components/Whiteboard/controller/RedoUndo/index.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="redo-undo">
+    <div class="redo-undo-controller-btn" @click="handleUndo">
+      <img :src="step !== 0 ? undo : undoDisabled" />
+    </div>
+    <div class="redo-undo-controller-btn" @click="handleRedo">
+      <img :src="step !== historyList.length ? redo : redoDisabled" />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { inject, ref, Ref, watchEffect } from 'vue';
+import { ipcRenderer } from 'electron';
+import FabricCanvas from './../../core';
+import redo from './image/redo.svg';
+import undo from './image/undo.svg';
+import redoDisabled from './image/redo-disabled.svg';
+import undoDisabled from './image/undo-disabled.svg';
+import eventBus from '../../../../hooks/useMitt';
+
+const canvas = inject<Ref<FabricCanvas>>('canvas');
+const step = ref<number>(0);
+const historyList = ref<any>([]);
+
+function renderCanvas(data: any) {
+  if (!canvas?.value) return;
+  canvas.value.clearCanvas();
+  canvas.value.loadFromJSON(data, () => {
+    canvas.value.renderAll();
+  });
+}
+
+function handleUndo() {
+  eventBus.emit('exitTextEditing');
+  if (!canvas?.value || step.value === 0) return;
+  if (step.value > 0) {
+    // eslint-disable-next-line no-plusplus
+    step.value--;
+    if (step.value === 0) {
+      canvas?.value.clearCanvas();
+    } else {
+      const canvasState = historyList.value[step.value - 1];
+      renderCanvas(canvasState);
+    }
+  }
+}
+
+function handleRedo() {
+  if (!canvas?.value || step.value === historyList.value.length) return;
+
+  if (step.value < historyList.value.length) {
+    // eslint-disable-next-line no-plusplus
+    step.value++;
+    const canvasState = historyList.value[step.value - 1];
+    renderCanvas(canvasState);
+  }
+}
+
+function addToUndoStack() {
+  if (!canvas?.value) return;
+  const data = canvas.value.toJSON();
+  const histroySteps = historyList.value.length;
+
+  if (histroySteps !== step.value) {
+    const arrayTemp = historyList.value.slice(0, step.value);
+    historyList.value = arrayTemp;
+  }
+
+  historyList.value.push(data);
+  step.value = historyList.value.length;
+}
+
+function addEmptyCanvasToUndoStack() {
+  if (historyList.value.length > 0) {
+    addToUndoStack();
+  }
+}
+
+function clearHistoryList() {
+  historyList.value = [];
+  step.value = 0;
+}
+
+function initEvent() {
+  if (!canvas?.value) return;
+  canvas.value.on('push-canvas-to-stack', addToUndoStack);
+  eventBus.on('undo-clear-canvas', addEmptyCanvasToUndoStack);
+  // hotkeys(keyNames.ctrlz, handleUndo);
+  // hotkeys(keyNames.ctrly, handleRedo);
+}
+
+ipcRenderer.on('whiteboard:clear', clearHistoryList);
+ipcRenderer.on('annotation:clear', clearHistoryList);
+
+watchEffect(() => {
+  if (canvas?.value) {
+    initEvent();
+  }
+});
+</script>
+<style lang="scss" scoped>
+.redo-undo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 60px;
+  height: 32px;
+  font-size: 12px;
+  cursor: pointer;
+  user-select: none;
+  background-color: white;
+  border-radius: 4px;
+  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.redo-undo-controller-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin-right: 2px;
+  margin-left: 2px;
+  border-radius: 2px;
+
+  &:hover {
+    background: rgba(33, 35, 36, 0.1);
+  }
+}
+</style>

package/src/TUIRoom/components/Whiteboard/controller/SaveController/image/download.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 60.1 (88133) - https://sketch.com -->
+    <title>upload</title>
+    <desc>Created with Sketch.</desc>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Whiteboard-Guidelines" transform="translate(-696.000000, -295.000000)">
+            <g id="upload" transform="translate(696.000000, 295.000000)">
+                <rect fill="#FFFFFF" opacity="0.01" x="0" y="0" width="40" height="40" rx="2"></rect>
+                <polyline stroke="#212324" stroke-linecap="round" stroke-linejoin="round" transform="translate(20.000000, 22.000000) rotate(-90.000000) translate(-20.000000, -14.000000) " points="22 18 20 16 18 14 20 12 22 10"></polyline>
+                <polyline stroke="#212324" stroke-linecap="round" stroke-linejoin="round" points="28 24 28 28 12 28 12 24"></polyline>
+                <line x1="20" y1="24" x2="20" y2="12" id="Stroke-3备份-3" stroke="#212324" stroke-linecap="round" stroke-linejoin="round"></line>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/TUIRoom/components/Whiteboard/controller/SaveController/index.vue

@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <div class="save-controller">
+      <button class="save-button" @click="downloadCanvas">
+        <img src="./image/download.svg" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { inject, Ref } from 'vue';
+import FabricCanvas from './../../core';
+
+const canvas = inject<Ref<FabricCanvas>>('canvas');
+
+function generateImageName() {
+  const date = 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 || !canvas.value) {
+    return;
+  }
+  const dataURL = canvas.value.toDataURL({
+    format: 'png',
+  } as any);
+  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);
+}
+</script>
+
+<style lang="scss" scoped>
+.save-controller {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  font-size: 12px;
+  cursor: pointer;
+  user-select: none;
+  background-color: white;
+  border-radius: 4px;
+  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.save-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin-right: 2px;
+  margin-left: 2px;
+  background-color: white;
+  border: none;
+
+  &:hover {
+    background: rgba(33, 35, 36, 0.1);
+  }
+}
+</style>

package/src/TUIRoom/components/Whiteboard/controller/ToolBox/image/arrow-active.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title></title>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-48.000000, -152.000000)">
+            <g transform="translate(48.000000, 152.000000)">
+                <line x1="6" y1="18" x2="16.4593589" y2="7.54064109" stroke="#3381FF" stroke-linecap="square" stroke-linejoin="round"></line>
+                <polygon fill="#3381FF" points="12 6 18 6 18 12"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/TUIRoom/components/Whiteboard/controller/ToolBox/image/arrow.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title></title>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-8.000000, -152.000000)">
+            <g transform="translate(8.000000, 152.000000)">
+                <line x1="6" y1="18" x2="16.4593589" y2="7.54064109" stroke="#444E60" stroke-linecap="square" stroke-linejoin="round"></line>
+                <polygon fill="#444E60" points="12 6 18 6 18 12"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/TUIRoom/components/Whiteboard/controller/ToolBox/image/clear-active.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title></title>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g transform="translate(-48.000000, -476.000000)" stroke="#3381FF">
+            <g transform="translate(48.000000, 476.000000)">
+                <path d="M10.6666667,9.66666667 L10.6666667,6.16666667 C10.6666667,5.52233446 11.1890011,5 11.8333333,5 C12.4776655,5 13,5.52233446 13,6.16666667 L13,9.66666667 L13,9.66666667 C14.2886644,9.66666667 15.3333333,10.7113356 15.3333333,12 L15.3333333,12 L15.3333333,12 L8.33333333,12 C8.33333333,10.7113356 9.37800225,9.66666667 10.6666667,9.66666667 L10.6666667,9.66666667 L10.6666667,9.66666667 Z"></path>
+                <path d="M15.3333333,12 L17.6666667,17.8333333 C13.8159078,18.6034851 9.85075886,18.6034851 6,17.8333333 L8.33333333,12"></path>
+                <line x1="11.8333333" y1="17.8333333" x2="11.8333333" y2="15.5"></line>
+                <line x1="9.5" y1="17.8333333" x2="9.5" y2="15.5"></line>
+                <line x1="14.1666667" y1="17.8333333" x2="14.1666667" y2="15.5"></line>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/TUIRoom/components/Whiteboard/controller/ToolBox/image/clear.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title></title>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g transform="translate(-16.000000, -549.000000)" stroke="#444E60">
+            <g transform="translate(8.000000, 285.000000)">
+                <g transform="translate(8.000000, 264.000000)">
+                    <path d="M10.6666667,9.66666667 L10.6666667,6.16666667 C10.6666667,5.52233446 11.1890011,5 11.8333333,5 C12.4776655,5 13,5.52233446 13,6.16666667 L13,9.66666667 L13,9.66666667 C14.2886644,9.66666667 15.3333333,10.7113356 15.3333333,12 L15.3333333,12 L15.3333333,12 L8.33333333,12 C8.33333333,10.7113356 9.37800225,9.66666667 10.6666667,9.66666667 L10.6666667,9.66666667 L10.6666667,9.66666667 Z"></path>
+                    <path d="M15.3333333,12 L17.6666667,17.8333333 C13.8159078,18.6034851 9.85075886,18.6034851 6,17.8333333 L8.33333333,12"></path>
+                    <line x1="11.8333333" y1="17.8333333" x2="11.8333333" y2="15.5"></line>
+                    <line x1="9.5" y1="17.8333333" x2="9.5" y2="15.5"></line>
+                    <line x1="14.1666667" y1="17.8333333" x2="14.1666667" y2="15.5"></line>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/TUIRoom/components/Whiteboard/controller/ToolBox/image/click-active.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>click_p@1x</title>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g>
+            <polygon stroke="#444E60" points="7 5.07179677 8.66987298 17.9641016 11.9090909 13.5745916 17.330127 12.9641016"></polygon>
+            <line x1="12" y1="13.7320508" x2="15" y2="18.9282032" stroke="#444E60"></line>
+            <polygon stroke="#3381FF" points="7 5.07179677 8.66987298 17.9641016 11.9090909 13.5745916 17.330127 12.9641016"></polygon>
+            <line x1="12" y1="13.7320508" x2="15" y2="18.9282032" stroke="#3381FF"></line>
+        </g>
+    </g>
+</svg>

package/src/TUIRoom/components/Whiteboard/controller/ToolBox/image/click.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>click@1x</title>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g stroke="#444E60">
+            <polygon points="7 5.07179677 8.66987298 17.9641016 11.9090909 13.5745916 17.330127 12.9641016"></polygon>
+            <line x1="12" y1="13.7320508" x2="15" y2="18.9282032"></line>
+            <polygon points="7 5.07179677 8.66987298 17.9641016 11.9090909 13.5745916 17.330127 12.9641016"></polygon>
+            <line x1="12" y1="13.7320508" x2="15" y2="18.9282032"></line>
+        </g>
+    </g>
+</svg>

package/src/TUIRoom/components/Whiteboard/controller/ToolBox/image/ellipse-active.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title></title>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linejoin="round">
+        <g transform="translate(-48.000000, -368.000000)" stroke="#3381FF">
+            <g transform="translate(48.000000, 368.000000)">
+                <rect x="6" y="6" width="12" height="12" rx="6"></rect>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/TUIRoom/components/Whiteboard/controller/ToolBox/image/ellipse.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title></title>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linejoin="round">
+        <g transform="translate(-8.000000, -368.000000)" stroke="#444E60">
+            <g transform="translate(8.000000, 368.000000)">
+                <rect x="6" y="6" width="12" height="12" rx="6"></rect>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/TUIRoom/components/Whiteboard/controller/ToolBox/image/eraser-active.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title></title>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-48.000000, -116.000000)" stroke="#3381FF">
+            <g transform="translate(48.000000, 116.000000)">
+                <line x1="11" y1="8" x2="16" y2="13"></line>
+                <path d="M15.5,6.16666667 L17.8333333,8.5 C18.4776655,9.14433221 18.4776655,10.1890011 17.8333333,10.8333333 L12,16.6666667 C10.7113356,17.9553311 8.62199775,17.9553311 7.33333333,16.6666667 L6.16666667,15.5 C5.52233446,14.8556678 5.52233446,13.8109989 6.16666667,13.1666667 L13.1666667,6.16666667 C13.8109989,5.52233446 14.8556678,5.52233446 15.5,6.16666667 Z" stroke-linecap="round" stroke-linejoin="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/TUIRoom/components/Whiteboard/controller/ToolBox/image/eraser.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title></title>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-8.000000, -116.000000)" stroke="#444E60">
+            <g transform="translate(8.000000, 116.000000)">
+                <line x1="11" y1="8" x2="16" y2="13"></line>
+                <path d="M15.5,6.16666667 L17.8333333,8.5 C18.4776655,9.14433221 18.4776655,10.1890011 17.8333333,10.8333333 L12,16.6666667 C10.7113356,17.9553311 8.62199775,17.9553311 7.33333333,16.6666667 L6.16666667,15.5 C5.52233446,14.8556678 5.52233446,13.8109989 6.16666667,13.1666667 L13.1666667,6.16666667 C13.8109989,5.52233446 14.8556678,5.52233446 15.5,6.16666667 Z" stroke-linecap="round" stroke-linejoin="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/TUIRoom/components/Whiteboard/controller/ToolBox/image/hand-active.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title></title>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g transform="translate(-48.000000, -224.000000)" stroke="#3381FF">
+            <g transform="translate(48.000000, 224.000000)">
+                <path d="M12.5,5 C13.0522847,5 13.5,5.44771525 13.5,6 L13.5,7 C13.5,6.44771525 13.9477153,6 14.5,6 C15.0522847,6 15.5,6.44771525 15.5,7 L15.5,7 L15.5,9 C15.5,8.44771525 15.9477153,8 16.5,8 C17.0522847,8 17.5,8.44771525 17.5,9 L17.5,9 L17.5,15 C17.5,17.209139 15.709139,19 13.5,19 L12.1375846,19 C10.5374722,19 9.09131968,18.0464126 8.46100451,16.5756772 L6.77854301,12.6499337 C6.61031263,12.2573961 6.69801722,11.8019828 7,11.5 C7.27614237,11.2238576 7.72385763,11.2238576 8,11.5 L9.5,13 L9.5,7 L9.50672773,6.88337887 C9.56449284,6.38604019 9.98716416,6 10.5,6 C11.0522847,6 11.5,6.44771525 11.5,7 L11.5,7 L11.5,6 C11.5,5.44771525 11.9477153,5 12.5,5 Z M11.5,6 L11.5,10 M13.5,6 L13.5,10 M15.5,8 L15.5,10" transform="translate(12.000000, 12.000000) rotate(45.000000) translate(-12.000000, -12.000000) "></path>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/TUIRoom/components/Whiteboard/controller/ToolBox/image/hand.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title></title>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g transform="translate(-8.000000, -224.000000)" stroke="#444E60">
+            <g transform="translate(8.000000, 224.000000)">
+                <path d="M12.5,5 C13.0522847,5 13.5,5.44771525 13.5,6 L13.5,7 C13.5,6.44771525 13.9477153,6 14.5,6 C15.0522847,6 15.5,6.44771525 15.5,7 L15.5,7 L15.5,9 C15.5,8.44771525 15.9477153,8 16.5,8 C17.0522847,8 17.5,8.44771525 17.5,9 L17.5,9 L17.5,15 C17.5,17.209139 15.709139,19 13.5,19 L12.1375846,19 C10.5374722,19 9.09131968,18.0464126 8.46100451,16.5756772 L6.77854301,12.6499337 C6.61031263,12.2573961 6.69801722,11.8019828 7,11.5 C7.27614237,11.2238576 7.72385763,11.2238576 8,11.5 L9.5,13 L9.5,7 L9.50672773,6.88337887 C9.56449284,6.38604019 9.98716416,6 10.5,6 C11.0522847,6 11.5,6.44771525 11.5,7 L11.5,7 L11.5,6 C11.5,5.44771525 11.9477153,5 12.5,5 Z M11.5,6 L11.5,10 M13.5,6 L13.5,10 M15.5,8 L15.5,10" transform="translate(12.000000, 12.000000) rotate(45.000000) translate(-12.000000, -12.000000) "></path>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/TUIRoom/components/Whiteboard/controller/ToolBox/image/laserPointer-active.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title></title>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-48.000000, -188.000000)">
+            <g transform="translate(48.000000, 188.000000)">
+                <circle fill="#3381FF" cx="12" cy="12" r="2"></circle>
+                <line x1="12" y1="4" x2="12" y2="6" stroke="#3381FF" stroke-linecap="square" stroke-linejoin="round"></line>
+                <line x1="12" y1="18" x2="12" y2="20"  stroke="#3381FF" stroke-linecap="square" stroke-linejoin="round"></line>
+                <line x1="20" y1="12" x2="18" y2="12"  stroke="#3381FF" stroke-linecap="square" stroke-linejoin="round"></line>
+                <line x1="6" y1="12" x2="4" y2="12" stroke="#3381FF" stroke-linecap="square" stroke-linejoin="round"></line>
+                <line x1="17.6568542" y1="17.6568542" x2="16.2426407" y2="16.2426407" stroke="#3381FF" stroke-linecap="square" stroke-linejoin="round"></line>
+                <line x1="7.75735931" y1="7.75735931" x2="6.34314575" y2="6.34314575" stroke="#3381FF" stroke-linecap="square" stroke-linejoin="round"></line>
+                <line x1="6.34314575" y1="17.6568542" x2="7.75735931" y2="16.2426407" stroke="#3381FF" stroke-linecap="square" stroke-linejoin="round"></line>
+                <line x1="16.2426407" y1="7.75735931" x2="17.6568542" y2="6.34314575" stroke="#3381FF" stroke-linecap="square" stroke-linejoin="round"></line>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/TUIRoom/components/Whiteboard/controller/ToolBox/image/laserPointer.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title></title>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-8.000000, -188.000000)">
+            <g transform="translate(8.000000, 188.000000)">
+                <circle fill="#444E60" cx="12" cy="12" r="2"></circle>
+                <line x1="12" y1="4" x2="12" y2="6" stroke="#444E60" stroke-linecap="square" stroke-linejoin="round"></line>
+                <line x1="12" y1="18" x2="12" y2="20" stroke="#444E60" stroke-linecap="square" stroke-linejoin="round"></line>
+                <line x1="20" y1="12" x2="18" y2="12" stroke="#444E60" stroke-linecap="square" stroke-linejoin="round"></line>
+                <line x1="6" y1="12" x2="4" y2="12" stroke="#444E60" stroke-linecap="square" stroke-linejoin="round"></line>
+                <line x1="17.6568542" y1="17.6568542" x2="16.2426407" y2="16.2426407" stroke="#444E60" stroke-linecap="square" stroke-linejoin="round"></line>
+                <line x1="7.75735931" y1="7.75735931" x2="6.34314575" y2="6.34314575" stroke="#444E60" stroke-linecap="square" stroke-linejoin="round"></line>
+                <line x1="6.34314575" y1="17.6568542" x2="7.75735931" y2="16.2426407" stroke="#444E60" stroke-linecap="square" stroke-linejoin="round"></line>
+                <line x1="16.2426407" y1="7.75735931" x2="17.6568542" y2="6.34314575" stroke="#444E60" stroke-linecap="square" stroke-linejoin="round"></line>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/TUIRoom/components/Whiteboard/controller/ToolBox/image/mask.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="170px" height="29px" viewBox="0 0 170 29" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 55.1 (78136) - https://sketchapp.com -->
+    <title>mask (1)</title>
+    <desc>Created with Sketch.</desc>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="mask-(1)" transform="translate(0.000000, -0.177515)" fill="#FFFFFF" fill-rule="nonzero">
+            <path d="M170,0.177514793 L170,29.1775148 L0,29.1775148 L0,0.177514793 L170,0.177514793 Z M155.702875,7.70508717 L155.434123,7.71050163 L8.49907471,13.4220166 C7.82142679,13.4483583 7.28571429,14.0026739 7.28571429,14.6775148 C7.28571429,15.3523557 7.82142679,15.9066713 8.49907471,15.933013 L8.49907471,15.933013 L155.434123,21.644528 C155.525243,21.6480696 155.616424,21.649841 155.707613,21.649841 C159.577292,21.649841 162.714286,18.5282242 162.714286,14.6775148 C162.714286,14.5867726 162.712506,14.4960388 162.708947,14.4053655 C162.557902,10.5575911 159.300853,7.56019825 155.434123,7.71050163 L155.702875,7.70508717 Z" id="mask"></path>
+        </g>
+    </g>
+</svg>

package/src/TUIRoom/components/Whiteboard/controller/ToolBox/image/pencil-active.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title></title>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g transform="translate(-48.000000, -44.000000)" stroke="#3381FF">
+            <g transform="translate(48.000000, 44.000000)">
+                <path d="M15.2700286,11.5822879 L9.44305056,17.4092659 C9.06480988,17.7875066 8.55180543,18 8.01689232,18 L6,18 L6,18 L6,15.9831077 C6,15.4481946 6.2124934,14.9351901 6.59073408,14.5569494 L14.5569494,6.59073408 C15.3445949,5.80308864 16.6216205,5.80308864 17.4092659,6.59073408 C18.1969114,7.37837953 18.1969114,8.65540512 17.4092659,9.44305056 L17.4092659,9.44305056 L17.4092659,9.44305056 C18.1969114,10.230696 18.1969114,11.5077216 17.4092659,12.295367 L14.5569494,15.1476835 L14.5569494,15.1476835"></path>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/TUIRoom/components/Whiteboard/controller/ToolBox/image/pencil.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title></title>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g transform="translate(-8.000000, -44.000000)" stroke="#444E60">
+            <g transform="translate(8.000000, 44.000000)">
+                <path d="M15.2700286,11.5822879 L9.44305056,17.4092659 C9.06480988,17.7875066 8.55180543,18 8.01689232,18 L6,18 L6,18 L6,15.9831077 C6,15.4481946 6.2124934,14.9351901 6.59073408,14.5569494 L14.5569494,6.59073408 C15.3445949,5.80308864 16.6216205,5.80308864 17.4092659,6.59073408 C18.1969114,7.37837953 18.1969114,8.65540512 17.4092659,9.44305056 L17.4092659,9.44305056 L17.4092659,9.44305056 C18.1969114,10.230696 18.1969114,11.5077216 17.4092659,12.295367 L14.5569494,15.1476835 L14.5569494,15.1476835"></path>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/TUIRoom/components/Whiteboard/controller/ToolBox/image/pentagram-active.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title></title>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-128.000000, -128.000000)" stroke="#3381FF">
+            <g transform="translate(56.000000, 88.000000)">
+                <g transform="translate(72.000000, 40.000000)">
+                    <path d="M11.8220813,5.53069562 C12.3696773,5.62507662 12.4625734,5.72554557 12.5206245,5.84774318 L12.5206245,5.84774318 L14.2189736,9.42277042 L17.9920285,9.99234378 C18.1520889,10.0165062 18.2857395,10.1091286 18.3751462,10.2348609 C18.4719375,10.3709779 18.5180744,10.5461839 18.4934299,10.727512 C18.4738012,10.8719348 18.4101452,11.0060802 18.3101095,11.107382 L18.3101095,11.107382 L15.6017319,13.8500424 L16.2437398,17.738772 C16.273578,17.9195063 16.2322362,18.0963001 16.1392467,18.2355891 C16.0531778,18.3645118 15.9218276,18.4616905 15.7619923,18.4909999 C15.6401188,18.5133481 15.5148269,18.4923492 15.4051219,18.4324315 L15.4051219,18.4324315 L11.9999312,16.5726127 L8.59474046,18.4324315 C8.45624603,18.5080732 8.30173213,18.5180361 8.16377893,18.4719016 C8.01822109,18.4232239 7.89275102,18.3137981 7.81733557,18.160431 C7.75356476,18.0307448 7.73238084,17.8825791 7.75612261,17.738772 L7.75612261,17.738772 L8.39813049,13.8500424 L5.68975282,11.107382 C5.56536722,10.981422 5.50330824,10.813681 5.50012823,10.6457587 C5.49693852,10.4773242 5.55293545,10.306672 5.67278368,10.1752191 C5.76224575,10.0770947 5.87963871,10.0116959 6.00783388,9.99234378 L6.00783388,9.99234378 L9.78088874,9.42277042 L11.4792378,5.84774318 C11.5527358,5.69302981 11.6769476,5.58159072 11.8220813,5.53069562 Z"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/TUIRoom/components/Whiteboard/controller/ToolBox/image/pentagram.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title></title>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-128.000000, -48.000000)" stroke="#444E60">
+            <g transform="translate(56.000000, 8.000000)">
+                <g transform="translate(72.000000, 40.000000)">
+                    <path d="M11.8220813,5.53069562 C12.3696773,5.62507662 12.4625734,5.72554557 12.5206245,5.84774318 L12.5206245,5.84774318 L14.2189736,9.42277042 L17.9920285,9.99234378 C18.1520889,10.0165062 18.2857395,10.1091286 18.3751462,10.2348609 C18.4719375,10.3709779 18.5180744,10.5461839 18.4934299,10.727512 C18.4738012,10.8719348 18.4101452,11.0060802 18.3101095,11.107382 L18.3101095,11.107382 L15.6017319,13.8500424 L16.2437398,17.738772 C16.273578,17.9195063 16.2322362,18.0963001 16.1392467,18.2355891 C16.0531778,18.3645118 15.9218276,18.4616905 15.7619923,18.4909999 C15.6401188,18.5133481 15.5148269,18.4923492 15.4051219,18.4324315 L15.4051219,18.4324315 L11.9999312,16.5726127 L8.59474046,18.4324315 C8.45624603,18.5080732 8.30173213,18.5180361 8.16377893,18.4719016 C8.01822109,18.4232239 7.89275102,18.3137981 7.81733557,18.160431 C7.75356476,18.0307448 7.73238084,17.8825791 7.75612261,17.738772 L7.75612261,17.738772 L8.39813049,13.8500424 L5.68975282,11.107382 C5.56536722,10.981422 5.50330824,10.813681 5.50012823,10.6457587 C5.49693852,10.4773242 5.55293545,10.306672 5.67278368,10.1752191 C5.76224575,10.0770947 5.87963871,10.0116959 6.00783388,9.99234378 L6.00783388,9.99234378 L9.78088874,9.42277042 L11.4792378,5.84774318 C11.5527358,5.69302981 11.6769476,5.58159072 11.8220813,5.53069562 Z"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/TUIRoom/components/Whiteboard/controller/ToolBox/image/rectangle-active.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title></title>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linejoin="round">
+        <g transform="translate(-48.000000, -332.000000)" stroke="#3381FF">
+            <g transform="translate(48.000000, 332.000000)">
+                <rect x="6" y="6" width="12" height="12" rx="2"></rect>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/TUIRoom/components/Whiteboard/controller/ToolBox/image/rectangle.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title></title>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linejoin="round">
+        <g transform="translate(-8.000000, -332.000000)" stroke="#444E60">
+            <g transform="translate(8.000000, 332.000000)">
+                <rect x="6" y="6" width="12" height="12" rx="2"></rect>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/TUIRoom/components/Whiteboard/controller/ToolBox/image/rhombus-active.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title></title>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-64.000000, -128.000000)" stroke="#3381FF">
+            <g transform="translate(56.000000, 88.000000)">
+                <g transform="translate(8.000000, 40.000000)">
+                    <path d="M12,5.5 C12.3399741,5.5 12.6799483,5.62969577 12.9393398,5.8890873 L12.9393398,5.8890873 L18.1109127,11.0606602 C18.3703042,11.3200517 18.5,11.6600259 18.5,12 C18.5,12.3399741 18.3703042,12.6799483 18.1109127,12.9393398 L18.1109127,12.9393398 L12.9393398,18.1109127 C12.6799483,18.3703042 12.3399741,18.5 12,18.5 C11.6600259,18.5 11.3200517,18.3703042 11.0606602,18.1109127 L11.0606602,18.1109127 L5.8890873,12.9393398 C5.62969577,12.6799483 5.5,12.3399741 5.5,12 C5.5,11.6600259 5.62969577,11.3200517 5.8890873,11.0606602 L5.8890873,11.0606602 L11.0606602,5.8890873 C11.3200517,5.62969577 11.6600259,5.5 12,5.5 Z" ></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/TUIRoom/components/Whiteboard/controller/ToolBox/image/rhombus.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title></title>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-64.000000, -48.000000)" stroke="#444E60">
+            <g transform="translate(56.000000, 8.000000)">
+                <g transform="translate(8.000000, 40.000000)">
+                    <path d="M12,5.5 C12.3399741,5.5 12.6799483,5.62969577 12.9393398,5.8890873 L12.9393398,5.8890873 L18.1109127,11.0606602 C18.3703042,11.3200517 18.5,11.6600259 18.5,12 C18.5,12.3399741 18.3703042,12.6799483 18.1109127,12.9393398 L18.1109127,12.9393398 L12.9393398,18.1109127 C12.6799483,18.3703042 12.3399741,18.5 12,18.5 C11.6600259,18.5 11.3200517,18.3703042 11.0606602,18.1109127 L11.0606602,18.1109127 L5.8890873,12.9393398 C5.62969577,12.6799483 5.5,12.3399741 5.5,12 C5.5,11.6600259 5.62969577,11.3200517 5.8890873,11.0606602 L5.8890873,11.0606602 L11.0606602,5.8890873 C11.3200517,5.62969577 11.6600259,5.5 12,5.5 Z"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/TUIRoom/components/Whiteboard/controller/ToolBox/image/selector-active.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 55.1 (78136) - https://sketchapp.com -->
+    <title>selector</title>
+    <desc>Created with Sketch.</desc>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="selector" transform="translate(1.000000, 1.000000)">
+            <path d="M7,14 L2,14 C0.8954305,14 0,13.1045695 0,12 L0,2 C0,0.8954305 0.8954305,0 2,0 L12,0 C13.1045695,0 14,0.8954305 14,2 L14,7 L14,7" stroke="#3381FF" stroke-linecap="round" stroke-linejoin="round"></path>
+            <polygon fill="#3381FF" fill-rule="nonzero" points="8 8 14 10 11.3333333 11.3333333 10 14"></polygon>
+        </g>
+    </g>
+</svg>

package/src/TUIRoom/components/Whiteboard/controller/ToolBox/image/selector.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title></title>
+    <g id="Flat" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-16.000000, -247.000000)">
+            <g transform="translate(8.000000, 207.000000)">
+                <g transform="translate(8.000000, 40.000000)">
+                    <path d="M12,19 L7,19 C5.8954305,19 5,18.1045695 5,17 L5,7 C5,5.8954305 5.8954305,5 7,5 L17,5 C18.1045695,5 19,5.8954305 19,7 L19,12 L19,12" stroke="#444E60" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <polygon fill="#444E60" points="13 13 19 15 16.3333333 16.3333333 15 19"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>