#559: User sees no predefined gutters

- fix rendering issues
- fix dataStore data handling
- fix event mixins

Author: omiroshnichenko

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type-factory.js

@@ -107,8 +107,7 @@ function assignDataToDataStores(
         }
         contentType.dataStores[name].setState(_.extend({}, defaultData, viewportData));
     });
-
-    contentType.dataStore.setState(contentType.dataStores[currentViewport].getState());
+    contentType.setViewportDataToDataStore(currentViewport);
 }
 
 /**
@@ -163,7 +162,7 @@ function prepareDefaults(fields: ConfigFieldInterface): FieldDefaultsInterface {
  */
 function fireContentTypeReadyEvent(
     contentType: ContentTypeInterface | ContentTypeCollectionInterface,
-    childrenLength: number,
+    childrenLength: number = 0,
 ) {
     const fire = () => {
         const params = {id: contentType.id, contentType, expectChildren: childrenLength};

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

@@ -96,6 +96,25 @@ export default class ContentType<P extends Preview = Preview, M extends Master =
         return result;
     }
 
+    /**
+     * Set data to dataStore from dataStores base on current viewport.
+     *
+     * @param {String} viewport
+     */
+    public setViewportDataToDataStore(viewport: string) {
+        const defaultViewport = Config.getConfig("defaultViewport");
+        const currentViewportState = this.dataStores[viewport].getState();
+        const defaultViewportState = this.dataStores[defaultViewport].getState();
+        const viewportFields = _.keys(this.getDiffViewportFields(viewport, currentViewportState));
+
+        // Filter viewport specific data for states
+        this.dataStore.setState(_.extend(
+            {},
+            defaultViewportState,
+            _.pick(currentViewportState, viewportFields),
+        ));
+    }
+
     protected bindEvents() {
         const eventName: string = this.config.name + ":" + this.id + ":updateAfter";
         const paramObj: any = {};
@@ -106,7 +125,8 @@ export default class ContentType<P extends Preview = Preview, M extends Master =
                 const viewport = Config.getConfig("viewport") || defaultViewport;
 
                 if (viewport !== defaultViewport) {
-                    const viewportFields = _.keys(this.getDiffViewportFields(viewport, state));
+                    const viewportFields = _.keys(this.getViewportFields(viewport, state));
+                    const diffViewportFields = _.keys(this.getDiffViewportFields(viewport, state));
                     this.dataStores[defaultViewport].setState(
                         _.extend(
                             this.dataStores[defaultViewport].getState(),
@@ -116,7 +136,7 @@ export default class ContentType<P extends Preview = Preview, M extends Master =
                     this.dataStores[viewport].setState(
                         _.extend(
                             this.dataStores[viewport].getState(),
-                            _.pick(state, viewportFields),
+                            _.pick(state, diffViewportFields),
                         ),
                     );
                 } else {
@@ -144,17 +164,7 @@ export default class ContentType<P extends Preview = Preview, M extends Master =
      * @param {Object} args
      */
     private onViewportSwitch(args: {viewport: string, previousViewport: string}) {
-        const defaultViewport = Config.getConfig("defaultViewport");
-        const currentViewportState = this.dataStores[args.viewport].getState();
-        const defaultViewportState = this.dataStores[defaultViewport].getState();
-        const viewportFields = _.keys(this.getDiffViewportFields(args.viewport, currentViewportState));
-
-        // Filter viewport specific data for states
-        this.dataStore.setState(_.extend(
-            {},
-            defaultViewportState,
-            _.pick(currentViewportState, viewportFields),
-        ));
+        this.setViewportDataToDataStore(args.viewport);
     }
 
     /**

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

@@ -31,4 +31,5 @@ export default interface ContentTypeInterface<P extends Preview = Preview, M ext
      */
     getViewportFields(viewport: string, data: DataObject): ConfigFieldInterface;
     getDataStoresStates(): {[key: string]: any};
+    setViewportDataToDataStore(viewport: string): void;
 }

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

@@ -37,7 +37,7 @@ export default class PreviewCollection extends Preview implements PreviewCollect
     ): Promise<ContentTypeCollectionInterface> | void {
         const defaultViewport = Config.getConfig("defaultViewport");
         const index = contentType.parentContentType.getChildren().indexOf(contentType) + 1 || null;
-        const childrenLength = contentType.children ? contentType.children().length : null;
+        const childrenLength = contentType.children ? contentType.children().length : 0;
 
         return new Promise((resolve, reject) => {
             createContentType(

app/code/Magento/PageBuilder/view/adminhtml/web/js/master-format/render/frame.js

@@ -343,7 +343,7 @@ export default class Preview implements PreviewInterface {
             contentType.parentContentType,
             contentType.stageId,
             contentTypeData,
-            null,
+            0,
             contentType.getDataStoresStates(),
         ).then((duplicateContentType: ContentTypeInterface) => {
             if (autoAppend) {