Merge pull request #80 from gtmun/dnd-kit-0.4

Bump to dnd-kit 0.4.0

Author: endorpersand

package.json

@@ -39,7 +39,8 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"@dnd-kit/svelte": "^0.3.2",
+		"@dnd-kit/dom": "^0.4.0",
+		"@dnd-kit/svelte": "^0.4.0",
 		"chroma-js": "^3.2.0",
 		"csv": "^6.4.1",
 		"dexie": "^4.3.0",

pnpm-lock.yaml

@@ -17,7 +17,7 @@
     import { type Delegate, findDelegate } from "$lib/db/delegates";
     import type { DelegateID, Speaker, SpeakerEntryID } from "$lib/types";
     import { a11yLabel } from "$lib/util";
-    import { createSortable, handleDrag, move } from "$lib/util/dnd";
+    import { createSortable, handleDrag } from "$lib/util/dnd";
     import { proxify } from "$lib/util/sv.svelte";
     import MdiCancel from "~icons/mdi/cancel";
     import MdiDelete from "~icons/mdi/delete";
@@ -285,10 +285,8 @@
     </h5>
 
     <DragDropProvider
-        onDragMove={handleDrag(dndItems)}
-        onDragEnd={handleDrag((oldIdx, newIdx) => {
-            move(dndItems, oldIdx, newIdx);
-    
+        onDragOver={handleDrag(dndItems)}
+        onDragEnd={handleDrag(() => {
             if (insertPoint > 0) {
                 const original = order.slice(-insertPoint);
                 const dragged = dndItems.slice(-insertPoint);
@@ -306,14 +304,14 @@
             aria-labelledby="sl-header-{sid}"
         >
             {#each dndItems as speaker, i (speaker.id)}
-                {@const sortable = createSortable({ id: speaker.id, index: i })}
+                {@const sortable = createSortable({ id: speaker.id, get index() { return i; } })}
                 {@const selected = speaker.id === selectedSpeakerId}
                 {@const delAttrs = findDelegate(delegates, speaker.key)}
                 {@const speakerLabel = delAttrs?.name ?? "unknown"}
 
                 <li
                     class={[
-                        "flex items-center gap-1 p-1",
+                        "flex items-center gap-1 p-1 preset-ui",
                         "data-dnd-dragging:rounded data-dnd-dragging:preset-tonal-primary",
                         "data-dnd-placeholder:rounded data-dnd-placeholder:*:invisible data-dnd-placeholder:bg-surface-200-800",
                         // If insert point exists, color the border where the insert point starts EXCEPT when dragging

src/lib/components/SpeakerList.svelte

@@ -11,11 +11,15 @@
  * or the moving element by using data-dnd-dragging:... as Tailwind classes.
  */
 
+import { Feedback, type FeedbackType } from "@dnd-kit/dom";
 import type { DragDropEventHandlers } from "@dnd-kit/svelte";
 import { createSortable as _createSortable, isSortable, type CreateSortableInput } from "@dnd-kit/svelte/sortable";
 
-export function createSortable(input: CreateSortableInput) {
-    return _createSortable({ feedback: "clone", ...input });
+export function createSortable(input: CreateSortableInput, feedback: FeedbackType = "clone") {
+    return _createSortable({
+        ...input,
+        plugins: (defaults) => [...defaults, Feedback.configure({ feedback })]
+    });
 }
 
 type OnMove = (oldIdx: number, newIdx: number) => void;
@@ -30,9 +34,9 @@ type DndEventHandlerParam = Pick<Parameters<DndEventHandler>[0], "operation">;
  * 
  * ```svelte
  * <DragDropProvider
- *     onDragMove={handleDrag(dndItems)}
+ *     onDragOver={handleDrag(dndItems)}
  *     onDragEnd={handleDrag(
- *         (oldIdx, newIdx) => order = move(dndItems, oldIdx, newIdx),
+ *         () => order = dndItems,
  *         { delay: 300 }
  *     )}
  * >
@@ -66,12 +70,9 @@ export function handleDrag(
 
     // Actual event handler, which finds the indexes and performs the move on the indices.
     return (e: DndEventHandlerParam) => {
-        const { source, canceled } = e.operation;
-        if (!canceled && isSortable(source)) {
-            const oldIdx = source.sortable.initialIndex;
-            const newIdx = source.sortable.index;
-            
-            callback(oldIdx, newIdx);
+        const { source, target, canceled } = e.operation;
+        if (!canceled && isSortable(source) && isSortable(target)) {
+            callback(source.index, target.index);
         }
     };
 }

src/lib/util/dnd.ts

@@ -23,7 +23,7 @@
   import { compareMotions as motionComparator } from "$lib/motions/sort";
   import type { Motion } from "$lib/types";
   import { a11yLabel, hasKey } from "$lib/util";
-  import { createSortable, handleDrag, move } from "$lib/util/dnd";
+  import { createSortable, handleDrag } from "$lib/util/dnd";
   import { proxify } from "$lib/util/sv.svelte";
   import { stringifyTime } from "$lib/util/time";
   import MdiAccountClock from "~icons/mdi/account-clock";
@@ -197,17 +197,17 @@
           class="bg-surface-50-950"
         >
           <DragDropProvider
-            onDragMove={handleDrag(dndItems)}
-            onDragEnd={handleDrag((oldIdx, newIdx) => $motions = move(dndItems, oldIdx, newIdx), { delay: 300 })}
+            onDragOver={handleDrag(dndItems)}
+            onDragEnd={handleDrag(() => $motions = dndItems, { delay: 300 })}
           >
             {#each dndItems as motion, i (motion.id)}
               {@const delAttrs = findDelegate($delegates, motion.delegate)}
               {@const delName = delAttrs?.name ?? "unknown"}
-              {@const sortable = createSortable({ id: motion.id, index: i, feedback: "default" })}
+              {@const sortable = createSortable({ id: motion.id, get index() { return i; }}, "default")}
               <tr
                 {@attach sortable.attach}
                 class={[
-                  "hover:preset-tonal-primary [&_td]:tabular-nums",
+                  "preset-tonal-surface hover:preset-tonal-primary [&_td]:tabular-nums",
                   "data-dnd-dragging:preset-tonal-primary"
                 ]}
                 animate:flip={{ duration: 150 }}