search

WebAudio-Node-Editor / webaudio-node-editor

1 stars 0 forks source link

Custom increments for arrows in number entry field #24

Closed ruan-xian closed 7 months ago

ruan-xian commented 9 months ago

Currently, the arrow method of changing the values in a number input field modify the values in increments of 1. This is not really appropriate for many of our fields (for example, gain might be better with something like 0.1, and frequency might be better with something like 50). We should implement a custom control for number entry that allows us to set a custom increment in each place the control is used.

hamzamehmood67 commented 9 months ago

Can you please assign this to me....? I'm willing to work on this issue

ruan-xian commented 9 months ago

Can you please assign this to me....? I'm willing to work on this issue

Sure, let me know if you need any help/documentation

hamzamehmood67 commented 9 months ago

Thank. I'm excited to get started, but I could use some guidance on where to begin and where I can find the relevant documentation. Could you please point me in the right direction?

ruan-xian commented 9 months ago

Of course - I don't have any code documentation up for this project, but there's user-facing usage documentation on the website. For the relevant sections of code, you'd want to take a look at, for example, the base gain field of a gain node (see line 24). The LabeledInputControl is an example of a custom control, though it's fairly rudimentary as it just adds a label to the default control from the Rete package.

Here's some documentation from Rete on how to implement your own custom controls. Also see the source code for default controls in Rete, and the source code for the visual component (html, react stuff) of a default control.

Note that just like in the source code above, you'll need a class for the new control (which gets used within the custom nodes we write), as well as a function that returns the React content for the control. This function needs to be linked to the new control around line 358 here.

Also see my code for the DropdownControl for a more complete example of how to implement your own control in this project.

Let me know if you have any problems setting up/running the project - It's my first time making anything beyond pure HTML/CSS/JS so there may be some snags in how I've set this up.