Add forward shift-select (#28)

src/components/SelectionManager.vue

@@ -52,10 +52,16 @@ import GlobalMixin from "../mixins/GlobalMixin";
 import UserConfig from "../mixins/UserConfig";
 
 import { showError } from "@nextcloud/dialogs";
-import { generateUrl } from "@nextcloud/router";
 import { NcActions, NcActionButton } from "@nextcloud/vue";
 import { translate as t, translatePlural as n } from "@nextcloud/l10n";
-import { IDay, IHeadRow, IPhoto, ISelectionAction } from "../types";
+import {
+  IDay,
+  IHeadRow,
+  IPhoto,
+  IRow,
+  IRowType,
+  ISelectionAction,
+} from "../types";
 import { getCurrentUser } from "@nextcloud/auth";
 
 import * as dav from "../services/DavRequests";
@@ -91,6 +97,9 @@ type Selection = Map<number, IPhoto>;
 export default class SelectionManager extends Mixins(GlobalMixin, UserConfig) {
   @Prop() public heads: { [dayid: number]: IHeadRow };
 
+  /** Rows are in ascending order (desc is normal) */
+  @Prop() public isreverse: boolean;
+
   private show = false;
   private size = 0;
   private readonly selection!: Selection;
@@ -328,6 +337,65 @@ export default class SelectionManager extends Mixins(GlobalMixin, UserConfig) {
     }
   }
 
+  /** Multi-select */
+  public selectMulti(photo: IPhoto, rows: IRow[], rowIdx: number) {
+    console.log("selectMulti", photo, rows, rowIdx);
+    const pRow = rows[rowIdx];
+    const pIdx = pRow.photos.indexOf(photo);
+    if (pIdx === -1) return;
+
+    const updateDaySet = new Set<number>();
+    let behind = [];
+    let behindFound = false;
+
+    // Look behind
+    for (let i = rowIdx; i > rowIdx - 100; i--) {
+      if (i < 0) break;
+      if (rows[i].type !== IRowType.PHOTOS) continue;
+      if (!rows[i].photos?.length) break;
+
+      const sj = i === rowIdx ? pIdx : rows[i].photos.length - 1;
+      for (let j = sj; j >= 0; j--) {
+        const p = rows[i].photos[j];
+        if (p.flag & this.c.FLAG_PLACEHOLDER || !p.fileid) continue;
+        if (p.flag & this.c.FLAG_SELECTED) {
+          behindFound = true;
+          break;
+        }
+        behind.push(p);
+        updateDaySet.add(p.d.dayid);
+      }
+
+      if (behindFound) break;
+    }
+
+    // Select everything behind
+    if (behindFound) {
+      // Clear everything in front in this day
+      const pdIdx = photo.d.detail.indexOf(photo);
+      for (let i = pdIdx + 1; i < photo.d.detail.length; i++) {
+        const p = photo.d.detail[i];
+        if (p.flag & this.c.FLAG_SELECTED) this.selectPhoto(p, false, true);
+      }
+
+      // Clear everything else in front
+      Array.from(this.selection.values())
+        .filter((p) => {
+          return this.isreverse
+            ? p.d.dayid > photo.d.dayid
+            : p.d.dayid < photo.d.dayid;
+        })
+        .forEach((photo: IPhoto) => {
+          this.selectPhoto(photo, false, true);
+          updateDaySet.add(photo.d.dayid);
+        });
+
+      behind.forEach((p) => this.selectPhoto(p, true, true));
+      updateDaySet.forEach((d) => this.updateHeadSelected(this.heads[d]));
+      this.$forceUpdate();
+    }
+  }
+
   /** Select or deselect all photos in a head */
   public selectHead(head: IHeadRow) {
     head.selected = !head.selected;

src/components/Timeline.vue

@@ -52,7 +52,7 @@
         </div>
       </template>
 
-      <template v-slot="{ item }">
+      <template v-slot="{ item, index }">
         <div
           v-if="item.type === 0"
           class="head-row"
@@ -98,7 +98,7 @@
               :day="item.day"
               :key="photo.fileid"
               @select="selectionManager.selectPhoto"
-              @click="clickPhoto(photo)"
+              @click="clickPhoto(photo, $event, index)"
             />
           </div>
         </template>
@@ -117,6 +117,7 @@
     <SelectionManager
       ref="selectionManager"
       :heads="heads"
+      :isreverse="isMonthView"
       @refresh="softRefresh"
       @delete="deleteFromViewWithAnimation"
       @updateLoading="updateLoading"
@@ -312,7 +313,7 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
     return window.innerWidth <= 600;
   }
 
-  isMonthView() {
+  get isMonthView() {
     return this.$route.name === "albums";
   }
 
@@ -595,7 +596,7 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
     }
 
     // Month view
-    if (this.isMonthView()) {
+    if (this.isMonthView) {
       query.set("monthView", "1");
       query.set("reverse", "1");
     }
@@ -649,7 +650,7 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
     // because this call is terribly slow even on desktop
     const dateTaken = utils.dayIdToDate(head.dayId);
     let name: string;
-    if (this.isMonthView()) {
+    if (this.isMonthView) {
       name = utils.getMonthDateStr(dateTaken);
     } else {
       name = utils.getLongDateStr(dateTaken, true);
@@ -855,7 +856,7 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
     this.fetchDayQueue.push(dayId);
 
     // Only single queries allowed for month vie
-    if (now || this.isMonthView()) {
+    if (now || this.isMonthView) {
       return this.fetchDayExpire();
     }
 
@@ -1193,12 +1194,15 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
   }
 
   /** Clicking on photo */
-  clickPhoto(photo: IPhoto) {
+  clickPhoto(photo: IPhoto, event: any, rowIdx: number) {
     if (photo.flag & this.c.FLAG_PLACEHOLDER) return;
 
     if (this.selectionManager.has()) {
-      // selection mode
-      this.selectionManager.selectPhoto(photo);
+      if (event.shiftKey) {
+        this.selectionManager.selectMulti(photo, this.list, rowIdx);
+      } else {
+        this.selectionManager.selectPhoto(photo);
+      }
     } else {
       this.$router.push({
         ...this.$route,