fix(nodes): if draggable equals false node is also not draggable with selection

This commit is contained in:
moklick
2023-02-03 19:08:10 +01:00
parent 1998a3b088
commit 1ba3c0e91f
4 changed files with 20 additions and 6 deletions
@@ -22,6 +22,7 @@ const initialNodes: Node[] = [
data: { label: 'Node 1' }, data: { label: 'Node 1' },
position: { x: 250, y: 5 }, position: { x: 250, y: 5 },
className: 'light', className: 'light',
draggable: false,
}, },
{ {
id: '2', id: '2',
+3 -2
View File
@@ -133,10 +133,11 @@ function useDrag({
const { const {
nodeInternals, nodeInternals,
multiSelectionActive, multiSelectionActive,
domNode,
nodesDraggable,
unselectNodesAndEdges, unselectNodesAndEdges,
onNodeDragStart, onNodeDragStart,
onSelectionDragStart, onSelectionDragStart,
domNode,
} = store.getState(); } = store.getState();
const onStart = nodeId ? onNodeDragStart : wrapSelectionDragFunc(onSelectionDragStart); const onStart = nodeId ? onNodeDragStart : wrapSelectionDragFunc(onSelectionDragStart);
@@ -157,7 +158,7 @@ function useDrag({
const pointerPos = getPointerPosition(event); const pointerPos = getPointerPosition(event);
lastPos.current = pointerPos; lastPos.current = pointerPos;
dragItems.current = getDragItems(nodeInternals, pointerPos, nodeId); dragItems.current = getDragItems(nodeInternals, nodesDraggable, pointerPos, nodeId);
if (onStart && dragItems.current) { if (onStart && dragItems.current) {
const [currentNode, nodes] = getEventHandlerParams({ const [currentNode, nodes] = getEventHandlerParams({
+12 -2
View File
@@ -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 // 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()) 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) => ({ .map((n) => ({
id: n.id, id: n.id,
position: n.position || { x: 0, y: 0 }, position: n.position || { x: 0, y: 0 },
@@ -7,9 +7,11 @@ function useUpdateNodePositions() {
const store = useStoreApi(); const store = useStoreApi();
const updatePositions = useCallback((params: { x: number; y: number; isShiftPressed: boolean }) => { 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(); 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 // 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. // if snap grid is enabled, we use that for the velocity.
const xVelo = snapToGrid ? snapGrid[0] : 5; const xVelo = snapToGrid ? snapGrid[0] : 5;