Rotate and Delete from the ground up #660
Conversation
… under cursor during rotation
…connected when i delete
There was a problem hiding this comment.
Ready for review.
demo: https://www.youtube.com/watch?v=D0T4vcSIaa0
tested http://localhost:3000/ in both Firefox and Chrome
Came up with a solution with assistance from Augment Code VSCode extension but I still had to do lots of manual adjustments and reprompting, but it felt more enjoyable and collaborative that way : )
| @@ -3,7 +3,7 @@ import hotkeys from 'hotkeys-js' | |||
|
|
|||
| import { | |||
| Handles, Handle, Label, Overlay, Gridlines, Corners, | |||
| Hotkeys, Metatip, Ally, Distance, BoxModel, Grip | |||
| Hotkeys, Metatip, Ally, Distance, BoxModel, Grip, Rotation | |||
There was a problem hiding this comment.
| Hotkeys, Metatip, Ally, Distance, BoxModel, Grip, Rotation | |
| Hotkeys, Metatip, Ally, Distance, BoxModel, Grip, Rotation, Delete |
?
There was a problem hiding this comment.
yeah, importing it here would allow you to remove the import of it from features/selectable.js, and also keep all the imports centralized 👍🏻
There was a problem hiding this comment.
so rad! great idea to have an LLM help, it's totally old school math that it's got plenty of training data on.
all the code is very legible AND we dont have a dependency, so many wins here 🤘🏻
i found a couple bugs:
- select an item and press
deleteon the keyboard, the new controls remain on screen - if an element is inline, it wont rotate. i wonder if we could temp patch that with like, inline-block? or do you think that'll cause too many side effects?
this makes me want (or here's some room to make it even better):
- a delete animation (could use view transitions if available so it just fades out by default)
- maybe we turn on the position tool everywhere all the time too, so in any tool you can select, rotate, position, resize and delete?
I'll continue to check it out and try and find other orchestration issues, but i dont anticipate we'll find much. love all your choices in here tho!
- the easing on rotate
- the hover effects on the buttons
- the attached line
| @@ -3,7 +3,7 @@ import hotkeys from 'hotkeys-js' | |||
|
|
|||
| import { | |||
| Handles, Handle, Label, Overlay, Gridlines, Corners, | |||
| Hotkeys, Metatip, Ally, Distance, BoxModel, Grip | |||
| Hotkeys, Metatip, Ally, Distance, BoxModel, Grip, Rotation | |||
There was a problem hiding this comment.
yeah, importing it here would allow you to remove the import of it from features/selectable.js, and also keep all the imports centralized 👍🏻
| // track accumulated rotation to allow multiple revolutions | ||
| if (!this.lastAngle) this.lastAngle = currentAngle | ||
| let delta = currentAngle - this.lastAngle | ||
| // normalize the delta to avoid "flipping" at boundary crossing | ||
| if (delta > Math.PI) { | ||
| delta -= 2 * Math.PI | ||
| } else if (delta < -Math.PI) { | ||
| delta += 2 * Math.PI | ||
| } | ||
|
|
||
| this.totalAngle += delta | ||
| this.lastAngle = currentAngle | ||
|
|
||
| const rotationDegrees = this.totalAngle * (180 / Math.PI) | ||
| this.targetElement.style.transform = `rotate(${rotationDegrees}deg)` | ||
|
|
||
| const handleX = e.clientX | ||
| const handleY = e.clientY | ||
|
|
||
| const hostRect = this.getBoundingClientRect() | ||
| const handleRect = handle.getBoundingClientRect() | ||
| const handleSize = handleRect.width | ||
|
|
||
| // position handle centered on cursor | ||
| handle.style.left = `${handleX - hostRect.left - handleSize/2}px` | ||
| handle.style.top = `${handleY - hostRect.top - handleSize/2}px` | ||
|
|
||
| const lineSvg = line.querySelector('line') | ||
| lineSvg.setAttribute('x1', this.originalCenter.x) | ||
| lineSvg.setAttribute('y1', this.originalCenter.y) | ||
| lineSvg.setAttribute('x2', handleX) | ||
| lineSvg.setAttribute('y2', handleY) | ||
| } |
follow-up to PR #657 (closes #657)
fixes #613
add new handle into handles<visbug-rotation>and<visbug-delete>into selectable