From 60b12ec75a9da2e54bfa704090e6c0e76e50406f Mon Sep 17 00:00:00 2001
From: Rainer Simon <aboutgeo@gmail.com>
Date: Sat, 9 Oct 2021 10:13:46 +0200
Subject: [PATCH] Minor tweaks to setPosition behavior + drag cursor on
 draggable editor surfaces

---
 src/editor/Editor.jsx              |  5 ++---
 src/editor/setPosition.js          |  7 ++++---
 src/utils/index.js                 | 13 -------------
 themes/default/editor/_editor.scss | 14 +++++++++++---
 4 files changed, 17 insertions(+), 22 deletions(-)

diff --git a/src/editor/Editor.jsx b/src/editor/Editor.jsx
index 9c92edd..711d8e1 100644
--- a/src/editor/Editor.jsx
+++ b/src/editor/Editor.jsx
@@ -4,7 +4,6 @@ import { getWidget, DEFAULT_WIDGETS } from './widgets';
 import { TrashIcon } from '../Icons';
 import setPosition from './setPosition';
 import i18n from '../i18n';
-import { debounce } from '../utils';
 
 /** We need to compare bounds by value, not by object ref **/
 const bounds = elem => {
@@ -66,12 +65,12 @@ export default class Editor extends Component {
     this.removeObserver = this.initResizeObserver();
 
     // This makes sure the editor is repositioned if the widgets change
-    const observer = new MutationObserver(debounce(() => {
+    const observer = new MutationObserver(() => {
       if (this.element.current) {
         this.removeObserver && this.removeObserver();
         this.removeObserver = this.initResizeObserver();
       }
-    }));
+    });
 
     observer.observe(this.element.current, { childList: true, subtree: true });
   }
diff --git a/src/editor/setPosition.js b/src/editor/setPosition.js
index 21a3261..a0d4a55 100644
--- a/src/editor/setPosition.js
+++ b/src/editor/setPosition.js
@@ -6,9 +6,6 @@ const setPosition = (wrapperEl, editorEl, selectedEl, autoPosition) => {
   // Re-set orientation class
   editorEl.className = 'r6o-editor r6o-arrow-top r6o-arrow-left';
 
-  // Make visible
-  editorEl.style.opacity = 1;
-
   // Default orientation (upwards arrow, at bottom-left of shape)
   const { left, top, right, bottom } = selectedEl.getBoundingClientRect();
   editorEl.style.top = `${bottom - containerBounds.top}px`;
@@ -58,6 +55,10 @@ const setPosition = (wrapperEl, editorEl, selectedEl, autoPosition) => {
       editorEl.classList.add('pushed', 'right');
       editorEl.style.left = `${-containerBounds.left}px`;
     }
+
+    // Make visible
+    requestAnimationFrame(() =>
+      editorEl.style.opacity = 1);
   }
 }
 
diff --git a/src/utils/index.js b/src/utils/index.js
index f8ca6c6..22772a8 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -17,16 +17,3 @@ export const setLocale = (locale, opt_messages) => {
     I18n.init(null, opt_messages);
   }
 }
-
-/** See https://www.freecodecamp.org/news/javascript-debounce-example/ **/
-export const debounce = (fn, timeout = 10) => {
-  let timer;
-
-  return (...args) => {
-    clearTimeout(timer);
-    timer = setTimeout(() => { fn.apply(this, args); }, timeout);
-  };
-
-}
-
-export default debounce;
diff --git a/themes/default/editor/_editor.scss b/themes/default/editor/_editor.scss
index 976cf73..6cdc643 100644
--- a/themes/default/editor/_editor.scss
+++ b/themes/default/editor/_editor.scss
@@ -15,9 +15,9 @@
   font-size:17px;
   line-height:27px;
 
-  -webkit-transition:opacity 0.1s ease-in-out;
-     -moz-transition:opacity 0.1s ease-in-out;
-          transition:opacity 0.1s ease-in-out;
+  -webkit-transition:opacity 0.2s ease-in;
+     -moz-transition:opacity 0.2s ease-in;
+          transition:opacity 0.2s ease-in;
 
   .r6o-arrow {
     position:absolute;
@@ -131,6 +131,14 @@
   margin-top:4px;
 }
 
+.r6o-editor .r6o-nodrag * {
+  cursor:default !important;
+}
+
+.r6o-editor *:not(.r6o-nodrag, .r6o-btn, input, textarea) {
+  cursor:move;
+}
+
 .r6o-purposedropdown {
   width: 150px;
   display: inline-block;