dev -- cleanup dragging interactions and styling

Author: Sup2point0

src/parts/add-subtitle.svelte

@@ -39,7 +39,7 @@ function add_subtitle()
 
 button {
   padding: 0 1.5rem;
-  margin-top: 1rem;
+  margin: 1rem 5rem 0;
   @include font-code;
   color: rgb(black, 20%);
   font-size: 200%;

src/parts/insert.svelte

@@ -3,16 +3,18 @@
 <script lang="ts">
 
 import type { Int } from "#scripts/types";
+import type { DraggingData } from "#src/routes/subtitles-view.svelte";
 
 import { subtitles } from "#scripts/stores";
 import { Subtitle } from "#scripts/types";
 
 
 interface Props {
   index: Int;
+  dragging: DraggingData;
 }
 
-let { index } = $props();
+let { index, dragging }: Props = $props();
 
 
 function insert_subtitle()
@@ -24,7 +26,11 @@ function insert_subtitle()
 </script>
 
 
-<button class="insert" onclick={insert_subtitle}>
+<button
+  class="insert"
+  class:hidden={dragging.sub_id}
+  onclick={insert_subtitle}
+>
   <div class="line"></div>
   <div class="add">+</div>
 </button>
@@ -34,37 +40,21 @@ function insert_subtitle()
 
 button.insert {
   width: calc(100% + 1.5rem);
-  height: 1em;
+  height: 1rem;
   position: absolute;
   z-index: 2;
   top: 0;
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
+
   font-size: 150%;
   background: none;
   border: none;
-  transform: translateY(-0.9rem);
+  transform: translateY(-0.64rem);
+  opacity: 1.0;
   transition: all 0.1s ease-out;
 
-  .line {
-    width: 100%;
-    height: 0.5rem;
-    background: transparent;
-    border-radius: 0.25rem;
-    transition: all 0.1s ease-out;
-  }
-
-  .add {
-    width: 2rem;
-    height: 2rem;
-    @include font-code;
-    color: rgb(black, 20%);
-    background: transparent;
-    border-radius: 50%;
-    transition: all 0.1s ease-out;
-  }
-
   &:hover, &:focus-visible {
     cursor: pointer;
     color: rgb(black, 50%);
@@ -83,10 +73,34 @@ button.insert {
       background: rgb(black, 20%);
     }
   }
+
+  &.hidden {
+    opacity: 0;
+  }
+}
+
+.line {
+  width: 100%;
+  height: 0.5rem;
+  background: transparent;
+  border-radius: 0.25rem;
+  transition: all 0.1s ease-out;
+}
+
+.add {
+  width: 2rem;
+  min-width: 2rem;
+  height: 2rem;
+  min-height: 2rem;
+  @include font-code;
+  color: rgb(black, 20%);
+  background: transparent;
+  border-radius: 50%;
+  transition: all 0.1s ease-out;
 }
 
 :global(.subtitle:active button.insert) {
-  opacity: 0%;
+  opacity: 0;
 }
 
 </style>

src/parts/subtitle.ghost.svelte

@@ -28,15 +28,18 @@ let { dragging = $bindable() }: Props = $props();
 
 .ghost {
   pointer-events: none;
-  z-index: -2;
+  width: 100%;
   position: absolute;
+  z-index: 20;
   top: 0;
   left: 0;
-  opacity: 0%;
+  background: rgb(black, 8%);
+  backdrop-filter: blur(4px);
+  opacity: 0;
+  transition: opacity 0.1s ease-out;
 
   &.haunting {
-    z-index: 20;
-    opacity: 100%;
+    opacity: 1;
   }
 }
 

src/parts/subtitle.svelte

@@ -15,6 +15,7 @@ import { slide } from "svelte/transition";
 import { expoOut } from "svelte/easing";
 
 import { getContext } from "svelte";
+    import { stopPropagation } from "svelte/legacy";
 
 
 interface Props {
@@ -35,7 +36,8 @@ function onmousedown(e: MouseEvent)
   dragging.sub_id = subtitle.id;
 
   if (dragging.ghost) {
-    dragging.ghost.innerHTML = self.innerHTML;
+    // dragging.ghost.innerHTML = self.innerHTML;
+    dragging.ghost.style.height = `${self.offsetHeight}px`;
   }
 
   dragging.offset_y = self.getBoundingClientRect().y - e.clientY;
@@ -47,22 +49,14 @@ function onmouseenter(e: MouseEvent)
 {
   e.stopPropagation();
 
-  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; });
 }
 
 
@@ -93,18 +87,17 @@ function get(
 
 
 <div style:position="relative">
-<Insert {index} />
+<Insert {index} {dragging} />
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
   class="subtitle"
   class:grabbed={dragging.sub_id === subtitle.id}
   bind:this={self}
-  {onmousedown}
   {onmouseenter}
   transition:slide={{ duration: 400, easing: expoOut }}
 >
-  <div class="grabber">
+  <div class="grabber" {onmousedown}>
     <div>=</div>
   </div>
 
@@ -172,15 +165,16 @@ function get(
     box-shadow: 0 0 4px rgb(black, 20%);
   }
 
-  &:has(.grabber:active) {
-    user-select: none;
-    border-color: $col-prot;
-    outline-color: color.change($col-prot, $alpha: 0.2);
-    box-shadow: 0 0 0 rgb(black, 20%);
-  }
+  // &:has(.grabber:active) {
+  //   user-select: none;
+  //   border-color: $col-prot;
+  //   outline-color: color.change($col-prot, $alpha: 0.2);
+  //   box-shadow: 0 0 0 rgb(black, 20%);
+  // }
 
   &.grabbed {
-    opacity: 0%;
+    user-select: none;
+    opacity: 0;
   }
 }
 
@@ -201,21 +195,23 @@ function get(
 
 
 .grabber {
-  padding: 0 0.5rem;
+  padding: 0 0.1rem;
   display: flex;
   justify-content: center;
   align-items: center;
   @include font-code;
   color: rgb(black, 20%);
+  font-size: 150%;
   opacity: 0;
   transition: all 0.1s ease-out;
 
   .subtitle:where(:hover, :focus-visible) & {
-    opacity: 100%;
+    opacity: 1;
   }
 
   &:hover {
     cursor: grab;
+    color: rgb(black, 50%);
   }
 
   &:active {
@@ -243,7 +239,7 @@ function get(
   transition: all 0.1s ease-out;
 
   .subtitle:where(:hover, :focus-visible, :focus-within) &{
-    opacity: 100%;
+    opacity: 1;
   }
   .subtitle:where(:hover, :focus-visible, :focus-within) &[disabled] {
     pointer-events: none;

src/parts/textarea.svelte

@@ -19,7 +19,6 @@ let { value = $bindable() }: Props = $props();
 textarea {
   resize: none;
   flex-grow: 1;
-  // width: 20em;
   height: 5em;
   padding: 0.75em;
   @include font-ui;

src/routes/subtitles-view.svelte

@@ -8,9 +8,7 @@ export interface DraggingData {
   root:   HTMLElement | null;
   ghost:  HTMLElement | null;
 
-  sub_id:        Int | null;
-  reordering_id: Int | null;
-
+  sub_id: Int | null;
   direction: "up" | "down";
   mouse_y_previous: number;
 
@@ -39,8 +37,6 @@ let dragging: DraggingData = $state({
   ghost: null,
 
   sub_id: null,
-  reordering_id: null,
-
   direction: "down",
   mouse_y_previous: 0,
   
@@ -80,7 +76,6 @@ function onmouseup(e: MouseEvent)
 {
   e.stopPropagation();
   dragging.sub_id = null;
-  dragging.reordering_id = null;
 }
 
 </script>