MAGETWO-91375: Refactor drag & drop code

- Resolve issue with button sorting
- Focus out of button after inline editing

Author: davemacaulay

app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/ButtonActionGroup.xml

@@ -52,6 +52,8 @@
         <waitForElementVisible selector="{{ButtonItemOnStage.editableButtonItemElement(index)}}" stepKey="waitForButtonEditable"/>
         <pressKey selector="{{ButtonItemOnStage.editableButtonItemElement(index)}}" userInput="{{text.value}}" stepKey="enterButtonText"/>
         <waitForElementVisible selector="{{ButtonItemOnStage.buttonItemText(index, text.value)}}" stepKey="waitForButtonText"/>
+        <click selector="{{PageBuilderActionsSection.searchPanel}}" stepKey="unfocusLiveEdit"/>
+        <waitForPageLoad stepKey="waitForUnfocus"/>
     </actionGroup>
     <actionGroup name="moveButton">
         <arguments>

app/code/Magento/PageBuilder/view/adminhtml/web/js/binding/sortable-children.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" each="parent.getChildren()" attr="Object.assign({}, data.main.attributes(), { id: parent.id + '-children' })" ko-style="data.main.style" css="data.main.css" data-bind="sortable: { sortableClass: config.name + '-container', handle: '.move-structural', items: '.pagebuilder-content-type-wrapper', connectWith: '.element-children' }">
+    <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: { tolerance: 'pointer', handle: '.move-structural', items: '.pagebuilder-content-type-wrapper', connectWith: '.buttons-container', forceRefresh: true }">
         <div class="pagebuilder-content-type-wrapper" template="{ name: preview.previewTemplate, data: preview }" attr="{ id: id }"></div>
     </div>
 </div>

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

@@ -7,8 +7,11 @@ import $ from "jquery";
 import ko from "knockout";
 import events from "uiEvents";
 import ContentTypeInterface from "../content-type.d";
+import {moveContentType} from "../drag-drop/move-content-type";
 import {moveArrayItem} from "../utils/array";
 
+let draggedContentType: ContentTypeInterface;
+
 // Create a new sortable Knockout binding
 ko.bindingHandlers.sortableChildren = {
 
@@ -28,23 +31,31 @@ ko.bindingHandlers.sortableChildren = {
         $(element).sortable(options)
             .on("sortstart", (event: Event, ui: JQueryUI.SortableUIParams) => {
                 originalPosition = ui.item.index();
+                draggedContentType = instance.children()[originalPosition];
                 events.trigger("sortableChildren:sortstart", {
                     instance,
                     originalPosition,
                     ui,
                 });
             })
-            .on("sortupdate", (event: Event, ui: JQueryUI.SortableUIParams) => {
-                const index = ui.item.index();
-                if (originalPosition !== index) {
-                    ui.item.remove();
-                    moveArrayItem(instance.children, originalPosition, index);
-                    events.trigger("sortableChildren:sortupdate", {
-                        instance,
-                        newPosition: index,
-                        originalPosition,
-                        ui,
-                    });
+            .on("sortupdate", function(event: Event, ui: JQueryUI.SortableUIParams) {
+                if (this === ui.item.parent()[0]) {
+                    const index = ui.item.index();
+                    const targetParent = ko.dataFor(ui.item.parent()[0]).parent;
+                    if (targetParent && (originalPosition !== index || draggedContentType.parent !== targetParent)) {
+                        ui.item.remove();
+                        if (draggedContentType.parent === targetParent) {
+                            moveArrayItem(instance.children, originalPosition, index);
+                        } else {
+                            moveContentType(draggedContentType, index, targetParent);
+                        }
+                        events.trigger("sortableChildren:sortupdate", {
+                            instance,
+                            newPosition: index,
+                            originalPosition,
+                            ui,
+                        });
+                    }
                 }
             });
     },

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

@@ -3,14 +3,14 @@
  * See COPYING.txt for license details.
  */
 
+import $ from "jquery";
 import ko from "knockout";
 import $t from "mage/translate";
 import events from "uiEvents";
 import Config from "../../config";
 import createContentType from "../../content-type-factory";
 import Option from "../../content-type-menu/option";
 import OptionInterface from "../../content-type-menu/option.d";
-import BlockMountEventParamsInterface from "../block-mount-event-params.d";
 import ButtonItem from "../button-item/preview";
 import ContentTypeMountEventParamsInterface from "../content-type-mount-event-params.d";
 import PreviewCollection from "../preview-collection";
@@ -28,6 +28,19 @@ export default class Preview extends PreviewCollection {
         });
     }
 
+    /**
+     * Set state based on mouseover event for the preview
+     *
+     * @param {Preview} context
+     * @param {Event} event
+     */
+    public onMouseOver(context: Preview, event: Event) {
+        // Only run the mouse over action when the active element is not a child of buttons
+        if (!$.contains(this.wrapperElement, document.activeElement)) {
+            return super.onMouseOver(context, event);
+        }
+    }
+
     /**
      * Return an array of options
      *

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

@@ -87,22 +87,24 @@ export default class Preview extends PreviewCollection {
         });
         // Refresh tab contents and set the focus to the new position of the sorted tab
         events.on("sortableChildren:sortupdate", (args: PreviewSortableSortUpdateEventParams) => {
-            this.refreshTabs(args.newPosition, true);
-            /**
-             * Update the default active tab if its position was affected by the sorting
-             */
-            const defaultActiveTab = +args.instance.preview.previewData.default_active();
-            let newDefaultActiveTab = defaultActiveTab;
-            if (args.originalPosition === defaultActiveTab) {
-                newDefaultActiveTab = args.newPosition;
-            } else if (args.originalPosition < defaultActiveTab && args.newPosition >= defaultActiveTab) {
-                // a tab was moved from the left of the default active tab the right of it, changing its index
-                newDefaultActiveTab--;
-            } else if (args.originalPosition > defaultActiveTab && args.newPosition <= defaultActiveTab) {
-                // a tab was moved from the right of the default active tab the left of it, changing its index
-                newDefaultActiveTab++;
+            if (args.instance.id === this.parent.id) {
+                this.refreshTabs(args.newPosition, true);
+                /**
+                 * Update the default active tab if its position was affected by the sorting
+                 */
+                const defaultActiveTab = +args.instance.preview.previewData.default_active();
+                let newDefaultActiveTab = defaultActiveTab;
+                if (args.originalPosition === defaultActiveTab) {
+                    newDefaultActiveTab = args.newPosition;
+                } else if (args.originalPosition < defaultActiveTab && args.newPosition >= defaultActiveTab) {
+                    // a tab was moved from the left of the default active tab the right of it, changing its index
+                    newDefaultActiveTab--;
+                } else if (args.originalPosition > defaultActiveTab && args.newPosition <= defaultActiveTab) {
+                    // a tab was moved from the right of the default active tab the left of it, changing its index
+                    newDefaultActiveTab++;
+                }
+                this.updateData("default_active", newDefaultActiveTab);
             }
-            this.updateData("default_active", newDefaultActiveTab);
         });
     }