feature/MIG-6604 Selected node and edge (#25)

Author: lchans

src/components/edge/edge.test.tsx

@@ -0,0 +1,32 @@
+import { render, screen } from '@/mocks/testing-utils';
+import { Edge } from '@/components/edge/edge';
+
+describe('edge', () => {
+  it('Should have selected edge', () => {
+    render(
+      <Edge
+        data-testid={'edge'}
+        path={'M0,0 L100,100'}
+        markerStart={"url('#start-one')"}
+        markerEnd={"url('#end-one')"}
+        selected={true}
+      />,
+    );
+    const edge = screen.getByTestId('edge');
+    expect(edge).toHaveAttribute('marker-start', "url('#start-one-selected')");
+    expect(edge).toHaveAttribute('marker-end', "url('#end-one-selected')");
+  });
+  it('Should not have selected edge', () => {
+    render(
+      <Edge
+        data-testid={'edge'}
+        path={'M0,0 L100,100'}
+        markerStart={"url('#start-one')"}
+        markerEnd={"url('#end-one')"}
+      />,
+    );
+    const edge = screen.getByTestId('edge');
+    expect(edge).toHaveAttribute('marker-start', "url('#start-one')");
+    expect(edge).toHaveAttribute('marker-end', "url('#end-one')");
+  });
+});

src/components/edge/edge.tsx

@@ -0,0 +1,23 @@
+import { BaseEdge } from '@xyflow/react';
+import { palette } from '@leafygreen-ui/palette';
+import { SVGAttributes } from 'react';
+
+interface Props extends SVGAttributes<SVGPathElement> {
+  selected?: boolean;
+  path: string;
+}
+
+const getMarker = (selected?: boolean, marker?: string) => {
+  return selected ? marker?.replace(/'\)/, "-selected')") : marker;
+};
+
+export const Edge = ({ markerStart, markerEnd, selected, ...rest }: Props) => {
+  return (
+    <BaseEdge
+      markerEnd={getMarker(selected, markerEnd)}
+      markerStart={getMarker(selected, markerStart)}
+      style={{ stroke: selected ? palette.blue.base : palette.gray.base }}
+      {...rest}
+    />
+  );
+};

src/components/edge/floating-edge.tsx

@@ -1,16 +1,11 @@
-import { EdgeProps, getSmoothStepPath, useNodes, BaseEdge } from '@xyflow/react';
+import { EdgeProps, getSmoothStepPath, useNodes } from '@xyflow/react';
 import { useMemo } from 'react';
-import styled from '@emotion/styled';
-import { palette } from '@leafygreen-ui/palette';
 
 import { getEdgeParams } from '@/utilities/get-edge-params';
 import { InternalNode } from '@/types/internal';
+import { Edge } from '@/components/edge/edge';
 
-const Edge = styled(BaseEdge)`
-  stroke: ${palette.gray.base};
-`;
-
-export const FloatingEdge = ({ id, source, target, markerEnd, markerStart }: EdgeProps) => {
+export const FloatingEdge = ({ id, source, target, markerEnd, markerStart, selected }: EdgeProps) => {
   const nodes = useNodes<InternalNode>();
 
   const { sourceNode, targetNode } = useMemo(() => {
@@ -33,6 +28,13 @@ export const FloatingEdge = ({ id, source, target, markerEnd, markerStart }: Edg
   });
 
   return (
-    <Edge data-testid={`floating-edge-${id}`} markerEnd={markerEnd} markerStart={markerStart} path={path} id={id} />
+    <Edge
+      data-testid={`floating-edge-${id}`}
+      markerEnd={markerEnd}
+      markerStart={markerStart}
+      path={path}
+      id={id}
+      selected={selected}
+    />
   );
 };

src/components/edge/self-referencing-edge.tsx

@@ -1,17 +1,12 @@
-import { BaseEdge, EdgeProps, useNodes } from '@xyflow/react';
+import { EdgeProps, useNodes } from '@xyflow/react';
 import { useMemo } from 'react';
 import { path } from 'd3-path';
-import styled from '@emotion/styled';
-import { palette } from '@leafygreen-ui/palette';
 
 import { InternalNode } from '@/types/internal';
 import { DEFAULT_MARKER_SIZE } from '@/utilities/constants';
+import { Edge } from '@/components/edge/edge';
 
-const Edge = styled(BaseEdge)`
-  stroke: ${palette.gray.base};
-`;
-
-export const SelfReferencingEdge = ({ id, source, markerEnd, markerStart }: EdgeProps) => {
+export const SelfReferencingEdge = ({ id, source, markerEnd, markerStart, selected }: EdgeProps) => {
   const nodes = useNodes<InternalNode>();
 
   const { sourceNode } = useMemo(() => {
@@ -58,6 +53,7 @@ export const SelfReferencingEdge = ({ id, source, markerEnd, markerStart }: Edge
       markerEnd={markerEnd}
       markerStart={markerStart}
       path={context.toString()}
+      selected={selected}
       id={id}
     />
   );

src/components/markers/marker-list.tsx

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { palette } from '@leafygreen-ui/palette';
 
 import { Marker } from '@/components/markers/marker';
 import MarkerOneOrMany from '@/assets/markers/marker-one-or-many.svg?react';
@@ -14,34 +15,64 @@ const markerList: Record<string, MarkerProps> = {
     component: <MarkerOneOrMany />,
     orient: 'auto-start-reverse',
   },
+  'start-oneOrMany-selected': {
+    component: <MarkerOneOrMany />,
+    orient: 'auto-start-reverse',
+    fill: palette.blue.base,
+  },
   'end-oneOrMany': {
     component: <MarkerOneOrMany />,
     orient: 'auto',
   },
+  'end-oneOrMany-selected': {
+    component: <MarkerOneOrMany />,
+    orient: 'auto',
+    fill: palette.blue.base,
+  },
   'start-one': {
     component: <MarkerOne />,
     orient: 'auto-start-reverse',
   },
+  'start-one-selected': {
+    component: <MarkerOne />,
+    orient: 'auto-start-reverse',
+    fill: palette.blue.base,
+  },
   'end-one': {
     component: <MarkerOne />,
     orient: 'auto',
   },
+  'end-one-selected': {
+    component: <MarkerOne />,
+    orient: 'auto',
+    fill: palette.blue.base,
+  },
   'start-many': {
     component: <MarkerMany />,
     orient: 'auto-start-reverse',
   },
+  'start-many-selected': {
+    component: <MarkerMany />,
+    orient: 'auto-start-reverse',
+    fill: palette.blue.base,
+  },
   'end-many': {
     component: <MarkerMany />,
     orient: 'auto',
   },
+  'end-many-selected': {
+    component: <MarkerMany />,
+    orient: 'auto',
+    fill: palette.blue.base,
+  },
 };
 
 export const MarkerList = () => {
   return (
     <svg>
       <defs>
-        {Object.entries(markerList).map(([id, { component, orient }]) => (
-          <Marker key={id} data-testid={id} orient={orient} id={id}>
+        {Object.entries(markerList).map(([id, { component, ...rest }]) => (
+          <Marker key={id} data-testid={id} id={id} {...rest}>
             {component}
           </Marker>
         ))}

src/components/markers/marker.tsx

@@ -9,11 +9,11 @@ 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}
+      fill={palette.gray.base}
       {...rest}
     >
       {children}

src/components/node/node.tsx

@@ -80,7 +80,7 @@ const NodeHandle = styled(Handle)`
   visibility: hidden;
 `;
 
-export const Node = ({ type, data: { title, fields, borderVariant } }: NodeProps<InternalNode>) => {
+export const Node = ({ type, selected, data: { title, fields, borderVariant } }: NodeProps<InternalNode>) => {
   const theme = useTheme();
   const { zoom } = useViewport();
 
@@ -94,7 +94,7 @@ export const Node = ({ type, data: { title, fields, borderVariant } }: NodeProps
   const isContextualZoom = zoom < ZOOM_THRESHOLD;
 
   return (
-    <NodeBorder variant={borderVariant}>
+    <NodeBorder variant={selected ? 'selected' : borderVariant}>
       <NodeHandle id="source" position={Position.Right} type="source" />
       <NodeHandle id="source" position={Position.Left} type="target" />
       <NodeWrapper accent={getAccent()}>