eskimoblood/rc-knob

React component library to render knobs

Hi there 👋

rc-knob's Issues

How does value work in knob?

When update the value In the knob, it doesn't bind to knob.
The value of knob seem to work like initial value in the component.
I input state to value of knob and it worked in initial loading but when update the state of component, it wasn't updated.

initial value is miscalculated.

Hi,

If one sets an initial value on a knob that uses angleoffset/anglerange, that initial value is wrongly rendered.

For example:

        <Knob 
            size={50}  
            angleOffset={220} 
            angleRange={280}
            min={0}
            max={100}
            value={this.state.value}
            onChange={value => console.log(value)}
        >

If this.state.value=50 one would expect the fill to complete in the center (12 o'clock position). But it doesn't. It looks like it is still calculating as though it were a full circle.

Knob should not jump to initial position

If possible, I'd like to deactivate the above demonstrated behavior. What I mean is that when e.g. the knob is in the 100% position, it jumps to 0% even though, I've not performed a movement with my mouse that would allow this. Instead the knob doesn't resist the movement and moves to position 0%.

Can this behavior somehow be disabled? Happy to send a PR too.

Typescript Type Definitions

There are no type definitions for this. I haven't used the plugin, but it looks really cool!

What would you prefer, typescript definitions or have the component rewritten in Typescript?

Happy to do either but would prefer the rewrite.

Missing touch support while dragging

When using the knobs on a touch device, they only jump to the tap point, but can't be dragged by keeping the touch. Works fine with a mouse tough. The original Jim-knopf library has full touch support.
Maybe there is a missing dependency or wrong event-binding in the port?

Kind regards

Update README

README should be updated with basic documentation, had to figure everything out based on reading source code and the example page.
Something that covers the general use of the Knob component and each of the subcomponent pieces with each of the props and how to use them.

Suggestion: Update the components to be stateless functions

I was running into a lot of issues with the knobs and it's partly because there are hooks getting called for setting things within the components. I'm using these components within a loop so it's not ideal for the hooks to be called in that context.

What would be ideal is if the components were completely stateless and updated based on values entered in from props and the mutations that occur from onChange events.

I made a hacky version using an SVG and a hidden input range to get something in my local project as I cannot use rc-knobs due to the limitation listed above:

export default function GenericKnob(props){

  let sendChangeMessage = function(event){
    // update the state but don't fire
  }

  let updateVal = function(event){
  // make mutation here
  }

  let translateValToAngle = function(){
   // The values that I care about range from 0 to 127
   // This needs to be reflected with the 270 degrees
   // of the rotating knob
    let angle = (270/127)*props.mappedTo.value;
    return `rotate(${angle}, 41.6277, 41.6277)`
  }

  let stroke  = ()=>{
    return <line id={props.pedalFunction} x1="10.6277" y1="70.6662" x2="41.6277" y2="41.6662" stroke="white" strokeWidth="2%" transform={translateValToAngle()}/>
  }

  return(
    <div className={`styled-knob`}>
      <input className="hidden-range" type="range" min="1" max="127" value={props.mappedTo.value} onChange={sendChangeMessage} onClickCapture={updateVal}/>
      <svg xmlns="http://www.w3.org/2000/svg" width="86" height="86" viewBox="0 0 86 86" fill="none">
        <rect width="86" height="86" fill="none"/>
        <circle cx="42.5" cy="42.5" r="42.5" fill="black"/>
        {stroke()}
      </svg>
      <label className="knob-labels">
          {props.mappedTo.label}
      </label>
    </div>
  )
}

And then in my CSS:

.styled-knob{
  position: relative;
}

.hidden-range{
  position: absolute;
  top: 22px;
  opacity: 0;
  height: 100px;
  width: 80px;
  background: red;
}

Getting onChange is not a function error when I try to interact with Knob.

Uncaught TypeError: onChange is not a function
    at onMove (index.js:279)
    at index.js:307
    at updateReducer (react-dom.development.js:16640)
    at Object.useReducer (react-dom.development.js:17381)
    at Object.useReducer (react.development.js:1589)
    at useUpdate (index.js:344)
    at Knob (index.js:643)
    at renderWithHooks (react-dom.development.js:16317)
    at updateFunctionComponent (react-dom.development.js:18363)
    at beginWork$1 (react-dom.development.js:20163)
    at HTMLUnknownElement.callCallback (react-dom.development.js:337)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:386)
    at invokeGuardedCallback (react-dom.development.js:439)
    at beginWork$$1 (react-dom.development.js:25768)
    at performUnitOfWork (react-dom.development.js:24682)
    at workLoopSync (react-dom.development.js:24658)
    at performSyncWorkOnRoot (react-dom.development.js:24247)
    at react-dom.development.js:12285
    at unstable_runWithPriority (scheduler.development.js:701)
    at runWithPriority$2 (react-dom.development.js:12231)
    at flushSyncCallbackQueueImpl (react-dom.development.js:12280)
    at flushSyncCallbackQueue (react-dom.development.js:12268)
    at scheduleUpdateOnFiber (react-dom.development.js:23685)
    at dispatchAction (react-dom.development.js:17112)
    at HTMLBodyElement.onMove (index.js:241)

I am importing the Knob like

import { Knob, Arc, Pointer } from 'rc-knob';

import React from 'react';
import logo from './logo.svg';
import './App.css';

import { Knob, Arc, Pointer } from 'rc-knob';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Knob 
          size={100}  
          angleOffset={220} 
          angleRange={280}
          min={0}
          max={100}
        >
          <Pointer 
            width={3} 
            radius={40}
            type="circle"
            color="#FC5A96"
          />
        </Knob>
      </header>
    </div>
  );
}
export default App;

Knob not moving correctly when parent node positioned absolutely

When a knob is set in a, let's say, movable graph node which is positioned with absolute option, and holding down the left mouse button it doesn't move correctly unless mouse is at a default position the knob was first rendered at.

how l can disable events on Knob?

Hello, how l can disable any events (like onClick or onKeyDown) on Knob?