rich-harris / svelte-knobby Goto Github PK
View Code? Open in Web Editor NEWLicense: MIT License
License: MIT License
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.
snap to
only when S key is pressed?
also, the snap lines should be visible (dashed?)
(and handles? not sure how that would work)
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 π
keyframe editor in particular has a lot of non-obvious features
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.
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
when holding shift, should see vertical/horizontal lines (and also a line that matches current gradient, for handles?)
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!
useful to store the top/left/bottom/right of the panel; which folders are expanded/collapsed; maybe the values themselves?
For example, keyframes representing latitude should be bound to the [-90, 90]
range (or [PI, 0]
in radians)
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
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....
would be cool if you could resize the panel
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
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 π
it takes up a lot of space
need to be able to enable/disable tracks. they should also be colour-coded
probably on an ad-hoc per-plugin basis, not sure we want a universal approach
division by zero
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.