{ if (readonly) { return; } showEdgePanel = true; currentEdge = e.edge; }} onbeforeconnect={(edge: any) => normalizeEdgeBeforeConnect(edge)} ondelete={readonly ? undefined : onDelete} onclick={(e) => { if (readonly) { return; } const el = e.target as HTMLElement; if (el.classList.contains("svelte-flow__edge-interaction") || el.classList.contains('panel-content') || el.closest('.panel-content')){ return } showEdgePanel = false; currentEdge = null; }} defaultEdgeOptions={{ type: 'flow', markerEnd: { type: MarkerType.ArrowClosed, width: 20, height: 20 } }} > {#if showEdgePanel}

边属性设置

边条件设置

{#if currentEdge?.data?.managedByConditionNode}

分支：{currentEdge?.data?.branchLabel || currentEdge?.data?.branchId || '-'}

<div class="readonly-edge-tip">
                                    该连线由条件节点托管，条件表达式不可在边面板手动修改。
                                </div>
                            </div>
                        {:else}
                            <Textarea
                                rows={3}
                                placeholder="请输入边条件"
                                style="width: 100%"
                                value={asString(currentEdge?.data?.condition)}
                                onchange={(e)=>{
                                    if (currentEdge){
                                        updateEdgeData(currentEdge.id, {
                                            condition: (e.target as HTMLTextAreaElement)?.value || ''
                                        })
                                    }
                                }}
                            />
                        {/if}
                    </div>
                    <div class="setting-item" style="padding: 8px 0">
                        <Button
                            onclick={() => {
                                if (currentEdge?.id) {
                                    deleteEdge(currentEdge.id)
                                }
                                showEdgePanel = false;
                            }}
                        >
                            删除
                        </Button>

<Button
                            primary={true}
                            onclick={() => {
                                showEdgePanel = false;
                            }}
                        >
                            保存
                        </Button>
                    </div>
                </div>
            </Panel>
        {/if}
    </SvelteFlow>
    {#if nodePickerVisible}
        {#if pendingConnectionLine}
            <svg class="node-picker-connection-line" width="100%" height="100%">
                <FlowMarkerDefs id="tf-flow-inline-arrow-closed" />
                <FlowLinePath
                    path={pendingConnectionLine.path}
                    markerEnd="url(#tf-flow-inline-arrow-closed)"
                    animated={false}
                />
            </svg>
        {/if}
        <div
            class="node-picker-inline"
            style={inlineNodePickerStyle}
            bind:this={inlineNodePickerEl}
        >
            <NodePicker nodes={availableNodes} onSelect={handlePickerSelectNode} />
        </div>
    {/if}
    {#if !hideBottomDock}
    <div class="tf-bottom-dock">
        <div class="tf-unified-bar">
            
            <select
                class="tf-zoom-select tf-zoom-select-simple"
                value={zoomSelectValue}
                onchange={handleZoomSelect}
                aria-label="缩放比例"
            >
                {#each zoomOptions as opt}
                    <option value={String(opt)}>{opt}%</option>
                {/each}
                {#if !zoomOptions.includes(currentZoomPercent)}
                    <option value={String(currentZoomPercent)} selected>{currentZoomPercent}%</option>
                {/if}
            </select>

<button
                class="tf-bar-btn"
                onclick={fitViewCanvas}
                aria-label="适配视图"
                title="适配视图"
            >
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M7 7H10V5H5V10H7V7ZM14 5V7H17V10H19V5H14ZM17 17H14V19H19V14H17V17ZM7 14H5V19H10V17H7V14Z"></path>
                </svg>
            </button>

<button
                class="tf-bar-btn {canvasLocked ? 'tf-bar-btn-active' : ''}"
                onclick={toggleCanvasLock}
                aria-label={canvasLocked ? '解锁画布' : '锁定画布'}
                title={canvasLocked ? '解锁画布' : '锁定画布'}
            >
                {#if canvasLocked}
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M6 10V8C6 4.68629 8.68629 2 12 2C15.3137 2 18 4.68629 18 8V10H19C19.5523 10 20 10.4477 20 11V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V11C4 10.4477 4.44772 10 5 10H6ZM8 10H16V8C16 5.79086 14.2091 4 12 4C9.79086 4 8 5.79086 8 8V10Z"></path>
                    </svg>
                {:else}
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M7 10V8C7 5.23858 9.23858 3 12 3C14.7614 3 17 5.23858 17 8V10H20V22H4V10H7ZM9 10H15V8C15 6.34315 13.6569 5 12 5C10.3431 5 9 6.34315 9 8V10Z"></path>
                    </svg>
                {/if}
            </button>

<div class="tf-bar-divider"></div>

<Toolbar nodes={availableNodes} onSelectNode={handleToolbarSelectNode} />

</div>
        {#if onRunTest}
            <button
                class="tf-bar-run-btn"
                onclick={() => onRunTest?.()}
                aria-label="试运行"
                title="试运行"
            >
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M8 5V19L19 12L8 5Z"></path>
                </svg>
                试运行
            </button>
        {/if}
    </div>
    {/if}
</div>

.setting-title {
        margin: 10px 0;
        font-size: 12px;
        color: var(--tf-text-muted);
    }

.setting-item {
        display: flex;
        gap: 5px;
        align-items: center;
        justify-content: end;
    }

.readonly-edge-settings {
        width: 100%;
    }

.readonly-edge-branch {
        font-size: 12px;
        color: var(--tf-text-secondary);
        margin-bottom: 8px;
    }

.readonly-edge-tip {
        margin-top: 6px;
        font-size: 12px;
        color: var(--tf-text-muted);
    }

.node-picker-inline {
        position: absolute;
        z-index: 270;
        min-width: 300px;
        border: 1px solid var(--tf-border-color);
        border-radius: 12px;
        background: var(--tf-bg-surface);
        box-shadow: 0 14px 32px rgba(15, 23, 42, 0.2);
        padding: 8px;
        overflow: hidden;
    }

.node-picker-connection-line {
        position: absolute;
        inset: 0;
        z-index: 268;
        pointer-events: none;
    }

:global(.tf-canvas-locked .svelte-flow__pane),
    :global(.tf-canvas-locked .svelte-flow__nodes),
    :global(.tf-canvas-locked .svelte-flow__edges),
    :global(.tf-canvas-locked .svelte-flow__connectionline),
    :global(.tf-canvas-locked .svelte-flow__selection) {
        pointer-events: none !important;
    }
</style>