mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-20 14:54:12 +00:00
7a11dc59b6
## Summary This PR refactors the Load3d 3D rendering system to remove its direct dependency on LGraphNode, making it a more decoupled and reusable component. The core rendering engine is now framework-agnostic and can be used in any context, not just within LiteGraph nodes. ## Changes 1. Decoupled Load3d from LGraphNode - Before: Load3d directly accessed node.widgets and node.properties - After: Load3d accepts optional parameters and callbacks, delegating node integration to the calling code 2. Event-Driven State Management - Removed internal storage from Load3d core components - Camera, controls, and view helper managers now emit cameraChanged events instead of directly storing state - External code (e.g., useLoad3d) listens to events and handles persistence to node.properties 3. Reactive Dimension Updates - Introduced getDimensions callback to support reactive dimension updates - Fixes the issue where dimension changes in vueNodes mode required a refresh - The callback is invoked on every render to get fresh width/height values 4. Improved Configuration System - Load3DConfiguration now accepts properties: Dictionary<NodeProperty | undefined> instead of custom storage interface - Uses official LiteGraph type definitions (Dictionary, NodeProperty) - More semantic parameter naming: storage → properties ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6707-refactor-remove-node-as-dependency-in-3d-node-2ab6d73d365081ffac1cdce354781ce8) by [Unito](https://www.unito.io)
92 lines
2.5 KiB
TypeScript
92 lines
2.5 KiB
TypeScript
import { nextTick } from 'vue'
|
|
|
|
import Load3D from '@/components/load3d/Load3D.vue'
|
|
import { useLoad3d } from '@/composables/useLoad3d'
|
|
import { createExportMenuItems } from '@/extensions/core/load3d/exportMenuHelper'
|
|
import Load3DConfiguration from '@/extensions/core/load3d/Load3DConfiguration'
|
|
import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
|
|
import type { IContextMenuValue } from '@/lib/litegraph/src/interfaces'
|
|
import { type CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
|
|
import { ComponentWidgetImpl, addWidget } from '@/scripts/domWidget'
|
|
import { useExtensionService } from '@/services/extensionService'
|
|
import { useLoad3dService } from '@/services/load3dService'
|
|
|
|
const inputSpec: CustomInputSpec = {
|
|
name: 'image',
|
|
type: 'Preview3D',
|
|
isPreview: true
|
|
}
|
|
|
|
useExtensionService().registerExtension({
|
|
name: 'Comfy.SaveGLB',
|
|
|
|
async beforeRegisterNodeDef(_nodeType, nodeData) {
|
|
if ('SaveGLB' === nodeData.name) {
|
|
// @ts-expect-error InputSpec is not typed correctly
|
|
nodeData.input.required.image = ['PREVIEW_3D']
|
|
}
|
|
},
|
|
|
|
getCustomWidgets() {
|
|
return {
|
|
PREVIEW_3D(node) {
|
|
const widget = new ComponentWidgetImpl({
|
|
node,
|
|
name: inputSpec.name,
|
|
component: Load3D,
|
|
inputSpec,
|
|
options: {}
|
|
})
|
|
|
|
widget.type = 'load3D'
|
|
|
|
addWidget(node, widget)
|
|
|
|
return { widget }
|
|
}
|
|
}
|
|
},
|
|
|
|
getNodeMenuItems(node: LGraphNode): (IContextMenuValue | null)[] {
|
|
// Only show menu items for SaveGLB nodes
|
|
if (node.constructor.comfyClass !== 'SaveGLB') return []
|
|
|
|
const load3d = useLoad3dService().getLoad3d(node)
|
|
if (!load3d) return []
|
|
|
|
return createExportMenuItems(load3d)
|
|
},
|
|
|
|
async nodeCreated(node) {
|
|
if (node.constructor.comfyClass !== 'SaveGLB') return
|
|
|
|
const [oldWidth, oldHeight] = node.size
|
|
|
|
node.setSize([Math.max(oldWidth, 400), Math.max(oldHeight, 550)])
|
|
|
|
await nextTick()
|
|
|
|
const onExecuted = node.onExecuted
|
|
|
|
node.onExecuted = function (message: any) {
|
|
onExecuted?.apply(this, arguments as any)
|
|
|
|
const fileInfo = message['3d'][0]
|
|
|
|
useLoad3d(node).waitForLoad3d((load3d) => {
|
|
const modelWidget = node.widgets?.find((w) => w.name === 'image')
|
|
|
|
if (load3d && modelWidget) {
|
|
const filePath = fileInfo['subfolder'] + '/' + fileInfo['filename']
|
|
|
|
modelWidget.value = filePath
|
|
|
|
const config = new Load3DConfiguration(load3d, node.properties)
|
|
|
|
config.configureForSaveMesh(fileInfo['type'], filePath)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
})
|