rect file selection

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
+            );
+        },
+    },
+});