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 →

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

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

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

value bindablerequired
Description	The value to control. 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.
Type	PointValue2d | PointValue3d | PointValue4d

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

min optional
Description	The minimum value for all dimensions. If undefined, there is no minimum.
Type	number
Default	undefined

max optional
Description	The maximum value for all dimensions. If undefined, there is no maximum.
Type	number
Default	undefined

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

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

pointerScale optional
Description	The unit scale for pointer-based input for all dimensions. If undefined, default is dynamic based on magnitude of value.
Type	number
Default	`undefined``

step optional
Description	The minimum step interval for all dimensions. If undefined, there is no step constraint.
Type	number
Default	undefined

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