diff --git a/src/commands/view/SelectComponent.js b/src/commands/view/SelectComponent.js index d08e24ce9..4bdd0c223 100644 --- a/src/commands/view/SelectComponent.js +++ b/src/commands/view/SelectComponent.js @@ -527,15 +527,29 @@ module.exports = { * @param {Object} pos */ updateToolbarPos(el, elPos) { - var unit = 'px'; - var toolbarEl = this.canvas.getToolbarEl(); - var toolbarStyle = toolbarEl.style; + const frameOffset = this.canvas.getCanvasView().getFrameOffset(); + const unit = 'px'; + const toolbarEl = this.canvas.getToolbarEl(); + const toolbarStyle = toolbarEl.style; toolbarStyle.opacity = 0; - var pos = this.canvas.getTargetToElementDim(toolbarEl, el, { + const pos = this.canvas.getTargetToElementDim(toolbarEl, el, { elPos, event: 'toolbarPosUpdate' }); + if (pos) { + const isElementBiggerThanCanvas = + pos.elementHeight + pos.targetHeight >= frameOffset.height; + + if (pos.top <= pos.canvasTop && !isElementBiggerThanCanvas) { + pos.top = pos.elementTop + pos.elementHeight; + } + + // Check if not outside of the canvas + if (pos.left < pos.canvasLeft) { + pos.left = pos.canvasLeft; + } + var leftPos = pos.left + pos.elementWidth - pos.targetWidth; toolbarStyle.top = pos.top + unit; toolbarStyle.left = (leftPos < 0 ? 0 : leftPos) + unit;