refactor rect selection to make it work in shares

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;