PB-108 improvements to moving and duplication of column content type to preserve column width

Author: paras89

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

@@ -404,7 +404,7 @@ export default class Preview extends PreviewCollection {
 
                 newNeighbour = getAdjacentColumn(newNeighbour, direction);
                 if (!newNeighbour) {
-                    updateColumnWidth(column, oldWidth - totalWidthAdjusted);
+                    updateColumnWidth(column, totalWidthAdjusted);
                     break;
                 }
                 let neighbourExistingWidth = this.resizeUtils.getColumnWidth(newNeighbour);

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

@@ -19,8 +19,8 @@ import {getDefaultGridSize} from "../column-group/grid-size";
 import ColumnGroupPreview from "../column-group/preview";
 import ColumnLinePreview from "../column-line/preview";
 import {
-    ContentTypeDroppedCreateEventParamsInterface, ContentTypeDuplicateEventParamsInterface,
-    ContentTypeMountEventParamsInterface,
+    ContentTypeDroppedCreateEventParamsInterface,
+    ContentTypeDuplicateEventParamsInterface,
     ContentTypeMoveEventParamsInterface,
     ContentTypeRemovedEventParamsInterface,
 } from "../content-type-events.types";
@@ -226,7 +226,32 @@ export default class Preview extends PreviewCollection {
             return super.clone(contentType, autoAppend);
         }
 
-        // Attempt to split the current column into parts
+        let shrinkableColumn = resizeUtils.findBiggerShrinkableColumn(contentType);
+        if (shrinkableColumn) {
+            const shrinkableClone = super.clone(contentType, autoAppend);
+            if (shrinkableClone) {
+                let newShrinkableColumnWidth = resizeUtils.getColumnWidth(shrinkableColumn)
+                    - resizeUtils.getColumnWidth(contentType);
+                let duplicateColumnWidth = resizeUtils.getColumnWidth(contentType);
+                shrinkableClone.then((duplicateContentType: ContentTypeCollectionInterface<Preview>) => {
+                    updateColumnWidth(
+                        shrinkableColumn,
+                        resizeUtils.getAcceptedColumnWidth(
+                            (newShrinkableColumnWidth).toString(),
+                        ),
+                    );
+                    updateColumnWidth(
+                        duplicateContentType,
+                        duplicateColumnWidth
+                    );
+
+                    return duplicateContentType;
+                });
+            }
+            return;
+        }
+
+            // Attempt to split the current column into parts
         const splitTimes = Math.round(resizeUtils.getColumnWidth(contentType) / resizeUtils.getSmallestColumnWidth());
         if (splitTimes > 1) {
             const splitClone = super.clone(contentType, autoAppend);

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

@@ -206,6 +206,24 @@ export default class Resize {
         );
     }
 
+    /**
+     * Find a shrinkable column of a greater size outwards from the current column
+     *
+     * @param {ContentTypeCollectionInterface<ColumnPreview>} column
+     * @returns {ContentTypeCollectionInterface<ColumnPreview>}
+     */
+    public findBiggerShrinkableColumn(
+        column: ContentTypeCollectionInterface<ColumnPreview>,
+    ): ContentTypeCollectionInterface<ColumnPreview> {
+        return outwardSearch(
+            column.parentContentType.children(),
+            getColumnIndexInGroup(column),
+            (neighbourColumn) => {
+                return this.getColumnWidth(neighbourColumn) > this.getColumnWidth(column);
+            },
+        );
+    }
+
     /**
      * Calculate the ghost size for the resizing action
      *