@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,
249 lines (248 loc) • 9.6 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
const electron = require("electron");
const type = require("./type.js");
const index$1 = require("./core/index.js");
const historyManager = require("./core/historyManager.js");
const index_vue_vue_type_script_setup_true_lang = require("./ToolBox/index.vue.js");
;/* empty css */
const utils = require("../../utils/utils.js");
const index = require("../../utils/common/logger/index.js");
const _hoisted_1 = { class: "tool-box-out" };
const _hoisted_2 = /* @__PURE__ */ Vue.createElementVNode("canvas", {
class: "whiteboard-canvas",
id: "canvas"
}, null, -1);
const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
__name: "index",
setup(__props) {
const isAnnotationWin = Vue.ref(false);
const isAnnotationStarted = Vue.ref(false);
const canvas = Vue.ref();
const canvasWrapRef = Vue.ref();
let upperCanvas = null;
const step = Vue.ref(0);
const historyListLength = Vue.ref(0);
const changeTool = Vue.ref("");
let historyManager$1;
Vue.provide("canvas", canvas);
const isControllerVisible = Vue.computed(
() => !isAnnotationWin.value || isAnnotationStarted.value
);
function init() {
const fabricCanvas = new index$1.default("canvas");
canvas.value = fabricCanvas;
historyManager$1 = new historyManager.default(canvas.value);
}
const toolActiveMap = {
[type.DrawingTool.Image]: () => insertImage(),
[type.DrawingTool.Clear]: () => historyManager$1.clear(),
[type.DrawingTool.Redo]: () => historyManager$1.redo(),
[type.DrawingTool.Undo]: () => historyManager$1.undo(),
[type.DrawingTool.Download]: () => downloadCanvas(),
[type.DrawingTool.Retract]: () => stopWhiteboard(),
[type.DrawingTool.Select]: () => {
var _a;
return (_a = canvas.value) == null ? void 0 : _a.setDrawingTool(type.DrawingTool.Select);
}
};
function stopWhiteboard() {
var _a, _b;
(_a = canvas.value) == null ? void 0 : _a.discardActiveObject();
(_b = canvas.value) == null ? void 0 : _b.renderAll();
let isAnnotationWin2 = false;
const annotationParam = utils.getUrlParam("isAnnotationWin");
if (annotationParam && annotationParam === "true") {
isAnnotationWin2 = true;
}
if (isAnnotationWin2) {
electron.ipcRenderer.send("annotation:stop-from-annotation-window");
}
}
function resizeCanvas() {
var _a, _b;
canvas.value.setWidth((_a = canvasWrapRef.value) == null ? void 0 : _a.offsetWidth);
canvas.value.setHeight((_b = canvasWrapRef.value) == null ? void 0 : _b.offsetHeight);
}
function updateSetting(toolSetting) {
var _a, _b, _c;
const behavior = toolActiveMap[toolSetting.drawingTool];
if (behavior) {
behavior();
if (changeTool.value === type.DrawingTool.Select) {
return;
}
changeTool.value = "";
return;
}
const currentClass = type.toolCursorStyleMap[toolSetting.drawingTool];
Object.values(type.toolCursorStyleMap).forEach((className) => {
if (className) {
upperCanvas == null ? void 0 : upperCanvas.classList.remove(className);
}
});
if (currentClass) {
upperCanvas == null ? void 0 : upperCanvas.classList.add(currentClass);
(_a = canvas.value) == null ? void 0 : _a.setDrawingTool(toolSetting.drawingTool);
changeTool.value = "";
return;
}
(_b = canvas.value) == null ? void 0 : _b.setDrawingTool(toolSetting.drawingTool);
(_c = canvas.value) == null ? void 0 : _c.setOptions(toolSetting);
changeTool.value = "";
}
function insertImage() {
if (!canvas.value || !canvas.value) {
index.default.error("Canvas is not available or not initialized.");
return;
}
const input = document.createElement("input");
input.type = "file";
const mimeTypes = ["image/png", "image/jpeg", "image/jpg", "image/bmp"].join(
","
);
input.accept = mimeTypes;
input.onchange = (event) => {
var _a;
const file = (_a = event.target.files) == null ? void 0 : _a[0];
if (!file) {
index.default.info("No file selected.");
return;
}
const validTypes = mimeTypes.split(",").map((type2) => type2.trim());
if (!validTypes.includes(file.type)) {
index.default.error(
"Invalid file type. Please upload a PNG, JPEG, JPG, or BMP image."
);
return;
}
const reader = new FileReader();
reader.onload = (event2) => {
var _a2;
const img = new Image();
img.onload = () => {
var _a3;
(_a3 = canvas.value) == null ? void 0 : _a3.insertImage(img.src);
};
img.src = (_a2 = event2.target) == null ? void 0 : _a2.result;
};
reader.onerror = () => {
index.default.error("Failed to read file.");
};
reader.readAsDataURL(file);
};
input.onerror = () => {
index.default.error("Failed to create file input.");
};
input.click();
}
function generateImageName() {
const date = /* @__PURE__ */ new Date();
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
const hours = date.getHours();
const minutes = date.getMinutes();
const seconds = date.getSeconds();
const formattedMonth = month < 10 ? `0${month}` : month;
const formattedDay = day < 10 ? `0${day}` : day;
const formattedHours = hours < 10 ? `0${hours}` : hours;
const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes;
const formattedSeconds = seconds < 10 ? `0${seconds}` : seconds;
return `${year}-${formattedMonth}-${formattedDay}-${formattedHours}.${formattedMinutes}.${formattedSeconds}.png`;
}
function downloadCanvas() {
if (!canvas.value || !canvas.value) {
return;
}
const dataURL = canvas.value.toDataURL({
format: "png"
});
const link = document.createElement("a");
link.style.display = "none";
link.href = dataURL;
link.download = generateImageName();
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
electron.ipcRenderer.send("whiteboard:save-from-whiteboard-window");
}
function handleStepChange(stepNumber) {
step.value = stepNumber;
}
function handleHistoryChange(historyListLengthNumber) {
historyListLength.value = historyListLengthNumber;
}
function handleToolChange() {
changeTool.value = type.DrawingTool.Select;
}
Vue.onMounted(() => {
var _a, _b, _c, _d;
init();
const annotationParam = utils.getUrlParam("isAnnotationWin");
if (annotationParam && annotationParam === "true") {
isAnnotationWin.value = true;
}
if (!isAnnotationWin.value) {
(_a = canvas.value) == null ? void 0 : _a.setBackgroundColor("white");
}
upperCanvas = document.querySelector(
".upper-canvas.whiteboard-canvas"
);
historyManager$1.on("change-step", handleStepChange);
historyManager$1.on("change-history", handleHistoryChange);
(_b = canvas.value) == null ? void 0 : _b.on("insert-images", handleToolChange);
canvas.value.setWidth((_c = canvasWrapRef.value) == null ? void 0 : _c.offsetWidth);
canvas.value.setHeight((_d = canvasWrapRef.value) == null ? void 0 : _d.offsetHeight);
window.addEventListener("resize", resizeCanvas);
});
Vue.onUnmounted(() => {
var _a;
historyManager$1.off("change-step", handleStepChange);
historyManager$1.off("change-history", handleHistoryChange);
(_a = canvas.value) == null ? void 0 : _a.off("insert-images", handleToolChange);
window.removeEventListener("resize", resizeCanvas);
});
electron.ipcRenderer.on("annotation:annotating-started", () => {
isAnnotationStarted.value = true;
});
electron.ipcRenderer.on("annotation:annotating-stopped", () => {
isAnnotationStarted.value = false;
});
electron.ipcRenderer.on("whiteboard:clear", () => {
if (canvas.value) {
canvas.value.reloadCanvas();
changeTool.value = type.DrawingTool.Pencil;
}
});
electron.ipcRenderer.on("annotation:clear", () => {
if (canvas.value) {
canvas.value.reloadCanvas();
changeTool.value = type.DrawingTool.Pencil;
}
});
return (_ctx, _cache) => {
return Vue.openBlock(), Vue.createElementBlock("div", null, [
Vue.createElementVNode("div", {
class: "canvas-wrap",
ref_key: "canvasWrapRef",
ref: canvasWrapRef
}, [
Vue.withDirectives(Vue.createElementVNode("div", _hoisted_1, [
Vue.createVNode(index_vue_vue_type_script_setup_true_lang.default, {
onUpdateSetting: updateSetting,
step: step.value,
"history-list-length": historyListLength.value,
"change-tool": changeTool.value
}, null, 8, ["step", "history-list-length", "change-tool"])
], 512), [
[Vue.vShow, isControllerVisible.value]
]),
_hoisted_2
], 512)
]);
};
}
});
exports.default = _sfc_main;