feat: 拖拽排序。

src/App.tsx

@@ -1,4 +1,4 @@
-import { createEffect, onCleanup } from 'solid-js';
+import { createContext, createEffect, onCleanup } from 'solid-js';
 import { invoke } from '@tauri-apps/api/tauri';
 import { DisplayView } from './components/display-view';
 import { DisplayListContainer } from './components/display-list-container';
@@ -7,6 +7,11 @@ 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';
+import { createStore } from 'solid-js/store';
+import {
+  LedStripConfigurationContext,
+  LedStripConfigurationContextType,
+} from './contexts/led-strip-configuration.context';
 
 function App() {
   createEffect(() => {
@@ -52,14 +57,33 @@ function App() {
     });
   });
 
+  const [ledStripConfiguration, setLedStripConfiguration] = createStore<
+    LedStripConfigurationContextType[0]
+  >({
+    selectedStripPart: null,
+  });
+
+  const ledStripConfigurationContextValue: LedStripConfigurationContextType = [
+    ledStripConfiguration,
+    {
+      setSelectedStripPart: (v) => {
+        setLedStripConfiguration({
+          selectedStripPart: v,
+        });
+      },
+    },
+  ];
+
   return (
     <div>
-      <LedStripPartsSorter />
-      <DisplayListContainer>
-        {displayStore.displays.map((display) => {
-          return <DisplayView display={display} />;
-        })}
-      </DisplayListContainer>
+      <LedStripConfigurationContext.Provider value={ledStripConfigurationContextValue}>
+        <LedStripPartsSorter />
+        <DisplayListContainer>
+          {displayStore.displays.map((display) => {
+            return <DisplayView display={display} />;
+          })}
+        </DisplayListContainer>
+      </LedStripConfigurationContext.Provider>
     </div>
   );
 }

src/components/led-strip-part.tsx

@@ -10,10 +10,12 @@ import {
   JSX,
   onCleanup,
   splitProps,
+  useContext,
 } from 'solid-js';
 import { useTippy } from 'solid-tippy';
 import { followCursor } from 'tippy.js';
 import { LedStripConfig } from '../models/led-strip-config';
+import { LedStripConfigurationContext } from '../contexts/led-strip-configuration.context';
 
 type LedStripPartProps = {
   config?: LedStripConfig | null;
@@ -48,6 +50,7 @@ export const Pixel: Component<PixelProps> = (props) => {
 
 export const LedStripPart: Component<LedStripPartProps> = (props) => {
   const [localProps, rootProps] = splitProps(props, ['config']);
+  const [stripConfiguration] = useContext(LedStripConfigurationContext);
 
   const [ledSamplePoints, setLedSamplePoints] = createSignal();
   const [colors, setColors] = createSignal<string[]>([]);
@@ -143,8 +146,15 @@ export const LedStripPart: Component<LedStripPartProps> = (props) => {
       {...rootProps}
       ref={setAnchor}
       class={
-        'flex flex-nowrap justify-around items-center overflow-hidden ' + rootProps.class
+        'flex rounded-full flex-nowrap justify-around items-center overflow-hidden ' +
+        rootProps.class
       }
+      classList={{
+        'ring ring-inset bg-yellow-400/50 ring-orange-400 animate-pulse':
+          stripConfiguration.selectedStripPart?.border === localProps.config?.border &&
+          stripConfiguration.selectedStripPart?.displayId ===
+            localProps.config?.display_id,
+      }}
       onWheel={onWheel}
     >
       <For each={colors()}>{(item) => <Pixel color={item} />}</For>

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

@@ -1,14 +1,91 @@
-import { Component, createContext, createEffect, createSignal, For } from 'solid-js';
+import {
+  Component,
+  createContext,
+  createEffect,
+  createMemo,
+  createSignal,
+  For,
+  JSX,
+  useContext,
+} from 'solid-js';
 import { LedStripConfig, LedStripPixelMapper } from '../models/led-strip-config';
 import { ledStripStore } from '../stores/led-strip.store';
+import { invoke } from '@tauri-apps/api';
+import { LedStripConfigurationContext } from '../contexts/led-strip-configuration.context';
 
-const SorterItem: Component<{ mapper: LedStripPixelMapper }> = (props) => {
+const SorterItem: Component<{ strip: LedStripConfig; mapper: LedStripPixelMapper }> = (
+  props,
+) => {
   const [fullLeds, setFullLeds] = createSignal<string[]>([]);
+  const [dragging, setDragging] = createSignal<boolean>(false);
+  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 [, { setSelectedStripPart }] = useContext(LedStripConfigurationContext);
 
+  const totalLedCount = createMemo(() => {
+    return ledStripStore.strips.reduce((acc, strip) => acc + strip.len, 0);
+  });
+
+  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,
+      targetStart,
+    }).catch((err) => console.error(err));
+  };
+
+  const onPointerDown = (ev: PointerEvent) => {
+    if (ev.button !== 0) {
+      return;
+    }
+    setDragging(true);
+    setDragStart({ x: ev.clientX, y: ev.clientY });
+    setDragCurr({ x: ev.clientX, y: ev.clientY });
+    setDragStartIndex(props.mapper.start);
+  };
+
+  const onPointerUp = () => (ev: PointerEvent) => {
+    if (ev.button !== 0) {
+      return;
+    }
+    setDragging(false);
+  };
+
+  const onPointerMove = (ev: PointerEvent) => {
+    setSelectedStripPart({
+      displayId: props.strip.display_id,
+      border: props.strip.border,
+    });
+    if (!(ev.buttons & 1)) {
+      return;
+    }
+    const draggingInfo = dragging();
+    if (!draggingInfo) {
+      return;
+    }
+    setDragCurr({ x: ev.clientX, y: ev.clientY });
+
+    const cellWidth = (ev.currentTarget as HTMLDivElement).clientWidth / totalLedCount();
+    const diff = ev.clientX - dragStart()!.x;
+    const moved = Math.round(diff / cellWidth);
+    if (moved === 0) {
+      return;
+    }
+    move(props.mapper.start + moved);
+  };
+
+  const onPointerLeave = () => {
+    setSelectedStripPart(null);
+  };
+
+  // update fullLeds
   createEffect(() => {
-    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)');
+    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]}, ${
@@ -18,8 +95,21 @@ const SorterItem: Component<{ mapper: LedStripPixelMapper }> = (props) => {
     setFullLeds(fullLeds);
   });
 
+  const style = createMemo<JSX.CSSProperties>(() => {
+    return {
+      transform: `translateX(${(dragCurr()?.x ?? 0) - (dragStart()?.x ?? 0)}px)`,
+    };
+  });
+
   return (
-    <div class="flex h-2 m-2">
+    <div
+      class="flex h-2 m-2 select-none cursor-ew-resize focus:cursor-ew-resize"
+      style={style()}
+      onPointerMove={onPointerMove}
+      onPointerDown={onPointerDown}
+      onPointerUp={onPointerUp}
+      onPointerLeave={onPointerLeave}
+    >
       <For each={fullLeds()}>
         {(it) => (
           <div
@@ -78,11 +168,13 @@ export const LedStripPartsSorter: Component = () => {
   const context = createContext();
 
   return (
-    <div>
+    <div class="select-none overflow-hidden">
       <SorterResult />
       <For each={ledStripStore.strips}>
-        {(strip, index) => <SorterItem mapper={ledStripStore.mappers[index()]} />}
+        {(strip, index) => (
+          <SorterItem strip={strip} mapper={ledStripStore.mappers[index()]} />
+        )}
       </For>
     </div>
   );
-};
+};

src/contexts/led-strip-configuration.context.ts

@@ -0,0 +1,24 @@
+import { createContext } from 'solid-js';
+import { Borders } from '../constants/border';
+
+export type LedStripConfigurationContextType = [
+  {
+    selectedStripPart: {
+      displayId: number;
+      border: Borders;
+    } | null;
+  },
+  {
+    setSelectedStripPart: (v: { displayId: number; border: Borders } | null) => void;
+  },
+];
+
+export const LedStripConfigurationContext =
+  createContext<LedStripConfigurationContextType>([
+    {
+      selectedStripPart: null,
+    },
+    {
+      setSelectedStripPart: () => {},
+    },
+  ]);

src/models/display-config.ts

@@ -1,16 +0,0 @@
-import { Borders } from '../constants/border';
-import { LedStripConfig } from './led-strip-config';
-
-export class LedStripConfigOfBorders implements Record<Borders, LedStripConfig | null> {
-  constructor(
-    public top: LedStripConfig | null = null,
-    public bottom: LedStripConfig | null = null,
-    public left: LedStripConfig | null = null,
-    public right: LedStripConfig | null = null,
-  ) {}
-}
-export class DisplayConfig {
-  led_strip_of_borders = new LedStripConfigOfBorders();
-
-  constructor(public id: number) {}
-}