@tencentcloud/roomkit-electron-vue3 2.5.0 → 2.6.0

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

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

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

@@ -0,0 +1,98 @@
+import { fabric } from 'fabric';
+import { Canvas } from 'fabric/fabric-impl';
+
+function rotateIcon(angle: number) {
+  return `url("data:image/svg+xml,%3Csvg height='18' width='18' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'%3E%3Cg fill='none' transform='rotate(${angle} 16 16)'%3E%3Cpath d='M22.4484 0L32 9.57891L22.4484 19.1478V13.1032C17.6121 13.8563 13.7935 17.6618 13.0479 22.4914H19.2141L9.60201 32.01L0 22.4813H6.54912C7.36524 14.1073 14.0453 7.44023 22.4484 6.61688V0Z' fill='white'/%3E%3Cpath d='M24.0605 3.89587L29.7229 9.57896L24.0605 15.252V11.3562C17.0479 11.4365 11.3753 17.0895 11.3048 24.0879H15.3048L9.60201 29.7308L3.90932 24.0879H8.0806C8.14106 15.3223 15.2645 8.22345 24.0605 8.14313V3.89587Z' fill='black'/%3E%3C/g%3E%3C/svg%3E ") 12 12,crosshair`;
+}
+
+function initControlsRotate(canvas: Canvas) {
+  fabric.Object.prototype.controls.mtr = new fabric.Control({
+    x: -0.5,
+    y: -0.5,
+    offsetY: -10,
+    offsetX: -10,
+    rotate: 20,
+    actionName: 'rotate',
+    actionHandler: fabric.controlsUtils.rotationWithSnapping,
+    render: () => {},
+  });
+  fabric.Object.prototype.controls.mtr2 = new fabric.Control({
+    x: 0.5,
+    y: -0.5,
+    offsetY: -10,
+    offsetX: 10,
+    rotate: 20,
+    actionName: 'rotate',
+    actionHandler: fabric.controlsUtils.rotationWithSnapping,
+    render: () => {},
+  });
+  fabric.Object.prototype.controls.mtr3 = new fabric.Control({
+    x: 0.5,
+    y: 0.5,
+    offsetY: 10,
+    offsetX: 10,
+    rotate: 20,
+    actionName: 'rotate',
+    actionHandler: fabric.controlsUtils.rotationWithSnapping,
+    render: () => {},
+  });
+  fabric.Object.prototype.controls.mtr4 = new fabric.Control({
+    x: -0.5,
+    y: 0.5,
+    offsetY: 10,
+    offsetX: -10,
+    rotate: 20,
+    actionName: 'rotate',
+    actionHandler: fabric.controlsUtils.rotationWithSnapping,
+    render: () => {},
+  });
+
+  canvas.on('after:render', () => {
+    const activeObject = canvas.getActiveObject();
+    if (!activeObject) return;
+    fabric.Object.prototype.controls.mtr.cursorStyle = rotateIcon(
+      Number((activeObject.angle as number).toFixed(2))
+    );
+    fabric.Object.prototype.controls.mtr2.cursorStyle = rotateIcon(
+      Number((activeObject.angle as number).toFixed(2)) + 90
+    );
+    fabric.Object.prototype.controls.mtr3.cursorStyle = rotateIcon(
+      Number((activeObject.angle as number).toFixed(2)) + 180
+    );
+    fabric.Object.prototype.controls.mtr4.cursorStyle = rotateIcon(
+      Number((activeObject.angle as number).toFixed(2)) + 270
+    );
+  });
+
+  canvas.on('object:rotating', event => {
+    const activeObject = canvas.getActiveObject();
+    if (!activeObject) return;
+    const body = canvas.getElement().nextSibling as HTMLCanvasElement;
+    switch (event.transform?.corner) {
+      case 'mtr':
+        body.style.cursor = rotateIcon(
+          Number((activeObject.angle as number).toFixed(2))
+        );
+        break;
+      case 'mtr2':
+        body.style.cursor = rotateIcon(
+          Number((activeObject.angle as number).toFixed(2)) + 90
+        );
+        break;
+      case 'mtr3':
+        body.style.cursor = rotateIcon(
+          Number((activeObject.angle as number).toFixed(2)) + 180
+        );
+        break;
+      case 'mtr4':
+        body.style.cursor = rotateIcon(
+          Number((activeObject.angle as number).toFixed(2)) + 270
+        );
+        break;
+      default:
+        break;
+    }
+  });
+}
+
+export default initControlsRotate;

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

@@ -0,0 +1,83 @@
+import { Canvas } from 'fabric/fabric-impl';
+import hotkeys from 'hotkeys-js';
+import FabricCanvas from './index';
+
+const keyNames = {
+  lrdu: 'left,right,down,up',
+  backspace: 'backspace',
+  delete: 'delete',
+  ctrlz: 'ctrl+z',
+  ctrly: 'ctrl+y',
+  ctrlc: 'ctrl+c',
+  ctrlv: 'ctrl+v',
+};
+
+function copyElement(canvas: Canvas) {
+  let copyEl: object | null = null;
+
+  hotkeys(keyNames.ctrlc, () => {
+    const activeObject = canvas.getActiveObject();
+    if (!activeObject) return;
+    activeObject.clone((_copyEl: object) => {
+      canvas.discardActiveObject();
+      _copyEl.set({
+        left: (_copyEl.left as number) + 20,
+        top: (_copyEl.top as number) + 20,
+        evented: true,
+      });
+      copyEl = _copyEl;
+    });
+  });
+
+  hotkeys(keyNames.ctrlv, () => {
+    if (!copyEl) return;
+    canvas.add(copyEl);
+    canvas.setActiveObject(copyEl);
+  });
+}
+
+function deleteObject(canvas : Canvas) {
+  const activeObject = canvas.getActiveObjects();
+  if (activeObject) {
+    activeObject.forEach(item => canvas.remove(item));
+    canvas.requestRenderAll();
+    canvas.discardActiveObject();
+  }
+}
+
+function initHotkeys(canvas: Canvas, fabricCanvas: FabricCanvas) {
+  hotkeys(keyNames.backspace, () => {
+    deleteObject(canvas);
+  });
+
+  hotkeys(keyNames.delete, () => {
+    deleteObject(canvas);
+  });
+
+  hotkeys(keyNames.lrdu, (_event, handler) => {
+    const activeObject = canvas.getActiveObject();
+    if (activeObject) {
+      switch (handler.key) {
+        case 'left':
+          activeObject.set('left', (activeObject.left as number) - 1);
+          break;
+        case 'right':
+          activeObject.set('left', (activeObject.left as number) + 1);
+          break;
+        case 'down':
+          activeObject.set('top', (activeObject.top as number) + 1);
+          break;
+        case 'up':
+          activeObject.set('top', (activeObject.top as number) - 1);
+          break;
+        default:
+      }
+      canvas.renderAll();
+    }
+  });
+
+  copyElement(canvas);
+}
+
+export default initHotkeys;
+export { keyNames, hotkeys };

package/src/TUIRoom/components/Whiteboard/emitter.ts

@@ -0,0 +1,27 @@
+import mitt, { Emitter, EventType, Handler } from 'mitt';
+
+class EventEmitter<T extends Record<EventType, unknown>> {
+  private emitter: Emitter<T>;
+
+  constructor() {
+    this.emitter = mitt();
+  }
+
+  on(eventName: keyof T, handler: Handler<T[keyof T]>) {
+    this.emitter.on(eventName, handler);
+  }
+
+  off(eventName: keyof T, handler: Handler<T[keyof T]>) {
+    this.emitter.off(eventName, handler);
+  }
+
+  emit(eventName: keyof T, event: T[keyof T]) {
+    this.emitter.emit(eventName, event);
+  }
+
+  removeAllListeners() {
+    this.emitter.all.clear();
+  }
+}
+
+export default EventEmitter;

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

@@ -0,0 +1,149 @@
+<template>
+  <div>
+    <div class="canvas-wrap" ref="canvasWrapRef">
+      <div class="tool-box-out" v-show="isControllerVisiable">
+        <ToolBox />
+      </div>
+      <div class="redo-undo-box" v-show="isControllerVisiable">
+        <RedoUndo />
+      </div>
+      <div class="controller-box">
+        <div class="save-controller" v-show="isSaveControllerVisiable">
+          <SaveController />
+        </div>
+        <div class="close-controller" v-show="isControllerVisiable">
+          <CloseController />
+        </div>
+      </div>
+      <!-- <div class="zoom-controller-box">
+        <ZoomController />
+      </div> -->
+      <canvas class="whiteboard-canvas" id="canvas"></canvas>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, provide, Ref, ref, onUnmounted } from 'vue';
+import { ipcRenderer } from 'electron';
+import FabricCanvas from './core';
+import ToolBox from './controller/ToolBox/index.vue';
+import RedoUndo from './controller/RedoUndo/index.vue';
+import CloseController from './controller/CloseController/index.vue';
+import { getUrlParam } from '../../utils/utils';
+import SaveController from './controller/SaveController/index.vue';
+
+const isAnnotationWin: Ref<boolean> = ref(false);
+const isAnnotationStarted: Ref<boolean> = ref(false);
+const canvas = ref<FabricCanvas>();
+const canvasWrapRef = ref<HTMLDivElement>();
+
+provide('canvas', canvas);
+
+const isControllerVisiable = computed(
+  () => !isAnnotationWin.value || isAnnotationStarted.value
+);
+
+const isSaveControllerVisiable = computed(() => !isAnnotationWin.value);
+
+function init() {
+  const fabricCanvas = new FabricCanvas('canvas');
+  canvas.value = fabricCanvas;
+}
+
+function resizeCanvas() {
+  canvas.value.setWidth(canvasWrapRef.value?.offsetWidth);
+  canvas.value.setHeight(canvasWrapRef.value?.offsetHeight);
+}
+
+onMounted(() => {
+  init();
+
+  const annotationParam = getUrlParam('isAnnotationWin');
+  if (annotationParam && annotationParam === 'true') {
+    isAnnotationWin.value = true;
+  }
+
+  if (!isAnnotationWin.value) {
+    canvas.value?.setBackgroundColor('white');
+  }
+
+  canvas.value.setWidth(canvasWrapRef.value?.offsetWidth);
+  canvas.value.setHeight(canvasWrapRef.value?.offsetHeight);
+
+  window.addEventListener('resize', resizeCanvas);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', resizeCanvas);
+});
+
+ipcRenderer.on('annotation:annotating-started', () => {
+  isAnnotationStarted.value = true;
+});
+
+ipcRenderer.on('annotation:annotating-stopped', () => {
+  isAnnotationStarted.value = false;
+});
+
+ipcRenderer.on('whiteboard:clear', () => {
+  if (canvas.value) {
+    canvas.value.reloadCanvas();
+  }
+});
+
+ipcRenderer.on('annotation:clear', () => {
+  if (canvas.value) {
+    canvas.value.reloadCanvas();
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.canvas-wrap {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  margin: 0 auto;
+  background-color: transparent;
+}
+
+.tool-box-out {
+  position: absolute;
+  left: 8px;
+  z-index: 3;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 0;
+  height: 100%;
+}
+
+.redo-undo-box {
+  position: absolute;
+  bottom: 8px;
+  left: 8px;
+  z-index: 3;
+  display: flex;
+}
+
+.zoom-controller-box {
+  position: absolute;
+  bottom: 8px;
+  left: 76px;
+  z-index: 3;
+}
+
+.controller-box {
+  position: absolute;
+  top: 18px;
+  right: 18px;
+  z-index: 3;
+  display: flex;
+}
+
+.whiteboard-canvas {
+  width: 100%;
+  height: 100%;
+}
+</style>

package/src/TUIRoom/components/Whiteboard/resources/editor/edgecontrol.svg

@@ -0,0 +1,17 @@
+<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d)">
+<circle cx="9.99609" cy="9" r="5" fill="white"/>
+<circle cx="9.99609" cy="9" r="4.75" stroke="black" stroke-opacity="0.3" stroke-width="0.5"/>
+</g>
+<defs>
+<filter id="filter0_d" x="0.996094" y="0" width="18" height="18" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="2"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.137674 0 0 0 0 0.190937 0 0 0 0 0.270833 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+</defs>
+</svg>

package/src/TUIRoom/components/Whiteboard/resources/editor/middlecontrol.svg

@@ -0,0 +1,17 @@
+<svg width="12" height="24" viewBox="0 0 12 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d)">
+<rect x="4" y="4" width="4" height="16" rx="2" fill="white"/>
+<rect x="4.25" y="4.25" width="3.5" height="15.5" rx="1.75" stroke="black" stroke-opacity="0.3" stroke-width="0.5"/>
+</g>
+<defs>
+<filter id="filter0_d" x="0" y="0" width="12" height="24" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="2"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.137674 0 0 0 0 0.190937 0 0 0 0 0.270833 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+</defs>
+</svg>

package/src/TUIRoom/components/Whiteboard/resources/editor/middlecontrolhoz.svg

@@ -0,0 +1,17 @@
+<svg width="24" height="12" viewBox="0 0 24 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d)">
+<rect x="20" y="4" width="4" height="16" rx="2" transform="rotate(90 20 4)" fill="white"/>
+<rect x="19.75" y="4.25" width="3.5" height="15.5" rx="1.75" transform="rotate(90 19.75 4.25)" stroke="black" stroke-opacity="0.3" stroke-width="0.5"/>
+</g>
+<defs>
+<filter id="filter0_d" x="0" y="0" width="24" height="12" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="2"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.137674 0 0 0 0 0.190937 0 0 0 0 0.270833 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+</defs>
+</svg>

package/src/TUIRoom/components/Whiteboard/resources/editor/rotateicon.svg

@@ -0,0 +1,20 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d)">
+<circle cx="9" cy="9" r="5" fill="white"/>
+<circle cx="9" cy="9" r="4.75" stroke="black" stroke-opacity="0.3" stroke-width="0.5"/>
+</g>
+<path d="M10.8047 11.1242L9.49934 11.1242L9.49934 9.81885" stroke="black" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.94856 6.72607L8.25391 6.72607L8.25391 8.03142" stroke="black" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.69517 6.92267C10.007 7.03301 10.2858 7.22054 10.5055 7.46776C10.7252 7.71497 10.8787 8.01382 10.9517 8.33642C11.0247 8.65902 11.0148 8.99485 10.9229 9.31258C10.831 9.63031 10.6601 9.91958 10.4262 10.1534L9.49701 11.0421M8.25792 6.72607L7.30937 7.73554C7.07543 7.96936 6.90454 8.25863 6.81264 8.57636C6.72073 8.89408 6.71081 9.22992 6.78381 9.55251C6.8568 9.87511 7.01032 10.174 7.23005 10.4212C7.44978 10.6684 7.72855 10.8559 8.04036 10.9663" stroke="black" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<filter id="filter0_d" x="0" y="0" width="18" height="18" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="2"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.137674 0 0 0 0 0.190937 0 0 0 0 0.270833 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+</defs>
+</svg>