From 75b539c9cc345a6eaa3264c66c9666cafc13a9e5 Mon Sep 17 00:00:00 2001
From: mitchellwarr <mitchellwarr@gmail.com>
Date: Wed, 1 Apr 2020 13:41:17 +1300
Subject: [PATCH 1/2] Shift svg to draw on top

Moving the svg to be after the contents means that the svg will always be drawn on top. However it also requires a style of "pointer-events: 'none'" or else it will get in the way of interact-ability
---
 src/ArcherContainer.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/ArcherContainer.js b/src/ArcherContainer.js
index ffa8c28..0a7d146 100644
--- a/src/ArcherContainer.js
+++ b/src/ArcherContainer.js
@@ -42,6 +42,7 @@ const defaultSvgContainerStyle = {
   height: '100%',
   top: 0,
   left: 0,
+  pointerEvents: 'none'
 };
 
 function rectToPoint(rect: ClientRect) {
@@ -327,14 +328,14 @@ export class ArcherContainer extends React.Component<Props, State> {
         }}
       >
         <div style={{ ...this.props.style, position: 'relative' }} className={this.props.className}>
+          <div style={{ height: '100%' }} ref={this.storeParent}>
+            {this.props.children}
+          </div>
+      
           <svg style={this.svgContainerStyle()}>
             <defs>{this.generateAllArrowMarkers()}</defs>
             {SvgArrows}
           </svg>
-
-          <div style={{ height: '100%' }} ref={this.storeParent}>
-            {this.props.children}
-          </div>
         </div>
       </ArcherContainerContextProvider>
     );

From e3fcb8528fb9f9edfc1b50b998f7c39a1c4afc1a Mon Sep 17 00:00:00 2001
From: mitchellwarr <mitchellwarr@gmail.com>
Date: Wed, 1 Apr 2020 13:44:58 +1300
Subject: [PATCH 2/2] Fix prettier

---
 src/ArcherContainer.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ArcherContainer.js b/src/ArcherContainer.js
index 0a7d146..3c9e96f 100644
--- a/src/ArcherContainer.js
+++ b/src/ArcherContainer.js
@@ -42,7 +42,7 @@ const defaultSvgContainerStyle = {
   height: '100%',
   top: 0,
   left: 0,
-  pointerEvents: 'none'
+  pointerEvents: 'none',
 };
 
 function rectToPoint(rect: ClientRect) {
@@ -331,7 +331,7 @@ export class ArcherContainer extends React.Component<Props, State> {
           <div style={{ height: '100%' }} ref={this.storeParent}>
             {this.props.children}
           </div>
-      
+
           <svg style={this.svgContainerStyle()}>
             <defs>{this.generateAllArrowMarkers()}</defs>
             {SvgArrows}