mirror of https://gitee.com/godoos/godoos.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
141 lines
4.4 KiB
141 lines
4.4 KiB
import { defineStore } from 'pinia';
|
|
import { computed, ref } from 'vue';
|
|
|
|
export const useDraggingStore = defineStore('dragging', () => {
|
|
// 选中的图标
|
|
const selectedIcons = ref<any[]>([]);
|
|
const fileList = ref<any[]>([]);
|
|
const desktopAreaRef = ref<HTMLElement | null>(null);
|
|
// 框选区域相关状态
|
|
const isDragging = ref(false);
|
|
const isDraggingStarted = ref(false); // 新增标志来区分拖拽和单击
|
|
const startX = ref(0);
|
|
const startY = ref(0);
|
|
const endX = ref(0);
|
|
const endY = ref(0);
|
|
|
|
|
|
const setFileList = (filelist: any[]) => {
|
|
fileList.value = filelist;
|
|
};
|
|
|
|
// 计算框选区域的样式
|
|
const selectionBoxStyle = computed(() => {
|
|
const left = Math.min(startX.value, endX.value) + 5;
|
|
const top = Math.min(startY.value, endY.value) + 5;
|
|
const width = Math.abs(endX.value - startX.value) + 5;
|
|
const height = Math.abs(endY.value - startY.value) + 5;
|
|
return {
|
|
left,
|
|
top,
|
|
width,
|
|
height,
|
|
};
|
|
});
|
|
|
|
// 处理鼠标按下事件
|
|
const handleMouseDown = (event: MouseEvent) => {
|
|
if (event.button !== 0) return; // 只处理左键
|
|
isDragging.value = true;
|
|
isDraggingStarted.value = false; // 初始化拖拽标志
|
|
startX.value = event.clientX;
|
|
startY.value = event.clientY;
|
|
endX.value = startX.value;
|
|
endY.value = startY.value;
|
|
if (!(event.ctrlKey || event.metaKey)) {
|
|
selectedIcons.value = []; // 如果没有按住 Control 或 Command 键,清除现有的选中状态
|
|
}
|
|
};
|
|
|
|
// 处理鼠标移动事件
|
|
const handleMouseMove = (event: MouseEvent) => {
|
|
if (!isDragging.value) return;
|
|
isDraggingStarted.value = true; // 设置拖拽标志
|
|
endX.value = event.clientX;
|
|
endY.value = event.clientY;
|
|
updateSelectedIcons();
|
|
};
|
|
|
|
// 处理鼠标释放事件
|
|
const handleMouseUp = () => {
|
|
if (!isDragging.value) return;
|
|
isDragging.value = false;
|
|
if (isDraggingStarted.value) {
|
|
// 如果是拖拽操作,不处理单击逻辑
|
|
isDraggingStarted.value = false;
|
|
removeEventListeners(); // 移除事件监听器
|
|
}
|
|
|
|
};
|
|
|
|
const updateSelectedIcons = () => {
|
|
if (!desktopAreaRef.value) return;
|
|
const selectionRect = {
|
|
left: Math.min(startX.value, endX.value),
|
|
top: Math.min(startY.value, endY.value),
|
|
right: Math.max(startX.value, endX.value),
|
|
bottom: Math.max(startY.value, endY.value),
|
|
};
|
|
|
|
selectedIcons.value = []; // 清空选中的图标
|
|
|
|
const iconElements = desktopAreaRef.value.querySelectorAll(".desktop-icon") as NodeListOf<HTMLElement>;
|
|
if (!iconElements) return;
|
|
//console.log(iconElements);
|
|
iconElements.forEach((iconElement, index) => {
|
|
const rect = iconElement.getBoundingClientRect();
|
|
if (
|
|
rect.left >= selectionRect.left &&
|
|
rect.right <= selectionRect.right &&
|
|
rect.top >= selectionRect.top &&
|
|
rect.bottom <= selectionRect.bottom
|
|
) {
|
|
selectedIcons.value.push(fileList.value[index]?.path || '');
|
|
}
|
|
});
|
|
//console.log(selectedIcons.value);
|
|
};
|
|
|
|
|
|
|
|
const addEventListeners = (desktopArea: HTMLElement | null) => {
|
|
if (!desktopArea) return;
|
|
desktopAreaRef.value = desktopArea;
|
|
desktopArea.classList.add('no-select'); // 添加 no-select 类
|
|
desktopArea.addEventListener('mousedown', handleMouseDown);
|
|
desktopArea.addEventListener('mousemove', handleMouseMove);
|
|
desktopArea.addEventListener('mouseup', handleMouseUp);
|
|
//desktopArea.addEventListener('click', handleClick); // 添加 click 事件监听器
|
|
};
|
|
|
|
const removeEventListeners = () => {
|
|
if (!desktopAreaRef.value) return;
|
|
desktopAreaRef.value.classList.remove('no-select'); // 移除 no-select 类
|
|
desktopAreaRef.value.removeEventListener('mousedown', handleMouseDown);
|
|
desktopAreaRef.value.removeEventListener('mousemove', handleMouseMove);
|
|
desktopAreaRef.value.removeEventListener('mouseup', handleMouseUp);
|
|
//desktopAreaRef.value.removeEventListener('click', handleClick); // 移除 click 事件监听器
|
|
};
|
|
// document.addEventListener("copy", function () {
|
|
// if (selectedIcons.value.length > 0) {
|
|
// copiedIcons.value = [...selectedIcons.value];
|
|
// console.log('Copied icons:', copiedIcons.value);
|
|
// }
|
|
// });
|
|
|
|
return {
|
|
selectedIcons,
|
|
isDragging,
|
|
startX,
|
|
startY,
|
|
endX,
|
|
endY,
|
|
selectionBoxStyle,
|
|
setFileList,
|
|
handleMouseDown,
|
|
handleMouseMove,
|
|
handleMouseUp,
|
|
addEventListeners,
|
|
removeEventListeners,
|
|
};
|
|
});
|