Merge branch 'dev' into symbols-2

src/canvas/view/FrameWrapView.js

@@ -175,7 +175,7 @@ export default Backbone.View.extend({
       'div',
       {
         class: `${ppfx}tools`,
-        style: 'pointer-events:none; opacity: 0'
+        style: 'pointer-events:none; display: none'
       },
       `
       <div class="${ppfx}highlighter" data-hl></div>

src/commands/index.js

@@ -130,15 +130,16 @@ export default () => {
           const nativeDrag = event && event.type == 'dragstart';
           const defComOptions = { preserveSelected: 1 };
           const modes = ['absolute', 'translate'];
-          const mode = sel.get('dmode') || em.get('dmode');
-          const hideTlb = () => em.stopDefault(defComOptions);
-          const altMode = includes(modes, mode);
-          selAll.forEach(sel => sel.trigger('disable'));
 
           if (!sel || !sel.get('draggable')) {
             return em.logWarning('The element is not draggable');
           }
 
+          const mode = sel.get('dmode') || em.get('dmode');
+          const hideTlb = () => em.stopDefault(defComOptions);
+          const altMode = includes(modes, mode);
+          selAll.forEach(sel => sel.trigger('disable'));
+
           // Without setTimeout the ghost image disappears
           nativeDrag ? setTimeout(hideTlb, 0) : hideTlb();
 

src/commands/view/SelectComponent.js

@@ -224,7 +224,7 @@ export default {
 
   toggleToolsEl(on, view, opts = {}) {
     const el = opts.el || this.canvas.getToolsEl(view);
-    el && (el.style.opacity = on ? 1 : 0);
+    el && (el.style.display = on ? '' : 'none');
     return el || {};
   },
 
@@ -509,29 +509,19 @@ export default {
    * @param {Object} mod
    */
   updateToolbar(mod) {
-    var em = this.config.em;
-    var model = mod == em ? em.getSelected() : mod;
-    var toolbarEl = this.canvas.getToolbarEl();
-    var toolbarStyle = toolbarEl.style;
-
-    if (!model) {
-      // By putting `toolbarStyle.display = 'none'` will cause kind
-      // of freezed effect with component selection (probably by iframe
-      // switching)
-      toolbarStyle.opacity = 0;
-      return;
-    }
-
-    var toolbar = model.get('toolbar');
-    var showToolbar = em.get('Config').showToolbar;
-
-    if (showToolbar && toolbar && toolbar.length) {
-      toolbarStyle.opacity = '';
+    const { em } = this.config;
+    const model = mod == em ? em.getSelected() : mod;
+    const toolbarEl = this.canvas.getToolbarEl();
+    const toolbarStyle = toolbarEl.style;
+    const toolbar = model.get('toolbar');
+    const showToolbar = em.get('Config').showToolbar;
+
+    if (model && showToolbar && toolbar && toolbar.length) {
       toolbarStyle.display = '';
       if (!this.toolbar) {
         toolbarEl.innerHTML = '';
         this.toolbar = new Toolbar(toolbar);
-        var toolbarView = new ToolbarView({
+        const toolbarView = new ToolbarView({
           collection: this.toolbar,
           editor: this.editor,
           em

src/utils/Droppable.js

@@ -41,9 +41,7 @@ export default class Droppable {
   endDrop(cancel, ev) {
     const { em, dragStop } = this;
     this.counter = 0;
-    this.over = 0;
     dragStop && dragStop(cancel);
-    em.runDefault({ preserveSelected: 1 });
     em.trigger('canvas:dragend', ev);
   }
 
@@ -72,6 +70,7 @@ export default class Droppable {
     let dragStop, dragContent;
     em.stopDefault();
 
+    // Select the right drag provider
     if (em.inAbsoluteMode()) {
       const wrapper = em.get('DomComponents').getWrapper();
       const target = wrapper.append({})[0];
@@ -81,12 +80,13 @@ export default class Droppable {
         center: 1,
         target,
         onEnd: (ev, dragger, { cancelled }) => {
+          let comp;
           if (!cancelled) {
-            const comp = wrapper.append(content)[0];
+            comp = wrapper.append(content)[0];
             const { left, top, position } = target.getStyle();
             comp.addStyle({ left, top, position });
-            this.handleDragEnd(comp, dt);
           }
+          this.handleDragEnd(comp, dt);
           target.remove();
         }
       });
@@ -123,10 +123,13 @@ export default class Droppable {
   }
 
   handleDragEnd(model, dt) {
-    if (!model) return;
     const { em } = this;
-    em.set('dragResult', model);
-    em.trigger('canvas:drop', dt, model);
+    this.over = 0;
+    if (model) {
+      em.set('dragResult', model);
+      em.trigger('canvas:drop', dt, model);
+    }
+    em.runDefault({ preserveSelected: 1 });
   }
 
   /**
@@ -138,6 +141,10 @@ export default class Droppable {
     this.em.trigger('canvas:dragover', ev);
   }
 
+  /**
+   * WARNING: This function might fail to run on drop, for example, when the
+   * drop, accidentally, happens on some external element (DOM not inside the iframe)
+   */
   handleDrop(ev) {
     ev.preventDefault();
     const { dragContent } = this;