Counter-intuitive drag behavior

[jones1618]

The knob's a terrific control, beautifully packaged with great features and documentation but it took me quite a while to figure out the mouse drag behavior.

Intuitively I would have expected the knob to track the cursor around the knob. That is, when you start dragging the knob from 9:00 around to 12:00 and then to 3:00, you'd expect the knob's value to track at the same angle.

Honestly, I thought at first that the knobs were range limited or stuck. Instead, it took me some time to realize that the knob only tracks vertical movement, up to increase, down to decrease.

Suggestion: Provide an option to track mouse movement based on pointer's angle to the knob center.

[jhnsnc]

Thanks for the feedback! I'll definitely consider adding an option for mouse input by angle, especially if I hear similar feedback from others.

Part of my reason for starting this project is that all the knob components I found through googling used an angular input approach and I wanted something easier for precise input. I adopted an input pattern that I have seen in many desktop applications like DAWs (music-production software) where precision of input is critical, even with lots of similar input controls crammed in side by side.

In any case, I'll definitely wait until I complete a few wrapper components (e.g. https://github.com/jhnsnc/knob-input/issues/10) before extending the basic functionality with additional options. Perhaps I'll be able to get that done next weekend.

[jones1618]

Would you consider a pull-request that implemented that feature (as an option) if I submitted one?

[jhnsnc]

Now that I have implemented FLStandardKnob ( #10 ), a wrapper class around KnobInput I would be open to someone working on this. (I wasn't confident that I had the structure of the KnobInput class right until I implement the first styled wrapper class.)

I would want it to be turned off by default because the KnobInput class may be used to implement vertical "slider" controls and the vertical drag interaction would be the expected interaction.

Perhaps we could call the option something like dragMode? Quick thoughts on possible values:

• vertical (default) - Drag up to increase value, down to decrease value
• horizontal - Drag right to increase value, left to decrease value
• translate - Drag up and/or right to increase value, drag down and/or left to decrease value
• angular - Drag and the value will adjust based on position of the cursor relative to the center of the knob. Adjust minAngle and maxAngle options for value to update as expected.