feat: 支持预览灯条排序效果。

src/components/led-strip-parts-sorter.tsx

@@ -0,0 +1,79 @@
+import {
+  Component,
+  createContext,
+  createEffect,
+  createMemo,
+  createSignal,
+  For,
+  JSX,
+  onCleanup,
+} from 'solid-js';
+import { LedStripConfig, LedStripPixelMapper } from '../models/led-strip-config';
+import { ledStripStore } from '../stores/led-strip.store';
+
+const SorterItem: Component<{ mapper: LedStripPixelMapper; strip: LedStripConfig }> = (
+  props,
+) => {
+  const [fullLeds, setFullLeds] = createSignal<string[]>([]);
+
+  createEffect(() => {
+    let stopped = false;
+    const frame = () => {
+      const strips = ledStripStore.strips;
+      const totalLedCount = strips.reduce((acc, strip) => acc + strip.len, 0);
+
+      const fullLeds = new Array(totalLedCount).fill('rgba(255,255,255,0.5)');
+
+      for (let i = props.mapper.start, j = 0; i < props.mapper.end; i++, j++) {
+        fullLeds[i] = `rgb(${ledStripStore.colors[i * 3]}, ${
+          ledStripStore.colors[i * 3 + 1]
+        }, ${ledStripStore.colors[i * 3 + 2]})`;
+      }
+
+      setFullLeds(fullLeds);
+
+      if (!stopped) {
+        requestAnimationFrame(frame);
+      }
+    };
+
+    frame();
+
+    onCleanup(() => {
+      stopped = true;
+      console.timeEnd('frame');
+    });
+  });
+
+  return (
+    <div class="flex h-2 m-2">
+      <For each={fullLeds()}>
+        {(it) => (
+          <div
+            class="flex-auto flex h-full w-full justify-center items-center relative"
+            title={it}
+          >
+            <div
+              class="absolute top-1/2 -translate-y-1/2 h-2.5 w-2.5 rounded-full ring-1 ring-stone-300"
+              style={{ background: it }}
+            />
+          </div>
+        )}
+      </For>
+    </div>
+  );
+};
+
+export const LedStripPartsSorter: Component = () => {
+  const context = createContext();
+
+  return (
+    <div>
+      <For each={ledStripStore.strips}>
+        {(strip, index) => (
+          <SorterItem strip={strip} mapper={ledStripStore.mappers[index()]} />
+        )}
+      </For>
+    </div>
+  );
+};