409/warren
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rect file selection

Browse Source
This commit is contained in:
Shawn
2025-09-04 18:31:02 +02:00
parent cdd4151462
commit 735e825c7d
9 changed files with 187 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/components/DirectoryEntry.vue
View File

@@ -14,10 +14,12 @@ const renameDialog = useRenameDirectoryDialog();
const {
entry,
entryIndex,
disabled,
draggable = true,
} = defineProps<{
entry: DirectoryEntry;
entryIndex: number;
disabled: boolean;
draggable?: boolean;
}>();
@@ -90,6 +92,7 @@ function onClearCopy() {
<ContextMenu>
<ContextMenuTrigger class="flex sm:w-52">
<button
:data-entry-index="entryIndex"
:disabled="warrenStore.loading || disabled"
:class="[
'bg-accent/30 border-border flex w-full translate-0 flex-row gap-4 overflow-hidden rounded-md border-1 px-4 py-2 outline-0 select-none',

7
frontend/components/DirectoryList.vue
View File

@@ -25,10 +25,6 @@ const emit = defineEmits<{
const { isLoading } = useLoadingIndicator();
const sortedEntries = computed(() =>
entries.toSorted((a, b) => a.name.localeCompare(b.name))
);
function onEntryClicked(entry: DirectoryEntry, event: MouseEvent) {
emit('entry-click', entry, event);
}
@@ -59,8 +55,9 @@ function onEntryDelete(entry: DirectoryEntry, force: boolean) {
@back="() => emit('back')"
/>
<DirectoryEntry
v-for="entry in sortedEntries"
v-for="(entry, i) in entries"
:key="entry.name"
:entry-index="i"
:entry="entry"
:disabled="isLoading || disableEntries"
:draggable="entriesDraggable"

15
frontend/components/SelectionRect.vue Normal file
View File

@@ -0,0 +1,15 @@
<script setup lang="ts">
const rect = useSelectionRect();
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));
</script>
<template>
<div
v-if="rect.enabled && rect.isMinSize()"
class="bg-primary/20 pointer-events-none absolute z-50"
:style="`left: ${left}px; top: ${top}px; width: ${width}px; height: ${height}px;`"
></div>
</template>

1
frontend/layouts/default.vue
View File

@@ -16,6 +16,7 @@ await useAsyncData('warrens', async () => {
<template>
<SidebarProvider>
<SelectionRect />
<ActionsShareDialog />
<ImageViewer />
<AppSidebar />

101
frontend/pages/warrens/files.vue
View File

@@ -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="

28
frontend/stores/index.ts
View File

@@ -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();

39
frontend/stores/selectionRect.ts Normal file
View File

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

11
frontend/utils/rect.ts Normal file
View File

@@ -0,0 +1,11 @@
export function intersectRect(
a: { x: number; y: number; width: number; height: number },
b: { x: number; y: number; width: number; height: number }
): boolean {
return !(
b.x > a.x + a.width ||
b.x + b.width < a.x ||
b.y > a.y + a.height ||
b.y + b.height < a.y
);
}

6
frontend/utils/selection.ts
View File

@@ -7,11 +7,11 @@ import type { DirectoryEntry } from '~/shared/types';
*/
export function getTargetsFromSelection(
targetEntry: DirectoryEntry,
selection: Set<DirectoryEntry>
selection: Map<string, DirectoryEntry>
): DirectoryEntry[] {
if (selection.size === 0 || !selection.has(targetEntry)) {
if (selection.size === 0 || !selection.has(targetEntry.name)) {
return [targetEntry];
}
return Array.from(selection);
return Array.from(selection.values());
}