@tencentcloud/roomkit-electron-vue3 2.6.7 → 2.7.0

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

@@ -0,0 +1,147 @@
+<template>
+  <IconButton
+    class="tool-button"
+    v-bind="$attrs"
+    @click-icon="onClick"
+    v-click-outside="handleHideButtonSetting"
+  >
+    <TextIcon
+      :class="{ 'whiteboard-icon-active': activeTool === DrawingTool.Text }"
+    />
+    <div
+      v-if="showSettings && activeTool === 'Text'"
+      class="text-tool-setting whiteboard-tool-setting"
+    >
+      <div class="size-setting-title setting-title">{{ t('Text Size') }}</div>
+      <div class="size-setting-section setting-section">
+        <button
+          v-for="textSize in textSizes"
+          :key="textSize.size"
+          class="size-button setting-option-button"
+          @click.stop="handleSizeClick(textSize.size)"
+          :class="{
+            'button-active':
+              textSize.size === toolSetting.shapeOptions!.strokeWidth,
+          }"
+        >
+          <img :src="textSize.icon" />
+        </button>
+      </div>
+      <div class="color-setting-title setting-title">{{ t('Text Color') }}</div>
+      <div class="color-setting-section setting-section">
+        <button
+          v-for="textColor in textColors"
+          :key="textColor.color"
+          class="color-button setting-option-button"
+          @click.stop="handleColorClick(textColor.color)"
+          :class="{
+            'button-active':
+              textColor.color === toolSetting.shapeOptions!.stroke,
+          }"
+        >
+          <img :src="textColor.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 IconButton from '../../../common/base/IconButton.vue';
+import vClickOutside from '../../../../directives/vClickOutside';
+import '../whiteboard-tool.scss';
+
+import TextIcon from '../Icon/TextIcon.vue';
+import SizeIcon1 from '../Image/H1.svg';
+import SizeIcon2 from '../Image/H2.svg';
+import SizeIcon3 from '../Image/H3.svg';
+import SizeIcon4 from '../Image/H4.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 textSizes = [
+  { icon: SizeIcon1, size: 32 },
+  { icon: SizeIcon2, size: 24 },
+  { icon: SizeIcon3, size: 18.72 },
+  { icon: SizeIcon4, size: 16 },
+];
+
+const textColors = [
+  { 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.Text) {
+    showSettings.value = false;
+  }
+}
+const toolSetting = reactive<ToolSettings>({
+  drawingTool: DrawingTool.Text,
+  shapeOptions: {
+    strokeWidth: 18.72,
+    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);
+};
+
+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/UndoButton.vue

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

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

@@ -0,0 +1,289 @@
+<template>
+  <div class="whiteboard-tool-box">
+    <div class="tool-box-top">
+      <div class="tool-box-top-lines">
+        <topLines />
+      </div>
+    </div>
+    <div class="box" v-for="tool in filteredTools" :key="tool.id">
+      <component
+        :is="tool.component"
+        @click="setActiveButton"
+        :class="{ active: activeTool === tool.id }"
+        :active-tool="activeTool"
+        :step="props.step"
+        :history-list-length="props.historyListLength"
+        :change-tool="changeTool"
+      />
+      <div class="separator-box" v-if="tool.showSeparator === true">
+        <separator />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, defineEmits, defineProps, computed } from 'vue';
+import { getUrlParam } from '../../../utils/utils';
+import { ToolSettings } from '../type';
+
+import Select from './SelectButton.vue';
+import Laser from './LaserButton.vue';
+import Pen from './Pencil/index.vue';
+import Shape from './Shape/index.vue';
+import Eraser from './EraserButton.vue';
+import Arrow from './Arrow/index.vue';
+import Text from './Text/index.vue';
+import Image from './ImageButton.vue';
+import Redo from './RedoButton.vue';
+import Undo from './UndoButton.vue';
+import Clear from './ClearButton.vue';
+import Download from './DownloadButton.vue';
+import Retract from './RetractButton.vue';
+import TopLines from './Icon/TopLine.vue';
+import Separator from './Icon/SeparatorLine.vue';
+
+let isAnnotationWin = false;
+const annotationParam = getUrlParam('isAnnotationWin');
+if (annotationParam && annotationParam === 'true') {
+  isAnnotationWin = true;
+}
+
+const props = defineProps({
+  step: Number,
+  historyListLength: Number,
+  changeTool: String,
+});
+
+const tools = [
+  {
+    id: 'Select',
+    component: Select,
+    showSeparator: false,
+    showAnnotationWin: true,
+  },
+  {
+    id: 'Laser',
+    component: Laser,
+    showSeparator: true,
+    showAnnotationWin: true,
+  },
+  {
+    id: 'Pencil',
+    component: Pen,
+    showSeparator: false,
+    showAnnotationWin: true,
+  },
+  {
+    id: 'Shape',
+    component: Shape,
+    showSeparator: false,
+    showAnnotationWin: true,
+  },
+  {
+    id: 'Eraser',
+    component: Eraser,
+    showSeparator: false,
+    showAnnotationWin: true,
+  },
+  {
+    id: 'Arrow',
+    component: Arrow,
+    showSeparator: false,
+    showAnnotationWin: true,
+  },
+  {
+    id: 'Text',
+    component: Text,
+    showSeparator: true,
+    showAnnotationWin: true,
+  },
+  {
+    id: 'Image',
+    component: Image,
+    showSeparator: false,
+    showAnnotationWin: false,
+  },
+  {
+    id: 'Undo',
+    component: Undo,
+    showSeparator: false,
+    showAnnotationWin: true,
+  },
+  {
+    id: 'Redo',
+    component: Redo,
+    showSeparator: false,
+    showAnnotationWin: true,
+  },
+  {
+    id: 'Clear',
+    component: Clear,
+    showSeparator: false,
+    showAnnotationWin: true,
+  },
+  {
+    id: 'Download',
+    component: Download,
+    showSeparator: false,
+    showAnnotationWin: false,
+  },
+];
+
+const filteredTools = computed(() => {
+  const filtered = tools.filter(
+    tool => !isAnnotationWin || tool.showAnnotationWin
+  );
+  const newElement = {
+    id: 'Retract',
+    component: Retract,
+    showSeparator: false,
+    showAnnotationWin: true,
+  };
+  if (isAnnotationWin === true) {
+    return [...filtered, newElement];
+  }
+  return filtered;
+});
+const activeTool = ref<string>('Pencil');
+const emit = defineEmits<{
+  (e: 'updateSetting', toolSetting: ToolSettings): void;
+}>();
+
+function setActiveButton(toolSetting: ToolSettings): void {
+  if (
+    toolSetting.drawingTool === 'Redo' ||
+    toolSetting.drawingTool === 'Undo' ||
+    toolSetting.drawingTool === 'Download' ||
+    toolSetting.drawingTool === 'Image' ||
+    toolSetting.drawingTool === 'Clear' ||
+    toolSetting.drawingTool === 'Retract'
+  ) {
+    emit('updateSetting', toolSetting);
+    return;
+  }
+  if (
+    toolSetting.drawingTool === 'Line' ||
+    toolSetting.drawingTool === 'Rectangle' ||
+    toolSetting.drawingTool === 'Circle' ||
+    toolSetting.drawingTool === 'Triangle'
+  ) {
+    activeTool.value = 'Shape';
+  } else {
+    activeTool.value = toolSetting.drawingTool;
+  }
+  emit('updateSetting', toolSetting);
+}
+</script>
+
+<style lang="scss">
+.whiteboard-tool-box {
+  position: absolute;
+  left: 8px;
+  display: flex;
+  flex-direction: column;
+  width: 50px;
+  height: auto;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow:
+    0 8px 40px rgba(70, 98, 140, 0.12),
+    0 4px 12px rgba(70, 98, 140, 0.08);
+
+  .tool-box-top {
+    position: relative;
+    top: 0;
+    left: 0;
+    order: 0;
+    width: 50px;
+    height: 20px;
+    background: #f2f5fc;
+  }
+
+  .tool-box-top-lines {
+    position: absolute;
+    top: 7px;
+    left: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 6px;
+  }
+
+  .tool-box-top-lines img {
+    width: 30px;
+    height: 6px;
+  }
+
+  .box {
+    position: relative;
+    top: 5px;
+    left: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    order: 0;
+    width: 40px;
+    height: 40px;
+    margin-top: 2px;
+
+    &:last-child {
+      margin-bottom: 8px;
+    }
+  }
+
+  .tool-button {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    background-color: #fff;
+    border: none;
+    transition:
+      background-color 0.3s ease,
+      width 0.3s ease,
+      height 0.3s ease,
+      border-radius 0.3s ease;
+  }
+
+  .tool-button:active,
+  .active {
+    width: 25px;
+    height: 25px;
+    background-color: #1c66e5;
+    border-radius: 4px;
+  }
+
+  .tool-disabled {
+    filter: brightness(70%) invert(0.7);
+  }
+
+  .separator-box {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    order: 0;
+    width: 40px;
+    height: 8px;
+    margin-top: 40px;
+  }
+
+  .separator-box img {
+    width: 28px;
+    height: 2px;
+  }
+
+  .whiteboard-icon-active {
+    filter: brightness(0) invert(1);
+  }
+
+  .icon-button-container .icon-content-vertical {
+    flex-direction: row;
+  }
+}
+</style>

package/src/TUIRoom/components/Whiteboard/ToolBox/whiteboard-tool.scss

@@ -0,0 +1,52 @@
+.whiteboard-tool-setting {
+  position: absolute;
+  top: 5px;
+  left: 50px;
+  width: 148px;
+  padding: 8px 12px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow:
+    0 5px 20px rgba(21, 29, 52, 0.1),
+    0 0 6px rgba(21, 29, 52, 0.1);
+
+  .setting-title {
+    height: 16px;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 16px;
+    color: #8f93a1;
+  }
+
+  .setting-section {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 6px 0;
+  }
+
+  .setting-option-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    background-color: transparent;
+    border: 2px solid #fff;
+    transition: background-color 0.3s ease;
+
+    img {
+      object-fit: contain;
+    }
+  }
+
+  .button-active {
+    background: rgba(61, 126, 253, 0.1);
+    border: 2px solid #3d7efd;
+    border-color: #3d7efd;
+    border-radius: 4px;
+  }
+}

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

@@ -10,6 +10,8 @@ fabric.Arrow = fabric.util.createClass(fabric.Line, {
     }
     options = options || {};
     this.callSuper('initialize', points, options);
+    this.arrowWidth = 7;
+    this.arrowHeight = 7;
   },
   _render(ctx: any) {
     this.callSuper('_render', ctx);
@@ -21,9 +23,9 @@ fabric.Arrow = fabric.util.createClass(fabric.Line, {
     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.moveTo(this.arrowWidth, 0);
+    ctx.lineTo(-this.arrowWidth, this.arrowHeight);
+    ctx.lineTo(-this.arrowWidth, -this.arrowHeight);
     ctx.closePath();
     ctx.fillStyle = this.stroke;
     ctx.fill();
@@ -33,7 +35,10 @@ fabric.Arrow = fabric.util.createClass(fabric.Line, {
 
 fabric.Arrow.fromObject = (options: any, callback: any) => {
   const { x1, x2, y1, y2 } = options;
-  return callback(new fabric.Arrow([x1, y1, x2, y2], options));
+  const arrow = new fabric.Arrow([x1, y1, x2, y2], {
+    ...options,
+  });
+  callback(arrow);
 };
 
 export default fabric.Arrow;

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

@@ -0,0 +1,115 @@
+import { inject } from 'vue';
+import { ipcRenderer } from 'electron';
+import FabricCanvas from './index';
+import eventBus from '../../../hooks/useMitt';
+import EventEmitter from './../emitter';
+import { IEvent } from 'fabric/fabric-impl';
+
+interface HistoryManagerEvent {
+  'change-step': IEvent;
+  'change-history': IEvent;
+  [key: string | symbol]: IEvent | any | undefined;
+}
+
+class HistoryManager extends EventEmitter<HistoryManagerEvent> {
+  private canvas: FabricCanvas | null = inject('canvas')!;
+  private step = 0;
+  private historyList: any[] = [];
+
+  constructor(canvas: FabricCanvas) {
+    super();
+    this.canvas = canvas;
+    this.initEvent();
+    this.setupIpcListeners();
+  }
+
+  private renderCanvas(data: any): void {
+    if (!this.canvas) return;
+    this.canvas.loadFromJSON(data, () => {
+      this.canvas?.renderAll();
+    });
+  }
+
+  public undo(): void {
+    eventBus.emit('exitTextEditing');
+    if (!this.canvas || this.step === 0) return;
+
+    this.step = this.step - 1;
+    this.emit('change-step', this.step);
+    this.step === 0
+      ? this.canvas.clearCanvas()
+      : this.renderCanvas(this.historyList[this.step - 1]);
+  }
+
+  public redo(): void {
+    if (!this.canvas || this.step >= this.historyList.length) return;
+
+    const canvasState = this.historyList[this.step];
+    this.step = this.step + 1;
+    this.emit('change-step', this.step);
+    this.renderCanvas(canvasState);
+  }
+
+  private addToUndoStack(): void {
+    if (!this.canvas) return;
+
+    const data = this.canvas.toJSON();
+    if (this.historyList.length !== this.step) {
+      this.historyList = this.historyList.slice(0, this.step);
+    }
+    this.historyList.push(data);
+    this.emit('change-history', this.historyList.length);
+    this.step = this.historyList.length;
+    this.emit('change-step', this.step);
+  }
+
+  public clearHistoryList(): void {
+    this.historyList = [];
+    this.step = 0;
+  }
+
+  public isCanvasEmpty() {
+    return this.canvas?.getObjects().length === 0;
+  }
+
+  public clear(): void {
+    if (this.isCanvasEmpty() === true) {
+      return;
+    }
+    this.canvas?.clearCanvas();
+    if (this.historyList.length > 0) {
+      this.addToUndoStack();
+    }
+  }
+
+  private initEvent(): void {
+    if (this.canvas) {
+      this.canvas.on('push-canvas-to-stack', this.addToUndoUpdate.bind(this));
+    }
+  }
+
+  private setupIpcListeners(): void {
+    ipcRenderer.on(
+      'whiteboard:clear',
+      (this.clearHistoryList = this.clearHistoryList.bind(this))
+    );
+    ipcRenderer.on(
+      'annotation:clear',
+      (this.clearHistoryList = this.clearHistoryList.bind(this))
+    );
+  }
+
+  private addToUndoUpdate(): void {
+    this.addToUndoStack();
+  }
+
+  public destroy(): void {
+    if (this.canvas) {
+      this.canvas.off('push-canvas-to-stack', this.addToUndoUpdate);
+    }
+    ipcRenderer.removeAllListeners('whiteboard:clear');
+    ipcRenderer.removeAllListeners('annotation:clear');
+  }
+}
+
+export default HistoryManager;