more props

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

@@ -6,6 +6,8 @@ import './Properties.css';
 import { NumberInput, NumberProps } from './number/Number';
 import { Slider, SliderProps } from './slider/Slider';
 import { SwitchProps, Switcher } from './switch/Switch';
+import { TextInput, TextProps } from './text/Text';
+import { Vector2, Vector2Props } from './number/Vector2';
 
 export interface PropertyProps {
   type:
@@ -22,7 +24,7 @@ export interface PropertyProps {
     | 'vector3'
     | 'rect'
     | 'matrix';
-  propertyProps: NumberProps | SwitchProps | SliderProps; // | TextProps | TextareaProps | ButtonProps;
+  propertyProps: NumberProps | SwitchProps | SliderProps | TextProps | Vector2Props; // | TextareaProps | ButtonProps;
   property: string;
 }
 
@@ -35,13 +37,17 @@ const Property: React.FC<PropertyProps> = ({ type, propertyProps }) => {
     case 'number':
       inputElement = <NumberInput {...(propertyProps as NumberProps)} />;
       break;
+    case 'vector2':
+      inputElement = <Vector2 {...(propertyProps as Vector2Props)} />;
+      break;
     case 'range':
       inputElement = <Slider {...(propertyProps as SliderProps)} />;
       break;
     case 'select':
       // inputElement = <Select value={value} onChange={handleChange} />;
       break;
     case 'text':
+      inputElement = <TextInput {...(propertyProps as TextProps)} />;
       // inputElement = <input className="Input" type="text" value={value} onChange={handleChange} />;
       break;
     case 'textarea':
@@ -69,13 +75,13 @@ const PropertiesComponent: React.FC<PropertiesProps> = () => {
   const propertyPanel = usePixiStore((state) => state.selectedNodeProps);
   const bridge = usePixiStore((state) => state.bridge);
 
-  console.log('render props', selectedNodeId, currentValues, propertyPanel);
+  // console.log('render props', selectedNodeId, currentValues, propertyPanel);
   if (selectedNodeId === null) {
     return null;
   }
 
-
   const handlePropertyChange = (property: string, newValue: any) => {
+    console.log('handlePropertyChange', property, newValue);
     bridge(`
       window.__PIXI_DEVTOOL_WRAPPER__.properties.setValue('${property}', ${newValue})
     `);

src/lib/src/components/properties/number/Number.tsx

@@ -11,7 +11,7 @@ export interface NumberProps extends BasePropertyProps {
 }
 
 const StyledNumberRoot = styled.input`
-  width: 200px;
+  width: 100%;
   display: inline-flex;
   align-items: center;
   justify-content: center;

src/lib/src/components/properties/number/Vector2.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import styled from 'styled-components';
+import { NumberInput, NumberProps } from './Number';
+import { BaseProperty, BasePropertyProps } from '../BaseProperty';
+
+export interface Vector2Props extends BasePropertyProps {
+  x: NumberProps;
+  y: NumberProps;
+  onChange: (value: [number, number]) => void;
+  value: [number, number];
+}
+
+const Vector2Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+export const Vector2: React.FC<Vector2Props> = ({ x, y, label, onChange, value }) => {
+  x.onChange = (value: number) => {
+    console.log('x.onChange', value, y.value);
+    onChange(JSON.stringify([value, y.value]))
+  }
+  y.onChange = (value: number) => {
+    onChange(JSON.stringify([x.value, value]))
+  }
+
+  x.value = value[0];
+  y.value = value[1];
+
+  return (
+    <BaseProperty label={label}>
+      <Vector2Container>
+        <NumberInput {...x} />
+        <NumberInput {...y} />
+      </Vector2Container>
+    </BaseProperty>
+  );
+};

src/lib/src/components/properties/text/Text.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import styled from 'styled-components';
+import { BaseProperty, BasePropertyProps } from '../BaseProperty';
+
+export interface TextProps extends BasePropertyProps {
+  value: string;
+  onChange: (value: string) => void;
+  disabled?: boolean;
+}
+
+const StyledNumberRoot = styled.input`
+  width: 200px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 10px;
+  height: 35px;
+  font-size: 15px;
+  line-height: 1;
+  color: white;
+  background-color: var(--darkest-color);
+  box-shadow: 0 0 0 1px black;
+
+  &:focus {
+    box-shadow: 0 0 0 2px var(--secondary-color);
+  }
+  &::selection {
+    background-color: var(--secondary-color);
+    color: white;
+  }
+`;
+
+export const TextInput: React.FC<TextProps> = ({ value, onChange, label, ...rest }) => {
+  return (
+    <BaseProperty label={label}>
+      <StyledNumberRoot
+        type="text"
+        value={value}
+        onChange={(event) => onChange(JSON.stringify(event.target.value))}
+        {...rest}
+      />
+    </BaseProperty>
+  );
+};

src/lib/src/detection/properties/ContainerPropsPlugin.ts

@@ -2,6 +2,7 @@ import { Container, Matrix, ObservablePoint, Point, Rectangle } from 'pixi.js';
 import { PropertyPlugin } from './propertyTypes';
 import { SliderProps } from '@lib/src/components/properties/slider/Slider';
 import { getPixiWrapper } from '../devtool';
+import { Vector2Props } from '@lib/src/components/properties/number/Vector2';
 
 export const ContainerPropsPlugin: PropertyPlugin = {
   getPropValue: function (container, prop) {
@@ -11,6 +12,10 @@ export const ContainerPropsPlugin: PropertyPlugin = {
     const pixi = getPixiWrapper().pixi();
     const value = container[prop as keyof Container];
 
+    if (prop === 'type') {
+      return { value: container.constructor.name, prop };
+    }
+
     if (value instanceof pixi.Matrix) {
       return { value: value.toArray(), prop };
     } else if (value instanceof pixi.Point) {
@@ -29,14 +34,16 @@ export const ContainerPropsPlugin: PropertyPlugin = {
     }
     const pixi = getPixiWrapper().pixi();
 
+    console.log('Setting prop', prop, value);
+
     if (container[prop as keyof Container] instanceof pixi.Matrix) {
       (container[prop as keyof Container] as Matrix).fromArray(value);
     } else if (container[prop as keyof Container] instanceof pixi.Point) {
       (container[prop as keyof Container] as Point).set(value[0], value[1]);
     } else if (container[prop as keyof Container] instanceof pixi.ObservablePoint) {
       (container[prop as keyof Container] as ObservablePoint).set(value[0], value[1]);
     } else if (container[prop as keyof Container] instanceof pixi.Rectangle) {
-      const rect = (container[prop as keyof Container] as Rectangle)
+      const rect = container[prop as keyof Container] as Rectangle;
       rect.x = value[0];
       rect.y = value[1];
       rect.width = value[2];
@@ -47,12 +54,20 @@ export const ContainerPropsPlugin: PropertyPlugin = {
   },
 
   getValidProps: function (container) {
-    return this.props.filter((prop) => container[prop.property as keyof Container] !== undefined);
+    return this.props.filter((prop) => {
+      if (prop.property === 'type') return true;
+      return container[prop.property as keyof Container] !== undefined;
+    });
   },
   props: [
-    // { property: 'type', section: 'Info', propertyProps: { label: 'Type' }, type: 'text' }, // not editable
-    // { property: 'label', section: 'Info', propertyProps: { label: 'Label' }, type: 'text' },
-    // { section: 'Transform', property: 'position', propertyProps: { label: 'Position' }, type: 'vector2' },
+    { property: 'type', section: 'Info', propertyProps: { label: 'Type', disabled: true }, type: 'text' }, // not editable
+    { property: 'label', section: 'Info', propertyProps: { label: 'Label' }, type: 'text' },
+    {
+      section: 'Transform',
+      property: 'position',
+      propertyProps: { label: 'Position', x: { label: 'x' }, y: { label: 'y' } } as Vector2Props,
+      type: 'vector2',
+    },
     // { section: 'Transform', property: 'width', propertyProps: { label: 'Width' }, type: 'number' },
     // { section: 'Transform', property: 'height', propertyProps: { label: 'Height' }, type: 'number' },
     // { section: 'Transform', property: 'scale', propertyProps: { label: 'Scale' }, type: 'vector2' },

src/lib/src/detection/properties/properties.ts

@@ -83,9 +83,13 @@ export const properties = () => {
     },
     setValue: function (property: string, value: any) {
       const node = this.idToNode();
+      const state = getPixiWrapper().state();
 
       if (!node) {
         this.setSelectedNodeIds(null);
+        state.selectedNodeValues = {};
+        state.selectedNodeProps = { values: [], keys: [] };
+        state.selectedNodeId = null;
         return;
       }