Feat/align object to label#41
Merged
Merged
Conversation
Three icon buttons (centre-H, centre-V, centre-both) in the Properties panel emit an alignment intent through the store; the canvas effect measures the rendered group bbox via Konva clientRect and dispatches the corresponding x/y delta. Stage measurement is the source of truth so text/barcode/etc. footprints match what the user sees. Multi-select centres the union bbox of all selected objects, preserving their relative positions (matches Figma's group-align-to-canvas).
Decorative SVGs inside aria-labeled buttons should not be announced separately; matches the DragHandleIcon precedent.
…-bus The previous implementation routed PropertiesPanel button clicks through a serial-bumping flag on the store and a useEffect in LabelCanvas. Two smells: the field wasn't real state (just messaging), and the effect needed an `exhaustive-deps` disable to avoid re-firing on every pan/zoom. Replace with the React-idiomatic pattern: LabelCanvas exposes an imperative handle via forwardRef + useImperativeHandle, AppShell holds the ref, passes it to PropertiesPanel which calls `alignSelectionToLabel` directly. Action is co-located with the data it reads (Konva clientRect). AlignButtons becomes pure presentation with an `onAlign` callback prop.
Optional+default-{} let a missing ref silently no-op the align buttons.
Required prop forces AppShell to wire it; the inner `.current?` guard
is enough — it only covers the pre-mount window.
Splits the three centre-axis SVG icons out of AlignButtons.tsx so the button-row file stays focused on layout/dispatch. Matches the pattern of ui/DragHandleIcon.tsx for single-purpose inline icons.
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a feature to align selected objects to the center of the label horizontally, vertically, or both. It adds a new AlignButtons component to the PropertiesPanel, exposes an imperative alignSelectionToLabel method in LabelCanvas via forwardRef, and includes a dedicated alignment utility with unit tests. Localization support for these new actions has been added across all supported languages. A review comment recommends rounding the final object coordinates to the nearest integer to ensure compatibility with ZPL's dot-based coordinate system and prevent floating-point precision issues in the state.
PropertiesPanel inputs and `mmToDots` already round dots, so the store invariant is integer x/y. The alignment delta was emitted as a float (layoutDx / pxPerDot) and could leak fractional coordinates into ZPL emit. Match the convention by rounding the delta.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.