Merge pull request #152 from ajuhos/fix-139

Handle scaling correctly during Node movement and dropping
MrBlenny · Jun 28, 2020 · 011bd14 · 011bd14
2 parents 53c2297 + 91a6e56
commit 011bd14
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 5 deletions.
diff --git a/src/components/Canvas/Canvas.wrapper.tsx b/src/components/Canvas/Canvas.wrapper.tsx
@@ -137,13 +137,15 @@ export class CanvasWrapper extends React.Component<ICanvasWrapperProps, IState>
                     e.dataTransfer.getData(REACT_FLOW_CHART),
                   )
                   if (data) {
+                    const relativeClientX = e.clientX - offsetX;
+                    const relativeClientY = e.clientY - offsetY;
                     onCanvasDrop({
                       config,
                       data,
                       position: {
-                        x: e.clientX - (position.x + offsetX),
-                        y: e.clientY - (position.y + offsetY),
-                      },
+                        x: relativeClientX / scale - position.x / scale,
+                        y: relativeClientY / scale - position.y / scale
+                      }
                     })
                   }
                 }}

diff --git a/src/components/Node/Node.wrapper.tsx b/src/components/Node/Node.wrapper.tsx
@@ -13,6 +13,7 @@ import {
 } from '../../'
 import { noop } from '../../utils'
 import { INodeDefaultProps, NodeDefault } from './Node.default'
+import CanvasContext from "../Canvas/CanvasContext";
 
 export interface INodeWrapperProps {
   config: IConfig
@@ -67,6 +68,7 @@ export const NodeWrapper = ({
   onLinkComplete,
   onLinkCancel,
 }: INodeWrapperProps) => {
+  const { zoomScale } = React.useContext(CanvasContext);
   const [size, setSize] = React.useState<ISize>({ width: 0, height: 0 })
 
   const isDragging = React.useRef(false)
@@ -168,6 +170,7 @@ export const NodeWrapper = ({
       axis="both"
       position={node.position}
       grid={[1,1]}
+      scale={zoomScale}
       onStart={onStart}
       onDrag={onDrag}
       onStop={onStop}

diff --git a/src/container/actions.ts b/src/container/actions.ts
@@ -31,10 +31,16 @@ export const onDragNode: IStateCallback<IOnDragNode> = ({ config, event, data, i
   const nodechart = chart.nodes[id]
 
   if (nodechart) {
-    const position = getOffset(config, data)
+    const delta = {
+      x: data.deltaX,
+      y: data.deltaY
+    };
     chart.nodes[id] = {
       ...nodechart,
-      position,
+      position: {
+        x: nodechart.position.x + delta.x,
+        y: nodechart.position.y + delta.y
+      }
     }
   }