fix more rect selection bugs

frontend/app.vue

@@ -20,6 +20,7 @@ body,
 #__layout {
     width: 100%;
     height: 100%;
+    overflow: hidden;
 }
 
 * {

frontend/components/SelectionRect.vue

@@ -8,6 +8,10 @@ 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) {
+    if (e.button !== 0) {
+        return;
+    }
+
     const point = { x: e.x, y: e.y };
     rect.set(
         point,
@@ -17,12 +21,16 @@ function onDocumentPointerDown(e: MouseEvent) {
 }
 
 function onDocumentPointerMove(e: MouseEvent) {
+    if (!rect.enabled) {
+        return;
+    }
+
     rect.updateB(e.x, e.y);
 
     if (
         rect.mode !== 'set' ||
-        !rect.enabled ||
-        warrenStore.selection.size === 0
+        warrenStore.selection.size === 0 ||
+        !rect.isMinSize()
     ) {
         return;
     }
@@ -30,22 +38,24 @@ function onDocumentPointerMove(e: MouseEvent) {
     warrenStore.clearSelection();
 }
 
-function onDocumentPointerUp() {
+function onDocumentPointerUp(e: MouseEvent) {
+    if (e.button !== 0 || !rect.enabled) {
+        return;
+    }
+
     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);
+    const left = Math.min(rect.a.x, rect.b.x);
+    const top = Math.min(rect.a.y, rect.b.y);
+    const width = Math.abs(rect.a.x - rect.b.x);
+    const height = Math.abs(rect.a.y - rect.b.y);
 
     if (!rect.isMinSize()) {
+        warrenStore.clearSelection();
         return;
     }
 
@@ -72,8 +82,6 @@ function onDocumentPointerUp() {
         }
     }
 
-    rect.dirty = true;
-
     if (rect.mode === 'set') {
         warrenStore.setSelection(targetEntries);
     } else if (rect.mode === 'add') {

frontend/pages/share.vue

@@ -184,22 +184,12 @@ function onEntryDownload(entry: DirectoryEntry) {
 
     downloadFile(downloadName, downloadApiUrl);
 }
-
-function onParentClick() {
-    if (selectionRect.dirty) {
-        selectionRect.dirty = false;
-        return;
-    }
-
-    warrenStore.clearSelection();
-}
 </script>
 
 <template>
     <div
         v-if="share != null"
         class="flex h-full w-full items-center justify-center px-2"
-        @click="onParentClick"
     >
         <div
             :class="[

frontend/pages/warrens/files.vue

@@ -22,8 +22,6 @@ const dropZone = useDropZone(dropZoneRef, {
     multiple: true,
 });
 
-const selectionRect = useSelectionRect();
-
 if (warrenStore.current == null) {
     await navigateTo({
         path: '/warrens',
@@ -159,19 +157,10 @@ async function onEntryDelete(entry: DirectoryEntry, force: boolean) {
 function onBack() {
     warrenStore.backCurrentPath();
 }
-
-function onParentClick(_e: MouseEvent) {
-    if (selectionRect.dirty) {
-        selectionRect.dirty = false;
-        return;
-    }
-
-    warrenStore.clearSelection();
-}
 </script>
 
 <template>
-    <div ref="dropZoneRef" class="grow" @click="onParentClick">
+    <div ref="dropZoneRef" class="grow">
         <DirectoryListContextMenu class="w-full grow">
             <DirectoryList
                 v-if="

frontend/stores/selectionRect.ts

@@ -3,7 +3,6 @@ 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,
@@ -35,6 +34,14 @@ export const useSelectionRect = defineStore('selection-rect', {
         },
         disable() {
             this.enabled = false;
+            this.a = {
+                x: 0,
+                y: 0,
+            };
+            this.b = {
+                x: 0,
+                y: 0,
+            };
         },
         isMinSize(minPixels: number = 10) {
             return (