Add updateOrder event streams

Author: jvanbruegge

src/eventHandler.ts

@@ -1,15 +1,15 @@
 import { VNode } from '@cycle/dom';
 
-import { SortableOptions } from './makeSortable';
+import { SortableOptions, UpdateOrder } from './makeSortable';
 
 import { mousedownHandler } from './eventHandlers/mousedown';
 import { mouseupHandler } from './eventHandlers/mouseup';
 import { mousemoveHandler } from './eventHandlers/mousemove';
 
 export function handleEvent(
     options: SortableOptions
-): (node: VNode, event: MouseEvent) => VNode {
-    return function(node: VNode, event: MouseEvent): VNode {
+): (data: [VNode, any], event: MouseEvent) => [VNode, UpdateOrder | undefined] {
+    return function(data, event) {
         const eventHandlerMapping = {
             mousedown: mousedownHandler,
             touchstart: mousedownHandler,
@@ -19,6 +19,6 @@ export function handleEvent(
             mousemove: mousemoveHandler,
             touchmove: mousemoveHandler
         };
-        return eventHandlerMapping[event.type](node, event, options);
+        return eventHandlerMapping[event.type](data[0], event, options);
     };
 }

src/eventHandlers/mousedown.ts

@@ -16,7 +16,7 @@ export function mousedownHandler(
     node: VNode,
     ev: MouseEvent,
     opts: SortableOptions
-): VNode {
+): [VNode, undefined] {
     const item: Element = ev.currentTarget as Element;
     const indexClicked = [...item.parentElement.children].indexOf(item);
 
@@ -29,15 +29,18 @@ export function mousedownHandler(
             ] as VNode)
         );
 
-    return {
-        ...addDataEntry(node, 'style', {
-            ...selectNames
-                .map(n => ({ [n]: 'none' }))
-                .reduce((a, c) => ({ ...a, ...c }), {}),
-            position: 'relative'
-        }),
-        children
-    };
+    return [
+        {
+            ...addDataEntry(node, 'style', {
+                ...selectNames
+                    .map(n => ({ [n]: 'none' }))
+                    .reduce((a, c) => ({ ...a, ...c }), {}),
+                position: 'relative'
+            }),
+            children
+        },
+        undefined
+    ];
 }
 
 function addData(node: VNode, index: number): VNode {

src/eventHandlers/mousemove.ts

@@ -1,13 +1,13 @@
 import { VNode } from '@cycle/dom';
 
-import { SortableOptions } from '../makeSortable';
+import { SortableOptions, UpdateOrder } from '../makeSortable';
 import { addDataEntry } from '../helpers';
 
 export function mousemoveHandler(
     node: VNode,
     ev: MouseEvent,
     opts: SortableOptions
-): VNode {
+): [VNode, undefined | UpdateOrder] {
     const item: Element = (node.children as any[])
         .map(n => n.data.dataset.item)
         .filter(n => !!n)[0];
@@ -29,21 +29,32 @@ export function mousemoveHandler(
         swapIndex = index + 1;
     }
 
+    let updateOrder = undefined;
+
     if (swapIndex !== index) {
         const tmp = children[index];
         children[index] = children[swapIndex];
         children[swapIndex] = tmp;
+
+        updateOrder = {
+            indexMap: [],
+            oldIndex: index,
+            swapIndex: index
+        };
     }
 
     children[children.length - 1] = updateGhost(
         children[children.length - 1],
         ev
     );
 
-    return {
-        ...node,
-        children
-    };
+    return [
+        {
+            ...node,
+            children
+        },
+        updateOrder
+    ];
 }
 
 function getArea(item: Element): number {

src/eventHandlers/mouseup.ts

@@ -8,13 +8,21 @@ export function mouseupHandler(
     node: VNode,
     ev: MouseEvent,
     opts: SortableOptions
-): VNode {
+): [VNode, undefined] {
     const children = node.children.slice(0, -1).map(cleanup);
 
-    return {
-        ...deleteData(node, 'style', ['position'].concat(selectNames), true),
-        children
-    };
+    return [
+        {
+            ...deleteData(
+                node,
+                'style',
+                ['position'].concat(selectNames),
+                true
+            ),
+            children
+        },
+        undefined
+    ];
 }
 
 function cleanup(node: VNode): VNode {

src/makeSortable.ts

@@ -21,6 +21,12 @@ export interface SortableOptions {
     selectionDelay?: number;
 }
 
+export interface UpdateOrder {
+    indexMap: { [old: number]: number };
+    oldIndex: number;
+    newIndex: number;
+}
+
 export function toSortable(options: SortableOptions): HOC {
     return component => makeSortable(component, options);
 }
@@ -81,22 +87,58 @@ export function makeSortable(
             .map(start => move$.endWhen(mouseup$))
             .flatten();
 
-        const vdom$: Stream<VNode> = childDOM$
+        const data$: Stream<[VNode, UpdateOrder | undefined]> = childDOM$
             .map(dom =>
                 xs
                     .merge(mousedown$, mousemove$, mouseup$)
-                    .fold(eventHandler, dom)
+                    .fold(eventHandler, [dom, undefined])
             )
             .flatten();
 
+        const vdom$: Stream<VNode> = data$.map(([dom, _]) => dom);
+
+        const updateOrder$: Stream<UpdateOrder> = data$
+            .map(([_, x]) => x)
+            .filter(x => x !== undefined);
+
+        const updateAccumulated$: Stream<UpdateOrder> = mousedown$
+            .mapTo(updateOrder$
+                .fold(
+                    (acc, curr) => ({
+                        indexMap: acc.indexMap
+                            ? Object.keys(acc.indexMap)
+                                  .map(k => ({
+                                      [k]: curr.indexMap[acc.indexMap[k]]
+                                  }))
+                                  .reduce((a, c) => ({ ...a, ...c }), {})
+                            : curr.indexMap,
+                        oldIndex:
+                            acc.oldIndex === -1 ? curr.oldIndex : acc.oldIndex,
+                        newIndex: curr.newIndex
+                    }),
+                    {
+                        indexMap: undefined,
+                        oldIndex: -1,
+                        newIndex: -1
+                    }
+                )
+                .drop(1) as Stream<UpdateOrder>)
+            .flatten();
+
+        const updateDone$: Stream<UpdateOrder> = mouseup$
+            .compose(sampleCombine(updateAccumulated$))
+            .map(([_, x]) => x);
+
         const dragInProgress$ = xs
             .merge(mousedown$, mouseup$)
             .fold(acc => !acc, false);
 
         return {
             ...sinks,
             DOM: adapt(vdom$),
-            drag: adapt(dragInProgress$)
+            drag: adapt(dragInProgress$),
+            updateLive: adapt(updateOrder$),
+            updateDone$: adapt(updateDone$)
         };
     };
 }