tidy up

pixijs · Feb 12, 2024 · 49b25b8 · 49b25b8
1 parent 3c32440
commit 49b25b8
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 58 deletions.
diff --git a/src/lib/src/components/properties/BaseProperty.tsx b/src/lib/src/components/properties/BaseProperty.tsx
@@ -4,7 +4,7 @@ import styled from 'styled-components';
 
 export interface BasePropertyProps {
   label: string;
-  children?: React.ReactNode;
+  children?: React.ReactElement<BasePropertyProps>;
 }
 
 const Wrapper = styled.div`

diff --git a/src/lib/src/components/scene/stats.tsx b/src/lib/src/components/scene/stats.tsx
@@ -126,7 +126,7 @@ export const Stats: React.FC<StatsProps> = () => {
   }, [sceneStats]);
 
   return (
-    <>
+    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap' }}>
       {data.map((item, index) => (
         <SectionContainer key={index}>
           <SectionHeader>
@@ -150,6 +150,6 @@ export const Stats: React.FC<StatsProps> = () => {
           </SectionHeader>
         </SectionContainer>
       ))}
-    </>
+    </div>
   );
 };
diff --git a/src/lib/src/detection/index.ts b/src/lib/src/detection/index.ts
@@ -2,9 +2,11 @@ import { MessageType, convertPostMessageData } from '@shared/index';
 import { getPixiWrapper, resetPixiState } from './devtool';
 import { sceneGraphMap, updateSceneGraph } from './updateSceneGraph';
 import { updateSceneStats } from './updateSceneStats';
-import { Looper } from './utils/loop';
+import { loop } from './utils/loop';
 import { pollPixi } from './utils/poll';
 
+let lastUpdateTime = Date.now();
+
 // listen to the postMessage event
 window.addEventListener('message', (event) => {
   // We only accept messages from ourselves
@@ -26,23 +28,28 @@ window.addEventListener('message', (event) => {
       apply(target, thisArg, args) {
         const res = target.apply(thisArg, args as any);
 
-        resetPixiState();
-        pixiWrapper.state().version = pixiWrapper.version();
-        if (renderer.lastObjectRendered === pixiWrapper.stage()) {
-          // loop through the children of the stage
-          sceneGraphMap.clear();
-          Looper.shared.loop({
-            container: pixiWrapper.stage()!,
-            loop: (container, parent) => {
-              updateSceneStats(container);
-              updateSceneGraph(container, parent);
-            },
-          });
+        const currentTime = Date.now();
+        if (currentTime - lastUpdateTime >= 100) {
+          lastUpdateTime = currentTime;
+
+          resetPixiState();
+          pixiWrapper.state().version = pixiWrapper.version();
+          if (renderer.lastObjectRendered === pixiWrapper.stage()) {
+            // loop through the children of the stage
+            sceneGraphMap.clear();
+            loop({
+              container: pixiWrapper.stage()!,
+              loop: (container, parent) => {
+                updateSceneStats(container);
+                updateSceneGraph(container, parent);
+              },
+            });
+          }
+
+          pixiWrapper.properties.updateSelectedNodes();
+
+          window.postMessage({ method: MessageType.StateUpdate, data: JSON.stringify(pixiWrapper.state()) }, '*');
         }
-
-        pixiWrapper.properties.updateSelectedNodes();
-
-        window.postMessage({ method: MessageType.StateUpdate, data: JSON.stringify(pixiWrapper.state()) }, '*');
         return res;
       },
     });

diff --git a/src/lib/src/detection/utils/loop.ts b/src/lib/src/detection/utils/loop.ts
@@ -6,50 +6,30 @@ interface LoopOptions {
   container: Container;
 }
 
-export class Looper {
-  public loop(options: LoopOptions) {
-    const { container, ...rest } = options;
+export function loop(options: LoopOptions) {
+  const { container, ...rest } = options;
 
-    if (!rest.test) {
-      rest.test = () => true;
-    }
-
-    this._loopRecursive(container, rest);
+  if (!rest.test) {
+    rest.test = () => true;
   }
 
-  private _loopRecursive(container: Container, opts: Omit<LoopOptions, 'container'>) {
-    const { loop, test } = opts;
-
-    if (!test?.(container)) {
-      return;
-    }
-
-    loop(container, container.parent);
+  loopRecursive(container, rest);
+}
 
-    if (container.children.length === 0) {
-      return;
-    }
+function loopRecursive(container: Container, opts: Omit<LoopOptions, 'container'>) {
+  const { loop, test } = opts;
 
-    for (let i = 0; i < container.children.length; i++) {
-      this._loopRecursive(container.children[i], opts);
-    }
+  if (!test?.(container)) {
+    return;
   }
 
-  //   private _loopRecursive(
-  //     container: Container,
-  //     cb: (container: Container) => void,
-  //     test: (container: Container) => boolean
-  //   ) {
-  //     if (!test(container)) {
-  //       return;
-  //     }
+  loop(container, container.parent);
 
-  //     cb(container);
-
-  //     for (let i = 0; i < container.children.length; i++) {
-  //       this._loopRecursive(container.children[i], cb, test);
-  //     }
-  //   }
+  if (container.children.length === 0) {
+    return;
+  }
 
-  public static shared = new Looper();
-}
+  for (let i = 0; i < container.children.length; i++) {
+    loopRecursive(container.children[i], opts);
+  }
+}