Merge branch 'dev' of https://github.com/artf/grapesjs into dev

ryandeba · Mar 8, 2018 · 799e4e0 · 799e4e0
2 parents c773085 + 1e3dc71
commit 799e4e0
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 57 deletions.
diff --git a/src/canvas/index.js b/src/canvas/index.js
@@ -245,40 +245,44 @@ module.exports = () => {
     getTargetToElementDim(target, element, options) {
       var opts = options || {};
       var canvasPos = CanvasView.getPosition();
-      var pos = opts.elPos || CanvasView.getElementPos(element);
-      var toRight = options.toRight || 0;
-      var targetHeight = opts.targetHeight || target.offsetHeight;
-      var targetWidth = opts.targetWidth || target.offsetWidth;
-      var eventToTrigger = opts.event || null;
-
-      var elTop = pos.top - targetHeight;
-      var elLeft = pos.left;
-      elLeft += toRight ? pos.width : 0;
-      elLeft = toRight ? elLeft - targetWidth : elLeft;
-
-      var leftPos = elLeft < canvasPos.left ? canvasPos.left : elLeft;
-      var topPos = elTop < canvasPos.top ? canvasPos.top : elTop;
-      topPos = topPos > pos.top + pos.height ? pos.top + pos.height : topPos;
-
-      var result = {
-        top: topPos,
-        left: leftPos,
-        elementTop: pos.top,
-        elementLeft: pos.left,
-        elementWidth: pos.width,
-        elementHeight: pos.height,
-        targetWidth: target.offsetWidth,
-        targetHeight: target.offsetHeight,
-        canvasTop: canvasPos.top,
-        canvasLeft: canvasPos.left
-      };
+      if (canvasPos) {
+        var pos = opts.elPos || CanvasView.getElementPos(element);
+        var toRight = options.toRight || 0;
+        var targetHeight = opts.targetHeight || target.offsetHeight;
+        var targetWidth = opts.targetWidth || target.offsetWidth;
+        var eventToTrigger = opts.event || null;
+
+        var elTop = pos.top - targetHeight;
+        var elLeft = pos.left;
+        elLeft += toRight ? pos.width : 0;
+        elLeft = toRight ? elLeft - targetWidth : elLeft;
+
+        var leftPos = elLeft < canvasPos.left ? canvasPos.left : elLeft;
+        var topPos = elTop < canvasPos.top ? canvasPos.top : elTop;
+        topPos = topPos > pos.top + pos.height ? pos.top + pos.height : topPos;
+
+        var result = {
+          top: topPos,
+          left: leftPos,
+          elementTop: pos.top,
+          elementLeft: pos.left,
+          elementWidth: pos.width,
+          elementHeight: pos.height,
+          targetWidth: target.offsetWidth,
+          targetHeight: target.offsetHeight,
+          canvasTop: canvasPos.top,
+          canvasLeft: canvasPos.left
+        };
+
+        // In this way I can catch data and also change the position strategy
+        if (eventToTrigger && c.em) {
+          c.em.trigger(eventToTrigger, result);
+        }
 
-      // In this way I can catch data and also change the position strategy
-      if (eventToTrigger && c.em) {
-        c.em.trigger(eventToTrigger, result);
+        return result;
       }
 
-      return result;
+      return null;
     },
 
     /**

diff --git a/src/canvas/view/CanvasView.js b/src/canvas/view/CanvasView.js
@@ -308,13 +308,17 @@ module.exports = Backbone.View.extend({
    * @private
    */
   getPosition() {
-    var bEl = this.frame.el.contentDocument.body;
-    var fo = this.getFrameOffset();
-    var co = this.getCanvasOffset();
-    return {
-      top: fo.top + bEl.scrollTop - co.top,
-      left: fo.left + bEl.scrollLeft - co.left
-    };
+    if (this.frame.el.contentDocument) {
+      var bEl = this.frame.el.contentDocument.body;
+      var fo = this.getFrameOffset();
+      var co = this.getCanvasOffset();
+      return {
+        top: fo.top + bEl.scrollTop - co.top,
+        left: fo.left + bEl.scrollLeft - co.left
+      };
+    }
+
+    return null;
   },
 
   /**

diff --git a/src/commands/view/SelectComponent.js b/src/commands/view/SelectComponent.js
@@ -222,13 +222,15 @@ module.exports = {
     var u = 'px';
     bStyle.display = 'block';
     var canvasPos = canvas.getCanvasView().getPosition();
-    var badgeH = badge ? badge.offsetHeight : 0;
-    var badgeW = badge ? badge.offsetWidth : 0;
-    var top =
-      pos.top - badgeH < canvasPos.top ? canvasPos.top : pos.top - badgeH;
-    var left = pos.left + badgeW < canvasPos.left ? canvasPos.left : pos.left;
-    bStyle.top = top + u;
-    bStyle.left = left + u;
+    if (canvasPos) {
+      var badgeH = badge ? badge.offsetHeight : 0;
+      var badgeW = badge ? badge.offsetWidth : 0;
+      var top =
+        pos.top - badgeH < canvasPos.top ? canvasPos.top : pos.top - badgeH;
+      var left = pos.left + badgeW < canvasPos.left ? canvasPos.left : pos.left;
+      bStyle.top = top + u;
+      bStyle.left = left + u;
+    }
   },
 
   /**
@@ -446,10 +448,12 @@ module.exports = {
       elPos,
       event: 'toolbarPosUpdate'
     });
-    var leftPos = pos.left + pos.elementWidth - pos.targetWidth;
-    toolbarStyle.top = pos.top + unit;
-    toolbarStyle.left = (leftPos < 0 ? 0 : leftPos) + unit;
-    toolbarStyle.display = origDisp;
+    if (pos) {
+      var leftPos = pos.left + pos.elementWidth - pos.targetWidth;
+      toolbarStyle.top = pos.top + unit;
+      toolbarStyle.left = (leftPos < 0 ? 0 : leftPos) + unit;
+      toolbarStyle.display = origDisp;
+    }
   },
 
   /**

diff --git a/src/rich_text_editor/index.js b/src/rich_text_editor/index.js
@@ -225,16 +225,18 @@ module.exports = () => {
         event: 'rteToolbarPosUpdate'
       });
 
-      if (config.adjustToolbar) {
-        // Move the toolbar down when the top canvas edge is reached
-        if (pos.top <= pos.canvasTop) {
-          pos.top = pos.elementTop + pos.elementHeight;
+      if (pos) {
+        if (config.adjustToolbar) {
+          // Move the toolbar down when the top canvas edge is reached
+          if (pos.top <= pos.canvasTop) {
+            pos.top = pos.elementTop + pos.elementHeight;
+          }
         }
-      }
 
-      const toolbarStyle = toolbar.style;
-      toolbarStyle.top = pos.top + un;
-      toolbarStyle.left = pos.left + un;
+        const toolbarStyle = toolbar.style;
+        toolbarStyle.top = pos.top + un;
+        toolbarStyle.left = pos.left + un;
+      }
     },
 
     /**