Develop (#35)

* refactor(ts): add ReactFlowProps

* Refactor/grid.tsx (#24)

* chore(deps-dev): bump start-server-and-test from 1.10.4 to 1.10.5

Bumps [start-server-and-test](https://github.com/bahmutov/start-server-and-test) from 1.10.4 to 1.10.5.
- [Release notes](https://github.com/bahmutov/start-server-and-test/releases)
- [Commits](https://github.com/bahmutov/start-server-and-test/compare/v1.10.4...v1.10.5)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

* chore(deps-dev): bump typescript from 3.6.3 to 3.6.4

Bumps [typescript](https://github.com/Microsoft/TypeScript) from 3.6.3 to 3.6.4.
- [Release notes](https://github.com/Microsoft/TypeScript/releases)
- [Commits](https://github.com/Microsoft/TypeScript/compare/v3.6.3...v3.6.4)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

* refactor: grid.js -> grid.tsx

* refactor(bg): remove unused renderer

* refactor(connectionline): use ts

* refactor(ts): edges

* chore(build): update

* Refactor/typescript (WIP) (#25)

* refactor(store): use ts

* refactor(edgewrapper): use ts

* fix(handle): provide onConnect default func

* refactor(nodeselection): use ts

* refactor(userselction): use ts

* refactor(plugins): use ts

* refactor(hooks): use ts

* refactor(nodes): use ts

* refactor(edgerenderer): use ts

* refactor(graphview): use ts

* refactor(utils): rename js to ts

* refactor(app): fix ts errors

* fix(ts): errors

* fix(app): ts errors

* refactor(app): ts erros

* refactor(app): ts errors

* fix(utils): removeElements

* feat(example): add empty renderer closes #34

* fix(connect): dont drag node on connect

* chore(build): update

src/hooks/useElementUpdater.ts

@@ -0,0 +1,53 @@
+import { useEffect } from 'react';
+import isEqual from 'fast-deep-equal';
+
+import { useStoreState, useStoreActions } from '../store/hooks';
+import { parseElement, isNode, isEdge } from '../utils/graph';
+import { Elements, Node, Edge } from '../types';
+
+const useElementUpdater = (elements: Elements): void => {
+  const state = useStoreState(s => ({
+    nodes: s.nodes,
+    edges: s.edges,
+    transform: s.transform
+  }));
+
+  const setNodes = useStoreActions(a => a.setNodes);
+  const setEdges = useStoreActions(a => a.setEdges);
+
+  useEffect(() => {
+    const nodes = elements.filter(isNode) as Node[];
+    const edges = elements.filter(isEdge).map(e => parseElement(e)) as Edge[];
+
+    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;
+
+        return {
+          ...existingNode,
+          data
+        };
+      }
+
+      return parseElement(propNode, state.transform);
+    }) as Node[];
+
+    const nodesChanged: boolean = !isEqual(state.nodes, nextNodes);
+    const edgesChanged: boolean = !isEqual(state.edges, edges);
+
+    if (nodesChanged) {
+      setNodes(nextNodes);
+    }
+
+    if (edgesChanged) {
+      setEdges(edges);
+    }
+  });
+
+  return null;
+};
+
+export default useElementUpdater;