MC-3775: Button editable state is not consistent with the options panel appearing

- Remove weird animation from sortable actions
- Align sortable settings with tabs & sliders for buttons
- Ensure focus on duplicate works as expected

Author: davemacaulay

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

@@ -7,7 +7,7 @@
 
 <div class="pagebuilder-content-type pagebuilder-entity pagebuilder-entity-preview pagebuilder-no-blur pagebuilder-live-edit pagebuilder-buttons" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
     <render args="getOptions().template" />
-    <div class="element-children buttons-container" each="parent.getChildren()" attr="Object.assign({}, data.main.attributes(), { id: parent.id + '-children' })" ko-style="data.main.style" css="data.main.css" data-bind="sortableChildren: buttonsSortableOptions()">
+    <div class="element-children buttons-container" each="parent.getChildren()" attr="Object.assign({}, data.main.attributes(), { id: parent.id + '-children' })" ko-style="data.main.style" css="data.main.css" data-bind="sortableChildren: getSortableOptions()">
         <div class="pagebuilder-content-type-wrapper" template="{ name: preview.previewTemplate, data: preview, afterRender: function () { preview.dispatchAfterRenderEvent.apply(preview, arguments); } }" attr="{ id: id }" css="{'pagebuilder-content-type-hidden': !preview.display()}"></div>
     </div>
 </div>

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

@@ -7,7 +7,7 @@
 
 <div class="pagebuilder-content-type pagebuilder-entity pagebuilder-entity-preview pagebuilder-no-blur pagebuilder-live-edit pagebuilder-buttons" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
     <render args="getOptions().template" />
-    <div class="element-children buttons-container" each="parent.getChildren()" attr="Object.assign({}, data.main.attributes(), { id: parent.id + '-children' })" ko-style="data.main.style" css="data.main.css" data-bind="sortableChildren: buttonsSortableOptions('height', 'pointer')">
+    <div class="element-children buttons-container" each="parent.getChildren()" attr="Object.assign({}, data.main.attributes(), { id: parent.id + '-children' })" ko-style="data.main.style" css="data.main.css" data-bind="sortableChildren: getSortableOptions('height', 'pointer')">
         <div class="pagebuilder-content-type-wrapper" template="{ name: preview.previewTemplate, data: preview, afterRender: function () { preview.dispatchAfterRenderEvent.apply(preview, arguments); } }" attr="{ id: id }"></div>
     </div>
 </div>

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

@@ -106,7 +106,7 @@ export default class Preview extends PreviewCollection {
         let duplicatedButton: ContentTypeInterface;
         let duplicatedButtonIndex: number;
         events.on("button-item:duplicateAfter", (args: ContentTypeDuplicateEventParamsInterface) => {
-            if (this.parent.id === args.duplicateContentType.parent.id) {
+            if (this.parent.id === args.duplicateContentType.parent.id && args.direct) {
                 duplicatedButton = args.duplicateContentType;
                 duplicatedButtonIndex = args.index;
             }
@@ -164,11 +164,10 @@ export default class Preview extends PreviewCollection {
      * @param {string} tolerance
      * @returns {JQueryUI.Sortable}
      */
-    public buttonsSortableOptions(
+    public getSortableOptions(
         orientation: string = "width",
         tolerance: string = "intersect",
     ): SortableOptionsInterface {
-        let placeholderGhost: JQuery;
         return {
             handle: ".button-item-drag-handle",
             items: ".pagebuilder-content-type-wrapper",
@@ -177,6 +176,7 @@ export default class Preview extends PreviewCollection {
             tolerance,
             revert: 200,
             disabled: this.parent.children().length <= 1,
+
             /**
              * Provide custom helper element
              *
@@ -192,6 +192,7 @@ export default class Preview extends PreviewCollection {
                 helper[0].querySelector(".pagebuilder-options").remove();
                 return helper[0];
             },
+
             placeholder: {
                 /**
                  * Provide custom placeholder element
@@ -204,9 +205,7 @@ export default class Preview extends PreviewCollection {
                         .clone()
                         .css({
                             display: "inline-block",
-                            opacity: 0,
-                            width: item.width(),
-                            height: item.height(),
+                            opacity: "0.3",
                         })
                         .removeClass("focused")
                         .addClass("sortable-placeholder");
@@ -217,54 +216,18 @@ export default class Preview extends PreviewCollection {
                     return;
                 },
             },
+
             /**
-             * Logic for starting the sorting and adding the placeholderGhost
-             *
-             * @param {Event} event
-             * @param {JQueryUI.SortableUIParams} element
+             * Trigger interaction start on sort
              */
-            start(event: Event, element: JQueryUI.SortableUIParams) {
-                placeholderGhost = element.placeholder
-                    .clone()
-                    .css({
-                        opacity: 0.3,
-                        position: "absolute",
-                        left: element.placeholder.position().left,
-                        top: element.placeholder.position().top,
-                    });
-                element.item.parent().append(placeholderGhost);
+            start() {
                 events.trigger("stage:interactionStart");
             },
+
             /**
-             * Logic for changing element position
-             *
-             * Set the width and height of the moving placeholder animation
-             * and then add animation of placeholder ghost to the placeholder position.
-             *
-             * @param {Event} event
-             * @param {JQueryUI.SortableUIParams} element
-             */
-            change(event: Event, element: JQueryUI.SortableUIParams) {
-                element.placeholder.stop(true, false);
-                if (orientation === "height") {
-                    element.placeholder.css({height: element.item.height() / 1.2});
-                    element.placeholder.animate({height: element.item.height()}, 200, "linear");
-                }
-                if (orientation === "width") {
-                    element.placeholder.css({width: element.item.width() / 1.2});
-                    element.placeholder.animate({width: element.item.width()}, 200, "linear");
-                }
-                placeholderGhost.stop(true, false).animate({
-                    left: element.placeholder.position().left,
-                    top: element.placeholder.position().top,
-                }, 200);
-            },
-            /**
-             * Logic for post sorting and removing the placeholderGhost
+             * Stop stage interaction on stop
              */
-            stop(event: Event, element: JQueryUI.SortableUIParams) {
-                placeholderGhost.remove();
-                element.item.find(".pagebuilder-content-type-active").removeClass("pagebuilder-content-type-active");
+            stop() {
                 events.trigger("stage:interactionStop");
             },
         };

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/buttons/inline/preview.html

@@ -13,4 +13,5 @@ export default interface ContentTypeDuplicateEventParamsInterface {
     originalContentType: ContentTypeInterface & ContentTypeCollectionInterface;
     duplicateContentType: ContentTypeInterface & ContentTypeCollectionInterface;
     index: number;
+    direct: boolean;
 }

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/buttons/stacked/preview.html

@@ -22,22 +22,26 @@ export default class PreviewCollection extends Preview {
     /**
      * Duplicate a collection content type
      *
-     * @param {ContentTypeInterface & ContentTypeCollectionInterface} contentType
+     * @param {ContentTypeCollectionInterface} contentType
      * @param {boolean} autoAppend
+     * @param {boolean} direct
      * @returns {Promise<ContentTypeCollectionInterface> | void}
      */
     public clone(
         contentType: ContentTypeCollectionInterface,
         autoAppend: boolean = true,
+        direct: boolean = false,
     ): Promise<ContentTypeCollectionInterface> | void {
         const index = contentType.parent.getChildren().indexOf(contentType) + 1 || null;
+        const childrenLength = contentType.children ? contentType.children().length : null;
 
         return new Promise((resolve, reject) => {
             createContentType(
                 contentType.config,
                 contentType.parent,
                 contentType.stageId,
                 contentType.dataStore.get() as DataObject,
+                childrenLength,
             ).then((duplicate: ContentTypeCollectionInterface) => {
                 if (contentType.children && contentType.children().length > 0) {
                     // Duplicate the instances children into the new duplicate
@@ -61,7 +65,7 @@ export default class PreviewCollection extends Preview {
                 if (autoAppend) {
                     contentType.parent.addChild(duplicate, index);
                 }
-                this.dispatchContentTypeCloneEvents(contentType, duplicate, index);
+                this.dispatchContentTypeCloneEvents(contentType, duplicate, index, direct);
 
                 resolve(duplicate);
             });