diff --git a/packages/react/src/components/EdgeWrapper/index.tsx b/packages/react/src/components/EdgeWrapper/index.tsx index c114c1b4..49a9c61b 100644 --- a/packages/react/src/components/EdgeWrapper/index.tsx +++ b/packages/react/src/components/EdgeWrapper/index.tsx @@ -215,6 +215,8 @@ export function EdgeWrapper({ type={edge.type} selected={edge.selected} animated={edge.animated} + selectable={isSelectable} + deletable={edge.deletable ?? true} label={edge.label} labelStyle={edge.labelStyle} labelShowBg={edge.labelShowBg} diff --git a/packages/react/src/components/NodeWrapper/index.tsx b/packages/react/src/components/NodeWrapper/index.tsx index b509824c..3768a6d2 100644 --- a/packages/react/src/components/NodeWrapper/index.tsx +++ b/packages/react/src/components/NodeWrapper/index.tsx @@ -209,6 +209,9 @@ export function NodeWrapper({ positionAbsoluteX={clampedPosition.x} positionAbsoluteY={clampedPosition.y} selected={node.selected} + selectable={isSelectable} + draggable={isDraggable} + deletable={node.deletable ?? true} isConnectable={isConnectable} sourcePosition={node.sourcePosition} targetPosition={node.targetPosition} diff --git a/packages/react/src/types/edges.ts b/packages/react/src/types/edges.ts index 21e4aa4e..76690161 100644 --- a/packages/react/src/types/edges.ts +++ b/packages/react/src/types/edges.ts @@ -100,7 +100,7 @@ export type EdgeTextProps = HTMLAttributes & */ export type EdgeProps = Pick< EdgeType, - 'id' | 'animated' | 'data' | 'style' | 'selected' | 'source' | 'target' + 'id' | 'animated' | 'data' | 'style' | 'selected' | 'source' | 'target' | 'selectable' | 'deletable' > & EdgePosition & EdgeLabelOptions & { diff --git a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte index 54fdf91f..e2fb0313 100644 --- a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte +++ b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte @@ -23,6 +23,7 @@ export let animated: $$Props['animated'] = false; export let selected: $$Props['selected'] = false; export let selectable: $$Props['selectable'] = undefined; + export let deletable: $$Props['deletable'] = undefined; export let hidden: $$Props['hidden'] = false; export let label: $$Props['label'] = undefined; export let labelStyle: $$Props['labelStyle'] = undefined; @@ -55,7 +56,7 @@ $: edgeComponent = $edgeTypes[edgeType] || BezierEdgeInternal; $: markerStartUrl = markerStart ? `url('#${getMarkerId(markerStart, $flowId)}')` : undefined; $: markerEndUrl = markerEnd ? `url('#${getMarkerId(markerEnd, $flowId)}')` : undefined; - $: isSelectable = selectable || ($elementsSelectable && typeof selectable === 'undefined'); + $: isSelectable = selectable ?? $elementsSelectable; const handleEdgeSelect = useHandleEdgeSelect(); @@ -114,6 +115,8 @@ {data} {style} {interactionWidth} + selectable={isSelectable} + deletable={deletable ?? true} type={edgeType} sourceHandleId={sourceHandle} targetHandleId={targetHandle} diff --git a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte index 7ba52792..a70fa7f4 100644 --- a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte +++ b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte @@ -22,6 +22,7 @@ export let draggable: $$Props['draggable'] = undefined; export let selectable: $$Props['selectable'] = undefined; export let connectable: $$Props['connectable'] = true; + export let deletable: $$Props['deletable'] = true; export let hidden: $$Props['hidden'] = false; export let dragging: boolean = false; export let resizeObserver: $$Props['resizeObserver'] = null; @@ -192,10 +193,13 @@ {data} {id} {selected} + {selectable} + {deletable} {sourcePosition} {targetPosition} {zIndex} {dragging} + {draggable} {dragHandle} type={nodeType} isConnectable={$connectableStore} diff --git a/packages/svelte/src/lib/components/NodeWrapper/types.ts b/packages/svelte/src/lib/components/NodeWrapper/types.ts index 842eb70b..56924ead 100644 --- a/packages/svelte/src/lib/components/NodeWrapper/types.ts +++ b/packages/svelte/src/lib/components/NodeWrapper/types.ts @@ -10,6 +10,7 @@ export type NodeWrapperProps = Pick< | 'dragging' | 'selected' | 'selectable' + | 'deletable' | 'style' | 'type' | 'sourcePosition' diff --git a/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte b/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte index 0fa2c273..5402fb4e 100644 --- a/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte +++ b/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte @@ -11,7 +11,8 @@ const { visibleEdges, edgesInitialized, - edges: { setDefaultOptions } + edges: { setDefaultOptions }, + elementsSelectable, } = useStore(); onMount(() => { @@ -33,7 +34,8 @@ style={edge.style} animated={edge.animated} selected={edge.selected} - selectable={edge.selectable} + selectable={edge.selectable ?? $elementsSelectable} + deletable={edge.deletable} hidden={edge.hidden} label={edge.label} labelStyle={edge.labelStyle} diff --git a/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte b/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte index 9aeb308d..ecc1aede 100644 --- a/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte +++ b/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte @@ -62,6 +62,7 @@ node.connectable || ($nodesConnectable && typeof node.connectable === 'undefined') )} + deletable={node.deletable ?? true} positionX={node.internals.positionAbsolute.x} positionY={node.internals.positionAbsolute.y} positionOriginX={posOrigin.x ?? 0} diff --git a/packages/svelte/src/lib/types/edges.ts b/packages/svelte/src/lib/types/edges.ts index a0d63433..b9700292 100644 --- a/packages/svelte/src/lib/types/edges.ts +++ b/packages/svelte/src/lib/types/edges.ts @@ -133,6 +133,7 @@ export type EdgeLayouted = Pick< | 'animated' | 'selected' | 'selectable' + | 'deletable' | 'label' | 'labelStyle' | 'interactionWidth' diff --git a/packages/system/src/types/nodes.ts b/packages/system/src/types/nodes.ts index 6ba7fbd4..b728ad0b 100644 --- a/packages/system/src/types/nodes.ts +++ b/packages/system/src/types/nodes.ts @@ -87,7 +87,7 @@ export type InternalNodeBase = NodeType & */ export type NodeProps = Pick< NodeType, - 'id' | 'data' | 'width' | 'height' | 'sourcePosition' | 'targetPosition' | 'selected' | 'dragHandle' + 'id' | 'data' | 'width' | 'height' | 'sourcePosition' | 'targetPosition' | 'selected' | 'dragHandle' | 'selectable' | 'deletable' | 'draggable' > & Required> & { /** whether a node is connectable or not */