@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.3 kB
JavaScript
import { defineComponent, ref, provide, computed, onMounted, onUnmounted, createElementBlock, openBlock, createElementVNode, withDirectives, createVNode, vShow } from "vue";
import { ipcRenderer } from "electron";
import { DrawingTool, toolCursorStyleMap } from "./type.mjs";
import FabricCanvas from "./core/index.mjs";
import HistoryManager from "./core/historyManager.mjs";
import _sfc_main$1 from "./ToolBox/index.vue.mjs";
/* empty css */
import { getUrlParam } from "../../utils/utils.mjs";
import logger from "../../utils/common/logger/index.mjs";
const _hoisted_1 = { class: "tool-box-out" };
const _hoisted_2 = /* @__PURE__ */ createElementVNode("canvas", {
class: "whiteboard-canvas",
id: "canvas"
}, null, -1);
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "index",
setup(__props) {
const isAnnotationWin = ref(false);
const isAnnotationStarted = ref(false);
const canvas = ref();
const canvasWrapRef = ref();
let upperCanvas = null;
const step = ref(0);
const historyListLength = ref(0);
const changeTool = ref("");
let historyManager;
provide("canvas", canvas);
const isControllerVisible = computed(
() => !isAnnotationWin.value || isAnnotationStarted.value
);
function init() {
const fabricCanvas = new FabricCanvas("canvas");
canvas.value = fabricCanvas;
historyManager = new HistoryManager(canvas.value);
}
const toolActiveMap = {
[DrawingTool.Image]: () => insertImage(),
[DrawingTool.Clear]: () => historyManager.clear(),
[DrawingTool.Redo]: () => historyManager.redo(),
[DrawingTool.Undo]: () => historyManager.undo(),
[DrawingTool.Download]: () => downloadCanvas(),
[DrawingTool.Retract]: () => stopWhiteboard(),
[DrawingTool.Select]: () => {
var _a;
return (_a = canvas.value) == null ? void 0 : _a.setDrawingTool(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 = getUrlParam("isAnnotationWin");
if (annotationParam && annotationParam === "true") {
isAnnotationWin2 = true;
}
if (isAnnotationWin2) {
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 === DrawingTool.Select) {
return;
}
changeTool.value = "";
return;
}
const currentClass = toolCursorStyleMap[toolSetting.drawingTool];
Object.values(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) {
logger.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) {
logger.info("No file selected.");
return;
}
const validTypes = mimeTypes.split(",").map((type) => type.trim());
if (!validTypes.includes(file.type)) {
logger.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 = () => {
logger.error("Failed to read file.");
};
reader.readAsDataURL(file);
};
input.onerror = () => {
logger.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);
ipcRenderer.send("whiteboard:save-from-whiteboard-window");
}
function handleStepChange(stepNumber) {
step.value = stepNumber;
}
function handleHistoryChange(historyListLengthNumber) {
historyListLength.value = historyListLengthNumber;
}
function handleToolChange() {
changeTool.value = DrawingTool.Select;
}
onMounted(() => {
var _a, _b, _c, _d;
init();
const annotationParam = 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.on("change-step", handleStepChange);
historyManager.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);
});
onUnmounted(() => {
var _a;
historyManager.off("change-step", handleStepChange);
historyManager.off("change-history", handleHistoryChange);
(_a = canvas.value) == null ? void 0 : _a.off("insert-images", handleToolChange);
window.removeEventListener("resize", resizeCanvas);
});
ipcRenderer.on("annotation:annotating-started", () => {
isAnnotationStarted.value = true;
});
ipcRenderer.on("annotation:annotating-stopped", () => {
isAnnotationStarted.value = false;
});
ipcRenderer.on("whiteboard:clear", () => {
if (canvas.value) {
canvas.value.reloadCanvas();
changeTool.value = DrawingTool.Pencil;
}
});
ipcRenderer.on("annotation:clear", () => {
if (canvas.value) {
canvas.value.reloadCanvas();
changeTool.value = DrawingTool.Pencil;
}
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", null, [
createElementVNode("div", {
class: "canvas-wrap",
ref_key: "canvasWrapRef",
ref: canvasWrapRef
}, [
withDirectives(createElementVNode("div", _hoisted_1, [
createVNode(_sfc_main$1, {
onUpdateSetting: updateSetting,
step: step.value,
"history-list-length": historyListLength.value,
"change-tool": changeTool.value
}, null, 8, ["step", "history-list-length", "change-tool"])
], 512), [
[vShow, isControllerVisible.value]
]),
_hoisted_2
], 512)
]);
};
}
});
export {
_sfc_main as default
};