Rotate and delete with Moveable rotatable #657
Conversation
|
note:
|
| || node.closest('.moveable-control') | ||
| || node.closest('visbug-moveable-delete-button') |
There was a problem hiding this comment.
adding this didn't seem to help
| @@ -44,4 +44,4 @@ export const altKey = window.navigator.platform.includes('Mac') | |||
| ? 'opt' | |||
| : 'alt' | |||
|
|
|||
| export const notList = ':not(vis-bug):not(script):not(hotkey-map):not(.visbug-metatip):not(visbug-label):not(visbug-handles):not(visbug-corners):not(visbug-grip):not(visbug-gridlines)' | |||
| export const notList = ':not(vis-bug):not(script):not(hotkey-map):not(.visbug-metatip):not(visbug-label):not(visbug-handles):not(visbug-corners):not(visbug-grip):not(visbug-gridlines):not(.moveable-control):not(visbug-moveable-delete-button)' | |||
There was a problem hiding this comment.
only adding this here actually helped
| const mv = new Moveable(document.body, { | ||
| target: el, | ||
| rotatable: true | ||
| }) |
There was a problem hiding this comment.
the ables option for adding things like a custom delete button seems to only work with react and react-moveable
|
also tested to work in both Chrome and Firefox |
|
looking forward to pulling this and trying it out! |
There was a problem hiding this comment.
this is so fun! very meaningful addition I feel 🙂
not sure whether we should treat this like a prototype to show us just how nice it can feel to rotate and delete, or if we should actually adopt this library.
if we keep the library, there's a lot of:
things to do:
- position.js line 38, need to do some cleanup so the remnants of the rotation controls arent present
- make a delete button component, and use visbug colors
things to fix:
- remove the bounding box Moveable UI makes
- update the colors to match visbugs (blue -> hotpink)
- remove the red circle handle that Moveable UI makes
- every time i use the position tool, a new Moveable UI is made. which also, while using the position or resize tool the Moveable UI doesnt come with it
but if we don't adopt the library
things to do:
- create a new visbug-rotation handle-like element
- write your own pointer down/move handlers
- add new handle into handles
- create a visbug-delete element
this would make the solution native, aiding in avoiding a lot of the hover/zombie issues we have no, since Moveable has it's own lifecycle. if we write and own it all, we can integrate tightly and reuse more of what we have.
question is, were you hoping to leverage the library or are you interesting in writing your own rotation code?! how do you feel about the remaining work? do you want to fix the leaks, or rip out Moveable and create your own solutions?
| const mv = new Moveable(document.body, { | ||
| target: el, | ||
| rotatable: true | ||
| }) |
first off, thanks! tldr: "the latter": i was hoping this would be a quick fix, but of course things often turn out not so simple haha it also felt like as i was using the moveable library there'd be code bloat, and i was already having to make custom code and listeners to make the delete button work and rotate and prevent visbug labels on the button - so i'm thinking i can "handle" a native solution! can't make any promises when i'll get back to this though, but i'll put it on my queue |
fixes #613
demo: https://youtu.be/b7YGICFUc1E