@tencentcloud/roomkit-electron-vue3/es/components/Whiteboard/ToolBox/index.vue.mjs

<h1 align="center"> TUIRoomKit</h1> Conference (TUIRoomKit) is a product suitable for multi-person audio and video conversation scenarios such as business meetings, webinars, and online education. By integrating this product, you can add room management,

import { defineComponent, computed, ref, createElementBlock, openBlock, createElementVNode, createVNode, Fragment, renderList, createBlock, createCommentVNode, resolveDynamicComponent, normalizeClass } from "vue";
import { getUrlParam } from "../../../utils/utils.mjs";
import _sfc_main$1 from "./SelectButton.vue.mjs";
import _sfc_main$2 from "./LaserButton.vue.mjs";
import _sfc_main$3 from "./Pencil/index.vue.mjs";
import _sfc_main$4 from "./Shape/index.vue.mjs";
import _sfc_main$5 from "./EraserButton.vue.mjs";
import _sfc_main$6 from "./Arrow/index.vue.mjs";
import _sfc_main$7 from "./Text/index.vue.mjs";
import _sfc_main$8 from "./ImageButton.vue.mjs";
import _sfc_main$a from "./RedoButton.vue.mjs";
import _sfc_main$9 from "./UndoButton.vue.mjs";
import _sfc_main$b from "./ClearButton.vue.mjs";
import _sfc_main$c from "./DownloadButton.vue.mjs";
import _sfc_main$d from "./RetractButton.vue.mjs";
import TopLines from "./Icon/TopLine.vue.mjs";
import Separator from "./Icon/SeparatorLine.vue.mjs";
const _hoisted_1 = { class: "whiteboard-tool-box" };
const _hoisted_2 = { class: "tool-box-top" };
const _hoisted_3 = { class: "tool-box-top-lines" };
const _hoisted_4 = {
  key: 0,
  class: "separator-box"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "index",
  props: {
    step: Number,
    historyListLength: Number,
    changeTool: String
  },
  emits: ["updateSetting"],
  setup(__props, { emit: __emit }) {
    let isAnnotationWin = false;
    const annotationParam = getUrlParam("isAnnotationWin");
    if (annotationParam && annotationParam === "true") {
      isAnnotationWin = true;
    }
    const props = __props;
    const tools = [
      {
        id: "Select",
        component: _sfc_main$1,
        showSeparator: false,
        showAnnotationWin: true
      },
      {
        id: "Laser",
        component: _sfc_main$2,
        showSeparator: true,
        showAnnotationWin: true
      },
      {
        id: "Pencil",
        component: _sfc_main$3,
        showSeparator: false,
        showAnnotationWin: true
      },
      {
        id: "Shape",
        component: _sfc_main$4,
        showSeparator: false,
        showAnnotationWin: true
      },
      {
        id: "Eraser",
        component: _sfc_main$5,
        showSeparator: false,
        showAnnotationWin: true
      },
      {
        id: "Arrow",
        component: _sfc_main$6,
        showSeparator: false,
        showAnnotationWin: true
      },
      {
        id: "Text",
        component: _sfc_main$7,
        showSeparator: true,
        showAnnotationWin: true
      },
      {
        id: "Image",
        component: _sfc_main$8,
        showSeparator: false,
        showAnnotationWin: false
      },
      {
        id: "Undo",
        component: _sfc_main$9,
        showSeparator: false,
        showAnnotationWin: true
      },
      {
        id: "Redo",
        component: _sfc_main$a,
        showSeparator: false,
        showAnnotationWin: true
      },
      {
        id: "Clear",
        component: _sfc_main$b,
        showSeparator: false,
        showAnnotationWin: true
      },
      {
        id: "Download",
        component: _sfc_main$c,
        showSeparator: false,
        showAnnotationWin: false
      }
    ];
    const filteredTools = computed(() => {
      const filtered = tools.filter(
        (tool) => !isAnnotationWin || tool.showAnnotationWin
      );
      const newElement = {
        id: "Retract",
        component: _sfc_main$d,
        showSeparator: false,
        showAnnotationWin: true
      };
      if (isAnnotationWin === true) {
        return [...filtered, newElement];
      }
      return filtered;
    });
    const activeTool = ref("Pencil");
    const emit = __emit;
    function setActiveButton(toolSetting) {
      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);
    }
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1, [
        createElementVNode("div", _hoisted_2, [
          createElementVNode("div", _hoisted_3, [
            createVNode(TopLines)
          ])
        ]),
        (openBlock(true), createElementBlock(Fragment, null, renderList(filteredTools.value, (tool) => {
          return openBlock(), createElementBlock("div", {
            class: "box",
            key: tool.id
          }, [
            (openBlock(), createBlock(resolveDynamicComponent(tool.component), {
              onClick: setActiveButton,
              class: normalizeClass({ active: activeTool.value === tool.id }),
              "active-tool": activeTool.value,
              step: props.step,
              "history-list-length": props.historyListLength,
              "change-tool": __props.changeTool
            }, null, 8, ["class", "active-tool", "step", "history-list-length", "change-tool"])),
            tool.showSeparator === true ? (openBlock(), createElementBlock("div", _hoisted_4, [
              createVNode(Separator)
            ])) : createCommentVNode("", true)
          ]);
        }), 128))
      ]);
    };
  }
});
export {
  _sfc_main as default
};