Property Panel

[robertlong]

Property Panel

Properties

Text Input

• Types: string

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

<TextInput>

Checkbox Input

• Types: bool

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

<CheckboxInput>

Numeric Input

• Types u32 f32

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;
}

<NumericInput>

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

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

<Vector2Input>

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

<Vector3Input>

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

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

<RGBInput>

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

<RGBAInput>

Select Input

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

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

<SelectInput>

Combo Input

• Types ref
• Allows you to search for resources of a certain type and select 1 of that type
• Should use useCombobox from downshift

// Props to be decided by useCombobox props

<ComboInput>

Multi Select Input

• Types bitmask
• Allows you to pick multiple items from an array of options
• Should use useMultipleSelection from downshift

// Props to be decided by useMultipleSelection props

<MultiSelectInput>

File Input

• Types arrayBuffer

<FileInput>

List Input

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

<ListInput>

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 <StringInput>

<MapInput>

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.