pref(gui): 渲染性能。

src/components/led-strip-part.tsx

@@ -138,19 +138,6 @@ export const LedStripPart: Component<LedStripPartProps> = (props) => {
     }
   };
 
-  const pixels = createMemo(() => {
-    const _colors = colors();
-    if (_colors) {
-      return <For each={_colors}>{(item) => <Pixel color={item} />}</For>;
-    } else if (localProps.config) {
-      return (
-        <For each={new Array(localProps.config.len).fill(undefined)}>
-          {() => <Pixel color="transparent" />}
-        </For>
-      );
-    }
-  });
-
   return (
     <section
       {...rootProps}
@@ -160,7 +147,7 @@ export const LedStripPart: Component<LedStripPartProps> = (props) => {
       }
       onWheel={onWheel}
     >
-      {pixels()}
+      <For each={colors()}>{(item) => <Pixel color={item} />}</For>
     </section>
   );
 };

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

@@ -7,6 +7,7 @@ import {
   For,
   JSX,
   onCleanup,
+  untrack,
 } from 'solid-js';
 import { LedStripConfig, LedStripPixelMapper } from '../models/led-strip-config';
 import { ledStripStore } from '../stores/led-strip.store';
@@ -19,29 +20,31 @@ const SorterItem: Component<{ mapper: LedStripPixelMapper; strip: LedStripConfig
   createEffect(() => {
     let stopped = false;
     const frame = () => {
-      const strips = ledStripStore.strips;
-      const totalLedCount = strips.reduce((acc, strip) => acc + strip.len, 0);
+      untrack(() => {
+        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]}, ${
-          ledStripStore.colors[i * 3 + 1]
-        }, ${ledStripStore.colors[i * 3 + 2]})`;
-      }
-
-      setFullLeds(fullLeds);
+        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);
+        setTimeout(() => {
+          frame();
+        }, 1000);
       }
     };
 
     frame();
 
     onCleanup(() => {
+      console.log('cleanup');
       stopped = true;
-      console.timeEnd('frame');
     });
   });
 

src/components/screen-view.tsx

@@ -1,5 +1,4 @@
 import { invoke } from '@tauri-apps/api';
-import { listen } from '@tauri-apps/api/event';
 import { convertFileSrc } from '@tauri-apps/api/tauri';
 import {
   Component,
@@ -81,56 +80,45 @@ export const ScreenView: Component<ScreenViewProps> = (props) => {
     }
   };
 
+  // get screenshot
   createEffect(() => {
-    let pendingCount = 0;
-    const unlisten = listen<{
-      base64_image: string;
-      display_id: number;
-      height: number;
-      width: number;
-    }>('encoded-screenshot-updated', (event) => {
+    let stopped = false;
+    const frame = async () => {
       const { drawWidth, drawHeight } = drawInfo();
-      if (event.payload.display_id === localProps.displayId) {
-        const url = convertFileSrc(
-          `displays/${localProps.displayId}?width=${drawWidth}&height=${drawHeight}`,
-          'ambient-light',
-        );
-        if (pendingCount >= 1) {
-          return;
-        }
-        pendingCount++;
-        fetch(url, {
-          mode: 'cors',
-        })
-          .then((res) => res.body?.getReader().read())
-          .then((buffer) => {
-            if (buffer?.value) {
-              setImageData({
-                buffer: new Uint8ClampedArray(buffer?.value),
-                width: drawWidth,
-                height: drawHeight,
-              });
-            } else {
-              setImageData(null);
-            }
-            draw();
-          })
-          .finally(() => {
-            pendingCount--;
-          });
-      }
+      const url = convertFileSrc(
+        `displays/${localProps.displayId}?width=${drawWidth}&height=${drawHeight}`,
+        'ambient-light',
+      );
+      await fetch(url, {
+        mode: 'cors',
+      })
+        .then((res) => res.body?.getReader().read())
+        .then((buffer) => {
+          if (buffer?.value) {
+            setImageData({
+              buffer: new Uint8ClampedArray(buffer?.value),
+              width: drawWidth,
+              height: drawHeight,
+            });
+          } else {
+            setImageData(null);
+          }
+          draw();
+        });
+    };
 
-      // console.log(event.payload.display_id, localProps.displayId);
-    });
-    subscribeScreenshotUpdate(localProps.displayId);
+    (async () => {
+      while (!stopped) {
+        await frame();
+      }
+    })();
 
     onCleanup(() => {
-      unlisten.then((unlisten) => {
-        unlisten();
-      });
+      stopped = true;
     });
   });
 
+  // resize
   createEffect(() => {
     let resizeObserver: ResizeObserver;