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

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;