pmndrs / leva Goto Github PK

The :active state is confusing in a text input, it makes it look like a button. It should be removed.

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

• number (min, max, step)
• string
• boolean
• select
• position: { x, y, z? }, [x, y, z?]
• color: string, { r, g, b, a? } // https://github.com/morishitter/is-color ?

This control mixes a graph element with two+ sliders for spring parameters.

From Principle

• Basic controls
• Fix default settings

• detect color
• show color https://casesandberg.github.io/react-color/
• return color in same format as input

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.

• Point2D
• Point3D
• allow arrays
• build UI

Possibly related to #33?

Rename in readme, exported API and examples

I made some mockups that solve some UX issues the header currently has:

Branding	No branding	No nothing

advantages:

• the search becomes a secondary action, since most users wouldn't use it (if there are only a few inputs for example)
• end users know it's draggable now
• triangle is there to show that it can be collapsed and also uncollapsed if it starts already collapsed

• format as { key: value }
• format as value[]

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.

Current

Ideal

The input should expand and reveal the whole image instead.

Also the x is missing a /?

@gsimone implementation idea:

useControls({
   togglerino: true,
   myFielderino: {
       value: "theta",
       condition: (siblings, all) => siblings.togglerino
   }
})

TBD

The sliders have rounded borders ( see reflectivity )

https://leva-git-storybook.pmndrs.vercel.app/?path=/story/misc-folders--nested-folders

Blender does this, when holding shift the changes happen a lot slower (more movement for the same amount of change)

• root pane
• folder
• string
• number
• position
• color
• spring

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

• allow for settings
• expanded / collapsed

Problem

When changing the color, it's kinda annoying that the color picker doesn't close by itself, rather you must click outside:

Desired solution

The color picker should close on mouseout after a 300-500ms timeout.

Related to #13

This would be an opt-in via component.

• min / max with slider
• step
• Slider by default #6
• padding

The 4 values hex rgba kinda color doesn't work with threejs, using regular rgb hex solves the problem

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/

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:

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

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.

https://github.com/omgovich/react-colorful/releases

Redesign the range slider so it's like a normal slider but cut in half.

Current situation

Ideal situation

Optional: 🎊confetti pop when the two halves meet.

The copy icon should transform into a ✅ to give the user feedback that the field has been copied.

Current situation

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

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

• Precision cursor

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.

https://leva-git-storybook.pmndrs.vercel.app/?path=/story/inputs-number--step

In range / interval components

From Kepler.gl by Über

https://github.com/Jeremboo/dat.gui.image ( dataarts/dat.gui#265)

Ability to drag minimum and maximum edges for bounds.

• basic controls
• better styling

When the panels are higher than the window, bad stuff happens. We should handle scroll inside the pane itself