PB-108 add grid lines when re-sizing

Author: paras89

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/column-line/_default.less

@@ -19,6 +19,28 @@
         height: 30px;
         z-index: 26;
     }
+    
+    &.resizing {
+        .pagebuilder-grid-size-indicator {
+            z-index: 105;
+        }
+
+        .resize-grid {
+            opacity: 1;
+            transition: .5s opacity;
+            visibility: visible;
+        }
+
+        .pagebuilder-options {
+            display: none;
+        }
+
+        .pagebuilder-content-type {
+            .pagebuilder-empty {
+                opacity: 0;
+            }
+        }
+    }
 
     > .element-children {
         display: flex;

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

@@ -6,10 +6,14 @@
 -->
 
 <div class="pagebuilder-column-line pagebuilder-content-type"
+     css="{'resizing': resizing}"
      attr="data.main.attributes">
     <div class="column-drop-placeholder"
          afterRender="function (element) { bindColumnLineDropPlaceholder.call($data, element); }">
     </div>
+    <div class="resize-grid" each="gridSizeArray">
+        <div class="grid-line"></div>
+    </div>
     <div class="resize-ghost" afterRender="function (element) { bindGhost.call($data, element); }"></div>
     <div class="drop-placeholder" afterRender="function (element) { bindDropPlaceholder.call($data, element); }"></div>
     <div class="move-placeholder" afterRender="function (element) { bindMovePlaceholder.call($data, element); }"></div>

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

@@ -27,6 +27,7 @@ import {
     InitElementEventParamsInterface,
 } from "Magento_PageBuilder/js/content-type/column/column-events.types";
 import ColumnPreview from "Magento_PageBuilder/js/content-type/column/preview";
+import ColumnGroupPreview from "Magento_PageBuilder/js/content-type/column-group/preview";
 import {
     ContentTypeDroppedCreateEventParamsInterface,
     ContentTypeRemovedEventParamsInterface,
@@ -59,6 +60,7 @@ import {calculateDropPositions, DropPosition} from "./drag-and-drop";
 export default class Preview extends PreviewCollection {
     public contentType: ContentTypeCollectionInterface<ColumnLinePreview>;
     public resizing: KnockoutObservable<boolean> = ko.observable(false);
+    public gridSizeArray: KnockoutObservableArray<any[]> = ko.observableArray([]);
     public element: JQuery;
     private dropPlaceholder: JQuery;
     private movePlaceholder: any;
@@ -123,6 +125,12 @@ export default class Preview extends PreviewCollection {
             }
         });
 
+        const parentPreview = this.contentType.parentContentType.preview as ColumnGroupPreview;
+        this.gridSizeArray(parentPreview.gridSizeArray());
+        parentPreview.gridSizeArray.subscribe((gridSize : Array<any>) => {
+            this.gridSizeArray(gridSize);
+        });
+
         this.contentType.children.subscribe(
             _.debounce(
                 this.removeIfEmpty.bind(this),
@@ -149,6 +157,7 @@ export default class Preview extends PreviewCollection {
             // Does the events parent match the previews column group?
             if (args.columnLine.id === this.contentType.id) {
                 this.bindDraggable(args.column);
+
             }
         });
     }