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>