src-tauri/src/ambient_light/config_manager.rs

@@ -123,35 +123,7 @@ impl ConfigManager {
             }
         }
         
-        let cloned_config = config.clone();
-
-        drop(config);
-
-        self.update(&cloned_config).await?;
-
-        self.config_update_sender
-            .send(cloned_config)
-            .map_err(|e| anyhow::anyhow!("Failed to send config update: {}", e))?;
-
-        Ok(())
-    }
-
-    pub async fn reverse_led_strip_part(
-        &self,
-        display_id: u32,
-        border: Border,
-    ) -> anyhow::Result<()> {
-        let mut config = self.config.write().await;
-
-        for (index, strip) in config.clone().strips.iter().enumerate() {
-            if strip.display_id == display_id && strip.border == border {
-                let mut mapper = config.mappers[index].borrow_mut();
-
-                let start = mapper.start;
-                mapper.start = mapper.end;
-                mapper.end = start;
-            }
-        }
+        Self::rebuild_mappers(&mut config);
 
         let cloned_config = config.clone();
 

src-tauri/src/main.rs

@@ -175,18 +175,6 @@ async fn move_strip_part(display_id: u32, border: Border, target_start: usize) -
         })
 }
 
-#[tauri::command]
-async fn reverse_led_strip_part(display_id: u32, border: Border) -> Result<(), String> {
-    let config_manager = ambient_light::ConfigManager::global().await;
-    config_manager
-        .reverse_led_strip_part(display_id, border)
-        .await
-        .map_err(|e| {
-            error!("can not reverse led strip part: {}", e);
-            e.to_string()
-        })
-}
-
 #[tokio::main]
 async fn main() {
     env_logger::init();
@@ -209,7 +197,6 @@ async fn main() {
             patch_led_strip_len,
             send_colors,
             move_strip_part,
-            reverse_led_strip_part,
         ])
         .register_uri_scheme_protocol("ambient-light", move |_app, request| {
             let response = ResponseBuilder::new().header("Access-Control-Allow-Origin", "*");

src-tauri/src/screenshot_manager.rs

@@ -4,13 +4,13 @@ use core_graphics::display::{
     kCGNullWindowID, kCGWindowImageDefault, kCGWindowListOptionOnScreenOnly, CGDisplay,
 };
 use paris::{error, info, warn};
+use serde::{Deserialize, Serialize};
 use tauri::{async_runtime::RwLock, Window};
 use tokio::sync::{watch, OnceCell};
 
 use crate::{
     ambient_light::{SamplePointConfig, SamplePointMapper},
-    led_color::LedColor,
-    screenshot::{ScreenSamplePoints, Screenshot, ScreenshotPayload},
+    screenshot::{LedSamplePoints, ScreenSamplePoints, Screenshot, ScreenshotPayload}, led_color::LedColor,
 };
 
 pub fn take_screenshot(display_id: u32, scale_factor: f32) -> anyhow::Result<Screenshot> {
@@ -220,6 +220,7 @@ impl ScreenshotManager {
         configs: &Vec<SamplePointConfig>,
         screenshots: &Vec<Screenshot>,
     ) -> Vec<LedColor> {
+
         let mut all_colors = vec![];
 
         for (index, screenshot) in screenshots.iter().enumerate() {
@@ -232,10 +233,7 @@ impl ScreenshotManager {
         all_colors
     }
 
-    pub async fn get_sorted_colors(
-        colors: &Vec<LedColor>,
-        mappers: &Vec<SamplePointMapper>,
-    ) -> Vec<u8> {
+    pub async fn get_sorted_colors(colors: &Vec<LedColor>, mappers: &Vec<SamplePointMapper>) -> Vec<u8> {
         let total_leds = mappers
             .iter()
             .map(|mapper| usize::max(mapper.start, mapper.end))

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

@@ -1,15 +1,11 @@
 import {
-  batch,
   Component,
   createContext,
   createEffect,
   createMemo,
   createSignal,
   For,
-  Index,
   JSX,
-  on,
-  untrack,
   useContext,
 } from 'solid-js';
 import { LedStripConfig, LedStripPixelMapper } from '../models/led-strip-config';
@@ -26,13 +22,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,
@@ -40,25 +36,6 @@ 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;
@@ -97,7 +74,6 @@ const SorterItem: Component<{ strip: LedStripConfig; mapper: LedStripPixelMapper
     if (moved === 0) {
       return;
     }
-    setCellWidth(cellWidth);
     move(props.mapper.start + moved);
   };
 
@@ -105,43 +81,17 @@ const SorterItem: Component<{ strip: LedStripConfig; mapper: LedStripPixelMapper
     setSelectedStripPart(null);
   };
 
-  const reverse = () => {
-    invoke('reverse_led_strip_part', {
-      displayId: props.strip.display_id,
-      border: props.strip.border,
-    }).catch((err) => console.error(err));
-  };
-
   // update fullLeds
   createEffect(() => {
     const fullLeds = new Array(ledStripStore.totalLedCount).fill(null);
 
-    // if (props.mapper.start < props.mapper.end) {
-    //   for (
-    //     let i = props.mapper.start, j = props.mapper.pos;
-    //     i < props.mapper.end;
-    //     i++, j++
-    //   ) {
-    //     fullLeds[i] = ledStripStore.colors[j];
-    //   }
-    // } else {
-    //   for (
-    //     let i = props.mapper.start, j = props.mapper.pos;
-    //     i >= props.mapper.end;
-    //     i--, j++
-    //   ) {
-    //     fullLeds[i] = ledStripStore.colors[j];
-    //   }
-    // }
-    // 优化上面的代码
-
-    const { start, end, pos } = props.mapper;
-    const isForward = start < end;
-    const step = isForward ? 1 : -1;
-    for (let i = start, j = pos; i !== end; i += step, j++) {
+    for (
+      let i = props.mapper.start, j = props.mapper.pos;
+      i < props.mapper.end;
+      i++, j++
+    ) {
       fullLeds[i] = ledStripStore.colors[j];
     }
-
     setFullLeds(fullLeds);
   });
 
@@ -159,7 +109,6 @@ const SorterItem: Component<{ strip: LedStripConfig; mapper: LedStripPixelMapper
       onPointerDown={onPointerDown}
       onPointerUp={onPointerUp}
       onPointerLeave={onPointerLeave}
-      ondblclick={reverse}
     >
       <For each={fullLeds()}>
         {(it) => (
@@ -183,20 +132,15 @@ const SorterResult: Component = () => {
   const [fullLeds, setFullLeds] = createSignal<string[]>([]);
 
   createEffect(() => {
-    const colors = ledStripStore.sortedColors;
-    const fullLeds = new Array(ledStripStore.totalLedCount)
-      .fill('rgba(255,255,255,0.1)')
-      .map((_, i) => {
-        let c1 = `rgb(${Math.floor(colors[i * 3] * 0.8)}, ${Math.floor(
-          colors[i * 3 + 1] * 0.8,
-        )}, ${Math.floor(colors[i * 3 + 2] * 0.8)})`;
-        let c2 = `rgb(${Math.floor(colors[i * 3] * 1.2)}, ${Math.floor(
-          colors[i * 3 + 1] * 1.2,
-        )}, ${Math.floor(colors[i * 3 + 2] * 1.2)})`;
+    const fullLeds = new Array(ledStripStore.totalLedCount).fill('rgba(255,255,255,0.1)');
 
-        return `linear-gradient(70deg, ${c1}, ${c2})`;
+    ledStripStore.mappers.forEach((mapper) => {
+      for (let i = mapper.start, j = 0; i < mapper.end; i++, j++) {
+        fullLeds[i] = `rgb(${ledStripStore.sortedColors[i * 3]}, ${
+          ledStripStore.sortedColors[i * 3 + 1]
+        }, ${ledStripStore.sortedColors[i * 3 + 2]})`;
+      }
     });
-    console.log(fullLeds);
     setFullLeds(fullLeds);
   });
 
@@ -230,11 +174,11 @@ export const LedStripPartsSorter: Component = () => {
       }}
     >
       <SorterResult />
-      <Index each={ledStripStore.strips}>
+      <For each={ledStripStore.strips}>
         {(strip, index) => (
-          <SorterItem strip={strip()} mapper={ledStripStore.mappers[index]} />
+          <SorterItem strip={strip} mapper={ledStripStore.mappers[index()]} />
         )}
-      </Index>
+      </For>
     </div>
   );
 };

src/models/picker-configuration.ts

@@ -0,0 +1,8 @@
+import { DisplayConfig } from './display-config';
+
+export class PickerConfiguration {
+  constructor(
+    public display_configs: DisplayConfig[] = [],
+    public config_version: number = 1,
+  ) {}
+}

src/models/screenshot.dto.ts

@@ -0,0 +1,12 @@
+import { DisplayConfig } from './display-config';
+
+export class ScreenshotDto {
+  encode_image!: string;
+  config!: DisplayConfig;
+  colors!: {
+    top: Uint8Array;
+    bottom: Uint8Array;
+    left: Uint8Array;
+    right: Uint8Array;
+  };
+}