@tencentcloud/roomkit-electron-vue3 2.5.0 → 2.6.0

package/src/TUIRoom/components/Whiteboard/controller/ToolBox/image/speechBalloon-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(-160.000000, -128.000000)" stroke="#3381FF">
+            <g transform="translate(56.000000, 88.000000)">
+                <g transform="translate(104.000000, 40.000000)">
+                    <path d="M16.5,6 C16.9142136,6 17.2892136,6.16789322 17.5606602,6.43933983 C17.8321068,6.71078644 18,7.08578644 18,7.5 L18,7.5 L18,13.7142857 C18,14.1284993 17.8321068,14.5034993 17.5606602,14.7749459 C17.2892136,15.0463925 16.9142136,15.2142857 16.5000418,15.2142857 L16.5000418,15.2142857 L12.862101,15.2139816 L10.4309693,17.8655011 L9.7122759,15.2139169 L7.5,15.2142857 C7.08578644,15.2142857 6.71078644,15.0463925 6.43933983,14.7749459 C6.16789322,14.5034993 6,14.1284993 6,13.7142857 L6,13.7142857 L6,7.5 C6,7.08578644 6.16789322,6.71078644 6.43933983,6.43933983 C6.71078644,6.16789322 7.08578644,6 7.5,6 L7.5,6 Z"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/TUIRoom/components/Whiteboard/controller/ToolBox/image/speechBalloon.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(-160.000000, -48.000000)" stroke="#444E60">
+            <g transform="translate(56.000000, 8.000000)">
+                <g transform="translate(104.000000, 40.000000)">
+                    <path d="M16.5,6 C16.9142136,6 17.2892136,6.16789322 17.5606602,6.43933983 C17.8321068,6.71078644 18,7.08578644 18,7.5 L18,7.5 L18,13.7142857 C18,14.1284993 17.8321068,14.5034993 17.5606602,14.7749459 C17.2892136,15.0463925 16.9142136,15.2142857 16.5000418,15.2142857 L16.5000418,15.2142857 L12.862101,15.2139816 L10.4309693,17.8655011 L9.7122759,15.2139169 L7.5,15.2142857 C7.08578644,15.2142857 6.71078644,15.0463925 6.43933983,14.7749459 C6.16789322,14.5034993 6,14.1284993 6,13.7142857 L6,13.7142857 L6,7.5 C6,7.08578644 6.16789322,6.71078644 6.43933983,6.43933983 C6.71078644,6.16789322 7.08578644,6 7.5,6 L7.5,6 Z"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/TUIRoom/components/Whiteboard/controller/ToolBox/image/straight-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, -404.000000)" stroke="#3381FF">
+            <g transform="translate(48.000000, 404.000000)">
+                <line x1="6" y1="18" x2="18" y2="6"></line>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/TUIRoom/components/Whiteboard/controller/ToolBox/image/straight.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, -404.000000)" stroke="#444E60">
+            <g transform="translate(8.000000, 404.000000)">
+                <line x1="6" y1="18" x2="18" y2="6"></line>
+            </g>
+        </g>
+    </g>
+</svg>

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

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="4px" height="4px" viewBox="0 0 4 4" 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></title>
+    <desc>Created with Sketch.</desc>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <polygon fill="#3381FF" fill-rule="nonzero" points="4 0 4 4 0 4"></polygon>
+    </g>
+</svg>

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

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="4px" height="4px" viewBox="0 0 4 4" 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></title>
+    <desc>Created with Sketch.</desc>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <polygon fill="#444E60" fill-rule="nonzero" points="4 0 4 4 0 4"></polygon>
+    </g>
+</svg>

package/src/TUIRoom/components/Whiteboard/controller/ToolBox/image/text-active.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 stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g transform="translate(-48.000000, -80.000000)" stroke="#3381FF">
+            <g transform="translate(48.000000, 80.000000)">
+                <polyline points="6 6 18 6 18 8"></polyline>
+                <line x1="12" y1="6" x2="12" y2="16"></line>
+                <line x1="6" y1="6" x2="6" y2="8"></line>
+                <line x1="10" y1="18" x2="14" y2="18"></line>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/TUIRoom/components/Whiteboard/controller/ToolBox/image/text.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 stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g transform="translate(-8.000000, -80.000000)" stroke="#444E60">
+            <g transform="translate(8.000000, 80.000000)">
+                <polyline points="6 6 18 6 18 8"></polyline>
+                <line x1="12" y1="6" x2="12" y2="16"></line>
+                <line x1="6" y1="6" x2="6" y2="8"></line>
+                <line x1="10" y1="18" x2="14" y2="18"></line>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/TUIRoom/components/Whiteboard/controller/ToolBox/image/triangle-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(-96.000000, -128.000000)" stroke="#3381FF">
+            <g  transform="translate(56.000000, 88.000000)">
+                <g transform="translate(40.000000, 40.000000)">
+                    <path d="M11.8735432,6.51639519 L18.4433604,16.8729099 C18.5014646,16.9705991 18.513552,17.0816789 18.4849451,17.1824518 C18.4637477,17.2571235 18.4207741,17.3254323 18.3599622,17.3797162 L18.3599622,17.3797162 L5.9619473,17.5 C5.83202254,17.5 5.71357665,17.4508256 5.62815063,17.3687543 C5.5756394,17.3183052 5.53576798,17.2551406 5.51530514,17.1841993 L5.51530514,17.1841993 L11.5944453,6.72141053 C11.6575042,6.61539105 11.7604689,6.5460226 11.8735432,6.51639519 L11.8735432,6.51639519 Z"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/TUIRoom/components/Whiteboard/controller/ToolBox/image/triangle.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(-96.000000, -48.000000)" stroke="#444E60">
+            <g transform="translate(56.000000, 8.000000)">
+                <g transform="translate(40.000000, 40.000000)">
+                    <path d="M11.8735432,6.51639519 L18.4433604,16.8729099 C18.5014646,16.9705991 18.513552,17.0816789 18.4849451,17.1824518 C18.4637477,17.2571235 18.4207741,17.3254323 18.3599622,17.3797162 L18.3599622,17.3797162 L5.9619473,17.5 C5.83202254,17.5 5.71357665,17.4508256 5.62815063,17.3687543 C5.5756394,17.3183052 5.53576798,17.2551406 5.51530514,17.1841993 L5.51530514,17.1841993 L11.5944453,6.72141053 C11.6575042,6.61539105 11.7604689,6.5460226 11.8735432,6.51639519 L11.8735432,6.51639519 Z"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/TUIRoom/components/Whiteboard/controller/ToolBox/image/upload-active.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-pressed</title>
+    <desc>Created with Sketch.</desc>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Whiteboard-Guidelines" transform="translate(-736.000000, -295.000000)">
+            <g id="upload-pressed" transform="translate(736.000000, 295.000000)">
+                <rect fill="#FFFFFF" opacity="0.01" x="0" y="0" width="40" height="40" rx="2"></rect>
+                <polyline stroke="#3381FF" stroke-linecap="round" stroke-linejoin="round" transform="translate(20.000000, 14.000000) rotate(-270.000000) translate(-20.000000, -14.000000) " points="22 18 20 16 18 14 20 12 22 10"></polyline>
+                <polyline stroke="#3381FF" 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" stroke="#3381FF" stroke-linecap="round" stroke-linejoin="round"></line>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/TUIRoom/components/Whiteboard/controller/ToolBox/image/upload.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, 14.000000) rotate(-270.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" stroke="#212324" stroke-linecap="round" stroke-linejoin="round"></line>
+            </g>
+        </g>
+    </g>
+</svg>

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

@@ -0,0 +1,255 @@
+<template>
+  <div class="tool-mid-box-left">
+    <div
+      class="tool-box-cell-box-left"
+      v-for="item in tools"
+      :key="item.shapeType"
+    >
+      <div class="tool-box-cell" @click="clickAppliance(item.shapeType)">
+        <img
+          :src="
+            item.shapeType === currentShapType ? item.iconActive : item.icon
+          "
+        />
+      </div>
+    </div>
+    <div class="tool-box-cell-box-left">
+      <div class="tool-box-cell" @click="clickClear">
+        <img :src="clear" />
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { inject, ref, Ref } from 'vue';
+import FabricCanvas, { DrawingTool } from './../../core';
+import selector from './image/selector.svg';
+import selectorActive from './image/selector-active.svg';
+import pen from './image/pencil.svg';
+import penActive from './image/pencil-active.svg';
+import text from './image/text.svg';
+import textActive from './image/text-active.svg';
+import eraser from './image/eraser.svg';
+import eraserActive from './image/eraser-active.svg';
+import arrow from './image/arrow.svg';
+import arrowActive from './image/arrow-active.svg';
+import ellipse from './image/ellipse.svg';
+import ellipseActive from './image/ellipse-active.svg';
+import rectangle from './image/rectangle.svg';
+import rectangleActive from './image/rectangle-active.svg';
+import straight from './image/straight.svg';
+import straightActive from './image/straight-active.svg';
+import triangle from './image/triangle.svg';
+import triangleActive from './image/triangle-active.svg';
+import clear from './image/clear.svg';
+import eventBus from '../../../../hooks/useMitt';
+
+const canvas = inject<Ref<FabricCanvas>>('canvas');
+
+type Appliance = {
+  readonly name: string;
+  readonly icon: string;
+  readonly iconActive: string;
+  readonly shapeType: DrawingTool;
+};
+const tools = ref<Appliance[]>([
+  {
+    name: 'select',
+    icon: selector,
+    iconActive: selectorActive,
+    shapeType: 'select',
+  },
+  {
+    name: 'pencil',
+    icon: pen,
+    iconActive: penActive,
+    shapeType: 'pencil',
+  },
+  {
+    name: 'text',
+    icon: text,
+    iconActive: textActive,
+    shapeType: 'text',
+  },
+  {
+    name: 'eraser',
+    icon: eraser,
+    iconActive: eraserActive,
+    shapeType: 'eraser',
+  },
+  {
+    name: 'triangle',
+    icon: triangle,
+    iconActive: triangleActive,
+    shapeType: 'triangle',
+  },
+  {
+    name: 'ellipse',
+    icon: ellipse,
+    iconActive: ellipseActive,
+    shapeType: 'circle',
+  },
+  {
+    name: 'rectangle',
+    icon: rectangle,
+    iconActive: rectangleActive,
+    shapeType: 'rectangle',
+  },
+  {
+    name: 'straight',
+    icon: straight,
+    iconActive: straightActive,
+    shapeType: 'line',
+  },
+  {
+    name: 'arrow',
+    icon: arrow,
+    iconActive: arrowActive,
+    shapeType: 'arrow',
+  },
+]);
+
+const currentShapType = ref<string>('pencil');
+
+function clickAppliance(type: DrawingTool) {
+  currentShapType.value = type;
+  canvas?.value.setDrawingTool(type);
+}
+
+function clickClear() {
+  canvas?.value.clearCanvas();
+  // eslint-disable-next-line no-undef
+  eventBus.emit('undo-clear-canvas');
+}
+</script>
+<style lang="scss" scoped>
+.tool-mid-box {
+  display: flex;
+  justify-content: space-between;
+  height: 32px;
+  padding-right: 6px;
+  padding-left: 6px;
+  background-color: white;
+  border-radius: 4px;
+}
+
+.tool-mid-box-left {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  width: 40px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  background-color: white;
+  border-radius: 4px;
+  box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.1);
+}
+
+.tool-box-cell {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+}
+
+.tool-box-cell-color {
+  width: 14px;
+  height: 14px;
+  border: 1px solid rgba(0, 0, 0, 0.24);
+  border-radius: 8px;
+}
+
+.tool-box-cell-subscript {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  display: flex;
+}
+
+.tool-box-cell-box-left {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  cursor: pointer;
+  user-select: none;
+  border-radius: 2px;
+
+  &:hover {
+    background: rgba(33, 35, 36, 0.1);
+  }
+}
+
+.tool-box-cell-step-two {
+  height: 2px;
+  margin-top: -4px;
+  margin-right: auto;
+  margin-left: auto;
+  border-radius: 1px;
+}
+
+.palette-box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 188px;
+}
+
+.palette-box-color {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 188px;
+}
+
+.stroke-script {
+  display: flex;
+  justify-content: space-between;
+  width: 156px;
+  height: 17px;
+  margin-bottom: 16px;
+}
+
+.stroke-script-text {
+  height: 17px;
+  font-family: sans-serif;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 17px;
+  color: rgba(33, 35, 36, 1);
+}
+
+.draw-tool-box-title {
+  width: 100%;
+
+  div {
+    margin-top: 8px;
+    margin-bottom: 8px;
+    margin-left: 16px;
+    font-weight: bold;
+  }
+}
+
+.palette-stroke-under-layer {
+  position: absolute;
+  z-index: 1;
+  width: 242px;
+  height: 32px;
+}
+
+.palette-stroke-slider-mask {
+  position: absolute;
+  z-index: 3;
+  display: flex;
+  justify-content: center;
+  width: 290px;
+  height: 32px;
+}
+</style>

package/src/TUIRoom/components/Whiteboard/controller/ZoomController/image/less.svg

@@ -0,0 +1,9 @@
+<?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>less</title>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g transform="translate(-88.000000, -188.000000)" stroke="#444E60">
+            <line x1="95" y1="200" x2="105" y2="200"></line>
+        </g>
+    </g>
+</svg>

package/src/TUIRoom/components/Whiteboard/controller/ZoomController/image/plus.svg

@@ -0,0 +1,10 @@
+<?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>add</title>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g transform="translate(-88.000000, -224.000000)" stroke="#444E60">
+            <line x1="100" y1="231" x2="100" y2="241"></line>
+            <line x1="95" y1="236" x2="105" y2="236"></line>
+        </g>
+    </g>
+</svg>

package/src/TUIRoom/components/Whiteboard/controller/ZoomController/image/reset.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>reset</title>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-88.000000, -152.000000)">
+            <circle fill="#444E60" cx="100" cy="164" r="1"></circle>
+            <circle stroke="#444E60" stroke-linecap="round" stroke-linejoin="round" cx="100" cy="164" r="4"></circle>
+            <line x1="100" y1="158" x2="100" y2="160" stroke="#444E60" stroke-linecap="round" stroke-linejoin="round"></line>
+            <line x1="100" y1="168" x2="100" y2="170" stroke="#444E60" stroke-linecap="round" stroke-linejoin="round"></line>
+            <line x1="106" y1="164" x2="104" y2="164" stroke="#444E60" stroke-linecap="round" stroke-linejoin="round"></line>
+            <line x1="96" y1="164" x2="94" y2="164" stroke="#444E60" stroke-linecap="round" stroke-linejoin="round"></line>
+        </g>
+    </g>
+</svg>

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

@@ -0,0 +1,73 @@
+<template>
+  <div class="scale-controller-box">
+    <div class="scale-controller-btn" @click="resetScale">
+      <img :src="reset" />
+    </div>
+    <div class="scale-controller-cut-line"></div>
+    <div class="scale-controller-btn" @click="zoomOut">
+      <img :src="less" />
+    </div>
+    <div>{{ zoomRatio }} <span style="opacity: 0.6">%</span></div>
+    <div class="scale-controller-btn" @click="zoomIn">
+      <img :src="plus" />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { inject, ref, Ref } from 'vue';
+import FabricCanvas from './../../core';
+import reset from './image/reset.svg';
+import plus from './image/plus.svg';
+import less from './image/less.svg';
+
+const canvas = inject<Ref<FabricCanvas>>('canvas');
+const zoomRatio = ref<number>(100);
+
+function resetScale() {
+  canvas?.value.zoom(1);
+  zoomRatio.value = 100;
+}
+function zoomIn() {
+  canvas?.value.zoomIn();
+  zoomRatio.value = Math.floor((canvas?.value.getZoom() as number) * 100);
+}
+function zoomOut() {
+  canvas?.value.zoomOut();
+  zoomRatio.value = Math.floor((canvas?.value.getZoom() as number) * 100);
+}
+</script>
+<style lang="scss" scoped>
+.scale-controller-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  font-size: 12px;
+  user-select: none;
+  background-color: white;
+  border-radius: 4px;
+  box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.08);
+}
+
+.scale-controller-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin-right: 4px;
+  margin-left: 4px;
+  cursor: pointer;
+  border-radius: 2px;
+
+  &:hover {
+    background: rgba(33, 35, 36, 0.1);
+  }
+}
+
+.scale-controller-cut-line {
+  width: 0.5px;
+  height: 20px;
+  background-color: #e7e7e7;
+}
+</style>

package/src/TUIRoom/components/Whiteboard/core/arrow.ts

@@ -0,0 +1,39 @@
+import { fabric } from 'fabric';
+
+fabric.Arrow = fabric.util.createClass(fabric.Line, {
+  type: 'arrow',
+  superType: 'drawing',
+  initialize(points: number[], options: any) {
+    if (!points) {
+      const { x1, x2, y1, y2 } = options;
+      points = [x1, y1, x2, y2];
+    }
+    options = options || {};
+    this.callSuper('initialize', points, options);
+  },
+  _render(ctx: any) {
+    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();
+    // Move 5px in front of line to start the arrow so it does not have the square line end showing in front (0,0)
+    ctx.moveTo(5, 0);
+    ctx.lineTo(-5, 5);
+    ctx.lineTo(-5, -5);
+    ctx.closePath();
+    ctx.fillStyle = this.stroke;
+    ctx.fill();
+    ctx.restore();
+  },
+});
+
+fabric.Arrow.fromObject = (options: any, callback: any) => {
+  const { x1, x2, y1, y2 } = options;
+  return callback(new fabric.Arrow([x1, y1, x2, y2], options));
+};
+
+export default fabric.Arrow;