{`${dataTypeTooltip(outputMetadata)}\n\n${outputConnectedToText(outputMetadata)}`}

{#if $nodeGraph.contextMenuInformation} {#if typeof $nodeGraph.contextMenuInformation.contextMenuData === "string" && $nodeGraph.contextMenuInformation.contextMenuData === "CreateNode"} createNode(e.detail)} /> {:else if $nodeGraph.contextMenuInformation.contextMenuData && "compatibleType" in $nodeGraph.contextMenuInformation.contextMenuData} createNode(e.detail)} /> {:else} {@const contextMenuData = $nodeGraph.contextMenuInformation.contextMenuData} Display as { toggleLayerDisplay(false, contextMenuData.nodeId); }, }, { value: "layer", label: "Layer", action: () => { toggleLayerDisplay(true, contextMenuData.nodeId); }, }, ]} disabled={!canBeToggledBetweenNodeAndLayer(contextMenuData.nodeId)} /> editor.handle.mergeSelectedNodes()} /> {/if} {/if} {#if $nodeGraph.clickTargets}

{/if}

{#each $nodeGraph.imports as { outputMetadata, position }, index}

(hoveringImportIndex = index)} on:pointerleave={() => (hoveringImportIndex = undefined)} style:--offset-left={position.x / 24} style:--offset-top={position.y / 24} > {#if editingNameImportIndex == index} e.key === "Enter" && setEditingImportName(e)} /> {:else}

setEditingImportNameIndex(index, outputMetadata.name)}>{outputMetadata.name}

{/if} {#if hoveringImportIndex === index || editingNameImportIndex === index} { /* Button is purely visual, clicking is handled in NodeGraphMessage::PointerDown */ }} />

{/if}

{/each} {#if $nodeGraph.reorderImportIndex !== undefined} {@const position = { x: Number($nodeGraph.imports[0].position.x), y: Number($nodeGraph.imports[0].position.y) + Number($nodeGraph.reorderImportIndex) * 24, }}

{/if} {#if $nodeGraph.addImport !== undefined}

{ /* Button is purely visual, clicking is handled in NodeGraphMessage::PointerDown */ }} />

{/if} {#each $nodeGraph.exports as { inputMetadata, position }, index}

(hoveringExportIndex = index)} on:pointerleave={() => (hoveringExportIndex = undefined)} style:--offset-left={position.x / 24} style:--offset-top={position.y / 24} > {#if hoveringExportIndex === index || editingNameExportIndex === index}

{ /* Button is purely visual, clicking is handled in NodeGraphMessage::PointerDown */ }} /> {/if} {#if editingNameExportIndex === index} e.key === "Enter" && setEditingExportName(e)} /> {:else}

setEditingExportNameIndex(index, inputMetadata.name)}>{inputMetadata.name}

{/if}

{/each} {#if $nodeGraph.reorderExportIndex !== undefined} {@const position = { x: Number($nodeGraph.exports[0].position.x), y: Number($nodeGraph.exports[0].position.y) + Number($nodeGraph.reorderExportIndex) * 24, }}

{/if} {#if $nodeGraph.addExport !== undefined}

{ /* Button is purely visual, clicking is handled in NodeGraphMessage::PointerDown */ }} />

{/if}

{#each Array.from($nodeGraph.nodes) .filter(([nodeId, node]) => node.isLayer && $nodeGraph.visibleNodes.has(nodeId)) .map(([_, node], nodeIndex) => ({ node, nodeIndex })) as { node, nodeIndex } (nodeIndex)} {@const clipPathId = String(Math.random()).substring(2)} {@const stackDataInput = node.exposedInputs[0]} {@const layerAreaWidth = $nodeGraph.layerWidths.get(node.id) || 8} {@const layerChainWidth = $nodeGraph.chainWidths.get(node.id) || 0} {@const hasLeftInputWire = $nodeGraph.hasLeftInputWire.get(node.id) || false} {@const description = (node.reference && $nodeGraph.nodeDescriptions.get(node.reference)) || undefined}

{#if node.errors} {node.errors} {node.errors} {/if}

{#if $nodeGraph.thumbnails.has(node.id)} {@html $nodeGraph.thumbnails.get(node.id)} {/if} {#if node.primaryOutput} {/if}

{#if node.exposedInputs.length > 0}

{/if}

{node.displayName}

{ /* Button is purely visual, clicking is handled in NodeGraphMessage::PointerDown */ }} tooltip={node.visible ? "Visible" : "Hidden"} />

{/each}

{#each Array.from($nodeGraph.nodes) .filter(([nodeId, node]) => !node.isLayer && $nodeGraph.visibleNodes.has(nodeId)) .map(([_, node], nodeIndex) => ({ node, nodeIndex })) as { node, nodeIndex } (nodeIndex)} {@const exposedInputsOutputs = zipWithUndefined(node.exposedInputs, node.exposedOutputs)} {@const clipPathId = String(Math.random()).substring(2)} {@const description = (node.reference && $nodeGraph.nodeDescriptions.get(node.reference)) || undefined}

{#if node.errors} {node.errors} {node.errors} {/if}

{node.displayName}

{#if exposedInputsOutputs.length > 0}

{#each exposedInputsOutputs as [input, output]}

{input !== undefined ? input.name : output.name}

{/each}

{/if}

{#if node.primaryInput?.dataType} {/if} {#each node.exposedInputs as secondary, index} {#if index < node.exposedInputs.length} {/if} {/each}

{#if node.primaryOutput} {/if} {#each node.exposedOutputs as secondary} {/each}

{/each}

{#if $nodeGraph.box}

{/if}