feat(canvas): edge endpoint reconnect + proxmox container snap points
- Selected edge shows interactive dots at both endpoints; drag onto any handle (different snap point or different node) to reconnect. Edge follows the cursor live during drag; drop on empty space leaves edge unchanged. - Endpoint dots render in EdgeLabelRenderer above the node layer and walk the elementsFromPoint stack so the underlying handle wins over the dragged dot itself. - ProxmoxGroupNode in container mode now renders bottom_handles snap points (was always single 'bottom' handle), matching BaseNode. - New canvasStore.reconnectEdge action: swaps source/target/handles via normalizeHandle, snapshots history, marks dirty.
This commit is contained in:
@@ -44,6 +44,7 @@ interface CanvasState {
|
||||
updateNode: (id: string, data: Partial<NodeData>) => void
|
||||
deleteNode: (id: string) => void
|
||||
updateEdge: (id: string, data: Partial<EdgeData>) => void
|
||||
reconnectEdge: (id: string, connection: Connection) => void
|
||||
deleteEdge: (id: string) => void
|
||||
setProxmoxContainerMode: (proxmoxId: string, enabled: boolean) => void
|
||||
setNodeZIndex: (id: string, zIndex: number) => void
|
||||
@@ -292,6 +293,24 @@ export const useCanvasStore = create<CanvasState>((set) => ({
|
||||
hasUnsavedChanges: true,
|
||||
})),
|
||||
|
||||
reconnectEdge: (id, connection) =>
|
||||
set((state) => ({
|
||||
edges: state.edges.map((e) =>
|
||||
e.id === id
|
||||
? {
|
||||
...e,
|
||||
source: connection.source ?? e.source,
|
||||
target: connection.target ?? e.target,
|
||||
sourceHandle: normalizeHandle(connection.sourceHandle),
|
||||
targetHandle: normalizeHandle(connection.targetHandle),
|
||||
}
|
||||
: e
|
||||
),
|
||||
past: [...state.past.slice(-49), { nodes: state.nodes, edges: state.edges }],
|
||||
future: [],
|
||||
hasUnsavedChanges: true,
|
||||
})),
|
||||
|
||||
deleteEdge: (id) =>
|
||||
set((state) => ({
|
||||
edges: state.edges.filter((e) => e.id !== id),
|
||||
|
||||
Reference in New Issue
Block a user