-
-
-
-
+
+
{shiftPressed &&
}
{state.nodesSelectionActive &&
}
dispatch(setNodesSelection({ isActive: false }))}
+ onClick={() => setNodesSelection({ isActive: false })}
ref={zoomPane}
/>
diff --git a/src/NodeRenderer/HandleTypes/SourceHandle.js b/src/NodeRenderer/HandleTypes/SourceHandle.js
index 9bb161d3..10b7d50d 100644
--- a/src/NodeRenderer/HandleTypes/SourceHandle.js
+++ b/src/NodeRenderer/HandleTypes/SourceHandle.js
@@ -1,12 +1,16 @@
import React, { memo, useContext } from 'react';
+import { useStoreActions, useStoreState } from 'easy-peasy';
import BaseHandle from './BaseHandle';
import NodeIdContext from '../NodeIdContext'
-import { ConnectionContext } from '../../ConnectionContext';
-export default memo((props) => {
+const SourceHandle = memo((props) => {
const nodeId = useContext(NodeIdContext);
- const { setPosition, setSourceId, onConnect } = useContext(ConnectionContext);
+ const { setPosition, setSourceId } = useStoreActions(a => ({
+ setPosition: a.setConnectionPosition,
+ setSourceId: a.setConnectionSourceId
+ }));
+ const onConnect = useStoreState(s => s.onConnect);
return (
{
/>
);
});
+
+SourceHandle.displayName = 'SourceHandle';
+
+export default SourceHandle;
diff --git a/src/NodeRenderer/HandleTypes/TargetHandle.js b/src/NodeRenderer/HandleTypes/TargetHandle.js
index 436ec23d..b8ba75c0 100644
--- a/src/NodeRenderer/HandleTypes/TargetHandle.js
+++ b/src/NodeRenderer/HandleTypes/TargetHandle.js
@@ -1,12 +1,16 @@
import React, { memo, useContext } from 'react';
+import { useStoreActions, useStoreState } from 'easy-peasy';
import BaseHandle from './BaseHandle';
-import { ConnectionContext } from '../../ConnectionContext';
import NodeIdContext from '../NodeIdContext'
const TargetHandle = memo((props) => {
const nodeId = useContext(NodeIdContext);
- const { setPosition, setSourceId, onConnect } = useContext(ConnectionContext);
+ const { setPosition, setSourceId } = useStoreActions(a => ({
+ setPosition: a.setConnectionPosition,
+ setSourceId: a.setConnectionSourceId
+ }));
+ const onConnect = useStoreState(s => s.onConnect);
return (
(
e.target.className &&
@@ -29,7 +29,7 @@ const getHandleBounds = (sel, nodeElement, parentBounds, k) => {
};
};
-const onStart = (evt, { dispatch, setOffset, onClick, id, type, data, position, transform }) => {
+const onStart = (evt, { setOffset, onClick, id, type, data, position, transform }) => {
if (isInputNode(evt) || isHandle(evt)) {
return false;
}
@@ -42,22 +42,22 @@ const onStart = (evt, { dispatch, setOffset, onClick, id, type, data, position,
const offsetY = scaledClient.y - position.y - transform[1];
const node = { id, type, position, data };
- dispatch(setSelectedElements({ id, type }));
+ store.dispatch.setSelectedElements({ id, type });
setOffset({ x: offsetX, y: offsetY });
onClick(node);
};
-const onDrag = (evt, { dispatch, setDragging, id, offset, transform }) => {
+const onDrag = (evt, { setDragging, id, offset, transform }) => {
const scaledClient = {
x: evt.clientX * (1 / transform[2]),
y: evt.clientY * (1 / transform[2])
};
setDragging(true);
- dispatch(updateNodePos(id, {
+ store.dispatch.updateNodePos({ id, pos: {
x: scaledClient.x - transform[0] - offset.x,
y: scaledClient.y - transform[1] - offset.y
- }));
+ }});
};
const onStop = ({ onNodeDragStop, setDragging, isDragging, id, type, position, data }) => {
@@ -78,7 +78,7 @@ export default NodeComponent => {
const [isDragging, setDragging] = useState(false);
const {
id, type, data, transform, xPos, yPos, selected,
- dispatch, onClick, onNodeDragStop, style
+ onClick, onNodeDragStop, style
} = props;
const position = { x: xPos, y: yPos };
@@ -93,13 +93,13 @@ export default NodeComponent => {
target: getHandleBounds('.target', nodeElement.current, bounds, transform[2])
};
- dispatch(updateNodeData(id, { ...dimensions, handleBounds }));
+ store.dispatch.updateNodeData({ id, ...dimensions, handleBounds });
}, []);
return (
onStart(evt, { dispatch, onClick, id, type, data, setOffset, transform, position })}
- onDrag={evt => onDrag(evt, { dispatch, setDragging, id, offset, transform })}
+ onStart={evt => onStart(evt, { onClick, id, type, data, setOffset, transform, position })}
+ onDrag={evt => onDrag(evt, { setDragging, id, offset, transform })}
onStop={() => onStop({ onNodeDragStop, isDragging, setDragging, id, type, position, data })}
scale={transform[2]}
>
diff --git a/src/NodeRenderer/index.js b/src/NodeRenderer/index.js
index 5393261a..516a3e7a 100644
--- a/src/NodeRenderer/index.js
+++ b/src/NodeRenderer/index.js
@@ -1,9 +1,9 @@
-import React, { memo, useContext } from 'react';
+import React, { memo } from 'react';
+import { useStoreState } from 'easy-peasy';
-import { GraphContext } from '../GraphContext';
import { isNode } from '../graph-utils';
-function renderNode(d, props, graphContext) {
+function renderNode(d, props, state) {
const nodeType = d.type || 'default';
if (!props.nodeTypes[nodeType]) {
@@ -11,7 +11,7 @@ function renderNode(d, props, graphContext) {
}
const NodeComponent = props.nodeTypes[nodeType] || props.nodeTypes.default;
- const selected = graphContext.state.selectedElements
+ const selected = state.selectedElements
.filter(isNode)
.map(e => e.id)
.includes(d.id);
@@ -26,9 +26,7 @@ function renderNode(d, props, graphContext) {
yPos={d.__rg.position.y}
onClick={props.onElementClick}
onNodeDragStop={props.onNodeDragStop}
- dispatch={graphContext.dispatch}
- transform={graphContext.state.transform}
- getNodeById={graphContext.getNodeById}
+ transform={state.transform}
selected={selected}
style={d.style}
/>
@@ -36,8 +34,13 @@ function renderNode(d, props, graphContext) {
}
const NodeRenderer = memo((props) => {
- const graphContext = useContext(GraphContext);
- const { transform, nodes } = graphContext.state;
+ const state = useStoreState(s => ({
+ nodes: s.nodes,
+ transform: s.transform,
+ selectedElements: s.selectedElements
+ }));
+
+ const { transform, nodes } = state;
const transformStyle = { transform : `translate(${transform[0]}px,${transform[1]}px) scale(${transform[2]})` };
return (
@@ -45,7 +48,7 @@ const NodeRenderer = memo((props) => {
className="react-graph__nodes"
style={transformStyle}
>
- {nodes.map(d => renderNode(d, props, graphContext))}
+ {nodes.map(d => renderNode(d, props, state))}