:min and :max cause primary color offset during initial render
Closed this issue · 6 comments
When using :min and :max, when the page first loads up, the curving band of primary color appear displaced from the main color wheel. When the wheel is clicked to choose a value, it resets and everything appears to work normally.
Great plugin, this is needed! Thanks!
Can you attach a screenshot of the behaviour? Also the exact markup for the knob control element.
<knob-control
v-model="someValue"
primary-color="#E844C3" secondary-color="#E7B6DC"
:min="-12"
:max="12"
:size="100"
></knob-control>
Your initial value, 30, is outside the specified range, -12 to 12, which is why it's messed up. I guess I could make it not attempt to draw the value if it's outside the rnage.
Oh, of course. Thanks.
Might not be a bad idea to do that. Perhaps you could get it to throw an error?
Another interesting thing fyi - which I think has to do with Vue and not necessarily your component - using :stepSize="0.1" I sometimes get a value with a lot of decimal places; eg: 0.7000000000000001. This is the case in terms of receiving the value from the knob-control, but even if I round in the commit it can still be 'decimal-ified' by Vuex when I receive it in a computed property. (If I round it there it renders fine.)
Without a rounding fix, it looks like this (the L & T are unrelated placeholders):
<knob-control class="knob-control" v-model="trackGain" primary-color="#E4C" secondary-color="#EBD" :min="0" :max="2" :stepSize="0.1" :size="40" ></knob-control>
Yeah, that's going to be a tough one to solve on my side due to the IEEE floating point arithmetic standard. What I would suggest is using a custom valueDisplayFunction to format your number to how many decimals you want to see.
Here's some more background: https://stackoverflow.com/questions/1458633/how-to-deal-with-floating-point-number-precision-in-javascript