Hey! I made a few changes to fix the things outlines in #57 .
Style changes were made to prevent selection of axis labels.
Event handlers are attached to the canvas elements themselves and not the surrounding div. This should limit the drag area to the canvas only.
All that said, I did make a few changes which may be beyond the scope desired here. I've made a few drag and drop type things in the past and typically added event handlers for mouseup and mousemove to the document itself. The reasons I've done this in the past are:
It allows the user to drag past the bounds of the intended drag area, which seems to be expected in some cases by the user
It de-activates the drag on the canvas regardless of where the user mouseups. This way you dont really get stuck in the "still dragging" state.
These changes required additional changes to how the onSelect handler is used. A clamp function is also required to contain the axis on the charts, since you can now drag in the negative direction and beyond the canvas bounds.
Hope this helps!
Let me know if there's anything I can change to get this in!
Hey! I made a few changes to fix the things outlines in #57 .
Style changes were made to prevent selection of axis labels.
Event handlers are attached to the canvas elements themselves and not the surrounding div. This should limit the drag area to the canvas only.
All that said, I did make a few changes which may be beyond the scope desired here. I've made a few drag and drop type things in the past and typically added event handlers for mouseup and mousemove to the document itself. The reasons I've done this in the past are:
These changes required additional changes to how the onSelect handler is used. A clamp function is also required to contain the axis on the charts, since you can now drag in the negative direction and beyond the canvas bounds.
Hope this helps!
Let me know if there's anything I can change to get this in!
https://user-images.githubusercontent.com/9381099/210035966-52336995-0944-40a7-b1a4-9cb5759c85d3.mp4