@tencentcloud/roomkit-electron-vue3 2.6.7 → 2.7.0

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

@@ -0,0 +1,155 @@
+<template>
+  <IconButton
+    class="tool-button"
+    @click-icon="onClick"
+    v-click-outside="handleHideButtonSetting"
+  >
+    <ArrowIcon
+      :class="{ 'whiteboard-icon-active': activeTool === DrawingTool.Arrow }"
+    />
+    <div
+      v-if="showSettings && activeTool === 'Arrow'"
+      class="arrow-tool-setting whiteboard-tool-setting"
+    >
+      <div class="size-setting-title setting-title">{{ t('Arrow Size') }}</div>
+      <div class="size-setting-section setting-section">
+        <button
+          v-for="lineSize in lineSizes"
+          :key="lineSize.size"
+          class="size-button setting-option-button"
+          @click.stop="handleSizeClick(lineSize.size)"
+          :class="{
+            'button-active':
+              lineSize.size === toolSetting.shapeOptions!.strokeWidth,
+          }"
+        >
+          <img :src="lineSize.icon" />
+        </button>
+      </div>
+      <div class="color-setting-title setting-title">
+        {{ t('Arrow Color') }}
+      </div>
+      <div class="color-setting-section setting-section">
+        <button
+          v-for="lineColor in lineColors"
+          :key="lineColor.color"
+          class="color-button setting-option-button"
+          @click.stop="handleColorClick(lineColor.color)"
+          :class="{
+            'button-active':
+              lineColor.color === toolSetting.shapeOptions!.stroke,
+          }"
+        >
+          <img :src="lineColor.icon" />
+        </button>
+      </div>
+    </div>
+  </IconButton>
+</template>
+
+<script setup lang="ts">
+import { defineEmits, defineProps, ref, watch, reactive } from 'vue';
+import { useI18n } from '../../../../locales';
+import { DrawingTool, ToolSettings } from '../../type';
+import IconButton from '../../../common/base/IconButton.vue';
+import vClickOutside from '../../../../directives/vClickOutside';
+import '../whiteboard-tool.scss';
+
+import ArrowIcon from '../Icon/ArrowIcon.vue';
+import SizeSmall from '../Image/SizeSmall.svg';
+import SizeMid from '../Image/SizeMid.svg';
+import SizeBig from '../Image/SizeBig.svg';
+import SizeLarge from '../Image/SizeLarge.svg';
+import BlueIcon from '../Image/BlueIcon.svg';
+import PurpleIcon from '../Image/PurpleIcon.svg';
+import YellowIcon from '../Image/YellowIcon.svg';
+import OrangeIcon from '../Image/OrangeIcon.svg';
+import RedIcon from '../Image/RedIcon.svg';
+import GreenIcon from '../Image/GreenIcon.svg';
+import DeepBlueIcon from '../Image/DeepBlueIcon.svg';
+import BlackIcon from '../Image/BlackIcon.svg';
+import DarkGrayIcon from '../Image/DarkGrayIcon.svg';
+import GrayIcon from '../Image/GrayIcon.svg';
+import LightGrayIcon from '../Image/LightGrayIcon.svg';
+import WhiteIcon from '../Image/WhiteIcon.svg';
+import logger from '../../../../utils/common/logger';
+
+const { t } = useI18n();
+
+const lineSizes = [
+  { icon: SizeSmall, size: 2 },
+  { icon: SizeMid, size: 4 },
+  { icon: SizeBig, size: 6 },
+  { icon: SizeLarge, size: 8 },
+];
+
+const lineColors = [
+  { color: '#4791FF', icon: BlueIcon },
+  { color: '#5940D7', icon: PurpleIcon },
+  { color: '#F5C342', icon: YellowIcon },
+  { color: '#E05734', icon: OrangeIcon },
+  { color: '#DC3859', icon: RedIcon },
+  { color: '#1AD32C', icon: GreenIcon },
+  { color: '#104683', icon: DeepBlueIcon },
+  { color: '#22262E', icon: BlackIcon },
+  { color: '#86909A', icon: DarkGrayIcon },
+  { color: '#B5BBC3', icon: GrayIcon },
+  { color: '#DBDDE2', icon: LightGrayIcon },
+  { color: '#EAEEF3', icon: WhiteIcon },
+];
+const showSettings = ref(false);
+const props = defineProps({
+  activeTool: String,
+});
+
+function handleHideButtonSetting() {
+  if (props.activeTool === DrawingTool.Arrow) {
+    showSettings.value = false;
+  }
+}
+
+const toolSetting = reactive<ToolSettings>({
+  drawingTool: DrawingTool.Arrow,
+  shapeOptions: {
+    strokeWidth: 4,
+    stroke: '#22262E',
+  },
+});
+
+const emit = defineEmits<{
+  (e: 'click', toolSetting: ToolSettings): void;
+}>();
+
+watch(
+  () => props.activeTool,
+  () => {
+    showSettings.value = false;
+  }
+);
+
+const onClick = () => {
+  showSettings.value = !showSettings.value;
+  emit('click', toolSetting);
+  logger.debug('toolSetting', toolSetting);
+  logger.debug('emit', showSettings.value);
+  logger.debug('emit', showSettings.value);
+  logger.debug('emit', showSettings.value);
+  logger.debug('emit', showSettings.value);
+  logger.debug('emit', showSettings.value);
+};
+
+const handleSizeClick = (size: number) => {
+  if (size === toolSetting.shapeOptions?.strokeWidth) {
+    return;
+  }
+  toolSetting.shapeOptions!.strokeWidth = size;
+  emit('click', toolSetting);
+};
+
+const handleColorClick = (color: string) => {
+  if (toolSetting.shapeOptions!.stroke !== color) {
+    toolSetting.shapeOptions!.stroke = color;
+    emit('click', toolSetting);
+  }
+};
+</script>

package/src/TUIRoom/components/Whiteboard/ToolBox/ClearButton.vue

@@ -0,0 +1,18 @@
+<template>
+  <IconButton class="tool-button" @click-icon="onClick" :icon="ClearIcon" />
+</template>
+
+<script setup lang="ts">
+import { defineEmits } from 'vue';
+import { DrawingTool } from '../type';
+import IconButton from '../../common/base/IconButton.vue';
+import ClearIcon from './Icon/ClearIcon.vue';
+
+const emit = defineEmits(['click']);
+
+const onClick = () => {
+  emit('click', {
+    drawingTool: DrawingTool.Clear,
+  });
+};
+</script>

package/src/TUIRoom/components/Whiteboard/ToolBox/DownloadButton.vue

@@ -0,0 +1,17 @@
+<template>
+  <IconButton class="tool-button" @click-icon="onClick" :icon="DownloadIcon" />
+</template>
+
+<script setup lang="ts">
+import { defineEmits } from 'vue';
+import { DrawingTool } from '../type';
+import IconButton from '../../common/base/IconButton.vue';
+import DownloadIcon from './Icon/DownloadIcon.vue';
+const emit = defineEmits(['click']);
+
+const onClick = () => {
+  emit('click', {
+    drawingTool: DrawingTool.Download,
+  });
+};
+</script>

package/src/TUIRoom/components/Whiteboard/ToolBox/EraserButton.vue

@@ -0,0 +1,26 @@
+<template>
+  <IconButton class="tool-button" @click-icon="onClick">
+    <EraserIcon
+      :class="{ 'whiteboard-icon-active': activeTool === DrawingTool.Eraser }"
+    />
+  </IconButton>
+</template>
+
+<script setup lang="ts">
+import { defineEmits, defineProps } from 'vue';
+import { DrawingTool } from '../type';
+import IconButton from '../../common/base/IconButton.vue';
+import EraserIcon from './Icon/EraserIcon.vue';
+const props = defineProps({
+  activeTool: String,
+});
+const emit = defineEmits(['click']);
+const onClick = () => {
+  if (props.activeTool === DrawingTool.Eraser) {
+    return;
+  }
+  emit('click', {
+    drawingTool: DrawingTool.Eraser,
+  });
+};
+</script>

package/src/TUIRoom/components/Whiteboard/ToolBox/Icon/ArrowIcon.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 14 14"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M3.87484 1.16675H12.8332M12.8332 1.16675V10.1251M12.8332 1.16675L1.1665 12.8334"
+      stroke="currentColor"
+      stroke-width="1.66667"
+    />
+  </svg>
+</template>

package/src/TUIRoom/components/Whiteboard/ToolBox/Icon/ClearIcon.vue

@@ -0,0 +1,15 @@
+<template>
+  <svg
+    width="18"
+    height="20"
+    viewBox="0 0 18 20"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M5.25033 0.83252H12.7503V3.33252H17.3337V4.99919H15.6428L15.2262 19.1659H2.77448L2.35781 4.99919H0.666992V3.33252H5.25033V0.83252ZM6.91699 3.33252H11.0837V2.49919H6.91699V3.33252ZM4.02519 4.99919L4.39284 17.4992H13.6078L13.9755 4.99919H4.02519ZM9.83366 6.66585V15.8325H8.16699V6.66585H9.83366Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/TUIRoom/components/Whiteboard/ToolBox/Icon/DownloadIcon.vue

@@ -0,0 +1,17 @@
+<template>
+  <svg
+    width="18"
+    height="16"
+    viewBox="0 0 18 16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M9.83382 0.5V8.48817L13.1671 5.15482L14.3457 6.33333L9.00049 11.6785L3.65527 6.33333L4.83379 5.15482L8.16716 8.48817V0.5H9.83382Z"
+      fill="currentColor"
+    />
+    <path
+      d="M2.33366 13.8333V8.83333H0.666992V15.5H17.3337V8.83333H15.667V13.8333H2.33366Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/TUIRoom/components/Whiteboard/ToolBox/Icon/EraserIcon.vue

@@ -0,0 +1,15 @@
+<template>
+  <svg
+    width="20"
+    height="17"
+    viewBox="0 0 20 17"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M11.4578 14.4166L5.88893 7.54161L13.2986 1.95801L18.6585 9.07086L12.8559 13.4434L11.4578 14.4166ZM11.4578 14.4166L9.85831 15.6978L5.45685 15.6974L1.69336 10.7031L6.04101 7.42695M5.50176 15.6966H18.5683"
+      stroke="currentColor"
+      stroke-width="1.66667"
+    />
+  </svg>
+</template>

package/src/TUIRoom/components/Whiteboard/ToolBox/Icon/ImageIcon.vue

@@ -0,0 +1,19 @@
+<template>
+  <svg
+    width="20"
+    height="16"
+    viewBox="0 0 20 16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M7.08301 6.33333C7.77336 6.33333 8.33301 5.77369 8.33301 5.08333C8.33301 4.39298 7.77336 3.83333 7.08301 3.83333C6.39265 3.83333 5.83301 4.39298 5.83301 5.08333C5.83301 5.77369 6.39265 6.33333 7.08301 6.33333Z"
+      fill="currentColor"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M0.833008 0.5V15.5H19.1663V0.5H0.833008ZM17.4997 2.16667H2.49967V10.3783L5.3032 8.02339L8.0442 9.77763L13.6429 4.40284L17.4997 7.36482V2.16667ZM2.49967 13.8333V12.555L5.43689 10.0877L8.25144 11.889L13.7638 6.59716L17.4997 9.46629V13.8333H2.49967Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/TUIRoom/components/Whiteboard/ToolBox/Icon/LaserIcon.vue

@@ -0,0 +1,19 @@
+<template>
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M8.70147 10.0003C8.70147 10.7174 9.28278 11.2987 9.99986 11.2987C10.7169 11.2987 11.2983 10.7174 11.2983 10.0003C11.2983 9.28322 10.7169 8.7019 9.99986 8.7019C9.28278 8.7019 8.70147 9.28322 8.70147 10.0003Z"
+      fill="currentColor"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M9.99984 19.1666C4.93723 19.1666 0.833169 15.0625 0.833169 9.99992C0.83317 4.93731 4.93723 0.833251 9.99984 0.833252C15.0624 0.833252 19.1665 4.93731 19.1665 9.99992C19.1665 15.0625 15.0624 19.1666 9.99984 19.1666ZM9.1665 17.4541C5.69015 17.0699 2.9299 14.3096 2.54561 10.8333L4.99984 10.8333L4.99984 9.16659L2.54561 9.16658C2.9299 5.69026 5.69013 2.93001 9.16645 2.5457L9.1663 4.99971L10.833 4.99972L10.8331 2.54569C14.3095 2.92995 17.0698 5.69022 17.4541 9.16659L14.9999 9.16659L14.9999 10.8333L17.4541 10.8333C17.0698 14.3096 14.3095 17.0699 10.8332 17.4541L10.8332 14.9999L9.1665 14.9999L9.1665 17.4541Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/TUIRoom/components/Whiteboard/ToolBox/Icon/PencilIcon.vue

@@ -0,0 +1,23 @@
+<template>
+  <svg
+    width="19"
+    height="19"
+    viewBox="0 0 19 19"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M14.5791 4.48674L7.10505 17.4323L2.40326 18.4927L0.970703 13.8906L8.4448 0.945068L14.5791 4.48674ZM9.05484 3.22178L2.77894 14.092L3.53735 16.5284L6.02653 15.967L12.3024 5.09678L9.05484 3.22178Z"
+      fill="currentColor"
+    />
+    <path
+      d="M9.5978 17.5001L18.3329 17.5001V15.8334H10.5601L9.5978 17.5001Z"
+      fill="currentColor"
+    />
+    <path
+      d="M18.3331 13.7501L11.7633 13.7501L12.7256 12.0834H18.3331V13.7501Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/TUIRoom/components/Whiteboard/ToolBox/Icon/RedoIcon.vue

@@ -0,0 +1,15 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M6.33333 15.6668C3.11168 15.6668 0.5 13.0551 0.5 9.83346C0.5 6.61181 3.11168 4.00013 6.33333 4.00013H12.2382L10.1548 1.9168L11.3333 0.738281L15.4285 4.83346L11.3333 8.92863L10.1548 7.75013L12.2382 5.6668H6.33333C4.03215 5.6668 2.16667 7.5323 2.16667 9.83346C2.16667 12.1346 4.03215 14.0001 6.33333 14.0001H13.4167V15.6668H6.33333Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/TUIRoom/components/Whiteboard/ToolBox/Icon/RetractIcon.vue

@@ -0,0 +1,15 @@
+<template>
+  <svg
+    width="18"
+    height="16"
+    viewBox="0 0 18 16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M0.667114 2.17619H17.3338V0.509521H0.667114V2.17619ZM0.666992 8.84283H9.41699V7.17616H0.666992V8.84283ZM17.3337 15.5095H0.666992V13.8429H17.3337V15.5095ZM14.7578 4.67618H17.4095L14.0762 8.00949L17.4095 11.3428H14.7579L12.0874 8.6724L11.4245 8.00949L12.0874 7.34657L14.7578 4.67618Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/TUIRoom/components/Whiteboard/ToolBox/Icon/SaveIcon.vue

@@ -0,0 +1,17 @@
+<template>
+  <svg
+    width="18"
+    height="16"
+    viewBox="0 0 18 16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M9.83382 0.5V8.48817L13.1671 5.15482L14.3457 6.33333L9.00049 11.6785L3.65527 6.33333L4.83379 5.15482L8.16716 8.48817V0.5H9.83382Z"
+      fill="currentColor"
+    />
+    <path
+      d="M2.33366 13.8333V8.83333H0.666992V15.5H17.3337V8.83333H15.667V13.8333H2.33366Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/TUIRoom/components/Whiteboard/ToolBox/Icon/SelectIcon.vue

@@ -0,0 +1,15 @@
+<template>
+  <svg
+    width="17"
+    height="20"
+    viewBox="0 0 17 20"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M2.00008 20.0002L7.55029 12.9622L16.4338 11.6851L0.050293 0.000244141L2.00008 20.0002ZM6.65277 11.411L3.25705 15.717L2.06413 3.48069L12.0879 10.6297L6.65277 11.411Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/TUIRoom/components/Whiteboard/ToolBox/Icon/SeparatorLine.vue

@@ -0,0 +1,10 @@
+<template>
+  <svg
+    width="28"
+    height="2"
+    viewBox="0 0 28 2"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path opacity="0.5" d="M28 0.999999L0 0.999999" stroke="#C5CCDB" />
+  </svg>
+</template>

package/src/TUIRoom/components/Whiteboard/ToolBox/Icon/ShapeIcon.vue

@@ -0,0 +1,15 @@
+<template>
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M4.9965 4.16675C4.9965 4.62514 4.6249 4.99675 4.1665 4.99675C3.70811 4.99675 3.3365 4.62514 3.3365 4.16675C3.3365 3.70835 3.70811 3.33675 4.1665 3.33675C4.6249 3.33675 4.9965 3.70835 4.9965 4.16675ZM6.6665 4.16675C6.6665 5.54746 5.54722 6.66675 4.1665 6.66675C4.05354 6.66675 3.94233 6.65926 3.83333 6.64474V16.1667H13.3554C13.3408 16.0576 13.3333 15.9464 13.3333 15.8333C13.3333 14.4526 14.4526 13.3333 15.8333 13.3333C15.9464 13.3333 16.0576 13.3408 16.1667 13.3554V3.83333H6.64464C6.57686 3.3246 6.35608 2.86423 6.03009 2.5H16.1667H17.5V3.83333V13.9699C18.0115 14.4277 18.3333 15.0929 18.3333 15.8333C18.3333 17.214 17.214 18.3333 15.8333 18.3333C15.0929 18.3333 14.4277 18.0115 13.9699 17.5H3.83333H2.5V16.1667V6.03032C1.98845 5.57254 1.6665 4.90724 1.6665 4.16675C1.6665 2.78604 2.78579 1.66675 4.1665 1.66675C5.54722 1.66675 6.6665 2.78604 6.6665 4.16675ZM15.8333 16.6633C16.2917 16.6633 16.6633 16.2917 16.6633 15.8333C16.6633 15.3749 16.2917 15.0033 15.8333 15.0033C15.3749 15.0033 15.0033 15.3749 15.0033 15.8333C15.0033 16.2917 15.3749 16.6633 15.8333 16.6633Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/TUIRoom/components/Whiteboard/ToolBox/Icon/TextIcon.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg
+    width="15"
+    height="16"
+    viewBox="0 0 15 16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M0.333496 0.509521H14.5002V4.67619H12.8335V2.17619H8.25016V13.8429H11.5835V15.5095H3.25016V13.8429H6.5835V2.17619H2.00016V4.67619H0.333496V0.509521Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/TUIRoom/components/Whiteboard/ToolBox/Icon/TopLine.vue

@@ -0,0 +1,76 @@
+<template>
+  <svg
+    width="30"
+    height="6"
+    viewBox="0 0 30 6"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M1 1V7"
+      stroke="#C5CCDB"
+      style="
+        stroke: #c5ccdb;
+        stroke: color(display-p3 0.774 0.8012 0.86);
+        stroke-opacity: 1;
+      "
+      stroke-width="1.5"
+      stroke-linecap="square"
+    />
+    <path
+      d="M7 1V7"
+      stroke="#C5CCDB"
+      style="
+        stroke: #c5ccdb;
+        stroke: color(display-p3 0.774 0.8012 0.86);
+        stroke-opacity: 1;
+      "
+      stroke-width="1.5"
+      stroke-linecap="square"
+    />
+    <path
+      d="M13 1V7"
+      stroke="#C5CCDB"
+      style="
+        stroke: #c5ccdb;
+        stroke: color(display-p3 0.774 0.8012 0.86);
+        stroke-opacity: 1;
+      "
+      stroke-width="1.5"
+      stroke-linecap="square"
+    />
+    <path
+      d="M19 1V7"
+      stroke="#C5CCDB"
+      style="
+        stroke: #c5ccdb;
+        stroke: color(display-p3 0.774 0.8012 0.86);
+        stroke-opacity: 1;
+      "
+      stroke-width="1.5"
+      stroke-linecap="square"
+    />
+    <path
+      d="M25 1V7"
+      stroke="#C5CCDB"
+      style="
+        stroke: #c5ccdb;
+        stroke: color(display-p3 0.774 0.8012 0.86);
+        stroke-opacity: 1;
+      "
+      stroke-width="1.5"
+      stroke-linecap="square"
+    />
+    <path
+      d="M31 1V7"
+      stroke="#C5CCDB"
+      style="
+        stroke: #c5ccdb;
+        stroke: color(display-p3 0.774 0.8012 0.86);
+        stroke-opacity: 1;
+      "
+      stroke-width="1.5"
+      stroke-linecap="square"
+    />
+  </svg>
+</template>

package/src/TUIRoom/components/Whiteboard/ToolBox/Icon/UndoIcon.vue

@@ -0,0 +1,15 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M9.66646 15.6668C12.8881 15.6668 15.4998 13.0551 15.4998 9.83346C15.4998 6.61181 12.8881 4.00013 9.66646 4.00013H3.76164L5.84497 1.9168L4.66646 0.738281L0.571289 4.83346L4.66646 8.92863L5.84497 7.75013L3.76164 5.6668H9.66646C11.9676 5.6668 13.8331 7.5323 13.8331 9.83346C13.8331 12.1346 11.9676 14.0001 9.66646 14.0001H2.58313V15.6668H9.66646Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/TUIRoom/components/Whiteboard/ToolBox/Image/BlackIcon.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="7" cy="7" r="6.25" fill="#22262E" stroke="#1A1A1C" style="fill:#22262E;fill:color(display-p3 0.1333 0.1490 0.1804);fill-opacity:1;stroke:#1A1A1C;stroke:color(display-p3 0.1002 0.1029 0.1083);stroke-opacity:1;" stroke-width="0.5"/>
+</svg>

package/src/TUIRoom/components/Whiteboard/ToolBox/Image/BlueIcon.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="7" cy="7" r="6.25" fill="#4791FF" stroke="#2F7EF4" style="fill:#4791FF;fill:color(display-p3 0.2784 0.5686 1.0000);fill-opacity:1;stroke:#2F7EF4;stroke:color(display-p3 0.1837 0.4935 0.9583);stroke-opacity:1;" stroke-width="0.5"/>
+</svg>

package/src/TUIRoom/components/Whiteboard/ToolBox/Image/DarkGrayIcon.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="7" cy="7" r="6.25"  fill="#959A9F" stroke="#86909A" style="fill:#959A9F;fill:color(display-p3 0.5833 0.6028 0.6250);fill-opacity:1;stroke:#86909A;stroke:color(display-p3 0.5261 0.5651 0.6042);stroke-opacity:1;" stroke-width="0.5"/>
+</svg>

package/src/TUIRoom/components/Whiteboard/ToolBox/Image/DeepBlueIcon.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="7" cy="7" r="6.25" fill="#22548C" stroke="#104683" style="fill:#22548C;fill:color(display-p3 0.1329 0.3301 0.5500);fill-opacity:1;stroke:#104683;stroke:color(display-p3 0.0641 0.2761 0.5125);stroke-opacity:1;" stroke-width="0.5"/>
+</svg>

package/src/TUIRoom/components/Whiteboard/ToolBox/Image/GrayIcon.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="7" cy="7" r="6.25"  fill="#B5BBC4" stroke="#A9B1BC" style="fill:#B5BBC4;fill:color(display-p3 0.7092 0.7338 0.7667);fill-opacity:1;stroke:#A9B1BC;stroke:color(display-p3 0.6637 0.6954 0.7375);stroke-opacity:1;" stroke-width="0.5"/>
+</svg>

package/src/TUIRoom/components/Whiteboard/ToolBox/Image/GreenIcon.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="7" cy="7" r="6.25" fill="#3DE84E" stroke="#1AD32C" style="fill:#3DE84E;fill:color(display-p3 0.2384 0.9083 0.3054);fill-opacity:1;stroke:#1AD32C;stroke:color(display-p3 0.1002 0.8292 0.1731);stroke-opacity:1;" stroke-width="0.5"/>
+</svg>

package/src/TUIRoom/components/Whiteboard/ToolBox/Image/H1.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.33317 0C1.15636 0 0.98679 0.0702379 0.861766 0.195262C0.736742 0.320286 0.666504 0.489856 0.666504 0.666667V11.3333C0.666504 11.5101 0.736742 11.6797 0.861766 11.8047C0.98679 11.9298 1.15636 12 1.33317 12C1.50998 12 1.67955 11.9298 1.80458 11.8047C1.9296 11.6797 1.99984 11.5101 1.99984 11.3333V6.66667H7.99984V11.3333C7.99984 11.5101 8.07008 11.6797 8.1951 11.8047C8.32012 11.9298 8.48969 12 8.6665 12C8.84331 12 9.01288 11.9298 9.13791 11.8047C9.26293 11.6797 9.33317 11.5101 9.33317 11.3333V0.666667C9.33317 0.489856 9.26293 0.320286 9.13791 0.195262C9.01288 0.0702379 8.84331 0 8.6665 0C8.48969 0 8.32012 0.0702379 8.1951 0.195262C8.07008 0.320286 7.99984 0.489856 7.99984 0.666667V5.33333H1.99984V0.666667C1.99984 0.489856 1.9296 0.320286 1.80458 0.195262C1.67955 0.0702379 1.50998 0 1.33317 0ZM11.7358 6.60667C11.6952 6.62788 11.6497 6.63824 11.6039 6.63676C11.5581 6.63528 11.5134 6.622 11.4742 6.59821C11.435 6.57442 11.4025 6.54091 11.3801 6.50094C11.3576 6.46096 11.3458 6.41586 11.3458 6.37C11.3458 6.01467 11.3458 5.854 11.3485 5.31533C11.3486 5.26826 11.3612 5.22206 11.385 5.18143C11.4088 5.1408 11.4429 5.10718 11.4838 5.084L13.3298 4.03867C13.3703 4.0137 13.4169 4.00032 13.4645 4H14.4005C14.5565 4 14.6825 4.14 14.6825 4.312V11.3C14.6825 11.6953 14.3605 12.0153 13.9658 12.0153C13.872 12.0153 13.7791 11.9968 13.6924 11.9608C13.6057 11.9249 13.527 11.8721 13.4607 11.8057C13.3945 11.7392 13.342 11.6604 13.3062 11.5736C13.2705 11.4868 13.2522 11.3938 13.2525 11.3V5.81467L11.7358 6.608V6.60667Z" fill="black" style="fill:black;fill-opacity:1;"/>
+</svg>

package/src/TUIRoom/components/Whiteboard/ToolBox/Image/H2.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.33317 2C1.15636 2 0.98679 2.07024 0.861766 2.19526C0.736742 2.32029 0.666504 2.48986 0.666504 2.66667V13.3333C0.666504 13.5101 0.736742 13.6797 0.861766 13.8047C0.98679 13.9298 1.15636 14 1.33317 14C1.50998 14 1.67955 13.9298 1.80458 13.8047C1.9296 13.6797 1.99984 13.5101 1.99984 13.3333V8.66667H7.99984V13.3333C7.99984 13.5101 8.07008 13.6797 8.1951 13.8047C8.32012 13.9298 8.48969 14 8.6665 14C8.84332 14 9.01288 13.9298 9.13791 13.8047C9.26293 13.6797 9.33317 13.5101 9.33317 13.3333V2.66667C9.33317 2.48986 9.26293 2.32029 9.13791 2.19526C9.01288 2.07024 8.84332 2 8.6665 2C8.48969 2 8.32012 2.07024 8.1951 2.19526C8.07008 2.32029 7.99984 2.48986 7.99984 2.66667V7.33333H1.99984V2.66667C1.99984 2.48986 1.9296 2.32029 1.80458 2.19526C1.67955 2.07024 1.50998 2 1.33317 2ZM15.3285 13.248C15.3285 12.874 15.0252 12.5713 14.6505 12.5713H12.5698L14.8412 9.72333C15.162 9.32113 15.3342 8.82048 15.3285 8.306C15.3218 7.64467 15.0972 7.09533 14.6585 6.66333C14.2272 6.22933 13.6638 6.00733 12.9765 6C12.3558 6.00733 11.8298 6.22667 11.4058 6.65467C11.1592 6.912 10.7785 7.35067 10.7785 7.72267C10.7785 8.11667 11.0985 8.436 11.4918 8.436C11.8672 8.436 12.0045 8.20467 12.1538 7.952C12.1938 7.88467 12.2338 7.816 12.2805 7.74933C12.3168 7.69759 12.3583 7.64977 12.4045 7.60667C12.5792 7.43867 12.7938 7.356 13.0592 7.356C13.3572 7.36267 13.5818 7.456 13.7392 7.638C13.8952 7.82467 13.9725 8.042 13.9725 8.296C13.9725 8.39333 13.9598 8.498 13.9345 8.61C13.9012 8.71133 13.8305 8.83733 13.7245 8.97533L10.7898 12.646C10.7521 12.6934 10.7317 12.7521 10.7318 12.8127V13.494C10.7318 13.6413 10.9098 13.9273 11.1358 13.9273H14.6505C15.0252 13.9273 15.3285 13.6227 15.3285 13.248Z" fill="black" style="fill:black;fill-opacity:1;"/>
+</svg>

package/src/TUIRoom/components/Whiteboard/ToolBox/Image/H3.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.33317 2C1.15636 2 0.98679 2.07024 0.861766 2.19526C0.736742 2.32029 0.666504 2.48986 0.666504 2.66667V13.3333C0.666504 13.5101 0.736742 13.6797 0.861766 13.8047C0.98679 13.9298 1.15636 14 1.33317 14C1.50998 14 1.67955 13.9298 1.80458 13.8047C1.9296 13.6797 1.99984 13.5101 1.99984 13.3333V8.66667H7.99984V13.3333C7.99984 13.5101 8.07008 13.6797 8.1951 13.8047C8.32012 13.9298 8.48969 14 8.6665 14C8.84332 14 9.01288 13.9298 9.13791 13.8047C9.26293 13.6797 9.33317 13.5101 9.33317 13.3333V2.66667C9.33317 2.48986 9.26293 2.32029 9.13791 2.19526C9.01288 2.07024 8.84332 2 8.6665 2C8.48969 2 8.32012 2.07024 8.1951 2.19526C8.07008 2.32029 7.99984 2.48986 7.99984 2.66667V7.33333H1.99984V2.66667C1.99984 2.48986 1.9296 2.32029 1.80458 2.19526C1.67955 2.07024 1.50998 2 1.33317 2ZM15.3332 11.5307C15.3332 11.1907 15.2612 10.8653 15.1172 10.5567C14.9799 10.2818 14.7795 10.0433 14.5325 9.86067C14.7838 9.66267 14.9658 9.44067 15.0765 9.19333C15.1898 8.9 15.2445 8.60267 15.2445 8.29467C15.245 7.70396 15.0202 7.13531 14.6158 6.70467C14.1825 6.242 13.5985 6.00667 12.8732 6C12.5945 5.99981 12.3185 6.05459 12.061 6.1612C11.8034 6.26782 11.5695 6.42418 11.3725 6.62133C11.1398 6.84533 10.8072 7.20733 10.8072 7.544C10.8072 7.72081 10.8774 7.89038 11.0024 8.0154C11.1275 8.14043 11.297 8.21067 11.4738 8.21067C11.7952 8.21067 11.9852 7.976 12.1692 7.74933L12.2292 7.676C12.2672 7.62933 12.3098 7.588 12.3572 7.55267C12.5278 7.41933 12.7105 7.35533 12.9132 7.35533C13.2005 7.362 13.4325 7.45133 13.6125 7.62533C13.7905 7.80333 13.8832 8.032 13.8892 8.31867C13.8892 8.59667 13.8005 8.81867 13.6225 8.99067C13.3992 9.214 13.1118 9.24867 12.8145 9.24867C12.645 9.24867 12.4825 9.31599 12.3627 9.43583C12.2428 9.55566 12.1755 9.71819 12.1755 9.88767C12.1755 10.0571 12.2428 10.2197 12.3627 10.3395C12.4825 10.4593 12.645 10.5267 12.8145 10.5267H12.8732C13.1745 10.5253 13.4225 10.5247 13.6765 10.762C13.8698 10.9467 13.9712 11.2113 13.9778 11.5627C13.9712 11.9027 13.8712 12.1587 13.6772 12.3373C13.4798 12.5347 13.2438 12.6307 12.9598 12.6307C12.6932 12.6307 12.4852 12.5593 12.3305 12.42L12.3252 12.4147C12.277 12.3695 12.2297 12.3235 12.1832 12.2767C12.1165 12.2107 12.0645 12.1387 12.0138 12.07C11.8852 11.894 11.7698 11.7367 11.4738 11.7367C11.297 11.7367 11.1275 11.8069 11.0024 11.9319C10.8774 12.057 10.8072 12.2265 10.8072 12.4033C10.8072 12.786 11.1692 13.1967 11.4432 13.4253C11.8665 13.7787 12.3432 13.9853 12.8925 13.9853C13.5972 13.9787 14.1792 13.752 14.6318 13.3067C15.0918 12.8727 15.3252 12.2767 15.3332 11.5307Z" fill="black" style="fill:black;fill-opacity:1;"/>
+</svg>

package/src/TUIRoom/components/Whiteboard/ToolBox/Image/H4.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.33317 0C1.15636 0 0.98679 0.0702379 0.861766 0.195262C0.736742 0.320286 0.666504 0.489856 0.666504 0.666667V11.3333C0.666504 11.5101 0.736742 11.6797 0.861766 11.8047C0.98679 11.9298 1.15636 12 1.33317 12C1.50998 12 1.67955 11.9298 1.80458 11.8047C1.9296 11.6797 1.99984 11.5101 1.99984 11.3333V6.66667H7.99984V11.3333C7.99984 11.5101 8.07007 11.6797 8.1951 11.8047C8.32012 11.9298 8.48969 12 8.6665 12C8.84331 12 9.01288 11.9298 9.13791 11.8047C9.26293 11.6797 9.33317 11.5101 9.33317 11.3333V0.666667C9.33317 0.489856 9.26293 0.320286 9.13791 0.195262C9.01288 0.0702379 8.84331 0 8.6665 0C8.48969 0 8.32012 0.0702379 8.1951 0.195262C8.07007 0.320286 7.99984 0.489856 7.99984 0.666667V5.33333H1.99984V0.666667C1.99984 0.489856 1.9296 0.320286 1.80458 0.195262C1.67955 0.0702379 1.50998 0 1.33317 0ZM14.4538 4.79333C14.4538 4.35467 14.1298 4 13.6918 4C13.4238 4 13.1425 4.136 12.9965 4.36133L10.0445 8.90867C10.0258 8.93744 10.0158 8.97102 10.0158 9.00533V10.0853C10.0158 10.232 10.1358 10.352 10.2825 10.352H13.2185V11.2607C13.2185 11.602 13.5052 11.8787 13.8458 11.8787C13.9265 11.8785 14.0063 11.8623 14.0806 11.8311C14.155 11.7998 14.2224 11.7542 14.2789 11.6967C14.3355 11.6392 14.3801 11.571 14.4101 11.4962C14.4401 11.4214 14.455 11.3413 14.4538 11.2607V10.352H14.7205C14.8881 10.3501 15.0482 10.282 15.166 10.1627C15.2837 10.0433 15.3495 9.88231 15.3492 9.71467C15.349 9.63245 15.3325 9.55107 15.3008 9.47524C15.269 9.39941 15.2225 9.33063 15.164 9.27287C15.1055 9.2151 15.0361 9.16949 14.9599 9.13868C14.8836 9.10786 14.8021 9.09245 14.7198 9.09333H14.4538V4.79333ZM11.4338 9.09333L13.2185 6.30867V9.09333H11.4338Z" fill="black" style="fill:black;fill-opacity:1;"/>
+</svg>

package/src/TUIRoom/components/Whiteboard/ToolBox/Image/LightGrayIcon.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="7" cy="7" r="6.25"  fill="#E7E9ED" stroke="#DBDDE2" style="fill:#E7E9ED;fill:color(display-p3 0.9059 0.9137 0.9292);fill-opacity:1;stroke:#DBDDE2;stroke:color(display-p3 0.8579 0.8678 0.8875);stroke-opacity:1;" stroke-width="0.5"/>
+</svg>

package/src/TUIRoom/components/Whiteboard/ToolBox/Image/OrangeIcon.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="7" cy="7" r="6.25" fill="#FF643D" stroke="#E05734" style="fill:#FF643D;fill:color(display-p3 1.0000 0.3922 0.2392);fill-opacity:1;stroke:#E05734;stroke:color(display-p3 0.8792 0.3406 0.2051);stroke-opacity:1;" stroke-width="0.5"/>
+</svg>

package/src/TUIRoom/components/Whiteboard/ToolBox/Image/PurpleIcon.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="7" cy="7" r="6.25" fill="#6C54E8" stroke="#5940D7" style="fill:#6C54E8;fill:color(display-p3 0.4235 0.3294 0.9098);fill-opacity:1;stroke:#5940D7;stroke:color(display-p3 0.3480 0.2525 0.8417);stroke-opacity:1;" stroke-width="0.5"/>
+</svg>

package/src/TUIRoom/components/Whiteboard/ToolBox/Image/RedIcon.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="7" cy="7" r="6.25" fill="#EF3F63" stroke="#DC3859" style="fill:#EF3F63;fill:color(display-p3 0.9375 0.2461 0.3868);fill-opacity:1;stroke:#DC3859;stroke:color(display-p3 0.8625 0.2192 0.3501);stroke-opacity:1;" stroke-width="0.5"/>
+</svg>