update readme

README.md

@@ -28,21 +28,21 @@ You can also download the latest release from the [releases page](https://github
 
 ## Setup
 
-To use the extension, you need to setup the devtool in your application. This is done by setting the `window.__PIXI_DEVTOOL__` object to contain the `pixi` and `app` properties.
+To use the extension, you need to setup the devtool in your application. This is done by setting the `window.__PIXI_DEVTOOLS__` object to contain the `pixi` and `app` properties.
 The `pixi` property should be the PixiJS library, and the `app` property should be the instance of the `Application` class.
 
 ```js
 import * as PIXI from 'pixi.js';
 
-window.__PIXI_DEVTOOL__ = {
+window.__PIXI_DEVTOOLS__ = {
   pixi: PIXI,
   app: new Application(),
 };
 ```
 
 ### Optional Configuration
 
-You can also pass a configuration object to the `__PIXI_DEVTOOL__` object. This object can contain the following properties:
+You can also pass a configuration object to the `__PIXI_DEVTOOLS__` object. This object can contain the following properties:
 
 - `stage` - The stage of the application. This is used to display the display tree.
 - `renderer` - The renderer of the application. This is used to display the render information.
@@ -51,7 +51,7 @@ You can also pass a configuration object to the `__PIXI_DEVTOOL__` object. This
 
 ```js
 const app = new Application();
-window.__PIXI_DEVTOOL__ = {
+window.__PIXI_DEVTOOLS__ = {
     pixi: PIXI,
     app
     stage: app.stage
@@ -72,7 +72,7 @@ const XYPlugin: PropertyPlugin = {
     if (this.getPropKeys().indexOf(prop) === -1) {
       return null;
     }
-    const pixi = getPixiWrapper().pixi();
+    const pixi = window.__PIXI_DEVTOOLS_WRAPPER__().pixi();
     const value = container[prop as keyof Container];
 
     if (value instanceof pixi.Point) {
@@ -85,7 +85,7 @@ const XYPlugin: PropertyPlugin = {
     if (this.getPropKeys().indexOf(prop) === -1) {
       return null;
     }
-    const pixi = getPixiWrapper().pixi();
+    const pixi = window.__PIXI_DEVTOOLS_WRAPPER__().pixi();
     if (container[prop as keyof Container] instanceof pixi.Point) {
       (container[prop as keyof Container] as Point).set(value[0], value[1]);
     } else {

global.d.ts

@@ -4,7 +4,7 @@ declare global {
     __PIXI_STAGE__: import('pixi.js').Container | undefined;
     __PIXI_RENDERER__: import('pixi.js').Renderer | undefined;
     __PIXI__: import('pixi.js');
-    __PIXI_DEVTOOL_WRAPPER__: any;
+    __PIXI_DEVTOOLS_WRAPPER__: any;
     __PIXI__DEVTOOLS__: {
       pixi: typeof import('pixi.js');
       app: import('pixi.js').Application | undefined;

src/chrome/src/inject/devtool.ts

@@ -73,7 +73,7 @@ export function getPixiWrapper(): Pixi {
       },
     };
 
-    window.__PIXI_DEVTOOL_WRAPPER__ = pixiWrapper;
+    window.__PIXI_DEVTOOLS_WRAPPER__ = pixiWrapper;
   }
 
   return pixiWrapper;

src/lib/components/properties/Properties.tsx

@@ -88,7 +88,7 @@ const PropertiesComponent: React.FC<PropertiesProps> = () => {
   const handlePropertyChange = (property: string, newValue: any) => {
     console.log('handlePropertyChange', property, newValue);
     bridge(`
-      window.__PIXI_DEVTOOL_WRAPPER__.properties.setValue('${property}', ${newValue})
+      window.__PIXI_DEVTOOLS_WRAPPER__.properties.setValue('${property}', ${newValue})
     `);
   };
 

src/lib/components/tree/TreeViewComponent.tsx

@@ -70,7 +70,7 @@ const TreeViewComponent: React.FC<TreeViewComponentProps> = () => {
                 // loop through the flattenTreeData and find the nodes that are selected
                 const selectedNodes = flattenTreeData.filter((node) => selectedNodeIds.has(node.id));
                 bridge(
-                  `window.__PIXI_DEVTOOL_WRAPPER__.properties.setSelectedNodeIds(${JSON.stringify(
+                  `window.__PIXI_DEVTOOLS_WRAPPER__.properties.setSelectedNodeIds(${JSON.stringify(
                     selectedNodes.map((node) => node.metadata!.uid)[0],
                   )})`,
                 );