fix(sortable): set external original index to -1, so spillTarget.drop can recognise them

Author: cormacrelf

packages/sortable/src/directives/external.directive.ts

@@ -24,7 +24,7 @@ export class SkyhookSortableExternal<Data> implements OnChanges, OnDestroy {
     @Input('ssExternal') spec!: SortableSpec<Data>;
 
     /** This source has beginDrag and endDrag implemented in line with what ssRender does.
-     * 
+     *
      * You must, like ssRender, attach it with [dragSource] somewhere.
      */
     public source: DragSource<DraggedItem<Data>>;
@@ -42,9 +42,9 @@ export class SkyhookSortableExternal<Data> implements OnChanges, OnDestroy {
                 return {
                     type: this.spec.type,
                     data: this.spec.createData(),
-                    hover: { index: 0, listId: EXTERNAL_LIST_ID },
+                    hover: { index: -1, listId: EXTERNAL_LIST_ID },
                     isInternal: false,
-                    index: 0,
+                    index: -1,
                     listId: EXTERNAL_LIST_ID,
                     size: this.size(),
                 }

packages/sortable/src/spillTarget.ts

@@ -16,25 +16,27 @@ export const spillTarget = <Data>(
     config: SpillConfiguration<Data>,
 ): DropTarget<DraggedItem<Data>> => {
 
-    const mutate = (item: DraggedItem<Data>) =>  {
-        item.hover = { listId: SPILLED_LIST_ID, index: 0 };
+    const mutate = (item: DraggedItem<Data> | null) =>  {
+        if (!item) return null;
+        item.hover = { listId: SPILLED_LIST_ID, index: -1 };
         return { ...item };
     }
 
     const hover$ = new Subject<DraggedItem<Data> | null>();
 
     const target = dnd.dropTarget<DraggedItem<Data>>(types, {
-        hover: config.hover && (monitor => {
+        hover: monitor => {
             if (monitor.canDrop() && monitor.isOver({ shallow: true })) {
-                hover$.next(monitor.getItem());
+                const item = mutate(monitor.getItem());
+                hover$.next(item);
             } else {
                 hover$.next(null);
             }
-        }),
+        },
         drop: config.drop && (monitor => {
-            const item = monitor.getItem();
-            if (config.drop && item && !monitor.didDrop()) {
-                config.drop(mutate(item));
+            const item = mutate(monitor.getItem());
+            if (!monitor.didDrop()) {
+                config.drop && item && config.drop(item);
             }
         }) || undefined
     });
@@ -43,7 +45,7 @@ export const spillTarget = <Data>(
         .pipe(distinctUntilChanged(), filter(a => !!a));
 
     const subs = spilled$.subscribe((item) => {
-        config.hover && item && config.hover(mutate(item));
+        config.hover && item && config.hover(item);
     });
 
     target.add(subs);