src-tauri/src/ambient_light/config.rs

@@ -17,6 +17,14 @@ pub enum Border {
     Right,
 }
 
+#[derive(Clone, Copy, Serialize, Deserialize, Debug)]
+pub struct LedStripConfigOfBorders {
+    pub top: Option<LedStripConfig>,
+    pub bottom: Option<LedStripConfig>,
+    pub left: Option<LedStripConfig>,
+    pub right: Option<LedStripConfig>,
+}
+
 #[derive(Clone, Copy, Serialize, Deserialize, Debug)]
 pub struct LedStripConfig {
     pub index: usize,
@@ -111,7 +119,6 @@ impl LedStripConfigGroup {
                 mappers.push(SamplePointMapper {
                     start: (j + i * 4) * 30,
                     end: (j + i * 4 + 1) * 30,
-                    pos: (j + i * 4) * 30,
                 })
             }
         }
@@ -119,11 +126,124 @@ impl LedStripConfigGroup {
     }
 }
 
+#[derive(Clone, Copy, Serialize, Deserialize, Debug)]
+pub struct LedStripConfigOfDisplays {
+    pub id: u32,
+    pub index_of_display: usize,
+    pub led_strip_of_borders: LedStripConfigOfBorders,
+}
+
+impl LedStripConfigOfBorders {
+    pub fn default() -> Self {
+        Self {
+            top: None,
+            bottom: None,
+            left: None,
+            right: None,
+        }
+    }
+}
+
+impl LedStripConfigOfDisplays {
+    pub fn default(id: u32, index_of_display: usize) -> Self {
+        Self {
+            id,
+            index_of_display,
+            led_strip_of_borders: LedStripConfigOfBorders::default(),
+        }
+    }
+
+    pub async fn read_from_disk() -> anyhow::Result<Self> {
+        let path = config_dir()
+            .unwrap_or(current_dir().unwrap())
+            .join("led_strip_config_of_displays.toml");
+
+        let exists = tokio::fs::try_exists(path.clone())
+            .await
+            .map_err(|e| anyhow::anyhow!("Failed to check config file exists: {}", e))?;
+
+        if exists {
+            let config = tokio::fs::read_to_string(path).await?;
+
+            let config: Self = toml::from_str(&config)
+                .map_err(|e| anyhow::anyhow!("Failed to parse config file: {}", e))?;
+
+            Ok(config)
+        } else {
+            info!("config file not exist, fallback to default config");
+            Ok(Self::get_default_config().await?)
+        }
+    }
+
+    pub async fn write_to_disk(&self) -> anyhow::Result<()> {
+        let path = config_dir()
+            .unwrap_or(current_dir().unwrap())
+            .join("led_strip_config_of_displays.toml");
+
+        let config = toml::to_string(self).map_err(|e| {
+            anyhow::anyhow!("Failed to parse config file: {}. config: {:?}", e, self)
+        })?;
+
+        tokio::fs::write(&path, config).await.map_err(|e| {
+            anyhow::anyhow!("Failed to write config file: {}. path: {:?}", e, &path)
+        })?;
+
+        Ok(())
+    }
+
+    pub async fn get_default_config() -> anyhow::Result<Self> {
+        let displays = display_info::DisplayInfo::all().map_err(|e| {
+            error!("can not list display info: {}", e);
+            anyhow::anyhow!("can not list display info: {}", e)
+        })?;
+
+        let mut configs = Vec::new();
+        for (i, display) in displays.iter().enumerate() {
+            let config = Self {
+                id: display.id,
+                index_of_display: i,
+                led_strip_of_borders: LedStripConfigOfBorders {
+                    top: Some(LedStripConfig {
+                        index: i * 4 * 30,
+                        display_id: display.id,
+                        border: Border::Top,
+                        start_pos: i * 4 * 30,
+                        len: 30,
+                    }),
+                    bottom: Some(LedStripConfig {
+                        index: i * 4 * 30 + 30,
+                        display_id: display.id,
+                        border: Border::Bottom,
+                        start_pos: i * 4 * 30 + 30,
+                        len: 30,
+                    }),
+                    left: Some(LedStripConfig {
+                        index: i * 4 * 30 + 60,
+                        display_id: display.id,
+                        border: Border::Left,
+                        start_pos: i * 4 * 30 + 60,
+                        len: 30,
+                    }),
+                    right: Some(LedStripConfig {
+                        index: i * 4 * 30 + 90,
+                        display_id: display.id,
+                        border: Border::Right,
+                        start_pos: i * 4 * 30 + 90,
+                        len: 30,
+                    }),
+                },
+            };
+            configs.push(config);
+        }
+
+        Ok(configs[0])
+    }
+}
+
 #[derive(Debug, Clone, Serialize, Deserialize)]
 pub struct SamplePointMapper {
     pub start: usize,
     pub end: usize,
-    pub pos: usize,
 }
 
 #[derive(Debug, Clone, Serialize, Deserialize)]

src-tauri/src/ambient_light/config_manager.rs

@@ -122,8 +122,7 @@ impl ConfigManager {
                 log::info!("mapper: {:?}", mapper);
             }
         }
-        
-        Self::rebuild_mappers(&mut config);
+        log::info!("mapper: {:?}", config.mappers[4]);
 
         let cloned_config = config.clone();
 
@@ -139,31 +138,17 @@ impl ConfigManager {
     }
 
     fn rebuild_mappers(config: &mut LedStripConfigGroup) {
-        let mut prev_pos_end = 0;
+        let mut prev_end = 0;
         let mappers: Vec<SamplePointMapper> = config
             .strips
             .iter()
-            .enumerate()
-            .map(|(index, strip)| {
-                let mapper = &config.mappers[index];
-
-                if mapper.start < mapper.end {
-                    let mapper = SamplePointMapper {
-                        start: mapper.start,
-                        end: mapper.start + strip.len,
-                        pos: prev_pos_end,
-                    };
-                    prev_pos_end = prev_pos_end + strip.len;
-                    mapper
-                } else {
-                    let mapper = SamplePointMapper {
-                        end: mapper.end,
-                        start: mapper.end + strip.len,
-                        pos: prev_pos_end,
-                    };
-                    prev_pos_end = prev_pos_end + strip.len;
-                    mapper
-                }
+            .map(|strip| {
+                let mapper = SamplePointMapper {
+                    start: prev_end,
+                    end: prev_end + strip.len,
+                };
+                prev_end = mapper.end;
+                mapper
             })
             .collect();
 

src-tauri/src/ambient_light/publisher.rs

@@ -1,6 +1,6 @@
 use std::{sync::Arc, time::Duration};
 
-use paris::{info, warn};
+use paris::warn;
 use tauri::async_runtime::{Mutex, RwLock};
 use tokio::{sync::watch, time::sleep};
 
@@ -8,7 +8,7 @@ use crate::{
     ambient_light::{config, ConfigManager},
     rpc::MqttRpc,
     screenshot::Screenshot,
-    screenshot_manager::ScreenshotManager, led_color::LedColor,
+    screenshot_manager::ScreenshotManager,
 };
 
 use itertools::Itertools;
@@ -16,10 +16,8 @@ use itertools::Itertools;
 use super::{LedStripConfigGroup, SamplePointConfig};
 
 pub struct LedColorsPublisher {
-    sorted_colors_rx: Arc<RwLock<watch::Receiver<Vec<u8>>>>,
-    sorted_colors_tx: Arc<RwLock<watch::Sender<Vec<u8>>>>,
-    colors_rx: Arc<RwLock<watch::Receiver<Vec<LedColor>>>>,
-    colors_tx: Arc<RwLock<watch::Sender<Vec<LedColor>>>>,
+    rx: Arc<RwLock<watch::Receiver<Vec<u8>>>>,
+    tx: Arc<RwLock<watch::Sender<Vec<u8>>>>,
 }
 
 impl LedColorsPublisher {
@@ -27,29 +25,26 @@ impl LedColorsPublisher {
         static LED_COLORS_PUBLISHER_GLOBAL: tokio::sync::OnceCell<LedColorsPublisher> =
             tokio::sync::OnceCell::const_new();
 
-        let (sorted_tx, sorted_rx) = watch::channel(Vec::new());
         let (tx, rx) = watch::channel(Vec::new());
 
         LED_COLORS_PUBLISHER_GLOBAL
             .get_or_init(|| async {
                 LedColorsPublisher {
-                    sorted_colors_rx: Arc::new(RwLock::new(sorted_rx)),
-                    sorted_colors_tx: Arc::new(RwLock::new(sorted_tx)),
-                    colors_rx: Arc::new(RwLock::new(rx)),
-                    colors_tx: Arc::new(RwLock::new(tx)),
+                    rx: Arc::new(RwLock::new(rx)),
+                    tx: Arc::new(RwLock::new(tx)),
                 }
             })
             .await
     }
 
     pub fn start(&self) {
-        let sorted_colors_tx = self.sorted_colors_tx.clone();
-        let colors_tx = self.colors_tx.clone();
+        let tx = self.tx.clone();
 
         tokio::spawn(async move {
             loop {
-                let sorted_colors_tx = sorted_colors_tx.write().await;
-                let colors_tx = colors_tx.write().await;
+                log::info!("colors update loop AAA");
+
+                let tx = tx.write().await;
                 let screenshot_manager = ScreenshotManager::global().await;
 
                 let config_manager = ConfigManager::global().await;
@@ -84,13 +79,13 @@ impl LedColorsPublisher {
                     }
 
                     let colors = screenshot_manager
-                        .get_all_colors(&configs.sample_point_groups, &screenshots)
+                        .get_all_colors(
+                            &configs.sample_point_groups,
+                            &configs.mappers,
+                            &screenshots,
+                        )
                         .await;
-
-                    let sorted_colors =
-                        ScreenshotManager::get_sorted_colors(&colors, &configs.mappers).await;
-
-                    match colors_tx.send(colors) {
+                    match tx.send(colors) {
                         Ok(_) => {
                             // log::info!("colors updated");
                         }
@@ -99,31 +94,17 @@ impl LedColorsPublisher {
                         }
                     }
 
-                    match sorted_colors_tx.send(sorted_colors) {
-                        Ok(_) => {
-                            // log::info!("colors updated");
-                        }
-                        Err(_) => {
-                            warn!("colors update failed");
-                        }
-                    }
-
-                    if some_screenshot_receiver_is_none {
-                        info!("some screenshot receiver is none. reload.");
+                    if some_screenshot_receiver_is_none
+                        || config_receiver.has_changed().unwrap_or(true)
+                    {
                         sleep(Duration::from_millis(1000)).await;
                         break;
                     }
-
-                    if config_receiver.has_changed().unwrap_or(true) {
-                        info!("config changed. reload.");
-                        sleep(Duration::from_millis(100)).await;
-                        break;
-                    }
                 }
             }
         });
 
-        let rx = self.sorted_colors_rx.clone();
+        let rx = self.rx.clone();
         tokio::spawn(async move {
             let mut rx = rx.read().await.clone();
             loop {
@@ -155,8 +136,8 @@ impl LedColorsPublisher {
         mqtt.publish_led_sub_pixels(payload).await
     }
 
-    pub async fn clone_sorted_colors_receiver(&self) -> watch::Receiver<Vec<u8>> {
-        self.sorted_colors_rx.read().await.clone()
+    pub async fn clone_receiver(&self) -> watch::Receiver<Vec<u8>> {
+        self.rx.read().await.clone()
     }
 
     pub async fn get_colors_configs(configs: &LedStripConfigGroup) -> AllColorConfig {
@@ -226,10 +207,6 @@ impl LedColorsPublisher {
             screenshot_receivers: local_rx_list,
         };
     }
-
-    pub async fn clone_colors_receiver(&self) -> watch::Receiver<Vec<LedColor>> {
-        self.colors_rx.read().await.clone()
-    }
 }
 
 pub struct AllColorConfig {

src-tauri/src/main.rs

@@ -348,24 +348,7 @@ async fn main() {
             let app_handle = app.handle().clone();
             tokio::spawn(async move {
                 let publisher = ambient_light::LedColorsPublisher::global().await;
-                let mut publisher_update_receiver = publisher.clone_sorted_colors_receiver().await;
-                loop {
-                    if let Err(err) = publisher_update_receiver.changed().await {
-                        error!("publisher update receiver changed error: {}", err);
-                        return;
-                    }
-
-                    let publisher = publisher_update_receiver.borrow().clone();
-
-                    app_handle
-                        .emit_all("led_sorted_colors_changed", publisher)
-                        .unwrap();
-                }
-            });
-            let app_handle = app.handle().clone();
-            tokio::spawn(async move {
-                let publisher = ambient_light::LedColorsPublisher::global().await;
-                let mut publisher_update_receiver = publisher.clone_colors_receiver().await;
+                let mut publisher_update_receiver = publisher.clone_receiver().await;
                 loop {
                     if let Err(err) = publisher_update_receiver.changed().await {
                         error!("publisher update receiver changed error: {}", err);

src-tauri/src/screenshot_manager.rs

@@ -10,7 +10,7 @@ use tokio::sync::{watch, OnceCell};
 
 use crate::{
     ambient_light::{SamplePointConfig, SamplePointMapper},
-    screenshot::{LedSamplePoints, ScreenSamplePoints, Screenshot, ScreenshotPayload}, led_color::LedColor,
+    screenshot::{LedSamplePoints, ScreenSamplePoints, Screenshot, ScreenshotPayload},
 };
 
 pub fn take_screenshot(display_id: u32, scale_factor: f32) -> anyhow::Result<Screenshot> {
@@ -218,9 +218,14 @@ impl ScreenshotManager {
     pub async fn get_all_colors(
         &self,
         configs: &Vec<SamplePointConfig>,
+        mappers: &Vec<SamplePointMapper>,
         screenshots: &Vec<Screenshot>,
-    ) -> Vec<LedColor> {
+    ) -> Vec<u8> {
+        let total_leds = configs
+            .iter()
+            .fold(0, |acc, config| acc + config.points.len());
 
+        let mut global_colors = vec![0u8; total_leds * 3];
         let mut all_colors = vec![];
 
         for (index, screenshot) in screenshots.iter().enumerate() {
@@ -230,42 +235,20 @@ impl ScreenshotManager {
             all_colors.append(&mut colors);
         }
 
-        all_colors
-    }
-
-    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))
-            .max()
-            .unwrap_or(0) as usize;
-        let mut global_colors = vec![0u8; total_leds * 3];
-
         let mut color_index = 0;
         mappers.iter().for_each(|group| {
-            if group.end > global_colors.len() || group.start > global_colors.len() {
+            if group.end > all_colors.len() || group.start > all_colors.len() {
                 warn!(
-                    "get_sorted_colors: group out of range. start: {}, end: {}, global_colors.len(): {}",
+                    "get_all_colors: group out of range. start: {}, end: {}, all_colors.len(): {}",
                     group.start,
                     group.end,
-                    global_colors.len()
+                    all_colors.len()
                 );
                 return;
             }
-
-            if color_index + group.start.abs_diff(group.end) > colors.len() {
-                warn!(
-                    "get_sorted_colors: color_index out of range. color_index: {}, strip len: {}, colors.len(): {}",
-                    color_index,
-                    group.start.abs_diff(group.end),
-                    colors.len()
-                );
-                return;
-            }
-
             if group.end > group.start {
                 for i in group.start..group.end {
-                    let rgb = colors[color_index].get_rgb();
+                    let rgb = all_colors[color_index].get_rgb();
                     color_index += 1;
 
                     global_colors[i * 3] = rgb[0];
@@ -274,7 +257,7 @@ impl ScreenshotManager {
                 }
             } else {
                 for i in (group.end..group.start).rev() {
-                    let rgb = colors[color_index].get_rgb();
+                    let rgb = all_colors[color_index].get_rgb();
                     color_index += 1;
 
                     global_colors[i * 3] = rgb[0];

src/App.tsx

@@ -44,7 +44,7 @@ function App() {
 
   // listen to led_colors_changed event
   createEffect(() => {
-    const unlisten = listen<Array<string>>('led_colors_changed', (event) => {
+    const unlisten = listen<Uint8ClampedArray>('led_colors_changed', (event) => {
       const colors = event.payload;
 
       setLedStripStore({
@@ -57,21 +57,6 @@ function App() {
     });
   });
 
-  // listen to led_sorted_colors_changed event
-  createEffect(() => {
-    const unlisten = listen<Uint8ClampedArray>('led_sorted_colors_changed', (event) => {
-      const sortedColors = event.payload;
-
-      setLedStripStore({
-        sortedColors,
-      });
-    });
-
-    onCleanup(() => {
-      unlisten.then((unlisten) => unlisten());
-    });
-  });
-
   const [ledStripConfiguration, setLedStripConfiguration] = createStore<
     LedStripConfigurationContextType[0]
   >({

src/components/led-strip-part.tsx

@@ -16,7 +16,6 @@ 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';
-import { ledStripStore } from '../stores/led-strip.store';
 
 type LedStripPartProps = {
   config?: LedStripConfig | null;
@@ -56,31 +55,44 @@ export const LedStripPart: Component<LedStripPartProps> = (props) => {
   const [ledSamplePoints, setLedSamplePoints] = createSignal();
   const [colors, setColors] = createSignal<string[]>([]);
 
-  // update led strip colors from global store
+  // get led strip colors when screenshot updated
   createEffect(() => {
-    if (!localProps.config) {
+    const samplePoints = ledSamplePoints();
+    if (!localProps.config || !samplePoints) {
       return;
     }
 
-    const index = ledStripStore.strips.findIndex(
-      (s) =>
-        s.display_id === localProps.config!.display_id &&
-        s.border === localProps.config!.border,
-    );
+    let pendingCount = 0;
+    const unlisten = listen<{
+      base64_image: string;
+      display_id: number;
+      height: number;
+      width: number;
+    }>('encoded-screenshot-updated', (event) => {
+      if (event.payload.display_id !== localProps.config!.display_id) {
+        return;
+      }
+      if (pendingCount >= 1) {
+        return;
+      }
+      pendingCount++;
 
-    if (index === -1) {
-      return;
-    }
+      invoke<string[]>('get_one_edge_colors', {
+        samplePoints,
+        displayId: event.payload.display_id,
+      })
+        .then((colors) => {
+          setColors(colors);
+        })
+        .finally(() => {
+          pendingCount--;
+        });
+    });
+    subscribeScreenshotUpdate(localProps.config.display_id);
 
-    const mapper = ledStripStore.mappers[index];
-    if (!mapper) {
-      return;
-    }
-
-    const offset = mapper.pos;
-
-    const colors = ledStripStore.colors.slice(offset, offset + localProps.config.len);
-    setColors(colors);
+    onCleanup(() => {
+      unlisten.then((unlisten) => unlisten());
+    });
   });
 
   // get led strip sample points

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

@@ -12,18 +12,21 @@ 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';
-import background from '../assets/transparent-grid-background.svg?url';
 
 const SorterItem: Component<{ strip: LedStripConfig; mapper: LedStripPixelMapper }> = (
   props,
 ) => {
-  const [fullLeds, setFullLeds] = createSignal<Array<string | null>>([]);
+  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;
@@ -67,8 +70,7 @@ const SorterItem: Component<{ strip: LedStripConfig; mapper: LedStripPixelMapper
     }
     setDragCurr({ x: ev.clientX, y: ev.clientY });
 
-    const cellWidth =
-      (ev.currentTarget as HTMLDivElement).clientWidth / ledStripStore.totalLedCount;
+    const cellWidth = (ev.currentTarget as HTMLDivElement).clientWidth / totalLedCount();
     const diff = ev.clientX - dragStart()!.x;
     const moved = Math.round(diff / cellWidth);
     if (moved === 0) {
@@ -83,14 +85,12 @@ const SorterItem: Component<{ strip: LedStripConfig; mapper: LedStripPixelMapper
 
   // update fullLeds
   createEffect(() => {
-    const fullLeds = new Array(ledStripStore.totalLedCount).fill(null);
+    const fullLeds = new Array(totalLedCount()).fill('rgba(255,255,255,0.5)');
 
-    for (
-      let i = props.mapper.start, j = props.mapper.pos;
-      i < props.mapper.end;
-      i++, j++
-    ) {
-      fullLeds[i] = ledStripStore.colors[j];
+    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);
   });
@@ -114,12 +114,11 @@ const SorterItem: Component<{ strip: LedStripConfig; mapper: LedStripPixelMapper
         {(it) => (
           <div
             class="flex-auto flex h-full w-full justify-center items-center relative"
-            title={it ?? ''}
+            title={it}
           >
             <div
-              class="absolute top-1/2 -translate-y-1/2 h-2.5 w-2.5 rounded-full ring-1 ring-stone-100"
-              classList={{ 'ring-stone-300/50': !it }}
-              style={{ background: it ?? 'transparent' }}
+              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>
         )}
@@ -132,13 +131,15 @@ const SorterResult: Component = () => {
   const [fullLeds, setFullLeds] = createSignal<string[]>([]);
 
   createEffect(() => {
-    const fullLeds = new Array(ledStripStore.totalLedCount).fill('rgba(255,255,255,0.1)');
+    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)');
 
     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]})`;
+        fullLeds[i] = `rgb(${ledStripStore.colors[i * 3]}, ${
+          ledStripStore.colors[i * 3 + 1]
+        }, ${ledStripStore.colors[i * 3 + 2]})`;
       }
     });
     setFullLeds(fullLeds);
@@ -167,12 +168,7 @@ export const LedStripPartsSorter: Component = () => {
   const context = createContext();
 
   return (
-    <div
-      class="select-none overflow-hidden"
-      style={{
-        'background-image': `url(${background})`,
-      }}
-    >
+    <div class="select-none overflow-hidden">
       <SorterResult />
       <For each={ledStripStore.strips}>
         {(strip, index) => (

src/models/led-strip-config.ts

@@ -3,7 +3,6 @@ import { Borders } from '../constants/border';
 export type LedStripPixelMapper = {
   start: number;
   end: number;
-  pos: number;
 };
 
 export type LedStripConfigContainer = {

src/stores/led-strip.store.tsx

@@ -1,12 +1,10 @@
 import { createStore } from 'solid-js/store';
+import { DisplayConfig } from '../models/display-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 Array<string>(),
-  sortedColors: new Uint8ClampedArray(),
-  get totalLedCount() {
-    return Math.max(0, ...ledStripStore.mappers.map((m) => Math.max(m.start, m.end)));
-  },
+  colors: new Uint8ClampedArray(),
 });