feature: add arrows on top property

pierpo · Nov 4, 2022 · c5fb385 · c5fb385
1 parent c7bc50a
commit c5fb385
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -103,6 +103,7 @@ export default App;
 | `endShape` | `Object` | An object containing the props to configure the "end shape" of the arrow. Can be one of `arrow` (default) or `circle`. See [`ShapeType`](flow-typed/archer-types.js) for a complete list of available options.
 | `startMarker` | `boolean` | Optional flag (default `false`) to also add a marker at the start of the arrow.
 | `endMarker` | `boolean` | Optional flag (default `true`) to remove the marker at the end of the arrow.
+| `isSvgOnTop` | `boolean` | Optional flag (default `false`) to make the svg container drawn on top.
 
 #### Instance methods
 

diff --git a/src/ArcherContainer/ArcherContainer.tsx b/src/ArcherContainer/ArcherContainer.tsx
@@ -37,6 +37,7 @@ const ArcherContainer = React.forwardRef<ArcherContainerHandle, ArcherContainerP
       startMarker,
       strokeDasharray,
       style,
+      isSvgOnTop = false,
     }: ArcherContainerProps,
     archerContainerRef,
   ) => {
@@ -139,9 +140,22 @@ const ArcherContainer = React.forwardRef<ArcherContainerHandle, ArcherContainerP
       [_registerTransitions, _unregisterTransitions, _registerChild, _unregisterChild],
     );
 
+    const content = (
+      <div
+        style={{
+          height: '100%',
+        }}
+        ref={parent}
+      >
+        {newChildren}
+      </div>
+    );
+
     return (
       <ArcherContainerContextProvider value={contextValue}>
         <div style={{ ...style, position: 'relative' }} className={className}>
+          {isSvgOnTop && content}
+
           <svg style={_svgContainerStyle}>
             <defs>
               <ArrowMarkers
@@ -168,14 +182,7 @@ const ArcherContainer = React.forwardRef<ArcherContainerHandle, ArcherContainerP
             />
           </svg>
 
-          <div
-            style={{
-              height: '100%',
-            }}
-            ref={parent}
-          >
-            {newChildren}
-          </div>
+          {!isSvgOnTop && content}
         </div>
       </ArcherContainerContextProvider>
     );

diff --git a/src/ArcherContainer/ArcherContainer.types.ts b/src/ArcherContainer/ArcherContainer.types.ts
@@ -62,6 +62,11 @@ export type ArcherContainerProps = {
    */
   noCurves?: boolean;
 
+  /**
+   * Set this to true if you want to draw the SVG arrows above your elements
+   */
+  isSvgOnTop?: boolean;
+
   children?: React.ReactNode | FunctionChild;
 };