{#if $nodeGraph.contextMenuInformation} {#if $nodeGraph.contextMenuInformation.contextMenuData.type === "CreateNode"} createNode(e.detail)} /> {:else if $nodeGraph.contextMenuInformation.contextMenuData.type === "ModifyNode"} { editor.handle.mergeSelectedNodes(); nodeGraph.closeContextMenu(); }} flush={true} /> {@const currentlyIsNode = $nodeGraph.contextMenuInformation.contextMenuData.data.currentlyIsNode} { if ($nodeGraph.contextMenuInformation?.contextMenuData.type === "ModifyNode") { editor.handle.setToNodeOrLayer($nodeGraph.contextMenuInformation.contextMenuData.data.nodeId, currentlyIsNode); } nodeGraph.closeContextMenu(); }} disabled={!$nodeGraph.contextMenuInformation.contextMenuData.data.canBeLayer} flush={true} /> {/if} {/if} {#if $nodeGraph.error}

{$nodeGraph.error.error} {$nodeGraph.error.error}

{/if} {#if $nodeGraph.clickTargets}

{/if}

{#if $nodeGraph.updateImportsExports} {#each $nodeGraph.updateImportsExports.imports as frontendOutput, index} {#if frontendOutput}

(hoveringImportIndex = index)} on:pointerleave={() => (hoveringImportIndex = undefined)} class="edit-import-export import" class:separator-bottom={index === 0 && $nodeGraph.updateImportsExports.addImportExport} class:separator-top={index === 1 && $nodeGraph.updateImportsExports.addImportExport} style:--offset-left={($nodeGraph.updateImportsExports.importPosition.x - 8) / 24} style:--offset-top={($nodeGraph.updateImportsExports.importPosition.y - 8) / 24 + index} > {#if editingNameImportIndex === index} e.key === "Enter" && setEditingImportName(e)} /> {:else}

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

{/if} {#if (hoveringImportIndex === index || editingNameImportIndex === index) && $nodeGraph.updateImportsExports.addImportExport} { /* Button is purely visual, clicking is handled in NodeGraphMessage::PointerDown */ }} /> {#if index > 0}

{/if} {/if}

{:else}

editor.handle.addPrimaryImport()} />

{/if} {/each} {#each $nodeGraph.updateImportsExports.exports as frontendInput, index} {#if frontendInput}

(hoveringExportIndex = index)} on:pointerleave={() => (hoveringExportIndex = undefined)} class="edit-import-export export" class:separator-bottom={index === 0 && $nodeGraph.updateImportsExports.addImportExport} class:separator-top={index === 1 && $nodeGraph.updateImportsExports.addImportExport} style:--offset-left={($nodeGraph.updateImportsExports.exportPosition.x - 8) / 24} style:--offset-top={($nodeGraph.updateImportsExports.exportPosition.y - 8) / 24 + index} > {#if (hoveringExportIndex === index || editingNameExportIndex === index) && $nodeGraph.updateImportsExports.addImportExport} {#if index > 0}

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

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

{/if}

{:else}

editor.handle.addPrimaryExport()} />

{/if} {/each} {#if $nodeGraph.updateImportsExports.addImportExport}

editor.handle.addSecondaryImport()} />

editor.handle.addSecondaryExport()} />

{/if} {#if $nodeGraph.reorderImportIndex !== undefined} {@const position = { x: Number($nodeGraph.updateImportsExports.importPosition.x), y: Number($nodeGraph.updateImportsExports.importPosition.y) + Number($nodeGraph.reorderImportIndex) * 24, }}

{/if} {#if $nodeGraph.reorderExportIndex !== undefined} {@const position = { x: Number($nodeGraph.updateImportsExports.exportPosition.x), y: Number($nodeGraph.updateImportsExports.exportPosition.y) + Number($nodeGraph.reorderExportIndex) * 24, }}

{/if} {/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 $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 */ }} tooltipLabel={node.visible ? "Hide" : "Show"} />

{/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}

{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}