Conversation
Also fixes a pre-existing bug in the auto-scaling test block where vi.unstubAllGlobals() was removing the jQuery global stubs needed by subsequent describe blocks. The afterEach now restores only ResizeObserver.
Remove default canvas border (breaking change). Add variables for area background, border radius, shadows, and add-button styling. All other defaults preserve current visual behavior.
Icon color now follows --image-annotate-button-text automatically. Dark themes no longer need to override icon SVG variables. Changed SVG fills from #333 to #fff (mask needs white = opaque).
show() now calls computeNoteLeft to set inline left on the tooltip, centering it under the annotation area and clamping to viewport edges.
Move clampNote from annotate-image.ts to positioning.ts alongside computeNoteLeft. Add clampNotes() helper that applies clamping in place via Object.assign, replacing duplicated 6-line loops in load() and loadFromApi(). Addresses M1, M2, D1, D2.
The initial positionForm() call happens before buttons are appended, but form width is dominated by textarea and CSS min-width. Position is recalculated on drag/resize stop. Addresses M3.
Verify that drag and resize onStop callbacks trigger positionForm(), updating form.style.left. Addresses H2.
Replace weak "style.left is not empty" assertion with stubbed getBoundingClientRect returning non-zero rects (tooltip width=150, area left=100, width=80). Assert computed left matches computeNoteLeft output (-35px). Addresses H1.
Demo has 4 notes but test expected 3. Also add comments explaining why color assertions check "differ" rather than exact values. Addresses M6, D4.
Icon SVGs have an opaque fill for the mask shape, but the visible color comes from background-color via CSS mask-image. Addresses L1.
Tooltip vertical position is CSS-driven. Vertical clamping (flipping above the area near viewport bottom) is intentionally not implemented. Addresses D3.
# Conflicts: # package-lock.json
Update @playwright/test, @vue/test-utils, esbuild, eslint-plugin-react-hooks, eslint-plugin-vue, prettier, typescript-eslint, vitest, and vue to latest within semver range.
Fix no-useless-assignment lint errors in resizeCorner() by assigning left/top in both branches instead of initializing then overwriting.
Use typeof import('jquery') instead of bare JQueryStatic global,
which TS 6 no longer resolves under moduleResolution: "bundler".
- multiple-instances: expect 4 annotations per image (was 2) - programmatic-api: expect 4 annotations (was 3) - scaling: expect 400px canvas width without border (was 402) - playwright config: use 127.0.0.1 URL for webServer readiness check (Playwright 1.61 requires 2xx, not just TCP connect) and increase timeout to 60s for build + serve startup
Converted retina PNG screenshot to JPEG at 1x resolution (387×544), reducing from 1.6MB to 102KB. Centered in README for GitHub/NPM display.
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.
CSS theming
Theme support via CSS custom properties. Set theme: "dark" (or whatever) in options and style with .image-annotate-canvas[data-theme="dark"] { ... }. Button icons switched to mask-image so they pick up the text color
automatically. Includes a themes demo page.
Smart positioning
Tooltips and edit forms now position themselves to stay within the image bounds instead of overflowing off the edges. Annotations are clamped to image bounds on load so out-of-range coordinates don't cause invisible
notes.
Note display improvements
Notes get proper z-index on hover so they stack correctly, plus configurable max-width via CSS custom properties.
Housekeeping