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/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';