diff --git a/src/components/NodesSelection/index.tsx b/src/components/NodesSelection/index.tsx index 059e1a27..0d2777e7 100644 --- a/src/components/NodesSelection/index.tsx +++ b/src/components/NodesSelection/index.tsx @@ -1,19 +1,24 @@ +/** + * The nodes selection rectangle gets displayed when a user + * made a selectio with on or several nodes + */ + import React, { useState, memo } from 'react'; import ReactDraggable from 'react-draggable'; import { useStoreState, useStoreActions } from '../../store/hooks'; import { isNode } from '../../utils/graph'; -import { Node, Elements, XYPosition } from '../../types'; +import { Node, XYPosition } from '../../types'; type StartPositions = { [key: string]: XYPosition }; -function getStartPositions(elements: Elements): StartPositions { +function getStartPositions(nodes: Node[]): StartPositions { const startPositions: StartPositions = {}; - return (elements.filter(isNode) as Node[]).reduce((res, node) => { + return nodes.reduce((res, node) => { const startPosition = { x: node.__rg.position.x || node.position.x, - y: node.__rg.position.y || node.position.x, + y: node.__rg.position.y || node.position.y, }; res[node.id] = startPosition; @@ -30,21 +35,26 @@ export default memo(() => { selectedNodesBbox: s.selectedNodesBbox, selectedElements: s.selectedElements, snapToGrid: s.snapToGrid, - snapGrid: s.snapGrid + snapGrid: s.snapGrid, + nodes: s.nodes, })); const updateNodePos = useStoreActions(a => a.updateNodePos); - const [x, y, k] = state.transform; + const [tx, ty, tScale] = state.transform; const position = state.selectedNodesBbox; const grid = (state.snapToGrid ? state.snapGrid : [1, 1])! as [number, number]; const onStart = (evt: MouseEvent) => { const scaledClient: XYPosition = { - x: evt.clientX * (1 / k), - y: evt.clientY * (1 / k), + x: evt.clientX / tScale, + y: evt.clientY / tScale, }; - const offsetX: number = scaledClient.x - position.x - x; - const offsetY: number = scaledClient.y - position.y - y; - const nextStartPositions = getStartPositions(state.selectedElements); + const offsetX: number = scaledClient.x - position.x - tx; + const offsetY: number = scaledClient.y - position.y - ty; + const selectedNodes = (state.selectedElements.filter(isNode) as Node[]).map( + selectedNode => state.nodes.find(node => node.id === selectedNode.id)! as Node + ); + + const nextStartPositions = getStartPositions(selectedNodes); if (nextStartPositions) { setOffset({ x: offsetX, y: offsetY }); @@ -54,24 +64,14 @@ export default memo(() => { const onDrag = (evt: MouseEvent) => { const scaledClient: XYPosition = { - x: evt.clientX * (1 / k), - y: evt.clientY * (1 / k), + x: evt.clientX / tScale, + y: evt.clientY / tScale, }; (state.selectedElements.filter(isNode) as Node[]).forEach(node => { const pos: XYPosition = { - x: - startPositions[node.id].x + - scaledClient.x - - position.x - - offset.x - - x, - y: - startPositions[node.id].y + - scaledClient.y - - position.y - - offset.y - - y, + x: startPositions[node.id].x + scaledClient.x - position.x - offset.x - tx, + y: startPositions[node.id].y + scaledClient.y - position.y - offset.y - ty, }; updateNodePos({ id: node.id, pos }); @@ -82,11 +82,11 @@ export default memo(() => {
onStart(evt as MouseEvent)} onDrag={evt => onDrag(evt as MouseEvent)} diff --git a/src/components/UserSelection/index.tsx b/src/components/UserSelection/index.tsx index ab68c9ad..6984377b 100644 --- a/src/components/UserSelection/index.tsx +++ b/src/components/UserSelection/index.tsx @@ -1,3 +1,7 @@ +/** + * The user selection rectangle gets displayed when a user drags the mouse while pressing shift + */ + import React, { useEffect, useRef, useState, memo } from 'react'; import { useStoreActions } from '../../store/hooks'; diff --git a/src/store/index.ts b/src/store/index.ts index 05eafdf3..2beaf69d 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -226,7 +226,6 @@ const storeModel: StoreModel = { state.selection = selection; state.nodesSelectionActive = true; state.selectedNodesBbox = selectedNodesBbox; - state.nodesSelectionActive = true; }), setSelectedElements: action((state, elements) => {