refactor(helper): use type predicates for isEdge and isNode

README.md

@@ -249,11 +249,11 @@ import ReactFlow, { isNode, isEdge, removeElements, addEdge } from 'react-flow-r
 
 #### isEdge
 
-`isEdge = (element: Node | Edge): boolean`
+`isEdge = (element: Node | Edge): element is Edge`
 
 #### isNode
 
-`isNode = (element: Node | Edge): boolean`
+`isNode = (element: Node | Edge): element is Node`
 
 #### removeElements
 

src/hooks/useElementUpdater.ts

@@ -18,10 +18,10 @@ const useElementUpdater = (elements: Elements): void => {
   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 nodes: Node[] = elements.filter(isNode);
+    const edges: Edge[] = elements.filter(isEdge).map((e) => parseElement(e) as Edge);
 
-    const nextNodes = nodes.map((propNode) => {
+    const nextNodes: Node[] = nodes.map((propNode) => {
       const existingNode = state.nodes.find((n) => n.id === propNode.id);
 
       if (existingNode) {
@@ -56,8 +56,8 @@ const useElementUpdater = (elements: Elements): void => {
         };
       }
 
-      return parseElement(propNode);
-    }) as Node[];
+      return parseElement(propNode) as Node;
+    });
 
     const nodesChanged: boolean = !isEqual(state.nodes, nextNodes);
     const edgesChanged: boolean = !isEqual(state.edges, edges);

src/utils/graph.ts

@@ -3,11 +3,11 @@ import { zoomIdentity } from 'd3-zoom';
 import store from '../store';
 import { ElementId, Node, Edge, Elements, Transform, XYPosition, Rect, FitViewParams, Box, Connection } from '../types';
 
-export const isEdge = (element: Node | Edge): boolean =>
-  element.hasOwnProperty('source') && element.hasOwnProperty('target');
+export const isEdge = (element: Node | Connection | Edge): element is Edge =>
+  'id' in element && 'source' in element && 'target' in element;
 
-export const isNode = (element: Node | Edge): boolean =>
-  !element.hasOwnProperty('source') && !element.hasOwnProperty('target');
+export const isNode = (element: Node | Connection | Edge): element is Node =>
+  'id' in element && !('source' in element) && !('target' in element);
 
 export const getOutgoers = (node: Node, elements: Elements): Elements => {
   if (!isNode(node)) {
@@ -38,9 +38,8 @@ export const addEdge = (edgeParams: Edge | Connection, elements: Elements): Elem
     throw new Error('Can not create edge. An edge needs a source and a target');
   }
 
-  if (edgeParams.hasOwnProperty('id')) {
-    const edge = { ...edgeParams } as Edge;
-    return elements.concat(edge);
+  if (isEdge(edgeParams)) {
+    return elements.concat({ ...edgeParams });
   }
 
   const edge = {
@@ -88,19 +87,17 @@ export const parseElement = (element: Node | Edge): Node | Edge => {
     };
   }
 
-  const nodeElement = element as Node;
-
   return {
-    ...nodeElement,
-    id: nodeElement.id.toString(),
-    type: nodeElement.type || 'default',
+    ...element,
+    id: element.id.toString(),
+    type: element.type || 'default',
     __rg: {
-      position: nodeElement.position,
+      position: element.position,
       width: null,
       height: null,
       handleBounds: {},
     },
-  };
+  } as Node;
 };
 
 const getBoundsOfBoxes = (box1: Box, box2: Box): Box => ({