From 91a6e562dda11412d7b587e382c3c9f7186dcce6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juhos=20A=CC=81da=CC=81m?= <ajuhos@logiscool.com>
Date: Sat, 30 May 2020 18:51:24 +0200
Subject: [PATCH] Fix #139: Set scale for draggable and calculate using scaled
 positions on drop

---
 src/components/Canvas/Canvas.wrapper.tsx |  8 +++++---
 src/components/Node/Node.wrapper.tsx     |  3 +++
 src/container/actions.ts                 | 10 ++++++++--
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/components/Canvas/Canvas.wrapper.tsx b/src/components/Canvas/Canvas.wrapper.tsx
index be78f51a..9e25cde7 100644
--- 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
index 7cf6e009..e242dd97 100644
--- 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
index 4b7f5cd9..2ae42d76 100644
--- 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
+      }
     }
   }