@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,
164 lines (163 loc) • 6.7 kB
JavaScript
import { defineComponent, ref, reactive, watch, withDirectives, createBlock, openBlock, withCtx, createVNode, createElementBlock, createCommentVNode, normalizeClass, unref, createElementVNode, toDisplayString, Fragment, renderList, withModifiers } from "vue";
import { useI18n } from "../../../../locales/index.mjs";
import { DrawingTool } from "../../type.mjs";
import IconButton from "../../../common/base/IconButton.vue.mjs";
import vClickOutside from "../../../../directives/vClickOutside.mjs";
/* empty css */
import ArrowIcon from "../Icon/ArrowIcon.vue.mjs";
import SizeSmall from "../Image/SizeSmall.svg.mjs";
import SizeMid from "../Image/SizeMid.svg.mjs";
import SizeBig from "../Image/SizeBig.svg.mjs";
import SizeLarge from "../Image/SizeLarge.svg.mjs";
import BlueIcon from "../Image/BlueIcon.svg.mjs";
import PurpleIcon from "../Image/PurpleIcon.svg.mjs";
import YellowIcon from "../Image/YellowIcon.svg.mjs";
import OrangeIcon from "../Image/OrangeIcon.svg.mjs";
import RedIcon from "../Image/RedIcon.svg.mjs";
import GreenIcon from "../Image/GreenIcon.svg.mjs";
import DeepBlueIcon from "../Image/DeepBlueIcon.svg.mjs";
import BlackIcon from "../Image/BlackIcon.svg.mjs";
import DarkGrayIcon from "../Image/DarkGrayIcon.svg.mjs";
import GrayIcon from "../Image/GrayIcon.svg.mjs";
import LightGrayIcon from "../Image/LightGrayIcon.svg.mjs";
import WhiteIcon from "../Image/WhiteIcon.svg.mjs";
import logger from "../../../../utils/common/logger/index.mjs";
const _hoisted_1 = {
key: 0,
class: "arrow-tool-setting whiteboard-tool-setting"
};
const _hoisted_2 = { class: "size-setting-title setting-title" };
const _hoisted_3 = { class: "size-setting-section setting-section" };
const _hoisted_4 = ["onClick"];
const _hoisted_5 = ["src"];
const _hoisted_6 = { class: "color-setting-title setting-title" };
const _hoisted_7 = { class: "color-setting-section setting-section" };
const _hoisted_8 = ["onClick"];
const _hoisted_9 = ["src"];
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "index",
props: {
activeTool: String
},
emits: ["click"],
setup(__props, { emit: __emit }) {
const { t } = useI18n();
const lineSizes = [
{ icon: SizeSmall, size: 2 },
{ icon: SizeMid, size: 4 },
{ icon: SizeBig, size: 6 },
{ icon: SizeLarge, size: 8 }
];
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 }
];
const showSettings = ref(false);
const props = __props;
function handleHideButtonSetting() {
if (props.activeTool === DrawingTool.Arrow) {
showSettings.value = false;
}
}
const toolSetting = reactive({
drawingTool: DrawingTool.Arrow,
shapeOptions: {
strokeWidth: 4,
stroke: "#22262E"
}
});
const emit = __emit;
watch(
() => props.activeTool,
() => {
showSettings.value = false;
}
);
const onClick = () => {
showSettings.value = !showSettings.value;
emit("click", toolSetting);
logger.debug("toolSetting", toolSetting);
logger.debug("emit", showSettings.value);
logger.debug("emit", showSettings.value);
logger.debug("emit", showSettings.value);
logger.debug("emit", showSettings.value);
logger.debug("emit", showSettings.value);
};
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 withDirectives((openBlock(), createBlock(IconButton, {
class: "tool-button",
onClickIcon: onClick
}, {
default: withCtx(() => [
createVNode(ArrowIcon, {
class: normalizeClass({ "whiteboard-icon-active": __props.activeTool === unref(DrawingTool).Arrow })
}, null, 8, ["class"]),
showSettings.value && __props.activeTool === "Arrow" ? (openBlock(), createElementBlock("div", _hoisted_1, [
createElementVNode("div", _hoisted_2, toDisplayString(unref(t)("Arrow Size")), 1),
createElementVNode("div", _hoisted_3, [
(openBlock(), createElementBlock(Fragment, null, renderList(lineSizes, (lineSize) => {
return createElementVNode("button", {
key: lineSize.size,
class: normalizeClass(["size-button setting-option-button", {
"button-active": lineSize.size === toolSetting.shapeOptions.strokeWidth
}]),
onClick: withModifiers(($event) => handleSizeClick(lineSize.size), ["stop"])
}, [
createElementVNode("img", {
src: lineSize.icon
}, null, 8, _hoisted_5)
], 10, _hoisted_4);
}), 64))
]),
createElementVNode("div", _hoisted_6, toDisplayString(unref(t)("Arrow Color")), 1),
createElementVNode("div", _hoisted_7, [
(openBlock(), createElementBlock(Fragment, null, renderList(lineColors, (lineColor) => {
return createElementVNode("button", {
key: lineColor.color,
class: normalizeClass(["color-button setting-option-button", {
"button-active": lineColor.color === toolSetting.shapeOptions.stroke
}]),
onClick: withModifiers(($event) => handleColorClick(lineColor.color), ["stop"])
}, [
createElementVNode("img", {
src: lineColor.icon
}, null, 8, _hoisted_9)
], 10, _hoisted_8);
}), 64))
])
])) : createCommentVNode("", true)
]),
_: 1
})), [
[unref(vClickOutside), handleHideButtonSetting]
]);
};
}
});
export {
_sfc_main as default
};