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/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,
   };
 }