chore/COMPASS-9493 export typed diagram hook (#80)

* chore/COMPASS-9493 export typed diagram hook

* map state internally

* fix tests

Author: mabaasit

src/components/canvas/canvas.tsx

@@ -8,20 +8,19 @@ import {
   useEdgesState,
   useNodesState,
 } from '@xyflow/react';
-import { MouseEvent, useCallback, useEffect } from 'react';
+import { MouseEvent, useCallback, useEffect, useMemo } from 'react';
 
 import { MiniMap } from '@/components/controls/mini-map';
 import { Controls } from '@/components/controls/controls';
 import { DiagramProps } from '@/types';
 import { Node } from '@/components/node/node';
-import { useCanvas } from '@/components/canvas/use-canvas';
 import { InternalEdge, InternalNode } from '@/types/internal';
 import { FloatingEdge } from '@/components/edge/floating-edge';
 import { SelfReferencingEdge } from '@/components/edge/self-referencing-edge';
 import { MarkerList } from '@/components/markers/marker-list';
 import { ConnectionLine } from '@/components/line/connection-line';
-import { convertToExternalNode, convertToExternalNodes } from '@/utilities/convert-nodes';
-import { convertToExternalEdge, convertToExternalEdges } from '@/utilities/convert-edges';
+import { convertToExternalNode, convertToExternalNodes, convertToInternalNodes } from '@/utilities/convert-nodes';
+import { convertToExternalEdge, convertToExternalEdges, convertToInternalEdges } from '@/utilities/convert-edges';
 
 const MAX_ZOOM = 3;
 const MIN_ZOOM = 0.1;
@@ -60,7 +59,8 @@ export const Canvas = ({
   onSelectionChange,
   ...rest
 }: DiagramProps) => {
-  const { initialNodes, initialEdges } = useCanvas(externalNodes, externalEdges);
+  const initialNodes = useMemo(() => convertToInternalNodes(externalNodes), [externalNodes]);
+  const initialEdges = useMemo(() => convertToInternalEdges(externalEdges), [externalEdges]);
 
   const [nodes, setNodes, onNodesChange] = useNodesState<InternalNode>(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState<InternalEdge>(initialEdges);

src/components/canvas/use-canvas.test.tsx

@@ -1,9 +1,11 @@
 import Icon from '@leafygreen-ui/icon';
-import { ControlButton, Controls as ReactFlowControls, useReactFlow, useViewport } from '@xyflow/react';
+import { ControlButton, Controls as ReactFlowControls, useViewport } from '@xyflow/react';
 import { palette } from '@leafygreen-ui/palette';
 import { fontFamilies, spacing } from '@leafygreen-ui/tokens';
 import styled from '@emotion/styled';
 
+import { useDiagram } from '@/hooks/use-diagram';
+
 const zoomTransitionOption = { duration: 500 };
 
 const ControlsWrapper = styled(ReactFlowControls)`
@@ -43,7 +45,7 @@ interface DiagramControlsProps {
 }
 
 export const Controls = ({ title }: DiagramControlsProps) => {
-  const { zoomIn, zoomOut, fitView } = useReactFlow();
+  const { zoomIn, zoomOut, fitView } = useDiagram();
   const { zoom } = useViewport();
 
   return (

src/components/canvas/use-canvas.tsx

@@ -0,0 +1,51 @@
+import { useReactFlow } from '@xyflow/react';
+
+import { convertToExternalNode, convertToInternalNodes } from '@/utilities/convert-nodes';
+import { InternalEdge, InternalNode } from '@/types/internal';
+import { NodeProps, EdgeProps } from '@/types';
+import { convertToExternalEdge, convertToInternalEdges } from '@/utilities/convert-edges';
+
+export type DiagramInstance = ReturnType<typeof useDiagram>;
+export function useDiagram() {
+  const diagram = useReactFlow<InternalNode, InternalEdge>();
+
+  return {
+    ...diagram,
+    getNode: (id: string) => {
+      const node = diagram.getNode(id);
+      if (node) {
+        return convertToExternalNode(node);
+      }
+    },
+    getNodes: () => {
+      const nodes = diagram.getNodes();
+      return nodes.map(convertToExternalNode);
+    },
+    addNodes: (payload: NodeProps[]) => {
+      const data = convertToInternalNodes(payload);
+      diagram.addNodes(data);
+    },
+    setNodes: (payload: NodeProps[]) => {
+      const data = convertToInternalNodes(payload);
+      diagram.setNodes(data);
+    },
+    getEdge: (id: string) => {
+      const edge = diagram.getEdge(id);
+      if (edge) {
+        return convertToExternalEdge(edge);
+      }
+    },
+    getEdges: () => {
+      const edges = diagram.getEdges();
+      return edges.map(convertToExternalEdge);
+    },
+    addEdges: (payload: EdgeProps[]) => {
+      const data = convertToInternalEdges(payload);
+      diagram.addEdges(data);
+    },
+    setEdges: (payload: EdgeProps[]) => {
+      const data = convertToInternalEdges(payload);
+      diagram.setEdges(data);
+    },
+  };
+}

src/components/controls/controls.tsx

@@ -1,14 +1,7 @@
 export * from '@/components/diagram';
 export * from '@/utilities/apply-layout';
-export { convertToExternalEdge as mapEdgeToDiagramEdge } from '@/utilities/convert-edges';
-export { convertToExternalNode as mapNodeToDiagramNode } from '@/utilities/convert-nodes';
 export * from '@/utilities/add-nodes-within-bounds';
+export * from '@/utilities/get-nodes-bounds';
 export * from '@/types';
-export {
-  ReactFlowProvider as DiagramProvider,
-  useReactFlow as useDiagram,
-  useOnSelectionChange,
-  getNodesBounds,
-  getViewportForBounds,
-  type ReactFlowInstance as DiagramInstance,
-} from '@xyflow/react';
+export { useDiagram, type DiagramInstance } from '@/hooks/use-diagram';
+export { ReactFlowProvider as DiagramProvider, useOnSelectionChange, getViewportForBounds } from '@xyflow/react';

src/hooks/use-diagram.ts

@@ -15,4 +15,5 @@ export type InternalNode = ReactFlowNode<NodeData>;
 export interface InternalEdge extends Omit<EdgeProps, 'markerStart' | 'markerEnd'> {
   markerStart: 'start-one' | 'start-oneOrMany' | 'start-many';
   markerEnd: 'end-one' | 'end-oneOrMany' | 'end-many';
+  type: 'selfReferencingEdge' | 'floatingEdge';
 }