refactor rect selection to make it work in shares

frontend/components/SelectionRect.vue

@@ -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>

frontend/layouts/share.vue

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

frontend/pages/share.vue

@@ -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) {
+    if (warrenStore.handleSelectionClick(entry, event)) {
-        warrenStore.toggleSelection(entry);
         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="[

frontend/pages/warrens/files.vue

@@ -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) {
+    if (selectionRect.dirty) {
-        dirtySelection.value = false;
+        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
+    <div ref="dropZoneRef" class="grow" @click="onParentClick">
-        ref="dropZoneRef"
-        class="grow"
-        @click="onParentClick"
-        @mousedown="onParentMouseDown"
-        @mousemove="onParentMouseMove"
-        @mouseup="onParentMouseUp"
-    >
         <DirectoryListContextMenu class="w-full grow">
             <DirectoryList
                 v-if="

frontend/shared/types/selection.ts

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

frontend/stores/index.ts

@@ -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;

frontend/stores/selectionRect.ts

@@ -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;