|
|
|
|
@ -973,6 +973,53 @@
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//------------------------------------------------------------------------
|
|
|
|
|
// 状态管理
|
|
|
|
|
const dragState = {
|
|
|
|
|
isDragging: false,
|
|
|
|
|
initialMouseX: 0,
|
|
|
|
|
initialMouseY: 0,
|
|
|
|
|
initialElementX: 0,
|
|
|
|
|
initialElementY: 0,
|
|
|
|
|
};
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
setupDragListeners();
|
|
|
|
|
});
|
|
|
|
|
function setupDragListeners() {
|
|
|
|
|
const dragElement = document.querySelector('.dragModal');
|
|
|
|
|
if (!dragElement) return;
|
|
|
|
|
if (graffitiFlag.value) return;
|
|
|
|
|
// 使用命名函数以便后续移除监听器
|
|
|
|
|
const handleMouseDown = (event) => {
|
|
|
|
|
dragState.isDragging = true;
|
|
|
|
|
dragState.initialMouseX = event.clientX;
|
|
|
|
|
dragState.initialMouseY = event.clientY;
|
|
|
|
|
dragState.initialElementX = dragElement.offsetLeft;
|
|
|
|
|
dragState.initialElementY = dragElement.offsetTop;
|
|
|
|
|
dragElement.style.cursor = 'grabbing';
|
|
|
|
|
};
|
|
|
|
|
const handleMouseMove = (event) => {
|
|
|
|
|
if (!dragState.isDragging) return;
|
|
|
|
|
const deltaX = event.clientX - dragState.initialMouseX;
|
|
|
|
|
const deltaY = event.clientY - dragState.initialMouseY;
|
|
|
|
|
dragElement.style.left = `${dragState.initialElementX + deltaX}px`;
|
|
|
|
|
dragElement.style.top = `${dragState.initialElementY + deltaY}px`;
|
|
|
|
|
};
|
|
|
|
|
const handleMouseUp = () => {
|
|
|
|
|
dragState.isDragging = false;
|
|
|
|
|
dragElement.style.cursor = 'default';
|
|
|
|
|
};
|
|
|
|
|
// 添加事件监听
|
|
|
|
|
dragElement.addEventListener('mousedown', handleMouseDown);
|
|
|
|
|
document.addEventListener('mousemove', handleMouseMove);
|
|
|
|
|
document.addEventListener('mouseup', handleMouseUp);
|
|
|
|
|
// 返回清理函数以便在组件卸载时移除监听器
|
|
|
|
|
return () => {
|
|
|
|
|
dragElement.removeEventListener('mousedown', handleMouseDown);
|
|
|
|
|
document.removeEventListener('mousemove', handleMouseMove);
|
|
|
|
|
document.removeEventListener('mouseup', handleMouseUp);
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 临时选框状态
|
|
|
|
|
const isDragging = ref(false);
|
|
|
|
|
// 涂鸦
|
|
|
|
|
@ -980,28 +1027,9 @@
|
|
|
|
|
let startY = 0;
|
|
|
|
|
let endX = 0;
|
|
|
|
|
let endY = 0;
|
|
|
|
|
// 拖动
|
|
|
|
|
let initialMouseX;
|
|
|
|
|
let initialMouseY;
|
|
|
|
|
let initialDocumentX;
|
|
|
|
|
let initialDocumentY;
|
|
|
|
|
|
|
|
|
|
// 鼠标按下
|
|
|
|
|
function onMouseDown(event) {
|
|
|
|
|
if (!graffitiFlag.value) {
|
|
|
|
|
{
|
|
|
|
|
// 拖动
|
|
|
|
|
const dragDocument: any = document.querySelector('.dragModal');
|
|
|
|
|
isDragging.value = true;
|
|
|
|
|
initialMouseX = event.clientX;
|
|
|
|
|
initialMouseY = event.clientY;
|
|
|
|
|
initialDocumentX = dragDocument.offsetLeft;
|
|
|
|
|
initialDocumentY = dragDocument.offsetTop;
|
|
|
|
|
dragDocument.style.cursor = 'grabbing';
|
|
|
|
|
window.addEventListener('mousemove', onMouseMove);
|
|
|
|
|
window.addEventListener('mouseup', onMouseUp);
|
|
|
|
|
}
|
|
|
|
|
} else if (
|
|
|
|
|
if (
|
|
|
|
|
graffitiFlag.value &&
|
|
|
|
|
(graffitis.value.length == 0 || !graffitis.value.some((item) => item.status != 'success'))
|
|
|
|
|
) {
|
|
|
|
|
@ -1028,7 +1056,6 @@
|
|
|
|
|
window.addEventListener('mouseup', onMouseUpGraffit);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 鼠标移动-涂鸦
|
|
|
|
|
function onMouseMoveGraffit(event) {
|
|
|
|
|
// 涂鸦
|
|
|
|
|
@ -1042,7 +1069,6 @@
|
|
|
|
|
}
|
|
|
|
|
setMouseData();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 鼠标松开-涂鸦
|
|
|
|
|
function onMouseUpGraffit(event) {
|
|
|
|
|
// 涂鸦
|
|
|
|
|
@ -1065,27 +1091,6 @@
|
|
|
|
|
window.removeEventListener('mousemove', onMouseMoveGraffit);
|
|
|
|
|
window.removeEventListener('mouseup', onMouseUpGraffit);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 鼠标移动
|
|
|
|
|
function onMouseMove(event) {
|
|
|
|
|
// 拖动
|
|
|
|
|
const dragDocument: any = document.querySelector('.dragModal');
|
|
|
|
|
if (isDragging.value) {
|
|
|
|
|
const deltaX = event.clientX - initialMouseX;
|
|
|
|
|
const deltaY = event.clientY - initialMouseY;
|
|
|
|
|
dragDocument.style.left = initialDocumentX + deltaX + 'px';
|
|
|
|
|
dragDocument.style.top = initialDocumentY + deltaY + 'px';
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// 鼠标松开
|
|
|
|
|
function onMouseUp(event) {
|
|
|
|
|
// 拖动
|
|
|
|
|
const dragDocument: any = document.querySelector('.dragModal');
|
|
|
|
|
isDragging.value = false;
|
|
|
|
|
if (dragDocument) {
|
|
|
|
|
dragDocument.style.cursor = 'default';
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// 鼠标滚轮
|
|
|
|
|
function onWheel(event) {
|
|
|
|
|
if (!graffitiFlag.value) {
|
|
|
|
|
@ -1100,7 +1105,6 @@
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 设置鼠标涂鸦绘画出的数据
|
|
|
|
|
function setMouseData() {
|
|
|
|
|
graffitis.value[graffitis.value.length - 1].x = Math.min(startX, endX);
|
|
|
|
|
|
