@tencentcloud/roomkit-web-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,
60 lines (59 loc) • 2.2 kB
JavaScript
;
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
require("../../services/main.js");
const roomService = require("../../services/roomService.js");
const types = require("../../services/types.js");
require("../../locales/index.js");
require("@tencentcloud/tuiroom-engine-js");
require("../../utils/environment.js");
require("mitt");
require("../../services/manager/roomActionManager.js");
require("@tencentcloud/tui-core");
const interact = require("interactjs");
const setDragAndResize = (domSelect) => {
const minWidth = 830;
const minHeight = 630;
const screenWidth = window.innerWidth;
const screenHeight = window.innerHeight;
interact(domSelect).draggable({
onstart: (event) => {
const { target } = event;
target.style.margin = "initial";
},
onmove: (event) => {
const { target } = event;
let x = (parseFloat(target.getAttribute("data-x")) || 0) + event.dx;
let y = (parseFloat(target.getAttribute("data-y")) || 0) + event.dy;
x = Math.min(
screenWidth - target.offsetWidth + minWidth - 100,
Math.max(-830 + 100, x)
);
y = Math.min(
screenHeight - target.offsetHeight + minHeight - 100,
Math.max(-630 + 100, y)
);
target.style.transform = `translate(${x}px, ${y}px)`;
target.setAttribute("data-x", x);
target.setAttribute("data-y", y);
}
}).resizable({
edges: { top: true, left: true, bottom: true, right: true },
listeners: {
move(event) {
let { x, y } = event.target.dataset;
x = (parseFloat(x) || 0) + event.deltaRect.left;
y = (parseFloat(y) || 0) + event.deltaRect.top;
const width = Math.max(minWidth, event.rect.width);
const height = Math.max(minHeight, event.rect.height);
Object.assign(event.target.style, {
width: `${width}px`,
height: `${height}px`,
transform: `translate(${x}px, ${y}px)`
});
Object.assign(event.target.dataset, { x, y });
roomService.roomService.emit(types.EventType.ROOM_CONTAINER_RESIZE);
}
}
}).styleCursor(true);
};
exports.setDragAndResize = setDragAndResize;