Merge pull request #194 from mikedidomizio/animation

Add ability to add className prop to SVGArrow
pierpo · Jul 4, 2023 · e47e379 · e47e379
2 parents 154a1e2 + 3c6a114
commit e47e379
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -127,6 +127,7 @@ The `Relation` type has the following shape:
   sourceAnchor: 'top' | 'bottom' | 'left' | 'right' | 'middle',
   label: React.Node,
   order?: number, // higher order means arrow will be drawn on top of the others
+  className?: string, // CSS class selectors on the SVG arrow
   style: ArcherStyle,
 }
 ```

diff --git a/src/ArcherContainer/__tests__/ArcherContainer.test.tsx b/src/ArcherContainer/__tests__/ArcherContainer.test.tsx
@@ -112,6 +112,30 @@ describe('ArcherContainer', () => {
       expect(screen.baseElement).toMatchSnapshot();
     });
 
+    it('should render an arrow with className', () => {
+      const screen = render(
+        <ArcherContainer startMarker>
+          <ArcherElement
+            id="elem-left"
+            relations={[
+              {
+                className: 'blink',
+                sourceAnchor: 'left',
+                targetAnchor: 'right',
+                targetId: 'elem-right',
+              },
+            ]}
+          >
+            <div>element 1</div>
+          </ArcherElement>
+          <ArcherElement id="elem-right">
+            <div>element 2</div>
+          </ArcherElement>
+        </ArcherContainer>,
+      );
+      expect(screen.baseElement).toMatchSnapshot();
+    });
+
     it('should render the arrows with labels', () => {
       const screen = render(
         <ArcherContainer startMarker endMarker={false}>

diff --git a/src/ArcherContainer/__tests__/__snapshots__/ArcherContainer.test.tsx.snap b/src/ArcherContainer/__tests__/__snapshots__/ArcherContainer.test.tsx.snap
@@ -1,5 +1,56 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`ArcherContainer rendering an svg with the marker element used to draw an svg arrow should render an arrow with className 1`] = `
+<body>
+  <div>
+    <div
+      style="position: relative;"
+    >
+      <svg
+        style="position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; pointer-events: none;"
+      >
+        <defs>
+          <marker
+            id="arrow00001elem-leftelem-right"
+            markerHeight="6"
+            markerUnits="strokeWidth"
+            markerWidth="10"
+            orient="auto-start-reverse"
+            refX="0"
+            refY="3"
+          >
+            <path
+              d="M0,0 L0,6 L10,3 z"
+              fill="#f00"
+            />
+          </marker>
+        </defs>
+        <g
+          class="blink"
+        >
+          <path
+            d="M-20,0 C0,0 0,0 20,0"
+            marker-end="url(#arrow00001elem-leftelem-right)"
+            marker-start="url(#arrow00001elem-leftelem-right)"
+            style="fill: none; stroke: #f00; stroke-width: 2;"
+          />
+        </g>
+      </svg>
+      <div
+        style="height: 100%;"
+      >
+        <div>
+          element 1
+        </div>
+        <div>
+          element 2
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
 exports[`ArcherContainer rendering an svg with the marker element used to draw an svg arrow should render no arrow if id is not found 1`] = `
 <body>
   <div>

diff --git a/src/ArcherContainer/components/SvgArrows.tsx b/src/ArcherContainer/components/SvgArrows.tsx
@@ -71,6 +71,7 @@ const AdaptedArrow = (
 
   return (
     <SvgArrow
+      className={props.className}
       startingPoint={startingPoint}
       startingAnchorOrientation={startingAnchorOrientation}
       endingPoint={endingPoint}
@@ -112,6 +113,7 @@ export const SvgArrows = (
           })}
           source={currentRelation.source}
           target={currentRelation.target}
+          className={currentRelation.className}
           label={currentRelation.label}
           style={currentRelation.style || {}}
           startMarker={props.startMarker}

diff --git a/src/ArcherElement/ArcherElement.helpers.ts b/src/ArcherElement/ArcherElement.helpers.ts
@@ -17,7 +17,15 @@ export const generateSourceToTarget = (
   relations: Array<RelationType>,
 ): Array<SourceToTargetType> => {
   return relations.map(
-    ({ targetId, sourceAnchor, targetAnchor, label, style, order = 0 }: RelationType) => ({
+    ({
+      targetId,
+      sourceAnchor,
+      targetAnchor,
+      label,
+      className,
+      style,
+      order = 0,
+    }: RelationType) => ({
       source: {
         id: encodeId(id),
         anchor: sourceAnchor,
@@ -26,6 +34,7 @@ export const generateSourceToTarget = (
         id: encodeId(targetId),
         anchor: targetAnchor,
       },
+      className,
       label,
       style,
       order,

diff --git a/src/SvgArrow/SvgArrow.tsx b/src/SvgArrow/SvgArrow.tsx
@@ -4,6 +4,7 @@ import { AnchorPositionType, ValidLineStyles } from '../types';
 import { computeArrowDirectionVector } from './SvgArrow.helper';
 
 type Props = {
+  className?: string;
   startingPoint: Vector2;
   startingAnchorOrientation: AnchorPositionType;
   endingPoint: Vector2;
@@ -182,6 +183,7 @@ function computePathString({
 }
 
 const SvgArrow = ({
+  className,
   startingPoint,
   startingAnchorOrientation,
   endingPoint,
@@ -266,7 +268,7 @@ const SvgArrow = ({
   const markerUrl = `url(#${arrowMarkerId})`;
 
   return (
-    <g>
+    <g className={className}>
       <path
         d={pathString}
         style={{

diff --git a/src/types.ts b/src/types.ts
@@ -8,6 +8,7 @@ export type RelationType = {
   sourceAnchor: AnchorPositionType;
   order?: number;
   label?: React.ReactNode | null | undefined;
+  className?: string;
   style?: LineType;
 };
 
@@ -17,6 +18,7 @@ export type EntityRelationType = {
 };
 
 export type SourceToTargetType = {
+  className?: string;
   source: EntityRelationType;
   target: EntityRelationType;
   order: number;