add more property types

.eslintrc

@@ -20,6 +20,7 @@
     "plugins": ["react", "@typescript-eslint"],
     "rules": {
       "react/react-in-jsx-scope": "off",
+      "react/prop-types": "off",
       "@typescript-eslint/no-explicit-any": "off",
       "@typescript-eslint/no-non-null-assertion": "off"
     },

README.md

@@ -8,6 +8,16 @@
 
 A chrome extension for debugging PixiJS applications.
 
+# Features
+
+This extension is currently in development and has reached only its first phase. In the next phase we will be adding more features to make it easier for developers to diagnose performance issues and visualize the resources that their applications are consuming. The main focus will be around displaying what assets have been loaded by the application.
+
+For now the extension has the following features:
+
+- Display what type of objects your scene is made up of, and how it changes over time.
+- Display the display tree of the application.
+- Ability to inspect and change the properties of objects in the scene.
+
 ## Installation
 
 Installation is available from the chrome web store.

src/example/src/main.ts

@@ -1,5 +1,5 @@
-import { Application, Assets, Container, Sprite } from 'pixi.js';
 import * as PIXI from 'pixi.js';
+import { Application, Assets, Container, Sprite } from 'pixi.js';
 
 (async () => {
   // Create a new application
@@ -11,7 +11,7 @@ import * as PIXI from 'pixi.js';
   window.__PIXI__DEVTOOLS__ = {
     app: app,
     pixi: PIXI,
-  }
+  };
 
   // Append the application canvas to the document body
   document.body.appendChild(app.canvas);
@@ -31,6 +31,8 @@ import * as PIXI from 'pixi.js';
     bunny.x = (i % 5) * 40;
     bunny.y = Math.floor(i / 5) * 40;
     bunny.label = `Bunny ${i}`;
+    bunny.filterArea = new PIXI.Rectangle(0, 0, 40, 40);
+    bunny.boundsArea = new PIXI.Rectangle(0, 0, 40, 40);
     container.addChild(bunny);
   }
 

src/lib/src/components/properties/Properties.tsx

@@ -7,6 +7,9 @@ import { Slider, SliderProps } from './slider/Slider';
 import { SwitchProps, Switcher } from './switch/Switch';
 import { TextInput, TextProps } from './text/Text';
 import { Vector2, Vector2Props } from './number/Vector2';
+import { ButtonInput, ButtonProps } from './button/Button';
+import { SelectInput, SelectProps } from './select/Select';
+import { VectorX, VectorXProps } from './number/VectorX';
 export interface PropertyProps {
   type:
     | 'boolean'
@@ -19,10 +22,16 @@ export interface PropertyProps {
     | 'button'
     | 'color'
     | 'vector2'
-    | 'vector3'
-    | 'rect'
-    | 'matrix';
-  propertyProps: NumberProps | SwitchProps | SliderProps | TextProps | Vector2Props; // | TextareaProps | ButtonProps;
+    | 'vectorX';
+  propertyProps:
+    | NumberProps
+    | SwitchProps
+    | SliderProps
+    | TextProps
+    | Vector2Props
+    | ButtonProps
+    | SelectProps
+    | VectorXProps;
   property: string;
 }
 
@@ -42,24 +51,22 @@ const Property: React.FC<PropertyProps> = ({ type, propertyProps }) => {
       inputElement = <Slider {...(propertyProps as SliderProps)} />;
       break;
     case 'select':
-      // inputElement = <Select value={value} onChange={handleChange} />;
+      inputElement = <SelectInput {...(propertyProps as SelectProps)} />;
       break;
     case 'text':
       inputElement = <TextInput {...(propertyProps as TextProps)} />;
-      // inputElement = <input className="Input" type="text" value={value} onChange={handleChange} />;
       break;
     case 'textarea':
       // inputElement = <textarea className="Textarea" value={value} onChange={handleChange} />;
       break;
     case 'button':
-      // inputElement = (
-      //   <button className="Button" onClick={() => onChange('clicked')}>
-      //     {label}
-      //   </button>
-      // );
+      inputElement = <ButtonInput {...(propertyProps as ButtonProps)} />;
+      break;
+    case 'vectorX':
+      inputElement = <VectorX {...(propertyProps as VectorXProps)} />;
       break;
     default:
-    // inputElement = <input className="Input" type="text" value={value} onChange={handleChange} />;
+      inputElement = <TextInput {...(propertyProps as TextProps)} />;
   }
 
   return inputElement;

src/lib/src/components/properties/button/Button.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import styled from 'styled-components';
+import { BaseProperty, BasePropertyProps } from '../BaseProperty';
+
+export interface ButtonProps extends BasePropertyProps {
+  value: number;
+  onChange: () => void;
+}
+
+const StyledButtonRoot = styled.button`
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 10px;
+  height: 24px;
+  font-size: 10px;
+  line-height: 1;
+  color: var(--text);
+  background-color: var(--darkest-color);
+  box-shadow: 0 0 0 1px black;
+  transition:
+    box-shadow 0.2s,
+    color 0.2s;
+
+  &:hover {
+    box-shadow: 0 0 0 1px var(--secondary-color);
+    color: white;
+  }
+
+  &:active {
+    background-color: var(--secondary-color);
+    color: white;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+`;
+
+export const ButtonInput: React.FC<ButtonProps> = ({ value, onChange, label }) => {
+  return (
+    <BaseProperty label={label}>
+      <StyledButtonRoot value={value} onClick={() => onChange()}>
+        {label}
+      </StyledButtonRoot>
+    </BaseProperty>
+  );
+};