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

96
frontend/components/SelectionRect.vue
View File

@@ -1,15 +1,109 @@
<script setup lang="ts">
const rect = useSelectionRect();
const warrenStore = useWarrenStore();
const left = computed(() => Math.min(rect.a.x, rect.b.x));
const top = computed(() => Math.min(rect.a.y, rect.b.y));
const width = computed(() => Math.abs(rect.a.x - rect.b.x));
const height = computed(() => Math.abs(rect.a.y - rect.b.y));
function onDocumentPointerDown(e: MouseEvent) {
const point = { x: e.x, y: e.y };
rect.set(
point,
point,
!e.shiftKey ? 'set' : e.ctrlKey ? 'subtract' : 'add'
);
}
function onDocumentPointerMove(e: MouseEvent) {
rect.updateB(e.x, e.y);
if (
rect.mode !== 'set' ||
!rect.enabled ||
warrenStore.selection.size === 0
) {
return;
}
warrenStore.clearSelection();
}
function onDocumentPointerUp() {
rect.disable();
if (warrenStore.current == null || warrenStore.current.dir == null) {
return;
}
const start = rect.a;
const end = rect.b;
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 (!rect.isMinSize()) {
return;
}
const selectionRect = 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(selectionRect, entryRect)) {
targetEntries.push(warrenStore.current.dir.entries[index]);
}
}
rect.dirty = true;
if (rect.mode === 'set') {
warrenStore.setSelection(targetEntries);
} else if (rect.mode === 'add') {
warrenStore.addMultipleToSelection(targetEntries);
} else if (rect.mode === 'subtract') {
warrenStore.removeMultipleFromSelection(targetEntries);
}
}
onMounted(() => {
document.addEventListener('pointerdown', onDocumentPointerDown);
document.addEventListener('pointermove', onDocumentPointerMove);
document.addEventListener('pointerup', onDocumentPointerUp);
});
onBeforeUnmount(() => {
document.removeEventListener('pointerdown', onDocumentPointerDown);
document.removeEventListener('pointermove', onDocumentPointerMove);
document.removeEventListener('pointerup', onDocumentPointerUp);
});
</script>
<template>
<div
v-if="rect.enabled && rect.isMinSize()"
class="bg-primary/20 pointer-events-none absolute z-50"
:class="[
'pointer-events-none absolute z-50',
rect.mode === 'set' && 'bg-primary/20',
rect.mode === 'add' && 'bg-green-300/20',
rect.mode === 'subtract' && 'bg-destructive/20',
]"
:style="`left: ${left}px; top: ${top}px; width: ${width}px; height: ${height}px;`"
></div>
</template>

1
frontend/layouts/share.vue
View File

@@ -2,6 +2,7 @@
<template>
<main class="flex h-full w-full items-center justify-center">
<SelectionRect />
<ImageViewer />
<slot />
</main>

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="

1
frontend/shared/types/selection.ts Normal file
View File

@@ -0,0 +1 @@
export type SelectionMode = 'set' | 'add' | 'subtract';

61
frontend/stores/index.ts
View File

@@ -133,6 +133,67 @@ export const useWarrenStore = defineStore('warrens', {
return this.selection.has(entry.name);
},
handleSelectionClick(
selectedEntry: DirectoryEntry,
event: MouseEvent
): boolean {
if (!event.ctrlKey && !event.shiftKey) {
return false;
}
if (this.current == null || this.current.dir == null) {
return true;
}
if (
event.ctrlKey ||
(event.shiftKey && this.selection.size === 0)
) {
if (
this.toggleSelection(selectedEntry) ||
this.selectionRangeAnchor == null
) {
this.setSelectedRangeAnchor(selectedEntry);
}
return true;
}
if (!event.shiftKey) {
return false;
}
const anchor = this.selectionRangeAnchor;
if (anchor == null) {
return true;
}
const entries = this.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]);
}
}
this.setSelection(targetSelection);
return true;
},
clearSelection() {
this.selection.clear();
this.selectionRangeAnchor = null;

11
frontend/stores/selectionRect.ts
View File

@@ -1,6 +1,9 @@
import type { SelectionMode } from '~/shared/types/selection';
export const useSelectionRect = defineStore('selection-rect', {
state: () => ({
enabled: false as boolean,
dirty: false as boolean,
a: {
x: 0 as number,
y: 0 as number,
@@ -9,9 +12,14 @@ export const useSelectionRect = defineStore('selection-rect', {
x: 0 as number,
y: 0 as number,
},
mode: 'set' as SelectionMode,
}),
actions: {
set(a: { x: number; y: number }, b: { x: number; y: number }) {
set(
a: { x: number; y: number },
b: { x: number; y: number },
mode: SelectionMode
) {
this.a.x = a.x;
this.a.y = a.y;
@@ -19,6 +27,7 @@ export const useSelectionRect = defineStore('selection-rect', {
this.b.y = b.y;
this.enabled = true;
this.mode = mode;
},
updateB(x: number, y: number) {
this.b.x = x;