Merge pull request #4957 from xyflow/enhance/node-props

Enhance/node props

.changeset/rotten-moons-roll.md

@@ -0,0 +1,7 @@
+---
+'@xyflow/react': patch
+'@xyflow/svelte': patch
+'@xyflow/system': patch
+---
+
+Narrow properties selected, selectable, deletable, draggable of NodeProps type to be required.

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

@@ -202,7 +202,7 @@ export function NodeWrapper<NodeType extends Node>({
           type={nodeType}
           positionAbsoluteX={internals.positionAbsolute.x}
           positionAbsoluteY={internals.positionAbsolute.y}
-          selected={node.selected}
+          selected={node.selected ?? false}
           selectable={isSelectable}
           draggable={isDraggable}
           deletable={node.deletable ?? true}

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

@@ -54,7 +54,9 @@
     nodeDragThreshold,
     selectNodesOnDrag,
     handleNodeSelection,
-    updateNodeInternals
+    updateNodeInternals,
+    elementsSelectable,
+    nodesDraggable
   } = store;
 
   let nodeRef: HTMLDivElement;
@@ -194,14 +196,14 @@
       this={nodeComponent}
       {data}
       {id}
-      {selected}
-      {selectable}
-      {deletable}
+      selected={selected ?? false}
+      selectable={selectable ?? $elementsSelectable ?? true}
+      deletable={deletable ?? true}
       {sourcePosition}
       {targetPosition}
       {zIndex}
       {dragging}
-      {draggable}
+      draggable={draggable ?? $nodesDraggable ?? true}
       {dragHandle}
       {parentId}
       type={nodeType}

packages/system/src/types/nodes.ts

@@ -88,20 +88,9 @@ export type InternalNodeBase<NodeType extends NodeBase = NodeBase> = NodeType &
  */
 export type NodeProps<NodeType extends NodeBase> = Pick<
   NodeType,
-  | 'id'
-  | 'data'
-  | 'width'
-  | 'height'
-  | 'sourcePosition'
-  | 'targetPosition'
-  | 'selected'
-  | 'dragHandle'
-  | 'selectable'
-  | 'deletable'
-  | 'draggable'
-  | 'parentId'
+  'id' | 'data' | 'width' | 'height' | 'sourcePosition' | 'targetPosition' | 'dragHandle' | 'parentId'
 > &
-  Required<Pick<NodeType, 'type' | 'dragging' | 'zIndex'>> & {
+  Required<Pick<NodeType, 'type' | 'dragging' | 'zIndex' | 'selectable' | 'deletable' | 'selected' | 'draggable'>> & {
     /** whether a node is connectable or not */
     isConnectable: boolean;
     /** position absolute x value */