From ac8ec7a08e1771d0712589df7fa9a59b967e8815 Mon Sep 17 00:00:00 2001
From: Rainer Simon <aboutgeo@gmail.com>
Date: Sun, 5 Sep 2021 08:10:27 +0200
Subject: [PATCH] Made Editor autoposition optional

---
 src/editor/Editor.jsx     | 16 ++++----
 src/editor/setPosition.js | 78 ++++++++++++++++++++-------------------
 2 files changed, 47 insertions(+), 47 deletions(-)

diff --git a/src/editor/Editor.jsx b/src/editor/Editor.jsx
index 9395d93..d01d8b3 100644
--- a/src/editor/Editor.jsx
+++ b/src/editor/Editor.jsx
@@ -62,13 +62,7 @@ export default class Editor extends Component {
   }
 
   componentDidMount() {
-    // Defaults to true
-    const autoPosition = 
-      this.props.autoPosition === undefined ? true : this.props.autoPosition;
-
-    // Init observer (triggers setPosition once)
-    if (autoPosition)
-      this.removeObserver = this.initResizeObserver();
+    this.removeObserver = this.initResizeObserver();
   }
 
   componentWillUnmount() {
@@ -77,10 +71,14 @@ export default class Editor extends Component {
   }
 
   initResizeObserver = () => {
+    // Defaults to true
+    const autoPosition =
+      this.props.editorAutoPosition === undefined ? true : this.props.editorAutoPosition;
+  
     if (window?.ResizeObserver) {
       const resizeObserver = new ResizeObserver(() => {
         if (!this.state.dragged)
-          setPosition(this.props.wrapperEl, this.element.current, this.props.selectedElement);
+          setPosition(this.props.wrapperEl, this.element.current, this.props.selectedElement, autoPosition);
       });
 
       resizeObserver.observe(this.props.wrapperEl);
@@ -88,7 +86,7 @@ export default class Editor extends Component {
     } else {
       // Fire setPosition manually *only* for devices that don't support ResizeObserver
       if (!this.state.dragged)
-        setPosition(this.props.wrapperEl, this.element.current, this.props.selectedElement);
+        setPosition(this.props.wrapperEl, this.element.current, this.props.selectedElement, autoPosition);
     }  
   }
 
diff --git a/src/editor/setPosition.js b/src/editor/setPosition.js
index 8e98902..ebaee46 100644
--- a/src/editor/setPosition.js
+++ b/src/editor/setPosition.js
@@ -1,5 +1,5 @@
 /** Sets the editor position and determines a proper orientation **/
-const setPosition = (wrapperEl, editorEl, selectedEl) => {
+const setPosition = (wrapperEl, editorEl, selectedEl, autoPosition) => {
   // Container element bounds
   const containerBounds = wrapperEl.getBoundingClientRect();
 
@@ -14,45 +14,47 @@ const setPosition = (wrapperEl, editorEl, selectedEl) => {
   editorEl.style.top = `${top + height - containerBounds.top}px`;
   editorEl.style.left = `${left - containerBounds.left}px`;
 
-  const defaultOrientation = editorEl.children[1].getBoundingClientRect();
+  if (autoPosition) {
+    const defaultOrientation = editorEl.children[1].getBoundingClientRect();
 
-  // Test 1: does right edge extend beyond the width of the page?
-  // If so, flip horizontally
-  if (defaultOrientation.right > window.innerWidth) {
-    editorEl.classList.add('align-right');
-    editorEl.style.left = `${right - defaultOrientation.width - containerBounds.left}px`;
+    // Test 1: does right edge extend beyond the width of the page?
+    // If so, flip horizontally
+    if (defaultOrientation.right > window.innerWidth) {
+      editorEl.classList.add('align-right');
+      editorEl.style.left = `${right - defaultOrientation.width - containerBounds.left}px`;
+    }
+
+    // Test 2: does the bottom edge extend beyond the height of the page?
+    // If so, flip vertically
+    if (defaultOrientation.bottom > window.innerHeight) {
+      editorEl.classList.add('align-bottom');
+      
+      const editorHeight = editorEl.children[1].getBoundingClientRect().height;
+      editorEl.style.top = `${top - containerBounds.top - editorHeight}px`;
+    }
+
+    // Get bounding box in current orientation for next tests
+    const currentOrientation = editorEl.children[1].getBoundingClientRect();
+
+    // Test 3: does the top (still?) extend beyond top of the page?
+    // If so, push it down
+    if (currentOrientation.top < 0) {
+      editorEl.classList.add('pushed-down');
+
+      editorEl.style.top = `${-containerBounds.top}px`;
+
+      const shapeBottom = bottom - containerBounds.top;
+      const editorBottom = currentOrientation.height - containerBounds.top;
+
+      if (editorBottom > shapeBottom)
+        editorEl.classList.remove('align-bottom');
+    }
+
+    // Test 4: does the left edge extend beyond the start of the page?
+    // If so, push inward
+    if (currentOrientation.left < 0)
+      editorEl.style.left = `${-containerBounds.left}px`;
   }
-
-  // Test 2: does the bottom edge extend beyond the height of the page?
-  // If so, flip vertically
-  if (defaultOrientation.bottom > window.innerHeight) {
-    editorEl.classList.add('align-bottom');
-    
-    const editorHeight = editorEl.children[1].getBoundingClientRect().height;
-    editorEl.style.top = `${top - containerBounds.top - editorHeight}px`;
-  }
-
-  // Get bounding box in current orientation for next tests
-  const currentOrientation = editorEl.children[1].getBoundingClientRect();
-
-  // Test 3: does the top (still?) extend beyond top of the page?
-  // If so, push it down
-  if (currentOrientation.top < 0) {
-    editorEl.classList.add('pushed-down');
-
-    editorEl.style.top = `${-containerBounds.top}px`;
-
-    const shapeBottom = bottom - containerBounds.top;
-    const editorBottom = currentOrientation.height - containerBounds.top;
-
-    if (editorBottom > shapeBottom)
-      editorEl.classList.remove('align-bottom');
-  }
-
-  // Test 4: does the left edge extend beyond the start of the page?
-  // If so, push inward
-  if (currentOrientation.left < 0)
-    editorEl.style.left = `${-containerBounds.left}px`;
 }
 
 export default setPosition;