PB-108 add the ability to add column line to the bottom of a column group

Author: paras89

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/column-line/preview.js

@@ -16,4 +16,5 @@
          afterRender="function (element) { bindInteractions.call($data, element); }">
         <render args="{name: preview.template, data: preview}" />
     </div>
+    <div class="bottom-drop-placeholder" afterRender="function (element) { bindColumnLineBottomDropPlaceholder.call($data, element); }" style="background: rgba(142, 0, 6, 0.3); height:30px; display:none; z-index:26;" ></div>
 </div>

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/column-line/default/preview.html

@@ -80,6 +80,7 @@ export default class Preview extends PreviewCollection {
     private resizeGhost: JQuery;
     private resizeLeftLastColumnShrunk: ContentTypeCollectionInterface<ColumnPreview>;
     private resizeRightLastColumnShrunk: ContentTypeCollectionInterface<ColumnPreview>;
+    private columnLineBottomDropPlaceholder: JQuery;
 
 
 
@@ -173,6 +174,15 @@ export default class Preview extends PreviewCollection {
         this.dropPlaceholder = $(element);
     }
 
+    /**
+     * Init the drop placeholder
+     *
+     * @param {Element} element
+     */
+    public bindColumnLineBottomDropPlaceholder(element: Element) {
+        this.columnLineBottomDropPlaceholder = $(element);
+    }
+
     /**
      * Init the drop placeholder
      *
@@ -375,6 +385,8 @@ export default class Preview extends PreviewCollection {
                 this.dropPosition = null;
                 this.dropPlaceholder.removeClass("left right");
                 this.columnLineDropPlaceholder.removeClass("active");
+                this.columnLineBottomDropPlaceholder.removeClass("active");
+                this.columnLineBottomDropPlaceholder.hide();
                 this.columnLineDropPlaceholder.hide();
                 //@todo combine active and show/hide functionality for columnLineDropPlaceholder
               //  this.movePlaceholder.css("left", "").removeClass("active");
@@ -413,6 +425,8 @@ export default class Preview extends PreviewCollection {
         this.dropPosition = null;
         this.dropPlaceholder.removeClass("left right");
         this.columnLineDropPlaceholder.removeClass("active");
+        this.columnLineBottomDropPlaceholder.removeClass("active");
+        this.columnLineBottomDropPlaceholder.hide();
         this.columnLineDropPlaceholder.hide();
         this.resizing(false);
         this.resizeMouseDown = null;
@@ -438,14 +452,18 @@ export default class Preview extends PreviewCollection {
 
         let index = -1;
         let self = this;
-        if (this.columnLineDropPlaceholder.hasClass('active')) {
+        if (this.columnLineDropPlaceholder.hasClass('active') || this.columnLineBottomDropPlaceholder.hasClass("active")) {
 
             for (var child of this.contentType.parentContentType.children()) {
                 index++;
                 if (child.id == self.contentType.id) {
                     break;
                 }
             }
+            if (this.columnLineBottomDropPlaceholder.hasClass("active")) {
+                //show the bottom drop placeholder
+                index++;
+            }
             createColumnLine(
                 this.contentType.parentContentType,
                 this.resizeUtils.getSmallestColumnWidth(),
@@ -680,11 +698,37 @@ export default class Preview extends PreviewCollection {
      */
     private isNewLinePlaceDropPlaceholderVisible(event: JQueryEventObject, linePosition: LinePositionCache): boolean {
 
-        return this.dropOverElement &&
+        const siblings = this.contentType.parentContentType.children();
+        const id = this.contentType.id;
+        let index = 0;
+        siblings.forEach(columnLine => {
+            if (columnLine.id == id){
+                return false;
+            }
+            index++;
+        });
+        //show column line drop placeholder only for top column line in a group
+
+        return index === 0 && this.dropOverElement &&
             event.pageY > linePosition.top &&
             event.pageY < linePosition.top + this.lineDropperHeight
     }
 
+
+    /**
+     *
+     * @param event
+     * @param linePosition
+     * @private
+     */
+    private isNewLineBottomPlaceDropPlaceholderVisible(event: JQueryEventObject, linePosition: LinePositionCache): boolean {
+
+        return this.dropOverElement &&
+             (event.pageY < linePosition.top + this.element.outerHeight() &&
+                event.pageY > linePosition.top + this.element.outerHeight() - this.lineDropperHeight )
+
+    }
+
     /**
      *
      * @param event
@@ -693,9 +737,9 @@ export default class Preview extends PreviewCollection {
      */
     private isNewColumnDropPlaceholderVisible(event: JQueryEventObject, linePosition: LinePositionCache): boolean {
 
-         return this.dropOverElement &&
-        event.pageY > linePosition.top + 50 &&
-        event.pageY < linePosition.top + linePosition.outerHeight
+        return this.dropOverElement &&
+        event.pageY > linePosition.top + this.lineDropperHeight &&
+        event.pageY < linePosition.top + linePosition.outerHeight - this.lineDropperHeight;
     }
     /**
      * Handle mouse move events on when dropping elements
@@ -711,15 +755,27 @@ export default class Preview extends PreviewCollection {
             this.dropPosition = null;
             this.dropPlaceholder.removeClass("left right");
             this.columnLineDropPlaceholder.addClass("active");
+            this.columnLineDropPlaceholder.show();
             return this.handleLineDropMouseMove(event, line, linePosition);
-        } else if(this.dropOverElement) {
+        } else if (this.isNewLineBottomPlaceDropPlaceholderVisible(event, linePosition)) {
+            this.dropPosition = null;
+            this.dropPlaceholder.removeClass("left right");
+            this.columnLineBottomDropPlaceholder.addClass("active");
+            this.columnLineBottomDropPlaceholder.show();
+            return this.handleLineDropMouseMove(event, line, linePosition);
+        }
+        else if(this.dropOverElement) {
             this.columnLineDropPlaceholder.hide();
+            this.columnLineBottomDropPlaceholder.hide();
+            this.columnLineBottomDropPlaceholder.removeClass("active");
             this.columnLineDropPlaceholder.removeClass("active");
 
         }
         if (this.isNewColumnDropPlaceholderVisible(event, linePosition)) {
             this.columnLineDropPlaceholder.hide();
             this.columnLineDropPlaceholder.removeClass("active");
+            this.columnLineBottomDropPlaceholder.hide();
+            this.columnLineBottomDropPlaceholder.removeClass("active");
             return this.handleColumnDropMouseMove(event, line, linePosition);
         }
     }
@@ -739,8 +795,6 @@ export default class Preview extends PreviewCollection {
         if (elementChildrenParent.data("ui-sortable")) {
             elementChildrenParent.sortable("option", "disabled", true);
         }
-
-        this.columnLineDropPlaceholder.show();
     }
 
     /**