diff --git a/src/canvas/index.js b/src/canvas/index.js index 9f28202d5..87f08ca45 100644 --- 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 index b8270a9c7..69ab1bb48 100644 --- 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 index f59e36f26..8385cff30 100644 --- 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 index d2bec1c8a..1449ad977 100644 --- 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; + } }, /**