tweaker v0.2.0
Tweaker
Easy-to-use GUI for effortless JavaScript tweaking and adjustments.
Preface
This library complements the @e-scape/store library, allowing you to change the state of stores using a GUI. However, you can also use it as a replacement for libraries like dat.gui, tweakpane, etc.
How It Works
To display the interface on the page, simply import the library into your project:
import 'tweaker'Folders and controllers are created using the @e-scape/store library:
import { Store } from '@e-scape/store'
const numberStore = new Store(0, {
passport: {
name: 'field name',
manager: {
type: 'number',
},
},
})If the passport property is specified, tweaker understands that a controller should be created for this store and creates it after the first subscription to the store:
numberStore.subscribe(({ current, previous }) => {
console.log(current, previous)
})If there are no more subscribers to the store, the controller will be removed.
State
All store states are stored in localStorage and persist across page reloads. By default, the key used in localStorage is store-state. To avoid overwriting it, for example, when switching projects, you can specify a data-project attribute for the element:
<html data-project="my-project"></html>Now, the state will be stored under the name my-project-store-state.
Passport
To control a store with tweaker, you need to fill in the passport object, which informs the library about which controller to create.
name (Required field)
The text specified here will be displayed in the controller's name. By separating the text with dots, like this:
new Store('', {
passport: {
name: 'Folder.Nested Folder.Prop',
},
})you can create controller nesting. In this case, two folders with the names Folder and Nested Folder will be created, and a controller with the name Prop will be added to the last one.
description
The text specified here will be shown when hovering over the controller.
new Store('', {
passport: {
name: 'Prop',
description: 'Это свойство что-то меняет.',
},
})permanent
By default, the controller is created only when the first subscription to the store appears and is destroyed when there are no more subscriptions. To add a controller permanently, you can specify the permanent property:
new Store('', {
passport: {
name: 'Prop',
permanent: true,
},
})manager
To help the library understand how to control the store, fill in the manager object:
new Store('', {
passport: {
name: 'Prop',
manager: {
type: 'string',
},
},
})There are currently 7 types of controllers:
boolean
manager: { type: 'boolean', disabled: false }color
manager: { type: 'color', disabled: false },link
manager: { type: 'link', sameWindow: false, disabled: false },number
manager: { type: 'number', max: Infinity, min: -Infinity, step: 1, disabled: false },range
manager: { type: 'range', max: 0, min: 1, step: 0.01, disabled: false },select
manager: { type: 'select', variants: ['Variant 1', 'Variant 2', 'Variant 3'], disabled: false },string (Used by default and can be omitted)
manager: { type: 'string', disabled: false },
Hidden Features
Copy the controller's value by hovering over it and pressing CTRL + C.
Reset the controller's value by hovering over it and pressing CTRL + R.