{ showEdgePanel = true; currentEdge = e.edge; }} onbeforeconnect={(edge) => { return { ...edge, id:genShortId(), } }} ondelete={onDelete} onclick={(e) => { 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={{ // animated: true, // label: 'edge label', markerEnd: { type: MarkerType.ArrowClosed, // color: 'red', width: 20, height: 20 } }} > {#if showEdgePanel}

边属性设置

边条件设置

{
                                if (currentEdge){
                                    updateEdgeData(currentEdge.id, {
                                        condition: e.target?.value
                                    })
                                }
                            }}
                        />
                    </div>
                    <div class="setting-item" style="padding: 8px 0">
                        <Button
                            onclick={() => {
                                deleteEdge(currentEdge?.id)
                                showEdgePanel = false;
                            }}
                        >
                            删除
                        </Button>

<Button
                            primary={true}
                            onclick={() => {
                                showEdgePanel = false;
                            }}
                        >
                            保存
                        </Button>
                    </div>
                </div>
            </Panel>
        {/if}
    </SvelteFlow>
    <Toolbar />
</div>

.setting-title {
        margin: 10px 0;
        font-size: 12px;
        color: #999;
    }

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