@tencentcloud/roomkit-electron-vue3 2.6.7 → 2.7.0

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

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1.25" y="1.25" width="11.5" height="11.5" rx="5.75" stroke="#1D2029" style="stroke:#1D2029;stroke:color(display-p3 0.1137 0.1255 0.1608);stroke-opacity:1;" stroke-width="1.5"/>
+</svg>

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

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.34623 12.8789L12.3476 1.35693" stroke="#1D2029" style="stroke:#1D2029;stroke:color(display-p3 0.1137 0.1255 0.1608);stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

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

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1.25" y="1.25" width="11.5" height="11.5" stroke="#1D2029" style="stroke:#1D2029;stroke:color(display-p3 0.1137 0.1255 0.1608);stroke-opacity:1;" stroke-width="1.5"/>
+</svg>

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

@@ -0,0 +1,3 @@
+<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.67082 3.66459L7 2.32295L6.32918 3.66459L1.82918 12.6646L1.28647 13.75H2.5H11.5H12.7135L12.1708 12.6646L7.67082 3.66459Z" stroke="#1D2029" style="stroke:#1D2029;stroke:color(display-p3 0.1137 0.1255 0.1608);stroke-opacity:1;" stroke-width="1.5"/>
+</svg>

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

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="6" cy="6" r="6" fill="#1D2029" style="fill:#1D2029;fill:color(display-p3 0.1137 0.1255 0.1608);fill-opacity:1;"/>
+</svg>

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

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="8" cy="8" r="8" fill="#1D2029" style="fill:#1D2029;fill:color(display-p3 0.1137 0.1255 0.1608);fill-opacity:1;"/>
+</svg>

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

@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="4" cy="4" r="4" fill="#1D2029" style="fill:#1D2029;fill:color(display-p3 0.1137 0.1255 0.1608);fill-opacity:1;"/>
+</svg>

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

@@ -0,0 +1,3 @@
+<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="2" cy="2" r="2" fill="#1D2029" style="fill:#1D2029;fill:color(display-p3 0.1137 0.1255 0.1608);fill-opacity:1;"/>
+</svg>

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

@@ -0,0 +1,3 @@
+<svg width="18" height="2" viewBox="0 0 18 2" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 1.00006L17 1.00006" stroke="#1D2029" style="stroke:#1D2029;stroke:color(display-p3 0.1137 0.1255 0.1608);stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="3 3"/>
+</svg>

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

@@ -0,0 +1,3 @@
+<svg width="18" height="2" viewBox="0 0 18 2" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 1.00006L17 1.00006" stroke="#1D2029" style="stroke:#1D2029;stroke:color(display-p3 0.1137 0.1255 0.1608);stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

package/src/TUIRoom/components/Whiteboard/ToolBox/Image/WhiteIcon.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="white" stroke="#EAEEF3" style="fill:white;fill-opacity:1;stroke:#EAEEF3;stroke:color(display-p3 0.9184 0.9321 0.9542);stroke-opacity:1;" stroke-width="0.5"/>
+</svg>

package/src/TUIRoom/components/Whiteboard/ToolBox/Image/YellowIcon.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="#FFD260" stroke="#F5C342" style="fill:#FFD260;fill:color(display-p3 1.0000 0.8250 0.3750);fill-opacity:1;stroke:#F5C342;stroke:color(display-p3 0.9625 0.7639 0.2607);stroke-opacity:1;" stroke-width="0.5"/>
+</svg>

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

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

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

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

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

@@ -0,0 +1,157 @@
+<template>
+  <IconButton
+    class="tool-button"
+    @click-icon="onClick"
+    v-click-outside="handleHideButtonSetting"
+  >
+    <PencilIcon
+      :class="{ 'whiteboard-icon-active': activeTool === DrawingTool.Pencil }"
+    />
+    <div
+      v-if="showSettings && activeTool === DrawingTool.Pencil"
+      class="pen-tool-setting whiteboard-tool-setting"
+    >
+      <div class="size-setting-title setting-title">{{ t('Line 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('Line 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 { defineProps, defineEmits, ref, watch, reactive } from 'vue';
+import { useI18n } from '../../../../locales';
+import { ToolSettings, DrawingTool } from './../../type';
+import IconButton from '../../../common/base/IconButton.vue';
+import vClickOutside from '../../../../directives/vClickOutside';
+import '../whiteboard-tool.scss';
+
+import PencilIcon from '../Icon/PencilIcon.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';
+
+const { t } = useI18n();
+
+const lineSizes = [
+  { icon: SizeSmall, size: 1 },
+  { icon: SizeMid, size: 2 },
+  { icon: SizeBig, size: 5 },
+  { icon: SizeLarge, size: 10 },
+];
+
+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 },
+];
+
+function handleHideButtonSetting() {
+  if (props.activeTool === DrawingTool.Pencil) {
+    showSettings.value = false;
+  }
+}
+
+const showSettings = ref(false);
+const props = defineProps({
+  activeTool: String,
+  changeTool: String,
+});
+
+const toolSetting = reactive<ToolSettings>({
+  drawingTool: DrawingTool.Pencil,
+  shapeOptions: {
+    strokeWidth: 5,
+    stroke: '#22262E',
+  },
+});
+
+const emit = defineEmits<{
+  (e: 'click', toolSetting: ToolSettings): void;
+}>();
+
+watch(
+  () => props.activeTool,
+  () => {
+    showSettings.value = false;
+  }
+);
+
+watch(
+  () => props.changeTool,
+  () => {
+    if (props.changeTool === DrawingTool.Pencil) {
+      emit('click', toolSetting);
+    }
+  }
+);
+
+const onClick = () => {
+  showSettings.value = !showSettings.value;
+  emit('click', toolSetting);
+};
+
+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/RedoButton.vue

@@ -0,0 +1,25 @@
+<template>
+  <IconButton class="tool-button" @click-icon="onClick">
+    <RedoIcon :class="{ 'tool-disabled': isRedoDisabled }" />
+  </IconButton>
+</template>
+<script setup lang="ts">
+import { defineEmits, computed, defineProps } from 'vue';
+import { DrawingTool } from '../type';
+import IconButton from '../../common/base/IconButton.vue';
+import RedoIcon from './Icon/RedoIcon.vue';
+
+const props = defineProps({
+  step: Number,
+  historyListLength: Number,
+});
+const isRedoDisabled = computed(() => {
+  return (props.step as number) >= (props.historyListLength as number);
+});
+const emit = defineEmits(['click']);
+const onClick = () => {
+  emit('click', {
+    drawingTool: DrawingTool.Redo,
+  });
+};
+</script>

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

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

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

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

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

@@ -0,0 +1,218 @@
+<template>
+  <IconButton
+    class="tool-button"
+    @click-icon="onClick"
+    v-click-outside="handleHideButtonSetting"
+  >
+    <ShapeIcon :class="{ 'whiteboard-icon-active': activeTool === 'Shape' }" />
+    <div
+      v-if="showSettings && activeTool === 'Shape'"
+      class="shape-tool-setting whiteboard-tool-setting"
+    >
+      <div class="type-setting-title setting-title">{{ t('Shape Type') }}</div>
+      <div class="type-setting-section setting-section">
+        <button
+          v-for="shapeType in shapeTypes"
+          :key="shapeType.shape"
+          class="type-button setting-option-button"
+          @click.stop="handleTypeClick(shapeType.shape)"
+          :class="{
+            'button-active': shapeType.shape === toolSetting.drawingTool,
+          }"
+        >
+          <img :src="shapeType.icon" />
+        </button>
+      </div>
+      <div class="style-setting-title setting-title">
+        {{ t('Shape Style') }}
+      </div>
+      <div class="style-setting-section setting-section">
+        <button
+          v-for="shapeStyle in shapeStyles"
+          :key="shapeStyle.style"
+          class="style-button setting-option-button"
+          @click.stop="handleStyleClick(shapeStyle.style)"
+          :class="{
+            'button-active':
+              toolSetting.shapeOptions!.lineDash![1] === 5
+                ? shapeStyle.style === 'dashed'
+                : shapeStyle.style === 'solid',
+          }"
+        >
+          <img :src="shapeStyle.icon" />
+        </button>
+      </div>
+      <div class="size-setting-title setting-title">{{ t('Shape Size') }}</div>
+      <div class="size-setting-section setting-section">
+        <button
+          v-for="shapeSize in shapeSizes"
+          :key="shapeSize.size"
+          class="size-button setting-option-button"
+          @click.stop="handleSizeClick(shapeSize.size)"
+          :class="{
+            'button-active':
+              shapeSize.size === toolSetting.shapeOptions?.strokeWidth,
+          }"
+        >
+          <img :src="shapeSize.icon" />
+        </button>
+      </div>
+      <div class="color-setting-title setting-title">
+        {{ t('Shape Color') }}
+      </div>
+      <div class="color-setting-section setting-section">
+        <button
+          v-for="shapeColor in shapeColors"
+          :key="shapeColor.color"
+          class="color-button setting-option-button"
+          @click.stop="handleColorClick(shapeColor.color)"
+          :class="{
+            'button-active':
+              shapeColor.color === toolSetting.shapeOptions?.stroke,
+          }"
+        >
+          <img :src="shapeColor.icon" alt="Color Icon" />
+        </button>
+      </div>
+    </div>
+  </IconButton>
+</template>
+
+<script setup lang="ts">
+import { defineProps, defineEmits, ref, watch, reactive } from 'vue';
+import { ToolSettings, DrawingTool } from '../../type';
+import { useI18n } from '../../../../locales';
+import vClickOutside from '../../../../directives/vClickOutside';
+import IconButton from '../../../common/base/IconButton.vue';
+import '../whiteboard-tool.scss';
+
+import ShapeIcon from '../Icon/ShapeIcon.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 Rectangle from '../Image/ShapeRectangle.svg';
+import Circle from '../Image/ShapeCircle.svg';
+import Dashed from '../Image/StyleDashed.svg';
+import Line from '../Image/ShapeLine.svg';
+import Solid from '../Image/StyleSolid.svg';
+import Triangle from '../Image/ShapeTriangle.svg';
+
+const { t } = useI18n();
+
+const shapeTypes = [
+  { icon: Line, shape: DrawingTool.Line },
+  { icon: Circle, shape: DrawingTool.Circle },
+  { icon: Rectangle, shape: DrawingTool.Rectangle },
+  { icon: Triangle, shape: DrawingTool.Triangle },
+];
+
+const shapeStyles = [
+  { icon: Solid, style: 'solid' },
+  { icon: Dashed, style: 'dashed' },
+];
+
+const shapeSizes = [
+  { icon: SizeSmall, size: 1 },
+  { icon: SizeMid, size: 2 },
+  { icon: SizeBig, size: 5 },
+  { icon: SizeLarge, size: 10 },
+];
+
+const shapeColors = [
+  { 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 === 'Shape') {
+    showSettings.value = false;
+  }
+}
+
+const toolSetting = reactive<ToolSettings>({
+  drawingTool: DrawingTool.Rectangle,
+  shapeOptions: {
+    strokeWidth: 5,
+    stroke: '#22262E',
+    fill: 'transparent',
+    opacity: 1,
+    lineDash: [0, 0],
+  },
+});
+
+const emit = defineEmits<{
+  (e: 'click', toolSetting: ToolSettings): void;
+}>();
+
+watch(
+  () => props.activeTool,
+  () => {
+    showSettings.value = false;
+  }
+);
+
+const onClick = () => {
+  showSettings.value = !showSettings.value;
+  emit('click', toolSetting);
+};
+
+const handleTypeClick = (type: DrawingTool) => {
+  if (toolSetting.drawingTool === type) {
+    return;
+  }
+  toolSetting.drawingTool = type;
+  emit('click', toolSetting);
+};
+
+const handleStyleClick = (style: string) => {
+  if ('solid' === style) {
+    toolSetting.shapeOptions!.lineDash = [0, 0];
+    return;
+  }
+  toolSetting.shapeOptions!.lineDash = [5, 5];
+  emit('click', toolSetting);
+};
+
+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>