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,9 +20,9 @@ const SorterItem: Component<{ mapper: LedStripPixelMapper; strip: LedStripConfig
   createEffect(() => {
     let stopped = false;
     const frame = () => {
+      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)');
 
         for (let i = props.mapper.start, j = 0; i < props.mapper.end; i++, j++) {
@@ -29,19 +30,21 @@ const SorterItem: Component<{ mapper: LedStripPixelMapper; strip: LedStripConfig
             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,25 +80,16 @@ export const ScreenView: Component<ScreenViewProps> = (props) => {
     }
   };
 
+  // get screenshot
   createEffect(() => {
-    let pendingCount = 0;
+    let stopped = false;
-    const unlisten = listen<{
+    const frame = async () => {
-      base64_image: string;
-      display_id: number;
-      height: number;
-      width: number;
-    }>('encoded-screenshot-updated', (event) => {
       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) {
+      await fetch(url, {
-          return;
-        }
-        pendingCount++;
-        fetch(url, {
         mode: 'cors',
       })
         .then((res) => res.body?.getReader().read())
@@ -114,23 +104,21 @@ export const ScreenView: Component<ScreenViewProps> = (props) => {
             setImageData(null);
           }
           draw();
-          })
-          .finally(() => {
-            pendingCount--;
         });
-      }
+    };
 
-      // console.log(event.payload.display_id, localProps.displayId);
+    (async () => {
-    });
+      while (!stopped) {
-    subscribeScreenshotUpdate(localProps.displayId);
+        await frame();
+      }
+    })();
 
     onCleanup(() => {
-      unlisten.then((unlisten) => {
+      stopped = true;
-        unlisten();
-      });
     });
   });
 
+  // resize
   createEffect(() => {
     let resizeObserver: ResizeObserver;