Property Panel

Nobody has claimed this yet.

# Property Panel

## Properties

### Text Input

- Types: `string`

```ts
interface TextInputProps {
disabled?: boolean;
value: string
onChange: (value: string) => void;
}

```

### Checkbox Input

- Types: `bool`

```ts
interface CheckboxInputProps {
disabled?: boolean;
value: boolean
onChange: (value: boolean) => void;
}

```

### Numeric Input

- Types `u32` `f32`

```ts
interface NumericInputProps {
smStep?: number // Hold down ctrl plus up/down arrows
mdStep?: number // up/down arrows
lgStep?: number // Hold down shift plus up/down arrows
postfix?: string // Label like degrees symbol to show to the right of the input
disabled?: boolean;
displayPrecision?: number; // Floating point digits to display when not focused
roundPrecision?: number; // Max digits to round to when changed (0 means integer?)
value: number
onChange: (value: number) => void;
}

```
### Vector Inputs

- Types `vec2` `vec3`

- Should compose 2 or 3 NumericInputs with labels (x, y, z)
- Each label should be wrapped with a component which allows you to adjust the value with your mouse
- `quat` will be a special case where we show the user rotations in Euler angles and convert to/from quaternions

```ts
interface Vector2InputProps extends NumericInputProps {
value: Float32Array
onChange: (value: Float32Array) => void;
}

interface Vector3InputProps extends NumericInputProps {
value: Float32Array
onChange: (value: Float32Array) => void;
}

```

### Color Inputs

- Types `rgb` `rgba`
- Should compose 3/4 NumericInputs with labels (r, g, b, a) and a color picker / preview.
- Color picker should use [react-colorful](https://github.com/omgovich/react-colorful)

```ts
interface RGBInputProps extends NumericInputProps {
value: Float32Array
onChange: (value: Float32Array) => void;
}

interface RGBAInputProps extends NumericInputProps {
value: Float32Array
onChange: (value: Float32Array) => void;
}

```

### Select Input

- Types `enum`
- Standard select/dropdown input where you pick a single value from the list of enums

```ts
interface SelectInputProps {
options: { value: any, label: string }[]
disabled?: boolean;
value: T
onChange: (value: T) => void;
}

```

### Combo Input

- Types `ref`
- Allows you to search for resources of a certain type and select 1 of that type
- Should use [useCombobox](https://www.downshift-js.com/use-combobox) from downshift

```ts
// Props to be decided by useCombobox props

```

### Multi Select Input

- Types `bitmask`
- Allows you to pick multiple items from an array of options
- Should use [useMultipleSelection](https://www.downshift-js.com/use-multiple-selection) from downshift

```ts
// Props to be decided by useMultipleSelection props

```

### File Input

- Types `arrayBuffer`

```ts

```

### List Input

- Types `refArray`
- Atom used for adding / removing / reordering items in a list
- Items use some other input (currently only ``) to pick their value

```ts

```

### Map Input

- Types `refMap`
- Atom used for adding / removing / items in a map
- Item keys may be picked from a list of enums or specified manually with a ``

```ts

```

### Scrubber

- Used for changing a numeric value with your mouse. Wraps a text label and requests pointer lock when you click on it. Horizontal movement determines the change in value.

The issue names no files, tests, or entry points. Start by identifying where the property-panel components belong and how the listed value types are represented; completion requires the specified input components, vector and color composition, resource selection, list/map controls, and scrubber behavior.

Written by the indexing model from the issue text.