From c5fb385857179593b153c9580387f3577b61ddbd Mon Sep 17 00:00:00 2001
From: Pierre Poupin <pierrep@bam.tech>
Date: Fri, 4 Nov 2022 20:16:32 +0100
Subject: [PATCH] feature: add arrows on top property

---
 README.md                                    |  1 +
 src/ArcherContainer/ArcherContainer.tsx      | 23 +++++++++++++-------
 src/ArcherContainer/ArcherContainer.types.ts |  5 +++++
 3 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index e94a506..fd4c6b4 100644
--- 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
index b5da4b3..d8b4419 100644
--- 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
index 93d6e81..0d512c9 100644
--- 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;
 };