boardcast + interval tick.

src/App.tsx

@@ -1,4 +1,4 @@
-import { createContext, createEffect, onCleanup } from 'solid-js';
+import { 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';

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

@@ -116,25 +116,6 @@ const SorterItem: Component<{ strip: LedStripConfig; mapper: LedStripPixelMapper
   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;
@@ -197,7 +178,6 @@ const SorterResult: Component = () => {
 
         return `linear-gradient(70deg, ${c1} 10%, ${c2})`;
       });
-    console.log(fullLeds);
     setFullLeds(fullLeds);
   });
 

src/components/screen-view.tsx

@@ -1,4 +1,3 @@
-import { invoke } from '@tauri-apps/api';
 import { convertFileSrc } from '@tauri-apps/api/tauri';
 import {
   Component,
@@ -30,6 +29,7 @@ export const ScreenView: Component<ScreenViewProps> = (props) => {
     width: number;
     height: number;
   } | null>(null);
+  const [hidden, setHidden] = createSignal(false);
 
   const resetSize = () => {
     const aspectRatio = canvas.width / canvas.height;
@@ -103,6 +103,10 @@ export const ScreenView: Component<ScreenViewProps> = (props) => {
 
     (async () => {
       while (!stopped) {
+        if (hidden()) {
+          await new Promise((resolve) => setTimeout(resolve, 1000));
+          continue;
+        }
         await frame();
       }
     })();
@@ -128,6 +132,26 @@ export const ScreenView: Component<ScreenViewProps> = (props) => {
     });
   });
 
+  // update hidden
+  createEffect(() => {
+    const hide = () => {
+      setHidden(true);
+      console.log('hide');
+    };
+    const show = () => {
+      setHidden(false);
+      console.log('show');
+    };
+
+    window.addEventListener('focus', show);
+    window.addEventListener('blur', hide);
+
+    onCleanup(() => {
+      window.removeEventListener('focus', show);
+      window.removeEventListener('blur', hide);
+    });
+  });
+
   return (
     <div
       ref={root!}