fix(connection): always scale handle dimensions

src/NodeRenderer/HandleTypes/BaseHandle.js

@@ -1,13 +1,26 @@
-import React, { memo } from 'react';
+import React, { memo, useContext } from 'react';
 import cx from 'classnames';
 
 import { Consumer } from '../NodeIdContext'
+import { GraphContext } from '../../GraphContext';
+import { setConnecting, setConnectionPos } from '../../state/actions';
 
-function onDragStart(evt, nodeId) {
+function onDragStart(evt, nodeId, dispatch) {
   evt.dataTransfer.setData("text/plain", nodeId);
+
+  // dispatch(setConnecting({ isConnecting: true, connectionSourceId: nodeId }));
+}
+
+function onDragStop(evt, dispatch) {
+  // dispatch(setConnecting({ isConnecting: false }));
+}
+
+function onDrag(evt, dispatch) {
+  // dispatch(setConnectionPos({ x: evt.clientX, y: evt.clientY }));
 }
 
 export default memo(({ source, target, ...rest }) => {
+  const { dispatch } = useContext(GraphContext)
   const handleClasses = cx(
     'react-graph__handle',
     rest.className,
@@ -30,7 +43,9 @@ export default memo(({ source, target, ...rest }) => {
           className={handleClasses}
           {...rest}
           draggable
-          onDragStart={evt => onDragStart(evt, nodeId)}
+          onDragStart={evt => onDragStart(evt, nodeId, dispatch)}
+          onDrag={evt => onDrag(evt, dispatch)}
+          onDragEnd={evt => onDragStop(evt, dispatch)}
         />
       )}
     </Consumer>

src/NodeRenderer/NodeTypes/wrapNode.js

@@ -10,7 +10,7 @@ import { Provider } from '../NodeIdContext';
 const isInput = e => ['INPUT', 'SELECT', 'TEXTAREA'].includes(e.target.nodeName);
 const isHandle = e => e.target.className && e.target.className.includes('source');
 
-const getHandleBounds = (sel, nodeElement, parentBounds) => {
+const getHandleBounds = (sel, nodeElement, parentBounds, k) => {
   const handle = nodeElement.querySelector(sel);
 
   if (!handle) {
@@ -18,11 +18,14 @@ const getHandleBounds = (sel, nodeElement, parentBounds) => {
   }
 
   const bounds = handle.getBoundingClientRect();
+  const unscaledWith = Math.round(bounds.width * (1 / k));
+  const unscaledHeight = Math.round(bounds.height * (1 / k));
+
   return {
-    x: bounds.x - parentBounds.x,
-    y: bounds.y - parentBounds.y,
-    width: bounds.width,
-    height: bounds.height
+    x: (bounds.x - parentBounds.x) * (1 / k),
+    y: (bounds.y - parentBounds.y) * (1 / k),
+    width: unscaledWith,
+    height: unscaledHeight
   };
 };
 
@@ -49,8 +52,8 @@ export default NodeComponent => memo((props) => {
     const unscaledWith = Math.round(bounds.width * (1 / k));
     const unscaledHeight = Math.round(bounds.height * (1 / k));
     const handleBounds = {
-      source: getHandleBounds('.source', nodeElement.current, bounds),
-      target: getHandleBounds('.target', nodeElement.current, bounds)
+      source: getHandleBounds('.source', nodeElement.current, bounds, k),
+      target: getHandleBounds('.target', nodeElement.current, bounds, k)
     };
 
     dispatch(updateNodeData(id, { width: unscaledWith, height: unscaledHeight, handleBounds }));