fix -- properly implement drag reordering

Author: Sup2point0

src/parts/subtitle.ghost.svelte

@@ -9,14 +9,14 @@ interface Props {
   dragging: DraggingData;
 }
 
-let { dragging }: Props = $props();
+let { dragging = $bindable() }: Props = $props();
 
 </script>
 
 
 <div
   class="ghost subtitle"
-  class:haunting={dragging.grabbed}
+  class:haunting={dragging.sub_id}
   bind:this={dragging.ghost}
   style:top="{dragging.mouse_y + dragging.offset_y - dragging.layer_y}px"
 >

src/parts/subtitle.svelte

@@ -15,7 +15,6 @@ import { slide } from "svelte/transition";
 import { expoOut } from "svelte/easing";
 
 import { getContext } from "svelte";
-    import { json } from "@sveltejs/kit";
 
 
 interface Props {
@@ -33,7 +32,7 @@ let self: HTMLElement;
 
 function onmousedown(e: MouseEvent)
 {
-  dragging.grabbed = self;
+  dragging.sub_id = subtitle.id;
 
   if (dragging.ghost) {
     dragging.ghost.innerHTML = self.innerHTML;
@@ -48,17 +47,22 @@ function onmouseenter(e: MouseEvent)
 {
   e.stopPropagation();
 
-  if (
-    dragging.grabbed
-    && e.target != dragging.grabbed
-    && e.target?.classList.contains("subtitle")
-  ) {
-    $subtitles.reorder_before_by_id(
-      parseInt(dragging.grabbed.dataset.subtitleId),
-      parseInt(e.target.dataset.subtitleId)
-    );
-    $subtitles.subs = $subtitles.subs;
+  console.log("dragging.sub_id =", dragging.sub_id);
+  console.log("subtitle.id =", subtitle.id);
+
+  if (!dragging.sub_id || dragging.sub_id === subtitle.id) return;
+
+  // console.log("$subtitles.subs.before =", $subtitles.subs.map(sub => `${sub.id}-${sub.body}`));
+  if (dragging.direction === "up") {
+    $subtitles.reorder_before_by_id(dragging.sub_id, subtitle.id);
+  } else {
+    $subtitles.reorder_after_by_id(dragging.sub_id, subtitle.id);
   }
+  // console.log("$subtitles.subs.after =", $subtitles.subs.map(sub => `${sub.id}-${sub.body}`));
+  $subtitles.subs = $subtitles.subs;
+
+  dragging.reordering_id = subtitle.id;
+  requestAnimationFrame(() => { dragging.reordering_id = null; });
 }
 
 
@@ -94,11 +98,10 @@ function get(
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
   class="subtitle"
-  class:grabbed={dragging.grabbed?.dataset.subtitleId === subtitle.id.toString()}
+  class:grabbed={dragging.sub_id === subtitle.id}
   bind:this={self}
   {onmousedown}
   {onmouseenter}
-  data-subtitle-id={subtitle.id}
   transition:slide={{ duration: 400, easing: expoOut }}
 >
   <div class="grabber">

src/routes/+page.svelte

@@ -5,7 +5,6 @@ import "#styles/essence.scss";
 import SubtitlesView from "./subtitles-view.svelte";
 import Preview from "./preview.svelte";
 
-
 </script>
 
 

src/routes/subtitles-view.svelte

@@ -2,14 +2,21 @@
 
 <script module>
 
+import type { Int } from "#scripts/types";
+
 export interface DraggingData {
-  root:    HTMLElement | null,
-  grabbed: HTMLElement | null,
-  ghost:   HTMLElement | null,
+  root:   HTMLElement | null;
+  ghost:  HTMLElement | null;
+
+  sub_id:        Int | null;
+  reordering_id: Int | null;
+
+  direction: "up" | "down";
+  mouse_y_previous: number;
 
-  mouse_y:  number,
-  offset_y: number,
-  layer_y:  number,
+  mouse_y:  number;
+  offset_y: number;
+  layer_y:  number;
 }
 
 </script>
@@ -29,9 +36,14 @@ import { expoOut } from "svelte/easing";
 
 let dragging: DraggingData = $state({
   root: null,
-  grabbed: null,
   ghost: null,
 
+  sub_id: null,
+  reordering_id: null,
+
+  direction: "down",
+  mouse_y_previous: 0,
+  
   mouse_y: 0,
   offset_y: 0,
   layer_y: 0,
@@ -51,16 +63,24 @@ function onmousemove(e: MouseEvent)
 {
   e.stopPropagation();
 
-  if (dragging.grabbed) {
+  if (dragging.sub_id) {
+    dragging.mouse_y_previous = dragging.mouse_y;
     dragging.mouse_y = e.clientY;
     dragging.layer_y = self.getBoundingClientRect().y;
+
+    if (dragging.mouse_y < dragging.mouse_y_previous) {
+      dragging.direction = "up";
+    } else {
+      dragging.direction = "down";
+    }
   }
 }
 
 function onmouseup(e: MouseEvent)
 {
   e.stopPropagation();
-  dragging.grabbed = null;
+  dragging.sub_id = null;
+  dragging.reordering_id = null;
 }
 
 </script>
@@ -72,7 +92,7 @@ function onmouseup(e: MouseEvent)
   {onmousemove}
   {onmouseup}
 >
-  <SubtitleGhost {dragging} />
+  <SubtitleGhost bind:dragging />
 
   {#each $subtitles.subs as sub, index (sub.id)}
     <div animate:flip={{ duration: 500, easing: expoOut }}>

src/scripts/stores/subtitles-data.svelte.ts

@@ -36,10 +36,11 @@ export class SubtitlesData
   }
 
   /** Change the ordering of one subtitle to a new index in the list. */
-  reorder_to_by_idx(index: Int, new_index: Int): boolean
+  reorder_to_by_idx(index: Int, new_index: Int, correct?: boolean): boolean
   {
+    let idx = new_index - (index < new_index && correct ? 1 : 0);
     let sub = this.subs.splice(index, 1)[0];
-    this.subs.splice(new_index, 0, sub);
+    this.subs.splice(idx, 0, sub);
 
     return true;
   }
@@ -52,7 +53,18 @@ export class SubtitlesData
     let j = this.subs.findIndex(sub => sub.id === target_id);
     if (j === -1) return false;
 
-    return this.reorder_to_by_idx(i, j);
+    return this.reorder_to_by_idx(i, j, true);
+  }
+
+  reorder_after_by_id(subtitle_id: Int, target_id: Int): boolean
+  {
+    let i = this.subs.findIndex(sub => sub.id === subtitle_id);
+    if (i === -1) return false;
+    
+    let j = this.subs.findIndex(sub => sub.id === target_id);
+    if (j === -1) return false;
+
+    return this.reorder_to_by_idx(i, j, false);
   }
 
   /** Delete the given `subtitle`. */
@@ -107,6 +119,7 @@ export class SubtitlesData
     let data = JSON.parse(json);
 
     let out = new SubtitlesData();
+    /* @ts-ignore */
     out.subs = data.subtitles?.map(sub => Subtitle.from_json(sub)) ?? out.subs;
 
     return out;