@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,
234 lines (233 loc) • 10.4 kB
JavaScript
"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
const type = require("../../type.js");
const index = require("../../../../locales/index.js");
const vClickOutside = require("../../../../directives/vClickOutside.js");
const IconButton = require("../../../common/base/IconButton.vue.js");
;/* empty css */
const ShapeIcon = require("../Icon/ShapeIcon.vue.js");
const SizeSmall = require("../Image/SizeSmall.svg.js");
const SizeMid = require("../Image/SizeMid.svg.js");
const SizeBig = require("../Image/SizeBig.svg.js");
const SizeLarge = require("../Image/SizeLarge.svg.js");
const BlueIcon = require("../Image/BlueIcon.svg.js");
const PurpleIcon = require("../Image/PurpleIcon.svg.js");
const YellowIcon = require("../Image/YellowIcon.svg.js");
const OrangeIcon = require("../Image/OrangeIcon.svg.js");
const RedIcon = require("../Image/RedIcon.svg.js");
const GreenIcon = require("../Image/GreenIcon.svg.js");
const DeepBlueIcon = require("../Image/DeepBlueIcon.svg.js");
const BlackIcon = require("../Image/BlackIcon.svg.js");
const DarkGrayIcon = require("../Image/DarkGrayIcon.svg.js");
const GrayIcon = require("../Image/GrayIcon.svg.js");
const LightGrayIcon = require("../Image/LightGrayIcon.svg.js");
const WhiteIcon = require("../Image/WhiteIcon.svg.js");
const ShapeRectangle = require("../Image/ShapeRectangle.svg.js");
const ShapeCircle = require("../Image/ShapeCircle.svg.js");
const StyleDashed = require("../Image/StyleDashed.svg.js");
const ShapeLine = require("../Image/ShapeLine.svg.js");
const StyleSolid = require("../Image/StyleSolid.svg.js");
const ShapeTriangle = require("../Image/ShapeTriangle.svg.js");
const _hoisted_1 = {
key: 0,
class: "shape-tool-setting whiteboard-tool-setting"
};
const _hoisted_2 = { class: "type-setting-title setting-title" };
const _hoisted_3 = { class: "type-setting-section setting-section" };
const _hoisted_4 = ["onClick"];
const _hoisted_5 = ["src"];
const _hoisted_6 = { class: "style-setting-title setting-title" };
const _hoisted_7 = { class: "style-setting-section setting-section" };
const _hoisted_8 = ["onClick"];
const _hoisted_9 = ["src"];
const _hoisted_10 = { class: "size-setting-title setting-title" };
const _hoisted_11 = { class: "size-setting-section setting-section" };
const _hoisted_12 = ["onClick"];
const _hoisted_13 = ["src"];
const _hoisted_14 = { class: "color-setting-title setting-title" };
const _hoisted_15 = { class: "color-setting-section setting-section" };
const _hoisted_16 = ["onClick"];
const _hoisted_17 = ["src"];
const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
__name: "index",
props: {
activeTool: String
},
emits: ["click"],
setup(__props, { emit: __emit }) {
const { t } = index.useI18n();
const shapeTypes = [
{ icon: ShapeLine.default, shape: type.DrawingTool.Line },
{ icon: ShapeCircle.default, shape: type.DrawingTool.Circle },
{ icon: ShapeRectangle.default, shape: type.DrawingTool.Rectangle },
{ icon: ShapeTriangle.default, shape: type.DrawingTool.Triangle }
];
const shapeStyles = [
{ icon: StyleSolid.default, style: "solid" },
{ icon: StyleDashed.default, style: "dashed" }
];
const shapeSizes = [
{ icon: SizeSmall.default, size: 1 },
{ icon: SizeMid.default, size: 2 },
{ icon: SizeBig.default, size: 5 },
{ icon: SizeLarge.default, size: 10 }
];
const shapeColors = [
{ color: "#4791FF", icon: BlueIcon.default },
{ color: "#5940D7", icon: PurpleIcon.default },
{ color: "#F5C342", icon: YellowIcon.default },
{ color: "#E05734", icon: OrangeIcon.default },
{ color: "#DC3859", icon: RedIcon.default },
{ color: "#1AD32C", icon: GreenIcon.default },
{ color: "#104683", icon: DeepBlueIcon.default },
{ color: "#22262E", icon: BlackIcon.default },
{ color: "#86909A", icon: DarkGrayIcon.default },
{ color: "#B5BBC3", icon: GrayIcon.default },
{ color: "#DBDDE2", icon: LightGrayIcon.default },
{ color: "#EAEEF3", icon: WhiteIcon.default }
];
const showSettings = Vue.ref(false);
const props = __props;
function handleHideButtonSetting() {
if (props.activeTool === "Shape") {
showSettings.value = false;
}
}
const toolSetting = Vue.reactive({
drawingTool: type.DrawingTool.Rectangle,
shapeOptions: {
strokeWidth: 5,
stroke: "#22262E",
fill: "transparent",
opacity: 1,
lineDash: [0, 0]
}
});
const emit = __emit;
Vue.watch(
() => props.activeTool,
() => {
showSettings.value = false;
}
);
const onClick = () => {
showSettings.value = !showSettings.value;
emit("click", toolSetting);
};
const handleTypeClick = (type2) => {
if (toolSetting.drawingTool === type2) {
return;
}
toolSetting.drawingTool = type2;
emit("click", toolSetting);
};
const handleStyleClick = (style) => {
if ("solid" === style) {
toolSetting.shapeOptions.lineDash = [0, 0];
return;
}
toolSetting.shapeOptions.lineDash = [5, 5];
emit("click", toolSetting);
};
const handleSizeClick = (size) => {
var _a;
if (size === ((_a = toolSetting.shapeOptions) == null ? void 0 : _a.strokeWidth)) {
return;
}
toolSetting.shapeOptions.strokeWidth = size;
emit("click", toolSetting);
};
const handleColorClick = (color) => {
if (toolSetting.shapeOptions.stroke !== color) {
toolSetting.shapeOptions.stroke = color;
emit("click", toolSetting);
}
};
return (_ctx, _cache) => {
return Vue.withDirectives((Vue.openBlock(), Vue.createBlock(IconButton.default, {
class: "tool-button",
onClickIcon: onClick
}, {
default: Vue.withCtx(() => [
Vue.createVNode(ShapeIcon.default, {
class: Vue.normalizeClass({ "whiteboard-icon-active": __props.activeTool === "Shape" })
}, null, 8, ["class"]),
showSettings.value && __props.activeTool === "Shape" ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
Vue.createElementVNode("div", _hoisted_2, Vue.toDisplayString(Vue.unref(t)("Shape Type")), 1),
Vue.createElementVNode("div", _hoisted_3, [
(Vue.openBlock(), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(shapeTypes, (shapeType) => {
return Vue.createElementVNode("button", {
key: shapeType.shape,
class: Vue.normalizeClass(["type-button setting-option-button", {
"button-active": shapeType.shape === toolSetting.drawingTool
}]),
onClick: Vue.withModifiers(($event) => handleTypeClick(shapeType.shape), ["stop"])
}, [
Vue.createElementVNode("img", {
src: shapeType.icon
}, null, 8, _hoisted_5)
], 10, _hoisted_4);
}), 64))
]),
Vue.createElementVNode("div", _hoisted_6, Vue.toDisplayString(Vue.unref(t)("Shape Style")), 1),
Vue.createElementVNode("div", _hoisted_7, [
(Vue.openBlock(), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(shapeStyles, (shapeStyle) => {
return Vue.createElementVNode("button", {
key: shapeStyle.style,
class: Vue.normalizeClass(["style-button setting-option-button", {
"button-active": toolSetting.shapeOptions.lineDash[1] === 5 ? shapeStyle.style === "dashed" : shapeStyle.style === "solid"
}]),
onClick: Vue.withModifiers(($event) => handleStyleClick(shapeStyle.style), ["stop"])
}, [
Vue.createElementVNode("img", {
src: shapeStyle.icon
}, null, 8, _hoisted_9)
], 10, _hoisted_8);
}), 64))
]),
Vue.createElementVNode("div", _hoisted_10, Vue.toDisplayString(Vue.unref(t)("Shape Size")), 1),
Vue.createElementVNode("div", _hoisted_11, [
(Vue.openBlock(), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(shapeSizes, (shapeSize) => {
var _a;
return Vue.createElementVNode("button", {
key: shapeSize.size,
class: Vue.normalizeClass(["size-button setting-option-button", {
"button-active": shapeSize.size === ((_a = toolSetting.shapeOptions) == null ? void 0 : _a.strokeWidth)
}]),
onClick: Vue.withModifiers(($event) => handleSizeClick(shapeSize.size), ["stop"])
}, [
Vue.createElementVNode("img", {
src: shapeSize.icon
}, null, 8, _hoisted_13)
], 10, _hoisted_12);
}), 64))
]),
Vue.createElementVNode("div", _hoisted_14, Vue.toDisplayString(Vue.unref(t)("Shape Color")), 1),
Vue.createElementVNode("div", _hoisted_15, [
(Vue.openBlock(), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(shapeColors, (shapeColor) => {
var _a;
return Vue.createElementVNode("button", {
key: shapeColor.color,
class: Vue.normalizeClass(["color-button setting-option-button", {
"button-active": shapeColor.color === ((_a = toolSetting.shapeOptions) == null ? void 0 : _a.stroke)
}]),
onClick: Vue.withModifiers(($event) => handleColorClick(shapeColor.color), ["stop"])
}, [
Vue.createElementVNode("img", {
src: shapeColor.icon,
alt: "Color Icon"
}, null, 8, _hoisted_17)
], 10, _hoisted_16);
}), 64))
])
])) : Vue.createCommentVNode("", true)
]),
_: 1
})), [
[Vue.unref(vClickOutside.default), handleHideButtonSetting]
]);
};
}
});
exports.default = _sfc_main;