rect file selection

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) =>
-        a.name.localeCompare(b.name)
-    );
+    const entries = warrenStore.current.dir.entries;
+
     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="