feature/MIG-6604 Add markers to the diagram (#24)

Author: lchans

src/assets/markers/marker-many.svg

@@ -7,9 +7,10 @@ import { Controls } from '@/components/controls/controls';
 import { Edge, Node as ExternalNode } from '@/types';
 import { Node } from '@/components/node/node';
 import { useCanvas } from '@/components/canvas/use-canvas';
-import { InternalNode } from '@/types/internal';
+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';
 
 const MAX_ZOOM = 3;
 const MIN_ZOOM = 0.1;
@@ -40,7 +41,7 @@ export const Canvas = ({ title, nodes: externalNodes, edges: externalEdges }: Pr
   const { initialNodes, initialEdges } = useCanvas(externalNodes, externalEdges);
 
   const [nodes, , onNodesChange] = useNodesState<InternalNode>(initialNodes);
-  const [edges, , onEdgesChange] = useEdgesState<Edge>(initialEdges);
+  const [edges, , onEdgesChange] = useEdgesState<InternalEdge>(initialEdges);
 
   return (
     <ReactFlowWrapper>
@@ -57,6 +58,7 @@ export const Canvas = ({ title, nodes: externalNodes, edges: externalEdges }: Pr
         onNodesChange={onNodesChange}
         onEdgesChange={onEdgesChange}
       >
+        <MarkerList />
         <Background />
         <Controls title={title} />
         <MiniMap />

src/assets/markers/marker-one-or-many.svg

@@ -57,8 +57,8 @@ describe('use-canvas', () => {
     expect(result.current.initialEdges).toEqual([
       {
         id: 'employees-to-orders',
-        markerEnd: 'one',
-        markerStart: 'many',
+        markerEnd: 'end-one',
+        markerStart: 'start-many',
         source: 'employees',
         target: 'orders',
         type: 'floatingEdge',
@@ -72,8 +72,8 @@ describe('use-canvas', () => {
         id: 'employees-to-employees',
         source: 'employees',
         target: 'employees',
-        markerEnd: 'one',
-        markerStart: 'many',
+        markerEnd: 'end-one',
+        markerStart: 'start-many',
         type: 'selfReferencingEdge',
       },
     ]);

src/assets/markers/marker-one.svg

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 
 import { Edge, Node as ExternalNode } from '@/types';
-import { InternalNode } from '@/types/internal';
+import { InternalEdge, InternalNode } from '@/types/internal';
 
 export const useCanvas = (externalNodes: ExternalNode[], externalEdges: Edge[]) => {
   const initialNodes: InternalNode[] = useMemo(
@@ -20,10 +20,12 @@ export const useCanvas = (externalNodes: ExternalNode[], externalEdges: Edge[])
     [externalNodes],
   );
 
-  const initialEdges: Edge[] = useMemo(
+  const initialEdges: InternalEdge[] = useMemo(
     () =>
       externalEdges.map(edge => ({
         ...edge,
+        markerStart: `start-${edge.markerStart}`,
+        markerEnd: `end-${edge.markerEnd}`,
         type: edge.source === edge.target ? 'selfReferencingEdge' : 'floatingEdge',
       })),
     [externalEdges],

src/components/canvas/canvas.tsx

@@ -0,0 +1,14 @@
+import { render, screen } from '@/mocks/testing-utils';
+import { MarkerList } from '@/components/markers/marker-list';
+
+describe('marker-list', () => {
+  it('Should have markers', () => {
+    render(<MarkerList />);
+    expect(screen.getByTestId('start-many')).toBeInTheDocument();
+    expect(screen.getByTestId('start-one')).toBeInTheDocument();
+    expect(screen.getByTestId('start-oneOrMany')).toBeInTheDocument();
+    expect(screen.getByTestId('end-many')).toBeInTheDocument();
+    expect(screen.getByTestId('end-one')).toBeInTheDocument();
+    expect(screen.getByTestId('end-oneOrMany')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,51 @@
+import { ReactNode } from 'react';
+
+import { Marker } from '@/components/markers/marker';
+import MarkerOneOrMany from '@/assets/markers/marker-one-or-many.svg?react';
+import MarkerMany from '@/assets/markers/marker-many.svg?react';
+import MarkerOne from '@/assets/markers/marker-one.svg?react';
+
+interface MarkerProps extends React.SVGAttributes<SVGMarkerElement> {
+  component: ReactNode;
+}
+
+const markerList: Record<string, MarkerProps> = {
+  'start-oneOrMany': {
+    component: <MarkerOneOrMany />,
+    orient: 'auto-start-reverse',
+  },
+  'end-oneOrMany': {
+    component: <MarkerOneOrMany />,
+    orient: 'auto',
+  },
+  'start-one': {
+    component: <MarkerOne />,
+    orient: 'auto-start-reverse',
+  },
+  'end-one': {
+    component: <MarkerOne />,
+    orient: 'auto',
+  },
+  'start-many': {
+    component: <MarkerMany />,
+    orient: 'auto-start-reverse',
+  },
+  'end-many': {
+    component: <MarkerMany />,
+    orient: 'auto',
+  },
+};
+
+export const MarkerList = () => {
+  return (
+    <svg>
+      <defs>
+        {Object.entries(markerList).map(([id, { component, orient }]) => (
+          <Marker key={id} data-testid={id} orient={orient} id={id}>
+            {component}
+          </Marker>
+        ))}
+      </defs>
+    </svg>
+  );
+};

src/components/canvas/use-canvas.tsx

@@ -0,0 +1,16 @@
+import { render, screen } from '@/mocks/testing-utils';
+import { Marker } from '@/components/markers/marker';
+
+describe('marker', () => {
+  it('Should render marker', () => {
+    render(<Marker id={'orders-to-employees'} data-testid={'marker'} orient={'auto'} fill={'#FFF'} />);
+    const marker = screen.getByTestId('marker');
+    expect(marker).toBeInTheDocument();
+    expect(marker).toHaveAttribute('markerHeight', '15');
+    expect(marker).toHaveAttribute('markerWidth', '15');
+    expect(marker).toHaveAttribute('refX', '7.5');
+    expect(marker).toHaveAttribute('refY', '7.5');
+    expect(marker).toHaveAttribute('orient', 'auto');
+    expect(marker).toHaveAttribute('fill', '#FFF');
+  });
+});

src/components/markers/marker-list.test.tsx

@@ -0,0 +1,22 @@
+import { PropsWithChildren } from 'react';
+import { palette } from '@leafygreen-ui/palette';
+
+import { DEFAULT_MARKER_SIZE } from '@/utilities/constants';
+
+type Props = PropsWithChildren<React.SVGAttributes<SVGMarkerElement>>;
+
+export const Marker = ({ children, id, ...rest }: Props) => {
+  return (
+    <marker
+      id={id}
+      style={{ fill: palette.gray.base }}
+      markerHeight={DEFAULT_MARKER_SIZE}
+      markerWidth={DEFAULT_MARKER_SIZE}
+      refX={DEFAULT_MARKER_SIZE / 2}
+      refY={DEFAULT_MARKER_SIZE / 2}
+      {...rest}
+    >
+      {children}
+    </marker>
+  );
+};