Control Components

Point

Wraps the Tweakpane point bindings.

Provides a nice cartesian picker for 2D points, and numeric input fields for 3D and 4D points. See the <RotationEuler> and <RotationQuaternion> components for higher-dimension graphical pickers.

Extends the vanilla JS Tweakpane APIs to also support tuple values. (Useful when working with frameworks like three.js / threlte.)

<Point> is a dynamic component, and the availability of the optionsZ and optionsW props will change depending on the number of dimensions in the value.

Usage outside of a <Pane> component will implicitly wrap the point picker in a <Pane position="inline"> component.

Example

🔗

Demo

🔗

2D Value:
{
  "x": 0,
  "y": 0
}

3D Value:
[
  0,
  0,
  0
]

4D Value:
{
  "x": 0,
  "y": 0,
  "z": 0,
  "w": 0
}

Code

🔗

<script lang="ts">
  import {
    Point,
    type PointOptions,
    type PointValue2d,
    type PointValue3d,
    type PointValue4d
  } from 'svelte-tweakpane-ui';

  let point2d: PointValue2d = { x: 0, y: 0 };

  // tuples are also fine
  let point3d: PointValue3d = [0, 0, 0];

  // dimension-specific option type needs to know the type of the point value
  let point3dXOptions: PointOptions<'3', 'x'> = {
    min: -100,
    max: 100
  };

  let point4d: PointValue4d = {
    x: 0,
    y: 0,
    z: 0,
    w: 0
  };
</script>

<Point
  bind:value={point2d}
  expanded={true}
  label="2D Point Picker"
  picker="inline"
  userExpandable={false}
/>
<Point
  bind:value={point3d}
  label="3D Point Picker"
  optionsX={point3dXOptions}
/>
<Point bind:value={point4d} min={0} max={100} label="4D Point Picker" />

<pre>
2D Value:
{JSON.stringify(point2d, null, 2)}

3D Value:
{JSON.stringify(point3d, null, 2)}

4D Value:
{JSON.stringify(point4d, null, 2)}
</pre>

Props

🔗

value 🔗 bindablerequired
Description	A 2D, 3D, or 4D point object to control. Takes a tuple with a `number` value for each dimension, or an object with at least `x` and `y` values, and optionally `z` and `w` values for additional dimensions. The type of this value will determine the availability of axis-specific option props. The value to control.
Type	`PointValue2d \| PointValue3d \| PointValue4d`

value

🔗

bindablerequired

Description

A 2D, 3D, or 4D point object to control.

Takes a tuple with a number value for each dimension, or an object with at least x and y values, and optionally z and w values for additional dimensions.

The type of this value will determine the availability of axis-specific option props. The value to control.

Type PointValue2d | PointValue3d | PointValue4d

min 🔗 optional
Description	The minimum value for all dimensions.
Type	`number`
Default	`undefined` No minimum.

max 🔗 optional
Description	The maximum value for all dimensions.
Type	`number`
Default	`undefined` No maximum.

format 🔗 optional
Description	A function to customize the point value's string representation (e.g. rounding, etc.).
Type	`((value: number) => string)`
Default	`undefined` Normal `.toString()` formatting.

keyScale 🔗 optional
Description	The unit scale for key-based input for all dimensions (e.g. the up and down arrow keys).
Type	`number`
Default	`1` Or `stepValue` if defined.

pointerScale 🔗 optional
Description	The unit scale for pointer-based input for all dimensions.
Type	`number`
Default	`undefined` Dynamic based on magnitude of `value`.

step 🔗 optional
Description	The minimum step interval for all dimensions.
Type	`number`
Default	`undefined` No step constraint.

disabled 🔗 optional
Description	Prevent interactivity and gray out the control.
Type	`boolean`
Default	`false`

label 🔗 optional
Description	Text displayed next to control.
Type	`string`
Default	`undefined`

theme 🔗 optional
Description	Custom color scheme.
Type	`Theme`
Default	`undefined` Inherits default Tweakpane theme equivalent to `ThemeUtils.presets.standard`, or the theme set with `setGlobalDefaultTheme()`.

userExpandable 🔗 optional
Description	Allow users to interactively expand / contract the picker.
Type	`boolean`
Default	`true`

expanded 🔗 bindableoptional
Description	Expand or collapse the input's picker.
Type	`boolean`
Default	`false`

picker 🔗 optional
Description	The style of value "picker" to use in the input.
Type	`'inline' \| 'popup'`
Default	`'popup'`

optionsX 🔗 optional
Description	Input parameters specific to the X dimension. Renamed from `x` in Tweakpane API to clarify that it is an object of options, not a value.
Type	`NumberTextInputParams`
Default	`undefined`

optionsY 🔗 optional
Description	Input parameters specific to the Y dimension. For 2D point values, the object also includes the `inverted` key, which inverts the Y axis. Renamed from `y` in Tweakpane API to clarify that it is an object of options, not a value.
Type	`NumberTextInputParams \| Point2dYParams`
Default	`undefined` `inverted` is `false`

optionsZ 🔗 optionaldynamic
Description	Input parameters specific to the Z dimension. Renamed from `z` in Tweakpane API to clarify that it is an object of options, not a value.
Type	`NumberTextInputParams`
Default	`undefined`
Conditions	Available when `value` is 3D or `value` is 4D.

optionsW 🔗 optionaldynamic
Description	Input parameters specific to the W dimension. Renamed from `w` in Tweakpane API to clarify that it is an object of options, not a value.
Type	`NumberTextInputParams`
Default	`undefined`
Conditions	Available when `value` is 4D.

Events

🔗

change 🔗
Description	Fires when `value` changes. This event is provided for advanced use cases. It's usually preferred to bind to the `value` prop instead. The `event.details` payload includes a copy of the value and an `origin` field to distinguish between user-interactive changes (`internal`) and changes resulting from programmatic manipulation of the `value` (`external`).
Extends	`ValueChangeEvent`
Type	`PointChangeEvent`

Point

Example

Demo

Code

Props

value

min

max

format

keyScale

pointerScale

step

disabled

label

theme

userExpandable

expanded

picker

optionsX

optionsY

optionsZ

optionsW

Events

change