svelte-tweakpane-ui
Version:
A Svelte component library wrapping UI elements from Tweakpane, plus some additional functionality for convenience and flexibility.
283 lines (282 loc) • 8.81 kB
TypeScript
import { SvelteComponent } from 'svelte'
import type { PointDimensionParams } from '@tweakpane/core'
import type { Simplify, ValueChangeEvent } from '../utils.js'
export type RotationQuaternionOptions = Simplify<PointDimensionParams>
export type RotationQuaternionValueObject = {
x: number
y: number
z: number
w: number
}
export type RotationQuaternionValueTuple = [x: number, y: number, z: number, w: number]
export type RotationQuaternionValue = Simplify<
RotationQuaternionValueObject | RotationQuaternionValueTuple
>
export type RotationQuaternionChangeEvent = ValueChangeEvent<RotationQuaternionValue>
import type { RotationInputPluginQuaternionParams as RotationQuaternionOptionsInternal } from '@kitschpatrol/tweakpane-plugin-rotation/dist/types/RotationInputPluginQuaternionParams'
declare const __propDef: {
props: Omit<
Omit<
{
/**
* The binding's target object with values to manipulate.
*
* @bindable
*/
object: import('@tweakpane/core').Bindable & Record<string, RotationQuaternionValue>
/**
* The key for the value in the target `object` that the control should
* manipulate.
*/
key: string
/**
* Prevent interactivity and gray out the control.
*
* @default `false`
*/
disabled?: boolean
/**
* Text displayed next to control.
*
* @default `undefined`
*/
label?: string | undefined
/**
* Tweakpane's internal options object.
*
* See
* [`BindingParams`](https://tweakpane.github.io/docs/api/types/BindingParams.html).
*
* Valid types are contingent on the type of the value `key` points to in
* `object`.
*
* This is intended internal use, when implementing convenience components
* wrapping Binding's functionality. Options of interest are instead exposed
* as top-level props in _Svelte Tweakpane UI_.
*
* @default `undefined`
*/
options?: RotationQuaternionOptionsInternal | undefined
/**
* Custom color scheme.
*
* If undefined, inherits default Tweakpane theme equivalent to
* `ThemeUtils.presets.standard`, or the theme set with
* `setGlobalDefaultTheme()`.
*
* @default `undefined`
*/
theme?: import('..').Theme | undefined
/**
* Reference to internal Tweakpane
* [`BindingApi`](https://tweakpane.github.io/docs/api/classes/_internal_.BindingApi.html)
* for this control.
*
* This property is exposed for advanced use cases only, such as when
* implementing convenience components wrapping `<Binding>`'s functionality.
*
* Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane
* UI_ abstractions.
*
* @bindable
* @readonly
*/
ref?: import('../internal/GenericInput.svelte').GenericInputRef | undefined
/**
* Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to
* automatically register in the `<Binding>`'s containing `<Pane>`.
*
* This property is exposed for advanced use cases only, such as when
* implementing convenience components wrapping `<Binding>`'s functionality in
* combination with a Tweakpane plugin.
*
* Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane
* UI_ abstractions.
*
* @default `undefined`
*/
plugin?: import('../utils.js').Plugin | undefined
},
'object' | 'key'
> & {
/**
* The quaternion value to control.
*
* Tuple values are a convenience added by _Svelte Tweakpane UI_, and is not
* part of the original TweakpaneRotationPlugin API.
*
* @bindable
*/
value: RotationQuaternionValue
} & {
/**
* DOM class name of the button used to expand and collapse the input's
* picker.
*
* @default `undefined`
*/
buttonClass?: string
/**
* Expand or collapse the input's picker.
*
* @default `false`
* @bindable
*/
expanded?: boolean
/**
* The style of value "picker" to use in the input.
*
* @default `'popup'`
*/
picker?: 'inline' | 'popup'
/**
* Allow users to interactively expand / contract the picker.
*
* @default `true`
*/
userExpandable?: boolean
},
'ref' | 'options' | 'plugin' | 'buttonClass'
> & {
/**
* The quaternion value to control.
*
* Tuple values are a convenience added by _Svelte Tweakpane UI_, and is not
* part of the original TweakpaneRotationPlugin API.
*
* @bindable
*/
value: RotationQuaternionValue
/**
* Input parameters specific to the X dimension.
*
* Renamed from `x` in TweakpaneRotationPlugin API to clarify that it is an
* object of options, not a value.
*
* @default `undefined`
*/
optionsX?: RotationQuaternionOptions
/**
* Input parameters specific to the Y dimension.
*
* Renamed from `y` in TweakpaneRotationPlugin API to clarify that it is an
* object of options, not a value.
*
* @default `undefined`
*/
optionsY?: RotationQuaternionOptions
/**
* Input parameters specific to the Z dimension.
*
* Renamed from `z` in TweakpaneRotationPlugin API to clarify that it is an
* object of options, not a value.
*
* @default `undefined`
*/
optionsZ?: RotationQuaternionOptions
/**
* Input parameters specific to the W dimension.
*
* Renamed from `w` in TweakpaneRotationPlugin API to clarify that it is an
* object of options, not a value.
*
* @default `undefined`
*/
optionsW?: RotationQuaternionOptions
}
slots: {}
events: {
/**
* 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
* @event
*/
change: RotationQuaternionChangeEvent
}
}
export type RotationQuaternionProps = typeof __propDef.props
export type RotationQuaternionEvents = typeof __propDef.events
export type RotationQuaternionSlots = typeof __propDef.slots
/**
* Integrates the [quaternion
* rotation](https://github.com/0b5vr/tweakpane-plugin-rotation/blob/dev/src/RotationInputPluginQuaternion.ts)
* control from [0b5vr](https://0b5vr.com)'s [tweakpane-plugin-rotation](https://github.com/0b5vr/tweakpane-plugin-rotation).
*
* _Svelte Tweakpane UI_ extends the original API to support tuple values in addition to object values.
* (Useful when working with frameworks like [three.js](https://threejs.org) /
* [threlte](https://threlte.xyz).)
*
* A utility function `Utils.quaternionToCssTransform()` is also provided to easily convert a euler
* rotation value object or tuple into a CSS transform string.
*
* See also `<RotationEuler>` if you're not into the whole `w` thing.
*
* Usage outside of a `<Pane>` component will implicitly wrap the profiler in `<Pane
* position="inline">`.
*
* Note that _Svelte Tweakpane UI_ embeds a functionally identical [fork](https://github.com/kitschpatrol/tweakpane-plugin-rotation) of the plugin with build optimizations.
*
* @emits {RotationQuaternionChangeEvent} change - When `value` changes. (This event is provided for advanced use cases. Prefer binding to `value`.)
*
* @example
* ```svelte
* <script lang="ts">
* import {
* Button,
* RotationQuaternion,
* type RotationQuaternionValue,
* Utils,
* } from 'svelte-tweakpane-ui'
*
* // Value could also be an object
* // e.g. {x: 0, y: 0, z: 0, w: 0}
* let value: RotationQuaternionValue = [0, 0, 0, 0]
*
* $: transform = Utils.quaternionToCssTransform(value)
* $: valueRows = Array.isArray(value)
* ? value.map((v) => `${v >= 0 ? '+' : ''}${v.toFixed(6)}`).join('\n')
* : ''
* </script>
*
* <RotationQuaternion
* bind:value
* expanded={true}
* label="CSS Rotation"
* picker="inline"
* />
* <Button on:click={() => (value = [0, 0, 0, 0])} title="Reset" />
*
* <div class="billboard" style:transform>
* <pre>{valueRows}</pre>
* </div>
*
* <style>
* div.billboard {
* display: flex;
* align-items: center;
* justify-content: center;
* aspect-ratio: 1;
* width: 100%;
* background: linear-gradient(45deg, magenta, orange);
* }
* </style>
* ```
*
* @sourceLink
* [RotationQuaternion.svelte](https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/src/lib/control/RotationQuaternion.svelte)
*/
export default class RotationQuaternion extends SvelteComponent<
RotationQuaternionProps,
RotationQuaternionEvents,
RotationQuaternionSlots
> {}
export {}