diff --git a/src/NodeRenderer/NodeTypes/wrapNode.js b/src/NodeRenderer/NodeTypes/wrapNode.js index ff40a911..f8c39b15 100644 --- a/src/NodeRenderer/NodeTypes/wrapNode.js +++ b/src/NodeRenderer/NodeTypes/wrapNode.js @@ -3,10 +3,11 @@ import ReactDraggable from 'react-draggable'; import { GraphContext } from '../../GraphContext'; import { updateNodeData, updateNodePos } from '../../state/actions'; +import { projectPosition } from '../../graph-utils'; export default NodeComponent => (props) => { const { position, data, onNodeClick } = props; - const { id, __width, __height } = data; + const { id } = data; const nodeElement = useRef(null); const graphContext = useContext(GraphContext); const [ x, y, k ] = graphContext.state.transform; @@ -16,31 +17,32 @@ export default NodeComponent => (props) => { const unscaledWith = Math.round(bounds.width * (1 / k)); const unscaledHeight = Math.round(bounds.height * (1 / k)); - if (__width !== unscaledWith || __height !== unscaledHeight) { - graphContext.dispatch(updateNodeData(id, { __width: unscaledWith, __height: unscaledHeight })); - } + graphContext.dispatch(updateNodeData(id, { __width: unscaledWith, __height: unscaledHeight })); }, []); - const nodePosition = { - x: (k * position.x) + x, - y: (k * position.y) + y - }; - return ( { - const offsetX = e.clientX - position.x - x; - const offsetY = e.clientY - position.y - y; + const unscaledPos = { + x: e.clientX * (1 / k), + y: e.clientY * (1 / k) + } + const offsetX = unscaledPos.x - position.x - x; + const offsetY = unscaledPos.y - position.y - y; graphContext.dispatch(updateNodeData(id, { __offsetX: offsetX, __offsetY: offsetY })); }} onDrag={(e, d) => { const { __offsetX = 0, __offsetY = 0 } = data; + const unscaledPos = { + x: e.clientX * (1 / k), + y: e.clientY * (1 / k) + } graphContext.dispatch(updateNodePos(id, { - x: e.clientX - x - __offsetX, - y: e.clientY - y - __offsetY + x: unscaledPos.x - x - __offsetX, + y: unscaledPos.y - y - __offsetY })); }} scale={k} diff --git a/src/graph-utils.js b/src/graph-utils.js index 750adab8..6b0ca742 100644 --- a/src/graph-utils.js +++ b/src/graph-utils.js @@ -42,8 +42,16 @@ export const getBoundingBox = (nodes) => { }; }; +export const projectPosition = (pos, transform) => { + return { + x: (pos.x * transform[2]) + transform[0], + y: (pos.y * transform[2]) + transform[1] + }; +} + export default { isEdge, separateElements, - getBoundingBox + getBoundingBox, + projectPosition };