wip

packages/api/src/types.ts

@@ -13,6 +13,7 @@ export type PropsData = Omit<PropertyPanelData, 'entry'> & { entry: NoOnChange }
 export interface PropertyPlugin {
   updateProps(container: Container): PropsData[];
   setValue(container: Container, prop: string, value: any): void;
+  containsProperty(prop: string): boolean;
   props: Props[];
 }
 

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

@@ -50,9 +50,9 @@ class PixiWrapper {
     },
   };
 
-  public statTracker = new NodeTracker();
-  public tree = new Tree();
-  public properties = new Properties();
+  public statTracker = new NodeTracker(this);
+  public tree = new Tree(this);
+  public properties = new Properties(this);
   // Private properties
   private _devtools: Devtools | undefined;
   private _app: Application | undefined;

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

@@ -1,6 +1,6 @@
 import { DevtoolState } from '@devtool/frontend/types';
 import type { Container } from 'pixi.js';
-import { PixiDevtools } from '../../pixi';
+import type { PixiDevtools } from '../../pixi';
 import { getPixiType } from '../../utils/getPixiType';
 import type { NodeTrackerPlugin } from '@pixi/devtools';
 
@@ -42,12 +42,17 @@ const defaultPlugin: NodeTrackerPlugin = {
 };
 
 export class NodeTracker {
+  private _devtool: typeof PixiDevtools;
+  constructor(devtool: typeof PixiDevtools) {
+    this._devtool = devtool;
+  }
+
   private get plugins() {
-    return [totalNodesPlugin, ...(PixiDevtools.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
-    const state = PixiDevtools.state.stats!;
+    const state = this._devtool.state.stats!;
     for (const plugin of this.plugins) {
       for (const key of plugin.getKeys()) {
         if (state[key] != undefined) {
@@ -58,7 +63,7 @@ export class NodeTracker {
     }
   }
   public trackNode(container: Container) {
-    const state = PixiDevtools.state.stats!;
+    const state = this._devtool.state.stats!;
     for (const plugin of this.plugins) {
       if (plugin.trackNode(container, state)) {
         break;
@@ -67,7 +72,7 @@ export class NodeTracker {
   }
   public complete() {
     // remove any nodes that are at 0
-    const state = PixiDevtools.state.stats!;
+    const state = this._devtool.state.stats!;
 
     for (const key in state) {
       if (state[key] === 0) {

packages/devtool-chrome/src/inject/scene/tree/plugins/AnimatedSpriteProperties.ts

@@ -1,23 +1,25 @@
 import { PropertyPlugin } from '@pixi/devtools';
 import type { AnimatedSprite } from 'pixi.js';
+import { ContainerPropertiesPlugin } from './ContainerProperties';
 
 export const AnimatedSpritePropertiesPlugin: PropertyPlugin = {
   updateProps(sprite: AnimatedSprite) {
     this.props.forEach((property) => {
       const prop = property.prop as keyof AnimatedSprite | string;
-      let value = sprite[prop as keyof AnimatedSprite] as any;
+      const value = sprite[prop as keyof AnimatedSprite] as any;
 
       if (value != null && (prop === 'start' || prop === 'stop' || prop === 'play')) {
-        value = true;
+        property.value = true;
       } else if (value != null && prop === 'anchor') {
-        value = [value.x, value.y];
+        property.value = [value.x, value.y];
+      } else {
+        property.value = value;
       }
-
-      property.value = value;
     });
 
     return this.props;
   },
+  containsProperty: ContainerPropertiesPlugin.containsProperty,
   setValue(sprite: AnimatedSprite, prop: string, value: any) {
     prop = prop as keyof AnimatedSprite;
     if (prop === 'start') {

packages/devtool-chrome/src/inject/scene/tree/plugins/ContainerProperties.ts

@@ -5,30 +5,34 @@ export const ContainerPropertiesPlugin: PropertyPlugin = {
   updateProps(container: Container) {
     this.props.forEach((property) => {
       const prop = property.prop as keyof Container | string;
-      let value = container[prop as keyof Container] as any;
+      const value = container[prop as keyof Container] as any;
 
       if (prop === 'type') {
-        value = container.constructor.name;
+        property.value = container.constructor.name;
       } else if (value != null && (prop === 'position' || prop === 'scale' || prop === 'pivot' || prop === 'skew')) {
-        value = [value.x, value.y];
+        property.value = [value.x, value.y];
       } else if (
         value != null &&
         (prop === 'filterArea' || prop === 'boundsArea' || prop === 'cullArea' || prop === 'hitArea')
       ) {
-        value = [value.x, value.y, value.width, value.height];
+        property.value = [value.x, value.y, value.width, value.height];
       } else if (value != null && prop === 'worldTransform') {
-        value = value.toArray();
+        property.value = value.toArray();
+      } else {
+        property.value = value;
       }
-
-      property.value = value;
     });
 
     return this.props;
   },
+  containsProperty(prop: string) {
+    return this.props.some((property) => property.prop === prop || property.prop === 'type');
+  },
   setValue(container: Container, prop: string, value: any) {
     prop = prop as keyof Container;
     if (prop === 'position' || prop === 'scale' || prop === 'pivot' || prop === 'skew') {
-      container[prop].set(value[0], value[1]);
+      container.x = value[0];
+      container.y = value[1];
     } else if (prop === 'filterArea' || prop === 'boundsArea' || prop === 'cullArea' || prop === 'hitArea') {
       (container[prop] as Rectangle)!.x = value[0];
       (container[prop] as Rectangle)!.y = value[1];

packages/devtool-chrome/src/inject/scene/tree/plugins/GraphicsProperties.ts

@@ -1,5 +1,6 @@
 import { PropertyPlugin } from '@pixi/devtools';
 import type { Graphics } from 'pixi.js';
+import { ContainerPropertiesPlugin } from './ContainerProperties';
 
 export const GraphicsPropertiesPlugin: PropertyPlugin = {
   updateProps(graphic: Graphics) {
@@ -12,6 +13,7 @@ export const GraphicsPropertiesPlugin: PropertyPlugin = {
 
     return this.props;
   },
+  containsProperty: ContainerPropertiesPlugin.containsProperty,
   setValue(graphic: Graphics, prop: string, value: any) {
     (graphic as any)[prop] = value;
   },

packages/devtool-chrome/src/inject/scene/tree/plugins/MeshProperties.ts

@@ -1,5 +1,6 @@
 import { PropertyPlugin } from '@pixi/devtools';
 import type { Mesh } from 'pixi.js';
+import { ContainerPropertiesPlugin } from './ContainerProperties';
 
 export const MeshPropertiesPlugin: PropertyPlugin = {
   updateProps(mesh: Mesh) {
@@ -15,6 +16,7 @@ export const MeshPropertiesPlugin: PropertyPlugin = {
   setValue(mesh: Mesh, prop: string, value: any) {
     (mesh as any)[prop] = value;
   },
+  containsProperty: ContainerPropertiesPlugin.containsProperty,
   props: [
     { value: null, prop: 'roundPixels', entry: { section: 'Transform', type: 'boolean' } },
     {

packages/devtool-chrome/src/inject/scene/tree/plugins/NineSliceProperties.ts

@@ -1,5 +1,6 @@
 import { PropertyPlugin } from '@pixi/devtools';
 import type { NineSliceSprite } from 'pixi.js';
+import { ContainerPropertiesPlugin } from './ContainerProperties';
 
 export const NineSliceSpritePropertiesPlugin: PropertyPlugin = {
   updateProps(nineSlice: NineSliceSprite) {
@@ -15,6 +16,7 @@ export const NineSliceSpritePropertiesPlugin: PropertyPlugin = {
   setValue(nineSlice: NineSliceSprite, prop: string, value: any) {
     (nineSlice as any)[prop] = value;
   },
+  containsProperty: ContainerPropertiesPlugin.containsProperty,
   props: [
     { value: null, prop: 'roundPixels', entry: { section: 'Transform', type: 'boolean' } },
     { value: null, prop: 'leftWidth', entry: { section: 'NineSlice Sprite', type: 'number' } },

packages/devtool-chrome/src/inject/scene/tree/plugins/SpriteProperties.ts

@@ -1,21 +1,23 @@
 import { PropertyPlugin } from '@pixi/devtools';
 import type { Sprite } from 'pixi.js';
+import { ContainerPropertiesPlugin } from './ContainerProperties';
 
 export const SpritePropertiesPlugin: PropertyPlugin = {
   updateProps(sprite: Sprite) {
     this.props.forEach((property) => {
       const prop = property.prop as keyof Sprite | string;
-      let value = sprite[prop as keyof Sprite] as any;
+      const value = sprite[prop as keyof Sprite] as any;
 
       if (value != null && prop === 'anchor') {
-        value = [value.x, value.y];
+        property.value = [value.x, value.y];
+      } else {
+        property.value = value;
       }
-
-      property.value = value;
     });
 
     return this.props;
   },
+  containsProperty: ContainerPropertiesPlugin.containsProperty,
   setValue(sprite: Sprite, prop: string, value: any) {
     prop = prop as keyof Sprite;
     if (prop === 'anchor') {

packages/devtool-chrome/src/inject/scene/tree/plugins/TextProperties.ts

@@ -1,21 +1,23 @@
 import { PropertyPlugin } from '@pixi/devtools';
 import type { Text } from 'pixi.js';
+import { ContainerPropertiesPlugin } from './ContainerProperties';
 
 export const TextPropertiesPlugin: PropertyPlugin = {
   updateProps(text: Text) {
     this.props.forEach((property) => {
       const prop = property.prop as keyof Text | string;
-      let value = text[prop as keyof Text] as any;
+      const value = text[prop as keyof Text] as any;
 
       if (value != null && prop === 'anchor') {
-        value = [value.x, value.y];
+        property.value = [value.x, value.y];
+      } else {
+        property.value = value;
       }
-
-      property.value = value;
     });
 
     return this.props;
   },
+  containsProperty: ContainerPropertiesPlugin.containsProperty,
   setValue(text: Text, prop: string, value: any) {
     prop = prop as keyof Text;
 

packages/devtool-chrome/src/inject/scene/tree/plugins/TilingSpriteProperties.ts

@@ -1,21 +1,23 @@
 import { PropertyPlugin } from '@pixi/devtools';
 import type { TilingSprite } from 'pixi.js';
+import { ContainerPropertiesPlugin } from './ContainerProperties';
 
 export const TilingSpritePropertiesPlugin: PropertyPlugin = {
   updateProps(sprite: TilingSprite) {
     this.props.forEach((property) => {
       const prop = property.prop as keyof TilingSprite | string;
-      let value = sprite[prop as keyof TilingSprite] as any;
+      const value = sprite[prop as keyof TilingSprite] as any;
 
       if (value != null && (prop === 'anchor' || prop === 'tilePosition' || prop === 'tileScale')) {
-        value = [value.x, value.y];
+        property.value = [value.x, value.y];
+      } else {
+        property.value = value;
       }
-
-      property.value = value;
     });
 
     return this.props;
   },
+  containsProperty: ContainerPropertiesPlugin.containsProperty,
   setValue(sprite: TilingSprite, prop: string, value: any) {
     prop = prop as keyof TilingSprite;
     if (prop === 'anchor' || prop === 'tilePosition' || prop === 'tileScale') {

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

@@ -1,53 +1,60 @@
+import type { PropertyPanelData } from '@devtool/frontend/pages/scene/scene-tree/Properties';
 import type { PropertyPlugin } from '@pixi/devtools';
+import type { PixiDevtools } from '../../pixi';
+import { AnimatedSpritePropertiesPlugin } from './plugins/AnimatedSpriteProperties';
 import { ContainerPropertiesPlugin } from './plugins/ContainerProperties';
-import { PixiDevtools } from '../../pixi';
-import type { PropertyPanelData } from '@devtool/frontend/pages/scene/scene-tree/Properties';
+import { GraphicsPropertiesPlugin } from './plugins/GraphicsProperties';
+import { MeshPropertiesPlugin } from './plugins/MeshProperties';
+import { NineSliceSpritePropertiesPlugin } from './plugins/NineSliceProperties';
 import { SpritePropertiesPlugin } from './plugins/SpriteProperties';
+import { TextPropertiesPlugin } from './plugins/TextProperties';
+import { TilingSpritePropertiesPlugin } from './plugins/TilingSpriteProperties';
 
 export class Properties {
   public defaultPlugins: PropertyPlugin[] = [
     ContainerPropertiesPlugin,
     SpritePropertiesPlugin,
-    // GraphicsPropertiesPlugin,
-    // MeshPropertiesPlugin,
-    // TextPropertiesPlugin,
-    // NineSliceSpritePropertiesPlugin,
-    // TilingSpritePropertiesPlugin,
-    // AnimatedSpritePropertiesPlugin,
+    GraphicsPropertiesPlugin,
+    MeshPropertiesPlugin,
+    TextPropertiesPlugin,
+    NineSliceSpritePropertiesPlugin,
+    TilingSpritePropertiesPlugin,
+    AnimatedSpritePropertiesPlugin,
   ];
 
   private _plugins!: PropertyPlugin[];
+  private _devtool: typeof PixiDevtools;
+
+  constructor(devtool: typeof PixiDevtools) {
+    this._devtool = devtool;
+  }
 
   public init() {
-    this._plugins = [...(PixiDevtools.devtools.plugins?.properties ?? []), ...this.defaultPlugins];
-    // this._plugins.forEach((plugin) => {
-    //   plugin.props.forEach((prop) => {
-    //     prop.value = null;
-    //   });
-    // });
+    this._plugins = [...(this._devtool.devtools.plugins?.properties ?? []), ...this.defaultPlugins];
   }
 
   public setValue(prop: string, value: any) {
-    const selectedNode = PixiDevtools.tree.selectedNode;
+    const selectedNode = this._devtool.tree.selectedNode;
 
     if (!selectedNode) return;
 
     this._plugins.forEach((plugin) => {
-      plugin.setValue(selectedNode, prop, value);
+      if (plugin.containsProperty(prop)) plugin.setValue(selectedNode, prop, value);
     });
   }
 
   public update() {
-    const selectedNode = PixiDevtools.tree.selectedNode;
+    const selectedNode = this._devtool.tree.selectedNode;
     if (!selectedNode) return;
 
     this._plugins.forEach((plugin) => {
-      plugin.updateProps(PixiDevtools.tree.selectedNode!);
+      plugin.updateProps(this._devtool.tree.selectedNode!);
     });
   }
 
   public complete() {
     const activeProps = this._plugins.map((plugin) => plugin.props).flat();
-    PixiDevtools.state.activeProps = activeProps as PropertyPanelData[];
+    const uniqueProps = Array.from(new Set(activeProps.map(JSON.stringify as any))).map(JSON.parse as any);
+    this._devtool.state.activeProps = uniqueProps as PropertyPanelData[];
   }
 }