Minor tweaks to setPosition behavior + drag cursor on draggable editor surfaces

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 });
   }

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);
   }
 }
 

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;

themes/default/editor/_editor.scss

@@ -15,9 +15,9 @@
   font-size:17px;
   line-height:27px;
 
-  -webkit-transition:opacity 0.1s ease-in-out;
+  -webkit-transition:opacity 0.2s ease-in;
-     -moz-transition:opacity 0.1s ease-in-out;
+     -moz-transition:opacity 0.2s ease-in;
-          transition:opacity 0.1s ease-in-out;
+          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;