Refactoring cursor to be stored in store as key only. A few issues remain.

2023-11-17 19:44:18 -08:00 · 2023-11-17 19:44:18 -08:00 · e20b04189f
commit e20b04189f
parent 8da141744e
5 changed files with 92 additions and 81 deletions
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@ -57,6 +57,8 @@ const globalShortcutHandler = (event: KeyboardEvent) => {
    if (
      event.key === 'ArrowUp' ||
      event.key === 'ArrowDown' ||
+      event.key === 'ArrowLeft' ||
+      event.key === 'ArrowRight' ||
      (c && event.code === 'Space')
    ) {
      event.preventDefault()
@ -65,8 +67,17 @@ const globalShortcutHandler = (event: KeyboardEvent) => {
  }
  //console.log("key pressed", event)
  // For up/down implement custom fast repeat
-  if (event.key === 'ArrowUp') vert = keyup ? 0 : event.altKey ? -10 : -1
-  else if (event.key === 'ArrowDown') vert = keyup ? 0 : event.altKey ? 10 : 1
+  let stride = 1
+  if (store.gallery) {
+    const grid = document.querySelector('.gallery') as HTMLElement
+    stride = getComputedStyle(grid).gridTemplateColumns.split(' ').length
+  }
+  else if (event.altKey) stride *= 10
+  // Long if-else machina for all keys we handle here
+  if (event.key === 'ArrowUp') vert = stride * (keyup ? 0 : -1)
+  else if (event.key === 'ArrowDown') vert = stride * (keyup ? 0 : 1)
+  else if (event.key === 'ArrowLeft') vert = keyup ? 0 : -1
+  else if (event.key === 'ArrowRight') vert = keyup ? 0 : 1
  // Find: process on keydown so that we can bypass the built-in search hotkey
  else if (!keyup && event.key === 'f' && (event.ctrlKey || event.metaKey)) {
    headerMain.value!.toggleSearchInput()
@ -83,6 +94,10 @@ const globalShortcutHandler = (event: KeyboardEvent) => {
  else if (!keyup && event.key === 'a' && (event.ctrlKey || event.metaKey)) {
    fileExplorer.toggleSelectAll()
  }
+  // G toggles Gallery
+  else if (keyup && event.key === 'g') {
+    store.gallery = !store.gallery
+  }
  // Keys 1-3 to sort columns
  else if (
    !input &&
--- a/frontend/src/components/FileExplorer.vue
+++ b/frontend/src/components/FileExplorer.vue
@ -28,11 +28,11 @@

        <tr
          :id="`file-${doc.key}`"
-          :class="{ file: !doc.dir, folder: doc.dir, cursor: store.cursor === doc }"
-          @click="store.cursor = store.cursor === doc ? null : doc"
+          :class="{ file: !doc.dir, folder: doc.dir, cursor: store.cursor === doc.key }"
+          @click="store.cursor = store.cursor === doc.key ? '' : doc.key"
          @contextmenu.prevent="contextMenu($event, doc)"
        >
-          <td class="selection" @click.up.stop="store.cursor = store.cursor === doc ? doc : null">
+          <td class="selection" @click.up.stop="store.cursor = store.cursor === doc.key ? doc.key : ''">
            <input
              type="checkbox"
              tabindex="-1"
@ -53,12 +53,12 @@
                :href="doc.url"
                tabindex="-1"
                @contextmenu.prevent
-                @focus.stop="store.cursor = doc"
+                @focus.stop="store.cursor = doc.key"
                @keyup.left="router.back()"
                @keyup.right.stop="ev => { if (doc.dir) (ev.target as HTMLElement).click() }"
                >{{ doc.name }}</a
              >
-              <button tabindex=-1 v-if="cursor == doc" class="rename-button" @click="() => (editing = doc)">🖊️</button>
+              <button tabindex=-1 v-if="store.cursor == doc.key" class="rename-button" @click="() => (editing = doc)">🖊️</button>
            </template>
          </td>
          <FileModified :doc=doc :key=nowkey />
@ -142,18 +142,18 @@ defineExpose({
    if (order) store.toggleSort(order as SortOrder)
  },
  isCursor() {
-    return store.cursor !== null && editing.value === null
+    return store.cursor && editing.value === null
  },
  cursorRename() {
    editing.value = store.cursor
  },
  cursorSelect() {
-    const doc = store.cursor
-    if (!doc) return
-    if (store.selected.has(doc.key)) {
-      store.selected.delete(doc.key)
+    const key = store.cursor
+    if (!key) return
+    if (store.selected.has(key)) {
+      store.selected.delete(key)
    } else {
-      store.selected.add(doc.key)
+      store.selected.add(key)
    }
    this.cursorMove(1)
  },
@ -161,17 +161,17 @@ defineExpose({
    // Move cursor up or down (keyboard navigation)
    const docs = props.documents
    if (docs.length === 0) {
-      store.cursor = null
+      store.cursor = ''
      return
    }
    const N = docs.length
    const mod = (a: number, b: number) => ((a % b) + b) % b
    const increment = (i: number, d: number) => mod(i + d, N + 1)
    const index =
-      store.cursor !== null ? docs.indexOf(store.cursor) : docs.length
+      store.cursor ? docs.find(doc => doc.key === store.cursor) : docs.length
    const moveto = increment(index, d)
-    store.cursor = docs[moveto] ?? null
-    const tr = store.cursor ? document.getElementById(`file-${store.cursor.key}`) : null
+    store.cursor = docs[moveto]?.key ?? ''
+    const tr = store.cursor ? document.getElementById(`file-${store.cursor}`) : ''
    if (select) {
      // Go forwards, possibly wrapping over the end; the last entry is not toggled
      let [begin, end] = d > 0 ? [index, moveto] : [moveto, index]
@ -201,18 +201,18 @@ const focusBreadcrumb = () => {
 let scrolltimer: any = null
 let scrolltr: any = null
 watchEffect(() => {
-  if (store.cursor && store.cursor !== editing.value) editing.value = null
-  if (editing.value) store.cursor = editing.value
+  if (store.cursor && store.cursor !== editing.value?.key) editing.value = null
+  if (editing.value) store.cursor = editing.value?.key
  if (store.cursor) {
    const a = document.querySelector(
-      `#file-${store.cursor.key} .name a`
+      `#file-${store.cursor} .name a`
    ) as HTMLAnchorElement | null
    if (a) a.focus()
  }
 })
 watchEffect(() => {
  if (!props.documents.length && store.cursor) {
-    store.cursor = null
+    store.cursor = ''
    focusBreadcrumb()
  }
 })
@ -286,7 +286,7 @@ const allSelected = computed({
 const loc = computed(() => props.path.join('/'))

 const contextMenu = (ev: MouseEvent, doc: Doc) => {
-  store.cursor = doc
+  store.cursor = doc.key
  ContextMenu.showContextMenu({
    x: ev.x, y: ev.y, items: [
      { label: 'Rename', onClick: () => { editing.value = doc } },
--- a/frontend/src/components/Gallery.vue
+++ b/frontend/src/components/Gallery.vue
@ -51,43 +51,6 @@ const rename = (doc: Doc, newName: string) => {
  }
  doc.name = newName // We should get an update from watch but this is quicker
 }
-const cursorMove = (d: number, select = false) => {
-  // Move cursor up or down (keyboard navigation)
-  const docs = props.documents
-  if (docs.length === 0) {
-    store.cursor = null
-    return
-  }
-  const N = docs.length
-  const mod = (a: number, b: number) => ((a % b) + b) % b
-  const increment = (i: number, d: number) => mod(i + d, N + 1)
-  const index =
-    store.cursor !== null ? docs.indexOf(store.cursor) : docs.length
-  const moveto = increment(index, d)
-  store.cursor = docs[moveto] ?? null
-  const tr = store.cursor ? document.getElementById(`file-${store.cursor.key}`) : null
-  if (select) {
-    // Go forwards, possibly wrapping over the end; the last entry is not toggled
-    let [begin, end] = d > 0 ? [index, moveto] : [moveto, index]
-    for (let p = begin; p !== end; p = increment(p, 1)) {
-      if (p === N) continue
-      const key = docs[p].key
-      if (store.selected.has(key)) store.selected.delete(key)
-      else store.selected.add(key)
-    }
-  }
-  // @ts-ignore
-  scrolltr = tr
-  if (!scrolltimer) {
-    scrolltimer = setTimeout(() => {
-      if (scrolltr)
-        scrolltr.scrollIntoView({ block: 'center', behavior: 'smooth' })
-      scrolltimer = null
-    }, 300)
-  }
-  if (moveto === N) focusBreadcrumb()
-}
-
 defineExpose({
  newFolder() {
    const now = Math.floor(Date.now() / 1000)
@ -109,22 +72,57 @@ defineExpose({
    if (order) store.toggleSort(order as SortOrder)
  },
  isCursor() {
-    return store.cursor !== null && editing.value === null
+    return store.cursor && editing.value === null
  },
  cursorRename() {
-    editing.value = store.cursor
+    editing.value = props.documents.find(doc => doc.key === store.cursor) ?? null
  },
  cursorSelect() {
-    const doc = store.cursor
-    if (!doc) return
-    if (store.selected.has(doc.key)) {
-      store.selected.delete(doc.key)
+    const key = store.cursor
+    if (!key) return
+    if (store.selected.has(key)) {
+      store.selected.delete(key)
    } else {
-      store.selected.add(doc.key)
+      store.selected.add(key)
    }
    this.cursorMove(1)
  },
-  cursorMove,
+  cursorMove(d: number, select = false) {
+    // Move cursor up or down (keyboard navigation)
+    const docs = props.documents
+    if (docs.length === 0) {
+      store.cursor = ''
+      return
+    }
+    const N = docs.length
+    const mod = (a: number, b: number) => ((a % b) + b) % b
+    const increment = (i: number, d: number) => mod(i + d, N + 1)
+    const index =
+      store.cursor ? docs.findIndex(doc => doc.key === store.cursor) : docs.length
+    const moveto = increment(index, d)
+    store.cursor = docs[moveto]?.key ?? ''
+    const tr = store.cursor ? document.getElementById(`file-${store.cursor}`) : ''
+    if (select) {
+      // Go forwards, possibly wrapping over the end; the last entry is not toggled
+      let [begin, end] = d > 0 ? [index, moveto] : [moveto, index]
+      for (let p = begin; p !== end; p = increment(p, 1)) {
+        if (p === N) continue
+        const key = docs[p].key
+        if (store.selected.has(key)) store.selected.delete(key)
+        else store.selected.add(key)
+      }
+    }
+    // @ts-ignore
+    scrolltr = tr
+    if (!scrolltimer) {
+      scrolltimer = setTimeout(() => {
+        if (scrolltr)
+          scrolltr.scrollIntoView({ block: 'center', behavior: 'smooth' })
+        scrolltimer = null
+      }, 300)
+    }
+    if (moveto === N) focusBreadcrumb()
+  }
 })
 const focusBreadcrumb = () => {
  const el = document.querySelector('.breadcrumb') as HTMLElement | null
@ -133,18 +131,18 @@ const focusBreadcrumb = () => {
 let scrolltimer: any = null
 let scrolltr: any = null
 watchEffect(() => {
-  if (store.cursor && store.cursor !== editing.value) editing.value = null
-  if (editing.value) store.cursor = editing.value
+  if (store.cursor && store.cursor !== editing.value?.key) editing.value = null
+  if (editing.value) store.cursor = editing.value.key
  if (store.cursor) {
    const a = document.querySelector(
-      `#file-${store.cursor.key} .name a`
+      `#file-${store.cursor} a`
    ) as HTMLAnchorElement | null
    if (a) a.focus()
  }
 })
 watchEffect(() => {
  if (!props.documents.length && store.cursor) {
-    store.cursor = null
+    store.cursor = ''
    focusBreadcrumb()
  }
 })
@ -218,7 +216,7 @@ const allSelected = computed({
 const loc = computed(() => props.path.join('/'))

 const contextMenu = (ev: MouseEvent, doc: Doc) => {
-  store.cursor = doc
+  store.cursor = doc.key
  ContextMenu.showContextMenu({
    x: ev.x, y: ev.y, items: [
      { label: 'Rename', onClick: () => { editing.value = doc } },
--- a/frontend/src/components/GalleryFigure.vue
+++ b/frontend/src/components/GalleryFigure.vue
@ -1,19 +1,17 @@
 <template>
  <a
+    :id="`file-${doc.key}`"
    :href="doc.url"
    tabindex=0
+    :class="{ file: !doc.dir, folder: doc.dir, cursor: store.cursor === doc.key }"
    @contextmenu.prevent
-    @focus.stop="store.cursor = doc"
+    @focus.stop="store.cursor = doc.key"
    @click="ev => {
+      store.cursor = store.cursor === doc.key ? '' : doc.key
      if (media) { media.play(); ev.preventDefault() }
    }"
  >
-    <figure
-      :id="`file-${doc.key}`"
-      :class="{ file: !doc.dir, folder: doc.dir, cursor: store.cursor === doc }"
-      @click="store.cursor = store.cursor === doc ? null : doc"
-      @click.up.stop="store.cursor = store.cursor === doc ? doc : null"
-    >
+    <figure>
      <slot></slot>
      <MediaPreview ref=media :doc="doc" />
      <caption>
@ -58,7 +56,7 @@ figure caption {
  color: var(--text-color);
  text-shadow: 0 0 .2rem #000, 0 0 1rem #000;
 }
-figure.cursor caption {
+.cursor caption {
  background: var(--accent-color);
 }
 caption {
--- a/frontend/src/stores/main.ts
+++ b/frontend/src/stores/main.ts
@ -24,7 +24,7 @@ export const useMainStore = defineStore({
    error: '' as string,
    connected: false,
    gallery: false,
-    cursor: shallowRef<Doc | null>(null),
+    cursor: '' as string,
    server: {} as Record<string, any>,
    prefs: {
      sortListing: '' as SortOrder,