pmndrs / leva Goto Github PK
View Code? Open in Web Editor NEWπ React-first components GUI
Home Page: https://leva.pmnd.rs
License: MIT License
π React-first components GUI
Home Page: https://leva.pmnd.rs
License: MIT License
Sometimes (when presenting to a client for example) it is useful to put the focus on the actual developed piece instead of the controls pane. In these situations, it's ideal if the whole pane starts collapsed, and only if a user wants, he can open it and interact with the controls.
This is also useful in situations where you have waaay to many properties that it covers the full span fo the window height, although this can be managed with subfolders:
Blender does this, when holding shift the changes happen a lot slower (more movement for the same amount of change)
{ x, y, z? }
, [x, y, z?]
{ r, g, b, a? }
// https://github.com/morishitter/is-color ?Hi, sorry for bothering you, but I have news that might be helpful for this project:
react-colorful v5
was just released and it doesn't require importing CSS-file.
It means that you can remove all CSS code you copied from the original repo.
Just use the CSS-in-JS solution of your choice to override the styles you need.
In range / interval components
Currently, the interval api looks like this
interval: { min: -10, max: 10, bounds: [-100, 100] },
While, the slider api looks like this
slider: { value: 0, min: -10, max: 10 },
It would make much more sense if the interval api would look like this
interval: { value: [-10, 10], min: -100, max: 100 },
where the value is actually the controlled value.
It is more coherent since the only thing that changes is that the value is now an array, the slider itself doesn't change.
I can make a PR if we decide to.
@gsimone implementation idea:
useControls({
togglerino: true,
myFielderino: {
value: "theta",
condition: (siblings, all) => siblings.togglerino
}
})
TBD
Related to #13
I don't know why but it felt better than when it was narrower, it felt more precise.
Bug in the video at 0:09 when I click on the other end of the slider, the slider rectangle doesn't go where I clicked, but rater a bit on the left.
Ability to drag minimum and maximum edges for bounds.
We can do so in a rough, non-user-friendly way by just exporting setValueAtPath and letting the user figure out the current path. This works on the assumption that the type of user that needs this, would know what to do.
We can think of ways to make this a first class thing
When the panels are higher than the window, bad stuff happens. We should handle scroll inside the pane itself
More complex use cases might need complex settings/configuration, we can use a hook that can be called multiple times - ideally one - and settings are merged:
useTwixSettings({ container: ref, theme: "red-hot", onChange: serialize })
Related to #17
I am talking about the bar on the bottom that shows the example spring:
It would make more sense if the bar was vertical and would correspond to the height of the curve. This way it can be easier understood.
Reference: GSAP Ease visualizer
Possibly related to #33?
This would be an opt-in via component.
When changing the color, it's kinda annoying that the color picker doesn't close by itself, rather you must click outside:
The color picker should close on mouseout after a 300-500ms timeout.
The 4 values hex rgba kinda color doesn't work with threejs, using regular rgb hex solves the problem
{ key: value }
value[]
The :active state is confusing in a text input, it makes it look like a button. It should be removed.
All numeric inputs should be slider by default like figma.
When a user hovers the field label, show a ew-resize cursor and allow drag to change the value
Related #2
Users should be able to persist changes or to serialize and saved them
@emmelleppi started doing work for this in use-tweaks
I think this one will be way easier since we can just serialize, unserialize the whole store. Thoughts? @dbismut
Rename in readme, exported API and examples
Figma wraps the cursor on the other side of the screen when reaching one of the sides, allowing for infinite adjustment when dragging.
This is achieved using a virtualized cursor and pointer-lock
https://stackoverflow.com/questions/4752501/move-the-mouse-pointer-to-a-specific-position
https://mdn.github.io/dom-examples/pointer-lock/
I made some mockups that solve some UX issues the header currently has:
Branding | No branding | No nothing |
---|---|---|
![]() |
![]() |
![]() |
advantages:
Sometimes, it is useful to show the pane conditionally, while everything works the same. In my case, I need to show the pane only to designers and not the client. I achieve this via a special url, and I have a check like
export const DEBUG = window.location.search.includes('?debug')
which check if ?debug
is appended to the url.
WIth use-tweaks
, we achieved this with a really dirty useTweaksOnDebug
:
const getValuesFromTweaks = (...args: any[]) => {
const obj = typeof args[0] === 'object' ? args[0] : args[1]
const getEntries = (obj: any): any => {
return Object.keys(obj).flatMap((k) => {
const v = obj[k]
if (v.type !== undefined) {
if (v.type === 1) {
// Folder
return getEntries(v.schema)
} else {
// Button or Separator
return []
}
} else {
return [[k, v.value ?? v]] // array of tuple because of flatmap
}
})
}
return Object.fromEntries(getEntries(obj))
}
export const useTweaksOnDebug: typeof useTweaks = DEBUG ? useTweaks : getValuesFromTweaks
I don't know how the API of this would look like if we plan to remove the <Twix>
component, any solution is appreciated.
The copy icon should transform into a β to give the user feedback that the field has been copied.
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.