develop (#43)

* fix(ts): use strict mode strictNullChecks etc

* chore: Use extended React.HTMLAttributes<> (#41)

* refactor(code-format): add prettier closes #42

* feat(renderer): add snap to grid option closes #20

* chore(dependabot): use develop as target branch

.dependabot/config.yml

@@ -1,9 +1,10 @@
 version: 1
 update_configs:
-  - package_manager: "javascript"
-    directory: "/"
-    update_schedule: "weekly"
+  - package_manager: 'javascript'
+    directory: '/'
+    update_schedule: 'weekly'
+    target_branch: 'develop'
     automerged_updates:
       - match:
-          dependency_type: "all"
-          update_type: "semver:minor"
+          dependency_type: 'all'
+          update_type: 'semver:minor'

.prettierignore

@@ -0,0 +1 @@
+example/src

dist/ReactFlow.esm.js

@@ -5756,6 +5756,8 @@ var storeModel = {
     selection: null,
     connectionSourceId: null,
     connectionPosition: { x: 0, y: 0 },
+    snapGrid: [16, 16],
+    snapToGrid: true,
     onConnect: function () { },
     setOnConnect: action(function (state, onConnect) {
         state.onConnect = onConnect;
@@ -5776,9 +5778,18 @@ var storeModel = {
     }),
     updateNodePos: action(function (state, _a) {
         var id = _a.id, pos = _a.pos;
+        var position = pos;
+        if (state.snapToGrid) {
+            var transformedGridSizeX = state.snapGrid[0] * state.transform[2];
+            var transformedGridSizeY = state.snapGrid[1] * state.transform[2];
+            position = {
+                x: transformedGridSizeX * Math.round(pos.x / transformedGridSizeX),
+                y: transformedGridSizeY * Math.round(pos.y / transformedGridSizeY),
+            };
+        }
         state.nodes.forEach(function (n) {
             if (n.id === id) {
-                n.__rg = __assign(__assign({}, n.__rg), { position: pos });
+                n.__rg = __assign(__assign({}, n.__rg), { position: position });
             }
         });
     }),
@@ -5787,7 +5798,7 @@ var storeModel = {
     }),
     setNodesSelection: action(function (state, _a) {
         var isActive = _a.isActive, selection = _a.selection;
-        if (!isActive) {
+        if (!isActive || typeof selection === 'undefined') {
             state.nodesSelectionActive = false;
             state.selectedElements = [];
             return;
@@ -5802,7 +5813,9 @@ var storeModel = {
     setSelectedElements: action(function (state, elements) {
         var selectedElementsArr = Array.isArray(elements) ? elements : [elements];
         var selectedElementsUpdated = !fastDeepEqual(selectedElementsArr, state.selectedElements);
-        var selectedElements = selectedElementsUpdated ? selectedElementsArr : state.selectedElements;
+        var selectedElements = selectedElementsUpdated
+            ? selectedElementsArr
+            : state.selectedElements;
         state.selectedElements = selectedElements;
     }),
     updateSelection: action(function (state, selection) {
@@ -5811,7 +5824,9 @@ var storeModel = {
         var nextSelectedElements = __spreadArrays(selectedNodes, selectedEdges);
         var selectedElementsUpdated = !fastDeepEqual(nextSelectedElements, state.selectedElements);
         state.selection = selection;
-        state.selectedElements = selectedElementsUpdated ? nextSelectedElements : state.selectedElements;
+        state.selectedElements = selectedElementsUpdated
+            ? nextSelectedElements
+            : state.selectedElements;
     }),
     updateTransform: action(function (state, transform) {
         state.transform = [transform.x, transform.y, transform.k];
@@ -5831,7 +5846,12 @@ var storeModel = {
     }),
     setConnectionSourceId: action(function (state, sourceId) {
         state.connectionSourceId = sourceId;
-    })
+    }),
+    setSnapGrid: action(function (state, _a) {
+        var snapToGrid = _a.snapToGrid, snapGrid = _a.snapGrid;
+        state.snapToGrid = snapToGrid;
+        state.snapGrid = snapGrid;
+    }),
 };
 var store = createStore$1(storeModel);
 
@@ -5845,7 +5865,9 @@ var getOutgoers = function (node, elements) {
     if (!isNode(node)) {
         return [];
     }
-    var outgoerIds = elements.filter(function (e) { return e.source === node.id; }).map(function (e) { return e.target; });
+    var outgoerIds = elements
+        .filter(function (e) { return e.source === node.id; })
+        .map(function (e) { return e.target; });
     return elements.filter(function (e) { return outgoerIds.includes(e.id); });
 };
 var removeElements = function (elementsToRemove, elements) {
@@ -5864,7 +5886,9 @@ var addEdge = function (edgeParams, elements) {
     if (!edgeParams.source || !edgeParams.target) {
         throw new Error('Can not create edge. An edge needs a source and a target');
     }
-    return elements.concat(__assign(__assign({}, edgeParams), { id: typeof edgeParams.id !== 'undefined' ? edgeParams.id : getEdgeId(edgeParams) }));
+    return elements.concat(__assign(__assign({}, edgeParams), { id: typeof edgeParams.id !== 'undefined'
+            ? edgeParams.id
+            : getEdgeId(edgeParams) }));
 };
 var pointToRendererPoint = function (_a, transform) {
     var x = _a.x, y = _a.y;
@@ -5872,10 +5896,11 @@ var pointToRendererPoint = function (_a, transform) {
     var rendererY = (y - transform[1]) * (1 / transform[2]);
     return {
         x: rendererX,
-        y: rendererY
+        y: rendererY,
     };
 };
 var parseElement = function (element, transform) {
+    if (transform === void 0) { transform = [0, 0, 1]; }
     if (!element.id) {
         throw new Error('All elements (nodes and edges) need to have an id.');
     }
@@ -5887,7 +5912,7 @@ var parseElement = function (element, transform) {
             position: pointToRendererPoint(nodeElement.position, transform),
             width: null,
             height: null,
-            handleBounds: {}
+            handleBounds: {},
         } });
 };
 var getBoundingBox = function (nodes) {
@@ -5912,23 +5937,22 @@ var getBoundingBox = function (nodes) {
         minX: Number.MAX_VALUE,
         minY: Number.MAX_VALUE,
         maxX: 0,
-        maxY: 0
+        maxY: 0,
     });
     return {
         x: bbox.minX,
         y: bbox.minY,
         width: bbox.maxX - bbox.minX,
-        height: bbox.maxY - bbox.minY
+        height: bbox.maxY - bbox.minY,
     };
 };
 var getNodesInside = function (nodes, bbox, transform, partially) {
     if (transform === void 0) { transform = [0, 0, 1]; }
     if (partially === void 0) { partially = false; }
-    return nodes
-        .filter(function (n) {
+    return nodes.filter(function (n) {
         var bboxPos = {
             x: (bbox.x - transform[0]) * (1 / transform[2]),
-            y: (bbox.y - transform[1]) * (1 / transform[2])
+            y: (bbox.y - transform[1]) * (1 / transform[2]),
         };
         var bboxWidth = bbox.width * (1 / transform[2]);
         var bboxHeight = bbox.height * (1 / transform[2]);
@@ -5937,8 +5961,10 @@ var getNodesInside = function (nodes, bbox, transform, partially) {
         var nodeHeight = partially ? 0 : height;
         var offsetX = partially ? width : 0;
         var offsetY = partially ? height : 0;
-        return ((position.x + offsetX > bboxPos.x && (position.x + nodeWidth) < (bboxPos.x + bboxWidth)) &&
-            (position.y + offsetY > bboxPos.y && (position.y + nodeHeight) < (bboxPos.y + bboxHeight)));
+        return (position.x + offsetX > bboxPos.x &&
+            position.x + nodeWidth < bboxPos.x + bboxWidth &&
+            (position.y + offsetY > bboxPos.y &&
+                position.y + nodeHeight < bboxPos.y + bboxHeight));
     });
 };
 var getConnectedEdges = function (nodes, edges) {
@@ -5954,21 +5980,36 @@ var getConnectedEdges = function (nodes, edges) {
 var fitView = function (_a) {
     var padding = (_a === void 0 ? { padding: 0 } : _a).padding;
     var state = store.getState();
+    if (!state.d3Selection || !state.d3Zoom) {
+        return;
+    }
     var bounds = getBoundingBox(state.nodes);
     var maxBoundsSize = Math.max(bounds.width, bounds.height);
-    var k = Math.min(state.width, state.height) / (maxBoundsSize + (maxBoundsSize * padding));
-    var boundsCenterX = bounds.x + (bounds.width / 2);
-    var boundsCenterY = bounds.y + (bounds.height / 2);
-    var transform = [(state.width / 2) - (boundsCenterX * k), (state.height / 2) - (boundsCenterY * k)];
-    var fittedTransform = identity$1.translate(transform[0], transform[1]).scale(k);
+    var k = Math.min(state.width, state.height) /
+        (maxBoundsSize + maxBoundsSize * padding);
+    var boundsCenterX = bounds.x + bounds.width / 2;
+    var boundsCenterY = bounds.y + bounds.height / 2;
+    var transform = [
+        state.width / 2 - boundsCenterX * k,
+        state.height / 2 - boundsCenterY * k,
+    ];
+    var fittedTransform = identity$1
+        .translate(transform[0], transform[1])
+        .scale(k);
     state.d3Selection.call(state.d3Zoom.transform, fittedTransform);
 };
 var zoomIn = function () {
     var state = store.getState();
+    if (!state.d3Zoom || !state.d3Selection) {
+        return;
+    }
     state.d3Zoom.scaleTo(state.d3Selection, state.transform[2] + 0.2);
 };
 var zoomOut = function () {
     var state = store.getState();
+    if (!state.d3Zoom || !state.d3Selection) {
+        return;
+    }
     state.d3Zoom.scaleTo(state.d3Selection, state.transform[2] - 0.2);
 };
 
@@ -5977,21 +6018,24 @@ function renderNode(node, props, state) {
     if (!props.nodeTypes[nodeType]) {
         console.warn("No node type found for type \"" + nodeType + "\". Using fallback type \"default\".");
     }
-    var NodeComponent = (props.nodeTypes[nodeType] || props.nodeTypes.default);
+    var NodeComponent = (props.nodeTypes[nodeType] ||
+        props.nodeTypes.default);
     var selected = state.selectedElements
         .filter(isNode)
         .map(function (e) { return e.id; })
         .includes(node.id);
-    return (React.createElement(NodeComponent, { key: node.id, id: node.id, type: node.type, data: node.data, xPos: node.__rg.position.x, yPos: node.__rg.position.y, onClick: props.onElementClick, onNodeDragStop: props.onNodeDragStop, transform: state.transform, selected: selected, style: node.style }));
+    return (React.createElement(NodeComponent, { key: node.id, id: node.id, type: nodeType, data: node.data, xPos: node.__rg.position.x, yPos: node.__rg.position.y, onClick: props.onElementClick, onNodeDragStop: props.onNodeDragStop, transform: state.transform, selected: selected, style: node.style }));
 }
 var NodeRenderer = memo(function (props) {
     var state = useStoreState$1(function (s) { return ({
         nodes: s.nodes,
         transform: s.transform,
-        selectedElements: s.selectedElements
+        selectedElements: s.selectedElements,
     }); });
     var transform = state.transform, nodes = state.nodes;
-    var transformStyle = { transform: "translate(" + transform[0] + "px," + transform[1] + "px) scale(" + transform[2] + ")" };
+    var transformStyle = {
+        transform: "translate(" + transform[0] + "px," + transform[1] + "px) scale(" + transform[2] + ")",
+    };
     return (React.createElement("div", { className: "react-flow__nodes", style: transformStyle }, nodes.map(function (node) { return renderNode(node, props, state); })));
 });
 NodeRenderer.displayName = 'NodeRenderer';
@@ -6068,11 +6112,15 @@ var ConnectionLine = (function (_a) {
         return null;
     }
     var edgeClasses = classnames('react-flow__edge', 'connection', className);
-    var sourceHandle = handleId ?
-        sourceNode.__rg.handleBounds.source.find(function (d) { return d.id === handleId; }) :
-        sourceNode.__rg.handleBounds.source[0];
-    var sourceHandleX = sourceHandle ? sourceHandle.x + (sourceHandle.width / 2) : sourceNode.__rg.width / 2;
-    var sourceHandleY = sourceHandle ? sourceHandle.y + (sourceHandle.height / 2) : sourceNode.__rg.height;
+    var sourceHandle = handleId
+        ? sourceNode.__rg.handleBounds.source.find(function (d) { return d.id === handleId; })
+        : sourceNode.__rg.handleBounds.source[0];
+    var sourceHandleX = sourceHandle
+        ? sourceHandle.x + sourceHandle.width / 2
+        : sourceNode.__rg.width / 2;
+    var sourceHandleY = sourceHandle
+        ? sourceHandle.y + sourceHandle.height / 2
+        : sourceNode.__rg.height;
     var sourceX = sourceNode.__rg.position.x + sourceHandleX;
     var sourceY = sourceNode.__rg.position.y + sourceHandleY;
     var targetX = (connectionPositionX - transform[0]) * (1 / transform[2]);
@@ -6094,42 +6142,49 @@ function getHandlePosition(position, node, handle) {
     if (handle === void 0) { handle = null; }
     if (!handle) {
         switch (position) {
-            case 'top': return {
-                x: node.__rg.width / 2,
-                y: 0
-            };
-            case 'right': return {
-                x: node.__rg.width,
-                y: node.__rg.height / 2
-            };
-            case 'bottom': return {
-                x: node.__rg.width / 2,
-                y: node.__rg.height
-            };
-            case 'left': return {
-                x: 0,
-                y: node.__rg.height / 2
-            };
+            case 'top':
+                return {
+                    x: node.__rg.width / 2,
+                    y: 0,
+                };
+            case 'right':
+                return {
+                    x: node.__rg.width,
+                    y: node.__rg.height / 2,
+                };
+            case 'bottom':
+                return {
+                    x: node.__rg.width / 2,
+                    y: node.__rg.height,
+                };
+            case 'left':
+                return {
+                    x: 0,
+                    y: node.__rg.height / 2,
+                };
         }
-        return null;
     }
     switch (position) {
-        case 'top': return {
-            x: handle.x + (handle.width / 2),
-            y: handle.y
-        };
-        case 'right': return {
-            x: handle.x + handle.width,
-            y: handle.y + (handle.height / 2)
-        };
-        case 'bottom': return {
-            x: handle.x + (handle.width / 2),
-            y: handle.y + handle.height
-        };
-        case 'left': return {
-            x: handle.x,
-            y: handle.y + (handle.height / 2)
-        };
+        case 'top':
+            return {
+                x: handle.x + handle.width / 2,
+                y: handle.y,
+            };
+        case 'right':
+            return {
+                x: handle.x + handle.width,
+                y: handle.y + handle.height / 2,
+            };
+        case 'bottom':
+            return {
+                x: handle.x + handle.width / 2,
+                y: handle.y + handle.height,
+            };
+        case 'left':
+            return {
+                x: handle.x,
+                y: handle.y + handle.height / 2,
+            };
     }
 }
 function getHandle(bounds, handleId) {
@@ -6155,7 +6210,10 @@ function getEdgePositions(sourceNode, sourceHandle, sourcePosition, targetNode,
     var targetX = targetNode.__rg.position.x + targetHandlePos.x;
     var targetY = targetNode.__rg.position.y + targetHandlePos.y;
     return {
-        sourceX: sourceX, sourceY: sourceY, targetX: targetX, targetY: targetY
+        sourceX: sourceX,
+        sourceY: sourceY,
+        targetX: targetX,
+        targetY: targetY,
     };
 }
 function renderEdge(edge, props, state) {
@@ -6193,7 +6251,7 @@ var EdgeRenderer = memo(function (_a) {
         transform: s.transform,
         selectedElements: s.selectedElements,
         connectionSourceId: s.connectionSourceId,
-        position: s.connectionPosition
+        position: s.connectionPosition,
     }); });
     if (!width) {
         return null;
@@ -6202,7 +6260,12 @@ var EdgeRenderer = memo(function (_a) {
     var transformStyle = "translate(" + transform[0] + "," + transform[1] + ") scale(" + transform[2] + ")";
     return (React.createElement("svg", { width: width, height: height, className: "react-flow__edges" },
         React.createElement("g", { transform: transformStyle },
-            edges.map(function (e) { return renderEdge(e, __assign({ width: width, height: height, connectionLineStyle: connectionLineStyle, connectionLineType: connectionLineType }, rest), state); }),
+            edges.map(function (e) {
+                return renderEdge(e, __assign({ width: width,
+                    height: height,
+                    connectionLineStyle: connectionLineStyle,
+                    connectionLineType: connectionLineType }, rest), state);
+            }),
             connectionSourceId && (React.createElement(ConnectionLine, { nodes: nodes, connectionSourceId: connectionSourceId, connectionPositionX: position.x, connectionPositionY: position.y, transform: transform, connectionLineStyle: connectionLineStyle, connectionLineType: connectionLineType })))));
 });
 EdgeRenderer.displayName = 'EdgeRenderer';
@@ -6214,7 +6277,7 @@ var initialRect = {
     y: 0,
     width: 0,
     height: 0,
-    draw: false
+    draw: false,
 };
 function getMousePosition(evt) {
     var reactFlowNode = document.querySelector('.react-flow');
@@ -6237,7 +6300,7 @@ var UserSelection = memo(function () {
         function onMouseDown(evt) {
             var mousePos = getMousePosition(evt);
             if (!mousePos) {
-                return false;
+                return;
             }
             setRect(function (currentRect) { return (__assign(__assign({}, currentRect), { startX: mousePos.x, startY: mousePos.y, x: mousePos.x, y: mousePos.y, draw: true })); });
             setSelection(true);
@@ -6253,7 +6316,11 @@ var UserSelection = memo(function () {
                 }
                 var negativeX = mousePos.x < currentRect.startX;
                 var negativeY = mousePos.y < currentRect.startY;
-                var nextRect = __assign(__assign({}, currentRect), { x: negativeX ? mousePos.x : currentRect.x, y: negativeY ? mousePos.y : currentRect.y, width: negativeX ? currentRect.startX - mousePos.x : mousePos.x - currentRect.startX, height: negativeY ? currentRect.startY - mousePos.y : mousePos.y - currentRect.startY });
+                var nextRect = __assign(__assign({}, currentRect), { x: negativeX ? mousePos.x : currentRect.x, y: negativeY ? mousePos.y : currentRect.y, width: negativeX
+                        ? currentRect.startX - mousePos.x
+                        : mousePos.x - currentRect.startX, height: negativeY
+                        ? currentRect.startY - mousePos.y
+                        : mousePos.y - currentRect.startY });
                 updateSelection(nextRect);
                 return nextRect;
             });
@@ -6265,19 +6332,25 @@ var UserSelection = memo(function () {
                 return __assign(__assign({}, currentRect), { draw: false });
             });
         }
-        selectionPane.current.addEventListener('mousedown', onMouseDown);
-        selectionPane.current.addEventListener('mousemove', onMouseMove);
-        selectionPane.current.addEventListener('mouseup', onMouseUp);
-        return function () {
-            selectionPane.current.removeEventListener('mousedown', onMouseDown);
-            selectionPane.current.removeEventListener('mousemove', onMouseMove);
-            selectionPane.current.removeEventListener('mouseup', onMouseUp);
-        };
-    }, []);
+        if (selectionPane.current) {
+            selectionPane.current.addEventListener('mousedown', onMouseDown);
+            selectionPane.current.addEventListener('mousemove', onMouseMove);
+            selectionPane.current.addEventListener('mouseup', onMouseUp);
+            return function () {
+                if (!selectionPane.current) {
+                    return;
+                }
+                selectionPane.current.removeEventListener('mousedown', onMouseDown);
+                selectionPane.current.removeEventListener('mousemove', onMouseMove);
+                selectionPane.current.removeEventListener('mouseup', onMouseUp);
+            };
+        }
+        return;
+    }, [selectionPane.current]);
     return (React.createElement("div", { className: "react-flow__selectionpane", ref: selectionPane }, rect.draw && (React.createElement("div", { className: "react-flow__selection", style: {
             width: rect.width,
             height: rect.height,
-            transform: "translate(" + rect.x + "px, " + rect.y + "px)"
+            transform: "translate(" + rect.x + "px, " + rect.y + "px)",
         } }))));
 });
 
@@ -7948,16 +8021,15 @@ reactDraggable.default = default_1;
 reactDraggable.DraggableCore = DraggableCore;
 
 function getStartPositions(elements) {
-    return elements
-        .filter(isNode)
-        .reduce(function (res, node) {
+    var startPositions = {};
+    return elements.filter(isNode).reduce(function (res, node) {
         var startPosition = {
             x: node.__rg.position.x || node.position.x,
-            y: node.__rg.position.y || node.position.x
+            y: node.__rg.position.y || node.position.x,
         };
         res[node.id] = startPosition;
         return res;
-    }, {});
+    }, startPositions);
 }
 var NodesSelection = memo(function () {
     var _a = useState({ x: 0, y: 0 }), offset = _a[0], setOffset = _a[1];
@@ -7965,7 +8037,7 @@ var NodesSelection = memo(function () {
     var state = useStoreState$1(function (s) { return ({
         transform: s.transform,
         selectedNodesBbox: s.selectedNodesBbox,
-        selectedElements: s.selectedElements
+        selectedElements: s.selectedElements,
     }); });
     var updateNodePos = useStoreActions$1(function (a) { return a.updateNodePos; });
     var _c = state.transform, x = _c[0], y = _c[1], k = _c[2];
@@ -7973,37 +8045,46 @@ var NodesSelection = memo(function () {
     var onStart = function (evt) {
         var scaledClient = {
             x: evt.clientX * (1 / k),
-            y: evt.clientY * (1 / k)
+            y: evt.clientY * (1 / k),
         };
         var offsetX = scaledClient.x - position.x - x;
         var offsetY = scaledClient.y - position.y - y;
-        var startPositions = getStartPositions(state.selectedElements);
-        setOffset({ x: offsetX, y: offsetY });
-        setStartPositions(startPositions);
+        var nextStartPositions = getStartPositions(state.selectedElements);
+        if (nextStartPositions) {
+            setOffset({ x: offsetX, y: offsetY });
+            setStartPositions(nextStartPositions);
+        }
     };
     var onDrag = function (evt) {
         var scaledClient = {
             x: evt.clientX * (1 / k),
-            y: evt.clientY * (1 / k)
+            y: evt.clientY * (1 / k),
         };
-        state.selectedElements
-            .filter(isNode)
-            .forEach(function (node) {
-            updateNodePos({ id: node.id, pos: {
-                    x: startPositions[node.id].x + scaledClient.x - position.x - offset.x - x,
-                    y: startPositions[node.id].y + scaledClient.y - position.y - offset.y - y
-                } });
+        state.selectedElements.filter(isNode).forEach(function (node) {
+            var pos = {
+                x: startPositions[node.id].x +
+                    scaledClient.x -
+                    position.x -
+                    offset.x -
+                    x,
+                y: startPositions[node.id].y +
+                    scaledClient.y -
+                    position.y -
+                    offset.y -
+                    y,
+            };
+            updateNodePos({ id: node.id, pos: pos });
         });
     };
     return (React.createElement("div", { className: "react-flow__nodesselection", style: {
-            transform: "translate(" + x + "px," + y + "px) scale(" + k + ")"
+            transform: "translate(" + x + "px," + y + "px) scale(" + k + ")",
         } },
         React.createElement(reactDraggable, { scale: k, onStart: function (evt) { return onStart(evt); }, onDrag: function (evt) { return onDrag(evt); } },
             React.createElement("div", { className: "react-flow__nodesselection-rect", style: {
                     width: state.selectedNodesBbox.width,
                     height: state.selectedNodesBbox.height,
                     top: state.selectedNodesBbox.y,
-                    left: state.selectedNodesBbox.x
+                    left: state.selectedNodesBbox.x,
                 } }))));
 });
 
@@ -8032,13 +8113,14 @@ var createGridDots = function (width, height, xOffset, yOffset, gap, size) {
         var x = col * gap + xOffset;
         return Array.from({ length: lineCountY }, function (_, row) {
             var y = row * gap + yOffset;
-            return "M" + x + " " + (y - size) + " l" + size + " " + size + " l" + -size + " " + size + " l" + -size + " " + -size + "z";
+            return "M" + x + " " + (y -
+                size) + " l" + size + " " + size + " l" + -size + " " + size + " l" + -size + " " + -size + "z";
         }).join(' ');
     });
     return values.join(' ');
 };
 var Grid = memo(function (_a) {
-    var _b = _a.gap, gap = _b === void 0 ? 24 : _b, _c = _a.color, color = _c === void 0 ? '#aaa' : _c, _d = _a.size, size = _d === void 0 ? 0.5 : _d, _e = _a.style, style = _e === void 0 ? {} : _e, _f = _a.className, className = _f === void 0 ? null : _f, _g = _a.backgroundType, backgroundType = _g === void 0 ? GridType.Dots : _g;
+    var _b = _a.gap, gap = _b === void 0 ? 24 : _b, _c = _a.color, color = _c === void 0 ? '#aaa' : _c, _d = _a.size, size = _d === void 0 ? 0.5 : _d, _e = _a.style, style = _e === void 0 ? {} : _e, _f = _a.className, className = _f === void 0 ? '' : _f, _g = _a.backgroundType, backgroundType = _g === void 0 ? GridType.Dots : _g;
     var _h = useStoreState$1(function (s) { return s; }), width = _h.width, height = _h.height, _j = _h.transform, x = _j[0], y = _j[1], scale = _j[2];
     var gridClasses = classnames('react-flow__grid', className);
     var scaledGap = gap * scale;
@@ -8057,11 +8139,11 @@ Grid.displayName = 'Grid';
 
 var isInputDOMNode = function (e) {
     var target = e.target;
-    return e && target && ['INPUT', 'SELECT', 'TEXTAREA'].includes(target.nodeName);
+    return (e && target && ['INPUT', 'SELECT', 'TEXTAREA'].includes(target.nodeName));
 };
 var getDimensions = function (node) { return ({
     width: node.offsetWidth,
-    height: node.offsetHeight
+    height: node.offsetHeight,
 }); };
 
 var useKeyPress = (function (keyCode) {
@@ -8099,8 +8181,10 @@ var useD3Zoom = (function (zoomPane, onMove, shiftPressed) {
     var initD3 = useStoreActions$1(function (actions) { return actions.initD3; });
     var updateTransform = useStoreActions$1(function (actions) { return actions.updateTransform; });
     useEffect(function () {
-        var selection = select(zoomPane.current).call(d3ZoomInstance);
-        initD3({ zoom: d3ZoomInstance, selection: selection });
+        if (zoomPane.current) {
+            var selection = select(zoomPane.current).call(d3ZoomInstance);
+            initD3({ zoom: d3ZoomInstance, selection: selection });
+        }
     }, []);
     useEffect(function () {
         if (shiftPressed) {
@@ -8108,13 +8192,14 @@ var useD3Zoom = (function (zoomPane, onMove, shiftPressed) {
         }
         else {
             d3ZoomInstance.on('zoom', function () {
-                if (event.sourceEvent && event.sourceEvent.target !== zoomPane.current) {
-                    return false;
+                if (event.sourceEvent &&
+                    event.sourceEvent.target !== zoomPane.current) {
+                    return;
                 }
                 updateTransform(event.transform);
                 onMove();
             });
-            if (state.d3Selection) {
+            if (state.d3Selection && state.d3Zoom) {
                 // we need to restore the graph transform otherwise d3 zoom transform and graph transform are not synced
                 var graphTransform = identity$1
                     .translate(state.transform[0], state.transform[1])
@@ -8130,14 +8215,18 @@ var useD3Zoom = (function (zoomPane, onMove, shiftPressed) {
 
 var useGlobalKeyHandler = (function (_a) {
     var deleteKeyCode = _a.deleteKeyCode, onElementsRemove = _a.onElementsRemove;
-    var state = useStoreState$1(function (s) { return ({ selectedElements: s.selectedElements, edges: s.edges }); });
+    var state = useStoreState$1(function (s) { return ({
+        selectedElements: s.selectedElements,
+        edges: s.edges,
+    }); });
     var setNodesSelection = useStoreActions$1(function (a) { return a.setNodesSelection; });
     var deleteKeyPressed = useKeyPress(deleteKeyCode);
     useEffect(function () {
         if (deleteKeyPressed && state.selectedElements.length) {
             var elementsToRemove = state.selectedElements;
             // we also want to remove the edges if only one node is selected
-            if (state.selectedElements.length === 1 && !isEdge(state.selectedElements[0])) {
+            if (state.selectedElements.length === 1 &&
+                !isEdge(state.selectedElements[0])) {
                 var node = state.selectedElements[0];
                 var connectedEdges = getConnectedEdges([node], state.edges);
                 elementsToRemove = __spreadArrays(state.selectedElements, connectedEdges);
@@ -8146,14 +8235,13 @@ var useGlobalKeyHandler = (function (_a) {
             setNodesSelection({ isActive: false });
         }
     }, [deleteKeyPressed]);
-    return null;
 });
 
 var useElementUpdater = function (elements) {
     var state = useStoreState$1(function (s) { return ({
         nodes: s.nodes,
         edges: s.edges,
-        transform: s.transform
+        transform: s.transform,
     }); });
     var setNodes = useStoreActions$1(function (a) { return a.setNodes; });
     var setEdges = useStoreActions$1(function (a) { return a.setEdges; });
@@ -8163,7 +8251,8 @@ var useElementUpdater = function (elements) {
         var nextNodes = nodes.map(function (propNode) {
             var existingNode = state.nodes.find(function (n) { return n.id === propNode.id; });
             if (existingNode) {
-                var data = !fastDeepEqual(existingNode.data, propNode.data) ? __assign(__assign({}, existingNode.data), propNode.data) : existingNode.data;
+                var data = !fastDeepEqual(existingNode.data, propNode.data)
+                    ? __assign(__assign({}, existingNode.data), propNode.data) : existingNode.data;
                 return __assign(__assign({}, existingNode), { data: data });
             }
             return parseElement(propNode, state.transform);
@@ -8177,11 +8266,10 @@ var useElementUpdater = function (elements) {
             setEdges(edges);
         }
     });
-    return null;
 };
 
 var GraphView = memo(function (_a) {
-    var nodeTypes = _a.nodeTypes, edgeTypes = _a.edgeTypes, onMove = _a.onMove, onLoad = _a.onLoad, onElementClick = _a.onElementClick, onNodeDragStop = _a.onNodeDragStop, connectionLineType = _a.connectionLineType, connectionLineStyle = _a.connectionLineStyle, selectionKeyCode = _a.selectionKeyCode, onElementsRemove = _a.onElementsRemove, deleteKeyCode = _a.deleteKeyCode, elements = _a.elements, showBackground = _a.showBackground, backgroundGap = _a.backgroundGap, backgroundColor = _a.backgroundColor, backgroundType = _a.backgroundType, onConnect = _a.onConnect;
+    var nodeTypes = _a.nodeTypes, edgeTypes = _a.edgeTypes, onMove = _a.onMove, onLoad = _a.onLoad, onElementClick = _a.onElementClick, onNodeDragStop = _a.onNodeDragStop, connectionLineType = _a.connectionLineType, connectionLineStyle = _a.connectionLineStyle, selectionKeyCode = _a.selectionKeyCode, onElementsRemove = _a.onElementsRemove, deleteKeyCode = _a.deleteKeyCode, elements = _a.elements, showBackground = _a.showBackground, backgroundGap = _a.backgroundGap, backgroundColor = _a.backgroundColor, backgroundType = _a.backgroundType, onConnect = _a.onConnect, snapToGrid = _a.snapToGrid, snapGrid = _a.snapGrid;
     var zoomPane = useRef(null);
     var rendererNode = useRef(null);
     var state = useStoreState$1(function (s) { return ({
@@ -8190,14 +8278,18 @@ var GraphView = memo(function (_a) {
         nodes: s.nodes,
         edges: s.edges,
         d3Initialised: s.d3Initialised,
-        nodesSelectionActive: s.nodesSelectionActive
+        nodesSelectionActive: s.nodesSelectionActive,
     }); });
     var updateSize = useStoreActions$1(function (actions) { return actions.updateSize; });
     var setNodesSelection = useStoreActions$1(function (actions) { return actions.setNodesSelection; });
     var setOnConnect = useStoreActions$1(function (a) { return a.setOnConnect; });
+    var setSnapGrid = useStoreActions$1(function (actions) { return actions.setSnapGrid; });
     var selectionKeyPressed = useKeyPress(selectionKeyCode);
     var onZoomPaneClick = function () { return setNodesSelection({ isActive: false }); };
     var updateDimensions = function () {
+        if (!rendererNode.current) {
+            return;
+        }
         var size = getDimensions(rendererNode.current);
         updateSize(size);
     };
@@ -8215,10 +8307,13 @@ var GraphView = memo(function (_a) {
             onLoad({
                 fitView: fitView,
                 zoomIn: zoomIn,
-                zoomOut: zoomOut
+                zoomOut: zoomOut,
             });
         }
     }, [state.d3Initialised]);
+    useEffect(function () {
+        setSnapGrid({ snapToGrid: snapToGrid, snapGrid: snapGrid });
+    }, [snapToGrid]);
     useGlobalKeyHandler({ onElementsRemove: onElementsRemove, deleteKeyCode: deleteKeyCode });
     useElementUpdater(elements);
     return (React.createElement("div", { className: "react-flow__renderer", ref: rendererNode },
@@ -8234,10 +8329,10 @@ GraphView.displayName = 'GraphView';
 function onMouseDown(evt, nodeId, setSourceId, setPosition, onConnect, isTarget, isValidConnection) {
     var reactFlowNode = document.querySelector('.react-flow');
     if (!reactFlowNode) {
-        return null;
+        return;
     }
     var containerBounds = reactFlowNode.getBoundingClientRect();
-    var recentHoveredHandle = null;
+    var recentHoveredHandle;
     setPosition({
         x: evt.clientX - containerBounds.left,
         y: evt.clientY - containerBounds.top,
@@ -8245,7 +8340,7 @@ function onMouseDown(evt, nodeId, setSourceId, setPosition, onConnect, isTarget,
     setSourceId(nodeId);
     function resetRecentHandle() {
         if (!recentHoveredHandle) {
-            return false;
+            return;
         }
         recentHoveredHandle.classList.remove('valid');
         recentHoveredHandle.classList.remove('connecting');
@@ -8257,9 +8352,11 @@ function onMouseDown(evt, nodeId, setSourceId, setPosition, onConnect, isTarget,
             elementBelow: elementBelow,
             isValid: false,
             connection: { source: null, target: null },
-            isHoveringHandle: false
+            isHoveringHandle: false,
         };
-        if (elementBelow && (elementBelow.classList.contains('target') || elementBelow.classList.contains('source'))) {
+        if (elementBelow &&
+            (elementBelow.classList.contains('target') ||
+                elementBelow.classList.contains('source'))) {
             var connection = { source: null, target: null };
             if (isTarget) {
                 var sourceId = elementBelow.getAttribute('data-nodeid');
@@ -8286,7 +8383,7 @@ function onMouseDown(evt, nodeId, setSourceId, setPosition, onConnect, isTarget,
             return resetRecentHandle();
         }
         var isOwnHandle = connection.source === connection.target;
-        if (!isOwnHandle) {
+        if (!isOwnHandle && elementBelow) {
             recentHoveredHandle = elementBelow;
             elementBelow.classList.add('connecting');
             elementBelow.classList.toggle('valid', isValid);
@@ -8308,9 +8405,14 @@ function onMouseDown(evt, nodeId, setSourceId, setPosition, onConnect, isTarget,
 var BaseHandle = memo(function (_a) {
     var type = _a.type, nodeId = _a.nodeId, onConnect = _a.onConnect, position = _a.position, setSourceId = _a.setSourceId, setPosition = _a.setPosition, className = _a.className, _b = _a.id, id = _b === void 0 ? false : _b, isValidConnection = _a.isValidConnection, rest = __rest(_a, ["type", "nodeId", "onConnect", "position", "setSourceId", "setPosition", "className", "id", "isValidConnection"]);
     var isTarget = type === 'target';
-    var handleClasses = classnames('react-flow__handle', className, position, { source: !isTarget, target: isTarget });
+    var handleClasses = classnames('react-flow__handle', className, position, {
+        source: !isTarget,
+        target: isTarget,
+    });
     var nodeIdWithHandleId = id ? nodeId + "__" + id : nodeId;
-    return (React.createElement("div", __assign({ "data-nodeid": nodeIdWithHandleId, "data-handlepos": position, className: handleClasses, onMouseDown: function (evt) { return onMouseDown(evt, nodeIdWithHandleId, setSourceId, setPosition, onConnect, isTarget, isValidConnection); } }, rest)));
+    return (React.createElement("div", __assign({ "data-nodeid": nodeIdWithHandleId, "data-handlepos": position, className: handleClasses, onMouseDown: function (evt) {
+            return onMouseDown(evt, nodeIdWithHandleId, setSourceId, setPosition, onConnect, isTarget, isValidConnection);
+        } }, rest)));
 });
 BaseHandle.displayName = 'BaseHandle';
 
@@ -8323,7 +8425,7 @@ var Handle = memo(function (_a) {
     var nodeId = useContext(NodeIdContext);
     var _f = useStoreActions$1(function (a) { return ({
         setPosition: a.setConnectionPosition,
-        setSourceId: a.setConnectionSourceId
+        setSourceId: a.setConnectionSourceId,
     }); }), setPosition = _f.setPosition, setSourceId = _f.setSourceId;
     var onConnectAction = useStoreState$1(function (s) { return s.onConnect; });
     var onConnectExtended = function (params) {
@@ -8338,7 +8440,7 @@ var nodeStyles = {
     background: '#ff6060',
     padding: 10,
     borderRadius: 5,
-    width: 150
+    width: 150,
 };
 var DefaultNode = (function (_a) {
     var data = _a.data, style = _a.style;
@@ -8352,7 +8454,7 @@ var nodeStyles$1 = {
     background: '#9999ff',
     padding: 10,
     borderRadius: 5,
-    width: 150
+    width: 150,
 };
 var InputNode = (function (_a) {
     var data = _a.data, style = _a.style;
@@ -8365,7 +8467,7 @@ var nodeStyles$2 = {
     background: '#55dd99',
     padding: 10,
     borderRadius: 5,
-    width: 150
+    width: 150,
 };
 var OutputNode = (function (_a) {
     var data = _a.data, style = _a.style;
@@ -8642,15 +8744,18 @@ var getHandleBounds = function (selector, nodeElement, parentBounds, k) {
     if (!handles || !handles.length) {
         return null;
     }
-    return [].map.call(handles, function (handle) {
+    var handlesArray = Array.from(handles);
+    return handlesArray.map(function (handle) {
         var bounds = handle.getBoundingClientRect();
         var dimensions = getDimensions(handle);
         var nodeIdAttr = handle.getAttribute('data-nodeid');
         var handlePosition = handle.getAttribute('data-handlepos');
-        var nodeIdSplitted = nodeIdAttr.split('__');
+        var nodeIdSplitted = nodeIdAttr ? nodeIdAttr.split('__') : null;
         var handleId = null;
         if (nodeIdSplitted) {
-            handleId = (nodeIdSplitted.length ? nodeIdSplitted[1] : nodeIdSplitted);
+            handleId = (nodeIdSplitted.length
+                ? nodeIdSplitted[1]
+                : nodeIdSplitted);
         }
         return __assign({ id: handleId, position: handlePosition, x: (bounds.left - parentBounds.left) * (1 / k), y: (bounds.top - parentBounds.top) * (1 / k) }, dimensions);
     });
@@ -8661,7 +8766,7 @@ var onStart = function (evt, onClick, id, type, data, setOffset, transform, posi
     }
     var scaledClient = {
         x: evt.clientX * (1 / transform[2]),
-        y: evt.clientY * (1 / transform[2])
+        y: evt.clientY * (1 / transform[2]),
     };
     var offsetX = scaledClient.x - position.x - transform[0];
     var offsetY = scaledClient.y - position.y - transform[1];
@@ -8673,19 +8778,25 @@ var onStart = function (evt, onClick, id, type, data, setOffset, transform, posi
 var onDrag = function (evt, setDragging, id, offset, transform) {
     var scaledClient = {
         x: evt.clientX * (1 / transform[2]),
-        y: evt.clientY * (1 / transform[2])
+        y: evt.clientY * (1 / transform[2]),
     };
     setDragging(true);
-    store.dispatch.updateNodePos({ id: id, pos: {
+    store.dispatch.updateNodePos({
+        id: id,
+        pos: {
             x: scaledClient.x - transform[0] - offset.x,
-            y: scaledClient.y - transform[1] - offset.y
-        } });
+            y: scaledClient.y - transform[1] - offset.y,
+        },
+    });
 };
 var onStop = function (onNodeDragStop, isDragging, setDragging, id, type, position, data) {
     if (isDragging) {
         setDragging(false);
         onNodeDragStop({
-            id: id, type: type, position: position, data: data
+            id: id,
+            type: type,
+            position: position,
+            data: data,
         });
     }
 };
@@ -8697,17 +8808,20 @@ var wrapNode = (function (NodeComponent) {
         var _c = useState(false), isDragging = _c[0], setDragging = _c[1];
         var position = { x: xPos, y: yPos };
         var nodeClasses = classnames('react-flow__node', { selected: selected });
-        var nodeStyle = { zIndex: selected ? 10 : 3, transform: "translate(" + xPos + "px," + yPos + "px)" };
+        var nodeStyle = {
+            zIndex: selected ? 10 : 3,
+            transform: "translate(" + xPos + "px," + yPos + "px)",
+        };
         var updateNode = function () {
             if (!nodeElement.current) {
-                return false;
+                return;
             }
             var storeState = store.getState();
             var bounds = nodeElement.current.getBoundingClientRect();
             var dimensions = getDimensions(nodeElement.current);
             var handleBounds = {
                 source: getHandleBounds('.source', nodeElement.current, bounds, storeState.transform[2]),
-                target: getHandleBounds('.target', nodeElement.current, bounds, storeState.transform[2])
+                target: getHandleBounds('.target', nodeElement.current, bounds, storeState.transform[2]),
             };
             store.dispatch.updateNodeData(__assign(__assign({ id: id }, dimensions), { handleBounds: handleBounds }));
         };
@@ -8727,8 +8841,15 @@ var wrapNode = (function (NodeComponent) {
                     }
                 };
             }
+            return;
         }, [nodeElement.current]);
-        return (React.createElement(DraggableCore, { onStart: function (evt) { return onStart(evt, onClick, id, type, data, setOffset, transform, position); }, onDrag: function (evt) { return onDrag(evt, setDragging, id, offset, transform); }, onStop: function () { return onStop(onNodeDragStop, isDragging, setDragging, id, type, position, data); }, scale: transform[2] },
+        return (React.createElement(DraggableCore, { onStart: function (evt) {
+                return onStart(evt, onClick, id, type, data, setOffset, transform, position);
+            }, onDrag: function (evt) {
+                return onDrag(evt, setDragging, id, offset, transform);
+            }, onStop: function () {
+                return onStop(onNodeDragStop, isDragging, setDragging, id, type, position, data);
+            }, scale: transform[2] },
             React.createElement("div", { className: nodeClasses, ref: nodeElement, style: nodeStyle },
                 React.createElement(Provider, { value: id },
                     React.createElement(NodeComponent, { id: id, data: data, type: type, style: style, selected: selected })))));
@@ -8741,15 +8862,15 @@ function createNodeTypes(nodeTypes) {
     var standardTypes = {
         input: wrapNode((nodeTypes.input || InputNode)),
         default: wrapNode((nodeTypes.default || DefaultNode)),
-        output: wrapNode((nodeTypes.output || OutputNode))
+        output: wrapNode((nodeTypes.output || OutputNode)),
     };
-    var specialTypes = Object
-        .keys(nodeTypes)
+    var wrappedTypes = {};
+    var specialTypes = Object.keys(nodeTypes)
         .filter(function (k) { return !['input', 'default', 'output'].includes(k); })
         .reduce(function (res, key) {
         res[key] = wrapNode((nodeTypes[key] || DefaultNode));
         return res;
-    }, {});
+    }, wrappedTypes);
     return __assign(__assign({}, standardTypes), specialTypes);
 }
 
@@ -8758,15 +8879,17 @@ var BezierEdge = memo(function (_a) {
     var yOffset = Math.abs(targetY - sourceY) / 2;
     var centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
     var dAttr = "M" + sourceX + "," + sourceY + " C" + sourceX + "," + centerY + " " + targetX + "," + centerY + " " + targetX + "," + targetY;
-    if (['left', 'right'].includes(sourcePosition) && ['left', 'right'].includes(targetPosition)) {
+    if (['left', 'right'].includes(sourcePosition) &&
+        ['left', 'right'].includes(targetPosition)) {
         var xOffset = Math.abs(targetX - sourceX) / 2;
         var centerX = targetX < sourceX ? targetX + xOffset : targetX - xOffset;
         dAttr = "M" + sourceX + "," + sourceY + " C" + centerX + "," + sourceY + " " + centerX + "," + targetY + " " + targetX + "," + targetY;
     }
-    else if (['left', 'right'].includes(sourcePosition) || ['left', 'right'].includes(targetPosition)) {
+    else if (['left', 'right'].includes(sourcePosition) ||
+        ['left', 'right'].includes(targetPosition)) {
         dAttr = "M" + sourceX + "," + sourceY + " C" + sourceX + "," + targetY + " " + sourceX + "," + targetY + " " + targetX + "," + targetY;
     }
-    return (React.createElement("path", __assign({}, style, { d: dAttr })));
+    return React.createElement("path", __assign({}, style, { d: dAttr }));
 });
 
 var StraightEdge = memo(function (_a) {
@@ -8787,7 +8910,7 @@ var wrapEdge = (function (EdgeComponent) {
         var edgeClasses = classnames('react-flow__edge', { selected: selected, animated: animated });
         var onEdgeClick = function (evt) {
             if (isInputDOMNode(evt)) {
-                return false;
+                return;
             }
             store.dispatch.setSelectedElements({ id: id, source: source, target: target });
             onClick({ id: id, source: source, target: target, type: type });
@@ -8802,15 +8925,15 @@ var wrapEdge = (function (EdgeComponent) {
 function createEdgeTypes(edgeTypes) {
     var standardTypes = {
         default: wrapEdge((edgeTypes.default || BezierEdge)),
-        straight: wrapEdge((edgeTypes.bezier || StraightEdge))
+        straight: wrapEdge((edgeTypes.bezier || StraightEdge)),
     };
-    var specialTypes = Object
-        .keys(edgeTypes)
+    var wrappedTypes = {};
+    var specialTypes = Object.keys(edgeTypes)
         .filter(function (k) { return !['default', 'bezier'].includes(k); })
         .reduce(function (res, key) {
         res[key] = wrapEdge((edgeTypes[key] || BezierEdge));
         return res;
-    }, {});
+    }, wrappedTypes);
     return __assign(__assign({}, standardTypes), specialTypes);
 }
 
@@ -8845,12 +8968,12 @@ var css = ".react-flow {\n  width: 100%;\n  height: 100%;\n  position: relative;
 styleInject(css);
 
 var ReactFlow = function (_a) {
-    var style = _a.style, onElementClick = _a.onElementClick, elements = _a.elements, children = _a.children, nodeTypes = _a.nodeTypes, edgeTypes = _a.edgeTypes, onLoad = _a.onLoad, onMove = _a.onMove, onElementsRemove = _a.onElementsRemove, onConnect = _a.onConnect, onNodeDragStop = _a.onNodeDragStop, connectionLineType = _a.connectionLineType, connectionLineStyle = _a.connectionLineStyle, deleteKeyCode = _a.deleteKeyCode, selectionKeyCode = _a.selectionKeyCode, showBackground = _a.showBackground, backgroundGap = _a.backgroundGap, backgroundType = _a.backgroundType, backgroundColor = _a.backgroundColor;
+    var style = _a.style, onElementClick = _a.onElementClick, elements = _a.elements, children = _a.children, nodeTypes = _a.nodeTypes, edgeTypes = _a.edgeTypes, onLoad = _a.onLoad, onMove = _a.onMove, onElementsRemove = _a.onElementsRemove, onConnect = _a.onConnect, onNodeDragStop = _a.onNodeDragStop, connectionLineType = _a.connectionLineType, connectionLineStyle = _a.connectionLineStyle, deleteKeyCode = _a.deleteKeyCode, selectionKeyCode = _a.selectionKeyCode, showBackground = _a.showBackground, backgroundGap = _a.backgroundGap, backgroundType = _a.backgroundType, backgroundColor = _a.backgroundColor, snapToGrid = _a.snapToGrid, snapGrid = _a.snapGrid;
     var nodeTypesParsed = useMemo(function () { return createNodeTypes(nodeTypes); }, []);
     var edgeTypesParsed = useMemo(function () { return createEdgeTypes(edgeTypes); }, []);
     return (React.createElement("div", { style: style, className: "react-flow" },
         React.createElement(StoreProvider, { store: store },
-            React.createElement(GraphView, { onLoad: onLoad, onMove: onMove, onElementClick: onElementClick, onNodeDragStop: onNodeDragStop, nodeTypes: nodeTypesParsed, edgeTypes: edgeTypesParsed, connectionLineType: connectionLineType, connectionLineStyle: connectionLineStyle, selectionKeyCode: selectionKeyCode, onElementsRemove: onElementsRemove, deleteKeyCode: deleteKeyCode, elements: elements, onConnect: onConnect, backgroundColor: backgroundColor, backgroundGap: backgroundGap, showBackground: showBackground, backgroundType: backgroundType }),
+            React.createElement(GraphView, { onLoad: onLoad, onMove: onMove, onElementClick: onElementClick, onNodeDragStop: onNodeDragStop, nodeTypes: nodeTypesParsed, edgeTypes: edgeTypesParsed, connectionLineType: connectionLineType, connectionLineStyle: connectionLineStyle, selectionKeyCode: selectionKeyCode, onElementsRemove: onElementsRemove, deleteKeyCode: deleteKeyCode, elements: elements, onConnect: onConnect, backgroundColor: backgroundColor, backgroundGap: backgroundGap, showBackground: showBackground, backgroundType: backgroundType, snapToGrid: snapToGrid, snapGrid: snapGrid }),
             children)));
 };
 ReactFlow.displayName = 'ReactFlow';
@@ -8864,12 +8987,12 @@ ReactFlow.defaultProps = {
     nodeTypes: {
         input: InputNode,
         default: DefaultNode,
-        output: OutputNode
+        output: OutputNode,
     },
     edgeTypes: {
         default: BezierEdge,
         straight: StraightEdge,
-        step: StepEdge
+        step: StepEdge,
     },
     connectionLineType: 'bezier',
     connectionLineStyle: {},
@@ -8878,7 +9001,9 @@ ReactFlow.defaultProps = {
     backgroundColor: '#eee',
     backgroundGap: 24,
     showBackground: true,
-    backgroundType: GridType.Dots
+    backgroundType: GridType.Dots,
+    snapToGrid: false,
+    snapGrid: [16, 16],
 };
 
 var baseStyle = {
@@ -8886,7 +9011,7 @@ var baseStyle = {
     zIndex: 5,
     bottom: 10,
     right: 10,
-    width: 200
+    width: 200,
 };
 var index = (function (_a) {
     var _b = _a.style, style = _b === void 0 ? {} : _b, className = _a.className, _c = _a.bgColor, bgColor = _c === void 0 ? '#f8f8f8' : _c, _d = _a.nodeColor, nodeColor = _d === void 0 ? '#ddd' : _d;
@@ -8903,23 +9028,29 @@ var index = (function (_a) {
     var height = (state.height / (state.width || 1)) * width;
     var bbox = { x: 0, y: 0, width: state.width, height: state.height };
     var scaleFactor = width / state.width;
-    var nodeColorFunc = (nodeColor instanceof Function ? nodeColor : function () { return nodeColor; });
+    var nodeColorFunc = (nodeColor instanceof Function
+        ? nodeColor
+        : function () { return nodeColor; });
     useEffect(function () {
-        if (canvasNode && canvasNode.current) {
-            var ctx_1 = canvasNode.current.getContext('2d');
-            var nodesInside = getNodesInside(state.nodes, bbox, state.transform, true);
-            ctx_1.fillStyle = bgColor;
-            ctx_1.fillRect(0, 0, width, height);
-            nodesInside.forEach(function (n) {
-                var pos = n.__rg.position;
-                var transformX = state.transform[0];
-                var transformY = state.transform[1];
-                var x = (pos.x * state.transform[2]) + transformX;
-                var y = (pos.y * state.transform[2]) + transformY;
-                ctx_1.fillStyle = nodeColorFunc(n);
-                ctx_1.fillRect((x * scaleFactor), (y * scaleFactor), n.__rg.width * scaleFactor * state.transform[2], n.__rg.height * scaleFactor * state.transform[2]);
-            });
+        if (!canvasNode || !canvasNode.current) {
+            return;
         }
+        var ctx = canvasNode.current.getContext('2d');
+        if (!ctx) {
+            return;
+        }
+        var nodesInside = getNodesInside(state.nodes, bbox, state.transform, true);
+        ctx.fillStyle = bgColor;
+        ctx.fillRect(0, 0, width, height);
+        nodesInside.forEach(function (n) {
+            var pos = n.__rg.position;
+            var transformX = state.transform[0];
+            var transformY = state.transform[1];
+            var x = pos.x * state.transform[2] + transformX;
+            var y = pos.y * state.transform[2] + transformY;
+            ctx.fillStyle = nodeColorFunc(n);
+            ctx.fillRect(x * scaleFactor, y * scaleFactor, n.__rg.width * scaleFactor * state.transform[2], n.__rg.height * scaleFactor * state.transform[2]);
+        });
     }, [canvasNode.current, nodePositions, state.transform, height]);
     return (React.createElement("canvas", { style: __assign(__assign(__assign({}, baseStyle), style), { height: height }), width: width, height: height, className: mapClasses, ref: canvasNode }));
 });

dist/ReactFlow.js

@@ -5763,6 +5763,8 @@ var storeModel = {
     selection: null,
     connectionSourceId: null,
     connectionPosition: { x: 0, y: 0 },
+    snapGrid: [16, 16],
+    snapToGrid: true,
     onConnect: function () { },
     setOnConnect: action(function (state, onConnect) {
         state.onConnect = onConnect;
@@ -5783,9 +5785,18 @@ var storeModel = {
     }),
     updateNodePos: action(function (state, _a) {
         var id = _a.id, pos = _a.pos;
+        var position = pos;
+        if (state.snapToGrid) {
+            var transformedGridSizeX = state.snapGrid[0] * state.transform[2];
+            var transformedGridSizeY = state.snapGrid[1] * state.transform[2];
+            position = {
+                x: transformedGridSizeX * Math.round(pos.x / transformedGridSizeX),
+                y: transformedGridSizeY * Math.round(pos.y / transformedGridSizeY),
+            };
+        }
         state.nodes.forEach(function (n) {
             if (n.id === id) {
-                n.__rg = __assign(__assign({}, n.__rg), { position: pos });
+                n.__rg = __assign(__assign({}, n.__rg), { position: position });
             }
         });
     }),
@@ -5794,7 +5805,7 @@ var storeModel = {
     }),
     setNodesSelection: action(function (state, _a) {
         var isActive = _a.isActive, selection = _a.selection;
-        if (!isActive) {
+        if (!isActive || typeof selection === 'undefined') {
             state.nodesSelectionActive = false;
             state.selectedElements = [];
             return;
@@ -5809,7 +5820,9 @@ var storeModel = {
     setSelectedElements: action(function (state, elements) {
         var selectedElementsArr = Array.isArray(elements) ? elements : [elements];
         var selectedElementsUpdated = !fastDeepEqual(selectedElementsArr, state.selectedElements);
-        var selectedElements = selectedElementsUpdated ? selectedElementsArr : state.selectedElements;
+        var selectedElements = selectedElementsUpdated
+            ? selectedElementsArr
+            : state.selectedElements;
         state.selectedElements = selectedElements;
     }),
     updateSelection: action(function (state, selection) {
@@ -5818,7 +5831,9 @@ var storeModel = {
         var nextSelectedElements = __spreadArrays(selectedNodes, selectedEdges);
         var selectedElementsUpdated = !fastDeepEqual(nextSelectedElements, state.selectedElements);
         state.selection = selection;
-        state.selectedElements = selectedElementsUpdated ? nextSelectedElements : state.selectedElements;
+        state.selectedElements = selectedElementsUpdated
+            ? nextSelectedElements
+            : state.selectedElements;
     }),
     updateTransform: action(function (state, transform) {
         state.transform = [transform.x, transform.y, transform.k];
@@ -5838,7 +5853,12 @@ var storeModel = {
     }),
     setConnectionSourceId: action(function (state, sourceId) {
         state.connectionSourceId = sourceId;
-    })
+    }),
+    setSnapGrid: action(function (state, _a) {
+        var snapToGrid = _a.snapToGrid, snapGrid = _a.snapGrid;
+        state.snapToGrid = snapToGrid;
+        state.snapGrid = snapGrid;
+    }),
 };
 var store = createStore$1(storeModel);
 
@@ -5852,7 +5872,9 @@ var getOutgoers = function (node, elements) {
     if (!isNode(node)) {
         return [];
     }
-    var outgoerIds = elements.filter(function (e) { return e.source === node.id; }).map(function (e) { return e.target; });
+    var outgoerIds = elements
+        .filter(function (e) { return e.source === node.id; })
+        .map(function (e) { return e.target; });
     return elements.filter(function (e) { return outgoerIds.includes(e.id); });
 };
 var removeElements = function (elementsToRemove, elements) {
@@ -5871,7 +5893,9 @@ var addEdge = function (edgeParams, elements) {
     if (!edgeParams.source || !edgeParams.target) {
         throw new Error('Can not create edge. An edge needs a source and a target');
     }
-    return elements.concat(__assign(__assign({}, edgeParams), { id: typeof edgeParams.id !== 'undefined' ? edgeParams.id : getEdgeId(edgeParams) }));
+    return elements.concat(__assign(__assign({}, edgeParams), { id: typeof edgeParams.id !== 'undefined'
+            ? edgeParams.id
+            : getEdgeId(edgeParams) }));
 };
 var pointToRendererPoint = function (_a, transform) {
     var x = _a.x, y = _a.y;
@@ -5879,10 +5903,11 @@ var pointToRendererPoint = function (_a, transform) {
     var rendererY = (y - transform[1]) * (1 / transform[2]);
     return {
         x: rendererX,
-        y: rendererY
+        y: rendererY,
     };
 };
 var parseElement = function (element, transform) {
+    if (transform === void 0) { transform = [0, 0, 1]; }
     if (!element.id) {
         throw new Error('All elements (nodes and edges) need to have an id.');
     }
@@ -5894,7 +5919,7 @@ var parseElement = function (element, transform) {
             position: pointToRendererPoint(nodeElement.position, transform),
             width: null,
             height: null,
-            handleBounds: {}
+            handleBounds: {},
         } });
 };
 var getBoundingBox = function (nodes) {
@@ -5919,23 +5944,22 @@ var getBoundingBox = function (nodes) {
         minX: Number.MAX_VALUE,
         minY: Number.MAX_VALUE,
         maxX: 0,
-        maxY: 0
+        maxY: 0,
     });
     return {
         x: bbox.minX,
         y: bbox.minY,
         width: bbox.maxX - bbox.minX,
-        height: bbox.maxY - bbox.minY
+        height: bbox.maxY - bbox.minY,
     };
 };
 var getNodesInside = function (nodes, bbox, transform, partially) {
     if (transform === void 0) { transform = [0, 0, 1]; }
     if (partially === void 0) { partially = false; }
-    return nodes
-        .filter(function (n) {
+    return nodes.filter(function (n) {
         var bboxPos = {
             x: (bbox.x - transform[0]) * (1 / transform[2]),
-            y: (bbox.y - transform[1]) * (1 / transform[2])
+            y: (bbox.y - transform[1]) * (1 / transform[2]),
         };
         var bboxWidth = bbox.width * (1 / transform[2]);
         var bboxHeight = bbox.height * (1 / transform[2]);
@@ -5944,8 +5968,10 @@ var getNodesInside = function (nodes, bbox, transform, partially) {
         var nodeHeight = partially ? 0 : height;
         var offsetX = partially ? width : 0;
         var offsetY = partially ? height : 0;
-        return ((position.x + offsetX > bboxPos.x && (position.x + nodeWidth) < (bboxPos.x + bboxWidth)) &&
-            (position.y + offsetY > bboxPos.y && (position.y + nodeHeight) < (bboxPos.y + bboxHeight)));
+        return (position.x + offsetX > bboxPos.x &&
+            position.x + nodeWidth < bboxPos.x + bboxWidth &&
+            (position.y + offsetY > bboxPos.y &&
+                position.y + nodeHeight < bboxPos.y + bboxHeight));
     });
 };
 var getConnectedEdges = function (nodes, edges) {
@@ -5961,21 +5987,36 @@ var getConnectedEdges = function (nodes, edges) {
 var fitView = function (_a) {
     var padding = (_a === void 0 ? { padding: 0 } : _a).padding;
     var state = store.getState();
+    if (!state.d3Selection || !state.d3Zoom) {
+        return;
+    }
     var bounds = getBoundingBox(state.nodes);
     var maxBoundsSize = Math.max(bounds.width, bounds.height);
-    var k = Math.min(state.width, state.height) / (maxBoundsSize + (maxBoundsSize * padding));
-    var boundsCenterX = bounds.x + (bounds.width / 2);
-    var boundsCenterY = bounds.y + (bounds.height / 2);
-    var transform = [(state.width / 2) - (boundsCenterX * k), (state.height / 2) - (boundsCenterY * k)];
-    var fittedTransform = identity$1.translate(transform[0], transform[1]).scale(k);
+    var k = Math.min(state.width, state.height) /
+        (maxBoundsSize + maxBoundsSize * padding);
+    var boundsCenterX = bounds.x + bounds.width / 2;
+    var boundsCenterY = bounds.y + bounds.height / 2;
+    var transform = [
+        state.width / 2 - boundsCenterX * k,
+        state.height / 2 - boundsCenterY * k,
+    ];
+    var fittedTransform = identity$1
+        .translate(transform[0], transform[1])
+        .scale(k);
     state.d3Selection.call(state.d3Zoom.transform, fittedTransform);
 };
 var zoomIn = function () {
     var state = store.getState();
+    if (!state.d3Zoom || !state.d3Selection) {
+        return;
+    }
     state.d3Zoom.scaleTo(state.d3Selection, state.transform[2] + 0.2);
 };
 var zoomOut = function () {
     var state = store.getState();
+    if (!state.d3Zoom || !state.d3Selection) {
+        return;
+    }
     state.d3Zoom.scaleTo(state.d3Selection, state.transform[2] - 0.2);
 };
 
@@ -5984,21 +6025,24 @@ function renderNode(node, props, state) {
     if (!props.nodeTypes[nodeType]) {
         console.warn("No node type found for type \"" + nodeType + "\". Using fallback type \"default\".");
     }
-    var NodeComponent = (props.nodeTypes[nodeType] || props.nodeTypes.default);
+    var NodeComponent = (props.nodeTypes[nodeType] ||
+        props.nodeTypes.default);
     var selected = state.selectedElements
         .filter(isNode)
         .map(function (e) { return e.id; })
         .includes(node.id);
-    return (React__default.createElement(NodeComponent, { key: node.id, id: node.id, type: node.type, data: node.data, xPos: node.__rg.position.x, yPos: node.__rg.position.y, onClick: props.onElementClick, onNodeDragStop: props.onNodeDragStop, transform: state.transform, selected: selected, style: node.style }));
+    return (React__default.createElement(NodeComponent, { key: node.id, id: node.id, type: nodeType, data: node.data, xPos: node.__rg.position.x, yPos: node.__rg.position.y, onClick: props.onElementClick, onNodeDragStop: props.onNodeDragStop, transform: state.transform, selected: selected, style: node.style }));
 }
 var NodeRenderer = React.memo(function (props) {
     var state = useStoreState$1(function (s) { return ({
         nodes: s.nodes,
         transform: s.transform,
-        selectedElements: s.selectedElements
+        selectedElements: s.selectedElements,
     }); });
     var transform = state.transform, nodes = state.nodes;
-    var transformStyle = { transform: "translate(" + transform[0] + "px," + transform[1] + "px) scale(" + transform[2] + ")" };
+    var transformStyle = {
+        transform: "translate(" + transform[0] + "px," + transform[1] + "px) scale(" + transform[2] + ")",
+    };
     return (React__default.createElement("div", { className: "react-flow__nodes", style: transformStyle }, nodes.map(function (node) { return renderNode(node, props, state); })));
 });
 NodeRenderer.displayName = 'NodeRenderer';
@@ -6075,11 +6119,15 @@ var ConnectionLine = (function (_a) {
         return null;
     }
     var edgeClasses = classnames('react-flow__edge', 'connection', className);
-    var sourceHandle = handleId ?
-        sourceNode.__rg.handleBounds.source.find(function (d) { return d.id === handleId; }) :
-        sourceNode.__rg.handleBounds.source[0];
-    var sourceHandleX = sourceHandle ? sourceHandle.x + (sourceHandle.width / 2) : sourceNode.__rg.width / 2;
-    var sourceHandleY = sourceHandle ? sourceHandle.y + (sourceHandle.height / 2) : sourceNode.__rg.height;
+    var sourceHandle = handleId
+        ? sourceNode.__rg.handleBounds.source.find(function (d) { return d.id === handleId; })
+        : sourceNode.__rg.handleBounds.source[0];
+    var sourceHandleX = sourceHandle
+        ? sourceHandle.x + sourceHandle.width / 2
+        : sourceNode.__rg.width / 2;
+    var sourceHandleY = sourceHandle
+        ? sourceHandle.y + sourceHandle.height / 2
+        : sourceNode.__rg.height;
     var sourceX = sourceNode.__rg.position.x + sourceHandleX;
     var sourceY = sourceNode.__rg.position.y + sourceHandleY;
     var targetX = (connectionPositionX - transform[0]) * (1 / transform[2]);
@@ -6101,42 +6149,49 @@ function getHandlePosition(position, node, handle) {
     if (handle === void 0) { handle = null; }
     if (!handle) {
         switch (position) {
-            case 'top': return {
-                x: node.__rg.width / 2,
-                y: 0
-            };
-            case 'right': return {
-                x: node.__rg.width,
-                y: node.__rg.height / 2
-            };
-            case 'bottom': return {
-                x: node.__rg.width / 2,
-                y: node.__rg.height
-            };
-            case 'left': return {
-                x: 0,
-                y: node.__rg.height / 2
-            };
+            case 'top':
+                return {
+                    x: node.__rg.width / 2,
+                    y: 0,
+                };
+            case 'right':
+                return {
+                    x: node.__rg.width,
+                    y: node.__rg.height / 2,
+                };
+            case 'bottom':
+                return {
+                    x: node.__rg.width / 2,
+                    y: node.__rg.height,
+                };
+            case 'left':
+                return {
+                    x: 0,
+                    y: node.__rg.height / 2,
+                };
         }
-        return null;
     }
     switch (position) {
-        case 'top': return {
-            x: handle.x + (handle.width / 2),
-            y: handle.y
-        };
-        case 'right': return {
-            x: handle.x + handle.width,
-            y: handle.y + (handle.height / 2)
-        };
-        case 'bottom': return {
-            x: handle.x + (handle.width / 2),
-            y: handle.y + handle.height
-        };
-        case 'left': return {
-            x: handle.x,
-            y: handle.y + (handle.height / 2)
-        };
+        case 'top':
+            return {
+                x: handle.x + handle.width / 2,
+                y: handle.y,
+            };
+        case 'right':
+            return {
+                x: handle.x + handle.width,
+                y: handle.y + handle.height / 2,
+            };
+        case 'bottom':
+            return {
+                x: handle.x + handle.width / 2,
+                y: handle.y + handle.height,
+            };
+        case 'left':
+            return {
+                x: handle.x,
+                y: handle.y + handle.height / 2,
+            };
     }
 }
 function getHandle(bounds, handleId) {
@@ -6162,7 +6217,10 @@ function getEdgePositions(sourceNode, sourceHandle, sourcePosition, targetNode,
     var targetX = targetNode.__rg.position.x + targetHandlePos.x;
     var targetY = targetNode.__rg.position.y + targetHandlePos.y;
     return {
-        sourceX: sourceX, sourceY: sourceY, targetX: targetX, targetY: targetY
+        sourceX: sourceX,
+        sourceY: sourceY,
+        targetX: targetX,
+        targetY: targetY,
     };
 }
 function renderEdge(edge, props, state) {
@@ -6200,7 +6258,7 @@ var EdgeRenderer = React.memo(function (_a) {
         transform: s.transform,
         selectedElements: s.selectedElements,
         connectionSourceId: s.connectionSourceId,
-        position: s.connectionPosition
+        position: s.connectionPosition,
     }); });
     if (!width) {
         return null;
@@ -6209,7 +6267,12 @@ var EdgeRenderer = React.memo(function (_a) {
     var transformStyle = "translate(" + transform[0] + "," + transform[1] + ") scale(" + transform[2] + ")";
     return (React__default.createElement("svg", { width: width, height: height, className: "react-flow__edges" },
         React__default.createElement("g", { transform: transformStyle },
-            edges.map(function (e) { return renderEdge(e, __assign({ width: width, height: height, connectionLineStyle: connectionLineStyle, connectionLineType: connectionLineType }, rest), state); }),
+            edges.map(function (e) {
+                return renderEdge(e, __assign({ width: width,
+                    height: height,
+                    connectionLineStyle: connectionLineStyle,
+                    connectionLineType: connectionLineType }, rest), state);
+            }),
             connectionSourceId && (React__default.createElement(ConnectionLine, { nodes: nodes, connectionSourceId: connectionSourceId, connectionPositionX: position.x, connectionPositionY: position.y, transform: transform, connectionLineStyle: connectionLineStyle, connectionLineType: connectionLineType })))));
 });
 EdgeRenderer.displayName = 'EdgeRenderer';
@@ -6221,7 +6284,7 @@ var initialRect = {
     y: 0,
     width: 0,
     height: 0,
-    draw: false
+    draw: false,
 };
 function getMousePosition(evt) {
     var reactFlowNode = document.querySelector('.react-flow');
@@ -6244,7 +6307,7 @@ var UserSelection = React.memo(function () {
         function onMouseDown(evt) {
             var mousePos = getMousePosition(evt);
             if (!mousePos) {
-                return false;
+                return;
             }
             setRect(function (currentRect) { return (__assign(__assign({}, currentRect), { startX: mousePos.x, startY: mousePos.y, x: mousePos.x, y: mousePos.y, draw: true })); });
             setSelection(true);
@@ -6260,7 +6323,11 @@ var UserSelection = React.memo(function () {
                 }
                 var negativeX = mousePos.x < currentRect.startX;
                 var negativeY = mousePos.y < currentRect.startY;
-                var nextRect = __assign(__assign({}, currentRect), { x: negativeX ? mousePos.x : currentRect.x, y: negativeY ? mousePos.y : currentRect.y, width: negativeX ? currentRect.startX - mousePos.x : mousePos.x - currentRect.startX, height: negativeY ? currentRect.startY - mousePos.y : mousePos.y - currentRect.startY });
+                var nextRect = __assign(__assign({}, currentRect), { x: negativeX ? mousePos.x : currentRect.x, y: negativeY ? mousePos.y : currentRect.y, width: negativeX
+                        ? currentRect.startX - mousePos.x
+                        : mousePos.x - currentRect.startX, height: negativeY
+                        ? currentRect.startY - mousePos.y
+                        : mousePos.y - currentRect.startY });
                 updateSelection(nextRect);
                 return nextRect;
             });
@@ -6272,19 +6339,25 @@ var UserSelection = React.memo(function () {
                 return __assign(__assign({}, currentRect), { draw: false });
             });
         }
-        selectionPane.current.addEventListener('mousedown', onMouseDown);
-        selectionPane.current.addEventListener('mousemove', onMouseMove);
-        selectionPane.current.addEventListener('mouseup', onMouseUp);
-        return function () {
-            selectionPane.current.removeEventListener('mousedown', onMouseDown);
-            selectionPane.current.removeEventListener('mousemove', onMouseMove);
-            selectionPane.current.removeEventListener('mouseup', onMouseUp);
-        };
-    }, []);
+        if (selectionPane.current) {
+            selectionPane.current.addEventListener('mousedown', onMouseDown);
+            selectionPane.current.addEventListener('mousemove', onMouseMove);
+            selectionPane.current.addEventListener('mouseup', onMouseUp);
+            return function () {
+                if (!selectionPane.current) {
+                    return;
+                }
+                selectionPane.current.removeEventListener('mousedown', onMouseDown);
+                selectionPane.current.removeEventListener('mousemove', onMouseMove);
+                selectionPane.current.removeEventListener('mouseup', onMouseUp);
+            };
+        }
+        return;
+    }, [selectionPane.current]);
     return (React__default.createElement("div", { className: "react-flow__selectionpane", ref: selectionPane }, rect.draw && (React__default.createElement("div", { className: "react-flow__selection", style: {
             width: rect.width,
             height: rect.height,
-            transform: "translate(" + rect.x + "px, " + rect.y + "px)"
+            transform: "translate(" + rect.x + "px, " + rect.y + "px)",
         } }))));
 });
 
@@ -7955,16 +8028,15 @@ reactDraggable.default = default_1;
 reactDraggable.DraggableCore = DraggableCore;
 
 function getStartPositions(elements) {
-    return elements
-        .filter(isNode)
-        .reduce(function (res, node) {
+    var startPositions = {};
+    return elements.filter(isNode).reduce(function (res, node) {
         var startPosition = {
             x: node.__rg.position.x || node.position.x,
-            y: node.__rg.position.y || node.position.x
+            y: node.__rg.position.y || node.position.x,
         };
         res[node.id] = startPosition;
         return res;
-    }, {});
+    }, startPositions);
 }
 var NodesSelection = React.memo(function () {
     var _a = React.useState({ x: 0, y: 0 }), offset = _a[0], setOffset = _a[1];
@@ -7972,7 +8044,7 @@ var NodesSelection = React.memo(function () {
     var state = useStoreState$1(function (s) { return ({
         transform: s.transform,
         selectedNodesBbox: s.selectedNodesBbox,
-        selectedElements: s.selectedElements
+        selectedElements: s.selectedElements,
     }); });
     var updateNodePos = useStoreActions$1(function (a) { return a.updateNodePos; });
     var _c = state.transform, x = _c[0], y = _c[1], k = _c[2];
@@ -7980,37 +8052,46 @@ var NodesSelection = React.memo(function () {
     var onStart = function (evt) {
         var scaledClient = {
             x: evt.clientX * (1 / k),
-            y: evt.clientY * (1 / k)
+            y: evt.clientY * (1 / k),
         };
         var offsetX = scaledClient.x - position.x - x;
         var offsetY = scaledClient.y - position.y - y;
-        var startPositions = getStartPositions(state.selectedElements);
-        setOffset({ x: offsetX, y: offsetY });
-        setStartPositions(startPositions);
+        var nextStartPositions = getStartPositions(state.selectedElements);
+        if (nextStartPositions) {
+            setOffset({ x: offsetX, y: offsetY });
+            setStartPositions(nextStartPositions);
+        }
     };
     var onDrag = function (evt) {
         var scaledClient = {
             x: evt.clientX * (1 / k),
-            y: evt.clientY * (1 / k)
+            y: evt.clientY * (1 / k),
         };
-        state.selectedElements
-            .filter(isNode)
-            .forEach(function (node) {
-            updateNodePos({ id: node.id, pos: {
-                    x: startPositions[node.id].x + scaledClient.x - position.x - offset.x - x,
-                    y: startPositions[node.id].y + scaledClient.y - position.y - offset.y - y
-                } });
+        state.selectedElements.filter(isNode).forEach(function (node) {
+            var pos = {
+                x: startPositions[node.id].x +
+                    scaledClient.x -
+                    position.x -
+                    offset.x -
+                    x,
+                y: startPositions[node.id].y +
+                    scaledClient.y -
+                    position.y -
+                    offset.y -
+                    y,
+            };
+            updateNodePos({ id: node.id, pos: pos });
         });
     };
     return (React__default.createElement("div", { className: "react-flow__nodesselection", style: {
-            transform: "translate(" + x + "px," + y + "px) scale(" + k + ")"
+            transform: "translate(" + x + "px," + y + "px) scale(" + k + ")",
         } },
         React__default.createElement(reactDraggable, { scale: k, onStart: function (evt) { return onStart(evt); }, onDrag: function (evt) { return onDrag(evt); } },
             React__default.createElement("div", { className: "react-flow__nodesselection-rect", style: {
                     width: state.selectedNodesBbox.width,
                     height: state.selectedNodesBbox.height,
                     top: state.selectedNodesBbox.y,
-                    left: state.selectedNodesBbox.x
+                    left: state.selectedNodesBbox.x,
                 } }))));
 });
 
@@ -8039,13 +8120,14 @@ var createGridDots = function (width, height, xOffset, yOffset, gap, size) {
         var x = col * gap + xOffset;
         return Array.from({ length: lineCountY }, function (_, row) {
             var y = row * gap + yOffset;
-            return "M" + x + " " + (y - size) + " l" + size + " " + size + " l" + -size + " " + size + " l" + -size + " " + -size + "z";
+            return "M" + x + " " + (y -
+                size) + " l" + size + " " + size + " l" + -size + " " + size + " l" + -size + " " + -size + "z";
         }).join(' ');
     });
     return values.join(' ');
 };
 var Grid = React.memo(function (_a) {
-    var _b = _a.gap, gap = _b === void 0 ? 24 : _b, _c = _a.color, color = _c === void 0 ? '#aaa' : _c, _d = _a.size, size = _d === void 0 ? 0.5 : _d, _e = _a.style, style = _e === void 0 ? {} : _e, _f = _a.className, className = _f === void 0 ? null : _f, _g = _a.backgroundType, backgroundType = _g === void 0 ? GridType.Dots : _g;
+    var _b = _a.gap, gap = _b === void 0 ? 24 : _b, _c = _a.color, color = _c === void 0 ? '#aaa' : _c, _d = _a.size, size = _d === void 0 ? 0.5 : _d, _e = _a.style, style = _e === void 0 ? {} : _e, _f = _a.className, className = _f === void 0 ? '' : _f, _g = _a.backgroundType, backgroundType = _g === void 0 ? GridType.Dots : _g;
     var _h = useStoreState$1(function (s) { return s; }), width = _h.width, height = _h.height, _j = _h.transform, x = _j[0], y = _j[1], scale = _j[2];
     var gridClasses = classnames('react-flow__grid', className);
     var scaledGap = gap * scale;
@@ -8064,11 +8146,11 @@ Grid.displayName = 'Grid';
 
 var isInputDOMNode = function (e) {
     var target = e.target;
-    return e && target && ['INPUT', 'SELECT', 'TEXTAREA'].includes(target.nodeName);
+    return (e && target && ['INPUT', 'SELECT', 'TEXTAREA'].includes(target.nodeName));
 };
 var getDimensions = function (node) { return ({
     width: node.offsetWidth,
-    height: node.offsetHeight
+    height: node.offsetHeight,
 }); };
 
 var useKeyPress = (function (keyCode) {
@@ -8106,8 +8188,10 @@ var useD3Zoom = (function (zoomPane, onMove, shiftPressed) {
     var initD3 = useStoreActions$1(function (actions) { return actions.initD3; });
     var updateTransform = useStoreActions$1(function (actions) { return actions.updateTransform; });
     React.useEffect(function () {
-        var selection = select(zoomPane.current).call(d3ZoomInstance);
-        initD3({ zoom: d3ZoomInstance, selection: selection });
+        if (zoomPane.current) {
+            var selection = select(zoomPane.current).call(d3ZoomInstance);
+            initD3({ zoom: d3ZoomInstance, selection: selection });
+        }
     }, []);
     React.useEffect(function () {
         if (shiftPressed) {
@@ -8115,13 +8199,14 @@ var useD3Zoom = (function (zoomPane, onMove, shiftPressed) {
         }
         else {
             d3ZoomInstance.on('zoom', function () {
-                if (event.sourceEvent && event.sourceEvent.target !== zoomPane.current) {
-                    return false;
+                if (event.sourceEvent &&
+                    event.sourceEvent.target !== zoomPane.current) {
+                    return;
                 }
                 updateTransform(event.transform);
                 onMove();
             });
-            if (state.d3Selection) {
+            if (state.d3Selection && state.d3Zoom) {
                 // we need to restore the graph transform otherwise d3 zoom transform and graph transform are not synced
                 var graphTransform = identity$1
                     .translate(state.transform[0], state.transform[1])
@@ -8137,14 +8222,18 @@ var useD3Zoom = (function (zoomPane, onMove, shiftPressed) {
 
 var useGlobalKeyHandler = (function (_a) {
     var deleteKeyCode = _a.deleteKeyCode, onElementsRemove = _a.onElementsRemove;
-    var state = useStoreState$1(function (s) { return ({ selectedElements: s.selectedElements, edges: s.edges }); });
+    var state = useStoreState$1(function (s) { return ({
+        selectedElements: s.selectedElements,
+        edges: s.edges,
+    }); });
     var setNodesSelection = useStoreActions$1(function (a) { return a.setNodesSelection; });
     var deleteKeyPressed = useKeyPress(deleteKeyCode);
     React.useEffect(function () {
         if (deleteKeyPressed && state.selectedElements.length) {
             var elementsToRemove = state.selectedElements;
             // we also want to remove the edges if only one node is selected
-            if (state.selectedElements.length === 1 && !isEdge(state.selectedElements[0])) {
+            if (state.selectedElements.length === 1 &&
+                !isEdge(state.selectedElements[0])) {
                 var node = state.selectedElements[0];
                 var connectedEdges = getConnectedEdges([node], state.edges);
                 elementsToRemove = __spreadArrays(state.selectedElements, connectedEdges);
@@ -8153,14 +8242,13 @@ var useGlobalKeyHandler = (function (_a) {
             setNodesSelection({ isActive: false });
         }
     }, [deleteKeyPressed]);
-    return null;
 });
 
 var useElementUpdater = function (elements) {
     var state = useStoreState$1(function (s) { return ({
         nodes: s.nodes,
         edges: s.edges,
-        transform: s.transform
+        transform: s.transform,
     }); });
     var setNodes = useStoreActions$1(function (a) { return a.setNodes; });
     var setEdges = useStoreActions$1(function (a) { return a.setEdges; });
@@ -8170,7 +8258,8 @@ var useElementUpdater = function (elements) {
         var nextNodes = nodes.map(function (propNode) {
             var existingNode = state.nodes.find(function (n) { return n.id === propNode.id; });
             if (existingNode) {
-                var data = !fastDeepEqual(existingNode.data, propNode.data) ? __assign(__assign({}, existingNode.data), propNode.data) : existingNode.data;
+                var data = !fastDeepEqual(existingNode.data, propNode.data)
+                    ? __assign(__assign({}, existingNode.data), propNode.data) : existingNode.data;
                 return __assign(__assign({}, existingNode), { data: data });
             }
             return parseElement(propNode, state.transform);
@@ -8184,11 +8273,10 @@ var useElementUpdater = function (elements) {
             setEdges(edges);
         }
     });
-    return null;
 };
 
 var GraphView = React.memo(function (_a) {
-    var nodeTypes = _a.nodeTypes, edgeTypes = _a.edgeTypes, onMove = _a.onMove, onLoad = _a.onLoad, onElementClick = _a.onElementClick, onNodeDragStop = _a.onNodeDragStop, connectionLineType = _a.connectionLineType, connectionLineStyle = _a.connectionLineStyle, selectionKeyCode = _a.selectionKeyCode, onElementsRemove = _a.onElementsRemove, deleteKeyCode = _a.deleteKeyCode, elements = _a.elements, showBackground = _a.showBackground, backgroundGap = _a.backgroundGap, backgroundColor = _a.backgroundColor, backgroundType = _a.backgroundType, onConnect = _a.onConnect;
+    var nodeTypes = _a.nodeTypes, edgeTypes = _a.edgeTypes, onMove = _a.onMove, onLoad = _a.onLoad, onElementClick = _a.onElementClick, onNodeDragStop = _a.onNodeDragStop, connectionLineType = _a.connectionLineType, connectionLineStyle = _a.connectionLineStyle, selectionKeyCode = _a.selectionKeyCode, onElementsRemove = _a.onElementsRemove, deleteKeyCode = _a.deleteKeyCode, elements = _a.elements, showBackground = _a.showBackground, backgroundGap = _a.backgroundGap, backgroundColor = _a.backgroundColor, backgroundType = _a.backgroundType, onConnect = _a.onConnect, snapToGrid = _a.snapToGrid, snapGrid = _a.snapGrid;
     var zoomPane = React.useRef(null);
     var rendererNode = React.useRef(null);
     var state = useStoreState$1(function (s) { return ({
@@ -8197,14 +8285,18 @@ var GraphView = React.memo(function (_a) {
         nodes: s.nodes,
         edges: s.edges,
         d3Initialised: s.d3Initialised,
-        nodesSelectionActive: s.nodesSelectionActive
+        nodesSelectionActive: s.nodesSelectionActive,
     }); });
     var updateSize = useStoreActions$1(function (actions) { return actions.updateSize; });
     var setNodesSelection = useStoreActions$1(function (actions) { return actions.setNodesSelection; });
     var setOnConnect = useStoreActions$1(function (a) { return a.setOnConnect; });
+    var setSnapGrid = useStoreActions$1(function (actions) { return actions.setSnapGrid; });
     var selectionKeyPressed = useKeyPress(selectionKeyCode);
     var onZoomPaneClick = function () { return setNodesSelection({ isActive: false }); };
     var updateDimensions = function () {
+        if (!rendererNode.current) {
+            return;
+        }
         var size = getDimensions(rendererNode.current);
         updateSize(size);
     };
@@ -8222,10 +8314,13 @@ var GraphView = React.memo(function (_a) {
             onLoad({
                 fitView: fitView,
                 zoomIn: zoomIn,
-                zoomOut: zoomOut
+                zoomOut: zoomOut,
             });
         }
     }, [state.d3Initialised]);
+    React.useEffect(function () {
+        setSnapGrid({ snapToGrid: snapToGrid, snapGrid: snapGrid });
+    }, [snapToGrid]);
     useGlobalKeyHandler({ onElementsRemove: onElementsRemove, deleteKeyCode: deleteKeyCode });
     useElementUpdater(elements);
     return (React__default.createElement("div", { className: "react-flow__renderer", ref: rendererNode },
@@ -8241,10 +8336,10 @@ GraphView.displayName = 'GraphView';
 function onMouseDown(evt, nodeId, setSourceId, setPosition, onConnect, isTarget, isValidConnection) {
     var reactFlowNode = document.querySelector('.react-flow');
     if (!reactFlowNode) {
-        return null;
+        return;
     }
     var containerBounds = reactFlowNode.getBoundingClientRect();
-    var recentHoveredHandle = null;
+    var recentHoveredHandle;
     setPosition({
         x: evt.clientX - containerBounds.left,
         y: evt.clientY - containerBounds.top,
@@ -8252,7 +8347,7 @@ function onMouseDown(evt, nodeId, setSourceId, setPosition, onConnect, isTarget,
     setSourceId(nodeId);
     function resetRecentHandle() {
         if (!recentHoveredHandle) {
-            return false;
+            return;
         }
         recentHoveredHandle.classList.remove('valid');
         recentHoveredHandle.classList.remove('connecting');
@@ -8264,9 +8359,11 @@ function onMouseDown(evt, nodeId, setSourceId, setPosition, onConnect, isTarget,
             elementBelow: elementBelow,
             isValid: false,
             connection: { source: null, target: null },
-            isHoveringHandle: false
+            isHoveringHandle: false,
         };
-        if (elementBelow && (elementBelow.classList.contains('target') || elementBelow.classList.contains('source'))) {
+        if (elementBelow &&
+            (elementBelow.classList.contains('target') ||
+                elementBelow.classList.contains('source'))) {
             var connection = { source: null, target: null };
             if (isTarget) {
                 var sourceId = elementBelow.getAttribute('data-nodeid');
@@ -8293,7 +8390,7 @@ function onMouseDown(evt, nodeId, setSourceId, setPosition, onConnect, isTarget,
             return resetRecentHandle();
         }
         var isOwnHandle = connection.source === connection.target;
-        if (!isOwnHandle) {
+        if (!isOwnHandle && elementBelow) {
             recentHoveredHandle = elementBelow;
             elementBelow.classList.add('connecting');
             elementBelow.classList.toggle('valid', isValid);
@@ -8315,9 +8412,14 @@ function onMouseDown(evt, nodeId, setSourceId, setPosition, onConnect, isTarget,
 var BaseHandle = React.memo(function (_a) {
     var type = _a.type, nodeId = _a.nodeId, onConnect = _a.onConnect, position = _a.position, setSourceId = _a.setSourceId, setPosition = _a.setPosition, className = _a.className, _b = _a.id, id = _b === void 0 ? false : _b, isValidConnection = _a.isValidConnection, rest = __rest(_a, ["type", "nodeId", "onConnect", "position", "setSourceId", "setPosition", "className", "id", "isValidConnection"]);
     var isTarget = type === 'target';
-    var handleClasses = classnames('react-flow__handle', className, position, { source: !isTarget, target: isTarget });
+    var handleClasses = classnames('react-flow__handle', className, position, {
+        source: !isTarget,
+        target: isTarget,
+    });
     var nodeIdWithHandleId = id ? nodeId + "__" + id : nodeId;
-    return (React__default.createElement("div", __assign({ "data-nodeid": nodeIdWithHandleId, "data-handlepos": position, className: handleClasses, onMouseDown: function (evt) { return onMouseDown(evt, nodeIdWithHandleId, setSourceId, setPosition, onConnect, isTarget, isValidConnection); } }, rest)));
+    return (React__default.createElement("div", __assign({ "data-nodeid": nodeIdWithHandleId, "data-handlepos": position, className: handleClasses, onMouseDown: function (evt) {
+            return onMouseDown(evt, nodeIdWithHandleId, setSourceId, setPosition, onConnect, isTarget, isValidConnection);
+        } }, rest)));
 });
 BaseHandle.displayName = 'BaseHandle';
 
@@ -8330,7 +8432,7 @@ var Handle = React.memo(function (_a) {
     var nodeId = React.useContext(NodeIdContext);
     var _f = useStoreActions$1(function (a) { return ({
         setPosition: a.setConnectionPosition,
-        setSourceId: a.setConnectionSourceId
+        setSourceId: a.setConnectionSourceId,
     }); }), setPosition = _f.setPosition, setSourceId = _f.setSourceId;
     var onConnectAction = useStoreState$1(function (s) { return s.onConnect; });
     var onConnectExtended = function (params) {
@@ -8345,7 +8447,7 @@ var nodeStyles = {
     background: '#ff6060',
     padding: 10,
     borderRadius: 5,
-    width: 150
+    width: 150,
 };
 var DefaultNode = (function (_a) {
     var data = _a.data, style = _a.style;
@@ -8359,7 +8461,7 @@ var nodeStyles$1 = {
     background: '#9999ff',
     padding: 10,
     borderRadius: 5,
-    width: 150
+    width: 150,
 };
 var InputNode = (function (_a) {
     var data = _a.data, style = _a.style;
@@ -8372,7 +8474,7 @@ var nodeStyles$2 = {
     background: '#55dd99',
     padding: 10,
     borderRadius: 5,
-    width: 150
+    width: 150,
 };
 var OutputNode = (function (_a) {
     var data = _a.data, style = _a.style;
@@ -8649,15 +8751,18 @@ var getHandleBounds = function (selector, nodeElement, parentBounds, k) {
     if (!handles || !handles.length) {
         return null;
     }
-    return [].map.call(handles, function (handle) {
+    var handlesArray = Array.from(handles);
+    return handlesArray.map(function (handle) {
         var bounds = handle.getBoundingClientRect();
         var dimensions = getDimensions(handle);
         var nodeIdAttr = handle.getAttribute('data-nodeid');
         var handlePosition = handle.getAttribute('data-handlepos');
-        var nodeIdSplitted = nodeIdAttr.split('__');
+        var nodeIdSplitted = nodeIdAttr ? nodeIdAttr.split('__') : null;
         var handleId = null;
         if (nodeIdSplitted) {
-            handleId = (nodeIdSplitted.length ? nodeIdSplitted[1] : nodeIdSplitted);
+            handleId = (nodeIdSplitted.length
+                ? nodeIdSplitted[1]
+                : nodeIdSplitted);
         }
         return __assign({ id: handleId, position: handlePosition, x: (bounds.left - parentBounds.left) * (1 / k), y: (bounds.top - parentBounds.top) * (1 / k) }, dimensions);
     });
@@ -8668,7 +8773,7 @@ var onStart = function (evt, onClick, id, type, data, setOffset, transform, posi
     }
     var scaledClient = {
         x: evt.clientX * (1 / transform[2]),
-        y: evt.clientY * (1 / transform[2])
+        y: evt.clientY * (1 / transform[2]),
     };
     var offsetX = scaledClient.x - position.x - transform[0];
     var offsetY = scaledClient.y - position.y - transform[1];
@@ -8680,19 +8785,25 @@ var onStart = function (evt, onClick, id, type, data, setOffset, transform, posi
 var onDrag = function (evt, setDragging, id, offset, transform) {
     var scaledClient = {
         x: evt.clientX * (1 / transform[2]),
-        y: evt.clientY * (1 / transform[2])
+        y: evt.clientY * (1 / transform[2]),
     };
     setDragging(true);
-    store.dispatch.updateNodePos({ id: id, pos: {
+    store.dispatch.updateNodePos({
+        id: id,
+        pos: {
             x: scaledClient.x - transform[0] - offset.x,
-            y: scaledClient.y - transform[1] - offset.y
-        } });
+            y: scaledClient.y - transform[1] - offset.y,
+        },
+    });
 };
 var onStop = function (onNodeDragStop, isDragging, setDragging, id, type, position, data) {
     if (isDragging) {
         setDragging(false);
         onNodeDragStop({
-            id: id, type: type, position: position, data: data
+            id: id,
+            type: type,
+            position: position,
+            data: data,
         });
     }
 };
@@ -8704,17 +8815,20 @@ var wrapNode = (function (NodeComponent) {
         var _c = React.useState(false), isDragging = _c[0], setDragging = _c[1];
         var position = { x: xPos, y: yPos };
         var nodeClasses = classnames('react-flow__node', { selected: selected });
-        var nodeStyle = { zIndex: selected ? 10 : 3, transform: "translate(" + xPos + "px," + yPos + "px)" };
+        var nodeStyle = {
+            zIndex: selected ? 10 : 3,
+            transform: "translate(" + xPos + "px," + yPos + "px)",
+        };
         var updateNode = function () {
             if (!nodeElement.current) {
-                return false;
+                return;
             }
             var storeState = store.getState();
             var bounds = nodeElement.current.getBoundingClientRect();
             var dimensions = getDimensions(nodeElement.current);
             var handleBounds = {
                 source: getHandleBounds('.source', nodeElement.current, bounds, storeState.transform[2]),
-                target: getHandleBounds('.target', nodeElement.current, bounds, storeState.transform[2])
+                target: getHandleBounds('.target', nodeElement.current, bounds, storeState.transform[2]),
             };
             store.dispatch.updateNodeData(__assign(__assign({ id: id }, dimensions), { handleBounds: handleBounds }));
         };
@@ -8734,8 +8848,15 @@ var wrapNode = (function (NodeComponent) {
                     }
                 };
             }
+            return;
         }, [nodeElement.current]);
-        return (React__default.createElement(DraggableCore, { onStart: function (evt) { return onStart(evt, onClick, id, type, data, setOffset, transform, position); }, onDrag: function (evt) { return onDrag(evt, setDragging, id, offset, transform); }, onStop: function () { return onStop(onNodeDragStop, isDragging, setDragging, id, type, position, data); }, scale: transform[2] },
+        return (React__default.createElement(DraggableCore, { onStart: function (evt) {
+                return onStart(evt, onClick, id, type, data, setOffset, transform, position);
+            }, onDrag: function (evt) {
+                return onDrag(evt, setDragging, id, offset, transform);
+            }, onStop: function () {
+                return onStop(onNodeDragStop, isDragging, setDragging, id, type, position, data);
+            }, scale: transform[2] },
             React__default.createElement("div", { className: nodeClasses, ref: nodeElement, style: nodeStyle },
                 React__default.createElement(Provider, { value: id },
                     React__default.createElement(NodeComponent, { id: id, data: data, type: type, style: style, selected: selected })))));
@@ -8748,15 +8869,15 @@ function createNodeTypes(nodeTypes) {
     var standardTypes = {
         input: wrapNode((nodeTypes.input || InputNode)),
         default: wrapNode((nodeTypes.default || DefaultNode)),
-        output: wrapNode((nodeTypes.output || OutputNode))
+        output: wrapNode((nodeTypes.output || OutputNode)),
     };
-    var specialTypes = Object
-        .keys(nodeTypes)
+    var wrappedTypes = {};
+    var specialTypes = Object.keys(nodeTypes)
         .filter(function (k) { return !['input', 'default', 'output'].includes(k); })
         .reduce(function (res, key) {
         res[key] = wrapNode((nodeTypes[key] || DefaultNode));
         return res;
-    }, {});
+    }, wrappedTypes);
     return __assign(__assign({}, standardTypes), specialTypes);
 }
 
@@ -8765,15 +8886,17 @@ var BezierEdge = React.memo(function (_a) {
     var yOffset = Math.abs(targetY - sourceY) / 2;
     var centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
     var dAttr = "M" + sourceX + "," + sourceY + " C" + sourceX + "," + centerY + " " + targetX + "," + centerY + " " + targetX + "," + targetY;
-    if (['left', 'right'].includes(sourcePosition) && ['left', 'right'].includes(targetPosition)) {
+    if (['left', 'right'].includes(sourcePosition) &&
+        ['left', 'right'].includes(targetPosition)) {
         var xOffset = Math.abs(targetX - sourceX) / 2;
         var centerX = targetX < sourceX ? targetX + xOffset : targetX - xOffset;
         dAttr = "M" + sourceX + "," + sourceY + " C" + centerX + "," + sourceY + " " + centerX + "," + targetY + " " + targetX + "," + targetY;
     }
-    else if (['left', 'right'].includes(sourcePosition) || ['left', 'right'].includes(targetPosition)) {
+    else if (['left', 'right'].includes(sourcePosition) ||
+        ['left', 'right'].includes(targetPosition)) {
         dAttr = "M" + sourceX + "," + sourceY + " C" + sourceX + "," + targetY + " " + sourceX + "," + targetY + " " + targetX + "," + targetY;
     }
-    return (React__default.createElement("path", __assign({}, style, { d: dAttr })));
+    return React__default.createElement("path", __assign({}, style, { d: dAttr }));
 });
 
 var StraightEdge = React.memo(function (_a) {
@@ -8794,7 +8917,7 @@ var wrapEdge = (function (EdgeComponent) {
         var edgeClasses = classnames('react-flow__edge', { selected: selected, animated: animated });
         var onEdgeClick = function (evt) {
             if (isInputDOMNode(evt)) {
-                return false;
+                return;
             }
             store.dispatch.setSelectedElements({ id: id, source: source, target: target });
             onClick({ id: id, source: source, target: target, type: type });
@@ -8809,15 +8932,15 @@ var wrapEdge = (function (EdgeComponent) {
 function createEdgeTypes(edgeTypes) {
     var standardTypes = {
         default: wrapEdge((edgeTypes.default || BezierEdge)),
-        straight: wrapEdge((edgeTypes.bezier || StraightEdge))
+        straight: wrapEdge((edgeTypes.bezier || StraightEdge)),
     };
-    var specialTypes = Object
-        .keys(edgeTypes)
+    var wrappedTypes = {};
+    var specialTypes = Object.keys(edgeTypes)
         .filter(function (k) { return !['default', 'bezier'].includes(k); })
         .reduce(function (res, key) {
         res[key] = wrapEdge((edgeTypes[key] || BezierEdge));
         return res;
-    }, {});
+    }, wrappedTypes);
     return __assign(__assign({}, standardTypes), specialTypes);
 }
 
@@ -8852,12 +8975,12 @@ var css = ".react-flow {\n  width: 100%;\n  height: 100%;\n  position: relative;
 styleInject(css);
 
 var ReactFlow = function (_a) {
-    var style = _a.style, onElementClick = _a.onElementClick, elements = _a.elements, children = _a.children, nodeTypes = _a.nodeTypes, edgeTypes = _a.edgeTypes, onLoad = _a.onLoad, onMove = _a.onMove, onElementsRemove = _a.onElementsRemove, onConnect = _a.onConnect, onNodeDragStop = _a.onNodeDragStop, connectionLineType = _a.connectionLineType, connectionLineStyle = _a.connectionLineStyle, deleteKeyCode = _a.deleteKeyCode, selectionKeyCode = _a.selectionKeyCode, showBackground = _a.showBackground, backgroundGap = _a.backgroundGap, backgroundType = _a.backgroundType, backgroundColor = _a.backgroundColor;
+    var style = _a.style, onElementClick = _a.onElementClick, elements = _a.elements, children = _a.children, nodeTypes = _a.nodeTypes, edgeTypes = _a.edgeTypes, onLoad = _a.onLoad, onMove = _a.onMove, onElementsRemove = _a.onElementsRemove, onConnect = _a.onConnect, onNodeDragStop = _a.onNodeDragStop, connectionLineType = _a.connectionLineType, connectionLineStyle = _a.connectionLineStyle, deleteKeyCode = _a.deleteKeyCode, selectionKeyCode = _a.selectionKeyCode, showBackground = _a.showBackground, backgroundGap = _a.backgroundGap, backgroundType = _a.backgroundType, backgroundColor = _a.backgroundColor, snapToGrid = _a.snapToGrid, snapGrid = _a.snapGrid;
     var nodeTypesParsed = React.useMemo(function () { return createNodeTypes(nodeTypes); }, []);
     var edgeTypesParsed = React.useMemo(function () { return createEdgeTypes(edgeTypes); }, []);
     return (React__default.createElement("div", { style: style, className: "react-flow" },
         React__default.createElement(StoreProvider, { store: store },
-            React__default.createElement(GraphView, { onLoad: onLoad, onMove: onMove, onElementClick: onElementClick, onNodeDragStop: onNodeDragStop, nodeTypes: nodeTypesParsed, edgeTypes: edgeTypesParsed, connectionLineType: connectionLineType, connectionLineStyle: connectionLineStyle, selectionKeyCode: selectionKeyCode, onElementsRemove: onElementsRemove, deleteKeyCode: deleteKeyCode, elements: elements, onConnect: onConnect, backgroundColor: backgroundColor, backgroundGap: backgroundGap, showBackground: showBackground, backgroundType: backgroundType }),
+            React__default.createElement(GraphView, { onLoad: onLoad, onMove: onMove, onElementClick: onElementClick, onNodeDragStop: onNodeDragStop, nodeTypes: nodeTypesParsed, edgeTypes: edgeTypesParsed, connectionLineType: connectionLineType, connectionLineStyle: connectionLineStyle, selectionKeyCode: selectionKeyCode, onElementsRemove: onElementsRemove, deleteKeyCode: deleteKeyCode, elements: elements, onConnect: onConnect, backgroundColor: backgroundColor, backgroundGap: backgroundGap, showBackground: showBackground, backgroundType: backgroundType, snapToGrid: snapToGrid, snapGrid: snapGrid }),
             children)));
 };
 ReactFlow.displayName = 'ReactFlow';
@@ -8871,12 +8994,12 @@ ReactFlow.defaultProps = {
     nodeTypes: {
         input: InputNode,
         default: DefaultNode,
-        output: OutputNode
+        output: OutputNode,
     },
     edgeTypes: {
         default: BezierEdge,
         straight: StraightEdge,
-        step: StepEdge
+        step: StepEdge,
     },
     connectionLineType: 'bezier',
     connectionLineStyle: {},
@@ -8885,7 +9008,9 @@ ReactFlow.defaultProps = {
     backgroundColor: '#eee',
     backgroundGap: 24,
     showBackground: true,
-    backgroundType: GridType.Dots
+    backgroundType: GridType.Dots,
+    snapToGrid: false,
+    snapGrid: [16, 16],
 };
 
 var baseStyle = {
@@ -8893,7 +9018,7 @@ var baseStyle = {
     zIndex: 5,
     bottom: 10,
     right: 10,
-    width: 200
+    width: 200,
 };
 var index = (function (_a) {
     var _b = _a.style, style = _b === void 0 ? {} : _b, className = _a.className, _c = _a.bgColor, bgColor = _c === void 0 ? '#f8f8f8' : _c, _d = _a.nodeColor, nodeColor = _d === void 0 ? '#ddd' : _d;
@@ -8910,23 +9035,29 @@ var index = (function (_a) {
     var height = (state.height / (state.width || 1)) * width;
     var bbox = { x: 0, y: 0, width: state.width, height: state.height };
     var scaleFactor = width / state.width;
-    var nodeColorFunc = (nodeColor instanceof Function ? nodeColor : function () { return nodeColor; });
+    var nodeColorFunc = (nodeColor instanceof Function
+        ? nodeColor
+        : function () { return nodeColor; });
     React.useEffect(function () {
-        if (canvasNode && canvasNode.current) {
-            var ctx_1 = canvasNode.current.getContext('2d');
-            var nodesInside = getNodesInside(state.nodes, bbox, state.transform, true);
-            ctx_1.fillStyle = bgColor;
-            ctx_1.fillRect(0, 0, width, height);
-            nodesInside.forEach(function (n) {
-                var pos = n.__rg.position;
-                var transformX = state.transform[0];
-                var transformY = state.transform[1];
-                var x = (pos.x * state.transform[2]) + transformX;
-                var y = (pos.y * state.transform[2]) + transformY;
-                ctx_1.fillStyle = nodeColorFunc(n);
-                ctx_1.fillRect((x * scaleFactor), (y * scaleFactor), n.__rg.width * scaleFactor * state.transform[2], n.__rg.height * scaleFactor * state.transform[2]);
-            });
+        if (!canvasNode || !canvasNode.current) {
+            return;
         }
+        var ctx = canvasNode.current.getContext('2d');
+        if (!ctx) {
+            return;
+        }
+        var nodesInside = getNodesInside(state.nodes, bbox, state.transform, true);
+        ctx.fillStyle = bgColor;
+        ctx.fillRect(0, 0, width, height);
+        nodesInside.forEach(function (n) {
+            var pos = n.__rg.position;
+            var transformX = state.transform[0];
+            var transformY = state.transform[1];
+            var x = pos.x * state.transform[2] + transformX;
+            var y = pos.y * state.transform[2] + transformY;
+            ctx.fillStyle = nodeColorFunc(n);
+            ctx.fillRect(x * scaleFactor, y * scaleFactor, n.__rg.width * scaleFactor * state.transform[2], n.__rg.height * scaleFactor * state.transform[2]);
+        });
     }, [canvasNode.current, nodePositions, state.transform, height]);
     return (React__default.createElement("canvas", { style: __assign(__assign(__assign({}, baseStyle), style), { height: height }), width: width, height: height, className: mapClasses, ref: canvasNode }));
 });

dist/components/BackgroundGrid/index.d.ts

@@ -0,0 +1,10 @@
+import React, { HTMLAttributes } from 'react';
+import { GridType } from '../../types';
+interface GridProps extends HTMLAttributes<SVGElement> {
+    backgroundType?: GridType;
+    gap?: number;
+    color?: string;
+    size?: number;
+}
+declare const Grid: React.MemoExoticComponent<({ gap, color, size, style, className, backgroundType, }: GridProps) => JSX.Element>;
+export default Grid;

dist/components/ConnectionLine/index.d.ts

@@ -0,0 +1,14 @@
+import { SVGAttributes } from 'react';
+import { ElementId, Node, Transform } from '../../types';
+interface ConnectionLineProps {
+    connectionSourceId: ElementId;
+    connectionPositionX: number;
+    connectionPositionY: number;
+    connectionLineType?: string | null;
+    nodes: Node[];
+    transform: Transform;
+    connectionLineStyle?: SVGAttributes<{}>;
+    className?: string;
+}
+declare const _default: ({ connectionSourceId, connectionLineStyle, connectionPositionX, connectionPositionY, connectionLineType, nodes, className, transform, }: ConnectionLineProps) => JSX.Element | null;
+export default _default;

dist/components/Edges/BezierEdge.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { EdgeBezierProps } from '../../types';
+declare const _default: React.MemoExoticComponent<({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, style, }: EdgeBezierProps) => JSX.Element>;
+export default _default;

dist/components/Edges/StepEdge.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { EdgeProps } from '../../types';
+declare const _default: React.MemoExoticComponent<({ sourceX, sourceY, targetX, targetY, style }: EdgeProps) => JSX.Element>;
+export default _default;

dist/components/Edges/StraightEdge.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { EdgeProps } from '../../types';
+declare const _default: React.MemoExoticComponent<({ sourceX, sourceY, targetX, targetY, style }: EdgeProps) => JSX.Element>;
+export default _default;

dist/components/Edges/wrapEdge.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ElementId, Edge, EdgeCompProps } from '../../types';
+interface EdgeWrapperProps {
+    id: ElementId;
+    source: ElementId;
+    target: ElementId;
+    type: any;
+    onClick: (edge: Edge) => void;
+    animated: boolean;
+    selected: boolean;
+}
+declare const _default: (EdgeComponent: React.ComponentType<EdgeCompProps>) => React.MemoExoticComponent<({ id, source, target, type, animated, selected, onClick, ...rest }: EdgeWrapperProps) => JSX.Element>;
+export default _default;

dist/components/Handle/BaseHandle.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { HandleType, ElementId, Position, XYPosition, OnConnectFunc, Connection } from '../../types';
+declare type ValidConnectionFunc = (connection: Connection) => boolean;
+declare type SetSourceIdFunc = (nodeId: ElementId | null) => void;
+interface BaseHandleProps {
+    type: HandleType;
+    nodeId: ElementId;
+    onConnect: OnConnectFunc;
+    position: Position;
+    setSourceId: SetSourceIdFunc;
+    setPosition: (pos: XYPosition) => void;
+    isValidConnection: ValidConnectionFunc;
+    id?: ElementId | boolean;
+    className?: string;
+}
+declare const BaseHandle: React.MemoExoticComponent<({ type, nodeId, onConnect, position, setSourceId, setPosition, className, id, isValidConnection, ...rest }: BaseHandleProps) => JSX.Element>;
+export default BaseHandle;

dist/components/Handle/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { HandleType, Position, OnConnectFunc } from '../../types';
+interface HandleProps {
+    type: HandleType;
+    position: Position;
+    onConnect?: OnConnectFunc;
+    isValidConnection?: () => boolean;
+}
+declare const Handle: React.MemoExoticComponent<({ onConnect, type, position, isValidConnection, ...rest }: HandleProps) => JSX.Element>;
+export default Handle;

dist/components/Nodes/DefaultNode.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { NodeProps } from '../../types';
+declare const _default: ({ data, style }: NodeProps) => JSX.Element;
+export default _default;

dist/components/Nodes/InputNode.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { NodeProps } from '../../types';
+declare const _default: ({ data, style }: NodeProps) => JSX.Element;
+export default _default;

dist/components/Nodes/OutputNode.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { NodeProps } from '../../types';
+declare const _default: ({ data, style }: NodeProps) => JSX.Element;
+export default _default;

dist/components/Nodes/wrapNode.d.ts

@@ -0,0 +1,16 @@
+import React, { CSSProperties } from 'react';
+import { Node, Transform, ElementId, NodeComponentProps } from '../../types';
+interface WrapNodeProps {
+    id: ElementId;
+    type: string;
+    data: any;
+    selected: boolean;
+    transform: Transform;
+    xPos: number;
+    yPos: number;
+    onClick: (node: Node) => void | undefined;
+    onNodeDragStop: (node: Node) => void;
+    style?: CSSProperties;
+}
+declare const _default: (NodeComponent: React.ComponentType<NodeComponentProps>) => React.MemoExoticComponent<({ id, type, data, transform, xPos, yPos, selected, onClick, onNodeDragStop, style, }: WrapNodeProps) => JSX.Element>;
+export default _default;

dist/components/NodesSelection/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: React.MemoExoticComponent<() => JSX.Element>;
+export default _default;

dist/components/UserSelection/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: React.MemoExoticComponent<() => JSX.Element>;
+export default _default;

dist/container/EdgeRenderer/index.d.ts

@@ -0,0 +1,11 @@
+import React, { SVGAttributes } from 'react';
+interface EdgeRendererProps {
+    width: number;
+    height: number;
+    edgeTypes: any;
+    connectionLineStyle?: SVGAttributes<{}>;
+    connectionLineType?: string;
+    onElementClick?: () => void;
+}
+declare const EdgeRenderer: React.MemoExoticComponent<({ width, height, connectionLineStyle, connectionLineType, ...rest }: EdgeRendererProps) => JSX.Element | null>;
+export default EdgeRenderer;

dist/container/EdgeRenderer/utils.d.ts

@@ -0,0 +1,2 @@
+import { EdgeTypesType } from '../../types';
+export declare function createEdgeTypes(edgeTypes: EdgeTypesType): EdgeTypesType;

dist/container/GraphView/index.d.ts

@@ -0,0 +1,25 @@
+import React, { SVGAttributes } from 'react';
+import { Elements, NodeTypesType, EdgeTypesType, GridType, OnLoadFunc } from '../../types';
+export interface GraphViewProps {
+    elements: Elements;
+    onElementClick: () => void;
+    onElementsRemove: (elements: Elements) => void;
+    onNodeDragStop: () => void;
+    onConnect: () => void;
+    onLoad: OnLoadFunc;
+    onMove: () => void;
+    selectionKeyCode: number;
+    nodeTypes: NodeTypesType;
+    edgeTypes: EdgeTypesType;
+    connectionLineType: string;
+    connectionLineStyle: SVGAttributes<{}>;
+    deleteKeyCode: number;
+    showBackground: boolean;
+    backgroundGap: number;
+    backgroundColor: string;
+    backgroundType: GridType;
+    snapToGrid: boolean;
+    snapGrid: [number, number];
+}
+declare const GraphView: React.MemoExoticComponent<({ nodeTypes, edgeTypes, onMove, onLoad, onElementClick, onNodeDragStop, connectionLineType, connectionLineStyle, selectionKeyCode, onElementsRemove, deleteKeyCode, elements, showBackground, backgroundGap, backgroundColor, backgroundType, onConnect, snapToGrid, snapGrid, }: GraphViewProps) => JSX.Element>;
+export default GraphView;

dist/container/NodeRenderer/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { NodeTypesType } from '../../types';
+interface NodeRendererProps {
+    nodeTypes: NodeTypesType;
+    onElementClick: () => void;
+    onNodeDragStop: () => void;
+}
+declare const NodeRenderer: React.MemoExoticComponent<(props: NodeRendererProps) => JSX.Element>;
+export default NodeRenderer;

dist/container/NodeRenderer/utils.d.ts

@@ -0,0 +1,2 @@
+import { NodeTypesType } from '../../types';
+export declare function createNodeTypes(nodeTypes: NodeTypesType): NodeTypesType;

dist/container/ReactFlow/index.d.ts

@@ -0,0 +1,57 @@
+import React, { SVGAttributes, HTMLAttributes } from 'react';
+import { Elements, NodeTypesType, EdgeTypesType, GridType, OnLoadFunc } from '../../types';
+import '../../style.css';
+export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onLoad'> {
+    elements: Elements;
+    onElementClick: () => void;
+    onElementsRemove: (elements: Elements) => void;
+    onNodeDragStop: () => void;
+    onConnect: () => void;
+    onLoad: OnLoadFunc;
+    onMove: () => void;
+    nodeTypes: NodeTypesType;
+    edgeTypes: EdgeTypesType;
+    connectionLineType: string;
+    connectionLineStyle: SVGAttributes<{}>;
+    deleteKeyCode: number;
+    selectionKeyCode: number;
+    showBackground: boolean;
+    backgroundGap: number;
+    backgroundColor: string;
+    backgroundType: GridType;
+    snapToGrid: boolean;
+    snapGrid: [16, 16];
+}
+declare const ReactFlow: {
+    ({ style, onElementClick, elements, children, nodeTypes, edgeTypes, onLoad, onMove, onElementsRemove, onConnect, onNodeDragStop, connectionLineType, connectionLineStyle, deleteKeyCode, selectionKeyCode, showBackground, backgroundGap, backgroundType, backgroundColor, snapToGrid, snapGrid, }: ReactFlowProps): JSX.Element;
+    displayName: string;
+    defaultProps: {
+        onElementClick: () => void;
+        onElementsRemove: () => void;
+        onNodeDragStop: () => void;
+        onConnect: () => void;
+        onLoad: () => void;
+        onMove: () => void;
+        nodeTypes: {
+            input: ({ data, style }: import("../../types").NodeProps) => JSX.Element;
+            default: ({ data, style }: import("../../types").NodeProps) => JSX.Element;
+            output: ({ data, style }: import("../../types").NodeProps) => JSX.Element;
+        };
+        edgeTypes: {
+            default: React.MemoExoticComponent<({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, style, }: import("../../types").EdgeBezierProps) => JSX.Element>;
+            straight: React.MemoExoticComponent<({ sourceX, sourceY, targetX, targetY, style }: import("../../types").EdgeProps) => JSX.Element>;
+            step: React.MemoExoticComponent<({ sourceX, sourceY, targetX, targetY, style }: import("../../types").EdgeProps) => JSX.Element>;
+        };
+        connectionLineType: string;
+        connectionLineStyle: {};
+        deleteKeyCode: number;
+        selectionKeyCode: number;
+        backgroundColor: string;
+        backgroundGap: number;
+        showBackground: boolean;
+        backgroundType: GridType;
+        snapToGrid: boolean;
+        snapGrid: number[];
+    };
+};
+export default ReactFlow;

dist/contexts/NodeIdContext.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ElementId } from '../types';
+declare type ContextProps = ElementId | null;
+export declare const NodeIdContext: import("react").Context<ContextProps>;
+export declare const Provider: import("react").ProviderExoticComponent<import("react").ProviderProps<ContextProps>>;
+export declare const Consumer: import("react").ExoticComponent<import("react").ConsumerProps<ContextProps>>;
+export default NodeIdContext;

dist/hooks/useD3Zoom.d.ts

@@ -0,0 +1,3 @@
+import { MutableRefObject } from 'react';
+declare const _default: (zoomPane: MutableRefObject<Element | null>, onMove: () => void, shiftPressed: boolean) => void;
+export default _default;

dist/hooks/useElementUpdater.d.ts

@@ -0,0 +1,3 @@
+import { Node, Edge } from '../types';
+declare const useElementUpdater: (elements: (Node | Edge)[]) => void;
+export default useElementUpdater;

dist/hooks/useGlobalKeyHandler.d.ts

@@ -0,0 +1,7 @@
+import { Elements } from '../types';
+interface HookParams {
+    deleteKeyCode: number;
+    onElementsRemove: (elements: Elements) => void;
+}
+declare const _default: ({ deleteKeyCode, onElementsRemove }: HookParams) => void;
+export default _default;

dist/hooks/useKeyPress.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (keyCode: number) => boolean;
+export default _default;

dist/index.d.ts

@@ -0,0 +1,5 @@
+import ReactFlow from './container/ReactFlow';
+export default ReactFlow;
+export { default as Handle } from './components/Handle';
+export { MiniMap, Controls } from './plugins';
+export { isNode, isEdge, removeElements, addEdge, getOutgoers, } from './utils/graph';

dist/plugins/Controls/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+interface ControlProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const _default: ({ style, className }: ControlProps) => JSX.Element;
+export default _default;

dist/plugins/MiniMap/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Node } from '../../types';
+declare type StringFunc = (node: Node) => string;
+interface MiniMapProps extends React.HTMLAttributes<HTMLCanvasElement> {
+    bgColor?: string;
+    nodeColor?: string | StringFunc;
+}
+declare const _default: ({ style, className, bgColor, nodeColor, }: MiniMapProps) => JSX.Element;
+export default _default;

dist/plugins/index.d.ts

@@ -0,0 +1,2 @@
+export { default as MiniMap } from './MiniMap';
+export { default as Controls } from './Controls';

dist/store/hooks.d.ts

@@ -0,0 +1,69 @@
+import { StoreModel } from './index';
+export declare const useStoreActions: <Result>(mapActions: (actions: import("easy-peasy").ActionMapper<{
+    selectedNodesBbox: import("../types").Rect;
+    d3Zoom: import("d3-zoom").ZoomBehavior<Element, unknown> | null;
+    d3Selection: import("d3-selection").Selection<Element, unknown, null, undefined> | null;
+    selection: import("../types").SelectionRect | null;
+    connectionPosition: import("../types").XYPosition;
+    onConnect: import("../types").OnConnectFunc;
+    setOnConnect: import("easy-peasy").Action<StoreModel, import("../types").OnConnectFunc>;
+    setNodes: import("easy-peasy").Action<StoreModel, import("../types").Node[]>;
+    setEdges: import("easy-peasy").Action<StoreModel, import("../types").Edge[]>;
+    updateNodeData: import("easy-peasy").Action<StoreModel, {
+        id: string;
+        width: number;
+        height: number;
+        handleBounds: {
+            source: import("../types").HandleElement[] | null;
+            target: import("../types").HandleElement[] | null;
+        };
+    }>;
+    updateNodePos: import("easy-peasy").Action<StoreModel, {
+        id: string;
+        pos: import("../types").XYPosition;
+    }>;
+    setSelection: import("easy-peasy").Action<StoreModel, boolean>;
+    setNodesSelection: import("easy-peasy").Action<StoreModel, {
+        isActive: boolean;
+        selection?: import("../types").SelectionRect | undefined;
+    }>;
+    setSelectedElements: import("easy-peasy").Action<StoreModel, import("../types").Node | import("../types").Edge | (import("../types").Node | import("../types").Edge)[]>;
+    updateSelection: import("easy-peasy").Action<StoreModel, import("../types").SelectionRect>;
+    updateTransform: import("easy-peasy").Action<StoreModel, {
+        x: number;
+        y: number;
+        k: number;
+    }>;
+    updateSize: import("easy-peasy").Action<StoreModel, import("../types").Dimensions>;
+    initD3: import("easy-peasy").Action<StoreModel, {
+        zoom: import("d3-zoom").ZoomBehavior<Element, unknown>;
+        selection: import("d3-selection").Selection<Element, unknown, null, undefined>;
+    }>;
+    setSnapGrid: import("easy-peasy").Action<StoreModel, {
+        snapToGrid: boolean;
+        snapGrid: [number, number];
+    }>;
+    setConnectionPosition: import("easy-peasy").Action<StoreModel, import("../types").XYPosition>;
+    setConnectionSourceId: import("easy-peasy").Action<StoreModel, string | null>;
+}, "1">) => Result) => Result;
+export declare const useStoreDispatch: () => import("easy-peasy").Dispatch<StoreModel, import("redux").Action<any>>;
+export declare const useStoreState: <Result>(mapState: (state: import("easy-peasy").IntermediateStateMapper<{
+    width: number;
+    height: number;
+    transform: [number, number, number];
+    nodes: import("../types").Node[];
+    edges: import("../types").Edge[];
+    selectedElements: (import("../types").Node | import("../types").Edge)[];
+    selectedNodesBbox: import("../types").Rect;
+    d3Zoom: import("d3-zoom").ZoomBehavior<Element, unknown> | null;
+    d3Selection: import("d3-selection").Selection<Element, unknown, null, undefined> | null;
+    d3Initialised: boolean;
+    nodesSelectionActive: boolean;
+    selectionActive: boolean;
+    selection: import("../types").SelectionRect | null;
+    connectionSourceId: string | null;
+    connectionPosition: import("../types").XYPosition;
+    snapToGrid: boolean;
+    snapGrid: [number, number];
+    onConnect: import("../types").OnConnectFunc;
+}, "1">) => Result, dependencies?: any[] | undefined) => Result;

dist/store/index.d.ts

@@ -0,0 +1,149 @@
+import { Action } from 'easy-peasy';
+import { Selection as D3Selection, ZoomBehavior } from 'd3';
+import { ElementId, Elements, Transform, Node, Edge, Rect, Dimensions, XYPosition, OnConnectFunc, SelectionRect, HandleElement } from '../types';
+declare type TransformXYK = {
+    x: number;
+    y: number;
+    k: number;
+};
+declare type NodePosUpdate = {
+    id: ElementId;
+    pos: XYPosition;
+};
+declare type NodeUpdate = {
+    id: ElementId;
+    width: number;
+    height: number;
+    handleBounds: {
+        source: HandleElement[] | null;
+        target: HandleElement[] | null;
+    };
+};
+declare type SelectionUpdate = {
+    isActive: boolean;
+    selection?: SelectionRect;
+};
+declare type D3Init = {
+    zoom: ZoomBehavior<Element, unknown>;
+    selection: D3Selection<Element, unknown, null, undefined>;
+};
+declare type SetSnapGrid = {
+    snapToGrid: boolean;
+    snapGrid: [number, number];
+};
+export interface StoreModel {
+    width: number;
+    height: number;
+    transform: Transform;
+    nodes: Node[];
+    edges: Edge[];
+    selectedElements: Elements;
+    selectedNodesBbox: Rect;
+    d3Zoom: ZoomBehavior<Element, unknown> | null;
+    d3Selection: D3Selection<Element, unknown, null, undefined> | null;
+    d3Initialised: boolean;
+    nodesSelectionActive: boolean;
+    selectionActive: boolean;
+    selection: SelectionRect | null;
+    connectionSourceId: ElementId | null;
+    connectionPosition: XYPosition;
+    snapToGrid: boolean;
+    snapGrid: [number, number];
+    onConnect: OnConnectFunc;
+    setOnConnect: Action<StoreModel, OnConnectFunc>;
+    setNodes: Action<StoreModel, Node[]>;
+    setEdges: Action<StoreModel, Edge[]>;
+    updateNodeData: Action<StoreModel, NodeUpdate>;
+    updateNodePos: Action<StoreModel, NodePosUpdate>;
+    setSelection: Action<StoreModel, boolean>;
+    setNodesSelection: Action<StoreModel, SelectionUpdate>;
+    setSelectedElements: Action<StoreModel, Elements | Node | Edge>;
+    updateSelection: Action<StoreModel, SelectionRect>;
+    updateTransform: Action<StoreModel, TransformXYK>;
+    updateSize: Action<StoreModel, Dimensions>;
+    initD3: Action<StoreModel, D3Init>;
+    setSnapGrid: Action<StoreModel, SetSnapGrid>;
+    setConnectionPosition: Action<StoreModel, XYPosition>;
+    setConnectionSourceId: Action<StoreModel, ElementId | null>;
+}
+declare const store: {
+    getState: () => import("easy-peasy").IntermediateStateMapper<{
+        width: number;
+        height: number;
+        transform: [number, number, number];
+        nodes: Node[];
+        edges: Edge[];
+        selectedElements: (Node | Edge)[];
+        selectedNodesBbox: Rect;
+        d3Zoom: ZoomBehavior<Element, unknown> | null;
+        d3Selection: D3Selection<Element, unknown, null, undefined> | null;
+        d3Initialised: boolean;
+        nodesSelectionActive: boolean;
+        selectionActive: boolean;
+        selection: SelectionRect | null;
+        connectionSourceId: string | null;
+        connectionPosition: XYPosition;
+        snapToGrid: boolean;
+        snapGrid: [number, number];
+        onConnect: OnConnectFunc;
+    }, "1">;
+    subscribe: (listener: () => void) => import("redux").Unsubscribe;
+    replaceReducer: (nextReducer: import("redux").Reducer<import("easy-peasy").IntermediateStateMapper<{
+        width: number;
+        height: number;
+        transform: [number, number, number];
+        nodes: Node[];
+        edges: Edge[];
+        selectedElements: (Node | Edge)[];
+        selectedNodesBbox: Rect;
+        d3Zoom: ZoomBehavior<Element, unknown> | null;
+        d3Selection: D3Selection<Element, unknown, null, undefined> | null;
+        d3Initialised: boolean;
+        nodesSelectionActive: boolean;
+        selectionActive: boolean;
+        selection: SelectionRect | null;
+        connectionSourceId: string | null;
+        connectionPosition: XYPosition;
+        snapToGrid: boolean;
+        snapGrid: [number, number];
+        onConnect: OnConnectFunc;
+    }, "1">, import("redux").AnyAction>) => void;
+    dispatch: import("easy-peasy").Dispatch<StoreModel, import("redux").Action<any>>;
+    addModel: <ModelSlice extends object>(key: string, modelSlice: ModelSlice) => void;
+    clearMockedActions: () => void;
+    getActions: () => import("easy-peasy").ActionMapper<{
+        selectedNodesBbox: Rect;
+        d3Zoom: ZoomBehavior<Element, unknown> | null;
+        d3Selection: D3Selection<Element, unknown, null, undefined> | null;
+        selection: SelectionRect | null;
+        connectionPosition: XYPosition;
+        onConnect: OnConnectFunc;
+        setOnConnect: Action<StoreModel, OnConnectFunc>;
+        setNodes: Action<StoreModel, Node[]>;
+        setEdges: Action<StoreModel, Edge[]>;
+        updateNodeData: Action<StoreModel, NodeUpdate>;
+        updateNodePos: Action<StoreModel, NodePosUpdate>;
+        setSelection: Action<StoreModel, boolean>;
+        setNodesSelection: Action<StoreModel, SelectionUpdate>;
+        setSelectedElements: Action<StoreModel, Node | Edge | (Node | Edge)[]>;
+        updateSelection: Action<StoreModel, SelectionRect>;
+        updateTransform: Action<StoreModel, TransformXYK>;
+        updateSize: Action<StoreModel, Dimensions>;
+        initD3: Action<StoreModel, D3Init>;
+        setSnapGrid: Action<StoreModel, SetSnapGrid>;
+        setConnectionPosition: Action<StoreModel, XYPosition>;
+        setConnectionSourceId: Action<StoreModel, string | null>;
+    }, "1">;
+    getListeners: () => import("easy-peasy").ListenerMapper<{
+        selectedNodesBbox: Rect;
+        d3Zoom: ZoomBehavior<Element, unknown> | null;
+        d3Selection: D3Selection<Element, unknown, null, undefined> | null;
+        selection: SelectionRect | null;
+        connectionPosition: XYPosition;
+        onConnect: OnConnectFunc;
+    }, "1">;
+    getMockedActions: () => import("easy-peasy").MockedAction[];
+    reconfigure: <NewStoreModel extends object>(model: NewStoreModel) => void;
+    removeModel: (key: string) => void;
+};
+export default store;

dist/types/index.d.ts

@@ -0,0 +1,110 @@
+import { CSSProperties, SVGAttributes } from 'react';
+export declare type ElementId = string;
+export declare type Elements = Array<Node | Edge>;
+export declare type Transform = [number, number, number];
+export declare type Position = 'left' | 'top' | 'right' | 'bottom';
+export declare type XYPosition = {
+    x: number;
+    y: number;
+};
+export declare enum GridType {
+    Lines = "lines",
+    Dots = "dots"
+}
+export declare type HandleType = 'source' | 'target';
+export declare type NodeTypesType = {
+    [key: string]: React.ReactNode;
+};
+export declare type EdgeTypesType = NodeTypesType;
+export interface Dimensions {
+    width: number;
+    height: number;
+}
+export interface Rect extends Dimensions {
+    x: number;
+    y: number;
+}
+export interface SelectionRect extends Rect {
+    startX: number;
+    startY: number;
+    draw: boolean;
+}
+export interface Node {
+    id: ElementId;
+    position: XYPosition;
+    type?: string;
+    __rg?: any;
+    data?: any;
+    style?: CSSProperties;
+}
+export interface Edge {
+    id: ElementId;
+    type?: string;
+    source: ElementId;
+    target: ElementId;
+    style?: SVGAttributes<{}>;
+    animated?: boolean;
+}
+export interface EdgeProps {
+    sourceX: number;
+    sourceY: number;
+    targetX: number;
+    targetY: number;
+    style?: SVGAttributes<{}>;
+}
+export interface EdgeBezierProps extends EdgeProps {
+    sourcePosition: Position;
+    targetPosition: Position;
+}
+export interface NodeProps {
+    id: ElementId;
+    type: string;
+    data: any;
+    selected: boolean;
+    style?: CSSProperties;
+}
+export interface NodeComponentProps {
+    id: ElementId;
+    type: string;
+    data: any;
+    selected?: boolean;
+    transform?: Transform;
+    xPos?: number;
+    yPos?: number;
+    onClick?: (node: Node) => void | undefined;
+    onNodeDragStop?: () => any;
+    style?: CSSProperties;
+}
+export declare type FitViewParams = {
+    padding: number;
+};
+export declare type FitViewFunc = (fitViewOptions: FitViewParams) => void;
+declare type OnLoadParams = {
+    zoomIn: () => void;
+    zoomOut: () => void;
+    fitView: FitViewFunc;
+};
+export declare type OnLoadFunc = (params: OnLoadParams) => void;
+export declare type Connection = {
+    source: ElementId | null;
+    target: ElementId | null;
+};
+export declare type OnConnectFunc = (params: Connection) => void;
+export interface HandleElement {
+    id?: ElementId | null;
+    position: Position;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface EdgeCompProps {
+    id: ElementId;
+    source: ElementId;
+    target: ElementId;
+    type: any;
+    onClick?: (edge: Edge) => void;
+    animated?: boolean;
+    selected?: boolean;
+}
+export {};

dist/utils/graph.d.ts

@@ -0,0 +1,14 @@
+import { Node, Edge, XYPosition, Rect, FitViewParams } from '../types';
+export declare const isEdge: (element: Node | Edge) => boolean;
+export declare const isNode: (element: Node | Edge) => boolean;
+export declare const getOutgoers: (node: Node, elements: (Node | Edge)[]) => (Node | Edge)[];
+export declare const removeElements: (elementsToRemove: (Node | Edge)[], elements: (Node | Edge)[]) => (Node | Edge)[];
+export declare const addEdge: (edgeParams: Edge, elements: (Node | Edge)[]) => (Node | Edge)[];
+export declare const parseElement: (element: Node | Edge, transform?: [number, number, number]) => Node | Edge;
+export declare const getBoundingBox: (nodes: Node[]) => Rect;
+export declare const graphPosToZoomedPos: (pos: XYPosition, transform: [number, number, number]) => XYPosition;
+export declare const getNodesInside: (nodes: Node[], bbox: Rect, transform?: [number, number, number], partially?: boolean) => Node[];
+export declare const getConnectedEdges: (nodes: Node[], edges: Edge[]) => Edge[];
+export declare const fitView: ({ padding }?: FitViewParams) => void;
+export declare const zoomIn: () => void;
+export declare const zoomOut: () => void;

dist/utils/index.d.ts

@@ -0,0 +1,6 @@
+import { MouseEvent as ReactMouseEvent } from 'react';
+export declare const isInputDOMNode: (e: MouseEvent | ReactMouseEvent<Element, MouseEvent> | ReactMouseEvent<HTMLElement | SVGElement, MouseEvent> | import("react").TouchEvent<HTMLElement | SVGElement> | TouchEvent | KeyboardEvent) => boolean;
+export declare const getDimensions: (node: HTMLDivElement) => {
+    width: number;
+    height: number;
+};

example/src/Advanced/index.js

@@ -14,7 +14,7 @@ class App extends PureComponent {
     const onChange = (option, d) => {
       this.setState(prevState => (
         {elements: prevState.elements.map(e => {
-          if (isEdge(e) || e.id !== '6') {
+          if (isEdge(e) || e.id !== '6') {
             return e;
           }
 
@@ -32,7 +32,7 @@ class App extends PureComponent {
     const onChangeInput = (input, d) => {
       this.setState(prevState => (
         {elements: prevState.elements.map(e => {
-          if (isEdge(e) || e.id !== '8') {
+          if (isEdge(e) || e.id !== '8') {
             return e;
           }
 
@@ -41,7 +41,7 @@ class App extends PureComponent {
               ...e,
               data: {
                 ...e.data,
-                input: input || 'write something'
+                input: input || 'write something'
               }
             };
           } else {
@@ -145,6 +145,8 @@ class App extends PureComponent {
         connectionLineType="bezier"
         backgroundColor="#888"
         backgroundGap={16}
+        snapToGrid={true}
+        snapGrid={[16, 16]}
       >
         <MiniMap
           style={{ position: 'absolute', right: 10, bottom: 10 }}
@@ -169,4 +171,4 @@ class App extends PureComponent {
   }
 }
 
-export default App;
+export default App;

package-lock.json

@@ -3814,8 +3814,7 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -3836,14 +3835,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -3858,20 +3855,17 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -3988,8 +3982,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "ini": {
           "version": "1.3.5",
@@ -4001,7 +3994,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -4016,7 +4008,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -4024,14 +4015,12 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -4050,7 +4039,6 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -4131,8 +4119,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -4144,7 +4131,6 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -4230,8 +4216,7 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -4267,7 +4252,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -4287,7 +4271,6 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -4331,14 +4314,12 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         }
       }
     },
@@ -6704,6 +6685,12 @@
       "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
       "dev": true
     },
+    "prettier": {
+      "version": "1.18.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.18.2.tgz",
+      "integrity": "sha512-OeHeMc0JhFE9idD4ZdtNibzY0+TPHSpSSb9h8FqtP+YnoZZ1sl8Vc9b1sasjfymH3SonAF4QcA2+mzHPhMvIiw==",
+      "dev": true
+    },
     "pretty-bytes": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-3.0.1.tgz",

package.json

@@ -30,6 +30,7 @@
     "cypress": "^3.4.1",
     "husky": "^3.0.9",
     "postcss-nested": "^4.1.2",
+    "prettier": "1.18.2",
     "prop-types": "^15.7.2",
     "react": "^16.10.2",
     "rollup": "^1.25.1",

prettier.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  trailingComma: 'es5',
+  singleQuote: true
+};

src/components/BackgroundGrid/index.tsx

@@ -1,30 +1,40 @@
-import React, {memo} from 'react';
+import React, { memo, HTMLAttributes, CSSProperties } from 'react';
 import classnames from 'classnames';
 
 import { useStoreState } from '../../store/hooks';
 import { GridType } from '../../types';
 
-interface GridProps {
+interface GridProps extends HTMLAttributes<SVGElement> {
   backgroundType?: GridType;
   gap?: number;
   color?: string;
   size?: number;
-  style?: React.CSSProperties;
-  className?: string | null;
-};
+}
 
-const baseStyles: React.CSSProperties = {
+const baseStyles: CSSProperties = {
   position: 'absolute',
   top: 0,
   left: 0,
 };
 
-const createGridLines = (width: number, height: number, xOffset: number, yOffset: number, gap: number): string => {
+const createGridLines = (
+  width: number,
+  height: number,
+  xOffset: number,
+  yOffset: number,
+  gap: number
+): string => {
   const lineCountX = Math.ceil(width / gap) + 1;
   const lineCountY = Math.ceil(height / gap) + 1;
 
-  const xValues = Array.from({length: lineCountX}, (_, i) => `M${i * gap + xOffset} 0 V${height}`);
-  const yValues = Array.from({length: lineCountY}, (_, i) => `M0 ${i * gap + yOffset} H${width}`);
+  const xValues = Array.from(
+    { length: lineCountX },
+    (_, i) => `M${i * gap + xOffset} 0 V${height}`
+  );
+  const yValues = Array.from(
+    { length: lineCountY },
+    (_, i) => `M0 ${i * gap + yOffset} H${width}`
+  );
 
   return [...xValues, ...yValues].join(' ');
 };
@@ -40,11 +50,12 @@ const createGridDots = (
   const lineCountX = Math.ceil(width / gap) + 1;
   const lineCountY = Math.ceil(height / gap) + 1;
 
-  const values = Array.from({length: lineCountX}, (_, col) => {
+  const values = Array.from({ length: lineCountX }, (_, col) => {
     const x = col * gap + xOffset;
-    return Array.from({length: lineCountY}, (_, row) => {
+    return Array.from({ length: lineCountY }, (_, row) => {
       const y = row * gap + yOffset;
-      return `M${x} ${y - size} l${size} ${size} l${-size} ${size} l${-size} ${-size}z`;
+      return `M${x} ${y -
+        size} l${size} ${size} l${-size} ${size} l${-size} ${-size}z`;
     }).join(' ');
   });
 
@@ -52,7 +63,14 @@ const createGridDots = (
 };
 
 const Grid = memo(
-  ({gap = 24, color = '#aaa', size = 0.5, style = {}, className = null, backgroundType = GridType.Dots}: GridProps) => {
+  ({
+    gap = 24,
+    color = '#aaa',
+    size = 0.5,
+    style = {},
+    className = '',
+    backgroundType = GridType.Dots,
+  }: GridProps) => {
     const {
       width,
       height,
@@ -73,7 +91,12 @@ const Grid = memo(
     const stroke = isLines ? color : 'none';
 
     return (
-      <svg width={width} height={height} style={{...baseStyles, ...style}} className={gridClasses}>
+      <svg
+        width={width}
+        height={height}
+        style={{ ...baseStyles, ...style }}
+        className={gridClasses}
+      >
         <path fill={fill} stroke={stroke} strokeWidth={size} d={path} />
       </svg>
     );

src/components/ConnectionLine/index.tsx

@@ -7,16 +7,22 @@ interface ConnectionLineProps {
   connectionSourceId: ElementId;
   connectionPositionX: number;
   connectionPositionY: number;
-  connectionLineType?: string | null;
+  connectionLineType?: string | null;
   nodes: Node[];
   transform: Transform;
   connectionLineStyle?: SVGAttributes<{}>;
   className?: string;
-};
+}
 
 export default ({
-  connectionSourceId, connectionLineStyle = {}, connectionPositionX, connectionPositionY,
-  connectionLineType, nodes = [], className, transform
+  connectionSourceId,
+  connectionLineStyle = {},
+  connectionPositionX,
+  connectionPositionY,
+  connectionLineType,
+  nodes = [],
+  className,
+  transform,
 }: ConnectionLineProps) => {
   const [sourceNode, setSourceNode] = useState<Node | null>(null);
   const hasHandleId = connectionSourceId.includes('__');
@@ -25,7 +31,7 @@ export default ({
   const handleId = hasHandleId ? sourceIdSplitted[1] : null;
 
   useEffect(() => {
-    const nextSourceNode = nodes.find(n => n.id === nodeId) || null;
+    const nextSourceNode = nodes.find(n => n.id === nodeId) || null;
     setSourceNode(nextSourceNode);
   }, []);
 
@@ -35,11 +41,17 @@ export default ({
 
   const edgeClasses: string = cx('react-flow__edge', 'connection', className);
 
-  const sourceHandle = handleId ?
-    sourceNode.__rg.handleBounds.source.find((d: HandleElement) => d.id === handleId) :
-    sourceNode.__rg.handleBounds.source[0];
-  const sourceHandleX = sourceHandle ? sourceHandle.x + (sourceHandle.width / 2) : sourceNode.__rg.width / 2;
-  const sourceHandleY = sourceHandle ? sourceHandle.y + (sourceHandle.height / 2) : sourceNode.__rg.height;
+  const sourceHandle = handleId
+    ? sourceNode.__rg.handleBounds.source.find(
+        (d: HandleElement) => d.id === handleId
+      )
+    : sourceNode.__rg.handleBounds.source[0];
+  const sourceHandleX = sourceHandle
+    ? sourceHandle.x + sourceHandle.width / 2
+    : sourceNode.__rg.width / 2;
+  const sourceHandleY = sourceHandle
+    ? sourceHandle.y + sourceHandle.height / 2
+    : sourceNode.__rg.height;
   const sourceX = sourceNode.__rg.position.x + sourceHandleX;
   const sourceY = sourceNode.__rg.position.y + sourceHandleY;
 
@@ -58,10 +70,7 @@ export default ({
 
   return (
     <g className={edgeClasses}>
-      <path
-        d={dAttr}
-        {...connectionLineStyle}
-      />
+      <path d={dAttr} {...connectionLineStyle} />
     </g>
   );
 };

src/components/Edges/BezierEdge.tsx

@@ -2,28 +2,36 @@ import React, { memo } from 'react';
 
 import { EdgeBezierProps } from '../../types';
 
-export default memo(({
-  sourceX, sourceY, targetX, targetY,
-  sourcePosition = 'bottom', targetPosition = 'top', style = {}
-}: EdgeBezierProps) => {
-  const yOffset = Math.abs(targetY - sourceY) / 2;
-  const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
+export default memo(
+  ({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition = 'bottom',
+    targetPosition = 'top',
+    style = {},
+  }: EdgeBezierProps) => {
+    const yOffset = Math.abs(targetY - sourceY) / 2;
+    const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
 
-  let dAttr = `M${sourceX},${sourceY} C${sourceX},${centerY} ${targetX},${centerY} ${targetX},${targetY}`;
+    let dAttr = `M${sourceX},${sourceY} C${sourceX},${centerY} ${targetX},${centerY} ${targetX},${targetY}`;
 
-  if (['left', 'right'].includes(sourcePosition) && ['left', 'right'].includes(targetPosition)) {
-    const xOffset = Math.abs(targetX - sourceX) / 2;
-    const centerX = targetX < sourceX ? targetX + xOffset : targetX - xOffset;
+    if (
+      ['left', 'right'].includes(sourcePosition) &&
+      ['left', 'right'].includes(targetPosition)
+    ) {
+      const xOffset = Math.abs(targetX - sourceX) / 2;
+      const centerX = targetX < sourceX ? targetX + xOffset : targetX - xOffset;
 
-    dAttr = `M${sourceX},${sourceY} C${centerX},${sourceY} ${centerX},${targetY} ${targetX},${targetY}`;
-  } else if (['left', 'right'].includes(sourcePosition) || ['left', 'right'].includes(targetPosition)) {
-    dAttr = `M${sourceX},${sourceY} C${sourceX},${targetY} ${sourceX},${targetY} ${targetX},${targetY}`;
+      dAttr = `M${sourceX},${sourceY} C${centerX},${sourceY} ${centerX},${targetY} ${targetX},${targetY}`;
+    } else if (
+      ['left', 'right'].includes(sourcePosition) ||
+      ['left', 'right'].includes(targetPosition)
+    ) {
+      dAttr = `M${sourceX},${sourceY} C${sourceX},${targetY} ${sourceX},${targetY} ${targetX},${targetY}`;
+    }
+
+    return <path {...style} d={dAttr} />;
   }
-
-  return (
-    <path
-      {...style}
-      d={dAttr}
-    />
-  );
-});
+);

src/components/Edges/StepEdge.tsx

@@ -2,16 +2,16 @@ import React, { memo } from 'react';
 
 import { EdgeProps } from '../../types';
 
-export default memo(({
-  sourceX, sourceY, targetX, targetY, style = {}
-} : EdgeProps) => {
-  const yOffset = Math.abs(targetY - sourceY) / 2;
-  const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
+export default memo(
+  ({ sourceX, sourceY, targetX, targetY, style = {} }: EdgeProps) => {
+    const yOffset = Math.abs(targetY - sourceY) / 2;
+    const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
 
-  return (
-    <path
-      {...style}
-      d={`M ${sourceX},${sourceY}L ${sourceX},${centerY}L ${targetX},${centerY}L ${targetX},${targetY}`}
-    />
-  );
-});
+    return (
+      <path
+        {...style}
+        d={`M ${sourceX},${sourceY}L ${sourceX},${centerY}L ${targetX},${centerY}L ${targetX},${targetY}`}
+      />
+    );
+  }
+);

src/components/Edges/StraightEdge.tsx

@@ -2,13 +2,10 @@ import React, { memo } from 'react';
 
 import { EdgeProps } from '../../types';
 
-export default memo(({
-  sourceX, sourceY, targetX, targetY, style = {}
-}: EdgeProps) => {
-  return (
-    <path
-      {...style}
-      d={`M ${sourceX},${sourceY}L ${targetX},${targetY}`}
-    />
-  );
-});
+export default memo(
+  ({ sourceX, sourceY, targetX, targetY, style = {} }: EdgeProps) => {
+    return (
+      <path {...style} d={`M ${sourceX},${sourceY}L ${targetX},${targetY}`} />
+    );
+  }
+);

src/components/Edges/wrapEdge.tsx

@@ -3,42 +3,56 @@ import cx from 'classnames';
 
 import { isInputDOMNode } from '../../utils';
 import store from '../../store';
-import { EdgeWrapperProps } from '../../types';
+import { ElementId, Edge, EdgeCompProps } from '../../types';
 
-export default (EdgeComponent: ComponentType<EdgeWrapperProps>) => {
-  const EdgeWrapper = memo(({
-    id, source, target, type,
-    animated, selected, onClick,
-    ...rest
-  }: EdgeWrapperProps) => {
-    const edgeClasses = cx('react-flow__edge', { selected, animated });
-    const onEdgeClick = (evt: MouseEvent) => {
-      if (isInputDOMNode(evt)) {
-        return false;
-      }
+interface EdgeWrapperProps {
+  id: ElementId;
+  source: ElementId;
+  target: ElementId;
+  type: any;
+  onClick: (edge: Edge) => void;
+  animated: boolean;
+  selected: boolean;
+}
 
-      store.dispatch.setSelectedElements({ id, source, target });
-      onClick({ id, source, target, type });
-    };
+export default (EdgeComponent: ComponentType<EdgeCompProps>) => {
+  const EdgeWrapper = memo(
+    ({
+      id,
+      source,
+      target,
+      type,
+      animated,
+      selected,
+      onClick,
+      ...rest
+    }: EdgeWrapperProps) => {
+      const edgeClasses = cx('react-flow__edge', { selected, animated });
+      const onEdgeClick = (evt: MouseEvent): void => {
+        if (isInputDOMNode(evt)) {
+          return;
+        }
 
-    return (
-      <g
-        className={edgeClasses}
-        onClick={onEdgeClick}
-      >
-        <EdgeComponent
-          id={id}
-          source={source}
-          target={target}
-          type={type}
-          animated={animated}
-          selected={selected}
-          onClick={onClick}
-          {...rest}
-        />
-      </g>
-    );
-  });
+        store.dispatch.setSelectedElements({ id, source, target });
+        onClick({ id, source, target, type });
+      };
+
+      return (
+        <g className={edgeClasses} onClick={onEdgeClick}>
+          <EdgeComponent
+            id={id}
+            source={source}
+            target={target}
+            type={type}
+            animated={animated}
+            selected={selected}
+            onClick={onClick}
+            {...rest}
+          />
+        </g>
+      );
+    }
+  );
 
   EdgeWrapper.displayName = 'EdgeWrapper';
 

src/components/Handle/BaseHandle.tsx

@@ -1,41 +1,54 @@
 import React, { memo, MouseEvent as ReactMouseEvent } from 'react';
 import cx from 'classnames';
 
-import { HandleType, ElementId, Position, XYPosition, OnConnectFunc, Connection } from '../../types';
+import {
+  HandleType,
+  ElementId,
+  Position,
+  XYPosition,
+  OnConnectFunc,
+  Connection,
+} from '../../types';
 
 type ValidConnectionFunc = (connection: Connection) => boolean;
+type SetSourceIdFunc = (nodeId: ElementId | null) => void;
 
 interface BaseHandleProps {
   type: HandleType;
   nodeId: ElementId;
   onConnect: OnConnectFunc;
   position: Position;
-  setSourceId: (nodeId: ElementId) => void;
+  setSourceId: SetSourceIdFunc;
   setPosition: (pos: XYPosition) => void;
   isValidConnection: ValidConnectionFunc;
-  id?: ElementId | boolean;
+  id?: ElementId | boolean;
   className?: string;
-};
+}
 
 type Result = {
-  elementBelow: Element;
+  elementBelow: Element | null;
   isValid: boolean;
   connection: Connection;
   isHoveringHandle: boolean;
 };
 
 function onMouseDown(
-  evt: ReactMouseEvent, nodeId: ElementId, setSourceId: (nodeId: ElementId) => void, setPosition: (pos: XYPosition) => any,
-  onConnect: OnConnectFunc, isTarget: boolean, isValidConnection: ValidConnectionFunc
+  evt: ReactMouseEvent,
+  nodeId: ElementId,
+  setSourceId: SetSourceIdFunc,
+  setPosition: (pos: XYPosition) => any,
+  onConnect: OnConnectFunc,
+  isTarget: boolean,
+  isValidConnection: ValidConnectionFunc
 ): void {
   const reactFlowNode = document.querySelector('.react-flow');
 
   if (!reactFlowNode) {
-    return null;
+    return;
   }
 
   const containerBounds = reactFlowNode.getBoundingClientRect();
-  let recentHoveredHandle: Element = null;
+  let recentHoveredHandle: Element;
 
   setPosition({
     x: evt.clientX - containerBounds.left,
@@ -43,9 +56,9 @@ function onMouseDown(
   });
   setSourceId(nodeId);
 
-  function resetRecentHandle() {
+  function resetRecentHandle(): void {
     if (!recentHoveredHandle) {
-      return false;
+      return;
     }
 
     recentHoveredHandle.classList.remove('valid');
@@ -55,14 +68,19 @@ function onMouseDown(
   // checks if element below mouse is a handle and returns connection in form of an object { source: 123, target: 312 }
   function checkElementBelowIsValid(evt: MouseEvent) {
     const elementBelow = document.elementFromPoint(evt.clientX, evt.clientY);
+
     const result: Result = {
       elementBelow,
       isValid: false,
       connection: { source: null, target: null },
-      isHoveringHandle: false
+      isHoveringHandle: false,
     };
 
-    if (elementBelow && (elementBelow.classList.contains('target') || elementBelow.classList.contains('source'))) {
+    if (
+      elementBelow &&
+      (elementBelow.classList.contains('target') ||
+        elementBelow.classList.contains('source'))
+    ) {
       let connection: Connection = { source: null, target: null };
 
       if (isTarget) {
@@ -89,7 +107,12 @@ function onMouseDown(
       y: evt.clientY - containerBounds.top,
     });
 
-    const { connection, elementBelow, isValid, isHoveringHandle } = checkElementBelowIsValid(evt);
+    const {
+      connection,
+      elementBelow,
+      isValid,
+      isHoveringHandle,
+    } = checkElementBelowIsValid(evt);
 
     if (!isHoveringHandle) {
       return resetRecentHandle();
@@ -97,7 +120,7 @@ function onMouseDown(
 
     const isOwnHandle = connection.source === connection.target;
 
-    if (!isOwnHandle) {
+    if (!isOwnHandle && elementBelow) {
       recentHoveredHandle = elementBelow;
       elementBelow.classList.add('connecting');
       elementBelow.classList.toggle('valid', isValid);
@@ -105,7 +128,7 @@ function onMouseDown(
   }
 
   function onMouseUp(evt: MouseEvent) {
-    const { connection, isValid } = checkElementBelowIsValid(evt);
+    const { connection, isValid } = checkElementBelowIsValid(evt);
 
     if (isValid) {
       onConnect(connection);
@@ -119,37 +142,51 @@ function onMouseDown(
   }
 
   document.addEventListener('mousemove', onMouseMove);
-  document.addEventListener('mouseup', onMouseUp)
+  document.addEventListener('mouseup', onMouseUp);
 }
 
-const BaseHandle = memo(({
-  type, nodeId, onConnect, position,
-  setSourceId, setPosition, className,
-  id = false, isValidConnection, ...rest
-}: BaseHandleProps) => {
-  const isTarget = type === 'target';
-  const handleClasses = cx(
-    'react-flow__handle',
-    className,
+const BaseHandle = memo(
+  ({
+    type,
+    nodeId,
+    onConnect,
     position,
-    { source: !isTarget, target: isTarget }
-  );
+    setSourceId,
+    setPosition,
+    className,
+    id = false,
+    isValidConnection,
+    ...rest
+  }: BaseHandleProps) => {
+    const isTarget = type === 'target';
+    const handleClasses = cx('react-flow__handle', className, position, {
+      source: !isTarget,
+      target: isTarget,
+    });
 
-  const nodeIdWithHandleId = id ? `${nodeId}__${id}` : nodeId;
+    const nodeIdWithHandleId = id ? `${nodeId}__${id}` : nodeId;
 
-  return (
-    <div
-      data-nodeid={nodeIdWithHandleId}
-      data-handlepos={position}
-      className={handleClasses}
-      onMouseDown={evt => onMouseDown(evt,
-        nodeIdWithHandleId, setSourceId, setPosition,
-        onConnect, isTarget, isValidConnection
-      )}
-      {...rest}
-    />
-  );
-});
+    return (
+      <div
+        data-nodeid={nodeIdWithHandleId}
+        data-handlepos={position}
+        className={handleClasses}
+        onMouseDown={evt =>
+          onMouseDown(
+            evt,
+            nodeIdWithHandleId,
+            setSourceId,
+            setPosition,
+            onConnect,
+            isTarget,
+            isValidConnection
+          )
+        }
+        {...rest}
+      />
+    );
+  }
+);
 
 BaseHandle.displayName = 'BaseHandle';
 

src/components/Handle/index.tsx

@@ -2,45 +2,56 @@ import React, { memo, useContext } from 'react';
 
 import { useStoreActions, useStoreState } from '../../store/hooks';
 import BaseHandle from './BaseHandle';
-import NodeIdContext from '../../contexts/NodeIdContext'
+import NodeIdContext from '../../contexts/NodeIdContext';
 
-import { HandleType, ElementId, Position, OnConnectParams, OnConnectFunc } from '../../types';
+import {
+  HandleType,
+  ElementId,
+  Position,
+  Connection,
+  OnConnectFunc,
+} from '../../types';
 
 interface HandleProps {
-  type: HandleType,
-  position: Position,
-  onConnect?: OnConnectFunc,
-  isValidConnection?: () => boolean
-};
+  type: HandleType;
+  position: Position;
+  onConnect?: OnConnectFunc;
+  isValidConnection?: () => boolean;
+}
 
-const Handle = memo(({
-  onConnect = _ => {}, type = 'source', position = 'top', isValidConnection = () => true,
-  ...rest
-}: HandleProps) => {
-  const nodeId = useContext(NodeIdContext) as ElementId;
-  const { setPosition, setSourceId } = useStoreActions(a => ({
-    setPosition: a.setConnectionPosition,
-    setSourceId: a.setConnectionSourceId
-  }));
-  const onConnectAction = useStoreState(s => s.onConnect);
-  const onConnectExtended = (params: OnConnectParams) => {
-    onConnectAction(params);
-    onConnect(params);
-  };
+const Handle = memo(
+  ({
+    onConnect = _ => {},
+    type = 'source',
+    position = 'top',
+    isValidConnection = () => true,
+    ...rest
+  }: HandleProps) => {
+    const nodeId = useContext(NodeIdContext) as ElementId;
+    const { setPosition, setSourceId } = useStoreActions(a => ({
+      setPosition: a.setConnectionPosition,
+      setSourceId: a.setConnectionSourceId,
+    }));
+    const onConnectAction = useStoreState(s => s.onConnect);
+    const onConnectExtended = (params: Connection) => {
+      onConnectAction(params);
+      onConnect(params);
+    };
 
-  return (
-    <BaseHandle
-      nodeId={nodeId}
-      setPosition={setPosition}
-      setSourceId={setSourceId}
-      onConnect={onConnectExtended}
-      type={type}
-      position={position}
-      isValidConnection={isValidConnection}
-      {...rest}
-    />
-  );
-});
+    return (
+      <BaseHandle
+        nodeId={nodeId}
+        setPosition={setPosition}
+        setSourceId={setSourceId}
+        onConnect={onConnectExtended}
+        type={type}
+        position={position}
+        isValidConnection={isValidConnection}
+        {...rest}
+      />
+    );
+  }
+);
 
 Handle.displayName = 'Handle';
 

src/components/Nodes/DefaultNode.tsx

@@ -7,7 +7,7 @@ const nodeStyles: CSSProperties = {
   background: '#ff6060',
   padding: 10,
   borderRadius: 5,
-  width: 150
+  width: 150,
 };
 
 export default ({ data, style }: NodeProps) => (

src/components/Nodes/InputNode.tsx

@@ -7,7 +7,7 @@ const nodeStyles: CSSProperties = {
   background: '#9999ff',
   padding: 10,
   borderRadius: 5,
-  width: 150
+  width: 150,
 };
 
 export default ({ data, style }: NodeProps) => (

src/components/Nodes/OutputNode.tsx

@@ -7,7 +7,7 @@ const nodeStyles: CSSProperties = {
   background: '#55dd99',
   padding: 10,
   borderRadius: 5,
-  width: 150
+  width: 150,
 };
 
 export default ({ data, style }: NodeProps) => (

src/components/Nodes/wrapNode.tsx

@@ -1,4 +1,11 @@
-import React, { useEffect, useRef, useState, memo, ComponentType } from 'react';
+import React, {
+  useEffect,
+  useRef,
+  useState,
+  memo,
+  ComponentType,
+  CSSProperties,
+} from 'react';
 import { DraggableCore, DraggableEvent } from 'react-draggable';
 import cx from 'classnames';
 import { ResizeObserver } from 'resize-observer';
@@ -6,7 +13,28 @@ import { ResizeObserver } from 'resize-observer';
 import { getDimensions, isInputDOMNode } from '../../utils';
 import { Provider } from '../../contexts/NodeIdContext';
 import store from '../../store';
-import { NodeComponentProps, Node, XYPosition, HandleElement, Position, Transform, ElementId } from '../../types';
+import {
+  Node,
+  XYPosition,
+  HandleElement,
+  Position,
+  Transform,
+  ElementId,
+  NodeComponentProps,
+} from '../../types';
+
+interface WrapNodeProps {
+  id: ElementId;
+  type: string;
+  data: any;
+  selected: boolean;
+  transform: Transform;
+  xPos: number;
+  yPos: number;
+  onClick: (node: Node) => void | undefined;
+  onNodeDragStop: (node: Node) => void;
+  style?: CSSProperties;
+}
 
 const isHandle = (evt: MouseEvent | DraggableEvent) => {
   const target = evt.target as HTMLElement;
@@ -14,165 +42,239 @@ const isHandle = (evt: MouseEvent | DraggableEvent) => {
   return (
     target.className &&
     target.className.includes &&
-    (target.className.includes('source') || target.className.includes('target'))
+    (target.className.includes('source') || target.className.includes('target'))
   );
 };
 
 const getHandleBounds = (
-  selector: string, nodeElement: HTMLDivElement, parentBounds: ClientRect | DOMRect, k: number
-): HandleElement => {
+  selector: string,
+  nodeElement: HTMLDivElement,
+  parentBounds: ClientRect | DOMRect,
+  k: number
+): HandleElement[] | null => {
   const handles = nodeElement.querySelectorAll(selector);
 
   if (!handles || !handles.length) {
     return null;
   }
 
-  return [].map.call(handles, (handle: HTMLDivElement): HandleElement => {
-    const bounds = handle.getBoundingClientRect();
-    const dimensions = getDimensions(handle);
-    const nodeIdAttr = handle.getAttribute('data-nodeid');
-    const handlePosition = handle.getAttribute('data-handlepos') as unknown as Position;
-    const nodeIdSplitted = nodeIdAttr.split('__');
+  const handlesArray = Array.from(handles) as HTMLDivElement[];
 
-    let handleId = null;
+  return handlesArray.map(
+    (handle): HandleElement => {
+      const bounds = handle.getBoundingClientRect();
+      const dimensions = getDimensions(handle);
+      const nodeIdAttr = handle.getAttribute('data-nodeid');
+      const handlePosition = (handle.getAttribute(
+        'data-handlepos'
+      ) as unknown) as Position;
+      const nodeIdSplitted = nodeIdAttr ? nodeIdAttr.split('__') : null;
 
-    if (nodeIdSplitted) {
-      handleId = (nodeIdSplitted.length ? nodeIdSplitted[1] : nodeIdSplitted) as string;
+      let handleId = null;
+
+      if (nodeIdSplitted) {
+        handleId = (nodeIdSplitted.length
+          ? nodeIdSplitted[1]
+          : nodeIdSplitted) as string;
+      }
+
+      return {
+        id: handleId,
+        position: handlePosition,
+        x: (bounds.left - parentBounds.left) * (1 / k),
+        y: (bounds.top - parentBounds.top) * (1 / k),
+        ...dimensions,
+      };
     }
-
-    return {
-      id: handleId,
-      position: handlePosition,
-      x: (bounds.left - parentBounds.left) * (1 / k),
-      y: (bounds.top - parentBounds.top) * (1 / k),
-      ...dimensions
-    };
-  });
+  );
 };
 
 const onStart = (
-  evt: MouseEvent, onClick: (node: Node) => void, id: ElementId, type: string,
-  data: any, setOffset: (pos: XYPosition) => void, transform: Transform, position: XYPosition
-): false | void => {
+  evt: MouseEvent,
+  onClick: (node: Node) => void,
+  id: ElementId,
+  type: string,
+  data: any,
+  setOffset: (pos: XYPosition) => void,
+  transform: Transform,
+  position: XYPosition
+): false | void => {
   if (isInputDOMNode(evt) || isHandle(evt)) {
     return false;
   }
 
   const scaledClient: XYPosition = {
     x: evt.clientX * (1 / transform[2]),
-    y: evt.clientY * (1 / transform[2])
+    y: evt.clientY * (1 / transform[2]),
   };
   const offsetX = scaledClient.x - position.x - transform[0];
   const offsetY = scaledClient.y - position.y - transform[1];
-  const node = { id, type, position, data };
+  const node = { id, type, position, data };
 
-  store.dispatch.setSelectedElements({ id, type });
+  store.dispatch.setSelectedElements({ id, type } as Node);
   setOffset({ x: offsetX, y: offsetY });
   onClick(node);
 };
 
 const onDrag = (
-  evt: MouseEvent, setDragging: (isDragging: boolean) => void, id: ElementId, offset: XYPosition,
+  evt: MouseEvent,
+  setDragging: (isDragging: boolean) => void,
+  id: ElementId,
+  offset: XYPosition,
   transform: Transform
 ): void => {
   const scaledClient = {
     x: evt.clientX * (1 / transform[2]),
-    y: evt.clientY * (1 / transform[2])
+    y: evt.clientY * (1 / transform[2]),
   };
 
   setDragging(true);
-  store.dispatch.updateNodePos({ id, pos: {
-    x: scaledClient.x - transform[0] - offset.x,
-    y: scaledClient.y - transform[1] - offset.y
-  }});
+  store.dispatch.updateNodePos({
+    id,
+    pos: {
+      x: scaledClient.x - transform[0] - offset.x,
+      y: scaledClient.y - transform[1] - offset.y,
+    },
+  });
 };
 
 const onStop = (
-  onNodeDragStop: (params: Node) => void, isDragging: boolean, setDragging: (isDragging: boolean) => void, id: ElementId,
-  type: string, position: XYPosition, data: any
+  onNodeDragStop: (params: Node) => void,
+  isDragging: boolean,
+  setDragging: (isDragging: boolean) => void,
+  id: ElementId,
+  type: string,
+  position: XYPosition,
+  data: any
 ): void => {
   if (isDragging) {
     setDragging(false);
     onNodeDragStop({
-      id, type, position, data
-    });
+      id,
+      type,
+      position,
+      data,
+    } as Node);
   }
 };
 
 export default (NodeComponent: ComponentType<NodeComponentProps>) => {
-  const NodeWrapper = memo(({
-    id, type, data, transform,
-    xPos, yPos, selected, onClick,
-    onNodeDragStop, style
-  }: NodeComponentProps) => {
-    const nodeElement = useRef<HTMLDivElement>(null);
-    const [offset, setOffset] = useState({ x: 0, y: 0 });
-    const [isDragging, setDragging] = useState(false);
+  const NodeWrapper = memo(
+    ({
+      id,
+      type,
+      data,
+      transform,
+      xPos,
+      yPos,
+      selected,
+      onClick,
+      onNodeDragStop,
+      style,
+    }: WrapNodeProps) => {
+      const nodeElement = useRef<HTMLDivElement>(null);
+      const [offset, setOffset] = useState({ x: 0, y: 0 });
+      const [isDragging, setDragging] = useState(false);
 
-    const position = { x: xPos, y: yPos };
-    const nodeClasses = cx('react-flow__node', { selected });
-    const nodeStyle = { zIndex: selected ? 10 : 3, transform: `translate(${xPos}px,${yPos}px)` };
-
-    const updateNode = () => {
-      if (!nodeElement.current) {
-        return false;
-      }
-
-      const storeState = store.getState()
-      const bounds = nodeElement.current.getBoundingClientRect();
-      const dimensions = getDimensions(nodeElement.current);
-      const handleBounds = {
-        source: getHandleBounds('.source', nodeElement.current, bounds, storeState.transform[2]),
-        target: getHandleBounds('.target', nodeElement.current, bounds, storeState.transform[2])
+      const position = { x: xPos, y: yPos };
+      const nodeClasses = cx('react-flow__node', { selected });
+      const nodeStyle = {
+        zIndex: selected ? 10 : 3,
+        transform: `translate(${xPos}px,${yPos}px)`,
       };
-      store.dispatch.updateNodeData({ id, ...dimensions, handleBounds });
-    };
 
-    useEffect(() => {
-      if (nodeElement.current) {
-        updateNode();
-
-        const resizeObserver = new ResizeObserver(entries => {
-          for (let _ of entries) {
-            updateNode();
-          }
-        });
-
-        resizeObserver.observe(nodeElement.current);
-
-        return () => {
-          if (resizeObserver && nodeElement.current) {
-            resizeObserver.unobserve(nodeElement.current);
-          }
+      const updateNode = (): void => {
+        if (!nodeElement.current) {
+          return;
         }
-      }
-    }, [nodeElement.current]);
 
-    return (
-      <DraggableCore
-        onStart={evt => onStart(evt as MouseEvent, onClick, id, type, data, setOffset, transform, position)}
-        onDrag={evt => onDrag(evt as MouseEvent, setDragging, id, offset, transform)}
-        onStop={() => onStop(onNodeDragStop, isDragging, setDragging, id, type, position, data)}
-        scale={transform[2]}
-      >
-        <div
-          className={nodeClasses}
-          ref={nodeElement}
-          style={nodeStyle}
+        const storeState = store.getState();
+        const bounds = nodeElement.current.getBoundingClientRect();
+        const dimensions = getDimensions(nodeElement.current);
+        const handleBounds = {
+          source: getHandleBounds(
+            '.source',
+            nodeElement.current,
+            bounds,
+            storeState.transform[2]
+          ),
+          target: getHandleBounds(
+            '.target',
+            nodeElement.current,
+            bounds,
+            storeState.transform[2]
+          ),
+        };
+        store.dispatch.updateNodeData({ id, ...dimensions, handleBounds });
+      };
+
+      useEffect(() => {
+        if (nodeElement.current) {
+          updateNode();
+
+          const resizeObserver = new ResizeObserver(entries => {
+            for (let _ of entries) {
+              updateNode();
+            }
+          });
+
+          resizeObserver.observe(nodeElement.current);
+
+          return () => {
+            if (resizeObserver && nodeElement.current) {
+              resizeObserver.unobserve(nodeElement.current);
+            }
+          };
+        }
+
+        return;
+      }, [nodeElement.current]);
+
+      return (
+        <DraggableCore
+          onStart={evt =>
+            onStart(
+              evt as MouseEvent,
+              onClick,
+              id,
+              type,
+              data,
+              setOffset,
+              transform,
+              position
+            )
+          }
+          onDrag={evt =>
+            onDrag(evt as MouseEvent, setDragging, id, offset, transform)
+          }
+          onStop={() =>
+            onStop(
+              onNodeDragStop,
+              isDragging,
+              setDragging,
+              id,
+              type,
+              position,
+              data
+            )
+          }
+          scale={transform[2]}
         >
-          <Provider value={id}>
-            <NodeComponent
-              id={id}
-              data={data}
-              type={type}
-              style={style}
-              selected={selected}
-            />
-          </Provider>
-        </div>
-      </DraggableCore>
-    );
-  });
+          <div className={nodeClasses} ref={nodeElement} style={nodeStyle}>
+            <Provider value={id}>
+              <NodeComponent
+                id={id}
+                data={data}
+                type={type}
+                style={style}
+                selected={selected}
+              />
+            </Provider>
+          </div>
+        </DraggableCore>
+      );
+    }
+  );
 
   NodeWrapper.displayName = 'NodeWrapper';
 

src/components/NodesSelection/index.tsx

@@ -5,28 +5,30 @@ import { useStoreState, useStoreActions } from '../../store/hooks';
 import { isNode } from '../../utils/graph';
 import { Node, Elements, XYPosition } from '../../types';
 
-function getStartPositions(elements: Elements) {
-  return elements
-    .filter(isNode)
-    .reduce((res, node: Node) => {
-      const startPosition = {
-        x: node.__rg.position.x || node.position.x,
-        y: node.__rg.position.y || node.position.x
-      };
+type StartPositions = { [key: string]: XYPosition };
 
-      res[node.id] = startPosition;
+function getStartPositions(elements: Elements): StartPositions {
+  const startPositions: StartPositions = {};
 
-      return res;
-  }, {});
+  return (elements.filter(isNode) as Node[]).reduce((res, node) => {
+    const startPosition = {
+      x: node.__rg.position.x || node.position.x,
+      y: node.__rg.position.y || node.position.x,
+    };
+
+    res[node.id] = startPosition;
+
+    return res;
+  }, startPositions);
 }
 
 export default memo(() => {
-  const [offset, setOffset] = useState({ x: 0, y: 0 });
-  const [startPositions, setStartPositions] = useState({});
+  const [offset, setOffset] = useState<XYPosition>({ x: 0, y: 0 });
+  const [startPositions, setStartPositions] = useState<StartPositions>({});
   const state = useStoreState(s => ({
     transform: s.transform,
     selectedNodesBbox: s.selectedNodesBbox,
-    selectedElements: s.selectedElements
+    selectedElements: s.selectedElements,
   }));
   const updateNodePos = useStoreActions(a => a.updateNodePos);
   const [x, y, k] = state.transform;
@@ -35,43 +37,55 @@ export default memo(() => {
   const onStart = (evt: MouseEvent) => {
     const scaledClient: XYPosition = {
       x: evt.clientX * (1 / k),
-      y: evt.clientY * (1 / k)
+      y: evt.clientY * (1 / k),
     };
     const offsetX: number = scaledClient.x - position.x - x;
     const offsetY: number = scaledClient.y - position.y - y;
-    const startPositions = getStartPositions(state.selectedElements);
+    const nextStartPositions = getStartPositions(state.selectedElements);
 
-    setOffset({ x: offsetX, y: offsetY });
-    setStartPositions(startPositions);
+    if (nextStartPositions) {
+      setOffset({ x: offsetX, y: offsetY });
+      setStartPositions(nextStartPositions);
+    }
   };
 
   const onDrag = (evt: MouseEvent) => {
     const scaledClient: XYPosition = {
       x: evt.clientX * (1 / k),
-      y: evt.clientY * (1 / k)
+      y: evt.clientY * (1 / k),
     };
 
-    state.selectedElements
-      .filter(isNode)
-      .forEach((node: Node) => {
-        updateNodePos({ id: node.id, pos: {
-          x: startPositions[node.id].x + scaledClient.x - position.x - offset.x - x ,
-          y: startPositions[node.id].y + scaledClient.y - position.y - offset.y - y
-        }});
-      });
+    (state.selectedElements.filter(isNode) as Node[]).forEach(node => {
+      const pos: XYPosition = {
+        x:
+          startPositions[node.id].x +
+          scaledClient.x -
+          position.x -
+          offset.x -
+          x,
+        y:
+          startPositions[node.id].y +
+          scaledClient.y -
+          position.y -
+          offset.y -
+          y,
+      };
+
+      updateNodePos({ id: node.id, pos });
+    });
   };
 
   return (
     <div
       className="react-flow__nodesselection"
       style={{
-        transform: `translate(${x}px,${y}px) scale(${k})`
+        transform: `translate(${x}px,${y}px) scale(${k})`,
       }}
     >
       <ReactDraggable
         scale={k}
-        onStart={(evt: MouseEvent) => onStart(evt)}
-        onDrag={(evt: MouseEvent) => onDrag(evt)}
+        onStart={evt => onStart(evt as MouseEvent)}
+        onDrag={evt => onDrag(evt as MouseEvent)}
       >
         <div
           className="react-flow__nodesselection-rect"
@@ -79,7 +93,7 @@ export default memo(() => {
             width: state.selectedNodesBbox.width,
             height: state.selectedNodesBbox.height,
             top: state.selectedNodesBbox.y,
-            left: state.selectedNodesBbox.x
+            left: state.selectedNodesBbox.x,
           }}
         />
       </ReactDraggable>

src/components/UserSelection/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState, memo, MouseEvent } from 'react';
+import React, { useEffect, useRef, useState, memo } from 'react';
 
 import { useStoreActions } from '../../store/hooks';
 import { SelectionRect } from '../../types';
@@ -10,7 +10,7 @@ const initialRect: SelectionRect = {
   y: 0,
   width: 0,
   height: 0,
-  draw: false
+  draw: false,
 };
 
 function getMousePosition(evt: MouseEvent) {
@@ -28,33 +28,33 @@ function getMousePosition(evt: MouseEvent) {
 }
 
 export default memo(() => {
-  const selectionPane = useRef(null);
+  const selectionPane = useRef<HTMLDivElement>(null);
   const [rect, setRect] = useState(initialRect);
   const setSelection = useStoreActions(a => a.setSelection);
   const updateSelection = useStoreActions(a => a.updateSelection);
   const setNodesSelection = useStoreActions(a => a.setNodesSelection);
 
   useEffect(() => {
-    function onMouseDown(evt: MouseEvent) {
+    function onMouseDown(evt: MouseEvent): void {
       const mousePos = getMousePosition(evt);
       if (!mousePos) {
-        return false;
+        return;
       }
 
-      setRect((currentRect) => ({
+      setRect(currentRect => ({
         ...currentRect,
         startX: mousePos.x,
         startY: mousePos.y,
         x: mousePos.x,
         y: mousePos.y,
-        draw: true
+        draw: true,
       }));
 
       setSelection(true);
     }
 
-    function onMouseMove(evt: MouseEvent) {
-      setRect((currentRect) => {
+    function onMouseMove(evt: MouseEvent): void {
+      setRect(currentRect => {
         if (!currentRect.draw) {
           return currentRect;
         }
@@ -70,8 +70,12 @@ export default memo(() => {
           ...currentRect,
           x: negativeX ? mousePos.x : currentRect.x,
           y: negativeY ? mousePos.y : currentRect.y,
-          width: negativeX ? currentRect.startX - mousePos.x : mousePos.x - currentRect.startX,
-          height: negativeY ? currentRect.startY - mousePos.y : mousePos.y - currentRect.startY,
+          width: negativeX
+            ? currentRect.startX - mousePos.x
+            : mousePos.x - currentRect.startX,
+          height: negativeY
+            ? currentRect.startY - mousePos.y
+            : mousePos.y - currentRect.startY,
         };
 
         updateSelection(nextRect);
@@ -81,40 +85,44 @@ export default memo(() => {
     }
 
     function onMouseUp() {
-      setRect((currentRect) => {
+      setRect(currentRect => {
         setNodesSelection({ isActive: true, selection: currentRect });
         setSelection(false);
 
         return {
           ...currentRect,
-          draw: false
+          draw: false,
         };
       });
     }
 
-    selectionPane.current.addEventListener('mousedown', onMouseDown);
-    selectionPane.current.addEventListener('mousemove', onMouseMove);
-    selectionPane.current.addEventListener('mouseup', onMouseUp);
+    if (selectionPane.current) {
+      selectionPane.current.addEventListener('mousedown', onMouseDown);
+      selectionPane.current.addEventListener('mousemove', onMouseMove);
+      selectionPane.current.addEventListener('mouseup', onMouseUp);
 
-    return () => {
-      selectionPane.current.removeEventListener('mousedown', onMouseDown);
-      selectionPane.current.removeEventListener('mousemove', onMouseMove);
-      selectionPane.current.removeEventListener('mouseup', onMouseUp);
-    };
-  }, []);
+      return () => {
+        if (!selectionPane.current) {
+          return;
+        }
+        selectionPane.current.removeEventListener('mousedown', onMouseDown);
+        selectionPane.current.removeEventListener('mousemove', onMouseMove);
+        selectionPane.current.removeEventListener('mouseup', onMouseUp);
+      };
+    }
+
+    return;
+  }, [selectionPane.current]);
 
   return (
-    <div
-      className="react-flow__selectionpane"
-      ref={selectionPane}
-    >
+    <div className="react-flow__selectionpane" ref={selectionPane}>
       {rect.draw && (
         <div
           className="react-flow__selection"
           style={{
             width: rect.width,
             height: rect.height,
-            transform: `translate(${rect.x}px, ${rect.y}px)`
+            transform: `translate(${rect.x}px, ${rect.y}px)`,
           }}
         />
       )}

src/container/EdgeRenderer/index.tsx

@@ -3,7 +3,15 @@ import React, { memo, SVGAttributes } from 'react';
 import { useStoreState } from '../../store/hooks';
 import ConnectionLine from '../../components/ConnectionLine/index';
 import { isEdge } from '../../utils/graph';
-import { XYPosition, Position, Edge, Node, ElementId, Transform, HandleElement } from '../../types';
+import {
+  XYPosition,
+  Position,
+  Edge,
+  Node,
+  ElementId,
+  Transform,
+  HandleElement,
+} from '../../types';
 
 interface EdgeRendererProps {
   width: number;
@@ -12,69 +20,82 @@ interface EdgeRendererProps {
   connectionLineStyle?: SVGAttributes<{}>;
   connectionLineType?: string;
   onElementClick?: () => void;
-};
+}
 
 interface EdgeRendererState {
   nodes: Node[];
   edges: Edge[];
   transform: Transform;
   selectedElements: any;
-  connectionSourceId: ElementId | null;
+  connectionSourceId: ElementId | null;
   position: XYPosition;
-};
+}
 
 interface EdgePositions {
   sourceX: number;
   sourceY: number;
   targetX: number;
   targetY: number;
-};
+}
 
-function getHandlePosition(position: Position, node: Node, handle: any | null = null): XYPosition {
+function getHandlePosition(
+  position: Position,
+  node: Node,
+  handle: any | null = null
+): XYPosition {
   if (!handle) {
     switch (position) {
-      case 'top': return {
-        x: node.__rg.width / 2,
-        y: 0
-      };
-      case 'right': return {
-        x: node.__rg.width,
-        y: node.__rg.height / 2
-      };
-      case 'bottom': return {
-        x: node.__rg.width / 2,
-        y: node.__rg.height
-      };
-      case 'left': return {
-        x: 0,
-        y: node.__rg.height / 2
-      };
+      case 'top':
+        return {
+          x: node.__rg.width / 2,
+          y: 0,
+        };
+      case 'right':
+        return {
+          x: node.__rg.width,
+          y: node.__rg.height / 2,
+        };
+      case 'bottom':
+        return {
+          x: node.__rg.width / 2,
+          y: node.__rg.height,
+        };
+      case 'left':
+        return {
+          x: 0,
+          y: node.__rg.height / 2,
+        };
     }
-
-    return null;
   }
 
   switch (position) {
-    case 'top': return {
-      x: handle.x + (handle.width / 2),
-      y: handle.y
-    };
-    case 'right': return {
-      x: handle.x + handle.width,
-      y: handle.y + (handle.height / 2)
-    };
-    case 'bottom': return {
-      x: handle.x + (handle.width / 2),
-      y: handle.y + handle.height
-    };
-    case 'left': return {
-      x: handle.x,
-      y: handle.y + (handle.height / 2)
-    };
+    case 'top':
+      return {
+        x: handle.x + handle.width / 2,
+        y: handle.y,
+      };
+    case 'right':
+      return {
+        x: handle.x + handle.width,
+        y: handle.y + handle.height / 2,
+      };
+    case 'bottom':
+      return {
+        x: handle.x + handle.width / 2,
+        y: handle.y + handle.height,
+      };
+    case 'left':
+      return {
+        x: handle.x,
+        y: handle.y + handle.height / 2,
+      };
   }
 }
 
-function getHandle(bounds: HandleElement[], handleId: ElementId): HandleElement | null {
+function getHandle(
+  bounds: HandleElement[],
+  handleId: ElementId | null
+): HandleElement | null | undefined {
   let handle = null;
 
   if (!bounds) {
@@ -83,7 +104,7 @@ function getHandle(bounds: HandleElement[], handleId: ElementId): HandleElement
 
   // there is no handleId when there are no multiple handles/ handles with ids
   // so we just pick the first one
-  if (bounds.length === 1 || !handleId) {
+  if (bounds.length === 1 || !handleId) {
     handle = bounds[0];
   } else if (handleId) {
     handle = bounds.find(d => d.id === handleId);
@@ -93,23 +114,42 @@ function getHandle(bounds: HandleElement[], handleId: ElementId): HandleElement
 }
 
 function getEdgePositions(
-  sourceNode: Node, sourceHandle: HandleElement, sourcePosition: Position,
-  targetNode: Node, targetHandle: HandleElement, targetPosition: Position
+  sourceNode: Node,
+  sourceHandle: HandleElement | unknown,
+  sourcePosition: Position,
+  targetNode: Node,
+  targetHandle: HandleElement | unknown,
+  targetPosition: Position
 ): EdgePositions {
-  const sourceHandlePos = getHandlePosition(sourcePosition, sourceNode, sourceHandle)
+  const sourceHandlePos = getHandlePosition(
+    sourcePosition,
+    sourceNode,
+    sourceHandle
+  );
   const sourceX = sourceNode.__rg.position.x + sourceHandlePos.x;
   const sourceY = sourceNode.__rg.position.y + sourceHandlePos.y;
 
-  const targetHandlePos = getHandlePosition(targetPosition, targetNode, targetHandle);
+  const targetHandlePos = getHandlePosition(
+    targetPosition,
+    targetNode,
+    targetHandle
+  );
   const targetX = targetNode.__rg.position.x + targetHandlePos.x;
   const targetY = targetNode.__rg.position.y + targetHandlePos.y;
 
   return {
-    sourceX, sourceY, targetX, targetY
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
   };
 }
 
-function renderEdge(edge: Edge, props: EdgeRendererProps, state: EdgeRendererState) {
+function renderEdge(
+  edge: Edge,
+  props: EdgeRendererProps,
+  state: EdgeRendererState
+) {
   const edgeType = edge.type || 'default';
 
   const hasSourceHandleId = edge.source.includes('__');
@@ -133,14 +173,24 @@ function renderEdge(edge: Edge, props: EdgeRendererProps, state: EdgeRendererSta
   }
 
   const EdgeComponent = props.edgeTypes[edgeType] || props.edgeTypes.default;
-  const sourceHandle = getHandle(sourceNode.__rg.handleBounds.source, sourceHandleId);
-  const targetHandle = getHandle(targetNode.__rg.handleBounds.target, targetHandleId);
+  const sourceHandle = getHandle(
+    sourceNode.__rg.handleBounds.source,
+    sourceHandleId
+  );
+  const targetHandle = getHandle(
+    targetNode.__rg.handleBounds.target,
+    targetHandleId
+  );
   const sourcePosition = sourceHandle ? sourceHandle.position : 'bottom';
   const targetPosition = targetHandle ? targetHandle.position : 'top';
 
   const { sourceX, sourceY, targetX, targetY } = getEdgePositions(
-    sourceNode, sourceHandle, sourcePosition,
-    targetNode, targetHandle, targetPosition
+    sourceNode,
+    sourceHandle,
+    sourcePosition,
+    targetNode,
+    targetHandle,
+    targetPosition
   );
   const selected = state.selectedElements
     .filter(isEdge)
@@ -169,47 +219,61 @@ function renderEdge(edge: Edge, props: EdgeRendererProps, state: EdgeRendererSta
   );
 }
 
-const EdgeRenderer = memo(({
-  width, height, connectionLineStyle, connectionLineType, ...rest
-}: EdgeRendererProps) => {
-  const state: EdgeRendererState = useStoreState(s => ({
-    nodes: s.nodes,
-    edges: s.edges,
-    transform: s.transform,
-    selectedElements: s.selectedElements,
-    connectionSourceId: s.connectionSourceId,
-    position: s.connectionPosition
-  }));
-  if (!width) {
-    return null;
+const EdgeRenderer = memo(
+  ({
+    width,
+    height,
+    connectionLineStyle,
+    connectionLineType,
+    ...rest
+  }: EdgeRendererProps) => {
+    const state: EdgeRendererState = useStoreState(s => ({
+      nodes: s.nodes,
+      edges: s.edges,
+      transform: s.transform,
+      selectedElements: s.selectedElements,
+      connectionSourceId: s.connectionSourceId,
+      position: s.connectionPosition,
+    }));
+    if (!width) {
+      return null;
+    }
+
+    const { transform, edges, nodes, connectionSourceId, position } = state;
+    const transformStyle = `translate(${transform[0]},${transform[1]}) scale(${transform[2]})`;
+
+    return (
+      <svg width={width} height={height} className="react-flow__edges">
+        <g transform={transformStyle}>
+          {edges.map((e: Edge) =>
+            renderEdge(
+              e,
+              {
+                width,
+                height,
+                connectionLineStyle,
+                connectionLineType,
+                ...rest,
+              },
+              state
+            )
+          )}
+          {connectionSourceId && (
+            <ConnectionLine
+              nodes={nodes}
+              connectionSourceId={connectionSourceId}
+              connectionPositionX={position.x}
+              connectionPositionY={position.y}
+              transform={transform}
+              connectionLineStyle={connectionLineStyle}
+              connectionLineType={connectionLineType}
+            />
+          )}
+        </g>
+      </svg>
+    );
   }
-
-  const { transform, edges, nodes, connectionSourceId, position } = state;
-  const transformStyle = `translate(${transform[0]},${transform[1]}) scale(${transform[2]})`;
-
-  return (
-    <svg
-      width={width}
-      height={height}
-      className="react-flow__edges"
-    >
-      <g transform={transformStyle}>
-        {edges.map((e: Edge) => renderEdge(e, { width, height, connectionLineStyle, connectionLineType, ...rest }, state))}
-        {connectionSourceId && (
-          <ConnectionLine
-            nodes={nodes}
-            connectionSourceId={connectionSourceId}
-            connectionPositionX={position.x}
-            connectionPositionY={position.y}
-            transform={transform}
-            connectionLineStyle={connectionLineStyle}
-            connectionLineType={connectionLineType}
-          />
-        )}
-      </g>
-    </svg>
-  );
-});
+);
 
 EdgeRenderer.displayName = 'EdgeRenderer';
 

src/container/EdgeRenderer/utils.ts

@@ -4,25 +4,31 @@ import StraightEdge from '../../components/Edges/StraightEdge';
 import BezierEdge from '../../components/Edges/BezierEdge';
 import wrapEdge from '../../components/Edges/wrapEdge';
 
-import { EdgeTypesType, EdgeWrapperProps } from '../../types';
+import { EdgeTypesType, EdgeCompProps } from '../../types';
 
-export function createEdgeTypes(edgeTypes: EdgeTypesType): EdgeTypesType{
+export function createEdgeTypes(edgeTypes: EdgeTypesType): EdgeTypesType {
   const standardTypes: EdgeTypesType = {
-    default: wrapEdge((edgeTypes.default || BezierEdge) as ComponentType<EdgeWrapperProps>),
-    straight: wrapEdge((edgeTypes.bezier || StraightEdge) as ComponentType<EdgeWrapperProps>)
+    default: wrapEdge((edgeTypes.default || BezierEdge) as ComponentType<
+      EdgeCompProps
+    >),
+    straight: wrapEdge((edgeTypes.bezier || StraightEdge) as ComponentType<
+      EdgeCompProps
+    >),
   };
 
-  const specialTypes: EdgeTypesType = Object
-    .keys(edgeTypes)
+  const wrappedTypes = {} as EdgeTypesType;
+  const specialTypes: EdgeTypesType = Object.keys(edgeTypes)
     .filter(k => !['default', 'bezier'].includes(k))
     .reduce((res, key) => {
-      res[key] = wrapEdge((edgeTypes[key] || BezierEdge) as ComponentType<EdgeWrapperProps>);
+      res[key] = wrapEdge((edgeTypes[key] || BezierEdge) as ComponentType<
+        EdgeCompProps
+      >);
 
       return res;
-    }, {});
+    }, wrappedTypes);
 
   return {
     ...standardTypes,
-    ...specialTypes
+    ...specialTypes,
   };
 }

src/container/GraphView/index.tsx

@@ -9,117 +9,153 @@ import BackgroundGrid from '../../components/BackgroundGrid';
 import useKeyPress from '../../hooks/useKeyPress';
 import useD3Zoom from '../../hooks/useD3Zoom';
 import useGlobalKeyHandler from '../../hooks/useGlobalKeyHandler';
-import useElementUpdater from '../../hooks/useElementUpdater'
+import useElementUpdater from '../../hooks/useElementUpdater';
 import { getDimensions } from '../../utils';
 import { fitView, zoomIn, zoomOut } from '../../utils/graph';
-import { Elements, NodeTypesType, EdgeTypesType, GridType, OnLoadFunc } from '../../types'
+import {
+  Elements,
+  NodeTypesType,
+  EdgeTypesType,
+  GridType,
+  OnLoadFunc,
+} from '../../types';
 
 export interface GraphViewProps {
-  elements: Elements,
-  onElementClick: () => void,
-  onElementsRemove: (elements: Elements) => void,
-  onNodeDragStop: () => void,
-  onConnect: () => void,
-	onLoad: OnLoadFunc,
-  onMove: () => void,
-  selectionKeyCode: number,
-  nodeTypes: NodeTypesType,
-  edgeTypes: EdgeTypesType,
-  connectionLineType: string,
-  connectionLineStyle: SVGAttributes<{}>,
-  deleteKeyCode: number,
-  showBackground: boolean,
-  backgroundGap: number,
-  backgroundColor: string,
-  backgroundType: GridType,
-};
+  elements: Elements;
+  onElementClick: () => void;
+  onElementsRemove: (elements: Elements) => void;
+  onNodeDragStop: () => void;
+  onConnect: () => void;
+  onLoad: OnLoadFunc;
+  onMove: () => void;
+  selectionKeyCode: number;
+  nodeTypes: NodeTypesType;
+  edgeTypes: EdgeTypesType;
+  connectionLineType: string;
+  connectionLineStyle: SVGAttributes<{}>;
+  deleteKeyCode: number;
+  showBackground: boolean;
+  backgroundGap: number;
+  backgroundColor: string;
+  backgroundType: GridType;
+  snapToGrid: boolean;
+  snapGrid: [number, number];
+}
 
-const GraphView = memo(({
-  nodeTypes, edgeTypes, onMove, onLoad,
-  onElementClick, onNodeDragStop, connectionLineType, connectionLineStyle,
-  selectionKeyCode, onElementsRemove, deleteKeyCode, elements,
-  showBackground, backgroundGap, backgroundColor, backgroundType,
-  onConnect
-}: GraphViewProps) => {
-  const zoomPane = useRef<HTMLDivElement>(null);
-  const rendererNode = useRef<HTMLDivElement>(null);
-  const state = useStoreState(s => ({
-    width: s.width,
-    height: s.height,
-    nodes: s.nodes,
-    edges: s.edges,
-    d3Initialised: s.d3Initialised,
-    nodesSelectionActive: s.nodesSelectionActive
-  }));
-  const updateSize = useStoreActions(actions => actions.updateSize);
-  const setNodesSelection = useStoreActions(actions => actions.setNodesSelection);
-  const setOnConnect = useStoreActions(a => a.setOnConnect);
-  const selectionKeyPressed = useKeyPress(selectionKeyCode);
+const GraphView = memo(
+  ({
+    nodeTypes,
+    edgeTypes,
+    onMove,
+    onLoad,
+    onElementClick,
+    onNodeDragStop,
+    connectionLineType,
+    connectionLineStyle,
+    selectionKeyCode,
+    onElementsRemove,
+    deleteKeyCode,
+    elements,
+    showBackground,
+    backgroundGap,
+    backgroundColor,
+    backgroundType,
+    onConnect,
+    snapToGrid,
+    snapGrid,
+  }: GraphViewProps) => {
+    const zoomPane = useRef<HTMLDivElement>(null);
+    const rendererNode = useRef<HTMLDivElement>(null);
+    const state = useStoreState(s => ({
+      width: s.width,
+      height: s.height,
+      nodes: s.nodes,
+      edges: s.edges,
+      d3Initialised: s.d3Initialised,
+      nodesSelectionActive: s.nodesSelectionActive,
+    }));
+    const updateSize = useStoreActions(actions => actions.updateSize);
+    const setNodesSelection = useStoreActions(
+      actions => actions.setNodesSelection
+    );
+    const setOnConnect = useStoreActions(a => a.setOnConnect);
+    const setSnapGrid = useStoreActions(actions => actions.setSnapGrid);
 
-  const onZoomPaneClick = () => setNodesSelection({ isActive: false });
+    const selectionKeyPressed = useKeyPress(selectionKeyCode);
 
-  const updateDimensions = () => {
-    const size = getDimensions(rendererNode.current);
-    updateSize(size);
-  };
+    const onZoomPaneClick = () => setNodesSelection({ isActive: false });
 
-  useEffect(() => {
-    updateDimensions();
-    setOnConnect(onConnect);
-    window.onresize = updateDimensions;
+    const updateDimensions = () => {
+      if (!rendererNode.current) {
+        return;
+      }
 
-    return () => {
-      window.onresize = null;
+      const size = getDimensions(rendererNode.current);
+      updateSize(size);
     };
-  }, []);
 
-  useD3Zoom(zoomPane, onMove, selectionKeyPressed);
+    useEffect(() => {
+      updateDimensions();
+      setOnConnect(onConnect);
+      window.onresize = updateDimensions;
 
-  useEffect(() => {
-    if (state.d3Initialised) {
-      onLoad({
-        fitView,
-        zoomIn,
-        zoomOut
-      });
-    }
-  }, [state.d3Initialised]);
+      return () => {
+        window.onresize = null;
+      };
+    }, []);
 
-  useGlobalKeyHandler({ onElementsRemove, deleteKeyCode });
-  useElementUpdater(elements);
+    useD3Zoom(zoomPane, onMove, selectionKeyPressed);
 
-  return (
-    <div className="react-flow__renderer" ref={rendererNode}>
-      {showBackground && (
-        <BackgroundGrid
-          gap={backgroundGap}
-          color={backgroundColor}
-          backgroundType={backgroundType}
+    useEffect(() => {
+      if (state.d3Initialised) {
+        onLoad({
+          fitView,
+          zoomIn,
+          zoomOut,
+        });
+      }
+    }, [state.d3Initialised]);
+
+    useEffect(() => {
+      setSnapGrid({ snapToGrid, snapGrid });
+    }, [snapToGrid]);
+
+    useGlobalKeyHandler({ onElementsRemove, deleteKeyCode });
+    useElementUpdater(elements);
+
+    return (
+      <div className="react-flow__renderer" ref={rendererNode}>
+        {showBackground && (
+          <BackgroundGrid
+            gap={backgroundGap}
+            color={backgroundColor}
+            backgroundType={backgroundType}
+          />
+        )}
+        <NodeRenderer
+          nodeTypes={nodeTypes}
+          onElementClick={onElementClick}
+          onNodeDragStop={onNodeDragStop}
         />
-      )}
-      <NodeRenderer
-        nodeTypes={nodeTypes}
-        onElementClick={onElementClick}
-        onNodeDragStop={onNodeDragStop}
-      />
-      <EdgeRenderer
-        width={state.width}
-        height={state.height}
-        edgeTypes={edgeTypes}
-        onElementClick={onElementClick}
-        connectionLineType={connectionLineType}
-        connectionLineStyle={connectionLineStyle}
-      />
-      {selectionKeyPressed && <UserSelection />}
-      {state.nodesSelectionActive && <NodesSelection />}
-      <div
-        className="react-flow__zoompane"
-        onClick={onZoomPaneClick}
-        ref={zoomPane}
-      />
-    </div>
-  );
-});
+        <EdgeRenderer
+          width={state.width}
+          height={state.height}
+          edgeTypes={edgeTypes}
+          onElementClick={onElementClick}
+          connectionLineType={connectionLineType}
+          connectionLineStyle={connectionLineStyle}
+        />
+        {selectionKeyPressed && <UserSelection />}
+        {state.nodesSelectionActive && <NodesSelection />}
+        <div
+          className="react-flow__zoompane"
+          onClick={onZoomPaneClick}
+          ref={zoomPane}
+        />
+      </div>
+    );
+  }
+);
 
 GraphView.displayName = 'GraphView';
 

src/container/NodeRenderer/index.tsx

@@ -2,28 +2,40 @@ import React, { memo, ComponentType } from 'react';
 
 import { useStoreState } from '../../store/hooks';
 import { isNode } from '../../utils/graph';
-import { Node, Transform, NodeTypesType, NodeComponentProps, } from '../../types';
+import {
+  Node,
+  Transform,
+  NodeTypesType,
+  NodeComponentProps,
+} from '../../types';
 
 interface NodeRendererProps {
   nodeTypes: NodeTypesType;
   onElementClick: () => void;
   onNodeDragStop: () => void;
-};
+}
 
 interface NodeRendererState {
   nodes: Node[];
   transform: Transform;
   selectedElements: any;
-};
+}
 
-function renderNode(node: Node, props: NodeRendererProps, state: NodeRendererState) {
+function renderNode(
+  node: Node,
+  props: NodeRendererProps,
+  state: NodeRendererState
+) {
   const nodeType = node.type || 'default';
 
   if (!props.nodeTypes[nodeType]) {
-    console.warn(`No node type found for type "${nodeType}". Using fallback type "default".`);
+    console.warn(
+      `No node type found for type "${nodeType}". Using fallback type "default".`
+    );
   }
 
-  const NodeComponent = (props.nodeTypes[nodeType] || props.nodeTypes.default) as ComponentType<NodeComponentProps>;
+  const NodeComponent = (props.nodeTypes[nodeType] ||
+    props.nodeTypes.default) as ComponentType<NodeComponentProps>;
   const selected = state.selectedElements
     .filter(isNode)
     .map((e: Node) => e.id)
@@ -33,7 +45,7 @@ function renderNode(node: Node, props: NodeRendererProps, state: NodeRendererSta
     <NodeComponent
       key={node.id}
       id={node.id}
-      type={node.type}
+      type={nodeType}
       data={node.data}
       xPos={node.__rg.position.x}
       yPos={node.__rg.position.y}
@@ -50,17 +62,16 @@ const NodeRenderer = memo((props: NodeRendererProps) => {
   const state: NodeRendererState = useStoreState(s => ({
     nodes: s.nodes,
     transform: s.transform,
-    selectedElements: s.selectedElements
+    selectedElements: s.selectedElements,
   }));
 
   const { transform, nodes } = state;
-  const transformStyle = { transform : `translate(${transform[0]}px,${transform[1]}px) scale(${transform[2]})` };
+  const transformStyle = {
+    transform: `translate(${transform[0]}px,${transform[1]}px) scale(${transform[2]})`,
+  };
 
   return (
-    <div
-      className="react-flow__nodes"
-      style={transformStyle}
-    >
+    <div className="react-flow__nodes" style={transformStyle}>
       {nodes.map(node => renderNode(node, props, state))}
     </div>
   );

src/container/NodeRenderer/utils.ts

@@ -6,24 +6,32 @@ import OutputNode from '../../components/Nodes/OutputNode';
 import wrapNode from '../../components/Nodes/wrapNode';
 import { NodeTypesType, NodeComponentProps } from '../../types';
 
-export function createNodeTypes(nodeTypes: NodeTypesType): NodeTypesType {
+export function createNodeTypes(nodeTypes: NodeTypesType): NodeTypesType {
   const standardTypes: NodeTypesType = {
-    input: wrapNode((nodeTypes.input || InputNode) as ComponentType<NodeComponentProps>),
-    default: wrapNode((nodeTypes.default || DefaultNode) as ComponentType<NodeComponentProps>),
-    output: wrapNode((nodeTypes.output || OutputNode) as ComponentType<NodeComponentProps>)
+    input: wrapNode((nodeTypes.input || InputNode) as ComponentType<
+      NodeComponentProps
+    >),
+    default: wrapNode((nodeTypes.default || DefaultNode) as ComponentType<
+      NodeComponentProps
+    >),
+    output: wrapNode((nodeTypes.output || OutputNode) as ComponentType<
+      NodeComponentProps
+    >),
   };
 
-  const specialTypes: NodeTypesType = Object
-    .keys(nodeTypes)
+  const wrappedTypes = {} as NodeTypesType;
+  const specialTypes: NodeTypesType = Object.keys(nodeTypes)
     .filter(k => !['input', 'default', 'output'].includes(k))
     .reduce((res, key) => {
-      res[key] = wrapNode((nodeTypes[key] || DefaultNode) as ComponentType<NodeComponentProps>);
+      res[key] = wrapNode((nodeTypes[key] || DefaultNode) as ComponentType<
+        NodeComponentProps
+      >);
 
       return res;
-    }, {});
+    }, wrappedTypes);
 
   return {
     ...standardTypes,
-    ...specialTypes
+    ...specialTypes,
   };
 }

src/container/ReactFlow/index.tsx

@@ -1,7 +1,7 @@
-import React, { useMemo, CSSProperties, ReactNode, SVGAttributes } from 'react';
+import React, { useMemo, SVGAttributes, HTMLAttributes } from 'react';
 import { StoreProvider } from 'easy-peasy';
 
-const nodeEnv: string = (process.env.NODE_ENV as string);
+const nodeEnv: string = process.env.NODE_ENV as string;
 
 if (nodeEnv !== 'production') {
   const whyDidYouRender = require('@welldone-software/why-did-you-render');
@@ -18,39 +18,61 @@ import StraightEdge from '../../components/Edges/StraightEdge';
 import StepEdge from '../../components/Edges/StepEdge';
 import { createEdgeTypes } from '../EdgeRenderer/utils';
 import store from '../../store';
-import { Elements, NodeTypesType, EdgeTypesType, GridType, OnLoadFunc } from '../../types';
+import {
+  Elements,
+  NodeTypesType,
+  EdgeTypesType,
+  GridType,
+  OnLoadFunc,
+} from '../../types';
 
 import '../../style.css';
 
-export interface ReactFlowProps {
-  elements: Elements,
-  style?: CSSProperties,
-  className?: string,
-  children?: ReactNode[],
-  onElementClick: () => void,
-  onElementsRemove: (elements: Elements) => void,
-  onNodeDragStop: () => void,
-  onConnect: () => void,
-	onLoad: OnLoadFunc,
-  onMove: () => void,
-  nodeTypes: NodeTypesType,
-  edgeTypes: EdgeTypesType,
-  connectionLineType: string,
-  connectionLineStyle: SVGAttributes<{}>,
-  deleteKeyCode: number,
-  selectionKeyCode: number,
-  showBackground: boolean,
-  backgroundGap: number,
-  backgroundColor: string,
-  backgroundType: GridType
-};
+export interface ReactFlowProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'onLoad'> {
+  elements: Elements;
+  onElementClick: () => void;
+  onElementsRemove: (elements: Elements) => void;
+  onNodeDragStop: () => void;
+  onConnect: () => void;
+  onLoad: OnLoadFunc;
+  onMove: () => void;
+  nodeTypes: NodeTypesType;
+  edgeTypes: EdgeTypesType;
+  connectionLineType: string;
+  connectionLineStyle: SVGAttributes<{}>;
+  deleteKeyCode: number;
+  selectionKeyCode: number;
+  showBackground: boolean;
+  backgroundGap: number;
+  backgroundColor: string;
+  backgroundType: GridType;
+  snapToGrid: boolean;
+  snapGrid: [16, 16];
+}
 
 const ReactFlow = ({
-  style, onElementClick, elements, children,
-  nodeTypes, edgeTypes, onLoad, onMove,
-  onElementsRemove, onConnect, onNodeDragStop, connectionLineType,
-  connectionLineStyle, deleteKeyCode, selectionKeyCode,
-  showBackground, backgroundGap, backgroundType, backgroundColor
+  style,
+  onElementClick,
+  elements,
+  children,
+  nodeTypes,
+  edgeTypes,
+  onLoad,
+  onMove,
+  onElementsRemove,
+  onConnect,
+  onNodeDragStop,
+  connectionLineType,
+  connectionLineStyle,
+  deleteKeyCode,
+  selectionKeyCode,
+  showBackground,
+  backgroundGap,
+  backgroundType,
+  backgroundColor,
+  snapToGrid,
+  snapGrid,
 }: ReactFlowProps) => {
   const nodeTypesParsed = useMemo(() => createNodeTypes(nodeTypes), []);
   const edgeTypesParsed = useMemo(() => createEdgeTypes(edgeTypes), []);
@@ -76,6 +98,8 @@ const ReactFlow = ({
           backgroundGap={backgroundGap}
           showBackground={showBackground}
           backgroundType={backgroundType}
+          snapToGrid={snapToGrid}
+          snapGrid={snapGrid}
         />
         {children}
       </StoreProvider>
@@ -90,17 +114,17 @@ ReactFlow.defaultProps = {
   onElementsRemove: () => {},
   onNodeDragStop: () => {},
   onConnect: () => {},
-	onLoad: () => {},
+  onLoad: () => {},
   onMove: () => {},
   nodeTypes: {
     input: InputNode,
     default: DefaultNode,
-    output: OutputNode
+    output: OutputNode,
   },
   edgeTypes: {
     default: BezierEdge,
     straight: StraightEdge,
-    step: StepEdge
+    step: StepEdge,
   },
   connectionLineType: 'bezier',
   connectionLineStyle: {},
@@ -109,7 +133,9 @@ ReactFlow.defaultProps = {
   backgroundColor: '#eee',
   backgroundGap: 24,
   showBackground: true,
-  backgroundType: GridType.Dots
+  backgroundType: GridType.Dots,
+  snapToGrid: false,
+  snapGrid: [16, 16],
 };
 
 export default ReactFlow;

src/contexts/NodeIdContext.ts

@@ -2,7 +2,7 @@ import { createContext } from 'react';
 
 import { ElementId } from '../types';
 
-type ContextProps = ElementId | null;
+type ContextProps = ElementId | null;
 
 export const NodeIdContext = createContext<Partial<ContextProps>>(null);
 export const Provider = NodeIdContext.Provider;

src/custom.d.ts

@@ -3,11 +3,12 @@ declare module '*.css' {
   export default content;
 }
 
-interface SvgrComponent extends React.StatelessComponent<React.SVGAttributes<SVGElement>> {}
+interface SvgrComponent
+  extends React.StatelessComponent<React.SVGAttributes<SVGElement>> {}
 
 declare module '*.svg' {
   const svgUrl: string;
   const svgComponent: SvgrComponent;
   export default svgUrl;
-  export { svgComponent as ReactComponent }
+  export { svgComponent as ReactComponent };
 }

src/hooks/useD3Zoom.ts

@@ -9,7 +9,11 @@ const d3ZoomInstance = d3Zoom
   .scaleExtent([0.5, 2])
   .filter(() => !event.button);
 
-export default (zoomPane: MutableRefObject<HTMLDivElement>, onMove: () => void, shiftPressed: boolean): void => {
+export default (
+  zoomPane: MutableRefObject<Element | null>,
+  onMove: () => void,
+  shiftPressed: boolean
+): void => {
   const state = useStoreState(s => ({
     transform: s.transform,
     d3Selection: s.d3Selection,
@@ -20,8 +24,10 @@ export default (zoomPane: MutableRefObject<HTMLDivElement>, onMove: () => void,
   const updateTransform = useStoreActions(actions => actions.updateTransform);
 
   useEffect(() => {
-    const selection = select(zoomPane.current).call(d3ZoomInstance);
-    initD3({ zoom: d3ZoomInstance, selection });
+    if (zoomPane.current) {
+      const selection = select(zoomPane.current).call(d3ZoomInstance);
+      initD3({ zoom: d3ZoomInstance, selection });
+    }
   }, []);
 
   useEffect(() => {
@@ -29,8 +35,11 @@ export default (zoomPane: MutableRefObject<HTMLDivElement>, onMove: () => void,
       d3ZoomInstance.on('zoom', null);
     } else {
       d3ZoomInstance.on('zoom', () => {
-        if (event.sourceEvent && event.sourceEvent.target !== zoomPane.current) {
-          return false;
+        if (
+          event.sourceEvent &&
+          event.sourceEvent.target !== zoomPane.current
+        ) {
+          return;
         }
 
         updateTransform(event.transform);
@@ -38,11 +47,11 @@ export default (zoomPane: MutableRefObject<HTMLDivElement>, onMove: () => void,
         onMove();
       });
 
-      if (state.d3Selection) {
+      if (state.d3Selection && state.d3Zoom) {
         // we need to restore the graph transform otherwise d3 zoom transform and graph transform are not synced
         const graphTransform = d3Zoom.zoomIdentity
-            .translate(state.transform[0], state.transform[1])
-            .scale(state.transform[2]);
+          .translate(state.transform[0], state.transform[1])
+          .scale(state.transform[2]);
 
         state.d3Selection.call(state.d3Zoom.transform, graphTransform);
       }
@@ -52,4 +61,4 @@ export default (zoomPane: MutableRefObject<HTMLDivElement>, onMove: () => void,
       d3ZoomInstance.on('zoom', null);
     };
   }, [shiftPressed]);
-}
+};

src/hooks/useElementUpdater.ts

@@ -9,7 +9,7 @@ const useElementUpdater = (elements: Elements): void => {
   const state = useStoreState(s => ({
     nodes: s.nodes,
     edges: s.edges,
-    transform: s.transform
+    transform: s.transform,
   }));
 
   const setNodes = useStoreActions(a => a.setNodes);
@@ -19,16 +19,17 @@ const useElementUpdater = (elements: Elements): void => {
     const nodes = elements.filter(isNode) as Node[];
     const edges = elements.filter(isEdge).map(e => parseElement(e)) as Edge[];
 
-    const nextNodes = nodes.map((propNode) => {
+    const nextNodes = nodes.map(propNode => {
       const existingNode = state.nodes.find(n => n.id === propNode.id);
 
       if (existingNode) {
-        const data = !isEqual(existingNode.data, propNode.data) ?
-          { ...existingNode.data, ...propNode.data } : existingNode.data;
+        const data = !isEqual(existingNode.data, propNode.data)
+          ? { ...existingNode.data, ...propNode.data }
+          : existingNode.data;
 
         return {
           ...existingNode,
-          data
+          data,
         };
       }
 
@@ -46,8 +47,6 @@ const useElementUpdater = (elements: Elements): void => {
       setEdges(edges);
     }
   });
-
-  return null;
 };
 
 export default useElementUpdater;

src/hooks/useGlobalKeyHandler.ts

@@ -8,10 +8,13 @@ import { Elements, Node } from '../types';
 interface HookParams {
   deleteKeyCode: number;
   onElementsRemove: (elements: Elements) => void;
-};
+}
 
 export default ({ deleteKeyCode, onElementsRemove }: HookParams): void => {
-  const state = useStoreState(s => ({ selectedElements: s.selectedElements, edges: s.edges }))
+  const state = useStoreState(s => ({
+    selectedElements: s.selectedElements,
+    edges: s.edges,
+  }));
   const setNodesSelection = useStoreActions(a => a.setNodesSelection);
   const deleteKeyPressed = useKeyPress(deleteKeyCode);
 
@@ -20,8 +23,11 @@ export default ({ deleteKeyCode, onElementsRemove }: HookParams): void => {
       let elementsToRemove = state.selectedElements;
 
       // we also want to remove the edges if only one node is selected
-      if (state.selectedElements.length === 1 && !isEdge(state.selectedElements[0])) {
-        const node = state.selectedElements[0] as unknown as Node;
+      if (
+        state.selectedElements.length === 1 &&
+        !isEdge(state.selectedElements[0])
+      ) {
+        const node = (state.selectedElements[0] as unknown) as Node;
         const connectedEdges = getConnectedEdges([node], state.edges);
         elementsToRemove = [...state.selectedElements, ...connectedEdges];
       }
@@ -29,7 +35,5 @@ export default ({ deleteKeyCode, onElementsRemove }: HookParams): void => {
       onElementsRemove(elementsToRemove);
       setNodesSelection({ isActive: false });
     }
-  }, [deleteKeyPressed])
-
-  return null;
+  }, [deleteKeyPressed]);
 };

src/hooks/useKeyPress.ts

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
 
 import { isInputDOMNode } from '../utils';
 
-export default (keyCode: number) => {
+export default (keyCode: number): boolean => {
   const [keyPressed, setKeyPressed] = useState(false);
 
   function downHandler(evt: KeyboardEvent) {
@@ -28,4 +28,4 @@ export default (keyCode: number) => {
   }, []);
 
   return keyPressed;
-}
+};

src/index.ts

@@ -10,5 +10,5 @@ export {
   isEdge,
   removeElements,
   addEdge,
-  getOutgoers
+  getOutgoers,
 } from './utils/graph';

src/plugins/Controls/index.tsx

@@ -2,7 +2,7 @@ import React, { CSSProperties } from 'react';
 import classnames from 'classnames';
 
 import { fitView, zoomIn, zoomOut } from '../../utils/graph';
-import PlusIcon from '../../../assets/icons/plus.svg';
+import PlusIcon from '../../../assets/icons/plus.svg';
 import MinusIcon from '../../../assets/icons/minus.svg';
 import FitviewIcon from '../../../assets/icons/fitview.svg';
 
@@ -13,10 +13,7 @@ const baseStyle: CSSProperties = {
   left: 10,
 };
 
-interface ControlProps {
-  style?: CSSProperties;
-  className?: string
-};
+interface ControlProps extends React.HTMLAttributes<HTMLDivElement> {}
 
 export default ({ style, className }: ControlProps) => {
   const mapClasses: string = classnames('react-flow__controls', className);
@@ -26,7 +23,7 @@ export default ({ style, className }: ControlProps) => {
       className={mapClasses}
       style={{
         ...baseStyle,
-        ...style
+        ...style,
       }}
     >
       <div

src/plugins/MiniMap/index.tsx

@@ -7,25 +7,26 @@ import { Node } from '../../types';
 
 type StringFunc = (node: Node) => string;
 
-interface MiniMapProps {
-  style?: CSSProperties;
-  className?: string | null;
+interface MiniMapProps extends React.HTMLAttributes<HTMLCanvasElement> {
   bgColor?: string;
-  nodeColor?: string | StringFunc;
-};
+  nodeColor?: string | StringFunc;
+}
 
 const baseStyle: CSSProperties = {
   position: 'absolute',
   zIndex: 5,
   bottom: 10,
   right: 10,
-  width: 200
+  width: 200,
 };
 
-export default (
-  { style = {}, className, bgColor = '#f8f8f8', nodeColor = '#ddd' }: MiniMapProps
-) => {
-  const canvasNode = useRef(null);
+export default ({
+  style = {},
+  className,
+  bgColor = '#f8f8f8',
+  nodeColor = '#ddd',
+}: MiniMapProps) => {
+  const canvasNode = useRef<HTMLCanvasElement>(null);
   const state = useStoreState(s => ({
     width: s.width,
     height: s.height,
@@ -34,45 +35,59 @@ export default (
   }));
   const mapClasses = classnames('react-flow__minimap', className);
   const nodePositions = state.nodes.map(n => n.__rg.position);
-  const width: number = +(style.width || baseStyle.width || 0);
-  const height = (state.height / (state.width || 1)) * width;
+  const width: number = +(style.width || baseStyle.width || 0);
+  const height = (state.height / (state.width || 1)) * width;
   const bbox = { x: 0, y: 0, width: state.width, height: state.height };
   const scaleFactor = width / state.width;
-  const nodeColorFunc = (nodeColor instanceof Function ? nodeColor: () => nodeColor) as StringFunc;
+  const nodeColorFunc = (nodeColor instanceof Function
+    ? nodeColor
+    : () => nodeColor) as StringFunc;
 
   useEffect(() => {
-    if (canvasNode && canvasNode.current) {
-      const ctx = canvasNode.current.getContext('2d');
-      const nodesInside = getNodesInside(state.nodes, bbox, state.transform, true);
-
-      ctx.fillStyle = bgColor;
-      ctx.fillRect(0, 0, width, height);
-
-      nodesInside.forEach((n) => {
-        const pos = n.__rg.position;
-        const transformX = state.transform[0];
-        const transformY = state.transform[1];
-        const x = (pos.x * state.transform[2]) + transformX;
-        const y = (pos.y * state.transform[2]) + transformY;
-
-        ctx.fillStyle = nodeColorFunc(n);
-
-        ctx.fillRect(
-          (x * scaleFactor),
-          (y * scaleFactor),
-          n.__rg.width * scaleFactor * state.transform[2],
-          n.__rg.height * scaleFactor * state.transform[2]
-        );
-      });
+    if (!canvasNode || !canvasNode.current) {
+      return;
     }
-  }, [canvasNode.current, nodePositions, state.transform, height])
+
+    const ctx = canvasNode.current.getContext('2d');
+
+    if (!ctx) {
+      return;
+    }
+
+    const nodesInside = getNodesInside(
+      state.nodes,
+      bbox,
+      state.transform,
+      true
+    );
+
+    ctx.fillStyle = bgColor;
+    ctx.fillRect(0, 0, width, height);
+
+    nodesInside.forEach(n => {
+      const pos = n.__rg.position;
+      const transformX = state.transform[0];
+      const transformY = state.transform[1];
+      const x = pos.x * state.transform[2] + transformX;
+      const y = pos.y * state.transform[2] + transformY;
+
+      ctx.fillStyle = nodeColorFunc(n);
+
+      ctx.fillRect(
+        x * scaleFactor,
+        y * scaleFactor,
+        n.__rg.width * scaleFactor * state.transform[2],
+        n.__rg.height * scaleFactor * state.transform[2]
+      );
+    });
+  }, [canvasNode.current, nodePositions, state.transform, height]);
 
   return (
     <canvas
       style={{
         ...baseStyle,
         ...style,
-        height
+        height,
       }}
       width={width}
       height={height}
@@ -80,4 +95,4 @@ export default (
       ref={canvasNode}
     />
   );
-}
+};

src/plugins/index.ts

@@ -1,2 +1,2 @@
-export { default as MiniMap } from './MiniMap';
-export { default as Controls } from './Controls';
+export { default as MiniMap } from './MiniMap';
+export { default as Controls } from './Controls';

src/store/hooks.ts

@@ -1,6 +1,6 @@
 import { createTypedHooks } from 'easy-peasy';
 
-import { StoreModel } from './index';
+import { StoreModel } from './index';
 
 const typedHooks = createTypedHooks<StoreModel>();
 

src/store/index.ts

@@ -2,32 +2,44 @@ import { createStore, Action, action } from 'easy-peasy';
 import isEqual from 'fast-deep-equal';
 import { Selection as D3Selection, ZoomBehavior } from 'd3';
 
-import { getBoundingBox, getNodesInside, getConnectedEdges } from '../utils/graph';
 import {
-  ElementId, Elements, Transform, Node,
-  Edge, Rect, Dimensions, XYPosition,
-  OnConnectFunc, SelectionRect, HandleElement
+  getBoundingBox,
+  getNodesInside,
+  getConnectedEdges,
+} from '../utils/graph';
+import {
+  ElementId,
+  Elements,
+  Transform,
+  Node,
+  Edge,
+  Rect,
+  Dimensions,
+  XYPosition,
+  OnConnectFunc,
+  SelectionRect,
+  HandleElement,
 } from '../types';
 
 type TransformXYK = {
-  x: number,
-  y: number,
-  k: number
+  x: number;
+  y: number;
+  k: number;
 };
 
 type NodePosUpdate = {
-  id: ElementId,
-  pos: XYPosition
+  id: ElementId;
+  pos: XYPosition;
 };
 
 type NodeUpdate = {
-  id: ElementId,
-  width: number,
-  height: number,
+  id: ElementId;
+  width: number;
+  height: number;
   handleBounds: {
-    source: HandleElement,
-    target: HandleElement
-  }
+    source: HandleElement[] | null;
+    target: HandleElement[] | null;
+  };
 };
 
 type SelectionUpdate = {
@@ -40,6 +52,11 @@ type D3Init = {
   selection: D3Selection<Element, unknown, null, undefined>;
 };
 
+type SetSnapGrid = {
+  snapToGrid: boolean;
+  snapGrid: [number, number];
+};
+
 export interface StoreModel {
   width: number;
   height: number;
@@ -49,17 +66,20 @@ export interface StoreModel {
   selectedElements: Elements;
   selectedNodesBbox: Rect;
 
-  d3Zoom: ZoomBehavior<Element, unknown>;
-  d3Selection: D3Selection<Element, unknown, null, undefined>;
+  d3Zoom: ZoomBehavior<Element, unknown> | null;
+  d3Selection: D3Selection<Element, unknown, null, undefined> | null;
   d3Initialised: boolean;
 
   nodesSelectionActive: boolean;
   selectionActive: boolean;
-  selection: SelectionRect | null;
+  selection: SelectionRect | null;
 
-  connectionSourceId: ElementId | null;
+  connectionSourceId: ElementId | null;
   connectionPosition: XYPosition;
 
+  snapToGrid: boolean;
+  snapGrid: [number, number];
+
   onConnect: OnConnectFunc;
 
   setOnConnect: Action<StoreModel, OnConnectFunc>;
@@ -68,7 +88,7 @@ export interface StoreModel {
 
   setEdges: Action<StoreModel, Edge[]>;
 
-  updateNodeData:  Action<StoreModel, NodeUpdate>;
+  updateNodeData: Action<StoreModel, NodeUpdate>;
 
   updateNodePos: Action<StoreModel, NodePosUpdate>;
 
@@ -76,7 +96,7 @@ export interface StoreModel {
 
   setNodesSelection: Action<StoreModel, SelectionUpdate>;
 
-  setSelectedElements: Action<StoreModel, Elements | Node | Edge>
+  setSelectedElements: Action<StoreModel, Elements | Node | Edge>;
 
   updateSelection: Action<StoreModel, SelectionRect>;
 
@@ -86,10 +106,12 @@ export interface StoreModel {
 
   initD3: Action<StoreModel, D3Init>;
 
+  setSnapGrid: Action<StoreModel, SetSnapGrid>;
+
   setConnectionPosition: Action<StoreModel, XYPosition>;
 
-  setConnectionSourceId: Action<StoreModel, ElementId>;
-};
+  setConnectionSourceId: Action<StoreModel, ElementId | null>;
+}
 
 const storeModel: StoreModel = {
   width: 0,
@@ -111,6 +133,9 @@ const storeModel: StoreModel = {
   connectionSourceId: null,
   connectionPosition: { x: 0, y: 0 },
 
+  snapGrid: [16, 16],
+  snapToGrid: true,
+
   onConnect: () => {},
 
   setOnConnect: action((state, onConnect) => {
@@ -126,22 +151,34 @@ const storeModel: StoreModel = {
   }),
 
   updateNodeData: action((state, { id, ...data }) => {
-    state.nodes.forEach((n) => {
+    state.nodes.forEach(n => {
       if (n.id === id) {
         n.__rg = {
           ...n.__rg,
-          ...data
+          ...data,
         };
       }
     });
   }),
 
   updateNodePos: action((state, { id, pos }) => {
-    state.nodes.forEach((n) => {
+    let position: XYPosition = pos;
+
+    if (state.snapToGrid) {
+      const transformedGridSizeX = state.snapGrid[0] * state.transform[2];
+      const transformedGridSizeY = state.snapGrid[1] * state.transform[2];
+
+      position = {
+        x: transformedGridSizeX * Math.round(pos.x / transformedGridSizeX),
+        y: transformedGridSizeY * Math.round(pos.y / transformedGridSizeY),
+      };
+    }
+
+    state.nodes.forEach(n => {
       if (n.id === id) {
         n.__rg = {
           ...n.__rg,
-          position: pos
+          position,
         };
       }
     });
@@ -152,13 +189,17 @@ const storeModel: StoreModel = {
   }),
 
   setNodesSelection: action((state, { isActive, selection }) => {
-    if (!isActive) {
+    if (!isActive || typeof selection === 'undefined') {
       state.nodesSelectionActive = false;
       state.selectedElements = [];
 
       return;
     }
-    const selectedNodes = getNodesInside(state.nodes, selection, state.transform);
+    const selectedNodes = getNodesInside(
+      state.nodes,
+      selection,
+      state.transform
+    );
     const selectedNodesBbox = getBoundingBox(selectedNodes);
 
     state.selection = selection;
@@ -169,21 +210,35 @@ const storeModel: StoreModel = {
 
   setSelectedElements: action((state, elements) => {
     const selectedElementsArr = Array.isArray(elements) ? elements : [elements];
-    const selectedElementsUpdated = !isEqual(selectedElementsArr, state.selectedElements);
-    const selectedElements = selectedElementsUpdated ? selectedElementsArr : state.selectedElements;
+    const selectedElementsUpdated = !isEqual(
+      selectedElementsArr,
+      state.selectedElements
+    );
+    const selectedElements = selectedElementsUpdated
+      ? selectedElementsArr
+      : state.selectedElements;
 
     state.selectedElements = selectedElements;
   }),
 
   updateSelection: action((state, selection) => {
-    const selectedNodes = getNodesInside(state.nodes, selection, state.transform);
+    const selectedNodes = getNodesInside(
+      state.nodes,
+      selection,
+      state.transform
+    );
     const selectedEdges = getConnectedEdges(selectedNodes, state.edges);
 
-    const nextSelectedElements =  [...selectedNodes, ...selectedEdges];
-    const selectedElementsUpdated = !isEqual(nextSelectedElements, state.selectedElements);
+    const nextSelectedElements = [...selectedNodes, ...selectedEdges];
+    const selectedElementsUpdated = !isEqual(
+      nextSelectedElements,
+      state.selectedElements
+    );
 
     state.selection = selection;
-    state.selectedElements = selectedElementsUpdated ? nextSelectedElements: state.selectedElements
+    state.selectedElements = selectedElementsUpdated
+      ? nextSelectedElements
+      : state.selectedElements;
   }),
 
   updateTransform: action((state, transform) => {
@@ -207,7 +262,12 @@ const storeModel: StoreModel = {
 
   setConnectionSourceId: action((state, sourceId) => {
     state.connectionSourceId = sourceId;
-  })
+  }),
+
+  setSnapGrid: action((state, { snapToGrid, snapGrid }) => {
+    state.snapToGrid = snapToGrid;
+    state.snapGrid = snapGrid;
+  }),
 };
 
 const store = createStore(storeModel);

src/types/index.ts

@@ -2,136 +2,131 @@ import { CSSProperties, SVGAttributes } from 'react';
 
 export type ElementId = string;
 
-export type Elements = Array<Node | Edge>;
+export type Elements = Array<Node | Edge>;
 
 export type Transform = [number, number, number];
 
-export type Position = 'left' | 'top' | 'right' | 'bottom';
+export type Position = 'left' | 'top' | 'right' | 'bottom';
 
 export type XYPosition = {
-  x: number,
-  y: number
+  x: number;
+  y: number;
 };
 
 export enum GridType {
   Lines = 'lines',
   Dots = 'dots',
-};
+}
 
-export type HandleType = 'source' | 'target';
+export type HandleType = 'source' | 'target';
 
-export type NodeTypesType = { [key: string]: React.ReactNode };
+export type NodeTypesType = { [key: string]: React.ReactNode };
 
 export type EdgeTypesType = NodeTypesType;
 
 export interface Dimensions {
-  width: number,
-  height: number
+  width: number;
+  height: number;
 }
 
 export interface Rect extends Dimensions {
-  x: number,
-  y: number
-};
+  x: number;
+  y: number;
+}
 
 export interface SelectionRect extends Rect {
   startX: number;
   startY: number;
-  draw: boolean
-};
+  draw: boolean;
+}
 
 export interface Node {
-  id: ElementId,
-  position?: XYPosition,
-  type?: string,
-  __rg?: any,
-  data?: any,
-  style?: CSSProperties
-};
+  id: ElementId;
+  position: XYPosition;
+  type?: string;
+  __rg?: any;
+  data?: any;
+  style?: CSSProperties;
+}
 
 export interface Edge {
-  id: ElementId,
-  type?: string,
-  source: ElementId,
-  target: ElementId,
-  style?: SVGAttributes<{}>
-  animated?: boolean
-};
+  id: ElementId;
+  type?: string;
+  source: ElementId;
+  target: ElementId;
+  style?: SVGAttributes<{}>;
+  animated?: boolean;
+}
 
 export interface EdgeProps {
-  sourceX: number,
-  sourceY: number,
-  targetX: number,
-  targetY: number,
-  style?: SVGAttributes<{}>
-};
+  sourceX: number;
+  sourceY: number;
+  targetX: number;
+  targetY: number;
+  style?: SVGAttributes<{}>;
+}
 
-export interface EdgeBezierProps extends EdgeProps{
-  sourcePosition: Position,
-  targetPosition: Position
-};
+export interface EdgeBezierProps extends EdgeProps {
+  sourcePosition: Position;
+  targetPosition: Position;
+}
 
 export interface NodeProps {
-  id: ElementId,
-  type: string,
+  id: ElementId;
+  type: string;
   data: any;
   selected: boolean;
   style?: CSSProperties;
-};
+}
 
 export interface NodeComponentProps {
-  id: ElementId,
+  id: ElementId;
   type: string;
   data: any;
   selected?: boolean;
   transform?: Transform;
   xPos?: number;
   yPos?: number;
-  onClick?: () => any;
+  onClick?: (node: Node) => void | undefined;
   onNodeDragStop?: () => any;
   style?: CSSProperties;
-};
+}
 
 export type FitViewParams = {
-  padding: number
+  padding: number;
 };
 export type FitViewFunc = (fitViewOptions: FitViewParams) => void;
 
 type OnLoadParams = {
   zoomIn: () => void;
   zoomOut: () => void;
-  fitView: FitViewFunc
+  fitView: FitViewFunc;
 };
 
 export type OnLoadFunc = (params: OnLoadParams) => void;
 
-export type OnConnectParams = {
-  source: ElementId;
-  target: ElementId;
-};
-
-export type OnConnectFunc = (params: OnConnectParams) => void;
-
 export type Connection = {
-  source: ElementId;
-  target: ElementId;
+  source: ElementId | null;
+  target: ElementId | null;
 };
 
+export type OnConnectFunc = (params: Connection) => void;
+
 export interface HandleElement {
-  id?: ElementId;
+  id?: ElementId | null;
   position: Position;
   x: number;
   y: number;
   width: number;
   height: number;
-};
+}
 
-export interface EdgeWrapperProps {
-  id: ElementId,
-  source: ElementId,
-  target: ElementId,
-  type: any,
-  onClick?: (edge: Edge) => void
-  animated?: boolean,
-  selected?: boolean,
-};
+export interface EdgeCompProps {
+  id: ElementId;
+  source: ElementId;
+  target: ElementId;
+  type: any;
+  onClick?: (edge: Edge) => void;
+  animated?: boolean;
+  selected?: boolean;
+}

src/utils/graph.ts

@@ -1,9 +1,18 @@
 import { zoomIdentity } from 'd3-zoom';
 
 import store from '../store';
-import { ElementId, Node, Edge, Elements, Transform, XYPosition, Rect, FitViewParams } from '../types';
+import {
+  ElementId,
+  Node,
+  Edge,
+  Elements,
+  Transform,
+  XYPosition,
+  Rect,
+  FitViewParams,
+} from '../types';
 
-export const isEdge = (element: Node | Edge): boolean =>
+export const isEdge = (element: Node | Edge): boolean =>
   element.hasOwnProperty('source') && element.hasOwnProperty('target');
 
 export const isNode = (element: Node | Edge): boolean =>
@@ -14,14 +23,19 @@ export const getOutgoers = (node: Node, elements: Elements): Elements => {
     return [];
   }
 
-  const outgoerIds = elements.filter((e: Edge) => e.source === node.id).map((e: Edge) => e.target);
+  const outgoerIds = (elements as Edge[])
+    .filter(e => e.source === node.id)
+    .map(e => e.target);
   return elements.filter(e => outgoerIds.includes(e.id));
 };
 
-export const removeElements = (elementsToRemove: Elements, elements: Elements): Elements => {
+export const removeElements = (
+  elementsToRemove: Elements,
+  elements: Elements
+): Elements => {
   const nodeIdsToRemove = elementsToRemove.map(n => n.id);
 
-  return elements.filter((element) => {
+  return elements.filter(element => {
     const edgeElement = element as Edge;
     return !(
       nodeIdsToRemove.includes(element.id) ||
@@ -36,36 +50,45 @@ function getEdgeId(edgeParams: Edge): ElementId {
 }
 
 export const addEdge = (edgeParams: Edge, elements: Elements): Elements => {
-  if (!edgeParams.source || !edgeParams.target) {
+  if (!edgeParams.source || !edgeParams.target) {
     throw new Error('Can not create edge. An edge needs a source and a target');
   }
 
   return elements.concat({
     ...edgeParams,
-    id: typeof edgeParams.id !== 'undefined' ? edgeParams.id : getEdgeId(edgeParams)
+    id:
+      typeof edgeParams.id !== 'undefined'
+        ? edgeParams.id
+        : getEdgeId(edgeParams),
   });
-}
+};
 
-const pointToRendererPoint = ({ x, y }: XYPosition, transform: Transform): XYPosition => {
+const pointToRendererPoint = (
+  { x, y }: XYPosition,
+  transform: Transform
+): XYPosition => {
   const rendererX = (x - transform[0]) * (1 / transform[2]);
   const rendererY = (y - transform[1]) * (1 / transform[2]);
 
   return {
     x: rendererX,
-    y: rendererY
+    y: rendererY,
   };
 };
 
-export const parseElement = (element: Node | Edge, transform?: Transform): Node | Edge => {
+export const parseElement = (
+  element: Node | Edge,
+  transform: Transform = [0, 0, 1]
+): Node | Edge => {
   if (!element.id) {
-    throw new Error('All elements (nodes and edges) need to have an id.',)
+    throw new Error('All elements (nodes and edges) need to have an id.');
   }
 
   if (isEdge(element)) {
     return {
       ...element,
       id: element.id.toString(),
-      type: element.type || 'default'
+      type: element.type || 'default',
     };
   }
 
@@ -79,76 +102,88 @@ export const parseElement = (element: Node | Edge, transform?: Transform): Node
       position: pointToRendererPoint(nodeElement.position, transform),
       width: null,
       height: null,
-      handleBounds : {}
-    }
+      handleBounds: {},
+    },
   };
 };
 
 export const getBoundingBox = (nodes: Node[]): Rect => {
-  const bbox = nodes.reduce((res, node) => {
-    const { position } = node.__rg;
-    const x2 = position.x + node.__rg.width;
-    const y2 = position.y + node.__rg.height;
+  const bbox = nodes.reduce(
+    (res, node) => {
+      const { position } = node.__rg;
+      const x2 = position.x + node.__rg.width;
+      const y2 = position.y + node.__rg.height;
 
-    if (position.x < res.minX) {
-      res.minX = position.x;
+      if (position.x < res.minX) {
+        res.minX = position.x;
+      }
+
+      if (x2 > res.maxX) {
+        res.maxX = x2;
+      }
+
+      if (position.y < res.minY) {
+        res.minY = position.y;
+      }
+
+      if (y2 > res.maxY) {
+        res.maxY = y2;
+      }
+
+      return res;
+    },
+    {
+      minX: Number.MAX_VALUE,
+      minY: Number.MAX_VALUE,
+      maxX: 0,
+      maxY: 0,
     }
-
-    if (x2 > res.maxX) {
-      res.maxX = x2;
-    }
-
-    if (position.y < res.minY) {
-      res.minY = position.y;
-    }
-
-    if (y2 > res.maxY) {
-      res.maxY = y2;
-    }
-
-    return res;
-  }, {
-    minX: Number.MAX_VALUE,
-    minY: Number.MAX_VALUE,
-    maxX: 0,
-    maxY: 0
-  });
+  );
 
   return {
     x: bbox.minX,
     y: bbox.minY,
     width: bbox.maxX - bbox.minX,
-    height: bbox.maxY - bbox.minY
+    height: bbox.maxY - bbox.minY,
   };
 };
 
-export const graphPosToZoomedPos = (pos: XYPosition, transform: Transform): XYPosition => {
+export const graphPosToZoomedPos = (
+  pos: XYPosition,
+  transform: Transform
+): XYPosition => {
   return {
-    x: (pos.x * transform[2]) + transform[0],
-    y: (pos.y * transform[2]) + transform[1]
+    x: pos.x * transform[2] + transform[0],
+    y: pos.y * transform[2] + transform[1],
   };
-}
+};
 
-export const getNodesInside = (nodes: Node[], bbox: Rect, transform: Transform = [0, 0, 1], partially: boolean = false): Node[] => {
-  return nodes
-    .filter(n => {
-      const bboxPos = {
-        x: (bbox.x - transform[0]) * (1 / transform[2]),
-        y: (bbox.y - transform[1]) * (1 / transform[2])
-      };
-      const bboxWidth = bbox.width * (1 / transform[2]);
-      const bboxHeight = bbox.height * (1 / transform[2]);
-      const { position, width, height } = n.__rg;
-      const nodeWidth = partially ? -width : width;
-      const nodeHeight = partially ? 0 : height;
-      const offsetX = partially ? width : 0;
-      const offsetY = partially ? height : 0;
+export const getNodesInside = (
+  nodes: Node[],
+  bbox: Rect,
+  transform: Transform = [0, 0, 1],
+  partially: boolean = false
+): Node[] => {
+  return nodes.filter(n => {
+    const bboxPos = {
+      x: (bbox.x - transform[0]) * (1 / transform[2]),
+      y: (bbox.y - transform[1]) * (1 / transform[2]),
+    };
+    const bboxWidth = bbox.width * (1 / transform[2]);
+    const bboxHeight = bbox.height * (1 / transform[2]);
+    const { position, width, height } = n.__rg;
+    const nodeWidth = partially ? -width : width;
+    const nodeHeight = partially ? 0 : height;
+    const offsetX = partially ? width : 0;
+    const offsetY = partially ? height : 0;
 
-      return (
-        (position.x + offsetX > bboxPos.x && (position.x + nodeWidth) < (bboxPos.x + bboxWidth)) &&
-        (position.y + offsetY > bboxPos.y && (position.y + nodeHeight) < (bboxPos.y + bboxHeight))
-      );
-    });
+    return (
+      position.x + offsetX > bboxPos.x &&
+      position.x + nodeWidth < bboxPos.x + bboxWidth &&
+      (position.y + offsetY > bboxPos.y &&
+        position.y + nodeHeight < bboxPos.y + bboxHeight)
+    );
+  });
 };
 
 export const getConnectedEdges = (nodes: Node[], edges: Edge[]): Edge[] => {
@@ -167,23 +202,45 @@ export const getConnectedEdges = (nodes: Node[], edges: Edge[]): Edge[] => {
 
 export const fitView = ({ padding }: FitViewParams = { padding: 0 }): void => {
   const state = store.getState();
+
+  if (!state.d3Selection || !state.d3Zoom) {
+    return;
+  }
+
   const bounds = getBoundingBox(state.nodes);
   const maxBoundsSize = Math.max(bounds.width, bounds.height);
-  const k = Math.min(state.width, state.height) / (maxBoundsSize + (maxBoundsSize * padding));
-  const boundsCenterX = bounds.x + (bounds.width / 2);
-  const boundsCenterY = bounds.y + (bounds.height / 2);
-  const transform = [(state.width / 2) - (boundsCenterX * k), (state.height / 2) - (boundsCenterY * k)];
-  const fittedTransform = zoomIdentity.translate(transform[0], transform[1]).scale(k);
+  const k =
+    Math.min(state.width, state.height) /
+    (maxBoundsSize + maxBoundsSize * padding);
+  const boundsCenterX = bounds.x + bounds.width / 2;
+  const boundsCenterY = bounds.y + bounds.height / 2;
+  const transform = [
+    state.width / 2 - boundsCenterX * k,
+    state.height / 2 - boundsCenterY * k,
+  ];
+  const fittedTransform = zoomIdentity
+    .translate(transform[0], transform[1])
+    .scale(k);
 
   state.d3Selection.call(state.d3Zoom.transform, fittedTransform);
 };
 
 export const zoomIn = (): void => {
   const state = store.getState();
+
+  if (!state.d3Zoom || !state.d3Selection) {
+    return;
+  }
+
   state.d3Zoom.scaleTo(state.d3Selection, state.transform[2] + 0.2);
 };
 
 export const zoomOut = (): void => {
   const state = store.getState();
+
+  if (!state.d3Zoom || !state.d3Selection) {
+    return;
+  }
+
   state.d3Zoom.scaleTo(state.d3Selection, state.transform[2] - 0.2);
 };

src/utils/index.ts

@@ -1,12 +1,16 @@
 import { DraggableEvent } from 'react-draggable';
 import { MouseEvent as ReactMouseEvent } from 'react';
 
-export const isInputDOMNode = (e: ReactMouseEvent | DraggableEvent | KeyboardEvent) => {
+export const isInputDOMNode = (
+  e: ReactMouseEvent | DraggableEvent | KeyboardEvent
+) => {
   const target = e.target as HTMLElement;
-  return e && target && ['INPUT', 'SELECT', 'TEXTAREA'].includes(target.nodeName);
+  return (
+    e && target && ['INPUT', 'SELECT', 'TEXTAREA'].includes(target.nodeName)
+  );
 };
 
 export const getDimensions = (node: HTMLDivElement) => ({
   width: node.offsetWidth,
-  height: node.offsetHeight
+  height: node.offsetHeight,
 });

tsconfig.json

@@ -6,13 +6,20 @@
     "lib": ["es6", "dom", "es2016", "es2017"],
     "jsx": "react",
     "moduleResolution": "node",
-    "forceConsistentCasingInFileNames": true,
-    "strictNullChecks": false,
+    "declaration": true,
+    "strict": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "strictPropertyInitialization": true,
+    "noImplicitThis": true,
+    "alwaysStrict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
     "allowSyntheticDefaultImports": true,
-    "noImplicitAny": true,
-    "suppressImplicitAnyIndexErrors": true
+    "esModuleInterop": true
   },
   "include": ["src"],
   "exclude": ["node_modules", "build", "dist", "example", "rollup.config.js"]