Fix padding/border inset + empty annotation placeholder#38
Merged
Conversation
Subtract CSS padding and border from getBoundingClientRect() dimensions so scaleX/scaleY reflect the actual image content area. Add createPaddedTestImage test helper for padding/border testing.
When the image has padding/border, sets --image-annotate-content-{top,right,bottom,left}
on the canvas so overlays and button can be positioned within the content area.
Overlays use CSS var --image-annotate-content-{side} for inset
so they align with image content area. Button offsets adjusted similarly.
The editOverlay is inset to match the image content area, so using it as the containment element prevents dragging into the padding zone.
The ResizeObserver callback and deferred rescale both receive canvas dimensions (which include the image's padding/border). Subtract the cached content insets to get the true content dimensions for scaling.
- Fix operator precedence bug: guard each parseFloat individually with || 0 to prevent NaN propagation when only padding or border is set - Normalize CSS fallback values to 0px (was inconsistent 0 vs 0px) - Add tests for asymmetric padding and padding-only (no border)
When annotation text is empty or whitespace-only, the tooltip displays "(no annotation)" as a visual placeholder. The note data retains the original empty string for export and save operations.
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.
Summary
.img-thumbnail). Scale factors, overlay positioning, button placement, and drag containment all account for the image's content inset.What changed
src/annotate-image.ts— ComputecontentInsetfrom image's computed padding+border; subtract fromgetBoundingClientRect()for scale, rescale, and flush paths; set--image-annotate-content-{side}CSS vars on canvassrc/annotation.css— Overlays use CSS vars forinset; button usescalc()for positioningsrc/annotate-edit.ts— Containment changed fromcanvastoeditOverlay(naturally bounded to content area)src/annotate-view.ts— Show "(no annotation)" placeholder for empty text in tooltipdemo/scaling.html— New "Image with Padding & Border" demo sectiontest/— 16 new unit tests (padding/border scale, CSS vars, rescale, asymmetric padding, empty text)e2e/— 4 new e2e tests for padded/bordered image annotationsTest plan
npm test)npm run test:e2e)npm run build:check)npm run build)demo/scaling.html, scroll to "Image with Padding & Border" section