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

src/App.tsx

@@ -3,9 +3,10 @@ import { invoke } from '@tauri-apps/api/tauri';
 import { DisplayView } from './components/display-view';
 import { DisplayListContainer } from './components/display-list-container';
 import { displayStore, setDisplayStore } from './stores/display.store';
-import { LedStripConfig } from './models/led-strip-config';
+import { LedStripConfigContainer } from './models/led-strip-config';
 import { setLedStripStore } from './stores/led-strip.store';
 import { listen } from '@tauri-apps/api/event';
+import { LedStripPartsSorter } from './components/led-strip-parts-sorter';
 
 function App() {
   createEffect(() => {
@@ -14,19 +15,35 @@ function App() {
         displays: JSON.parse(displays),
       });
     });
-    invoke<LedStripConfig[]>('read_led_strip_configs').then((strips) => {
-      setLedStripStore({
-        strips,
-      });
+    invoke<LedStripConfigContainer>('read_led_strip_configs').then((configs) => {
+      console.log(configs);
+      setLedStripStore(configs);
     });
   });
 
-  // register tauri event listeners
+  // listen to config_changed event
   createEffect(() => {
     const unlisten = listen('config_changed', (event) => {
-      const strips = event.payload as LedStripConfig[];
+      const { strips, mappers } = event.payload as LedStripConfigContainer;
+      console.log(event.payload);
       setLedStripStore({
         strips,
+        mappers,
+      });
+    });
+
+    onCleanup(() => {
+      unlisten.then((unlisten) => unlisten());
+    });
+  });
+
+  // listen to led_colors_changed event
+  createEffect(() => {
+    const unlisten = listen<Uint8ClampedArray>('led_colors_changed', (event) => {
+      const colors = event.payload;
+
+      setLedStripStore({
+        colors,
       });
     });
 
@@ -37,6 +54,7 @@ function App() {
 
   return (
     <div>
+      <LedStripPartsSorter />
       <DisplayListContainer>
         {displayStore.displays.map((display) => {
           return <DisplayView display={display} />;

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>
+  );
+};

src/models/led-strip-config.ts

@@ -1,10 +1,19 @@
 import { Borders } from '../constants/border';
 
+export type LedStripPixelMapper = {
+  start: number;
+  end: number;
+};
+
+export type LedStripConfigContainer = {
+  strips: LedStripConfig[];
+  mappers: LedStripPixelMapper[];
+};
+
 export class LedStripConfig {
   constructor(
     public readonly display_id: number,
     public readonly border: Borders,
-    public start_pos: number,
     public len: number,
   ) {}
 }

src/stores/led-strip.store.tsx

@@ -1,8 +1,10 @@
 import { createStore } from 'solid-js/store';
 import { DisplayConfig } from '../models/display-config';
-import { LedStripConfig } from '../models/led-strip-config';
+import { LedStripConfig, LedStripPixelMapper } from '../models/led-strip-config';
 
 export const [ledStripStore, setLedStripStore] = createStore({
   displays: new Array<DisplayConfig>(),
   strips: new Array<LedStripConfig>(),
+  mappers: new Array<LedStripPixelMapper>(),
+  colors: new Uint8ClampedArray(),
 });