409/warren
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor rect selection to make it work in shares

Browse Source
This commit is contained in:
Shawn
2025-09-04 19:02:14 +02:00
parent 735e825c7d
commit 91c65e0861
7 changed files with 187 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/pages/share.vue
View File

@@ -7,6 +7,7 @@ definePageMeta({
layout: 'share',
});
const selectionRect = useSelectionRect();
const warrenStore = useWarrenStore();
const route = useRoute();
@@ -96,12 +97,13 @@ async function loadFiles() {
}
async function onEntryClicked(entry: DirectoryEntry, event: MouseEvent) {
event.stopPropagation();
if (warrenStore.current == null) {
return;
}
if (event.ctrlKey) {
warrenStore.toggleSelection(entry);
if (warrenStore.handleSelectionClick(entry, event)) {
return;
}
@@ -171,7 +173,7 @@ function onEntryDownload(entry: DirectoryEntry) {
);
} else {
downloadName = 'download.zip';
const paths = Array.from(warrenStore.selection).map((entry) =>
const paths = Array.from(warrenStore.selection.values()).map((entry) =>
joinPaths(warrenStore.current!.path, entry.name)
);
@@ -182,12 +184,22 @@ function onEntryDownload(entry: DirectoryEntry) {
downloadFile(downloadName, downloadApiUrl);
}
function onParentClick() {
if (selectionRect.dirty) {
selectionRect.dirty = false;
return;
}
warrenStore.clearSelection();
}
</script>
<template>
<div
v-if="share != null"
class="flex h-full w-full items-center justify-center px-2"
@click="onParentClick"
>
<div
:class="[

153
frontend/pages/warrens/files.vue
View File

@@ -23,7 +23,6 @@ const dropZone = useDropZone(dropZoneRef, {
});
const selectionRect = useSelectionRect();
const dirtySelection = ref<boolean>(false);
if (warrenStore.current == null) {
await navigateTo({
@@ -82,68 +81,6 @@ function onDrop(files: File[] | null, e: DragEvent) {
}
}
/**
* Returns whether the event was a selection event (so further execution can be stopped)
*/
function handleEntrySelectionClick(
selectedEntry: DirectoryEntry,
event: MouseEvent
): boolean {
if (!event.ctrlKey && !event.shiftKey) {
return false;
}
if (warrenStore.current == null || warrenStore.current.dir == null) {
return true;
}
if (event.ctrlKey || (event.shiftKey && warrenStore.selection.size === 0)) {
if (
warrenStore.toggleSelection(selectedEntry) ||
warrenStore.selectionRangeAnchor == null
) {
warrenStore.setSelectedRangeAnchor(selectedEntry);
}
return true;
}
if (!event.shiftKey) {
return false;
}
const anchor = warrenStore.selectionRangeAnchor;
if (anchor == null) {
return true;
}
const entries = warrenStore.current.dir.entries;
const anchorIndex = entries.findIndex(
(entry) => entry.name === anchor.name
);
const clickedIndex = entries.findIndex(
(e) => e.name === selectedEntry.name
);
const targetSelection = [];
if (clickedIndex > anchorIndex) {
for (let i = anchorIndex; i <= clickedIndex; i++) {
targetSelection.push(entries[i]);
}
} else {
for (let i = clickedIndex; i <= anchorIndex; i++) {
targetSelection.push(entries[i]);
}
}
warrenStore.setSelection(targetSelection);
return true;
}
async function onEntryClicked(entry: DirectoryEntry, event: MouseEvent) {
event.stopPropagation();
@@ -151,7 +88,7 @@ async function onEntryClicked(entry: DirectoryEntry, event: MouseEvent) {
return;
}
if (handleEntrySelectionClick(entry, event)) {
if (warrenStore.handleSelectionClick(entry, event)) {
return;
}
@@ -224,99 +161,17 @@ function onBack() {
}
function onParentClick(_e: MouseEvent) {
if (dirtySelection.value) {
dirtySelection.value = false;
if (selectionRect.dirty) {
selectionRect.dirty = false;
return;
}
warrenStore.clearSelection();
}
function onParentMouseDown(e: MouseEvent) {
const point = { x: e.x, y: e.y };
selectionRect.set(point, point);
}
function onParentMouseMove(e: MouseEvent) {
selectionRect.updateB(e.x, e.y);
if (
e.shiftKey ||
!selectionRect.enabled ||
warrenStore.selection.size === 0
) {
return;
}
warrenStore.clearSelection();
}
function onParentMouseUp(e: MouseEvent) {
selectionRect.disable();
if (warrenStore.current == null || warrenStore.current.dir == null) {
return;
}
const start = selectionRect.a;
const end = { x: e.x, y: e.y };
const left = Math.min(start.x, end.x);
const top = Math.min(start.y, end.y);
const width = Math.abs(start.x - end.x);
const height = Math.abs(start.y - end.y);
if (!selectionRect.isMinSize()) {
return;
}
const rect = new DOMRect(left, top, width, height);
const entryElements = document.querySelectorAll('[data-entry-index]');
const targetEntries = [];
for (const entry of entryElements) {
const attributeValue = entry.getAttribute('data-entry-index');
if (attributeValue == null) {
continue;
}
const index = parseInt(attributeValue);
if (isNaN(index)) {
continue;
}
const entryRect = entry.getBoundingClientRect();
if (intersectRect(rect, entryRect)) {
targetEntries.push(warrenStore.current.dir.entries[index]);
}
}
dirtySelection.value = true;
if (!e.shiftKey) {
warrenStore.setSelection(targetEntries);
return;
}
if (!e.ctrlKey) {
warrenStore.addMultipleToSelection(targetEntries);
} else {
warrenStore.removeMultipleFromSelection(targetEntries);
}
}
</script>
<template>
<div
ref="dropZoneRef"
class="grow"
@click="onParentClick"
@mousedown="onParentMouseDown"
@mousemove="onParentMouseMove"
@mouseup="onParentMouseUp"
>
<div ref="dropZoneRef" class="grow" @click="onParentClick">
<DirectoryListContextMenu class="w-full grow">
<DirectoryList
v-if="