rect file selection

frontend/components/DirectoryEntry.vue

@@ -14,10 +14,12 @@ const renameDialog = useRenameDirectoryDialog();
 
 const {
     entry,
+    entryIndex,
     disabled,
     draggable = true,
 } = defineProps<{
     entry: DirectoryEntry;
+    entryIndex: number;
     disabled: boolean;
     draggable?: boolean;
 }>();
@@ -90,6 +92,7 @@ function onClearCopy() {
     <ContextMenu>
         <ContextMenuTrigger class="flex sm:w-52">
             <button
+                :data-entry-index="entryIndex"
                 :disabled="warrenStore.loading || disabled"
                 :class="[
                     'bg-accent/30 border-border flex w-full translate-0 flex-row gap-4 overflow-hidden rounded-md border-1 px-4 py-2 outline-0 select-none',

frontend/components/DirectoryList.vue

@@ -25,10 +25,6 @@ const emit = defineEmits<{
 
 const { isLoading } = useLoadingIndicator();
 
-const sortedEntries = computed(() =>
-    entries.toSorted((a, b) => a.name.localeCompare(b.name))
-);
-
 function onEntryClicked(entry: DirectoryEntry, event: MouseEvent) {
     emit('entry-click', entry, event);
 }
@@ -59,8 +55,9 @@ function onEntryDelete(entry: DirectoryEntry, force: boolean) {
                 @back="() => emit('back')"
             />
             <DirectoryEntry
-                v-for="entry in sortedEntries"
+                v-for="(entry, i) in entries"
                 :key="entry.name"
+                :entry-index="i"
                 :entry="entry"
                 :disabled="isLoading || disableEntries"
                 :draggable="entriesDraggable"

frontend/components/SelectionRect.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const rect = useSelectionRect();
+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));
+</script>
+
+<template>
+    <div
+        v-if="rect.enabled && rect.isMinSize()"
+        class="bg-primary/20 pointer-events-none absolute z-50"
+        :style="`left: ${left}px; top: ${top}px; width: ${width}px; height: ${height}px;`"
+    ></div>
+</template>

frontend/layouts/default.vue

@@ -16,6 +16,7 @@ await useAsyncData('warrens', async () => {
 
 <template>
     <SidebarProvider>
+        <SelectionRect />
         <ActionsShareDialog />
         <ImageViewer />
         <AppSidebar />

frontend/pages/warrens/files.vue

@@ -22,6 +22,9 @@ const dropZone = useDropZone(dropZoneRef, {
     multiple: true,
 });
 
+const selectionRect = useSelectionRect();
+const dirtySelection = ref<boolean>(false);
+
 if (warrenStore.current == null) {
     await navigateTo({
         path: '/warrens',
@@ -114,9 +117,8 @@ function handleEntrySelectionClick(
         return true;
     }
 
-    const entries = warrenStore.current.dir.entries.toSorted((a, b) =>
+    const entries = warrenStore.current.dir.entries;
-        a.name.localeCompare(b.name)
+
-    );
     const anchorIndex = entries.findIndex(
         (entry) => entry.name === anchor.name
     );
@@ -125,8 +127,6 @@ function handleEntrySelectionClick(
         (e) => e.name === selectedEntry.name
     );
 
-    // NOTE: This has to change if there are ever multiple sorting orders
-
     const targetSelection = [];
 
     if (clickedIndex > anchorIndex) {
@@ -223,13 +223,100 @@ function onBack() {
     warrenStore.backCurrentPath();
 }
 
-function onParentClick() {
+function onParentClick(_e: MouseEvent) {
+    if (dirtySelection.value) {
+        dirtySelection.value = 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">
+    <div
+        ref="dropZoneRef"
+        class="grow"
+        @click="onParentClick"
+        @mousedown="onParentMouseDown"
+        @mousemove="onParentMouseMove"
+        @mouseup="onParentMouseUp"
+    >
         <DirectoryListContextMenu class="w-full grow">
             <DirectoryList
                 v-if="

frontend/stores/index.ts

@@ -17,7 +17,7 @@ export const useWarrenStore = defineStore('warrens', {
                 entries: DirectoryEntry[];
             } | null;
         } | null,
-        selection: new Set() as Set<DirectoryEntry>,
+        selection: new Map() as Map<string, DirectoryEntry>,
         selectionRangeAnchor: null as DirectoryEntry | null,
         loading: false,
     }),
@@ -39,7 +39,9 @@ export const useWarrenStore = defineStore('warrens', {
             }
 
             this.current.dir = {
-                entries,
+                entries: entries.toSorted((a, b) =>
+                    a.name.localeCompare(b.name)
+                ),
                 parent,
             };
         },
@@ -85,30 +87,38 @@ export const useWarrenStore = defineStore('warrens', {
             this.current = null;
         },
         addToSelection(entry: DirectoryEntry) {
-            this.selection.add(entry);
+            this.selection.set(entry.name, entry);
         },
         setSelection(entries: DirectoryEntry[]) {
-            this.selection = new Set(entries);
+            this.selection = entries.reduce(
+                (acc, entry) => acc.set(entry.name, entry),
+                new Map()
+            );
             if (
                 this.selectionRangeAnchor != null &&
-                !this.selection.has(this.selectionRangeAnchor)
+                !this.selection.has(this.selectionRangeAnchor.name)
             ) {
                 this.selectionRangeAnchor = null;
             }
         },
         addMultipleToSelection(entries: DirectoryEntry[]) {
             for (const entry of entries) {
-                this.selection.add(entry);
+                this.selection.set(entry.name, entry);
+            }
+        },
+        removeMultipleFromSelection(entries: DirectoryEntry[]) {
+            for (const entry of entries) {
+                this.selection.delete(entry.name);
             }
         },
         setSelectedRangeAnchor(entry: DirectoryEntry) {
             this.selectionRangeAnchor = entry;
         },
         removeFromSelection(entry: DirectoryEntry): boolean {
-            return this.selection.delete(entry);
+            return this.selection.delete(entry.name);
         },
         toggleSelection(entry: DirectoryEntry): boolean {
-            if (this.selection.has(entry)) {
+            if (this.selection.has(entry.name)) {
                 this.removeFromSelection(entry);
                 return false;
             } else {
@@ -121,7 +131,7 @@ export const useWarrenStore = defineStore('warrens', {
                 return false;
             }
 
-            return this.selection.has(entry);
+            return this.selection.has(entry.name);
         },
         clearSelection() {
             this.selection.clear();

frontend/stores/selectionRect.ts

@@ -0,0 +1,39 @@
+export const useSelectionRect = defineStore('selection-rect', {
+    state: () => ({
+        enabled: false as boolean,
+        a: {
+            x: 0 as number,
+            y: 0 as number,
+        },
+        b: {
+            x: 0 as number,
+            y: 0 as number,
+        },
+    }),
+    actions: {
+        set(a: { x: number; y: number }, b: { x: number; y: number }) {
+            this.a.x = a.x;
+            this.a.y = a.y;
+
+            this.b.x = b.x;
+            this.b.y = b.y;
+
+            this.enabled = true;
+        },
+        updateB(x: number, y: number) {
+            this.b.x = x;
+            this.b.y = y;
+        },
+        disable() {
+            this.enabled = false;
+        },
+        isMinSize(minPixels: number = 10) {
+            return (
+                Math.max(
+                    Math.abs(this.a.x - this.b.x),
+                    Math.abs(this.a.y - this.b.y)
+                ) >= minPixels
+            );
+        },
+    },
+});

frontend/utils/rect.ts

@@ -0,0 +1,11 @@
+export function intersectRect(
+    a: { x: number; y: number; width: number; height: number },
+    b: { x: number; y: number; width: number; height: number }
+): boolean {
+    return !(
+        b.x > a.x + a.width ||
+        b.x + b.width < a.x ||
+        b.y > a.y + a.height ||
+        b.y + b.height < a.y
+    );
+}

frontend/utils/selection.ts

@@ -7,11 +7,11 @@ import type { DirectoryEntry } from '~/shared/types';
  */
 export function getTargetsFromSelection(
     targetEntry: DirectoryEntry,
-    selection: Set<DirectoryEntry>
+    selection: Map<string, DirectoryEntry>
 ): DirectoryEntry[] {
-    if (selection.size === 0 || !selection.has(targetEntry)) {
+    if (selection.size === 0 || !selection.has(targetEntry.name)) {
         return [targetEntry];
     }
 
-    return Array.from(selection);
+    return Array.from(selection.values());
 }