Fix: ignoring children of node (#11)

.github/workflows/main.yml

@@ -21,6 +21,9 @@ jobs:
       - name: Install Dependencies
         run: npm ci
 
+      - name: Test Types
+        run: npm run types
+
       - name: Build for Distribution
         run: xvfb-run --auto-servernum npm run build
 

README.md

@@ -77,14 +77,17 @@ window.__PIXI_DEVTOOLS__ = {
 
 ### Ignore Objects
 
-You can ignore objects from being displayed in the scene panel by setting the `__devtoolIgnore` property to any pixi object. This can be useful for ignoring objects such as particle containers that can have thousands of children and slow down the devtool considerably.
+You can ignore objects from being displayed in the scene panel by setting the `__devtoolIgnore`/`__devtoolIgnoreChildren` properties to any pixi object. This can be useful for ignoring objects such as particle containers that can have thousands of children and slow down the devtool considerably.
 
 ```js
 const container = new Container();
 container.__devtoolIgnore = true;
+
+const particles = new ParticleContainer();
+particles.__devtoolIgnoreChildren = true;
 ```
 
-If you install the `@pixi/devtools` package the typings for `__devtoolIgnore` will be included in your project for you.
+If you install the `@pixi/devtools` package the typings for `__devtoolIgnore`/ `__devtoolIgnoreChildren` will be available.
 
 ### Property Plugins
 

packages/api/global.d.ts

@@ -21,12 +21,14 @@ declare global {
   namespace PixiMixins {
     interface Container {
       __devtoolIgnore?: boolean;
+      __devtoolIgnoreChildren?: string;
     }
   }
 
   namespace GlobalMixins {
     interface Container {
       __devtoolIgnore?: boolean;
+      __devtoolIgnoreChildren?: string;
     }
   }
 }

packages/devtool-chrome/src/inject/pixi.ts

@@ -239,6 +239,7 @@ class PixiWrapper {
           },
           test: (container) => {
             if(container.__devtoolIgnore) return false;
+            if(container.__devtoolIgnoreChildren) return 'children';
             return true;
           },
         });

packages/devtool-chrome/src/inject/scene/stats/stats.ts

@@ -48,7 +48,7 @@ export class NodeTracker {
   }
 
   private get plugins() {
-    return [totalNodesPlugin, ...(this._devtool.devtools.plugins?.stats ?? []), defaultPlugin];
+    return [totalNodesPlugin, ...(this._devtool.devtools!.plugins?.stats ?? []), defaultPlugin];
   }
   public init() {
     // loop through all plugins and get the keys and set to 0

packages/devtool-chrome/src/inject/scene/tree/properties.ts

@@ -30,7 +30,7 @@ export class Properties {
   }
 
   public init() {
-    this._plugins = [...(this._devtool.devtools.plugins?.properties ?? []), ...this.defaultPlugins];
+    this._plugins = [...(this._devtool.devtools!.plugins?.properties ?? []), ...this.defaultPlugins];
   }
 
   public setValue(prop: string, value: any) {

packages/devtool-chrome/src/inject/utils/loop.ts

@@ -2,7 +2,7 @@ import type { Container } from 'pixi.js';
 
 interface LoopOptions {
   loop: (container: Container, parent: Container) => void;
-  test?: (container: Container, parent: Container) => boolean;
+  test?: (container: Container, parent: Container) => boolean | 'children'
   container: Container;
 }
 
@@ -15,14 +15,16 @@ export function loop(options: LoopOptions) {
 function loopRecursive(container: Container, opts: Omit<LoopOptions, 'container'>) {
   const { loop, test } = opts;
 
-  if (!test?.(container, container.parent)) {
+  const testResult = test?.(container, container.parent) ?? true;
+
+  if (testResult === false) {
     return;
   }
 
 
   loop(container, container.parent);
 
-  if (container.children.length === 0) {
+  if (container.children.length === 0 || testResult === 'children') {
     return;
   }
 

packages/devtool-local/src/main.tsx

@@ -92,7 +92,7 @@ let currentData = dataA;
 const scene = {
   id: 'root',
   name: 'root',
-  children: [],
+  children: [] as any[],
   metadata: {
     type: 'Container',
     uid: 'root',