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

PointExample.svelte

<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

Dynamic Props

This component has dynamic props, which means the available props can change depending on the value or type of other props.

Props contingent on certain conditions are annotated below with a dynamic flag, and include explanations of the “conditions” affecting the prop’s availability. More Info →

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