Merge pull request #1730 from arthuralmeidap/issue-toolbar-position C…

…loses #1728 #1434

Fixed display for the component's toolbar to not cover component's content

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;