Commit Graph

7 Commits

Author SHA1 Message Date
Christian Byrne
6b1bd4be16 fix: ImagePreview i18n teardown (#7412)
Ensure ImagePreview component tests explicitly unmount their wrappers so
vue-i18n/Intlify watchers stop running before Vitest tears down
happy-dom’s window, eliminating the window is not defined failure noted
after merging #7142.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7412-fix-ImagePreview-i18n-teardown-2c76d73d36508122b94ac66864a0d3f2)
by [Unito](https://www.unito.io)
2025-12-12 03:26:23 -07:00
Simula_r
88bdc605a7 fix: image preview a11y (#7252)
## Summary

Make image preview keyboard accessible, set the key listener on the node
itself for more robust and intuitive handling, also add better aria
labels.

Follow up PR: same on Video preview. 

## Changes

- **What**: LGraphNode.vue, ImagePreview.vue
- **Breaking**: <!-- Any breaking changes (if none, remove this line)
-->
- **Dependencies**: <!-- New dependencies (if none, remove this line)
-->

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7252-fix-image-preview-a11y-2c46d73d3650815b9496f3d36a8942bf)
by [Unito](https://www.unito.io)
2025-12-11 23:31:36 -07:00
Simula_r
dedc77786f fix: loading state to show loader only if it takes more than 250ms (#7268)
## Summary

To prevent the flash of "loading..." and "calculating dimensions" when
loading cached images only set loading set if longer than 250ms

## Changes

- **What**: ImagePreview.vue
- **Breaking**: <!-- Any breaking changes (if none, remove this line)
-->
- **Dependencies**: <!-- New dependencies (if none, remove this line)
-->

## Review Focus

<!-- Critical design decisions or edge cases that need attention -->

<!-- If this PR fixes an issue, uncomment and update the line below -->
<!-- Fixes #ISSUE_NUMBER -->

## Screenshots (if applicable)

The retrigger loading is because i have throttled 4g slow in the demo.
So cache takes time. Normally this doesn't happen.


https://github.com/user-attachments/assets/335ca7e4-4ce1-43dd-b7d0-9ee88e187069

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7268-fix-loading-state-to-show-loader-only-if-it-takes-more-than-150ms-2c46d73d365081a6b311f78ba3e1cffd)
by [Unito](https://www.unito.io)
2025-12-09 23:17:43 -07:00
Simula_r
ec1a7f1da4 fix: vue nodes image preview widget, better multi image gallery support (#7178)
## Summary

Fix image preview to better handle multiple images, switching between
them, and showing the skeleton correctly.

## Changes

- **What**: ImagePreview.vue

## Screenshots (if applicable)

Old (broken)


https://github.com/user-attachments/assets/e4997569-bdf5-4015-a83c-bbaabeac96d6

New (fixed)


https://github.com/user-attachments/assets/19dda841-c909-4fcb-b4d4-99aa1372843b

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7178-fix-vue-nodes-image-preview-widget-better-multi-image-gallery-support-2c06d73d365081a2afa9e398200e8379)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
2025-12-05 13:52:18 -08:00
AustinMroz
02aaf577ec Fix inability to select image from batch in vue (#6521)
Selecting a new image from a batch sets isLoading to true, but
handleImageLoad is never triggered so the image never displays.

Swapping to a different image from a batch is currently the only place
isLoading is set to true. This change, even if temporary, results in a
good chunk of dead code.

To my understanding, ImagePreviews are always object URLs and should
never need to load, so I don't foresee the loading placeholder being
needed here.

Resolves #6458

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6521-Fix-inability-to-select-image-from-batch-in-vue-29e6d73d36508162abeaeece7c5e0eed)
by [Unito](https://www.unito.io)
2025-11-01 16:56:41 -07:00
Christian Byrne
ad5be8ec70 [style] update style of mask editor button on Vue node image preview (#6060)
Updates style of mask editor button on Vue nodes image preview overlay
to align with
[design](https://www.figma.com/design/31uH3r4x3xbIctuRWYW6NM/V3---Vue-Nodes?node-id=7744-84270&m=dev).
Also makes the custom mask have color be derived from text color class.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6060-style-update-style-of-mask-editor-button-on-Vue-node-image-preview-28c6d73d36508111a562c6a22c64f027)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
2025-10-16 21:02:55 -07:00
Benjamin Lu
8396c9ae94 Rename ImagePreview spec to test (#6093)
## Summary
- rename the ImagePreview test file to use the .test.ts suffix required
outside of browser tests
- align with the eslint no-restricted-syntax rule that forbids .spec.ts
files in tests-ui

## Testing
- pnpm typecheck


------
https://chatgpt.com/codex/tasks/task_e_68f14718b0608330bd559182c9f7c62e

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6093-Rename-ImagePreview-spec-to-test-28e6d73d36508191b7e0c076fd96e4a3)
by [Unito](https://www.unito.io)
2025-10-16 18:16:02 -07:00