exposed selectable, deletable, draggable to custom nodes & edges

packages/react/src/components/EdgeWrapper/index.tsx

@@ -215,6 +215,8 @@ export function EdgeWrapper<EdgeType extends Edge = Edge>({
             type={edge.type}
             selected={edge.selected}
             animated={edge.animated}
+            selectable={isSelectable}
+            deletable={edge.deletable ?? true}
             label={edge.label}
             labelStyle={edge.labelStyle}
             labelShowBg={edge.labelShowBg}

packages/react/src/components/NodeWrapper/index.tsx

@@ -209,6 +209,9 @@ export function NodeWrapper<NodeType extends Node>({
           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}

packages/react/src/types/edges.ts

@@ -100,7 +100,7 @@ export type EdgeTextProps = HTMLAttributes<SVGElement> &
  */
 export type EdgeProps<EdgeType extends Edge = Edge> = Pick<
   EdgeType,
-  'id' | 'animated' | 'data' | 'style' | 'selected' | 'source' | 'target'
+  'id' | 'animated' | 'data' | 'style' | 'selected' | 'source' | 'target' | 'selectable' | 'deletable'
 > &
   EdgePosition &
   EdgeLabelOptions & {

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}

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}

packages/svelte/src/lib/components/NodeWrapper/types.ts

@@ -10,6 +10,7 @@ export type NodeWrapperProps = Pick<
   | 'dragging'
   | 'selected'
   | 'selectable'
+  | 'deletable'
   | 'style'
   | 'type'
   | 'sourcePosition'

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}

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}

packages/svelte/src/lib/types/edges.ts

@@ -133,6 +133,7 @@ export type EdgeLayouted = Pick<
   | 'animated'
   | 'selected'
   | 'selectable'
+  | 'deletable'
   | 'label'
   | 'labelStyle'
   | 'interactionWidth'

packages/system/src/types/nodes.ts

@@ -87,7 +87,7 @@ export type InternalNodeBase<NodeType extends NodeBase = NodeBase> = NodeType &
  */
 export type NodeProps<NodeType extends NodeBase> = Pick<
   NodeType,
-  'id' | 'data' | 'width' | 'height' | 'sourcePosition' | 'targetPosition' | 'selected' | 'dragHandle'
+  'id' | 'data' | 'width' | 'height' | 'sourcePosition' | 'targetPosition' | 'selected' | 'dragHandle' | 'selectable' | 'deletable' | 'draggable'
 > &
   Required<Pick<NodeType, 'type' | 'dragging' | 'zIndex'>> & {
     /** whether a node is connectable or not */