diff --git a/examples/vite-app/src/examples/Basic/index.tsx b/examples/vite-app/src/examples/Basic/index.tsx index 52d22025..67bbc0fd 100644 --- a/examples/vite-app/src/examples/Basic/index.tsx +++ b/examples/vite-app/src/examples/Basic/index.tsx @@ -22,6 +22,7 @@ const initialNodes: Node[] = [ data: { label: 'Node 1' }, position: { x: 250, y: 5 }, className: 'light', + draggable: false, }, { id: '2', diff --git a/packages/core/src/hooks/useDrag/index.ts b/packages/core/src/hooks/useDrag/index.ts index c6f3d269..22d06daf 100644 --- a/packages/core/src/hooks/useDrag/index.ts +++ b/packages/core/src/hooks/useDrag/index.ts @@ -133,10 +133,11 @@ function useDrag({ const { nodeInternals, multiSelectionActive, + domNode, + nodesDraggable, unselectNodesAndEdges, onNodeDragStart, onSelectionDragStart, - domNode, } = store.getState(); const onStart = nodeId ? onNodeDragStart : wrapSelectionDragFunc(onSelectionDragStart); @@ -157,7 +158,7 @@ function useDrag({ const pointerPos = getPointerPosition(event); lastPos.current = pointerPos; - dragItems.current = getDragItems(nodeInternals, pointerPos, nodeId); + dragItems.current = getDragItems(nodeInternals, nodesDraggable, pointerPos, nodeId); if (onStart && dragItems.current) { const [currentNode, nodes] = getEventHandlerParams({ diff --git a/packages/core/src/hooks/useDrag/utils.ts b/packages/core/src/hooks/useDrag/utils.ts index ed40053b..5ef3b3b2 100644 --- a/packages/core/src/hooks/useDrag/utils.ts +++ b/packages/core/src/hooks/useDrag/utils.ts @@ -36,9 +36,19 @@ export function hasSelector(target: Element, selector: string, nodeRef: RefObjec } // looks for all selected nodes and created a NodeDragItem for each of them -export function getDragItems(nodeInternals: NodeInternals, mousePos: XYPosition, nodeId?: string): NodeDragItem[] { +export function getDragItems( + nodeInternals: NodeInternals, + nodesDraggable: boolean, + mousePos: XYPosition, + nodeId?: string +): NodeDragItem[] { return Array.from(nodeInternals.values()) - .filter((n) => (n.selected || n.id === nodeId) && (!n.parentNode || !isParentSelected(n, nodeInternals))) + .filter( + (n) => + (n.selected || n.id === nodeId) && + (!n.parentNode || !isParentSelected(n, nodeInternals)) && + (n.draggable || (nodesDraggable && typeof n.draggable === 'undefined')) + ) .map((n) => ({ id: n.id, position: n.position || { x: 0, y: 0 }, diff --git a/packages/core/src/hooks/useUpdateNodePositions.ts b/packages/core/src/hooks/useUpdateNodePositions.ts index 131f85cd..0ab89157 100644 --- a/packages/core/src/hooks/useUpdateNodePositions.ts +++ b/packages/core/src/hooks/useUpdateNodePositions.ts @@ -7,9 +7,11 @@ function useUpdateNodePositions() { const store = useStoreApi(); const updatePositions = useCallback((params: { x: number; y: number; isShiftPressed: boolean }) => { - const { nodeInternals, nodeExtent, updateNodePositions, getNodes, snapToGrid, snapGrid, onError } = + const { nodeInternals, nodeExtent, updateNodePositions, getNodes, snapToGrid, snapGrid, onError, nodesDraggable } = store.getState(); - const selectedNodes = getNodes().filter((n) => n.selected); + const selectedNodes = getNodes().filter( + (n) => n.selected && (n.draggable || (nodesDraggable && typeof n.draggable === 'undefined')) + ); // by default a node moves 5px on each key press, or 20px if shift is pressed // if snap grid is enabled, we use that for the velocity. const xVelo = snapToGrid ? snapGrid[0] : 5;