fix: add ResizeObserver to fix Preview3D initial render stretch#8351
Merged
fix: add ResizeObserver to fix Preview3D initial render stretch#8351
Conversation
dosubot
bot
added
the
size:S
🎭 Playwright Tests:
|
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 01/28/2026, 03:13:41 AM UTC 🔗 Links🎉 Your Storybook is ready for review! |
Contributor
📝 WalkthroughWalkthroughA ResizeObserver was added to Load3d: it is initialized to observe the viewer container, calls handleResize and forceRender on resize events, and is disconnected/cleared in remove(). No public/exported signatures changed. Changes
Sequence Diagram(s)sequenceDiagram
participant Container as Container (DOM)
participant Observer as ResizeObserver
participant Load3d as Load3d instance
participant Renderer as Renderer / forceRender
Container->>Observer: DOM resize event
Observer->>Load3d: invoke handleResize()
Load3d->>Load3d: update size/state
Load3d->>Renderer: forceRender()
Possibly related PRs
Suggested reviewers
✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Bundle Size ReportSummary
Category Glance Per-category breakdownApp Entry Points — 23.6 kB (baseline 23.6 kB) • ⚪ 0 BMain entry bundles and manifests
Status: 1 added / 1 removed Graph Workspace — 961 kB (baseline 961 kB) • ⚪ 0 BGraph editor runtime, canvas, workflow orchestration
Status: 1 added / 1 removed Views & Navigation — 80.7 kB (baseline 80.7 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces
Status: 9 added / 9 removed Panels & Settings — 470 kB (baseline 470 kB) • 🟢 -8 BConfiguration panels, inspectors, and settings screens
Status: 12 added / 12 removed User & Accounts — 3.94 kB (baseline 3.94 kB) • ⚪ 0 BAuthentication, profile, and account management bundles
Status: 3 added / 3 removed Editors & Dialogs — 2.9 kB (baseline 2.9 kB) • ⚪ 0 BModals, dialogs, drawers, and in-app editors
Status: 2 added / 2 removed UI Components — 33.7 kB (baseline 33.7 kB) • ⚪ 0 BReusable component library chunks
Status: 4 added / 4 removed Data & Services — 2.71 MB (baseline 2.71 MB) • 🔴 +358 BStores, services, APIs, and repositories
Status: 9 added / 9 removed Utilities & Hooks — 25.5 kB (baseline 25.5 kB) • ⚪ 0 BHelpers, composables, and utility bundles
Status: 7 added / 7 removed Vendor & Third-Party — 10.7 MB (baseline 10.7 MB) • ⚪ 0 BExternal libraries and shared vendor chunks
Other — 7.04 MB (baseline 7.04 MB) • 🟢 -200 BBundles that do not match a named category
Status: 37 added / 37 removed |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@src/extensions/core/load3d/Load3d.ts`:
- Line 58: The ResizeObserver currently causes a duplicate render because it
calls forceRender() while handleResize() also calls forceRender(); update the
observer setup so it invokes handleResize() (or only schedules a single render)
instead of calling forceRender() directly, and add a runtime guard for
ResizeObserver (e.g., check for typeof ResizeObserver !== 'undefined') before
instantiating this.resizeObserver so environments without ResizeObserver don’t
crash—if not available, fall back to a safe alternative such as
window.addEventListener('resize') or skip creating the observer. Ensure you
update the code paths referenced by the resizeObserver field, the observer
creation/teardown logic, and any callbacks that currently call forceRender()
directly.
| private rightMouseMoved: boolean = false | ||
| private readonly dragThreshold: number = 5 | ||
| private contextMenuAbortController: AbortController | null = null | ||
| private resizeObserver: ResizeObserver | null = null |
Contributor
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Avoid double render on resize; confirm ResizeObserver support.
handleResize() already ends with forceRender(), so calling forceRender() again in the observer doubles work per resize. Also, if target environments aren’t guaranteed to support ResizeObserver, guard or fallback to avoid a runtime crash.
🛠️ Proposed adjustment
private initResizeObserver(container: Element | HTMLElement): void {
+ if (typeof ResizeObserver === 'undefined') {
+ return
+ }
this.resizeObserver = new ResizeObserver(() => {
this.handleResize()
- this.forceRender()
})
this.resizeObserver.observe(container)
}Also applies to: 149-165
🤖 Prompt for AI Agents
In `@src/extensions/core/load3d/Load3d.ts` at line 58, The ResizeObserver
currently causes a duplicate render because it calls forceRender() while
handleResize() also calls forceRender(); update the observer setup so it invokes
handleResize() (or only schedules a single render) instead of calling
forceRender() directly, and add a runtime guard for ResizeObserver (e.g., check
for typeof ResizeObserver !== 'undefined') before instantiating
this.resizeObserver so environments without ResizeObserver don’t crash—if not
available, fall back to a safe alternative such as
window.addEventListener('resize') or skip creating the observer. Ensure you
update the code paths referenced by the resizeObserver field, the observer
creation/teardown logic, and any callbacks that currently call forceRender()
directly.
Contributor
There was a problem hiding this comment.
Why do we always follow handleResize with forceRender?
Contributor
There was a problem hiding this comment.
@DrJKL Good question! Looking at the handleResize() method implementation (around line 662), it already ends with this.forceRender():
handleResize(): void {
// ... resize logic ...
this.forceRender() // ← Already calls forceRender at the end
}So calling forceRender() after handleResize() is redundant and causes double rendering. This pattern appears in several places:
initResizeObserver()(the one CodeRabbit flagged)refreshViewport()setTargetSize()_loadModelInternal()toggleCamera()
The extra forceRender() calls in these methods aren't necessary since handleResize() already triggers a render. This could be cleaned up throughout the codebase to avoid the duplicate work.
jtydhr88
force-pushed
the
fix/preview3d-initial-render-stretch
branch
from
5657130 to
e541bd1
Compare
DrJKL
reviewed
Jan 28, 2026
| } | ||
|
|
||
| private initResizeObserver(container: Element | HTMLElement): void { | ||
| this.resizeObserver = new ResizeObserver(() => { |
Contributor
There was a problem hiding this comment.
Just for safety, want to disconnect if there's an existing resizeObserver before assigning?
DrJKL
approved these changes
Jan 28, 2026
DrJKL
pushed a commit
that referenced
this pull request
Jan 28, 2026
…8372) ## Summary - Remove duplicate forceRender() in ResizeObserver callback since handleResize() already calls it - Add guard for environments without ResizeObserver support - Disconnect existing observer before reassigning to prevent leaks requested by @DrJKL in #8351 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8372-fix-remove-redundant-forceRender-call-and-add-ResizeObserver-guard-2f66d73d3650811bb3a6de5c59b3c1fb) by [Unito](https://www.unito.io)
christian-byrne
added
needs-backport
github-actions bot
pushed a commit
that referenced
this pull request
Jan 29, 2026
## Summary When Preview3D node was added to canvas, the Three.js scene would stretch outside the node bounds until mouse hover. This happened because the container size was not stable during initialization. Add ResizeObserver to Load3d class to automatically refresh viewport when container size changes, ensuring correct render dimensions. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8351-fix-add-ResizeObserver-to-fix-Preview3D-initial-render-stretch-2f66d73d3650810cbd1fc64dde9ddc17) by [Unito](https://www.unito.io)
github-actions bot
pushed a commit
that referenced
this pull request
Jan 29, 2026
## Summary When Preview3D node was added to canvas, the Three.js scene would stretch outside the node bounds until mouse hover. This happened because the container size was not stable during initialization. Add ResizeObserver to Load3d class to automatically refresh viewport when container size changes, ensuring correct render dimensions. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8351-fix-add-ResizeObserver-to-fix-Preview3D-initial-render-stretch-2f66d73d3650810cbd1fc64dde9ddc17) by [Unito](https://www.unito.io)
Member
Member
github-actions
bot
removed
the
needs-backport
AustinMroz
pushed a commit
that referenced
this pull request
Jan 29, 2026
… render stretch (#8423) Backport of #8351 to `core/1.38` Automatically created by backport workflow. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8423-backport-core-1-38-fix-add-ResizeObserver-to-fix-Preview3D-initial-render-stretch-2f76d73d365081a28ccbd2b5d9eb1aa5) by [Unito](https://www.unito.io) Co-authored-by: Terry Jia <terryjia88@gmail.com>
AustinMroz
pushed a commit
that referenced
this pull request
Jan 29, 2026
…l render stretch (#8424) Backport of #8351 to `cloud/1.38` Automatically created by backport workflow. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8424-backport-cloud-1-38-fix-add-ResizeObserver-to-fix-Preview3D-initial-render-stretch-2f76d73d365081a9974fe055b2a5894d) by [Unito](https://www.unito.io) Co-authored-by: Terry Jia <terryjia88@gmail.com>
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
4 participants
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
When Preview3D node was added to canvas, the Three.js scene would stretch outside the node bounds until mouse hover. This happened because the container size was not stable during initialization.
Add ResizeObserver to Load3d class to automatically refresh viewport when container size changes, ensuring correct render dimensions.
┆Issue is synchronized with this Notion page by Unito