initial commit
This commit is contained in:
nomadoor
@@ -0,0 +1,27 @@
|
||||
# 2025-10-18 — Dual Panel Subgraph Viewer
|
||||
|
||||
## Context
|
||||
- Requirement `000-dual-panel-subgraph` mandates a non-invasive JavaScript extension that opens subgraphs in a secondary panel while leaving the primary ComfyUI canvas usable.
|
||||
- Official ComfyUI guidance for custom nodes (backend lifecycle) and JavaScript extensions requires exporting `NODE_CLASS_MAPPINGS` and `WEB_DIRECTORY` from `__init__.py`, with frontend logic loaded from `js/*.js`.
|
||||
- The feature must work without altering core ComfyUI files and should gracefully handle focus, cleanup, and the absence of a subgraph.
|
||||
|
||||
## Decision
|
||||
- Provide a Python stub (`__init__.py`) that exposes `WEB_DIRECTORY = "./js"` and deliberately leaves `NODE_CLASS_MAPPINGS` empty because all functionality lives in the frontend.
|
||||
- Implement `js/dual_panel_subgraph.js` as an `app.registerExtension` module that:
|
||||
- Injects minimal CSS for a fixed right-side panel while keeping the main canvas interactive.
|
||||
- Wraps `LiteGraph.Subgraph` double-click and expand behaviors to toggle the secondary panel instead of navigating away.
|
||||
- Creates a dedicated `LGraphCanvas` bound to the node’s `subgraph`, with resize handling, focus switching, and cleanup on close or node removal.
|
||||
- Add Escape-key, header button, and repeated trigger handling to close the panel and restore the main canvas state.
|
||||
|
||||
## Consequences
|
||||
- No backend node schema is exposed yet; future Python nodes can be added without changing the JS extension contract.
|
||||
- Overlay approach avoids DOM restructuring but relies on LiteGraph APIs remaining stable; if ComfyUI updates those APIs we may need to revisit the wrappers.
|
||||
- The extension assumes the browser supports `ResizeObserver`; for older browsers we would need a polyfill or fallback.
|
||||
|
||||
## Verification & Iterations (2025-10-18)
|
||||
- **Vue frontend integration:** Reworked the extension to import `{ app }` from the packaged frontend and patch `LGraphCanvas.openSubgraph` rather than relying on legacy DOM double-click handlers. This resolved the `ReferenceError: app is not defined` thrown when the new Vue UI attempted to load the script.
|
||||
- **Canvas bootstrap stability:** Initial attempts to instantiate `LGraphCanvas` with the subgraph object triggered `dispatchEvent` errors when ComfyUI reused canvas elements. Updated the panel creation flow to create an empty canvas, call `setGraph(subgraph)`, and start rendering explicitly.
|
||||
- **DOM host tracking:** Opening additional workflow tabs replaced the underlying canvas container, causing stale padding classes and layout breakage. `ensureMainHosts()` now validates cached host elements with `isConnected`, resets stale references, and rebuilds the host list from the current canvas hierarchy.
|
||||
- **Event listener cleanup:** Touch focus handlers were previously registered with `{ passive: true }` but removed without matching options. Matching add/remove signatures prevents leaked listeners on Safari/iOS.
|
||||
- **Bug fix regressions:** A regressions introduced while refreshing the host calculation referenced an undefined `canvasElement`, preventing the panel from opening. Restored correct usage of `currentCanvas.parentElement`, eliminating the runtime `ReferenceError`.
|
||||
- **Observed backend 404s:** The Vue frontend logs `api/userdata/...` 404s when optional user assets (templates, CSS) are absent. These are expected in a clean setup and unrelated to the extension; documented here to avoid misattributing them to the panel logic.
|
||||
@@ -0,0 +1,82 @@
|
||||
# Feature Requirements: DualPanel Subgraph Viewer
|
||||
|
||||
**ID:** `000-dual-panel-subgraph`
|
||||
**Status:** Draft
|
||||
**Updated:** 2025-10-18
|
||||
|
||||
---
|
||||
|
||||
## 1. Purpose
|
||||
Enable users to open and edit **Subgraph** nodes in a secondary side panel whenever a subgraph is expanded (triggered by **double-clicking the node** or **clicking its expand icon**) without touching ComfyUI core frontend files. The implementation must stay compatible with the Vue/TypeScript frontend shipped via the `comfyui-frontend-package` pip distribution (verify baseline version during implementation).
|
||||
|
||||
---
|
||||
|
||||
## 2. Goals
|
||||
- Display the subgraph editor on the right side of the screen (dual-panel layout).
|
||||
- Support both expansion triggers:
|
||||
- Node double-click.
|
||||
- Click on the Subgraph expand icon (ComfyUI's built-in expand control).
|
||||
- Allow full node interaction (pan, zoom, connect, delete, add) within the side panel.
|
||||
- Maintain correct focus switching between main and subgraph canvases.
|
||||
- Cleanly remove the panel and restore state on close.
|
||||
- Implement entirely as a **non-invasive** JS extension with a minimal Python stub, targeting the modern Vue frontend.
|
||||
|
||||
---
|
||||
|
||||
## 3. UI Concept
|
||||
|
||||
- Right half: displays subgraph content in a secondary `LGraphCanvas`.
|
||||
- Left half: remains the main workflow canvas.
|
||||
- Only one panel may be open at a time (v1 limitation).
|
||||
|
||||
---
|
||||
|
||||
## 4. Basic Behavior
|
||||
|
||||
### Open
|
||||
- **Triggers:**
|
||||
- Double-click a Subgraph node
|
||||
- Click the node's expand icon
|
||||
- **Action:**
|
||||
- Create a right-side panel with a new `LGraphCanvas` rendering `node.subgraph`
|
||||
- Keep the main canvas visible and interactive
|
||||
|
||||
### Edit
|
||||
- Inside the panel: pan, zoom, move, connect, delete, and add nodes.
|
||||
- `LiteGraph.active_canvas` switches automatically on mouse enter/leave.
|
||||
|
||||
### Close
|
||||
- Triggered by a close button, Escape key, or second double-click/icon click.
|
||||
- Destroys the panel, clears canvas, removes event listeners, and restores main focus.
|
||||
|
||||
---
|
||||
|
||||
## 5. Implementation Notes
|
||||
|
||||
### Python (`__init__.py`)
|
||||
```
|
||||
WEB_DIRECTORY = "./js"
|
||||
NODE_CLASS_MAPPINGS = {}
|
||||
NODE_DISPLAY_NAME_MAPPINGS = {}
|
||||
JavaScript (js/dual_panel.js)
|
||||
Register via app.registerExtension("DualPanel.SubgraphViewer").
|
||||
```
|
||||
|
||||
- Integrate with the Vue-based workflow navigation (for example, patch `LGraphCanvas.openSubgraph` or use documented services) instead of relying on legacy DOM double-click listeners, because the Vue wrapper consumes those events.
|
||||
- Create and destroy a div panel containing an independent `LGraphCanvas`.
|
||||
- Handle cleanup and focus management safely.
|
||||
- Document any minimum `comfyui-frontend-package` (Vue frontend) version in the ADR when new APIs are required.
|
||||
- Avoid touching packaged frontend assets; ship changes solely through the extension auto-loader.
|
||||
|
||||
## 6. Edge Cases
|
||||
- Node lacks subgraph -> log warning, do nothing.
|
||||
- Opening a new panel closes any existing one.
|
||||
- Handle resize, rapid toggling, and LiteGraph version mismatches gracefully.
|
||||
|
||||
## 7. Acceptance Criteria
|
||||
|
||||
- Subgraph opens via double-click or expand icon.
|
||||
- User can edit nodes normally inside the side panel.
|
||||
- Focus switching works (main <-> panel).
|
||||
- Panel closes cleanly, no memory leaks or console errors.
|
||||
- Works on latest Chrome, Firefox, Edge.
|
||||
Reference in New Issue
Block a user