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);
+
  }
  });
  }