@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.07 kB
JavaScript
import "../../services/main.mjs";
import { roomService } from "../../services/roomService.mjs";
import { EventType } from "../../services/types.mjs";
import "../../locales/index.mjs";
import "@tencentcloud/tuiroom-engine-js";
import "../../utils/environment.mjs";
import "mitt";
import "../../services/manager/roomActionManager.mjs";
import "@tencentcloud/tui-core";
import interact from "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.emit(EventType.ROOM_CONTAINER_RESIZE);
}
}
}).styleCursor(true);
};
export {
setDragAndResize
};