+ {#each Array.from($nodeGraph.nodesToRender) as [nodeId, nodeToRender]}
+ {#if nodeToRender.nodeOrLayer.layer !== undefined}
+ {@const nodeMetadata = nodeToRender.metadata}
+ {@const layer = nodeToRender.nodeOrLayer.layer}
+ {@const clipPathId = String(Math.random()).substring(2)}
+ {@const layerAreaWidth = $nodeGraph.layerWidths.get(nodeToRender.metadata.nodeId) || 8}
+ {@const layerChainWidth = layer.chainWidth !== 0 ? layer.chainWidth + 0.5 : 0}
+ {@const description = (nodeMetadata.reference && $nodeGraph.nodeDescriptions.get(nodeMetadata.reference)) || undefined}
+
+ {#if nodeMetadata.errors}
+
{layer.errors}
+
{layer.errors}
+ {/if}
+
+ {#if $nodeGraph.thumbnails.has(nodeId)}
+ {@html $nodeGraph.thumbnails.get(nodeId)}
+ {/if}
+
+
+
+
+
+
+ {#if layer.sideInput}
+
+ {/if}
+
+
+ {nodeMetadata.displayName}
+
+
+
{
+ /* Button is purely visual, clicking is handled in NodeGraphMessage::PointerDown */
+ }}
+ tooltip={nodeMetadata.visible ? "Visible" : "Hidden"}
+ />
+
+
+
+ {/if}
+ {/each}
+
+ {#each Array.from($nodeGraph.nodesToRender) as [_, nodeToRender]}
+ {#each nodeToRender.wires as [wire, thick, dataType]}
+
+ {/each}
+ {/each}
+ {#each Array.from($nodeGraph.nodesToRender) as [nodeId, nodeToRender]}
+ {#if nodeToRender.nodeOrLayer.node !== undefined && $nodeGraph.visibleNodes.has(nodeId)}
+ {@const nodeMetadata = nodeToRender.metadata}
+ {@const node = nodeToRender.nodeOrLayer.node}
+ {@const exposedInputsOutputs = collectExposedInputsOutputs(node.inputs, node.outputs)}
+ {@const clipPathId = String(Math.random()).substring(2)}
+ {@const description = (nodeMetadata.reference && $nodeGraph.nodeDescriptions.get(nodeMetadata.reference)) || undefined}
+
+ {#if nodeMetadata.errors}
+
{node.errors}
+
{node.errors}
+ {/if}
+
+
+
+
+ {nodeMetadata.displayName}
+
+
+ {#if exposedInputsOutputs.length > 0}
+
+ {#each exposedInputsOutputs as [input, output]}
+
+
+ {input?.name ?? output?.name ?? ""}
+
+
+ {/each}
+
+ {/if}
+
+
+
+
+ {#each node.outputs as output}
+ {#if output !== undefined}
+
+ {/if}
+ {/each}
+
+
+
+ {/if}
+ {/each}
+
- {#each Array.from($nodeGraph.nodesToRender) as [nodeId, nodeToRender]}
- {#if nodeToRender.nodeOrLayer.layer !== undefined}
- {@const nodeMetadata = nodeToRender.metadata}
- {@const layer = nodeToRender.nodeOrLayer.layer}
- {@const clipPathId = String(Math.random()).substring(2)}
- {@const layerAreaWidth = $nodeGraph.layerWidths.get(nodeToRender.metadata.nodeId) || 8}
- {@const layerChainWidth = layer.chainWidth !== 0 ? layer.chainWidth + 0.5 : 0}
- {@const description = (nodeMetadata.reference && $nodeGraph.nodeDescriptions.get(nodeMetadata.reference)) || undefined}
-
- {#if nodeMetadata.errors}
-
{layer.errors}
-
{layer.errors}
- {/if}
-
- {#if $nodeGraph.thumbnails.has(nodeId)}
- {@html $nodeGraph.thumbnails.get(nodeId)}
- {/if}
-
-
-
-
-
-
- {#if layer.sideInput}
-
- {/if}
-
-
- {nodeMetadata.displayName}
-
-
-
{
- /* Button is purely visual, clicking is handled in NodeGraphMessage::PointerDown */
- }}
- tooltip={nodeMetadata.visible ? "Visible" : "Hidden"}
- />
-
-
-
- {/if}
- {/each}
-
-
-
-
- {#each Array.from($nodeGraph.nodesToRender) as [nodeId, nodeToRender]}
- {#if nodeToRender.nodeOrLayer.node !== undefined && $nodeGraph.visibleNodes.has(nodeId)}
- {@const nodeMetadata = nodeToRender.metadata}
- {@const node = nodeToRender.nodeOrLayer.node}
- {@const exposedInputsOutputs = collectExposedInputsOutputs(node.inputs, node.outputs)}
- {@const clipPathId = String(Math.random()).substring(2)}
- {@const description = (nodeMetadata.reference && $nodeGraph.nodeDescriptions.get(nodeMetadata.reference)) || undefined}
-
- {#if nodeMetadata.errors}
-
{node.errors}
-
{node.errors}
- {/if}
-
-
-
-
- {nodeMetadata.displayName}
-
-
- {#if exposedInputsOutputs.length > 0}
-
- {#each exposedInputsOutputs as [input, output]}
-
-
- {input?.name ?? output?.name ?? ""}
-
-
- {/each}
-
- {/if}
-
-
-
-
- {#each node.outputs as output}
- {#if output !== undefined}
-
- {/if}
- {/each}
-
-
-
- {/if}
- {/each}
-