[WIP] Managed list

Author: lvegerano

addon/components/sortable-js.hbs

@@ -1,8 +1,10 @@
-<div
-  class="ember-sortable-js"
-  {{did-insert this.didInsert}}
-  {{did-update this.setOptions @options}}
-  ...attributes
->
-  {{yield this.sortable}}
-</div>
+{{#let (element this.element) as |Element|}}
+  <Element
+    class="ember-sortable-js"
+    {{did-insert this.didInsert}}
+    {{did-update this.setOptions @options}}
+    ...attributes
+  >
+    {{yield this.internalList}}
+  </Element>
+{{/let}}

addon/components/sortable-js.js

@@ -1,29 +1,47 @@
 import Component from '@glimmer/component';
 import Sortable from 'sortablejs';
-import { bind } from '@ember/runloop';
+import { bind, scheduleOnce } from '@ember/runloop';
 import { action } from '@ember/object';
+import { next } from '@ember/runloop';
+import { tracked } from '@glimmer/tracking';
+import { move, insertAt, removeFrom } from 'ember-sortablejs/utils/array-utils';
+import { inject as service } from '@ember/service';
 
 export default class SortableJsComponent extends Component {
-  sortable = null;
+  @service dragStore;
+  @tracked list = [];
 
-  #events = [
-    'onChoose',
-    'onUnchoose',
+  #sortableContainer = null;
+  #sortableInstance = null;
+  #internalEvents = [
     'onStart',
-    'onEnd',
     'onAdd',
     'onUpdate',
-    'onSort',
     'onRemove',
+    'onEnd',
+  ];
+  #events = [
     'onMove',
-    'onClone',
     'onChange',
+    'onChoose',
+    'onUnchoose',
+    'onSort',
+    'onClone',
     'scrollFn',
     'setData',
     'onFilter',
     'onSpill',
   ];
 
+  get element() {
+    return this.args.tag || 'div';
+  }
+
+  get internalList() {
+    // fix identity diffing
+    return this.list.map((item, i) => ({ id: i += 1, item }))
+  }
+
   @action
   setOptions() {
     for (let [key, value] of Object.entries(this.args.options)) {
@@ -40,23 +58,75 @@ export default class SortableJsComponent extends Component {
     const defaults = {};
     const options = Object.assign({}, defaults, this.args.options);
 
-    this.sortable = Sortable.create(element, options);
-    this.setupEventHandlers();
+    this.#sortableContainer = element;
+
+    next(this, () => {
+      this.#sortableInstance = Sortable.create(element, options);
+      this.list = [...(this.args.items || [])];
+      this.setupEventHandlers();
+      this.setupInternalEventHandlers();
+    });
   }
 
   willDestroy() {
-    this.sortable.destroy();
+    this.#sortableInstance.destroy();
+  }
+
+  onUpdate(evt) {
+    const {
+      oldDraggableIndex,
+      newDraggableIndex,
+    } = evt;
+
+    this.list = move(this.list, oldDraggableIndex, newDraggableIndex);
+    this.args?.onUpdate?.(evt);
+  }
+
+  onRemove(evt) {
+    const {
+      oldDraggableIndex,
+    } = evt;
+
+    this.list = removeFrom(this.list, oldDraggableIndex);
+    this.args?.onRemove?.(evt);
+  }
+
+  onAdd(evt) {
+    // evt.item.remove(); // without this DOM is wrong
+    const {
+      oldDraggableIndex,
+      newDraggableIndex,
+    } = evt;
+    const oldItem = this.dragStore.dragging.list[oldDraggableIndex];
+    this.list = insertAt(this.list, newDraggableIndex, oldItem)
+    this.args?.onAdd?.(evt);
+  }
+
+  onStart(evt) {
+    this.dragStore.dragging = this;
+    this.args?.onStart?.(evt);
+  }
+
+  onEnd(evt) {
+    this.args?.onEnd?.(evt);
+    this.dragStore.dragging = null;
   }
 
   setupEventHandlers() {
     this.#events.forEach(eventName => {
       const action = this.args[eventName];
       if (typeof action === 'function') {
-        this.sortable.option(eventName, bind(this, 'performExternalAction', eventName));
+        this.#sortableInstance.option(eventName, bind(this, 'performExternalAction', eventName));
       }
     });
   }
 
+  setupInternalEventHandlers() {
+    this.#internalEvents.forEach(eventName => {
+      this.#sortableInstance.option(eventName, bind(this, this[eventName]));
+    });
+  }
+
   performExternalAction(actionName, ...args) {
     let action = this.args[actionName];
 
@@ -66,6 +136,6 @@ export default class SortableJsComponent extends Component {
   }
 
   setOption(option, value) {
-    this.sortable.option(option, value);
+    this.#sortableInstance.option(option, value);
   }
 }

addon/services/drag-store.js

@@ -0,0 +1,5 @@
+import Service from '@ember/service';
+
+export default class DragStoreService extends Service {
+  dragging = null;
+}

addon/utils/array-utils.js

@@ -0,0 +1,37 @@
+/**
+ * Moves an array element from one index to another
+ * @param {Array} arr
+ * @param {Number} from
+ * @param {Number} to
+ * @returns {Array} [ ]
+ */
+export function move(arr, from, to) {
+  const clone = [...arr];
+  clone.splice(to, 0, clone.splice(from, 1)[0]);
+  return clone;
+}
+
+/**
+ * Insert an item to an array in the specified index
+ * @param {Array} arr
+ * @param {Number} index
+ * @param {any} item
+ * @returns {Array} [ ]
+ */
+export function insertAt(arr, index, item) {
+  const clone = [...arr];
+  clone.splice(index, 0, item)
+  return clone;
+}
+
+/**
+ * Insert an item to an array in the specified index
+ * @param {Array} arr
+ * @param {Number} index
+ * @returns {Array} [ ]
+ */
+export function removeFrom(arr, index) {
+  const clone = [...arr];
+  clone.splice(index, 1);
+  return clone;
+}

app/services/drag-store.js

@@ -0,0 +1 @@
+export { default } from 'ember-sortablejs/services/drag-store';