fix(elements): change data from outside

src/NodeRenderer/NodeTypes/wrapNode.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useContext } from 'react';
+import React, { useEffect, useRef, useContext, useState } from 'react';
 import ReactDraggable from 'react-draggable';
 import cx from 'classnames';
 
@@ -8,10 +8,13 @@ import { updateNodeData, updateNodePos } from '../../state/actions';
 const isInputTarget = (e) => ['INPUT', 'SELECT', 'TEXTAREA'].includes(e.target.nodeName);
 
 export default NodeComponent => (props) => {
-  const { position, data, onNodeClick } = props;
-  const { id } = data;
   const nodeElement = useRef(null);
   const graphContext = useContext(GraphContext);
+  const [offset, setOffset] = useState({ x: 0, y: 0 });
+
+  const { data, onNodeClick, __rg } = props;
+  const { position } = __rg;
+  const { id } = data;
   const [ x, y, k ] = graphContext.state.transform;
   const selected = graphContext.state.selectedNodes.includes(id);
   const nodeClasses = cx('react-graph__node', { selected });
@@ -21,7 +24,7 @@ export default NodeComponent => (props) => {
     const unscaledWith = Math.round(bounds.width * (1 / k));
     const unscaledHeight = Math.round(bounds.height * (1 / k));
 
-    graphContext.dispatch(updateNodeData(id, { __width: unscaledWith, __height: unscaledHeight }));
+    graphContext.dispatch(updateNodeData(id, { width: unscaledWith, height: unscaledHeight }));
   }, []);
 
   return (
@@ -39,18 +42,17 @@ export default NodeComponent => (props) => {
         const offsetX = unscaledPos.x - position.x - x;
         const offsetY = unscaledPos.y - position.y - y;
 
-        graphContext.dispatch(updateNodeData(id, { __offsetX: offsetX, __offsetY: offsetY }));
+        setOffset({ x: offsetX, y: 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: unscaledPos.x - x - __offsetX,
-          y: unscaledPos.y - y - __offsetY
+          x: unscaledPos.x - x - offset.x,
+          y: unscaledPos.y - y - offset.y
         }));
       }}
       scale={k}