WIP Improve multiple selection UX

lib/multi-list-collection.js

@@ -1,53 +1,86 @@
 /** @babel */
 
+import compareSets from 'compare-sets'
+
 import MultiList from './multi-list'
 
 export default class MultiListCollection {
   constructor (lists, didChangeSelection) {
     this.list = new MultiList(lists, (item, key) => {
-      this.lastSelectedItem = item
-      this.lastSelectedKey = key
+      // QUESTION: remove this and just rely on multi-list item and key
+      // this.lastSelectedItem = item
+      // this.lastSelectedKey = key
       didChangeSelection && didChangeSelection(item, key)
     })
-    const selectedKey = this.list.getSelectedListKey()
-    const selectedItem = this.list.getSelectedItem()
-    this.lastSelectedItem = selectedItem
-    this.lastSelectedKey = selectedKey
-    this.selectedKeys = new Set(selectedKey ? [selectedKey] : [])
-    this.selectedItems = new Set(selectedItem ? [selectedItem] : [])
+    const key = this.list.getSelectedListKey()
+    const item = this.list.getSelectedItem()
+    this.tail = {item, key}
+    // QUESTION: remove this and just rely on multi-list item and key
+    // this.lastSelectedItem = selectedItem
+    // this.lastSelectedKey = selectedKey
+    this.selectedKeys = {
+      stash: new Set(key ? [key] : []),
+      store: new Set()
+    }
+    this.selectedItems = {
+      stash: new Set(item ? [item] : []),
+      store: new Set()
+    }
   }
 
   updateLists (lists, {suppressCallback} = {}) {
     this.list.updateLists(lists, {suppressCallback})
     this.updateSelections()
   }
 
-  clearSelectedItems () {
-    this.selectedItems = new Set()
+  clearSelectedItemsStash () {
+    this.selectedItems.stash = new Set()
+  }
+
+  clearSelectedItemsStore () {
+    this.selectedItems.store = new Set()
+  }
+
+  clearSelectedKeysStash () {
+    this.selectedKeys.stash = new Set()
   }
 
-  clearSelectedKeys () {
-    this.selectedKeys = new Set()
+  clearSelectedKeysStore () {
+    this.selectedKeys.store = new Set()
+  }
+
+  clearState () {
+    this.clearSelectedItemsStash()
+    this.clearSelectedItemsStore()
+    this.clearSelectedKeysStash()
+    this.clearSelectedKeysStore()
+    this.tail = null
+  }
+
+  getTail () {
+    return this.tail
   }
 
   getSelectedItems () {
-    return this.selectedItems
+    return new Set(Array.from(this.selectedItems.stash).concat(Array.from(this.selectedItems.store)))
   }
 
   getSelectedKeys () {
-    return this.selectedKeys
+    return new Set(Array.from(this.selectedKeys.stash).concat(Array.from(this.selectedKeys.store)))
   }
 
   getItemsForKey (key) {
     return this.list.getItemsForKey(key)
   }
 
   getLastSelectedListKey () {
-    return this.lastSelectedKey
+    // return this.lastSelectedKey
+    return this.list.getSelectedKey()
   }
 
   getLastSelectedItem () {
-    return this.lastSelectedItem
+    // return this.lastSelectedItem
+    return this.list.getSelectedItem()
   }
 
   selectNextList ({wrap, addToExisting} = {}) {
@@ -71,43 +104,89 @@ export default class MultiListCollection {
   }
 
   updateSelections ({addToExisting} = {}) {
-    const selectedKey = this.list.getSelectedListKey()
-    const selectedItem = this.list.getSelectedItem()
-    this.selectItems(selectedItem ? [selectedItem] : [], {addToExisting, suppressCallback: true})
-    this.selectKeys(selectedKey ? [selectedKey] : [], {addToExisting, suppressCallback: true})
+    const selectedKey = this.getLastSelectedListKey()
+    const selectedItem = this.getLastSelectedItem()
+    this.selectItemForKey(selectedItem, selectedKey, {tail: true, addToExisting, suppressCallback: true})
   }
 
-  selectItems (items, {addToExisting, suppressCallback} = {}) {
-    if (!addToExisting) this.clearSelectedItems()
-    items.forEach(item => this.selectedItems.add(item))
-    const lastItem = items[items.length - 1]
-    this.lastSelectedItem = lastItem
-    this.list.selectItem(lastItem, {suppressCallback})
+  selectItems (items, {addToExisting} = {}) {
+    if (!addToExisting) {
+      this.clearSelectedItemsStash()
+      this.clearSelectedItemsStore()
+    }
+    items.forEach(item => this.selectedItems.stash.add(item))
+    this.list.selectItem(items[items.length - 1], {suppressCallback: this.selectedItems.size === 1})
   }
 
   selectKeys (keys, {addToExisting, suppressCallback} = {}) {
-    if (!addToExisting) this.clearSelectedKeys()
-    keys.forEach(key => this.selectedKeys.add(key))
-    const lastKey = keys[keys.length - 1]
-    this.lastSelectedKey = lastKey
-    this.list.selectListForKey(lastKey, {suppressCallback})
+    if (!addToExisting) {
+      this.clearSelectedKeysStash()
+      this.clearSelectedKeysStore()
+    }
+    keys.forEach(key => this.selectedKeys.stash.add(key))
+    this.list.selectListForKey(keys[keys.length - 1], {suppressCallback})
+  }
+
+  // foo (item) {
+  //   if (this.selectedItems.has(item)) {
+  //     toggleItemForKey()
+  //   } else {
+  //
+  //   }
+  //   selectItemForKey()
+  // }
+
+  selectItemForKey (item, key, {tail, addToExisting} = {}) {
+    if (!this.getItemsForKey(key).includes(item)) throw new Error(`item ${item} not found for key ${key}`)
+    if (!addToExisting) {
+      this.clearState()
+    } else if (tail && tail !== this.tail) {
+      // move stash items to store and then clear stash
+      this.selectedItems.stash.forEach(v => this.selectedItems.store.add(v))
+      this.selectedKeys.stash.forEach(v => this.selectedKeys.store.add(v))
+    }
+    this.clearSelectedItemsStash()
+    this.clearSelectedKeysStash()
+
+    if (tail || !this.tail) this.tail = {key, item}
+    this.selectItemsAndKeysInRange(this.tail, {key, item})
+  }
+
+  toggleItemForKey (item, key) {
+    const itemsForKey = this.getItemsForKey(key)
+    if (!itemsForKey.includes(item)) throw new Error(`item ${item} not found for key ${key}`)
+    const intersection = compareSets(this.getSelectedItems(), new Set(itemsForKey)).retained
+    if (intersection.has(item)) {
+      this.selectedItems.stash.delete(item)
+      this.selectedItems.store.delete(item)
+      if (intersection.size === 1) {
+        this.selectedKeys.stash.delete(key)
+        this.selectedKeys.store.delete(key)
+      }
+      this.selectNewTailNearItemForKey(item, key)
+      // if (this.getSelectedItems().size === 0) this.tail = null
+    } else {
+      // this.selectItems([item], {addToExisting: true})
+      // this.selectKeys([key], {addToExisting: true})
+      this.selectItemForKey(item, key, {tail: true, addToExisting: true})
+    }
+  }
+
+  selectNewTailNearItemForKey (item, key) {
+    // look in selection, order it based on keys and location
   }
 
   selectAllItemsForKey (key, addToExisting) {
     this.selectKeys([key], {addToExisting})
-    this.selectItems(this.list.getItemsForKey(key), {addToExisting})
+    this.selectItems(this.getItemsForKey(key), {addToExisting})
   }
 
   selectFirstItemForKey (key, {addToExisting} = {}) {
     this.selectKeys([key], {addToExisting})
-    this.selectItems([this.list.getItemsForKey(key)[0]], {addToExisting})
+    this.selectItems([this.getItemsForKey(key)[0]], {addToExisting})
   }
 
-  selectItemsAndKeysInRange (endPoint1, endPoint2, addToExisting) {
-    if (!addToExisting) {
-      this.clearSelectedItems()
-      this.clearSelectedKeys()
-    }
+  selectItemsAndKeysInRange (endPoint1, endPoint2) {
     // TODO: optimize
     const listKeys = this.list.getListKeys()
     const index1 = listKeys.indexOf(endPoint1.key)
@@ -133,7 +212,7 @@ export default class MultiListCollection {
     if (endItemIndex < 0) throw new Error(`item "${endPoint.item}" not found`)
 
     if (startKeyIndex === endKeyIndex) {
-      const items = this.list.getItemsForKey(listKeys[startKeyIndex])
+      const items = this.getItemsForKey(listKeys[startKeyIndex])
       const indexes = [startItemIndex, endItemIndex].sort()
       this.selectKeys([startPoint.key], {addToExisting: true, suppressCallback: true})
       this.selectItems(items.slice(indexes[0], indexes[1] + 1), {addToExisting: true})
@@ -143,7 +222,7 @@ export default class MultiListCollection {
     for (let i = startKeyIndex; i <= endKeyIndex; i++) {
       const key = listKeys[i]
       this.selectKeys([key], {addToExisting: true, suppressCallback: true})
-      const items = this.list.getItemsForKey(key)
+      const items = this.getItemsForKey(key)
       if (i === startKeyIndex) {
         this.selectItems(items.slice(startItemIndex), {addToExisting: true})
       } else if (i === endKeyIndex) {

package.json

@@ -14,6 +14,7 @@
   },
   "atomTestRunner": "./test/runner",
   "dependencies": {
+    "compare-sets": "^1.0.1",
     "diff": "2.2.2",
     "etch": "0.6.3",
     "etch-stateless": "^1.0.0",