From 8aa94cc224c3e42c54b5e692223c3a5da7722c63 Mon Sep 17 00:00:00 2001 From: Zyie <24736175+Zyie@users.noreply.github.com> Date: Sat, 10 Feb 2024 01:07:30 +0000 Subject: [PATCH] more props --- .../src/components/properties/Properties.tsx | 12 +++-- .../components/properties/number/Number.tsx | 2 +- .../components/properties/number/Vector2.tsx | 39 ++++++++++++++++ .../src/components/properties/text/Text.tsx | 45 +++++++++++++++++++ .../properties/ContainerPropsPlugin.ts | 25 ++++++++--- .../src/detection/properties/properties.ts | 4 ++ 6 files changed, 118 insertions(+), 9 deletions(-) create mode 100644 src/lib/src/components/properties/number/Vector2.tsx create mode 100644 src/lib/src/components/properties/text/Text.tsx diff --git a/src/lib/src/components/properties/Properties.tsx b/src/lib/src/components/properties/Properties.tsx index 4a816b6..af9cc04 100644 --- a/src/lib/src/components/properties/Properties.tsx +++ b/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,6 +37,9 @@ const Property: React.FC = ({ type, propertyProps }) => { case 'number': inputElement = ; break; + case 'vector2': + inputElement = ; + break; case 'range': inputElement = ; break; @@ -42,6 +47,7 @@ const Property: React.FC = ({ type, propertyProps }) => { // inputElement = ; break; case 'textarea': @@ -69,13 +75,13 @@ const PropertiesComponent: React.FC = () => { 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}) `); diff --git a/src/lib/src/components/properties/number/Number.tsx b/src/lib/src/components/properties/number/Number.tsx index bf9d328..6473fd7 100644 --- a/src/lib/src/components/properties/number/Number.tsx +++ b/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; diff --git a/src/lib/src/components/properties/number/Vector2.tsx b/src/lib/src/components/properties/number/Vector2.tsx new file mode 100644 index 0000000..59d81d2 --- /dev/null +++ b/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 = ({ 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 ( + + + + + + + ); +}; diff --git a/src/lib/src/components/properties/text/Text.tsx b/src/lib/src/components/properties/text/Text.tsx new file mode 100644 index 0000000..eda4955 --- /dev/null +++ b/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 = ({ value, onChange, label, ...rest }) => { + return ( + + onChange(JSON.stringify(event.target.value))} + {...rest} + /> + + ); +}; \ No newline at end of file diff --git a/src/lib/src/detection/properties/ContainerPropsPlugin.ts b/src/lib/src/detection/properties/ContainerPropsPlugin.ts index d224596..0a9ab38 100644 --- a/src/lib/src/detection/properties/ContainerPropsPlugin.ts +++ b/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,6 +34,8 @@ 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) { @@ -36,7 +43,7 @@ export const ContainerPropsPlugin: PropertyPlugin = { } 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' }, diff --git a/src/lib/src/detection/properties/properties.ts b/src/lib/src/detection/properties/properties.ts index 3177f53..4265fab 100644 --- a/src/lib/src/detection/properties/properties.ts +++ b/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; }