@tencentcloud/roomkit-electron-vue3
Version:
<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,
175 lines (174 loc) • 6.81 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
const utils = require("../../../utils/utils.js");
const SelectButton_vue_vue_type_script_setup_true_lang = require("./SelectButton.vue.js");
const LaserButton_vue_vue_type_script_setup_true_lang = require("./LaserButton.vue.js");
const index_vue_vue_type_script_setup_true_lang = require("./Pencil/index.vue.js");
const index_vue_vue_type_script_setup_true_lang$1 = require("./Shape/index.vue.js");
const EraserButton_vue_vue_type_script_setup_true_lang = require("./EraserButton.vue.js");
const index_vue_vue_type_script_setup_true_lang$2 = require("./Arrow/index.vue.js");
const index_vue_vue_type_script_setup_true_lang$3 = require("./Text/index.vue.js");
const ImageButton_vue_vue_type_script_setup_true_lang = require("./ImageButton.vue.js");
const RedoButton_vue_vue_type_script_setup_true_lang = require("./RedoButton.vue.js");
const UndoButton_vue_vue_type_script_setup_true_lang = require("./UndoButton.vue.js");
const ClearButton_vue_vue_type_script_setup_true_lang = require("./ClearButton.vue.js");
const DownloadButton_vue_vue_type_script_setup_true_lang = require("./DownloadButton.vue.js");
const RetractButton_vue_vue_type_script_setup_true_lang = require("./RetractButton.vue.js");
const TopLine = require("./Icon/TopLine.vue.js");
const SeparatorLine = require("./Icon/SeparatorLine.vue.js");
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__ */ Vue.defineComponent({
__name: "index",
props: {
step: Number,
historyListLength: Number,
changeTool: String
},
emits: ["updateSetting"],
setup(__props, { emit: __emit }) {
let isAnnotationWin = false;
const annotationParam = utils.getUrlParam("isAnnotationWin");
if (annotationParam && annotationParam === "true") {
isAnnotationWin = true;
}
const props = __props;
const tools = [
{
id: "Select",
component: SelectButton_vue_vue_type_script_setup_true_lang.default,
showSeparator: false,
showAnnotationWin: true
},
{
id: "Laser",
component: LaserButton_vue_vue_type_script_setup_true_lang.default,
showSeparator: true,
showAnnotationWin: true
},
{
id: "Pencil",
component: index_vue_vue_type_script_setup_true_lang.default,
showSeparator: false,
showAnnotationWin: true
},
{
id: "Shape",
component: index_vue_vue_type_script_setup_true_lang$1.default,
showSeparator: false,
showAnnotationWin: true
},
{
id: "Eraser",
component: EraserButton_vue_vue_type_script_setup_true_lang.default,
showSeparator: false,
showAnnotationWin: true
},
{
id: "Arrow",
component: index_vue_vue_type_script_setup_true_lang$2.default,
showSeparator: false,
showAnnotationWin: true
},
{
id: "Text",
component: index_vue_vue_type_script_setup_true_lang$3.default,
showSeparator: true,
showAnnotationWin: true
},
{
id: "Image",
component: ImageButton_vue_vue_type_script_setup_true_lang.default,
showSeparator: false,
showAnnotationWin: false
},
{
id: "Undo",
component: UndoButton_vue_vue_type_script_setup_true_lang.default,
showSeparator: false,
showAnnotationWin: true
},
{
id: "Redo",
component: RedoButton_vue_vue_type_script_setup_true_lang.default,
showSeparator: false,
showAnnotationWin: true
},
{
id: "Clear",
component: ClearButton_vue_vue_type_script_setup_true_lang.default,
showSeparator: false,
showAnnotationWin: true
},
{
id: "Download",
component: DownloadButton_vue_vue_type_script_setup_true_lang.default,
showSeparator: false,
showAnnotationWin: false
}
];
const filteredTools = Vue.computed(() => {
const filtered = tools.filter(
(tool) => !isAnnotationWin || tool.showAnnotationWin
);
const newElement = {
id: "Retract",
component: RetractButton_vue_vue_type_script_setup_true_lang.default,
showSeparator: false,
showAnnotationWin: true
};
if (isAnnotationWin === true) {
return [...filtered, newElement];
}
return filtered;
});
const activeTool = Vue.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 Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
Vue.createElementVNode("div", _hoisted_2, [
Vue.createElementVNode("div", _hoisted_3, [
Vue.createVNode(TopLine.default)
])
]),
(Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(filteredTools.value, (tool) => {
return Vue.openBlock(), Vue.createElementBlock("div", {
class: "box",
key: tool.id
}, [
(Vue.openBlock(), Vue.createBlock(Vue.resolveDynamicComponent(tool.component), {
onClick: setActiveButton,
class: Vue.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 ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_4, [
Vue.createVNode(SeparatorLine.default)
])) : Vue.createCommentVNode("", true)
]);
}), 128))
]);
};
}
});
exports.default = _sfc_main;