Reorder subgraph context menu items

- Follow-up on #4870

4870 is incomplete; the changes in this follow-up PR were what was tested, however the commit itself did not get pushed.

.claude/commands/create-frontend-release.md

@@ -210,29 +210,52 @@ echo "Last stable release: $LAST_STABLE"
        echo "WARNING: PR #$PR not on main branch!"
    done
    ```
-3. Create comprehensive release notes including:
-   - **Version Change**: Show version bump details
-   - **Changelog** grouped by type:
-     - 🚀 **Features** (feat:)
-     - 🐛 **Bug Fixes** (fix:)
-     - 💥 **Breaking Changes** (BREAKING CHANGE)
-     - 📚 **Documentation** (docs:)
-     - 🔧 **Maintenance** (chore:, refactor:)
-     - ⬆️ **Dependencies** (deps:, dependency updates)
-       - **Litegraph Changes** (if version updated):
-         - 🚀 Features: ${LITEGRAPH_FEATURES}
-         - 🐛 Bug Fixes: ${LITEGRAPH_FIXES}
-         - 💥 Breaking Changes: ${LITEGRAPH_BREAKING}
-         - 🔧 Other Changes: ${LITEGRAPH_OTHER}
-       - **Other Major Dependencies**: ${OTHER_DEP_CHANGES}
-   - Include PR numbers and links
-   - Add issue references (Fixes #123)
-4. **Save release notes:**
+3. Create standardized release notes using this exact template:
    ```bash
-   # Save release notes for PR and GitHub release
-   echo "$RELEASE_NOTES" > release-notes-${NEW_VERSION}.md
+   cat > release-notes-${NEW_VERSION}.md << 'EOF'
+   ## ⚠️ Breaking Changes
+   <!-- List breaking changes if any, otherwise remove this entire section -->
+   - Breaking change description (#PR_NUMBER)
+
+   ---
+
+   ## What's Changed
+
+   ### 🚀 Features
+   <!-- List features here, one per line with PR reference -->
+   - Feature description (#PR_NUMBER)
+
+   ### 🐛 Bug Fixes
+   <!-- List bug fixes here, one per line with PR reference -->
+   - Bug fix description (#PR_NUMBER)
+
+   ### 🔧 Maintenance
+   <!-- List refactoring, chore, and other maintenance items -->
+   - Maintenance item description (#PR_NUMBER)
+
+   ### 📚 Documentation
+   <!-- List documentation changes if any, remove section if empty -->
+   - Documentation update description (#PR_NUMBER)
+
+   ### ⬆️ Dependencies
+   <!-- List dependency updates -->
+   - Updated dependency from vX.X.X to vY.Y.Y (#PR_NUMBER)
+
+   **Full Changelog**: https://github.com/Comfy-Org/ComfyUI_frontend/compare/${BASE_TAG}...v${NEW_VERSION}
+   EOF
    ```
-5. **CONTENT REVIEW**: Release notes clear and comprehensive with dependency details?
+4. **Parse commits and populate template:**
+   - Group commits by conventional commit type (feat:, fix:, chore:, etc.)
+   - Extract PR numbers from commit messages
+   - For breaking changes, analyze if changes affect:
+     - Public APIs (app object, api module)
+     - Extension/workspace manager APIs
+     - Node schema, workflow schema, or other public schemas
+     - Any other public-facing interfaces
+   - For dependency updates, list version changes with PR numbers
+   - Remove empty sections (e.g., if no documentation changes)
+   - Ensure consistent bullet format: `- Description (#PR_NUMBER)`
+5. **CONTENT REVIEW**: Release notes follow standard format?
 
 ### Step 9: Create Version Bump PR
 
@@ -273,38 +296,12 @@ echo "Workflow triggered. Waiting for PR creation..."
      --body-file release-notes-${NEW_VERSION}.md \
      --label "Release"
    ```
-3. **Add required sections to PR body:**
+3. **Update PR with release notes:**
    ```bash
-   # Create PR body with release notes plus required sections
-   cat > pr-body.md << EOF
-   ${RELEASE_NOTES}
-
-   ## Breaking Changes
-   ${BREAKING_CHANGES:-None}
-
-   ## Testing Performed
-   - ✅ Full test suite (unit, component)
-   - ✅ TypeScript compilation
-   - ✅ Linting checks
-   - ✅ Build verification
-   - ✅ Security audit
-
-   ## Distribution Channels
-   - GitHub Release (with dist.zip)
-   - PyPI Package (comfyui-frontend-package)
-   - npm Package (@comfyorg/comfyui-frontend-types)
-
-   ## Post-Release Tasks
-   - [ ] Verify all distribution channels
-   - [ ] Update external documentation
-   - [ ] Monitor for issues
-   EOF
+   # For workflow-created PRs, update the body with our release notes
+   gh pr edit ${PR_NUMBER} --body-file release-notes-${NEW_VERSION}.md
    ```
-4. Update PR with enhanced description:
-   ```bash
-   gh pr edit ${PR_NUMBER} --body-file pr-body.md
-   ```
-5. **PR REVIEW**: Version bump PR created and enhanced correctly?
+4. **PR REVIEW**: Version bump PR created with standardized release notes?
 
 ### Step 10: Critical Release PR Verification
 
@@ -592,55 +589,46 @@ The command implements multiple quality gates:
 - Draft release status
 - Python package specs require that prereleases use alpha/beta/rc as the preid
 
-## Common Issues and Solutions
+## Critical Implementation Notes
 
-### Issue: Pre-release Version Confusion
-**Problem**: Not sure whether to promote pre-release or create new version
-**Solution**: 
-- Follow semver standards: a prerelease version is followed by a normal release.  It should have the same major, minor, and patch versions as the prerelease.
+When executing this release process, pay attention to these key aspects:
 
-### Issue: Wrong Commit Count
-**Problem**: Changelog includes commits from other branches
-**Solution**: Always use `--first-parent` flag with git log
+### Version Handling
+- For pre-release versions (e.g., 1.24.0-rc.1), the next stable release should be the same version without the suffix (1.24.0)
+- Never skip version numbers - follow semantic versioning strictly
 
-**Update**: Sometimes update-locales doesn't add [skip ci] - always verify!
+### Commit History Analysis
+- **ALWAYS** use `--first-parent` flag with git log to avoid including commits from merged feature branches
+- Verify PR merge targets before including them in changelogs:
+  ```bash
+  gh pr view ${PR_NUMBER} --json baseRefName
+  ```
 
-### Issue: Missing PRs in Changelog
-**Problem**: PR was merged to different branch
-**Solution**: Verify PR merge target with:
-```bash
-gh pr view ${PR_NUMBER} --json baseRefName
-```
+### Release Workflow Triggers
+- The "Release" label on the PR is **CRITICAL** - without it, PyPI/npm publishing won't occur
+- Check for `[skip ci]` in commit messages before merging - this blocks the release workflow
+- If you encounter `[skip ci]`, push an empty commit to override it:
+  ```bash
+  git commit --allow-empty -m "Trigger release workflow"
+  ```
 
-### Issue: Incomplete Dependency Changelog
-**Problem**: Litegraph or other dependency updates only show version bump, not actual changes
-**Solution**: The command now automatically:
-- Detects litegraph version changes between releases
-- Clones the litegraph repository temporarily
-- Extracts and categorizes changes between versions
-- Includes detailed litegraph changelog in release notes
-- Cleans up temporary files after analysis
+### PR Creation Details
+- Version bump PRs come from `comfy-pr-bot`, not `github-actions`
+- The workflow typically completes in 20-30 seconds
+- Always wait for the PR to be created before trying to edit it
 
-### Issue: Release Failed Due to [skip ci]
-**Problem**: Release workflow didn't trigger after merge
-**Prevention**: Always avoid this scenario
-- Ensure that `[skip ci]` or similar flags are NOT in the `HEAD` commit message of the PR
-  - Push a new, empty commit to the PR
-- Always double-check this immediately before merging
+### Breaking Changes Detection
+- Analyze changes to public-facing APIs:
+  - The `app` object and its methods
+  - The `api` module exports
+  - Extension and workspace manager interfaces
+  - Node schema, workflow schema, and other public schemas
+- Any modifications to these require marking as breaking changes
 
-**Recovery Strategy**:
-1. Revert version in a new PR (e.g., 1.24.0 → 1.24.0-1)
-2. Merge the revert PR
-3. Run version bump workflow again
-4. This creates a fresh PR without [skip ci]
-Benefits: Cleaner than creating extra version numbers
-
-## Key Learnings & Notes
-
-1. **PR Author**: Version bump PRs are created by `comfy-pr-bot`, not `github-actions`
-2. **Workflow Speed**: Version bump workflow typically completes in ~20-30 seconds
-3. **Update-locales Behavior**: Inconsistent - sometimes adds [skip ci], sometimes doesn't
-4. **Recovery Options**: Reverting version is cleaner than creating extra versions
-5. **Dependency Tracking**: Command now automatically includes litegraph and major dependency changes in changelogs
-6. **Litegraph Integration**: Temporary cloning of litegraph repo provides detailed change analysis between versions
+### Recovery Procedures
+If the release workflow fails to trigger:
+1. Create a revert PR to restore the previous version
+2. Merge the revert
+3. Re-run the version bump workflow
+4. This approach is cleaner than creating extra version numbers
 

.claude/commands/create-hotfix-release.md

@@ -138,14 +138,50 @@ For each commit:
    ```bash
    gh pr create --base core/X.Y --head release/1.23.5 \
      --title "[Release] v1.23.5" \
-     --body "..." \
+     --body "Release notes will be added shortly..." \
      --label "Release"
    ```
 3. **CRITICAL**: Verify "Release" label is added
-4. PR description should include:
-   - Version: `1.23.4` → `1.23.5`
-   - Included fixes (link to previous PR)
-   - Release notes for users
+4. Create standardized release notes:
+   ```bash
+   cat > release-notes-${NEW_VERSION}.md << 'EOF'
+   ## ⚠️ Breaking Changes
+   <!-- List breaking changes if any, otherwise remove this entire section -->
+   - Breaking change description (#PR_NUMBER)
+
+   ---
+
+   ## What's Changed
+
+   ### 🚀 Features
+   <!-- List features here, one per line with PR reference -->
+   - Feature description (#PR_NUMBER)
+
+   ### 🐛 Bug Fixes
+   <!-- List bug fixes here, one per line with PR reference -->
+   - Bug fix description (#PR_NUMBER)
+
+   ### 🔧 Maintenance
+   <!-- List refactoring, chore, and other maintenance items -->
+   - Maintenance item description (#PR_NUMBER)
+
+   ### 📚 Documentation
+   <!-- List documentation changes if any, remove section if empty -->
+   - Documentation update description (#PR_NUMBER)
+
+   ### ⬆️ Dependencies
+   <!-- List dependency updates -->
+   - Updated dependency from vX.X.X to vY.Y.Y (#PR_NUMBER)
+
+   **Full Changelog**: https://github.com/Comfy-Org/ComfyUI_frontend/compare/v${CURRENT_VERSION}...v${NEW_VERSION}
+   EOF
+   ```
+   - For hotfixes, typically only populate the "Bug Fixes" section
+   - Include links to the cherry-picked PRs/commits
+   - Update the PR body with the release notes:
+     ```bash
+     gh pr edit ${PR_NUMBER} --body-file release-notes-${NEW_VERSION}.md
+     ```
 5. **CONFIRMATION REQUIRED**: Release PR has "Release" label?
 
 ### Step 11: Monitor Release Process

.claude/commands/pr.md

@@ -0,0 +1,131 @@
+# Create PR
+
+Automate PR creation with proper tags, labels, and concise summary.
+
+## Step 1: Check Prerequisites
+
+```bash
+# Ensure you have uncommitted changes
+git status
+
+# If changes exist, commit them first
+git add .
+git commit -m "[tag] Your commit message"
+```
+
+## Step 2: Push and Create PR
+
+You'll create the PR with the following structure:
+
+### PR Tags (use in title)
+
+- `[feat]` - New features → label: `enhancement`
+- `[bugfix]` - Bug fixes → label: `verified bug`
+- `[refactor]` - Code restructuring → label: `enhancement`
+- `[docs]` - Documentation → label: `documentation`
+- `[test]` - Test changes → label: `enhancement`
+- `[ci]` - CI/CD changes → label: `enhancement`
+
+### Label Mapping
+
+#### General Labels
+
+- Feature/Enhancement: `enhancement`
+- Bug fixes: `verified bug`
+- Documentation: `documentation`
+- Dependencies: `dependencies`
+- Performance: `Performance`
+- Desktop app: `Electron`
+
+#### Product Area Labels
+
+**Core Features**
+
+- `area:nodes` - Node-related functionality
+- `area:workflows` - Workflow management
+- `area:queue` - Queue system
+- `area:models` - Model handling
+- `area:templates` - Template system
+- `area:subgraph` - Subgraph functionality
+
+**UI Components**
+
+- `area:ui` - General user interface improvements
+- `area:widgets` - Widget system
+- `area:dom-widgets` - DOM-based widgets
+- `area:links` - Connection links between nodes
+- `area:groups` - Node grouping functionality
+- `area:reroutes` - Reroute nodes
+- `area:previews` - Preview functionality
+- `area:minimap` - Minimap navigation
+- `area:floating-toolbox` - Floating toolbar
+- `area:mask-editor` - Mask editing tools
+
+**Navigation & Organization**
+
+- `area:navigation` - Navigation system
+- `area:search` - Search functionality
+- `area:workspace-management` - Workspace features
+- `area:topbar-menu` - Top bar menu
+- `area:help-menu` - Help menu system
+
+**System Features**
+
+- `area:settings` - Settings/preferences
+- `area:hotkeys` - Keyboard shortcuts
+- `area:undo-redo` - Undo/redo system
+- `area:customization` - Customization features
+- `area:auth` - Authentication
+- `area:comms` - Communication/networking
+
+**Development & Infrastructure**
+
+- `area:CI/CD` - CI/CD pipeline
+- `area:testing` - Testing infrastructure
+- `area:vue-migration` - Vue migration work
+- `area:manager` - ComfyUI Manager integration
+
+**Platform-Specific**
+
+- `area:mobile` - Mobile support
+- `area:3d` - 3D-related features
+
+**Special Areas**
+
+- `area:i18n` - Translation/internationalization
+- `area:CNR` - Comfy Node Registry
+
+## Step 3: Execute PR Creation
+
+```bash
+# First, push your branch
+git push -u origin $(git branch --show-current)
+
+# Then create the PR (replace placeholders)
+gh pr create \
+  --title "[TAG] Brief description" \
+  --body "$(cat <<'EOF'
+## Summary
+One sentence describing what changed and why.
+
+## Changes
+- **What**: Core functionality added/modified
+- **Breaking**: Any breaking changes (if none, omit this line)
+- **Dependencies**: New dependencies (if none, omit this line)
+
+## Review Focus
+- Critical design decisions or edge cases that need attention
+
+Fixes #ISSUE_NUMBER
+EOF
+)" \
+  --label "APPROPRIATE_LABEL" \
+  --base main
+```
+
+## Additional Options
+
+- Add multiple labels: `--label "enhancement,Performance"`
+- Request reviewers: `--reviewer @username`
+- Mark as draft: `--draft`
+- Open in browser after creation: `--web`

.github/pull_request_template.md

@@ -0,0 +1,20 @@
+## Summary
+
+<!-- One sentence describing what changed and why. -->
+
+## Changes
+
+- **What**: <!-- Core functionality added/modified -->
+- **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)
+
+<!-- Add screenshots or video recording to help explain your changes -->

browser_tests/tests/subgraph.spec.ts

@@ -704,4 +704,103 @@ test.describe('Subgraph Operations', () => {
       expect(finalCount).toBe(parentCount)
     })
   })
+
+  test.describe('Navigation Hotkeys', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+    })
+
+    test('Navigation hotkey can be customized', async ({ comfyPage }) => {
+      await comfyPage.loadWorkflow('basic-subgraph')
+      await comfyPage.nextFrame()
+
+      // Change the Exit Subgraph keybinding from Escape to Alt+Q
+      await comfyPage.setSetting('Comfy.Keybinding.NewBindings', [
+        {
+          commandId: 'Comfy.Graph.ExitSubgraph',
+          combo: {
+            key: 'q',
+            ctrl: false,
+            alt: true,
+            shift: false
+          }
+        }
+      ])
+
+      await comfyPage.setSetting('Comfy.Keybinding.UnsetBindings', [
+        {
+          commandId: 'Comfy.Graph.ExitSubgraph',
+          combo: {
+            key: 'Escape',
+            ctrl: false,
+            alt: false,
+            shift: false
+          }
+        }
+      ])
+
+      // Reload the page
+      await comfyPage.page.reload()
+      await comfyPage.page.waitForTimeout(1024)
+
+      // Navigate into subgraph
+      const subgraphNode = await comfyPage.getNodeRefById('2')
+      await subgraphNode.navigateIntoSubgraph()
+      await comfyPage.page.waitForSelector(SELECTORS.breadcrumb)
+
+      // Verify we're in a subgraph
+      expect(await isInSubgraph(comfyPage)).toBe(true)
+
+      // Test that Escape no longer exits subgraph
+      await comfyPage.page.keyboard.press('Escape')
+      await comfyPage.nextFrame()
+      if (!(await isInSubgraph(comfyPage))) {
+        throw new Error('Not in subgraph')
+      }
+
+      // Test that Alt+Q now exits subgraph
+      await comfyPage.page.keyboard.press('Alt+q')
+      await comfyPage.nextFrame()
+      expect(await isInSubgraph(comfyPage)).toBe(false)
+    })
+
+    test('Escape prioritizes closing dialogs over exiting subgraph', async ({
+      comfyPage
+    }) => {
+      await comfyPage.loadWorkflow('basic-subgraph')
+      await comfyPage.nextFrame()
+
+      const subgraphNode = await comfyPage.getNodeRefById('2')
+      await subgraphNode.navigateIntoSubgraph()
+      await comfyPage.page.waitForSelector(SELECTORS.breadcrumb)
+
+      // Verify we're in a subgraph
+      if (!(await isInSubgraph(comfyPage))) {
+        throw new Error('Not in subgraph')
+      }
+
+      // Open settings dialog using hotkey
+      await comfyPage.page.keyboard.press('Control+,')
+      await comfyPage.page.waitForSelector('.settings-container', {
+        state: 'visible'
+      })
+
+      // Press Escape - should close dialog, not exit subgraph
+      await comfyPage.page.keyboard.press('Escape')
+      await comfyPage.nextFrame()
+
+      // Dialog should be closed
+      await expect(
+        comfyPage.page.locator('.settings-container')
+      ).not.toBeVisible()
+
+      // Should still be in subgraph
+      expect(await isInSubgraph(comfyPage)).toBe(true)
+
+      // Press Escape again - now should exit subgraph
+      await comfyPage.page.keyboard.press('Escape')
+      await comfyPage.nextFrame()
+      expect(await isInSubgraph(comfyPage)).toBe(false)
+    })
+  })
 })

src/assets/css/style.css

@@ -616,7 +616,8 @@ audio.comfy-audio.empty-audio-widget {
 .comfy-load-3d canvas,
 .comfy-load-3d-animation canvas,
 .comfy-preview-3d canvas,
-.comfy-preview-3d-animation canvas{
+.comfy-preview-3d-animation canvas,
+.comfy-load-3d-viewer canvas{
   display: flex;
   width: 100% !important;
   height: 100% !important;

src/components/breadcrumb/SubgraphBreadcrumb.vue

@@ -32,7 +32,6 @@
 </template>
 
 <script setup lang="ts">
-import { useEventListener } from '@vueuse/core'
 import Breadcrumb from 'primevue/breadcrumb'
 import type { MenuItem } from 'primevue/menuitem'
 import { computed, onUpdated, ref, watch } from 'vue'
@@ -98,18 +97,6 @@ const home = computed(() => ({
   }
 }))
 
-// Escape exits from the current subgraph.
-useEventListener(document, 'keydown', (event) => {
-  if (event.key === 'Escape') {
-    const canvas = useCanvasStore().getCanvas()
-    if (!canvas.graph) throw new TypeError('Canvas has no graph')
-
-    canvas.setGraph(
-      navigationStore.navigationStack.at(-2) ?? canvas.graph.rootGraph
-    )
-  }
-})
-
 // Check for overflow on breadcrumb items and collapse/expand the breadcrumb to fit
 let overflowObserver: ReturnType<typeof useOverflowObserver> | undefined
 watch(breadcrumbElement, (el) => {

src/components/graph/SelectionToolbox.vue

@@ -13,6 +13,7 @@
     <BypassButton />
     <PinButton />
     <EditModelButton />
+    <Load3DViewerButton />
     <MaskEditorButton />
     <ConvertToSubgraphButton />
     <DeleteButton />
@@ -38,6 +39,7 @@ import EditModelButton from '@/components/graph/selectionToolbox/EditModelButton
 import ExecuteButton from '@/components/graph/selectionToolbox/ExecuteButton.vue'
 import ExtensionCommandButton from '@/components/graph/selectionToolbox/ExtensionCommandButton.vue'
 import HelpButton from '@/components/graph/selectionToolbox/HelpButton.vue'
+import Load3DViewerButton from '@/components/graph/selectionToolbox/Load3DViewerButton.vue'
 import MaskEditorButton from '@/components/graph/selectionToolbox/MaskEditorButton.vue'
 import PinButton from '@/components/graph/selectionToolbox/PinButton.vue'
 import RefreshSelectionButton from '@/components/graph/selectionToolbox/RefreshSelectionButton.vue'

src/components/graph/selectionToolbox/Load3DViewerButton.vue

@@ -0,0 +1,38 @@
+<template>
+  <Button
+    v-show="is3DNode"
+    v-tooltip.top="{
+      value: t('commands.Comfy_3DViewer_Open3DViewer.label'),
+      showDelay: 1000
+    }"
+    severity="secondary"
+    text
+    icon="pi pi-pencil"
+    @click="open3DViewer"
+  />
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { computed } from 'vue'
+
+import { t } from '@/i18n'
+import { useCommandStore } from '@/stores/commandStore'
+import { useCanvasStore } from '@/stores/graphStore'
+import { useSettingStore } from '@/stores/settingStore'
+import { isLGraphNode, isLoad3dNode } from '@/utils/litegraphUtil'
+
+const commandStore = useCommandStore()
+const canvasStore = useCanvasStore()
+
+const is3DNode = computed(() => {
+  const enable3DViewer = useSettingStore().get('Comfy.Load3D.3DViewerEnable')
+  const nodes = canvasStore.selectedItems.filter(isLGraphNode)
+
+  return nodes.length === 1 && nodes.some(isLoad3dNode) && enable3DViewer
+})
+
+const open3DViewer = () => {
+  void commandStore.execute('Comfy.3DViewer.Open3DViewer')
+}
+</script>

src/components/load3d/Load3D.vue

@@ -58,8 +58,19 @@
       @export-model="handleExportModel"
     />
     <div
-      v-if="showRecordingControls"
+      v-if="enable3DViewer"
       class="absolute top-12 right-2 z-20 pointer-events-auto"
+    >
+      <ViewerControls :node="node" />
+    </div>
+
+    <div
+      v-if="showRecordingControls"
+      class="absolute right-2 z-20 pointer-events-auto"
+      :class="{
+        'top-12': !enable3DViewer,
+        'top-24': enable3DViewer
+      }"
     >
       <RecordingControls
         :node="node"
@@ -82,6 +93,7 @@ import { useI18n } from 'vue-i18n'
 import Load3DControls from '@/components/load3d/Load3DControls.vue'
 import Load3DScene from '@/components/load3d/Load3DScene.vue'
 import RecordingControls from '@/components/load3d/controls/RecordingControls.vue'
+import ViewerControls from '@/components/load3d/controls/ViewerControls.vue'
 import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
 import {
   CameraType,
@@ -91,6 +103,7 @@ import {
 } from '@/extensions/core/load3d/interfaces'
 import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import type { ComponentWidget } from '@/scripts/domWidget'
+import { useSettingStore } from '@/stores/settingStore'
 import { useToastStore } from '@/stores/toastStore'
 
 const { t } = useI18n()
@@ -121,6 +134,9 @@ const isRecording = ref(false)
 const hasRecording = ref(false)
 const recordingDuration = ref(0)
 const showRecordingControls = ref(!inputSpec.isPreview)
+const enable3DViewer = computed(() =>
+  useSettingStore().get('Comfy.Load3D.3DViewerEnable')
+)
 
 const showPreviewButton = computed(() => {
   return !type.includes('Preview')

src/components/load3d/Load3dViewerContent.vue

@@ -0,0 +1,149 @@
+<template>
+  <div
+    ref="viewerContentRef"
+    class="flex w-full"
+    :class="[maximized ? 'h-full' : 'h-[70vh]']"
+    @mouseenter="viewer.handleMouseEnter"
+    @mouseleave="viewer.handleMouseLeave"
+  >
+    <div ref="mainContentRef" class="flex-1 relative">
+      <div
+        ref="containerRef"
+        class="absolute w-full h-full comfy-load-3d-viewer"
+        @resize="viewer.handleResize"
+      />
+    </div>
+
+    <div class="w-72 flex flex-col">
+      <div class="flex-1 overflow-y-auto p-4">
+        <div class="space-y-2">
+          <div class="p-2 space-y-4">
+            <SceneControls
+              v-model:background-color="viewer.backgroundColor.value"
+              v-model:show-grid="viewer.showGrid.value"
+              :has-background-image="viewer.hasBackgroundImage.value"
+              @update-background-image="viewer.handleBackgroundImageUpdate"
+            />
+          </div>
+
+          <div class="p-2 space-y-4">
+            <ModelControls
+              v-model:up-direction="viewer.upDirection.value"
+              v-model:material-mode="viewer.materialMode.value"
+            />
+          </div>
+
+          <div class="p-2 space-y-4">
+            <CameraControls
+              v-model:camera-type="viewer.cameraType.value"
+              v-model:fov="viewer.fov.value"
+            />
+          </div>
+
+          <div class="p-2 space-y-4">
+            <LightControls
+              v-model:light-intensity="viewer.lightIntensity.value"
+            />
+          </div>
+
+          <div class="p-2 space-y-4">
+            <ExportControls @export-model="viewer.exportModel" />
+          </div>
+        </div>
+      </div>
+
+      <div class="p-4">
+        <div class="flex gap-2">
+          <Button
+            icon="pi pi-times"
+            severity="secondary"
+            :label="t('g.cancel')"
+            @click="handleCancel"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { onBeforeUnmount, onMounted, ref, toRaw } from 'vue'
+
+import CameraControls from '@/components/load3d/controls/viewer/CameraControls.vue'
+import ExportControls from '@/components/load3d/controls/viewer/ExportControls.vue'
+import LightControls from '@/components/load3d/controls/viewer/LightControls.vue'
+import ModelControls from '@/components/load3d/controls/viewer/ModelControls.vue'
+import SceneControls from '@/components/load3d/controls/viewer/SceneControls.vue'
+import { t } from '@/i18n'
+import { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import { useLoad3dService } from '@/services/load3dService'
+import { useDialogStore } from '@/stores/dialogStore'
+
+const props = defineProps<{
+  node: LGraphNode
+}>()
+
+const viewerContentRef = ref<HTMLDivElement>()
+const containerRef = ref<HTMLDivElement>()
+const mainContentRef = ref<HTMLDivElement>()
+const maximized = ref(false)
+const mutationObserver = ref<MutationObserver | null>(null)
+
+const viewer = useLoad3dService().getOrCreateViewer(toRaw(props.node))
+
+onMounted(async () => {
+  const source = useLoad3dService().getLoad3d(props.node)
+  if (source && containerRef.value) {
+    await viewer.initializeViewer(containerRef.value, source)
+  }
+
+  if (viewerContentRef.value) {
+    mutationObserver.value = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (
+          mutation.type === 'attributes' &&
+          mutation.attributeName === 'maximized'
+        ) {
+          maximized.value =
+            (mutation.target as HTMLElement).getAttribute('maximized') ===
+            'true'
+
+          setTimeout(() => {
+            viewer.refreshViewport()
+          }, 0)
+        }
+      })
+    })
+
+    mutationObserver.value.observe(viewerContentRef.value, {
+      attributes: true,
+      attributeFilter: ['maximized']
+    })
+  }
+
+  window.addEventListener('resize', viewer.handleResize)
+})
+
+const handleCancel = () => {
+  viewer.restoreInitialState()
+  useDialogStore().closeDialog()
+}
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', viewer.handleResize)
+
+  if (mutationObserver.value) {
+    mutationObserver.value.disconnect()
+    mutationObserver.value = null
+  }
+
+  // we will manually cleanup the viewer in dialog close handler
+})
+</script>
+
+<style scoped>
+:deep(.p-panel-content) {
+  padding: 0;
+}
+</style>

src/components/load3d/controls/ViewerControls.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="relative bg-gray-700 bg-opacity-30 rounded-lg">
+    <div class="flex flex-col gap-2">
+      <Button class="p-button-rounded p-button-text" @click="openIn3DViewer">
+        <i
+          v-tooltip.right="{
+            value: t('load3d.openIn3DViewer'),
+            showDelay: 300
+          }"
+          class="pi pi-expand text-white text-lg"
+        />
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Tooltip } from 'primevue'
+import Button from 'primevue/button'
+
+import Load3DViewerContent from '@/components/load3d/Load3dViewerContent.vue'
+import { t } from '@/i18n'
+import { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import { useLoad3dService } from '@/services/load3dService'
+import { useDialogStore } from '@/stores/dialogStore'
+
+const vTooltip = Tooltip
+
+const { node } = defineProps<{
+  node: LGraphNode
+}>()
+
+const openIn3DViewer = () => {
+  const props = { node: node }
+
+  useDialogStore().showDialog({
+    key: 'global-load3d-viewer',
+    title: t('load3d.viewer.title'),
+    component: Load3DViewerContent,
+    props: props,
+    dialogComponentProps: {
+      style: 'width: 80vw; height: 80vh;',
+      maximizable: true,
+      onClose: async () => {
+        await useLoad3dService().handleViewerClose(props.node)
+      }
+    }
+  })
+}
+</script>
+
+<style scoped></style>

src/components/load3d/controls/viewer/CameraControls.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="space-y-4">
+    <label>
+      {{ t('load3d.viewer.cameraType') }}
+    </label>
+    <Select
+      v-model="cameraType"
+      :options="cameras"
+      option-label="title"
+      option-value="value"
+    >
+    </Select>
+  </div>
+
+  <div v-if="showFOVButton" class="space-y-4">
+    <label>{{ t('load3d.fov') }}</label>
+    <Slider v-model="fov" :min="10" :max="150" :step="1" aria-label="fov" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Select from 'primevue/select'
+import Slider from 'primevue/slider'
+import { computed } from 'vue'
+
+import { CameraType } from '@/extensions/core/load3d/interfaces'
+import { t } from '@/i18n'
+
+const cameras = [
+  { title: t('load3d.cameraType.perspective'), value: 'perspective' },
+  { title: t('load3d.cameraType.orthographic'), value: 'orthographic' }
+]
+
+const cameraType = defineModel<CameraType>('cameraType')
+const fov = defineModel<number>('fov')
+const showFOVButton = computed(() => cameraType.value === 'perspective')
+</script>

src/components/load3d/controls/viewer/ExportControls.vue

@@ -0,0 +1,37 @@
+<template>
+  <Select
+    v-model="exportFormat"
+    :options="exportFormats"
+    option-label="label"
+    option-value="value"
+  >
+  </Select>
+
+  <Button severity="secondary" text rounded @click="exportModel(exportFormat)">
+    {{ t('load3d.export') }}
+  </Button>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import Select from 'primevue/select'
+import { ref } from 'vue'
+
+import { t } from '@/i18n'
+
+const emit = defineEmits<{
+  (e: 'exportModel', format: string): void
+}>()
+
+const exportFormats = [
+  { label: 'GLB', value: 'glb' },
+  { label: 'OBJ', value: 'obj' },
+  { label: 'STL', value: 'stl' }
+]
+
+const exportFormat = ref('obj')
+
+const exportModel = (format: string) => {
+  emit('exportModel', format)
+}
+</script>

src/components/load3d/controls/viewer/LightControls.vue

@@ -0,0 +1,30 @@
+<template>
+  <label>{{ t('load3d.lightIntensity') }}</label>
+
+  <Slider
+    v-model="lightIntensity"
+    class="w-full"
+    :min="lightIntensityMinimum"
+    :max="lightIntensityMaximum"
+    :step="lightAdjustmentIncrement"
+  />
+</template>
+
+<script setup lang="ts">
+import Slider from 'primevue/slider'
+
+import { t } from '@/i18n'
+import { useSettingStore } from '@/stores/settingStore'
+
+const lightIntensity = defineModel<number>('lightIntensity')
+
+const lightIntensityMaximum = useSettingStore().get(
+  'Comfy.Load3D.LightIntensityMaximum'
+)
+const lightIntensityMinimum = useSettingStore().get(
+  'Comfy.Load3D.LightIntensityMinimum'
+)
+const lightAdjustmentIncrement = useSettingStore().get(
+  'Comfy.Load3D.LightAdjustmentIncrement'
+)
+</script>

src/components/load3d/controls/viewer/ModelControls.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="space-y-4">
+    <div>
+      <label>{{ t('load3d.upDirection') }}</label>
+      <Select
+        v-model="upDirection"
+        :options="upDirectionOptions"
+        option-label="label"
+        option-value="value"
+      />
+    </div>
+
+    <div>
+      <label>{{ t('load3d.materialMode') }}</label>
+      <Select
+        v-model="materialMode"
+        :options="materialModeOptions"
+        option-label="label"
+        option-value="value"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Select from 'primevue/select'
+import { computed } from 'vue'
+
+import { MaterialMode, UpDirection } from '@/extensions/core/load3d/interfaces'
+import { t } from '@/i18n'
+
+const upDirection = defineModel<UpDirection>('upDirection')
+const materialMode = defineModel<MaterialMode>('materialMode')
+
+const upDirectionOptions = [
+  { label: t('load3d.upDirections.original'), value: 'original' },
+  { label: '-X', value: '-x' },
+  { label: '+X', value: '+x' },
+  { label: '-Y', value: '-y' },
+  { label: '+Y', value: '+y' },
+  { label: '-Z', value: '-z' },
+  { label: '+Z', value: '+z' }
+]
+
+const materialModeOptions = computed(() => {
+  return [
+    { label: t('load3d.materialModes.original'), value: 'original' },
+    { label: t('load3d.materialModes.normal'), value: 'normal' },
+    { label: t('load3d.materialModes.wireframe'), value: 'wireframe' }
+  ]
+})
+</script>

src/components/load3d/controls/viewer/SceneControls.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="space-y-4">
+    <div v-if="!hasBackgroundImage">
+      <label>
+        {{ t('load3d.backgroundColor') }}
+      </label>
+      <input v-model="backgroundColor" type="color" class="w-full" />
+    </div>
+
+    <div>
+      <Checkbox v-model="showGrid" input-id="showGrid" binary name="showGrid" />
+      <label for="showGrid" class="pl-2">
+        {{ t('load3d.showGrid') }}
+      </label>
+    </div>
+
+    <div v-if="!hasBackgroundImage">
+      <Button
+        severity="secondary"
+        :label="t('load3d.uploadBackgroundImage')"
+        icon="pi pi-image"
+        class="w-full"
+        @click="openImagePicker"
+      />
+      <input
+        ref="imagePickerRef"
+        type="file"
+        accept="image/*"
+        class="hidden"
+        @change="handleImageUpload"
+      />
+    </div>
+
+    <div v-if="hasBackgroundImage" class="space-y-2">
+      <Button
+        severity="secondary"
+        :label="t('load3d.removeBackgroundImage')"
+        icon="pi pi-times"
+        class="w-full"
+        @click="removeBackgroundImage"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import Checkbox from 'primevue/checkbox'
+import { ref } from 'vue'
+
+import { t } from '@/i18n'
+
+const backgroundColor = defineModel<string>('backgroundColor')
+const showGrid = defineModel<boolean>('showGrid')
+
+defineProps<{
+  hasBackgroundImage?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'updateBackgroundImage', file: File | null): void
+}>()
+
+const imagePickerRef = ref<HTMLInputElement | null>(null)
+
+const openImagePicker = () => {
+  imagePickerRef.value?.click()
+}
+
+const handleImageUpload = (event: Event) => {
+  const input = event.target as HTMLInputElement
+  if (input.files && input.files[0]) {
+    emit('updateBackgroundImage', input.files[0])
+  }
+
+  input.value = ''
+}
+
+const removeBackgroundImage = () => {
+  emit('updateBackgroundImage', null)
+}
+</script>

src/composables/useCoreCommands.ts

@@ -23,6 +23,7 @@ import { useExecutionStore } from '@/stores/executionStore'
 import { useCanvasStore, useTitleEditorStore } from '@/stores/graphStore'
 import { useQueueSettingsStore, useQueueStore } from '@/stores/queueStore'
 import { useSettingStore } from '@/stores/settingStore'
+import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
 import { useToastStore } from '@/stores/toastStore'
 import { type ComfyWorkflow, useWorkflowStore } from '@/stores/workflowStore'
 import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
@@ -805,6 +806,21 @@ export function useCoreCommands(): ComfyCommand[] {
       function: () => {
         bottomPanelStore.togglePanel('shortcuts')
       }
+    },
+    {
+      id: 'Comfy.Graph.ExitSubgraph',
+      icon: 'pi pi-arrow-up',
+      label: 'Exit Subgraph',
+      versionAdded: '1.20.1',
+      function: () => {
+        const canvas = useCanvasStore().getCanvas()
+        const navigationStore = useSubgraphNavigationStore()
+        if (!canvas.graph) return
+
+        canvas.setGraph(
+          navigationStore.navigationStack.at(-2) ?? canvas.graph.rootGraph
+        )
+      }
     }
   ]
 

src/composables/useLoad3dViewer.ts

@@ -0,0 +1,376 @@
+import { ref, toRaw, watch } from 'vue'
+
+import Load3d from '@/extensions/core/load3d/Load3d'
+import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
+import {
+  CameraType,
+  MaterialMode,
+  UpDirection
+} from '@/extensions/core/load3d/interfaces'
+import { t } from '@/i18n'
+import { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import { useLoad3dService } from '@/services/load3dService'
+import { useToastStore } from '@/stores/toastStore'
+
+interface Load3dViewerState {
+  backgroundColor: string
+  showGrid: boolean
+  cameraType: CameraType
+  fov: number
+  lightIntensity: number
+  cameraState: any
+  backgroundImage: string
+  upDirection: UpDirection
+  materialMode: MaterialMode
+  edgeThreshold: number
+}
+
+export const useLoad3dViewer = (node: LGraphNode) => {
+  const backgroundColor = ref('')
+  const showGrid = ref(true)
+  const cameraType = ref<CameraType>('perspective')
+  const fov = ref(75)
+  const lightIntensity = ref(1)
+  const backgroundImage = ref('')
+  const hasBackgroundImage = ref(false)
+  const upDirection = ref<UpDirection>('original')
+  const materialMode = ref<MaterialMode>('original')
+  const edgeThreshold = ref(85)
+  const needApplyChanges = ref(true)
+
+  let load3d: Load3d | null = null
+  let sourceLoad3d: Load3d | null = null
+
+  const initialState = ref<Load3dViewerState>({
+    backgroundColor: '#282828',
+    showGrid: true,
+    cameraType: 'perspective',
+    fov: 75,
+    lightIntensity: 1,
+    cameraState: null,
+    backgroundImage: '',
+    upDirection: 'original',
+    materialMode: 'original',
+    edgeThreshold: 85
+  })
+
+  watch(backgroundColor, (newColor) => {
+    if (!load3d) return
+    try {
+      load3d.setBackgroundColor(newColor)
+    } catch (error) {
+      console.error('Error updating background color:', error)
+      useToastStore().addAlert(
+        t('toastMessages.failedToUpdateBackgroundColor', { color: newColor })
+      )
+    }
+  })
+
+  watch(showGrid, (newValue) => {
+    if (!load3d) return
+    try {
+      load3d.toggleGrid(newValue)
+    } catch (error) {
+      console.error('Error toggling grid:', error)
+      useToastStore().addAlert(
+        t('toastMessages.failedToToggleGrid', { show: newValue ? 'on' : 'off' })
+      )
+    }
+  })
+
+  watch(cameraType, (newCameraType) => {
+    if (!load3d) return
+    try {
+      load3d.toggleCamera(newCameraType)
+    } catch (error) {
+      console.error('Error toggling camera:', error)
+      useToastStore().addAlert(
+        t('toastMessages.failedToToggleCamera', { camera: newCameraType })
+      )
+    }
+  })
+
+  watch(fov, (newFov) => {
+    if (!load3d) return
+    try {
+      load3d.setFOV(Number(newFov))
+    } catch (error) {
+      console.error('Error updating FOV:', error)
+      useToastStore().addAlert(
+        t('toastMessages.failedToUpdateFOV', { fov: newFov })
+      )
+    }
+  })
+
+  watch(lightIntensity, (newValue) => {
+    if (!load3d) return
+    try {
+      load3d.setLightIntensity(Number(newValue))
+    } catch (error) {
+      console.error('Error updating light intensity:', error)
+      useToastStore().addAlert(
+        t('toastMessages.failedToUpdateLightIntensity', { intensity: newValue })
+      )
+    }
+  })
+
+  watch(backgroundImage, async (newValue) => {
+    if (!load3d) return
+    try {
+      await load3d.setBackgroundImage(newValue)
+      hasBackgroundImage.value = !!newValue
+    } catch (error) {
+      console.error('Error updating background image:', error)
+      useToastStore().addAlert(t('toastMessages.failedToUpdateBackgroundImage'))
+    }
+  })
+
+  watch(upDirection, (newValue) => {
+    if (!load3d) return
+    try {
+      load3d.setUpDirection(newValue)
+    } catch (error) {
+      console.error('Error updating up direction:', error)
+      useToastStore().addAlert(
+        t('toastMessages.failedToUpdateUpDirection', { direction: newValue })
+      )
+    }
+  })
+
+  watch(materialMode, (newValue) => {
+    if (!load3d) return
+    try {
+      load3d.setMaterialMode(newValue)
+    } catch (error) {
+      console.error('Error updating material mode:', error)
+      useToastStore().addAlert(
+        t('toastMessages.failedToUpdateMaterialMode', { mode: newValue })
+      )
+    }
+  })
+
+  watch(edgeThreshold, (newValue) => {
+    if (!load3d) return
+    try {
+      load3d.setEdgeThreshold(Number(newValue))
+    } catch (error) {
+      console.error('Error updating edge threshold:', error)
+      useToastStore().addAlert(
+        t('toastMessages.failedToUpdateEdgeThreshold', { threshold: newValue })
+      )
+    }
+  })
+
+  const initializeViewer = async (
+    containerRef: HTMLElement,
+    source: Load3d
+  ) => {
+    if (!containerRef) return
+
+    sourceLoad3d = source
+
+    try {
+      load3d = new Load3d(containerRef, {
+        node: node,
+        disablePreview: true,
+        isViewerMode: true
+      })
+
+      await useLoad3dService().copyLoad3dState(source, load3d)
+
+      const sourceCameraType = source.getCurrentCameraType()
+      const sourceCameraState = source.getCameraState()
+
+      cameraType.value = sourceCameraType
+      backgroundColor.value = source.sceneManager.currentBackgroundColor
+      showGrid.value = source.sceneManager.gridHelper.visible
+      lightIntensity.value = (node.properties['Light Intensity'] as number) || 1
+
+      const backgroundInfo = source.sceneManager.getCurrentBackgroundInfo()
+      if (
+        backgroundInfo.type === 'image' &&
+        node.properties['Background Image']
+      ) {
+        backgroundImage.value = node.properties['Background Image'] as string
+        hasBackgroundImage.value = true
+      } else {
+        backgroundImage.value = ''
+        hasBackgroundImage.value = false
+      }
+
+      if (sourceCameraType === 'perspective') {
+        fov.value = source.cameraManager.perspectiveCamera.fov
+      }
+
+      upDirection.value = source.modelManager.currentUpDirection
+      materialMode.value = source.modelManager.materialMode
+      edgeThreshold.value = (node.properties['Edge Threshold'] as number) || 85
+
+      initialState.value = {
+        backgroundColor: backgroundColor.value,
+        showGrid: showGrid.value,
+        cameraType: cameraType.value,
+        fov: fov.value,
+        lightIntensity: lightIntensity.value,
+        cameraState: sourceCameraState,
+        backgroundImage: backgroundImage.value,
+        upDirection: upDirection.value,
+        materialMode: materialMode.value,
+        edgeThreshold: edgeThreshold.value
+      }
+
+      const width = node.widgets?.find((w) => w.name === 'width')
+      const height = node.widgets?.find((w) => w.name === 'height')
+
+      if (width && height) {
+        load3d.setTargetSize(
+          toRaw(width).value as number,
+          toRaw(height).value as number
+        )
+      }
+    } catch (error) {
+      console.error('Error initializing Load3d viewer:', error)
+      useToastStore().addAlert(
+        t('toastMessages.failedToInitializeLoad3dViewer')
+      )
+    }
+  }
+
+  const exportModel = async (format: string) => {
+    if (!load3d) return
+
+    try {
+      await load3d.exportModel(format)
+    } catch (error) {
+      console.error('Error exporting model:', error)
+      useToastStore().addAlert(
+        t('toastMessages.failedToExportModel', { format: format.toUpperCase() })
+      )
+    }
+  }
+
+  const handleResize = () => {
+    load3d?.handleResize()
+  }
+
+  const handleMouseEnter = () => {
+    load3d?.updateStatusMouseOnViewer(true)
+  }
+
+  const handleMouseLeave = () => {
+    load3d?.updateStatusMouseOnViewer(false)
+  }
+
+  const restoreInitialState = () => {
+    const nodeValue = node
+
+    needApplyChanges.value = false
+
+    if (nodeValue.properties) {
+      nodeValue.properties['Background Color'] =
+        initialState.value.backgroundColor
+      nodeValue.properties['Show Grid'] = initialState.value.showGrid
+      nodeValue.properties['Camera Type'] = initialState.value.cameraType
+      nodeValue.properties['FOV'] = initialState.value.fov
+      nodeValue.properties['Light Intensity'] =
+        initialState.value.lightIntensity
+      nodeValue.properties['Camera Info'] = initialState.value.cameraState
+      nodeValue.properties['Background Image'] =
+        initialState.value.backgroundImage
+    }
+  }
+
+  const applyChanges = async () => {
+    if (!sourceLoad3d || !load3d) return false
+
+    const viewerCameraState = load3d.getCameraState()
+    const nodeValue = node
+
+    if (nodeValue.properties) {
+      nodeValue.properties['Background Color'] = backgroundColor.value
+      nodeValue.properties['Show Grid'] = showGrid.value
+      nodeValue.properties['Camera Type'] = cameraType.value
+      nodeValue.properties['FOV'] = fov.value
+      nodeValue.properties['Light Intensity'] = lightIntensity.value
+      nodeValue.properties['Camera Info'] = viewerCameraState
+      nodeValue.properties['Background Image'] = backgroundImage.value
+    }
+
+    await useLoad3dService().copyLoad3dState(load3d, sourceLoad3d)
+
+    if (backgroundImage.value) {
+      await sourceLoad3d.setBackgroundImage(backgroundImage.value)
+    }
+
+    sourceLoad3d.forceRender()
+
+    if (nodeValue.graph) {
+      nodeValue.graph.setDirtyCanvas(true, true)
+    }
+
+    return true
+  }
+
+  const refreshViewport = () => {
+    useLoad3dService().handleViewportRefresh(load3d)
+  }
+
+  const handleBackgroundImageUpdate = async (file: File | null) => {
+    if (!file) {
+      backgroundImage.value = ''
+      hasBackgroundImage.value = false
+      return
+    }
+
+    try {
+      const resourceFolder =
+        (node.properties['Resource Folder'] as string) || ''
+      const subfolder = resourceFolder.trim()
+        ? `3d/${resourceFolder.trim()}`
+        : '3d'
+
+      const uploadPath = await Load3dUtils.uploadFile(file, subfolder)
+
+      if (uploadPath) {
+        backgroundImage.value = uploadPath
+        hasBackgroundImage.value = true
+      }
+    } catch (error) {
+      console.error('Error uploading background image:', error)
+      useToastStore().addAlert(t('toastMessages.failedToUploadBackgroundImage'))
+    }
+  }
+
+  const cleanup = () => {
+    load3d?.remove()
+    load3d = null
+    sourceLoad3d = null
+  }
+
+  return {
+    // State
+    backgroundColor,
+    showGrid,
+    cameraType,
+    fov,
+    lightIntensity,
+    backgroundImage,
+    hasBackgroundImage,
+    upDirection,
+    materialMode,
+    edgeThreshold,
+    needApplyChanges,
+
+    // Methods
+    initializeViewer,
+    exportModel,
+    handleResize,
+    handleMouseEnter,
+    handleMouseLeave,
+    restoreInitialState,
+    applyChanges,
+    refreshViewport,
+    handleBackgroundImageUpdate,
+    cleanup
+  }
+}

src/constants/coreKeybindings.ts

@@ -190,5 +190,11 @@ export const CORE_KEYBINDINGS: Keybinding[] = [
       key: 'k'
     },
     commandId: 'Workspace.ToggleBottomPanel.Shortcuts'
+  },
+  {
+    combo: {
+      key: 'Escape'
+    },
+    commandId: 'Comfy.Graph.ExitSubgraph'
   }
 ]

src/extensions/core/load3d.ts

@@ -2,6 +2,7 @@ import { nextTick } from 'vue'
 
 import Load3D from '@/components/load3d/Load3D.vue'
 import Load3DAnimation from '@/components/load3d/Load3DAnimation.vue'
+import Load3DViewerContent from '@/components/load3d/Load3dViewerContent.vue'
 import Load3DConfiguration from '@/extensions/core/load3d/Load3DConfiguration'
 import Load3dAnimation from '@/extensions/core/load3d/Load3dAnimation'
 import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
@@ -9,10 +10,13 @@ import { t } from '@/i18n'
 import type { IStringWidget } from '@/lib/litegraph/src/types/widgets'
 import { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { api } from '@/scripts/api'
+import { ComfyApp, app } from '@/scripts/app'
 import { ComponentWidgetImpl, addWidget } from '@/scripts/domWidget'
 import { useExtensionService } from '@/services/extensionService'
 import { useLoad3dService } from '@/services/load3dService'
+import { useDialogStore } from '@/stores/dialogStore'
 import { useToastStore } from '@/stores/toastStore'
+import { isLoad3dNode } from '@/utils/litegraphUtil'
 
 async function handleModelUpload(files: FileList, node: any) {
   if (!files?.length) return
@@ -174,6 +178,51 @@ useExtensionService().registerExtension({
       },
       defaultValue: 0.5,
       experimental: true
+    },
+    {
+      id: 'Comfy.Load3D.3DViewerEnable',
+      category: ['3D', '3DViewer', 'Enable'],
+      name: 'Enable 3D Viewer (Beta)',
+      tooltip:
+        'Enables the 3D Viewer (Beta) for selected nodes. This feature allows you to visualize and interact with 3D models directly within the full size 3d viewer.',
+      type: 'boolean',
+      defaultValue: false,
+      experimental: true
+    }
+  ],
+  commands: [
+    {
+      id: 'Comfy.3DViewer.Open3DViewer',
+      icon: 'pi pi-pencil',
+      label: 'Open 3D Viewer (Beta) for Selected Node',
+      function: () => {
+        const selectedNodes = app.canvas.selected_nodes
+        if (!selectedNodes || Object.keys(selectedNodes).length !== 1) return
+
+        const selectedNode = selectedNodes[Object.keys(selectedNodes)[0]]
+
+        if (!isLoad3dNode(selectedNode)) return
+
+        ComfyApp.copyToClipspace(selectedNode)
+        // @ts-expect-error clipspace_return_node is an extension property added at runtime
+        ComfyApp.clipspace_return_node = selectedNode
+
+        const props = { node: selectedNode }
+
+        useDialogStore().showDialog({
+          key: 'global-load3d-viewer',
+          title: t('load3d.viewer.title'),
+          component: Load3DViewerContent,
+          props: props,
+          dialogComponentProps: {
+            style: 'width: 80vw; height: 80vh;',
+            maximizable: true,
+            onClose: async () => {
+              await useLoad3dService().handleViewerClose(props.node)
+            }
+          }
+        })
+      }
     }
   ],
   getCustomWidgets() {

src/extensions/core/load3d/CameraManager.ts

@@ -179,12 +179,16 @@ export class CameraManager implements CameraManagerInterface {
   }
 
   handleResize(width: number, height: number): void {
+    const aspect = width / height
+    this.updateAspectRatio(aspect)
+  }
+
+  updateAspectRatio(aspect: number): void {
     if (this.activeCamera === this.perspectiveCamera) {
-      this.perspectiveCamera.aspect = width / height
+      this.perspectiveCamera.aspect = aspect
       this.perspectiveCamera.updateProjectionMatrix()
     } else {
       const frustumSize = 10
-      const aspect = width / height
       this.orthographicCamera.left = (-frustumSize * aspect) / 2
       this.orthographicCamera.right = (frustumSize * aspect) / 2
       this.orthographicCamera.top = frustumSize / 2

src/extensions/core/load3d/Load3d.ts

@@ -9,11 +9,11 @@ import { EventManager } from './EventManager'
 import { LightingManager } from './LightingManager'
 import { LoaderManager } from './LoaderManager'
 import { ModelExporter } from './ModelExporter'
-import { ModelManager } from './ModelManager'
 import { NodeStorage } from './NodeStorage'
 import { PreviewManager } from './PreviewManager'
 import { RecordingManager } from './RecordingManager'
 import { SceneManager } from './SceneManager'
+import { SceneModelManager } from './SceneModelManager'
 import { ViewHelperManager } from './ViewHelperManager'
 import {
   CameraState,
@@ -29,22 +29,28 @@ class Load3d {
   protected animationFrameId: number | null = null
   node: LGraphNode
 
-  protected eventManager: EventManager
-  protected nodeStorage: NodeStorage
-  protected sceneManager: SceneManager
-  protected cameraManager: CameraManager
-  protected controlsManager: ControlsManager
-  protected lightingManager: LightingManager
-  protected viewHelperManager: ViewHelperManager
-  protected previewManager: PreviewManager
-  protected loaderManager: LoaderManager
-  protected modelManager: ModelManager
-  protected recordingManager: RecordingManager
+  eventManager: EventManager
+  nodeStorage: NodeStorage
+  sceneManager: SceneManager
+  cameraManager: CameraManager
+  controlsManager: ControlsManager
+  lightingManager: LightingManager
+  viewHelperManager: ViewHelperManager
+  previewManager: PreviewManager
+  loaderManager: LoaderManager
+  modelManager: SceneModelManager
+  recordingManager: RecordingManager
 
   STATUS_MOUSE_ON_NODE: boolean
   STATUS_MOUSE_ON_SCENE: boolean
+  STATUS_MOUSE_ON_VIEWER: boolean
   INITIAL_RENDER_DONE: boolean = false
 
+  targetWidth: number = 512
+  targetHeight: number = 512
+  targetAspectRatio: number = 1
+  isViewerMode: boolean = false
+
   constructor(
     container: Element | HTMLElement,
     options: Load3DOptions = {
@@ -54,6 +60,16 @@ class Load3d {
   ) {
     this.node = options.node || ({} as LGraphNode)
     this.clock = new THREE.Clock()
+    this.isViewerMode = options.isViewerMode || false
+
+    const widthWidget = this.node.widgets?.find((w) => w.name === 'width')
+    const heightWidget = this.node.widgets?.find((w) => w.name === 'height')
+
+    if (widthWidget && heightWidget) {
+      this.targetWidth = widthWidget.value as number
+      this.targetHeight = heightWidget.value as number
+      this.targetAspectRatio = this.targetWidth / this.targetHeight
+    }
 
     this.renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true })
     this.renderer.setSize(300, 300)
@@ -109,7 +125,11 @@ class Load3d {
       this.sceneManager.backgroundCamera
     )
 
-    this.modelManager = new ModelManager(
+    if (options.disablePreview) {
+      this.previewManager.togglePreview(false)
+    }
+
+    this.modelManager = new SceneModelManager(
       this.sceneManager.scene,
       this.renderer,
       this.eventManager,
@@ -142,6 +162,7 @@ class Load3d {
 
     this.STATUS_MOUSE_ON_NODE = false
     this.STATUS_MOUSE_ON_SCENE = false
+    this.STATUS_MOUSE_ON_VIEWER = false
 
     this.handleResize()
     this.startAnimation()
@@ -151,6 +172,41 @@ class Load3d {
     }, 100)
   }
 
+  getEventManager(): EventManager {
+    return this.eventManager
+  }
+
+  getNodeStorage(): NodeStorage {
+    return this.nodeStorage
+  }
+  getSceneManager(): SceneManager {
+    return this.sceneManager
+  }
+  getCameraManager(): CameraManager {
+    return this.cameraManager
+  }
+  getControlsManager(): ControlsManager {
+    return this.controlsManager
+  }
+  getLightingManager(): LightingManager {
+    return this.lightingManager
+  }
+  getViewHelperManager(): ViewHelperManager {
+    return this.viewHelperManager
+  }
+  getPreviewManager(): PreviewManager {
+    return this.previewManager
+  }
+  getLoaderManager(): LoaderManager {
+    return this.loaderManager
+  }
+  getModelManager(): SceneModelManager {
+    return this.modelManager
+  }
+  getRecordingManager(): RecordingManager {
+    return this.recordingManager
+  }
+
   forceRender(): void {
     const delta = this.clock.getDelta()
     this.viewHelperManager.update(delta)
@@ -172,12 +228,43 @@ class Load3d {
   }
 
   renderMainScene(): void {
-    const width = this.renderer.domElement.clientWidth
-    const height = this.renderer.domElement.clientHeight
+    const containerWidth = this.renderer.domElement.clientWidth
+    const containerHeight = this.renderer.domElement.clientHeight
 
-    this.renderer.setViewport(0, 0, width, height)
-    this.renderer.setScissor(0, 0, width, height)
-    this.renderer.setScissorTest(true)
+    if (this.isViewerMode) {
+      const containerAspectRatio = containerWidth / containerHeight
+
+      let renderWidth: number
+      let renderHeight: number
+      let offsetX: number = 0
+      let offsetY: number = 0
+
+      if (containerAspectRatio > this.targetAspectRatio) {
+        renderHeight = containerHeight
+        renderWidth = renderHeight * this.targetAspectRatio
+        offsetX = (containerWidth - renderWidth) / 2
+      } else {
+        renderWidth = containerWidth
+        renderHeight = renderWidth / this.targetAspectRatio
+        offsetY = (containerHeight - renderHeight) / 2
+      }
+
+      this.renderer.setViewport(0, 0, containerWidth, containerHeight)
+      this.renderer.setScissor(0, 0, containerWidth, containerHeight)
+      this.renderer.setScissorTest(true)
+      this.renderer.setClearColor(0x0a0a0a)
+      this.renderer.clear()
+
+      this.renderer.setViewport(offsetX, offsetY, renderWidth, renderHeight)
+      this.renderer.setScissor(offsetX, offsetY, renderWidth, renderHeight)
+
+      const renderAspectRatio = renderWidth / renderHeight
+      this.cameraManager.updateAspectRatio(renderAspectRatio)
+    } else {
+      this.renderer.setViewport(0, 0, containerWidth, containerHeight)
+      this.renderer.setScissor(0, 0, containerWidth, containerHeight)
+      this.renderer.setScissorTest(true)
+    }
 
     this.sceneManager.renderBackground()
     this.renderer.render(
@@ -243,10 +330,15 @@ class Load3d {
     this.STATUS_MOUSE_ON_SCENE = onScene
   }
 
+  updateStatusMouseOnViewer(onViewer: boolean): void {
+    this.STATUS_MOUSE_ON_VIEWER = onViewer
+  }
+
   isActive(): boolean {
     return (
       this.STATUS_MOUSE_ON_NODE ||
       this.STATUS_MOUSE_ON_SCENE ||
+      this.STATUS_MOUSE_ON_VIEWER ||
       this.isRecording() ||
       !this.INITIAL_RENDER_DONE
     )
@@ -308,6 +400,34 @@ class Load3d {
       this.sceneManager.backgroundTexture
     )
 
+    if (
+      this.isViewerMode &&
+      this.sceneManager.backgroundTexture &&
+      this.sceneManager.backgroundMesh
+    ) {
+      const containerWidth = this.renderer.domElement.clientWidth
+      const containerHeight = this.renderer.domElement.clientHeight
+      const containerAspectRatio = containerWidth / containerHeight
+
+      let renderWidth: number
+      let renderHeight: number
+
+      if (containerAspectRatio > this.targetAspectRatio) {
+        renderHeight = containerHeight
+        renderWidth = renderHeight * this.targetAspectRatio
+      } else {
+        renderWidth = containerWidth
+        renderHeight = renderWidth / this.targetAspectRatio
+      }
+
+      this.sceneManager.updateBackgroundSize(
+        this.sceneManager.backgroundTexture,
+        this.sceneManager.backgroundMesh,
+        renderWidth,
+        renderHeight
+      )
+    }
+
     this.forceRender()
   }
 
@@ -340,6 +460,10 @@ class Load3d {
     return this.cameraManager.getCurrentCameraType()
   }
 
+  getCurrentModel(): THREE.Object3D | null {
+    return this.modelManager.currentModel
+  }
+
   setCameraState(state: CameraState): void {
     this.cameraManager.setCameraState(state)
 
@@ -397,6 +521,9 @@ class Load3d {
   }
 
   setTargetSize(width: number, height: number): void {
+    this.targetWidth = width
+    this.targetHeight = height
+    this.targetAspectRatio = width / height
     this.previewManager.setTargetSize(width, height)
     this.forceRender()
   }
@@ -422,13 +549,30 @@ class Load3d {
       return
     }
 
-    const width = parentElement.clientWidth
-    const height = parentElement.clientHeight
+    const containerWidth = parentElement.clientWidth
+    const containerHeight = parentElement.clientHeight
 
-    this.cameraManager.handleResize(width, height)
-    this.sceneManager.handleResize(width, height)
+    if (this.isViewerMode) {
+      const containerAspectRatio = containerWidth / containerHeight
+      let renderWidth: number
+      let renderHeight: number
 
-    this.renderer.setSize(width, height)
+      if (containerAspectRatio > this.targetAspectRatio) {
+        renderHeight = containerHeight
+        renderWidth = renderHeight * this.targetAspectRatio
+      } else {
+        renderWidth = containerWidth
+        renderHeight = renderWidth / this.targetAspectRatio
+      }
+
+      this.cameraManager.handleResize(renderWidth, renderHeight)
+      this.sceneManager.handleResize(renderWidth, renderHeight)
+    } else {
+      this.cameraManager.handleResize(containerWidth, containerHeight)
+      this.sceneManager.handleResize(containerWidth, containerHeight)
+    }
+
+    this.renderer.setSize(containerWidth, containerHeight)
 
     this.previewManager.handleResize()
     this.forceRender()

src/extensions/core/load3d/Load3dAnimation.ts

@@ -27,10 +27,6 @@ class Load3dAnimation extends Load3d {
     this.overrideAnimationLoop()
   }
 
-  private getCurrentModel(): THREE.Object3D | null {
-    return this.modelManager.currentModel
-  }
-
   private overrideAnimationLoop(): void {
     if (this.animationFrameId !== null) {
       cancelAnimationFrame(this.animationFrameId)

src/extensions/core/load3d/SceneModelManager.ts

@@ -18,7 +18,7 @@ import {
   UpDirection
 } from './interfaces'
 
-export class ModelManager implements ModelManagerInterface {
+export class SceneModelManager implements ModelManagerInterface {
   currentModel: THREE.Object3D | null = null
   originalModel:
     | THREE.Object3D
@@ -663,6 +663,12 @@ export class ModelManager implements ModelManagerInterface {
     this.originalMaterials = new WeakMap()
   }
 
+  addModelToScene(model: THREE.Object3D): void {
+    this.currentModel = model
+
+    this.scene.add(this.currentModel)
+  }
+
   async setupModel(model: THREE.Object3D): Promise<void> {
     this.currentModel = model
 

src/extensions/core/load3d/interfaces.ts

@@ -37,6 +37,8 @@ export interface EventCallback {
 export interface Load3DOptions {
   node?: LGraphNode
   inputSpec?: CustomInputSpec
+  disablePreview?: boolean
+  isViewerMode?: boolean
 }
 
 export interface CaptureResult {
@@ -159,6 +161,7 @@ export interface ModelManagerInterface {
   clearModel(): void
   reset(): void
   setupModel(model: THREE.Object3D): Promise<void>
+  addModelToScene(model: THREE.Object3D): void
   setOriginalModel(model: THREE.Object3D | THREE.BufferGeometry | GLTF): void
   setUpDirection(direction: UpDirection): void
   materialMode: MaterialMode

src/extensions/core/maskeditor.ts

@@ -3976,13 +3976,19 @@ class UIManager {
     const mainImageFilename =
       new URL(mainImageUrl).searchParams.get('filename') ?? undefined
 
-    const combinedImageFilename =
+    let combinedImageFilename: string | null | undefined
+    if (
       ComfyApp.clipspace?.combinedIndex !== undefined &&
-      ComfyApp.clipspace?.imgs?.[ComfyApp.clipspace.combinedIndex]?.src
-        ? new URL(
-            ComfyApp.clipspace.imgs[ComfyApp.clipspace.combinedIndex].src
-          ).searchParams.get('filename')
-        : undefined
+      ComfyApp.clipspace?.imgs &&
+      ComfyApp.clipspace.combinedIndex < ComfyApp.clipspace.imgs.length &&
+      ComfyApp.clipspace.imgs[ComfyApp.clipspace.combinedIndex]?.src
+    ) {
+      combinedImageFilename = new URL(
+        ComfyApp.clipspace.imgs[ComfyApp.clipspace.combinedIndex].src
+      ).searchParams.get('filename')
+    } else {
+      combinedImageFilename = undefined
+    }
 
     const imageLayerFilenames =
       mainImageFilename !== undefined

src/lib/litegraph/src/subgraph/SubgraphIONodeBase.ts

@@ -191,7 +191,7 @@ export abstract class SubgraphIONodeBase<
    * @param event The event that triggered the context menu.
    */
   protected showSlotContextMenu(slot: TSlot, event: CanvasPointerEvent): void {
-    const options: IContextMenuValue[] = this.#getSlotMenuOptions(slot)
+    const options = this.#getSlotMenuOptions(slot)
     if (!(options.length > 0)) return
 
     new LiteGraph.ContextMenu(options, {
@@ -208,8 +208,8 @@ export abstract class SubgraphIONodeBase<
    * @param slot The slot to get the context menu options for.
    * @returns The context menu options.
    */
-  #getSlotMenuOptions(slot: TSlot): IContextMenuValue[] {
-    const options: IContextMenuValue[] = []
+  #getSlotMenuOptions(slot: TSlot): (IContextMenuValue | null)[] {
+    const options: (IContextMenuValue | null)[] = []
 
     // Disconnect option if slot has connections
     if (slot !== this.emptySlot && slot.linkIds.length > 0) {
@@ -218,10 +218,10 @@ export abstract class SubgraphIONodeBase<
 
     // Remove / rename slot option (except for the empty slot)
     if (slot !== this.emptySlot) {
-      options.push(
-        { content: 'Remove Slot', value: 'remove' },
-        { content: 'Rename Slot', value: 'rename' }
-      )
+      options.push({ content: 'Rename Slot', value: 'rename' }, null, {
+        content: 'Remove Slot',
+        value: 'remove'
+      })
     }
 
     return options

src/lib/litegraph/src/subgraph/SubgraphOutput.ts

@@ -1,3 +1,5 @@
+import { pull } from 'lodash'
+
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { LLink } from '@/lib/litegraph/src/LLink'
 import type { RerouteId } from '@/lib/litegraph/src/Reroute'
@@ -9,7 +11,6 @@ import type {
 } from '@/lib/litegraph/src/interfaces'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import { NodeSlotType } from '@/lib/litegraph/src/types/globalEnums'
-import { removeFromArray } from '@/lib/litegraph/src/utils/collections'
 
 import type { SubgraphInput } from './SubgraphInput'
 import type { SubgraphOutputNode } from './SubgraphOutputNode'
@@ -59,7 +60,7 @@ export class SubgraphOutput extends SubgraphSlot {
       existingLink.disconnect(subgraph, 'input')
       const resolved = existingLink.resolve(subgraph)
       const links = resolved.output?.links
-      if (links) removeFromArray(links, existingLink.id)
+      if (links) pull(links, existingLink.id)
     }
 
     const link = new LLink(

src/lib/litegraph/src/utils/collections.ts

@@ -112,11 +112,3 @@ export function findFreeSlotOfType<T extends { type: ISlotType }>(
   }
   return wildSlot ?? occupiedSlot ?? occupiedWildSlot
 }
-
-export function removeFromArray<T>(array: T[], value: T): boolean {
-  const index = array.indexOf(value)
-  const found = index !== -1
-
-  if (found) array.splice(index, 1)
-  return found
-}

src/locales/en/commands.json

@@ -35,6 +35,9 @@
   "Comfy-Desktop_Restart": {
     "label": "Restart"
   },
+  "Comfy_3DViewer_Open3DViewer": {
+    "label": "Open 3D Viewer (Beta) for Selected Node"
+  },
   "Comfy_BrowseTemplates": {
     "label": "Browse Templates"
   },
@@ -119,6 +122,9 @@
   "Comfy_Graph_ConvertToSubgraph": {
     "label": "Convert Selection to Subgraph"
   },
+  "Comfy_Graph_ExitSubgraph": {
+    "label": "Exit Subgraph"
+  },
   "Comfy_Graph_FitGroupToContents": {
     "label": "Fit Group To Contents"
   },

src/locales/en/main.json

@@ -946,6 +946,7 @@
     "Quit": "Quit",
     "Reinstall": "Reinstall",
     "Restart": "Restart",
+    "Open 3D Viewer (Beta) for Selected Node": "Open 3D Viewer (Beta) for Selected Node",
     "Browse Templates": "Browse Templates",
     "Add Edit Model Step": "Add Edit Model Step",
     "Delete Selected Items": "Delete Selected Items",
@@ -974,6 +975,7 @@
     "Export (API)": "Export (API)",
     "Give Feedback": "Give Feedback",
     "Convert Selection to Subgraph": "Convert Selection to Subgraph",
+    "Exit Subgraph": "Exit Subgraph",
     "Fit Group To Contents": "Fit Group To Contents",
     "Group Selected Nodes": "Group Selected Nodes",
     "Convert selected nodes to group node": "Convert selected nodes to group node",
@@ -1079,7 +1081,8 @@
     "User": "User",
     "Credits": "Credits",
     "API Nodes": "API Nodes",
-    "Notification Preferences": "Notification Preferences"
+    "Notification Preferences": "Notification Preferences",
+    "3DViewer": "3DViewer"
   },
   "serverConfigItems": {
     "listen": {
@@ -1431,12 +1434,31 @@
       "depth": "Depth",
       "lineart": "Lineart"
     },
+    "upDirections": {
+      "original": "Original"
+    },
     "startRecording": "Start Recording",
     "stopRecording": "Stop Recording",
     "exportRecording": "Export Recording",
     "clearRecording": "Clear Recording",
     "resizeNodeMatchOutput": "Resize Node to match output",
-    "loadingBackgroundImage": "Loading Background Image"
+    "loadingBackgroundImage": "Loading Background Image",
+    "cameraType": {
+      "perspective": "Perspective",
+      "orthographic": "Orthographic"
+    },
+    "viewer": {
+      "title": "3D Viewer (Beta)",
+      "apply": "Apply",
+      "cancel": "Cancel",
+      "cameraType": "Camera Type",
+      "sceneSettings": "Scene Settings",
+      "cameraSettings": "Camera Settings",
+      "lightSettings": "Light Settings",
+      "exportSettings": "Export Settings",
+      "modelSettings": "Model Settings"
+    },
+    "openIn3DViewer": "Open in 3D Viewer"
   },
   "toastMessages": {
     "nothingToQueue": "Nothing to queue",
@@ -1474,7 +1496,8 @@
     "useApiKeyTip": "Tip: Can't access normal login? Use the Comfy API Key option.",
     "nothingSelected": "Nothing selected",
     "cannotCreateSubgraph": "Cannot create subgraph",
-    "failedToConvertToSubgraph": "Failed to convert items to subgraph"
+    "failedToConvertToSubgraph": "Failed to convert items to subgraph",
+    "failedToInitializeLoad3dViewer": "Failed to initialize 3D Viewer"
   },
   "auth": {
     "apiKey": {

src/locales/en/settings.json

@@ -119,6 +119,10 @@
       "Hidden": "Hidden"
     }
   },
+  "Comfy_Load3D_3DViewerEnable": {
+    "name": "Enable 3D Viewer (Beta)",
+    "tooltip": "Enables the 3D Viewer (Beta) for selected nodes. This feature allows you to visualize and interact with 3D models directly within the full size 3d viewer."
+  },
   "Comfy_Load3D_BackgroundColor": {
     "name": "Initial Background Color",
     "tooltip": "Controls the default background color of the 3D scene. This setting determines the background appearance when a new 3D widget is created, but can be adjusted individually for each widget after creation."

src/locales/es/commands.json

@@ -35,6 +35,9 @@
   "Comfy-Desktop_Restart": {
     "label": "Reiniciar"
   },
+  "Comfy_3DViewer_Open3DViewer": {
+    "label": "Abrir visor 3D (Beta) para el nodo seleccionado"
+  },
   "Comfy_BrowseTemplates": {
     "label": "Explorar plantillas"
   },
@@ -119,6 +122,9 @@
   "Comfy_Graph_ConvertToSubgraph": {
     "label": "Convertir selección en subgrafo"
   },
+  "Comfy_Graph_ExitSubgraph": {
+    "label": "Salir de subgrafo"
+  },
   "Comfy_Graph_FitGroupToContents": {
     "label": "Ajustar grupo al contenido"
   },
@@ -243,7 +249,7 @@
     "label": "Alternar panel inferior de controles de vista"
   },
   "Workspace_ToggleBottomPanel_Shortcuts": {
-    "label": "Mostrar diálogo de combinaciones de teclas"
+    "label": "Mostrar diálogo de atajos de teclado"
   },
   "Workspace_ToggleFocusMode": {
     "label": "Alternar Modo de Enfoque"

src/locales/es/main.json

@@ -569,6 +569,10 @@
     "applyingTexture": "Aplicando textura...",
     "backgroundColor": "Color de fondo",
     "camera": "Cámara",
+    "cameraType": {
+      "orthographic": "Ortográfica",
+      "perspective": "Perspectiva"
+    },
     "clearRecording": "Borrar grabación",
     "edgeThreshold": "Umbral de borde",
     "export": "Exportar",
@@ -589,6 +593,7 @@
       "wireframe": "Malla"
     },
     "model": "Modelo",
+    "openIn3DViewer": "Abrir en el visor 3D",
     "previewOutput": "Vista previa de salida",
     "removeBackgroundImage": "Eliminar imagen de fondo",
     "resizeNodeMatchOutput": "Redimensionar nodo para coincidir con la salida",
@@ -599,8 +604,22 @@
     "switchCamera": "Cambiar cámara",
     "switchingMaterialMode": "Cambiando modo de material...",
     "upDirection": "Dirección hacia arriba",
+    "upDirections": {
+      "original": "Original"
+    },
     "uploadBackgroundImage": "Subir imagen de fondo",
-    "uploadTexture": "Subir textura"
+    "uploadTexture": "Subir textura",
+    "viewer": {
+      "apply": "Aplicar",
+      "cameraSettings": "Configuración de la cámara",
+      "cameraType": "Tipo de cámara",
+      "cancel": "Cancelar",
+      "exportSettings": "Configuración de exportación",
+      "lightSettings": "Configuración de la luz",
+      "modelSettings": "Configuración del modelo",
+      "sceneSettings": "Configuración de la escena",
+      "title": "Visor 3D (Beta)"
+    }
   },
   "loadWorkflowWarning": {
     "coreNodesFromVersion": "Requiere ComfyUI {version}:",
@@ -765,6 +784,7 @@
     "Desktop User Guide": "Guía de usuario de escritorio",
     "Duplicate Current Workflow": "Duplicar flujo de trabajo actual",
     "Edit": "Editar",
+    "Exit Subgraph": "Salir de subgrafo",
     "Export": "Exportar",
     "Export (API)": "Exportar (API)",
     "Fit Group To Contents": "Ajustar grupo a contenidos",
@@ -784,6 +804,7 @@
     "New": "Nuevo",
     "Next Opened Workflow": "Siguiente flujo de trabajo abierto",
     "Open": "Abrir",
+    "Open 3D Viewer (Beta) for Selected Node": "Abrir visor 3D (Beta) para el nodo seleccionado",
     "Open Custom Nodes Folder": "Abrir carpeta de nodos personalizados",
     "Open DevTools": "Abrir DevTools",
     "Open Inputs Folder": "Abrir carpeta de entradas",
@@ -1097,6 +1118,7 @@
   },
   "settingsCategories": {
     "3D": "3D",
+    "3DViewer": "Visor 3D",
     "API Nodes": "Nodos API",
     "About": "Acerca de",
     "Appearance": "Apariencia",
@@ -1573,6 +1595,7 @@
     "failedToExportModel": "Error al exportar modelo como {format}",
     "failedToFetchBalance": "No se pudo obtener el saldo: {error}",
     "failedToFetchLogs": "Error al obtener los registros del servidor",
+    "failedToInitializeLoad3dViewer": "No se pudo inicializar el visor 3D",
     "failedToInitiateCreditPurchase": "No se pudo iniciar la compra de créditos: {error}",
     "failedToPurchaseCredits": "No se pudo comprar créditos: {error}",
     "fileLoadError": "No se puede encontrar el flujo de trabajo en {fileName}",

src/locales/es/settings.json

@@ -119,6 +119,10 @@
       "Straight": "Recto"
     }
   },
+  "Comfy_Load3D_3DViewerEnable": {
+    "name": "Habilitar visor 3D (Beta)",
+    "tooltip": "Activa el visor 3D (Beta) para los nodos seleccionados. Esta función te permite visualizar e interactuar con modelos 3D directamente dentro del visor 3D a tamaño completo."
+  },
   "Comfy_Load3D_BackgroundColor": {
     "name": "Color de fondo inicial",
     "tooltip": "Controla el color de fondo predeterminado de la escena 3D. Esta configuración determina la apariencia del fondo cuando se crea un nuevo widget 3D, pero puede ajustarse individualmente para cada widget después de su creación."

src/locales/fr/commands.json

@@ -35,6 +35,9 @@
   "Comfy-Desktop_Restart": {
     "label": "Redémarrer"
   },
+  "Comfy_3DViewer_Open3DViewer": {
+    "label": "Ouvrir le visualiseur 3D (bêta) pour le nœud sélectionné"
+  },
   "Comfy_BrowseTemplates": {
     "label": "Parcourir les modèles"
   },
@@ -119,6 +122,9 @@
   "Comfy_Graph_ConvertToSubgraph": {
     "label": "Convertir la sélection en sous-graphe"
   },
+  "Comfy_Graph_ExitSubgraph": {
+    "label": "Quitter le sous-graphe"
+  },
   "Comfy_Graph_FitGroupToContents": {
     "label": "Ajuster le groupe au contenu"
   },

src/locales/fr/main.json

@@ -569,6 +569,10 @@
     "applyingTexture": "Application de la texture...",
     "backgroundColor": "Couleur de fond",
     "camera": "Caméra",
+    "cameraType": {
+      "orthographic": "Orthographique",
+      "perspective": "Perspective"
+    },
     "clearRecording": "Effacer l'enregistrement",
     "edgeThreshold": "Seuil de Bordure",
     "export": "Exportation",
@@ -589,6 +593,7 @@
       "wireframe": "Fil de fer"
     },
     "model": "Modèle",
+    "openIn3DViewer": "Ouvrir dans la visionneuse 3D",
     "previewOutput": "Aperçu de la sortie",
     "removeBackgroundImage": "Supprimer l'image de fond",
     "resizeNodeMatchOutput": "Redimensionner le nœud pour correspondre à la sortie",
@@ -599,8 +604,22 @@
     "switchCamera": "Changer de caméra",
     "switchingMaterialMode": "Changement de mode de matériau...",
     "upDirection": "Direction Haut",
+    "upDirections": {
+      "original": "Original"
+    },
     "uploadBackgroundImage": "Télécharger l'image de fond",
-    "uploadTexture": "Télécharger Texture"
+    "uploadTexture": "Télécharger Texture",
+    "viewer": {
+      "apply": "Appliquer",
+      "cameraSettings": "Paramètres de la caméra",
+      "cameraType": "Type de caméra",
+      "cancel": "Annuler",
+      "exportSettings": "Paramètres d’exportation",
+      "lightSettings": "Paramètres de l’éclairage",
+      "modelSettings": "Paramètres du modèle",
+      "sceneSettings": "Paramètres de la scène",
+      "title": "Visionneuse 3D (Bêta)"
+    }
   },
   "loadWorkflowWarning": {
     "coreNodesFromVersion": "Nécessite ComfyUI {version} :",
@@ -765,6 +784,7 @@
     "Desktop User Guide": "Guide de l'utilisateur de bureau",
     "Duplicate Current Workflow": "Dupliquer le flux de travail actuel",
     "Edit": "Éditer",
+    "Exit Subgraph": "Quitter le sous-graphe",
     "Export": "Exporter",
     "Export (API)": "Exporter (API)",
     "Fit Group To Contents": "Ajuster le groupe au contenu",
@@ -784,6 +804,7 @@
     "New": "Nouveau",
     "Next Opened Workflow": "Prochain flux de travail ouvert",
     "Open": "Ouvrir",
+    "Open 3D Viewer (Beta) for Selected Node": "Ouvrir le visualiseur 3D (bêta) pour le nœud sélectionné",
     "Open Custom Nodes Folder": "Ouvrir le dossier des nœuds personnalisés",
     "Open DevTools": "Ouvrir DevTools",
     "Open Inputs Folder": "Ouvrir le dossier des entrées",
@@ -1097,6 +1118,7 @@
   },
   "settingsCategories": {
     "3D": "3D",
+    "3DViewer": "Visionneuse 3D",
     "API Nodes": "Nœuds API",
     "About": "À Propos",
     "Appearance": "Apparence",
@@ -1157,7 +1179,7 @@
       "node": "Nœud",
       "panelControls": "Contrôles du panneau",
       "queue": "File d’attente",
-      "view": "Affichage",
+      "view": "Vue",
       "workflow": "Flux de travail"
     },
     "viewControls": "Contrôles d’affichage"
@@ -1573,6 +1595,7 @@
     "failedToExportModel": "Échec de l'exportation du modèle en {format}",
     "failedToFetchBalance": "Échec de la récupération du solde : {error}",
     "failedToFetchLogs": "Échec de la récupération des journaux du serveur",
+    "failedToInitializeLoad3dViewer": "Échec de l'initialisation du visualiseur 3D",
     "failedToInitiateCreditPurchase": "Échec de l'initiation de l'achat de crédits : {error}",
     "failedToPurchaseCredits": "Échec de l'achat de crédits : {error}",
     "fileLoadError": "Impossible de trouver le flux de travail dans {fileName}",

src/locales/fr/settings.json

@@ -119,6 +119,10 @@
       "Straight": "Droit"
     }
   },
+  "Comfy_Load3D_3DViewerEnable": {
+    "name": "Activer le visualiseur 3D (Bêta)",
+    "tooltip": "Active le visualiseur 3D (Bêta) pour les nœuds sélectionnés. Cette fonctionnalité vous permet de visualiser et d’interagir avec des modèles 3D directement dans le visualiseur 3D en taille réelle."
+  },
   "Comfy_Load3D_BackgroundColor": {
     "name": "Couleur de fond initiale",
     "tooltip": "Contrôle la couleur de fond par défaut de la scène 3D. Ce paramètre détermine l'apparence du fond lors de la création d'un nouveau widget 3D, mais peut être ajusté individuellement pour chaque widget après la création."

src/locales/ja/commands.json

@@ -35,6 +35,9 @@
   "Comfy-Desktop_Restart": {
     "label": "再起動"
   },
+  "Comfy_3DViewer_Open3DViewer": {
+    "label": "選択したノードの3Dビューアー（ベータ）を開く"
+  },
   "Comfy_BrowseTemplates": {
     "label": "テンプレートを参照"
   },
@@ -119,6 +122,9 @@
   "Comfy_Graph_ConvertToSubgraph": {
     "label": "選択範囲をサブグラフに変換"
   },
+  "Comfy_Graph_ExitSubgraph": {
+    "label": "サブグラフを終了"
+  },
   "Comfy_Graph_FitGroupToContents": {
     "label": "グループを内容に合わせて調整"
   },

src/locales/ja/main.json

@@ -569,6 +569,10 @@
     "applyingTexture": "テクスチャを適用中...",
     "backgroundColor": "背景色",
     "camera": "カメラ",
+    "cameraType": {
+      "orthographic": "オルソグラフィック",
+      "perspective": "パースペクティブ"
+    },
     "clearRecording": "録画をクリア",
     "edgeThreshold": "エッジ閾値",
     "export": "エクスポート",
@@ -589,6 +593,7 @@
       "wireframe": "ワイヤーフレーム"
     },
     "model": "モデル",
+    "openIn3DViewer": "3Dビューアで開く",
     "previewOutput": "出力のプレビュー",
     "removeBackgroundImage": "背景画像を削除",
     "resizeNodeMatchOutput": "ノードを出力に合わせてリサイズ",
@@ -599,8 +604,22 @@
     "switchCamera": "カメラを切り替える",
     "switchingMaterialMode": "マテリアルモードの切り替え中...",
     "upDirection": "上方向",
+    "upDirections": {
+      "original": "オリジナル"
+    },
     "uploadBackgroundImage": "背景画像をアップロード",
-    "uploadTexture": "テクスチャをアップロード"
+    "uploadTexture": "テクスチャをアップロード",
+    "viewer": {
+      "apply": "適用",
+      "cameraSettings": "カメラ設定",
+      "cameraType": "カメラタイプ",
+      "cancel": "キャンセル",
+      "exportSettings": "エクスポート設定",
+      "lightSettings": "ライト設定",
+      "modelSettings": "モデル設定",
+      "sceneSettings": "シーン設定",
+      "title": "3Dビューア（ベータ）"
+    }
   },
   "loadWorkflowWarning": {
     "coreNodesFromVersion": "ComfyUI {version} が必要です：",
@@ -765,6 +784,7 @@
     "Desktop User Guide": "デスクトップユーザーガイド",
     "Duplicate Current Workflow": "現在のワークフローを複製",
     "Edit": "編集",
+    "Exit Subgraph": "サブグラフを終了",
     "Export": "エクスポート",
     "Export (API)": "エクスポート (API)",
     "Fit Group To Contents": "グループを内容に合わせる",
@@ -784,6 +804,7 @@
     "New": "新規",
     "Next Opened Workflow": "次に開いたワークフロー",
     "Open": "開く",
+    "Open 3D Viewer (Beta) for Selected Node": "選択したノードの3Dビューアー（ベータ）を開く",
     "Open Custom Nodes Folder": "カスタムノードフォルダを開く",
     "Open DevTools": "DevToolsを開く",
     "Open Inputs Folder": "入力フォルダを開く",
@@ -1097,6 +1118,7 @@
   },
   "settingsCategories": {
     "3D": "3D",
+    "3DViewer": "3Dビューア",
     "API Nodes": "APIノード",
     "About": "情報",
     "Appearance": "外観",
@@ -1151,7 +1173,7 @@
   "shortcuts": {
     "essentials": "基本",
     "keyboardShortcuts": "キーボードショートカット",
-    "manageShortcuts": "ショートカット管理",
+    "manageShortcuts": "ショートカットの管理",
     "noKeybinding": "キー割り当てなし",
     "subcategories": {
       "node": "ノード",
@@ -1573,6 +1595,7 @@
     "failedToExportModel": "{format}としてモデルのエクスポートに失敗しました",
     "failedToFetchBalance": "残高の取得に失敗しました: {error}",
     "failedToFetchLogs": "サーバーログの取得に失敗しました",
+    "failedToInitializeLoad3dViewer": "3Dビューアの初期化に失敗しました",
     "failedToInitiateCreditPurchase": "クレジット購入の開始に失敗しました: {error}",
     "failedToPurchaseCredits": "クレジットの購入に失敗しました: {error}",
     "fileLoadError": "{fileName}でワークフローが見つかりません",

src/locales/ja/settings.json

@@ -119,6 +119,10 @@
       "Straight": "ストレート"
     }
   },
+  "Comfy_Load3D_3DViewerEnable": {
+    "name": "3Dビューアーを有効化（ベータ）",
+    "tooltip": "選択したノードで3Dビューアー（ベータ）を有効にします。この機能により、フルサイズの3Dビューアー内で3Dモデルを直接可視化し、操作できます。"
+  },
   "Comfy_Load3D_BackgroundColor": {
     "name": "初期背景色",
     "tooltip": "3Dシーンのデフォルト背景色を設定します。この設定は新しい3Dウィジェット作成時の背景の見た目を決定しますが、作成後に各ウィジェットごとに個別に調整できます。"

src/locales/ko/commands.json

@@ -35,6 +35,9 @@
   "Comfy-Desktop_Restart": {
     "label": "재시작"
   },
+  "Comfy_3DViewer_Open3DViewer": {
+    "label": "선택한 노드에 대해 3D 뷰어(베타) 열기"
+  },
   "Comfy_BrowseTemplates": {
     "label": "템플릿 탐색"
   },
@@ -119,6 +122,9 @@
   "Comfy_Graph_ConvertToSubgraph": {
     "label": "선택 영역을 서브그래프로 변환"
   },
+  "Comfy_Graph_ExitSubgraph": {
+    "label": "서브그래프 종료"
+  },
   "Comfy_Graph_FitGroupToContents": {
     "label": "그룹을 내용에 맞게 맞추기"
   },

src/locales/ko/main.json

@@ -569,6 +569,10 @@
     "applyingTexture": "텍스처 적용 중...",
     "backgroundColor": "배경색",
     "camera": "카메라",
+    "cameraType": {
+      "orthographic": "직교",
+      "perspective": "원근"
+    },
     "clearRecording": "녹화 지우기",
     "edgeThreshold": "엣지 임계값",
     "export": "내보내기",
@@ -589,6 +593,7 @@
       "wireframe": "와이어프레임"
     },
     "model": "모델",
+    "openIn3DViewer": "3D 뷰어에서 열기",
     "previewOutput": "출력 미리보기",
     "removeBackgroundImage": "배경 이미지 제거",
     "resizeNodeMatchOutput": "노드 크기를 출력에 맞추기",
@@ -599,8 +604,22 @@
     "switchCamera": "카메라 전환",
     "switchingMaterialMode": "재질 모드 전환 중...",
     "upDirection": "위 방향",
+    "upDirections": {
+      "original": "원본"
+    },
     "uploadBackgroundImage": "배경 이미지 업로드",
-    "uploadTexture": "텍스처 업로드"
+    "uploadTexture": "텍스처 업로드",
+    "viewer": {
+      "apply": "적용",
+      "cameraSettings": "카메라 설정",
+      "cameraType": "카메라 유형",
+      "cancel": "취소",
+      "exportSettings": "내보내기 설정",
+      "lightSettings": "조명 설정",
+      "modelSettings": "모델 설정",
+      "sceneSettings": "씬 설정",
+      "title": "3D 뷰어 (베타)"
+    }
   },
   "loadWorkflowWarning": {
     "coreNodesFromVersion": "ComfyUI {version} 이상 필요:",
@@ -765,6 +784,7 @@
     "Desktop User Guide": "데스크톱 사용자 가이드",
     "Duplicate Current Workflow": "현재 워크플로 복제",
     "Edit": "편집",
+    "Exit Subgraph": "서브그래프 종료",
     "Export": "내보내기",
     "Export (API)": "내보내기 (API)",
     "Fit Group To Contents": "그룹을 내용에 맞게 조정",
@@ -784,6 +804,7 @@
     "New": "새로 만들기",
     "Next Opened Workflow": "다음 열린 워크플로",
     "Open": "열기",
+    "Open 3D Viewer (Beta) for Selected Node": "선택한 노드에 대해 3D 뷰어(베타) 열기",
     "Open Custom Nodes Folder": "사용자 정의 노드 폴더 열기",
     "Open DevTools": "개발자 도구 열기",
     "Open Inputs Folder": "입력 폴더 열기",
@@ -808,7 +829,7 @@
     "Restart": "재시작",
     "Save": "저장",
     "Save As": "다른 이름으로 저장",
-    "Show Keybindings Dialog": "단축키 대화상자 표시",
+    "Show Keybindings Dialog": "키 바인딩 대화상자 표시",
     "Show Settings Dialog": "설정 대화상자 표시",
     "Sign Out": "로그아웃",
     "Toggle Bottom Panel": "하단 패널 전환",
@@ -1097,6 +1118,7 @@
   },
   "settingsCategories": {
     "3D": "3D",
+    "3DViewer": "3D뷰어",
     "API Nodes": "API 노드",
     "About": "정보",
     "Appearance": "모양",
@@ -1149,7 +1171,7 @@
     "Workflow": "워크플로"
   },
   "shortcuts": {
-    "essentials": "기본",
+    "essentials": "필수",
     "keyboardShortcuts": "키보드 단축키",
     "manageShortcuts": "단축키 관리",
     "noKeybinding": "단축키 없음",
@@ -1573,6 +1595,7 @@
     "failedToExportModel": "{format} 형식으로 모델 내보내기에 실패했습니다",
     "failedToFetchBalance": "잔액을 가져오지 못했습니다: {error}",
     "failedToFetchLogs": "서버 로그를 가져오는 데 실패했습니다",
+    "failedToInitializeLoad3dViewer": "3D 뷰어 초기화에 실패했습니다",
     "failedToInitiateCreditPurchase": "크레딧 구매를 시작하지 못했습니다: {error}",
     "failedToPurchaseCredits": "크레딧 구매에 실패했습니다: {error}",
     "fileLoadError": "{fileName}에서 워크플로를 찾을 수 없습니다",

src/locales/ko/settings.json

@@ -119,6 +119,10 @@
       "Straight": "직선"
     }
   },
+  "Comfy_Load3D_3DViewerEnable": {
+    "name": "3D 뷰어 활성화 (베타)",
+    "tooltip": "선택한 노드에 대해 3D 뷰어(베타)를 활성화합니다. 이 기능을 통해 전체 크기의 3D 뷰어에서 3D 모델을 직접 시각화하고 상호작용할 수 있습니다."
+  },
   "Comfy_Load3D_BackgroundColor": {
     "name": "초기 배경색",
     "tooltip": "3D 장면의 기본 배경색을 설정합니다. 이 설정은 새 3D 위젯이 생성될 때 배경의 모양을 결정하지만, 생성 후 각 위젯별로 개별적으로 조정할 수 있습니다."

src/locales/ru/commands.json

@@ -35,6 +35,9 @@
   "Comfy-Desktop_Restart": {
     "label": "Перезагрузить"
   },
+  "Comfy_3DViewer_Open3DViewer": {
+    "label": "Открыть 3D-просмотрщик (бета) для выбранного узла"
+  },
   "Comfy_BrowseTemplates": {
     "label": "Просмотр шаблонов"
   },
@@ -119,6 +122,9 @@
   "Comfy_Graph_ConvertToSubgraph": {
     "label": "Преобразовать выделенное в подграф"
   },
+  "Comfy_Graph_ExitSubgraph": {
+    "label": "Выйти из подграфа"
+  },
   "Comfy_Graph_FitGroupToContents": {
     "label": "Подогнать группу к содержимому"
   },
@@ -240,7 +246,7 @@
     "label": "Показать/скрыть основную нижнюю панель"
   },
   "Workspace_ToggleBottomPanelTab_shortcuts-view-controls": {
-    "label": "Показать/скрыть нижнюю панель управления просмотром"
+    "label": "Показать или скрыть нижнюю панель управления просмотром"
   },
   "Workspace_ToggleBottomPanel_Shortcuts": {
     "label": "Показать диалог клавиш"

src/locales/ru/main.json

@@ -569,6 +569,10 @@
     "applyingTexture": "Применение текстуры...",
     "backgroundColor": "Цвет фона",
     "camera": "Камера",
+    "cameraType": {
+      "orthographic": "Ортографическая",
+      "perspective": "Перспективная"
+    },
     "clearRecording": "Очистить запись",
     "edgeThreshold": "Пороговое значение края",
     "export": "Экспорт",
@@ -589,6 +593,7 @@
       "wireframe": "Каркас"
     },
     "model": "Модель",
+    "openIn3DViewer": "Открыть в 3D просмотрщике",
     "previewOutput": "Предварительный просмотр",
     "removeBackgroundImage": "Удалить фоновое изображение",
     "resizeNodeMatchOutput": "Изменить размер узла под вывод",
@@ -599,8 +604,22 @@
     "switchCamera": "Переключить камеру",
     "switchingMaterialMode": "Переключение режима материала...",
     "upDirection": "Направление Вверх",
+    "upDirections": {
+      "original": "Оригинал"
+    },
     "uploadBackgroundImage": "Загрузить фоновое изображение",
-    "uploadTexture": "Загрузить текстуру"
+    "uploadTexture": "Загрузить текстуру",
+    "viewer": {
+      "apply": "Применить",
+      "cameraSettings": "Настройки камеры",
+      "cameraType": "Тип камеры",
+      "cancel": "Отмена",
+      "exportSettings": "Настройки экспорта",
+      "lightSettings": "Настройки освещения",
+      "modelSettings": "Настройки модели",
+      "sceneSettings": "Настройки сцены",
+      "title": "3D Просмотрщик (Бета)"
+    }
   },
   "loadWorkflowWarning": {
     "coreNodesFromVersion": "Требуется ComfyUI {version}:",
@@ -765,6 +784,7 @@
     "Desktop User Guide": "Руководство пользователя для настольных ПК",
     "Duplicate Current Workflow": "Дублировать текущий рабочий процесс",
     "Edit": "Редактировать",
+    "Exit Subgraph": "Выйти из подграфа",
     "Export": "Экспортировать",
     "Export (API)": "Экспорт (API)",
     "Fit Group To Contents": "Подогнать группу под содержимое",
@@ -784,6 +804,7 @@
     "New": "Новый",
     "Next Opened Workflow": "Следующий открытый рабочий процесс",
     "Open": "Открыть",
+    "Open 3D Viewer (Beta) for Selected Node": "Открыть 3D-просмотрщик (бета) для выбранного узла",
     "Open Custom Nodes Folder": "Открыть папку пользовательских нод",
     "Open DevTools": "Открыть инструменты разработчика",
     "Open Inputs Folder": "Открыть папку входных данных",
@@ -1097,6 +1118,7 @@
   },
   "settingsCategories": {
     "3D": "3D",
+    "3DViewer": "3D-просмотрщик",
     "API Nodes": "API-узлы",
     "About": "О программе",
     "Appearance": "Внешний вид",
@@ -1152,7 +1174,7 @@
     "essentials": "Основные",
     "keyboardShortcuts": "Горячие клавиши",
     "manageShortcuts": "Управление горячими клавишами",
-    "noKeybinding": "Нет привязки клавиши",
+    "noKeybinding": "Нет сочетания клавиш",
     "subcategories": {
       "node": "Узел",
       "panelControls": "Управление панелью",
@@ -1573,6 +1595,7 @@
     "failedToExportModel": "Не удалось экспортировать модель как {format}",
     "failedToFetchBalance": "Не удалось получить баланс: {error}",
     "failedToFetchLogs": "Не удалось получить серверные логи",
+    "failedToInitializeLoad3dViewer": "Не удалось инициализировать 3D просмотрщик",
     "failedToInitiateCreditPurchase": "Не удалось начать покупку кредитов: {error}",
     "failedToPurchaseCredits": "Не удалось купить кредиты: {error}",
     "fileLoadError": "Не удалось найти рабочий процесс в {fileName}",

src/locales/ru/settings.json

@@ -119,6 +119,10 @@
       "Straight": "Прямой"
     }
   },
+  "Comfy_Load3D_3DViewerEnable": {
+    "name": "Включить 3D-просмотрщик (Бета)",
+    "tooltip": "Включает 3D-просмотрщик (Бета) для выбранных узлов. Эта функция позволяет визуализировать и взаимодействовать с 3D-моделями прямо в полноразмерном 3D-просмотрщике."
+  },
   "Comfy_Load3D_BackgroundColor": {
     "name": "Начальный цвет фона",
     "tooltip": "Управляет цветом фона по умолчанию для 3D-сцены. Этот параметр определяет внешний вид фона при создании нового 3D-виджета, но может быть изменён индивидуально для каждого виджета после создания."

src/locales/zh-TW/commands.json

@@ -35,6 +35,9 @@
   "Comfy-Desktop_Restart": {
     "label": "重新啟動"
   },
+  "Comfy_3DViewer_Open3DViewer": {
+    "label": "為選取的節點開啟 3D 檢視器（Beta）"
+  },
   "Comfy_BrowseTemplates": {
     "label": "瀏覽範本"
   },
@@ -119,6 +122,9 @@
   "Comfy_Graph_ConvertToSubgraph": {
     "label": "將選取內容轉換為子圖"
   },
+  "Comfy_Graph_ExitSubgraph": {
+    "label": "離開子圖"
+  },
   "Comfy_Graph_FitGroupToContents": {
     "label": "調整群組以符合內容"
   },

src/locales/zh-TW/main.json

@@ -569,6 +569,10 @@
     "applyingTexture": "正在套用材質貼圖...",
     "backgroundColor": "背景顏色",
     "camera": "相機",
+    "cameraType": {
+      "orthographic": "正交",
+      "perspective": "透視"
+    },
     "clearRecording": "清除錄影",
     "edgeThreshold": "邊緣閾值",
     "export": "匯出",
@@ -589,6 +593,7 @@
       "wireframe": "線框"
     },
     "model": "模型",
+    "openIn3DViewer": "在 3D 檢視器中開啟",
     "previewOutput": "預覽輸出",
     "removeBackgroundImage": "移除背景圖片",
     "resizeNodeMatchOutput": "調整節點以符合輸出",
@@ -599,8 +604,22 @@
     "switchCamera": "切換相機",
     "switchingMaterialMode": "正在切換材質模式...",
     "upDirection": "上方方向",
+    "upDirections": {
+      "original": "原始"
+    },
     "uploadBackgroundImage": "上傳背景圖片",
-    "uploadTexture": "上傳材質貼圖"
+    "uploadTexture": "上傳材質貼圖",
+    "viewer": {
+      "apply": "套用",
+      "cameraSettings": "相機設定",
+      "cameraType": "相機類型",
+      "cancel": "取消",
+      "exportSettings": "匯出設定",
+      "lightSettings": "燈光設定",
+      "modelSettings": "模型設定",
+      "sceneSettings": "場景設定",
+      "title": "3D 檢視器（測試版）"
+    }
   },
   "loadWorkflowWarning": {
     "coreNodesFromVersion": "需要 ComfyUI {version}：",
@@ -765,6 +784,7 @@
     "Desktop User Guide": "桌面應用程式使用指南",
     "Duplicate Current Workflow": "複製目前工作流程",
     "Edit": "編輯",
+    "Exit Subgraph": "離開子圖",
     "Export": "匯出",
     "Export (API)": "匯出（API）",
     "Fit Group To Contents": "群組貼合內容",
@@ -784,6 +804,7 @@
     "New": "新增",
     "Next Opened Workflow": "下一個已開啟的工作流程",
     "Open": "開啟",
+    "Open 3D Viewer (Beta) for Selected Node": "為選取的節點開啟 3D 檢視器（Beta 版）",
     "Open Custom Nodes Folder": "開啟自訂節點資料夾",
     "Open DevTools": "開啟開發者工具",
     "Open Inputs Folder": "開啟輸入資料夾",
@@ -1097,6 +1118,7 @@
   },
   "settingsCategories": {
     "3D": "3D",
+    "3DViewer": "3D 檢視器",
     "API Nodes": "API 節點",
     "About": "關於",
     "Appearance": "外觀",
@@ -1573,6 +1595,7 @@
     "failedToExportModel": "無法將模型匯出為 {format}",
     "failedToFetchBalance": "取得餘額失敗：{error}",
     "failedToFetchLogs": "無法取得伺服器日誌",
+    "failedToInitializeLoad3dViewer": "初始化 3D 檢視器失敗",
     "failedToInitiateCreditPurchase": "啟動點數購買失敗：{error}",
     "failedToPurchaseCredits": "購買點數失敗：{error}",
     "fileLoadError": "無法在 {fileName} 中找到工作流程",

src/locales/zh-TW/settings.json

@@ -119,6 +119,10 @@
       "Straight": "直線"
     }
   },
+  "Comfy_Load3D_3DViewerEnable": {
+    "name": "啟用 3D 檢視器（測試版）",
+    "tooltip": "為所選節點啟用 3D 檢視器（測試版）。此功能可讓您在全尺寸 3D 檢視器中直接瀏覽與互動 3D 模型。"
+  },
   "Comfy_Load3D_BackgroundColor": {
     "name": "初始背景顏色",
     "tooltip": "控制 3D 場景的預設背景顏色。此設定決定新建立 3D 元件時的背景外觀，但每個元件在建立後都可單獨調整。"

src/locales/zh/commands.json

@@ -35,6 +35,9 @@
   "Comfy-Desktop_Restart": {
     "label": "重启"
   },
+  "Comfy_3DViewer_Open3DViewer": {
+    "label": "為所選節點開啟 3D 檢視器（Beta 版）"
+  },
   "Comfy_BrowseTemplates": {
     "label": "浏览模板"
   },
@@ -72,7 +75,7 @@
     "label": "锁定视图"
   },
   "Comfy_Canvas_ToggleMinimap": {
-    "label": "画布切换小地图"
+    "label": "畫布切換小地圖"
   },
   "Comfy_Canvas_ToggleSelectedNodes_Bypass": {
     "label": "忽略/取消忽略选中节点"
@@ -119,6 +122,9 @@
   "Comfy_Graph_ConvertToSubgraph": {
     "label": "将选区转换为子图"
   },
+  "Comfy_Graph_ExitSubgraph": {
+    "label": "退出子圖"
+  },
   "Comfy_Graph_FitGroupToContents": {
     "label": "适应节点框到内容"
   },
@@ -237,13 +243,13 @@
     "label": "切换日志底部面板"
   },
   "Workspace_ToggleBottomPanelTab_shortcuts-essentials": {
-    "label": "切换基本下方面板"
+    "label": "切換基本下方面板"
   },
   "Workspace_ToggleBottomPanelTab_shortcuts-view-controls": {
-    "label": "切换检视控制底部面板"
+    "label": "切換檢視控制底部面板"
   },
   "Workspace_ToggleBottomPanel_Shortcuts": {
-    "label": "显示快捷键对话框"
+    "label": "顯示快捷鍵對話框"
   },
   "Workspace_ToggleFocusMode": {
     "label": "切换焦点模式"

src/locales/zh/main.json

@@ -410,7 +410,7 @@
     "resetView": "重置视图",
     "selectMode": "选择模式",
     "toggleLinkVisibility": "切换连线可见性",
-    "toggleMinimap": "切换小地图",
+    "toggleMinimap": "切換小地圖",
     "zoomIn": "放大",
     "zoomOut": "缩小"
   },
@@ -569,6 +569,10 @@
     "applyingTexture": "应用纹理中...",
     "backgroundColor": "背景颜色",
     "camera": "摄影机",
+    "cameraType": {
+      "orthographic": "正交",
+      "perspective": "透视"
+    },
     "clearRecording": "清除录制",
     "edgeThreshold": "边缘阈值",
     "export": "导出",
@@ -589,6 +593,7 @@
       "wireframe": "线框"
     },
     "model": "模型",
+    "openIn3DViewer": "在 3D 檢視器中開啟",
     "previewOutput": "预览输出",
     "removeBackgroundImage": "移除背景图片",
     "resizeNodeMatchOutput": "调整节点以匹配输出",
@@ -599,8 +604,22 @@
     "switchCamera": "切换摄影机类型",
     "switchingMaterialMode": "切换材质模式中...",
     "upDirection": "上方向",
+    "upDirections": {
+      "original": "原始"
+    },
     "uploadBackgroundImage": "上传背景图片",
-    "uploadTexture": "上传纹理"
+    "uploadTexture": "上传纹理",
+    "viewer": {
+      "apply": "套用",
+      "cameraSettings": "相機設定",
+      "cameraType": "相機類型",
+      "cancel": "取消",
+      "exportSettings": "匯出設定",
+      "lightSettings": "燈光設定",
+      "modelSettings": "模型設定",
+      "sceneSettings": "場景設定",
+      "title": "3D 檢視器（測試版）"
+    }
   },
   "loadWorkflowWarning": {
     "coreNodesFromVersion": "需要 ComfyUI {version}：",
@@ -746,7 +765,7 @@
     "Bypass/Unbypass Selected Nodes": "忽略/取消忽略选定节点",
     "Canvas Toggle Link Visibility": "切换连线可见性",
     "Canvas Toggle Lock": "切换视图锁定",
-    "Canvas Toggle Minimap": "画布切换小地图",
+    "Canvas Toggle Minimap": "畫布切換小地圖",
     "Check for Updates": "检查更新",
     "Clear Pending Tasks": "清除待处理任务",
     "Clear Workflow": "清除工作流",
@@ -765,6 +784,7 @@
     "Desktop User Guide": "桌面端用户指南",
     "Duplicate Current Workflow": "复制当前工作流",
     "Edit": "编辑",
+    "Exit Subgraph": "退出子圖",
     "Export": "导出",
     "Export (API)": "导出 (API)",
     "Fit Group To Contents": "适应组内容",
@@ -784,6 +804,7 @@
     "New": "新建",
     "Next Opened Workflow": "下一个打开的工作流",
     "Open": "打开",
+    "Open 3D Viewer (Beta) for Selected Node": "為所選節點開啟 3D 檢視器（Beta 版）",
     "Open Custom Nodes Folder": "打开自定义节点文件夹",
     "Open DevTools": "打开开发者工具",
     "Open Inputs Folder": "打开输入文件夹",
@@ -808,21 +829,21 @@
     "Restart": "重启",
     "Save": "保存",
     "Save As": "另存为",
-    "Show Keybindings Dialog": "显示快捷键对话框",
+    "Show Keybindings Dialog": "顯示快捷鍵對話框",
     "Show Settings Dialog": "显示设置对话框",
     "Sign Out": "退出登录",
     "Toggle Bottom Panel": "切换底部面板",
-    "Toggle Essential Bottom Panel": "切换基本下方面板",
+    "Toggle Essential Bottom Panel": "切換基本下方面板",
     "Toggle Focus Mode": "切换专注模式",
     "Toggle Logs Bottom Panel": "切换日志底部面板",
-    "Toggle Model Library Sidebar": "切换模型库侧边栏",
-    "Toggle Node Library Sidebar": "切换节点库侧边栏",
-    "Toggle Queue Sidebar": "切换队列侧边栏",
+    "Toggle Model Library Sidebar": "切換模型庫側邊欄",
+    "Toggle Node Library Sidebar": "切換節點庫側邊欄",
+    "Toggle Queue Sidebar": "切換佇列側邊欄",
     "Toggle Search Box": "切换搜索框",
     "Toggle Terminal Bottom Panel": "切换终端底部面板",
     "Toggle Theme (Dark/Light)": "切换主题（暗/亮）",
-    "Toggle View Controls Bottom Panel": "切换检视控制下方面板",
-    "Toggle Workflows Sidebar": "切换工作流程侧边栏",
+    "Toggle View Controls Bottom Panel": "切換檢視控制下方面板",
+    "Toggle Workflows Sidebar": "切換工作流程側邊欄",
     "Toggle the Custom Nodes Manager": "切换自定义节点管理器",
     "Toggle the Custom Nodes Manager Progress Bar": "切换自定义节点管理器进度条",
     "Undo": "撤销",
@@ -1097,6 +1118,7 @@
   },
   "settingsCategories": {
     "3D": "3D",
+    "3DViewer": "3D 檢視器",
     "API Nodes": "API 节点",
     "About": "关于",
     "Appearance": "外观",
@@ -1149,7 +1171,7 @@
     "Workflow": "工作流"
   },
   "shortcuts": {
-    "essentials": "基本",
+    "essentials": "基本功能",
     "keyboardShortcuts": "鍵盤快捷鍵",
     "manageShortcuts": "管理快捷鍵",
     "noKeybinding": "無快捷鍵",
@@ -1573,6 +1595,7 @@
     "failedToExportModel": "无法将模型导出为 {format}",
     "failedToFetchBalance": "获取余额失败：{error}",
     "failedToFetchLogs": "无法获取服务器日志",
+    "failedToInitializeLoad3dViewer": "初始化 3D 檢視器失敗",
     "failedToInitiateCreditPurchase": "发起积分购买失败：{error}",
     "failedToPurchaseCredits": "购买积分失败：{error}",
     "fileLoadError": "无法在 {fileName} 中找到工作流",

src/locales/zh/settings.json

@@ -119,6 +119,10 @@
       "Straight": "直角线"
     }
   },
+  "Comfy_Load3D_3DViewerEnable": {
+    "name": "啟用 3D 檢視器（測試版）",
+    "tooltip": "為所選節點啟用 3D 檢視器（測試版）。此功能可讓您直接在全尺寸 3D 檢視器中瀏覽並互動 3D 模型。"
+  },
   "Comfy_Load3D_BackgroundColor": {
     "name": "初始背景颜色",
     "tooltip": "控制3D场景的默认背景颜色。此设置决定新建3D组件时的背景外观，但每个组件在创建后都可以单独调整。"

src/schemas/apiSchema.ts

@@ -489,6 +489,7 @@ const zSettings = z.object({
   'Comfy.Load3D.LightIntensityMinimum': z.number(),
   'Comfy.Load3D.LightAdjustmentIncrement': z.number(),
   'Comfy.Load3D.CameraType': z.enum(['perspective', 'orthographic']),
+  'Comfy.Load3D.3DViewerEnable': z.boolean(),
   'pysssss.SnapToGrid': z.boolean(),
   /** VHS setting is used for queue video preview support. */
   'VHS.AdvancedPreviews': z.string(),

src/scripts/app.ts

@@ -385,8 +385,15 @@ export class ComfyApp {
   static pasteFromClipspace(node: LGraphNode) {
     if (ComfyApp.clipspace) {
       // image paste
-      const combinedImgSrc =
-        ComfyApp.clipspace.imgs?.[ComfyApp.clipspace.combinedIndex].src
+      let combinedImgSrc: string | undefined
+      if (
+        ComfyApp.clipspace.combinedIndex !== undefined &&
+        ComfyApp.clipspace.imgs &&
+        ComfyApp.clipspace.combinedIndex < ComfyApp.clipspace.imgs.length
+      ) {
+        combinedImgSrc =
+          ComfyApp.clipspace.imgs[ComfyApp.clipspace.combinedIndex].src
+      }
       if (ComfyApp.clipspace.imgs && node.imgs) {
         if (node.images && ComfyApp.clipspace.images) {
           if (ComfyApp.clipspace['img_paste_mode'] == 'selected') {

src/services/keybindingService.ts

@@ -1,5 +1,6 @@
 import { CORE_KEYBINDINGS } from '@/constants/coreKeybindings'
 import { useCommandStore } from '@/stores/commandStore'
+import { useDialogStore } from '@/stores/dialogStore'
 import {
   KeyComboImpl,
   KeybindingImpl,
@@ -11,6 +12,7 @@ export const useKeybindingService = () => {
   const keybindingStore = useKeybindingStore()
   const commandStore = useCommandStore()
   const settingStore = useSettingStore()
+  const dialogStore = useDialogStore()
 
   const keybindHandler = async function (event: KeyboardEvent) {
     const keyCombo = KeyComboImpl.fromEvent(event)
@@ -32,6 +34,19 @@ export const useKeybindingService = () => {
 
     const keybinding = keybindingStore.getKeybinding(keyCombo)
     if (keybinding && keybinding.targetElementId !== 'graph-canvas') {
+      // Special handling for Escape key - let dialogs handle it first
+      if (
+        event.key === 'Escape' &&
+        !event.ctrlKey &&
+        !event.altKey &&
+        !event.metaKey
+      ) {
+        // If dialogs are open, don't execute the keybinding - let the dialog handle it
+        if (dialogStore.dialogStack.length > 0) {
+          return
+        }
+      }
+
       // Prevent default browser behavior first, then execute the command
       event.preventDefault()
       await commandStore.execute(keybinding.commandId)

src/services/load3dService.ts

@@ -1,12 +1,16 @@
 import { toRaw } from 'vue'
 
+import { useLoad3dViewer } from '@/composables/useLoad3dViewer'
 import Load3d from '@/extensions/core/load3d/Load3d'
 import Load3dAnimation from '@/extensions/core/load3d/Load3dAnimation'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { NodeId } from '@/schemas/comfyWorkflowSchema'
 import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 
 type Load3dReadyCallback = (load3d: Load3d | Load3dAnimation) => void
 
+const viewerInstances = new Map<NodeId, any>()
+
 export class Load3dService {
   private static instance: Load3dService
   private nodeToLoad3dMap = new Map<LGraphNode, Load3d | Load3dAnimation>()
@@ -126,6 +130,110 @@ export class Load3dService {
     }
     this.pendingCallbacks.clear()
   }
+
+  getOrCreateViewer(node: LGraphNode) {
+    if (!viewerInstances.has(node.id)) {
+      viewerInstances.set(node.id, useLoad3dViewer(node))
+    }
+
+    return viewerInstances.get(node.id)
+  }
+
+  removeViewer(node: LGraphNode) {
+    const viewer = viewerInstances.get(node.id)
+
+    if (viewer) {
+      viewer.cleanup()
+    }
+
+    viewerInstances.delete(node.id)
+  }
+
+  async copyLoad3dState(source: Load3d, target: Load3d | Load3dAnimation) {
+    const sourceModel = source.modelManager.currentModel
+
+    if (sourceModel) {
+      const modelClone = sourceModel.clone()
+
+      target.getModelManager().currentModel = modelClone
+      target.getSceneManager().scene.add(modelClone)
+
+      target.getModelManager().materialMode =
+        source.getModelManager().materialMode
+
+      target.getModelManager().currentUpDirection =
+        source.getModelManager().currentUpDirection
+
+      target.setMaterialMode(source.getModelManager().materialMode)
+      target.setUpDirection(source.getModelManager().currentUpDirection)
+
+      if (source.getModelManager().appliedTexture) {
+        target.getModelManager().appliedTexture =
+          source.getModelManager().appliedTexture
+      }
+    }
+
+    const sourceCameraType = source.getCurrentCameraType()
+    const sourceCameraState = source.getCameraState()
+
+    target.toggleCamera(sourceCameraType)
+    target.setCameraState(sourceCameraState)
+
+    target.setBackgroundColor(source.getSceneManager().currentBackgroundColor)
+
+    target.toggleGrid(source.getSceneManager().gridHelper.visible)
+
+    const sourceBackgroundInfo = source
+      .getSceneManager()
+      .getCurrentBackgroundInfo()
+    if (sourceBackgroundInfo.type === 'image') {
+      const sourceNode = this.getNodeByLoad3d(source)
+      const backgroundPath = sourceNode?.properties?.[
+        'Background Image'
+      ] as string
+      if (backgroundPath) {
+        await target.setBackgroundImage(backgroundPath)
+      }
+    }
+
+    target.setLightIntensity(
+      source.getLightingManager().lights[1]?.intensity || 1
+    )
+
+    if (sourceCameraType === 'perspective') {
+      target.setFOV(source.getCameraManager().perspectiveCamera.fov)
+    }
+
+    const sourceNode = this.getNodeByLoad3d(source)
+    if (sourceNode?.properties?.['Edge Threshold']) {
+      target.setEdgeThreshold(sourceNode.properties['Edge Threshold'] as number)
+    }
+  }
+
+  handleViewportRefresh(load3d: Load3d | null) {
+    if (!load3d) return
+
+    load3d.handleResize()
+
+    const currentType = load3d.getCurrentCameraType()
+
+    load3d.toggleCamera(
+      currentType === 'perspective' ? 'orthographic' : 'perspective'
+    )
+    load3d.toggleCamera(currentType)
+
+    load3d.getControlsManager().controls.update()
+  }
+
+  async handleViewerClose(node: LGraphNode) {
+    const viewer = useLoad3dService().getOrCreateViewer(node)
+
+    if (viewer.needApplyChanges.value) {
+      await viewer.applyChanges()
+    }
+
+    useLoad3dService().removeViewer(node)
+  }
 }
 
 export const useLoad3dService = () => {

src/utils/litegraphUtil.ts

@@ -239,3 +239,11 @@ function compressSubgraphWidgetInputSlots(
     compressSubgraphWidgetInputSlots(subgraph.definitions?.subgraphs, visited)
   }
 }
+
+export function isLoad3dNode(node: LGraphNode) {
+  return (
+    node &&
+    node.type &&
+    (node.type === 'Load3D' || node.type === 'Load3DAnimation')
+  )
+}

tests-ui/tests/composables/useLoad3dViewer.test.ts

@@ -0,0 +1,606 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+
+import { useLoad3dViewer } from '@/composables/useLoad3dViewer'
+import Load3d from '@/extensions/core/load3d/Load3d'
+import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
+import { useLoad3dService } from '@/services/load3dService'
+import { useToastStore } from '@/stores/toastStore'
+
+vi.mock('@/services/load3dService', () => ({
+  useLoad3dService: vi.fn()
+}))
+
+vi.mock('@/stores/toastStore', () => ({
+  useToastStore: vi.fn()
+}))
+
+vi.mock('@/extensions/core/load3d/Load3dUtils', () => ({
+  default: {
+    uploadFile: vi.fn()
+  }
+}))
+
+vi.mock('@/i18n', () => ({
+  t: vi.fn((key) => key)
+}))
+
+vi.mock('@/extensions/core/load3d/Load3d', () => ({
+  default: vi.fn()
+}))
+
+describe('useLoad3dViewer', () => {
+  let mockLoad3d: any
+  let mockSourceLoad3d: any
+  let mockLoad3dService: any
+  let mockToastStore: any
+  let mockNode: any
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+
+    mockNode = {
+      properties: {
+        'Background Color': '#282828',
+        'Show Grid': true,
+        'Camera Type': 'perspective',
+        FOV: 75,
+        'Light Intensity': 1,
+        'Camera Info': null,
+        'Background Image': '',
+        'Up Direction': 'original',
+        'Material Mode': 'original',
+        'Edge Threshold': 85
+      },
+      graph: {
+        setDirtyCanvas: vi.fn()
+      }
+    } as any
+
+    mockLoad3d = {
+      setBackgroundColor: vi.fn(),
+      toggleGrid: vi.fn(),
+      toggleCamera: vi.fn(),
+      setFOV: vi.fn(),
+      setLightIntensity: vi.fn(),
+      setBackgroundImage: vi.fn().mockResolvedValue(undefined),
+      setUpDirection: vi.fn(),
+      setMaterialMode: vi.fn(),
+      setEdgeThreshold: vi.fn(),
+      exportModel: vi.fn().mockResolvedValue(undefined),
+      handleResize: vi.fn(),
+      updateStatusMouseOnViewer: vi.fn(),
+      getCameraState: vi.fn().mockReturnValue({
+        position: { x: 0, y: 0, z: 0 },
+        target: { x: 0, y: 0, z: 0 },
+        zoom: 1,
+        cameraType: 'perspective'
+      }),
+      forceRender: vi.fn(),
+      remove: vi.fn()
+    }
+
+    mockSourceLoad3d = {
+      getCurrentCameraType: vi.fn().mockReturnValue('perspective'),
+      getCameraState: vi.fn().mockReturnValue({
+        position: { x: 1, y: 1, z: 1 },
+        target: { x: 0, y: 0, z: 0 },
+        zoom: 1,
+        cameraType: 'perspective'
+      }),
+      sceneManager: {
+        currentBackgroundColor: '#282828',
+        gridHelper: { visible: true },
+        getCurrentBackgroundInfo: vi.fn().mockReturnValue({
+          type: 'color',
+          value: '#282828'
+        })
+      },
+      lightingManager: {
+        lights: [null, { intensity: 1 }]
+      },
+      cameraManager: {
+        perspectiveCamera: { fov: 75 }
+      },
+      modelManager: {
+        currentUpDirection: 'original',
+        materialMode: 'original'
+      },
+      setBackgroundImage: vi.fn().mockResolvedValue(undefined),
+      forceRender: vi.fn()
+    }
+
+    vi.mocked(Load3d).mockImplementation(() => mockLoad3d)
+
+    mockLoad3dService = {
+      copyLoad3dState: vi.fn().mockResolvedValue(undefined),
+      handleViewportRefresh: vi.fn(),
+      getLoad3d: vi.fn().mockReturnValue(mockSourceLoad3d)
+    }
+    vi.mocked(useLoad3dService).mockReturnValue(mockLoad3dService)
+
+    mockToastStore = {
+      addAlert: vi.fn()
+    }
+    vi.mocked(useToastStore).mockReturnValue(mockToastStore)
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  describe('initialization', () => {
+    it('should initialize with default values', () => {
+      const viewer = useLoad3dViewer(mockNode)
+
+      expect(viewer.backgroundColor.value).toBe('')
+      expect(viewer.showGrid.value).toBe(true)
+      expect(viewer.cameraType.value).toBe('perspective')
+      expect(viewer.fov.value).toBe(75)
+      expect(viewer.lightIntensity.value).toBe(1)
+      expect(viewer.backgroundImage.value).toBe('')
+      expect(viewer.hasBackgroundImage.value).toBe(false)
+      expect(viewer.upDirection.value).toBe('original')
+      expect(viewer.materialMode.value).toBe('original')
+      expect(viewer.edgeThreshold.value).toBe(85)
+    })
+
+    it('should initialize viewer with source Load3d state', async () => {
+      const viewer = useLoad3dViewer(mockNode)
+      const containerRef = document.createElement('div')
+
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+
+      expect(Load3d).toHaveBeenCalledWith(containerRef, {
+        disablePreview: true,
+        isViewerMode: true,
+        node: mockNode
+      })
+
+      expect(mockLoad3dService.copyLoad3dState).toHaveBeenCalledWith(
+        mockSourceLoad3d,
+        mockLoad3d
+      )
+
+      expect(viewer.cameraType.value).toBe('perspective')
+      expect(viewer.backgroundColor.value).toBe('#282828')
+      expect(viewer.showGrid.value).toBe(true)
+      expect(viewer.lightIntensity.value).toBe(1)
+      expect(viewer.fov.value).toBe(75)
+      expect(viewer.upDirection.value).toBe('original')
+      expect(viewer.materialMode.value).toBe('original')
+      expect(viewer.edgeThreshold.value).toBe(85)
+    })
+
+    it('should handle background image during initialization', async () => {
+      mockSourceLoad3d.sceneManager.getCurrentBackgroundInfo.mockReturnValue({
+        type: 'image',
+        value: ''
+      })
+      mockNode.properties['Background Image'] = 'test-image.jpg'
+
+      const viewer = useLoad3dViewer(mockNode)
+      const containerRef = document.createElement('div')
+
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+
+      expect(viewer.backgroundImage.value).toBe('test-image.jpg')
+      expect(viewer.hasBackgroundImage.value).toBe(true)
+    })
+
+    it('should handle initialization errors', async () => {
+      vi.mocked(Load3d).mockImplementationOnce(() => {
+        throw new Error('Load3d creation failed')
+      })
+
+      const viewer = useLoad3dViewer(mockNode)
+      const containerRef = document.createElement('div')
+
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+
+      expect(mockToastStore.addAlert).toHaveBeenCalledWith(
+        'toastMessages.failedToInitializeLoad3dViewer'
+      )
+    })
+  })
+
+  describe('state watchers', () => {
+    it('should update background color when state changes', async () => {
+      const viewer = useLoad3dViewer(mockNode)
+      const containerRef = document.createElement('div')
+
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+
+      viewer.backgroundColor.value = '#ff0000'
+      await nextTick()
+
+      expect(mockLoad3d.setBackgroundColor).toHaveBeenCalledWith('#ff0000')
+    })
+
+    it('should update grid visibility when state changes', async () => {
+      const viewer = useLoad3dViewer(mockNode)
+      const containerRef = document.createElement('div')
+
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+
+      viewer.showGrid.value = false
+      await nextTick()
+
+      expect(mockLoad3d.toggleGrid).toHaveBeenCalledWith(false)
+    })
+
+    it('should update camera type when state changes', async () => {
+      const viewer = useLoad3dViewer(mockNode)
+      const containerRef = document.createElement('div')
+
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+
+      viewer.cameraType.value = 'orthographic'
+      await nextTick()
+
+      expect(mockLoad3d.toggleCamera).toHaveBeenCalledWith('orthographic')
+    })
+
+    it('should update FOV when state changes', async () => {
+      const viewer = useLoad3dViewer(mockNode)
+      const containerRef = document.createElement('div')
+
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+
+      viewer.fov.value = 90
+      await nextTick()
+
+      expect(mockLoad3d.setFOV).toHaveBeenCalledWith(90)
+    })
+
+    it('should update light intensity when state changes', async () => {
+      const viewer = useLoad3dViewer(mockNode)
+      const containerRef = document.createElement('div')
+
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+
+      viewer.lightIntensity.value = 2
+      await nextTick()
+
+      expect(mockLoad3d.setLightIntensity).toHaveBeenCalledWith(2)
+    })
+
+    it('should update background image when state changes', async () => {
+      const viewer = useLoad3dViewer(mockNode)
+      const containerRef = document.createElement('div')
+
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+
+      viewer.backgroundImage.value = 'new-bg.jpg'
+      await nextTick()
+
+      expect(mockLoad3d.setBackgroundImage).toHaveBeenCalledWith('new-bg.jpg')
+      expect(viewer.hasBackgroundImage.value).toBe(true)
+    })
+
+    it('should update up direction when state changes', async () => {
+      const viewer = useLoad3dViewer(mockNode)
+      const containerRef = document.createElement('div')
+
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+
+      viewer.upDirection.value = '+y'
+      await nextTick()
+
+      expect(mockLoad3d.setUpDirection).toHaveBeenCalledWith('+y')
+    })
+
+    it('should update material mode when state changes', async () => {
+      const viewer = useLoad3dViewer(mockNode)
+      const containerRef = document.createElement('div')
+
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+
+      viewer.materialMode.value = 'wireframe'
+      await nextTick()
+
+      expect(mockLoad3d.setMaterialMode).toHaveBeenCalledWith('wireframe')
+    })
+
+    it('should update edge threshold when state changes', async () => {
+      const viewer = useLoad3dViewer(mockNode)
+      const containerRef = document.createElement('div')
+
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+
+      viewer.edgeThreshold.value = 90
+      await nextTick()
+
+      expect(mockLoad3d.setEdgeThreshold).toHaveBeenCalledWith(90)
+    })
+
+    it('should handle watcher errors gracefully', async () => {
+      mockLoad3d.setBackgroundColor.mockImplementationOnce(() => {
+        throw new Error('Color update failed')
+      })
+
+      const viewer = useLoad3dViewer(mockNode)
+      const containerRef = document.createElement('div')
+
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+
+      viewer.backgroundColor.value = '#ff0000'
+      await nextTick()
+
+      expect(mockToastStore.addAlert).toHaveBeenCalledWith(
+        'toastMessages.failedToUpdateBackgroundColor'
+      )
+    })
+  })
+
+  describe('exportModel', () => {
+    it('should export model successfully', async () => {
+      const viewer = useLoad3dViewer(mockNode)
+      const containerRef = document.createElement('div')
+
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+
+      await viewer.exportModel('glb')
+
+      expect(mockLoad3d.exportModel).toHaveBeenCalledWith('glb')
+    })
+
+    it('should handle export errors', async () => {
+      mockLoad3d.exportModel.mockRejectedValueOnce(new Error('Export failed'))
+
+      const viewer = useLoad3dViewer(mockNode)
+      const containerRef = document.createElement('div')
+
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+
+      await viewer.exportModel('glb')
+
+      expect(mockToastStore.addAlert).toHaveBeenCalledWith(
+        'toastMessages.failedToExportModel'
+      )
+    })
+
+    it('should not export when load3d is not initialized', async () => {
+      const viewer = useLoad3dViewer(mockNode)
+
+      await viewer.exportModel('glb')
+
+      expect(mockLoad3d.exportModel).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('UI interaction methods', () => {
+    it('should handle resize', async () => {
+      const viewer = useLoad3dViewer(mockNode)
+      const containerRef = document.createElement('div')
+
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+
+      viewer.handleResize()
+
+      expect(mockLoad3d.handleResize).toHaveBeenCalled()
+    })
+
+    it('should handle mouse enter', async () => {
+      const viewer = useLoad3dViewer(mockNode)
+      const containerRef = document.createElement('div')
+
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+
+      viewer.handleMouseEnter()
+
+      expect(mockLoad3d.updateStatusMouseOnViewer).toHaveBeenCalledWith(true)
+    })
+
+    it('should handle mouse leave', async () => {
+      const viewer = useLoad3dViewer(mockNode)
+      const containerRef = document.createElement('div')
+
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+
+      viewer.handleMouseLeave()
+
+      expect(mockLoad3d.updateStatusMouseOnViewer).toHaveBeenCalledWith(false)
+    })
+  })
+
+  describe('restoreInitialState', () => {
+    it('should restore all properties to initial values', async () => {
+      const viewer = useLoad3dViewer(mockNode)
+      const containerRef = document.createElement('div')
+
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+
+      mockNode.properties['Background Color'] = '#ff0000'
+      mockNode.properties['Show Grid'] = false
+
+      viewer.restoreInitialState()
+
+      expect(mockNode.properties['Background Color']).toBe('#282828')
+      expect(mockNode.properties['Show Grid']).toBe(true)
+      expect(mockNode.properties['Camera Type']).toBe('perspective')
+      expect(mockNode.properties['FOV']).toBe(75)
+      expect(mockNode.properties['Light Intensity']).toBe(1)
+    })
+  })
+
+  describe('applyChanges', () => {
+    it('should apply all changes to source and node', async () => {
+      const viewer = useLoad3dViewer(mockNode)
+      const containerRef = document.createElement('div')
+
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+
+      viewer.backgroundColor.value = '#ff0000'
+      viewer.showGrid.value = false
+
+      const result = await viewer.applyChanges()
+
+      expect(result).toBe(true)
+      expect(mockNode.properties['Background Color']).toBe('#ff0000')
+      expect(mockNode.properties['Show Grid']).toBe(false)
+      expect(mockLoad3dService.copyLoad3dState).toHaveBeenCalledWith(
+        mockLoad3d,
+        mockSourceLoad3d
+      )
+      expect(mockSourceLoad3d.forceRender).toHaveBeenCalled()
+      expect(mockNode.graph.setDirtyCanvas).toHaveBeenCalledWith(true, true)
+    })
+
+    it('should handle background image during apply', async () => {
+      const viewer = useLoad3dViewer(mockNode)
+      const containerRef = document.createElement('div')
+
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+
+      viewer.backgroundImage.value = 'new-bg.jpg'
+
+      await viewer.applyChanges()
+
+      expect(mockSourceLoad3d.setBackgroundImage).toHaveBeenCalledWith(
+        'new-bg.jpg'
+      )
+    })
+
+    it('should return false when no load3d instances', async () => {
+      const viewer = useLoad3dViewer(mockNode)
+
+      const result = await viewer.applyChanges()
+
+      expect(result).toBe(false)
+    })
+  })
+
+  describe('refreshViewport', () => {
+    it('should refresh viewport', async () => {
+      const viewer = useLoad3dViewer(mockNode)
+      const containerRef = document.createElement('div')
+
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+
+      viewer.refreshViewport()
+
+      expect(mockLoad3dService.handleViewportRefresh).toHaveBeenCalledWith(
+        mockLoad3d
+      )
+    })
+  })
+
+  describe('handleBackgroundImageUpdate', () => {
+    it('should upload and set background image', async () => {
+      vi.mocked(Load3dUtils.uploadFile).mockResolvedValue('uploaded-image.jpg')
+
+      const viewer = useLoad3dViewer(mockNode)
+      const containerRef = document.createElement('div')
+
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+
+      const file = new File([''], 'test.jpg', { type: 'image/jpeg' })
+      await viewer.handleBackgroundImageUpdate(file)
+
+      expect(Load3dUtils.uploadFile).toHaveBeenCalledWith(file, '3d')
+      expect(viewer.backgroundImage.value).toBe('uploaded-image.jpg')
+      expect(viewer.hasBackgroundImage.value).toBe(true)
+    })
+
+    it('should use resource folder for upload', async () => {
+      mockNode.properties['Resource Folder'] = 'subfolder'
+      vi.mocked(Load3dUtils.uploadFile).mockResolvedValue('uploaded-image.jpg')
+
+      const viewer = useLoad3dViewer(mockNode)
+      const containerRef = document.createElement('div')
+
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+
+      const file = new File([''], 'test.jpg', { type: 'image/jpeg' })
+      await viewer.handleBackgroundImageUpdate(file)
+
+      expect(Load3dUtils.uploadFile).toHaveBeenCalledWith(file, '3d/subfolder')
+    })
+
+    it('should clear background image when file is null', async () => {
+      const viewer = useLoad3dViewer(mockNode)
+      const containerRef = document.createElement('div')
+
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+
+      viewer.backgroundImage.value = 'existing.jpg'
+      viewer.hasBackgroundImage.value = true
+
+      await viewer.handleBackgroundImageUpdate(null)
+
+      expect(viewer.backgroundImage.value).toBe('')
+      expect(viewer.hasBackgroundImage.value).toBe(false)
+    })
+
+    it('should handle upload errors', async () => {
+      vi.mocked(Load3dUtils.uploadFile).mockRejectedValueOnce(
+        new Error('Upload failed')
+      )
+
+      const viewer = useLoad3dViewer(mockNode)
+      const containerRef = document.createElement('div')
+
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+
+      const file = new File([''], 'test.jpg', { type: 'image/jpeg' })
+      await viewer.handleBackgroundImageUpdate(file)
+
+      expect(mockToastStore.addAlert).toHaveBeenCalledWith(
+        'toastMessages.failedToUploadBackgroundImage'
+      )
+    })
+  })
+
+  describe('cleanup', () => {
+    it('should clean up resources', async () => {
+      const viewer = useLoad3dViewer(mockNode)
+      const containerRef = document.createElement('div')
+
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+
+      viewer.cleanup()
+
+      expect(mockLoad3d.remove).toHaveBeenCalled()
+    })
+
+    it('should handle cleanup when not initialized', () => {
+      const viewer = useLoad3dViewer(mockNode)
+
+      expect(() => viewer.cleanup()).not.toThrow()
+    })
+  })
+
+  describe('edge cases', () => {
+    it('should handle missing container ref', async () => {
+      const viewer = useLoad3dViewer(mockNode)
+
+      await viewer.initializeViewer(null as any, mockSourceLoad3d)
+
+      expect(Load3d).not.toHaveBeenCalled()
+    })
+
+    it('should handle orthographic camera', async () => {
+      mockSourceLoad3d.getCurrentCameraType.mockReturnValue('orthographic')
+      mockSourceLoad3d.cameraManager = {} // No perspective camera
+
+      const viewer = useLoad3dViewer(mockNode)
+      const containerRef = document.createElement('div')
+
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+
+      expect(viewer.cameraType.value).toBe('orthographic')
+    })
+
+    it('should handle missing lights', async () => {
+      mockSourceLoad3d.lightingManager.lights = []
+
+      const viewer = useLoad3dViewer(mockNode)
+      const containerRef = document.createElement('div')
+
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+
+      expect(viewer.lightIntensity.value).toBe(1) // Default value
+    })
+  })
+})

tests-ui/tests/services/keybindingService.escape.test.ts

@@ -0,0 +1,202 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { CORE_KEYBINDINGS } from '@/constants/coreKeybindings'
+import { useKeybindingService } from '@/services/keybindingService'
+import { useCommandStore } from '@/stores/commandStore'
+import { useDialogStore } from '@/stores/dialogStore'
+import {
+  KeyComboImpl,
+  KeybindingImpl,
+  useKeybindingStore
+} from '@/stores/keybindingStore'
+
+// Mock stores
+vi.mock('@/stores/settingStore', () => ({
+  useSettingStore: vi.fn(() => ({
+    get: vi.fn(() => [])
+  }))
+}))
+
+vi.mock('@/stores/dialogStore', () => ({
+  useDialogStore: vi.fn(() => ({
+    dialogStack: []
+  }))
+}))
+
+describe('keybindingService - Escape key handling', () => {
+  let keybindingService: ReturnType<typeof useKeybindingService>
+  let mockCommandExecute: ReturnType<typeof vi.fn>
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    setActivePinia(createPinia())
+
+    // Mock command store execute
+    mockCommandExecute = vi.fn()
+    const commandStore = useCommandStore()
+    commandStore.execute = mockCommandExecute
+
+    // Reset dialog store mock to empty
+    vi.mocked(useDialogStore).mockReturnValue({
+      dialogStack: []
+    } as any)
+
+    keybindingService = useKeybindingService()
+    keybindingService.registerCoreKeybindings()
+  })
+
+  it('should register Escape key for ExitSubgraph command', () => {
+    const keybindingStore = useKeybindingStore()
+
+    // Check that the Escape keybinding exists in core keybindings
+    const escapeKeybinding = CORE_KEYBINDINGS.find(
+      (kb) =>
+        kb.combo.key === 'Escape' && kb.commandId === 'Comfy.Graph.ExitSubgraph'
+    )
+    expect(escapeKeybinding).toBeDefined()
+
+    // Check that it was registered in the store
+    const registeredBinding = keybindingStore.getKeybinding(
+      new KeyComboImpl({ key: 'Escape' })
+    )
+    expect(registeredBinding).toBeDefined()
+    expect(registeredBinding?.commandId).toBe('Comfy.Graph.ExitSubgraph')
+  })
+
+  it('should execute ExitSubgraph command when Escape is pressed', async () => {
+    const event = new KeyboardEvent('keydown', {
+      key: 'Escape',
+      bubbles: true,
+      cancelable: true
+    })
+
+    // Mock event methods
+    event.preventDefault = vi.fn()
+    event.composedPath = vi.fn(() => [document.body])
+
+    await keybindingService.keybindHandler(event)
+
+    expect(event.preventDefault).toHaveBeenCalled()
+    expect(mockCommandExecute).toHaveBeenCalledWith('Comfy.Graph.ExitSubgraph')
+  })
+
+  it('should not execute command when Escape is pressed with modifiers', async () => {
+    const event = new KeyboardEvent('keydown', {
+      key: 'Escape',
+      ctrlKey: true,
+      bubbles: true,
+      cancelable: true
+    })
+
+    event.preventDefault = vi.fn()
+    event.composedPath = vi.fn(() => [document.body])
+
+    await keybindingService.keybindHandler(event)
+
+    expect(mockCommandExecute).not.toHaveBeenCalled()
+  })
+
+  it('should not execute command when typing in input field', async () => {
+    const inputElement = document.createElement('input')
+    const event = new KeyboardEvent('keydown', {
+      key: 'Escape',
+      bubbles: true,
+      cancelable: true
+    })
+
+    event.preventDefault = vi.fn()
+    event.composedPath = vi.fn(() => [inputElement])
+
+    await keybindingService.keybindHandler(event)
+
+    expect(mockCommandExecute).not.toHaveBeenCalled()
+  })
+
+  it('should close dialogs when no keybinding is registered', async () => {
+    // Remove the Escape keybinding
+    const keybindingStore = useKeybindingStore()
+    keybindingStore.unsetKeybinding(
+      new KeybindingImpl({
+        commandId: 'Comfy.Graph.ExitSubgraph',
+        combo: { key: 'Escape' }
+      })
+    )
+
+    // Create a mock dialog
+    const dialog = document.createElement('dialog')
+    dialog.open = true
+    dialog.close = vi.fn()
+    document.body.appendChild(dialog)
+
+    const event = new KeyboardEvent('keydown', {
+      key: 'Escape',
+      bubbles: true,
+      cancelable: true
+    })
+
+    event.composedPath = vi.fn(() => [document.body])
+
+    await keybindingService.keybindHandler(event)
+
+    expect(dialog.close).toHaveBeenCalled()
+    expect(mockCommandExecute).not.toHaveBeenCalled()
+
+    // Cleanup
+    document.body.removeChild(dialog)
+  })
+
+  it('should allow user to rebind Escape key to different command', async () => {
+    const keybindingStore = useKeybindingStore()
+
+    // Add a user keybinding for Escape to a different command
+    keybindingStore.addUserKeybinding(
+      new KeybindingImpl({
+        commandId: 'Custom.Command',
+        combo: { key: 'Escape' }
+      })
+    )
+
+    const event = new KeyboardEvent('keydown', {
+      key: 'Escape',
+      bubbles: true,
+      cancelable: true
+    })
+
+    event.preventDefault = vi.fn()
+    event.composedPath = vi.fn(() => [document.body])
+
+    await keybindingService.keybindHandler(event)
+
+    expect(event.preventDefault).toHaveBeenCalled()
+    expect(mockCommandExecute).toHaveBeenCalledWith('Custom.Command')
+    expect(mockCommandExecute).not.toHaveBeenCalledWith(
+      'Comfy.Graph.ExitSubgraph'
+    )
+  })
+
+  it('should not execute Escape keybinding when dialogs are open', async () => {
+    // Mock dialog store to have open dialogs
+    vi.mocked(useDialogStore).mockReturnValue({
+      dialogStack: [{ key: 'test-dialog' }]
+    } as any)
+
+    // Re-create keybinding service to pick up new mock
+    keybindingService = useKeybindingService()
+
+    const event = new KeyboardEvent('keydown', {
+      key: 'Escape',
+      bubbles: true,
+      cancelable: true
+    })
+
+    event.preventDefault = vi.fn()
+    event.composedPath = vi.fn(() => [document.body])
+
+    await keybindingService.keybindHandler(event)
+
+    // Should not call preventDefault or execute command
+    expect(event.preventDefault).not.toHaveBeenCalled()
+    expect(mockCommandExecute).not.toHaveBeenCalled()
+  })
+})