Skip to content

feat(canvas): add 90 deg quick-rotate button for step-rotation objects - #53

Merged
u8array merged 2 commits into
mainfrom
feat/object-rotation-button
May 10, 2026
Merged

u8array merged 2 commits into
mainfrom
feat/object-rotation-button

Conversation

@u8array

@u8array u8array commented May 10, 2026

Copy link
Copy Markdown
Owner

Shows a small floating rotate icon at the top-right of the selected node when exactly one step-rotation object (text, serial, all barcodes) is selected. Cycles the ZPL rotation prop N to R to I to B to N on click, so users no longer have to bounce to the properties panel for that common operation.

  • registry/rotation.ts: pure helpers nextZplRotation + getStepRotation
  • components/Canvas/RotationButton.tsx: Konva-only presentation, lucide rotate-cw glyph as inline SVG path
  • LabelCanvas wires the affordance via getClientRect so the button tracks the visual top-right through both object-rotation and viewRotation

Shows a small floating rotate icon at the top-right of the selected
node when exactly one step-rotation object (text, serial, all barcodes)
is selected. Cycles the ZPL rotation prop N to R to I to B to N on
click, so users no longer have to bounce to the properties panel for
that common operation.

- registry/rotation.ts: pure helpers nextZplRotation + getStepRotation
- components/Canvas/RotationButton.tsx: Konva-only presentation, lucide
  rotate-cw glyph as inline SVG path
- LabelCanvas wires the affordance via getClientRect so the button
  tracks the visual top-right through both object-rotation and
  viewRotation

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces a quick-rotate button for canvas objects using step-based ZPL rotations, including the new RotationButton component and associated registry helpers. Feedback identifies a critical bug where updating the rotation might overwrite other object properties, potentially causing data loss. Additionally, the rotation button does not currently follow objects during active drag or transform interactions, and the cursor management logic lacks a cleanup mechanism to prevent the pointer from persisting after the button unmounts.

Comment thread src/components/Canvas/LabelCanvas.tsx
Comment thread src/components/Canvas/LabelCanvas.tsx
Comment thread src/components/Canvas/RotationButton.tsx
…r on unmount

Addresses gemini review on PR #53:
- Hide the quick-rotate button while a drag or transform is in progress.
  The button's position is React-state-driven and would otherwise lag
  behind the live Konva node until the interaction ends.
- Reset the stage cursor when the button unmounts. Without this, deleting
  or deselecting the object while the cursor is over the button would
  leave the pointer stuck in 'pointer' style because onMouseLeave never
  fires.
@u8array
u8array merged commit ae23855 into main May 10, 2026
2 checks passed
@u8array
u8array deleted the feat/object-rotation-button branch May 11, 2026 05:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant