From fa5e27f72ab3c2072650bbb0d02593dedcfbc6e7 Mon Sep 17 00:00:00 2001
From: Ivan Li <ivanli2048@gmail.com>
Date: Sun, 2 Apr 2023 17:18:47 +0800
Subject: [PATCH] =?UTF-8?q?feat(GUI):=20=E7=81=AF=E6=9D=A1=E6=AE=B5?=
 =?UTF-8?q?=E6=8B=96=E6=8B=BD=E6=8E=92=E5=BA=8F=E5=8A=9F=E8=83=BD=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=EF=BC=8C=E6=94=AF=E6=8C=81=E8=BF=9E=E7=BB=AD=E6=8B=96?=
 =?UTF-8?q?=E6=8B=BD=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/led-strip-parts-sorter.tsx | 32 ++++++++++++++++++++---
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/components/led-strip-parts-sorter.tsx b/src/components/led-strip-parts-sorter.tsx
index 244d502..9dce2e3 100644
--- a/src/components/led-strip-parts-sorter.tsx
+++ b/src/components/led-strip-parts-sorter.tsx
@@ -1,11 +1,15 @@
 import {
+  batch,
   Component,
   createContext,
   createEffect,
   createMemo,
   createSignal,
   For,
+  Index,
   JSX,
+  on,
+  untrack,
   useContext,
 } from 'solid-js';
 import { LedStripConfig, LedStripPixelMapper } from '../models/led-strip-config';
@@ -22,13 +26,13 @@ const SorterItem: Component<{ strip: LedStripConfig; mapper: LedStripPixelMapper
   const [dragStart, setDragStart] = createSignal<{ x: number; y: number } | null>(null);
   const [dragCurr, setDragCurr] = createSignal<{ x: number; y: number } | null>(null);
   const [dragStartIndex, setDragStartIndex] = createSignal<number>(0);
+  const [cellWidth, setCellWidth] = createSignal<number>(0);
   const [, { setSelectedStripPart }] = useContext(LedStripConfigurationContext);
 
   const move = (targetStart: number) => {
     if (targetStart === props.mapper.start) {
       return;
     }
-    console.log(`target_start ${targetStart}`);
     invoke('move_strip_part', {
       displayId: props.strip.display_id,
       border: props.strip.border,
@@ -36,6 +40,25 @@ const SorterItem: Component<{ strip: LedStripConfig; mapper: LedStripPixelMapper
     }).catch((err) => console.error(err));
   };
 
+  // reset translateX on config updated
+  createEffect(() => {
+    const indexDiff = props.mapper.start - dragStartIndex();
+    untrack(() => {
+      if (!dragStart() || !dragCurr()) {
+        return;
+      }
+
+      const compensation = indexDiff * cellWidth();
+      batch(() => {
+        setDragStartIndex(props.mapper.start);
+        setDragStart({
+          x: dragStart()!.x + compensation,
+          y: dragCurr()!.y,
+        });
+      });
+    });
+  });
+
   const onPointerDown = (ev: PointerEvent) => {
     if (ev.button !== 0) {
       return;
@@ -74,6 +97,7 @@ const SorterItem: Component<{ strip: LedStripConfig; mapper: LedStripPixelMapper
     if (moved === 0) {
       return;
     }
+    setCellWidth(cellWidth);
     move(props.mapper.start + moved);
   };
 
@@ -174,11 +198,11 @@ export const LedStripPartsSorter: Component = () => {
       }}
     >
       <SorterResult />
-      <For each={ledStripStore.strips}>
+      <Index each={ledStripStore.strips}>
         {(strip, index) => (
-          <SorterItem strip={strip} mapper={ledStripStore.mappers[index()]} />
+          <SorterItem strip={strip()} mapper={ledStripStore.mappers[index]} />
         )}
-      </For>
+      </Index>
     </div>
   );
 };