rich-harris/svelte-knobby

svelte-knobby

Add knobs to your Svelte apps. Demo

<script>
  import * as knobby from 'svelte-knobby';

  const controls = knobby.panel({
    // primitive values are handled automatically
    message: 'Hello World!',
    color: '#ff3e00',
    clicks: 0,
    checked: false,

    // functions become buttons. if state is returned, it will
    // update the store
    increment: value => ({
      ...value,
      clicks: value.clicks + 1
    }),

    // specify options by using a { value } object
    constrained: {
      // any object can be given a $label which will
      // appear in place of the property name
      $label: 'labelled input',
      value: 50,
      min: 0,
      max: 100,
      step: 1
    },

    // objects that can't be 'interpreted' (see below)
    // are treated as folders
    folder: {
      $label: 'labelled folder',
      a: 1, // accessed as $controls.folder.a
      b: 2,
      nested: {
        c: 3, // accessed as $controls.folder.nested.c
        d: 4
      }
    }
  });

  // the returned store is writable
  $controls.message = 'Hello Knobby!';
</script>

<h1>{$controls.message}</h1>

Interpreting values

TODO

Plugins

• Keyframe editor

License

MIT

svelte-knobby's Issues

docs

keyframe editor in particular has a lot of non-obvious features

How to cross-reference control values?

I'm not sure the best way to do this. I tried a few things like using this or anon functions and spreads to no avail.
Right now I get:

const controls = knobby.panel({
    a: 20,
    b: a * 2    // a is not defined
})

And I'm not sure what the best way to consume them elsewhere is. Perhaps:

const stuff = (c) => constrols.a * c + controls.b   // or $controls.a/b?
// or
const { a, b } = $controls
const stuff = (c) => a * c + b

Any clarification would be much appreciated! Sorry if I'm overlooking the obvious 😅

Show values under playhead

Plugin architecture

It would be nice to be able to add user-defined components. For example leva has this bezier curve editor:

This should work (though haven't tested it yet)...

const values = knobby({
  curve: {
    component: BezierCurveEditor,
    value: [0.25, 0.1, 0.25, 1]
  }
});

...but in cases where you're dealing with familiar data types throughout your app it might be nice to do this sort of thing instead:

import { knobby, interpret } from 'svelte-knobby';

interpret(value => {
  if (Array.isArray(value) && value.length === 4 && value.every(x => typeof x === 'number') {
    return {
      component: BezierCurveEditor,
      value
    };
  }
});

const values = knobby({
  curve: [0.25, 0.1, 0.25, 1]
});

Perhaps that's overthinking things though.

We also need a way for components to occupy the full width of the panel and have arbitrary height. now possible

Number editors for points

(and handles? not sure how that would work)

Specify x/y bounds

For example, keyframes representing latitude should be bound to the [-90, 90] range (or [PI, 0] in radians)

multiple keyframe tracks per editor

need to be able to enable/disable tracks. they should also be colour-coded

snapping

snap to

• neighbours
• other points?
• playhead
• zero

only when S key is pressed?

also, the snap lines should be visible (dashed?)

Svelte A11y warning

Just putting this here for the record. Building my sveltekit project with svelte-knobby installed gives me the following error:

[vite-plugin-svelte] /node_modules/.pnpm/svelte-knobby@0.3.4_svelte@3.55.0/node_modules/svelte-knobby/Knobby.svelte:92:2 
A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.

Happy to make a PR for this if the project is revived at some point!

undo/redo

probably on an ad-hoc per-plugin basis, not sure we want a universal approach

use localStorage

useful to store the top/left/bottom/right of the panel; which folders are expanded/collapsed; maybe the values themselves?

Adjusting handles between two points with same y value causes crash

division by zero

[ERR_UNKNOWN_FILE_EXTENSION]

I wanted to give svelte-knobby a try and got the following.
Unfortunately I don't know where this belongs to:
Is it vite, svelteKit, svelte-knobby or at least is it just me?
I made a clean svelteKit and svelte-knobby install and on pnpm run dev:

8:22:51 AM [vite] Error when evaluating SSR module /src/routes/index.svelte:
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".svelte" for /Users/acve/Documents/web/dev/knobby-test/node_modules/.pnpm/[email protected][email protected]/node_modules/svelte-knobby/Knobby.svelte
    at new NodeError (node:internal/errors:371:5)
    at Loader.defaultGetFormat [as _getFormat] (node:internal/modules/esm/get_format:71:15)
    at Loader.getFormat (node:internal/modules/esm/loader:105:42)
    at Loader.getModuleJob (node:internal/modules/esm/loader:243:31)
    at async ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:78:21)
    at async Promise.all (index 0)
    at async link (node:internal/modules/esm/module_job:83:9)
Unknown file extension ".svelte" for /Users/acve/Documents/web/dev/knobby-test/node_modules/.pnpm/[email protected][email protected]/node_modules/svelte-knobby/Knobby.svelte
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".svelte" for /Users/acve/Documents/web/dev/knobby-test/node_modules/.pnpm/[email protected][email protected]/node_modules/svelte-knobby/Knobby.svelte
    at new NodeError (node:internal/errors:371:5)
    at Loader.defaultGetFormat [as _getFormat] (node:internal/modules/esm/get_format:71:15)
    at Loader.getFormat (node:internal/modules/esm/loader:105:42)
    at Loader.getModuleJob (node:internal/modules/esm/loader:243:31)
    at async ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:78:21)
    at async Promise.all (index 0)
    at async link (node:internal/modules/esm/module_job:83:9)

Edit:
Meanwhile I noticed that the page looks as expected if I reload the page after I started it.
I still get the error on starting it.

docking

for cases where the control panel is a permanent feature of the app, it would be good if you could dock the entire panel to a particular element (at which point the drag/collapse buttons would vanish, and it would take up the whole space) rather than have it float

show constraint lines

when holding shift, should see vertical/horizontal lines (and also a line that matches current gradient, for handles?)

fix step for implicit numbers

If you have this...

const opts = knobby.panel({
  foo: 0.1
});

...it will create an <input type="number"> with the default step of 1, meaning the 0.1 value is immediately lost.

change the title of properties

now the title of the control is same as property's name.
so how to custom the title?

like .name(title) method of dat.gui

visual glitch on Mac

Just a quick heads up regarding strange visual behaviour on hover over a folder in safari. probably easy to fix if one knows what quirks webkit has, I don't unfortunately....

Screen.Recording.2021-11-21.at.11.42.30.mov

Demo is outdated

Description 📖

The demo linked in the docs is no longer working with the latest version of the library, as it relies on a knobby export which is not available.

This forked REPL replaces the knobby import with panel, and the demo works as expected.

Didn't submit a PR updating the README—I think you'll want to update your REPL instead to keep ownership 😄

Make keyframe editor collapsible

it takes up a lot of space

responsiveness

would be cool if you could resize the panel