Merge branch 'MC-4262-column-move-indicator' into cms-team-1-delivery

Author: davemacaulay

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_drag-drop.less

@@ -45,7 +45,8 @@
     }
 }
 
-.pagebuilder-content-type-wrapper.ui-sortable-helper {
+.pagebuilder-content-type-wrapper.ui-sortable-helper,
+.pagebuilder-content-type.ui-draggable-dragging {
     opacity: .7;
 
     > .pagebuilder-content-type > .pagebuilder-options {

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/column-group/_default.less

@@ -7,6 +7,18 @@
 //  Default appearance styles
 //  _____________________________________________
 
+@keyframes inner-pulsate {
+    0% {
+        box-shadow: inset 0 0 0 1px rgba(142, 0, 6, 0);
+    }
+    50% {
+        box-shadow: inset 0 0 0 8px rgba(142, 0, 6, .1);
+    }
+    100% {
+        box-shadow: inset 0 0 0 2px rgba(142, 0, 6, 0);
+    }
+}
+
 .pagebuilder-content-type {
     .pagebuilder-column-group {
         border: none;
@@ -39,13 +51,13 @@
         }
 
         .move-placeholder {
+            animation: inner-pulsate 1s infinite ease-in-out;
             background: rgba(142, 0, 6, .3);
-            bottom: -1px;
+            bottom: 0;
             opacity: 0;
             position: absolute;
-            top: -1px;
-            transform: translateX(-3px);
-            transition: .5s opacity;
+            top: 0;
+            transition: .25s opacity;
             visibility: hidden;
             width: 6px;
             z-index: 26;
@@ -55,7 +67,7 @@
 
             &.active {
                 opacity: 1;
-                transition: .5s opacity;
+                transition: .25s opacity;
                 visibility: visible;
             }
         }

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/column/_default.less

@@ -83,6 +83,7 @@
     }
 }
 
+.pagebuilder-content-type-hidden .pagebuilder-column-resize-handle,
 .pagebuilder-stage.interacting .pagebuilder-content-type.pagebuilder-column .pagebuilder-column-resize-handle {
     display: none;
 }

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

@@ -81,6 +81,7 @@ export default class Preview extends PreviewCollection {
     private resizeUtils: Resize;
     private gridSizeHistory: Map<number, number[]> = new Map();
     private interactionLevel: number = 0;
+    private startDragEvent: JQueryEventObject;
 
     /**
      *
@@ -346,11 +347,12 @@ export default class Preview extends PreviewCollection {
                 });
                 return helper;
             },
-            start: (event: Event) => {
+            start: (event: JQueryEventObject) => {
                 const columnInstance: ContentTypeCollectionInterface = ko.dataFor($(event.target)[0]);
                 // Use the global state as columns can be dragged between groups
                 setDragColumn((columnInstance.parent as ContentTypeCollectionInterface<ColumnPreview>));
                 this.dropPositions = calculateDropPositions(this.parent);
+                this.startDragEvent = event;
 
                 events.trigger("column:dragStart", {
                     column: columnInstance,
@@ -373,6 +375,7 @@ export default class Preview extends PreviewCollection {
 
                 this.dropPlaceholder.removeClass("left right");
                 this.movePlaceholder.removeClass("active");
+                this.startDragEvent = null;
 
                 events.trigger("column:dragStop", {
                     column: draggedColumn,
@@ -798,30 +801,30 @@ export default class Preview extends PreviewCollection {
             const currentX = event.pageX - groupPosition.left;
 
             // Are we within the same column group or have we ended up over another?
-            if (columnInstance.parent === this.parent) {
-                const currentColumn = dragColumn.preview.element;
-                const currentColumnRight = currentColumn.position().left + currentColumn.width();
-                const lastColInGroup = (this.parent.children()[this.parent.children().length - 1]
-                    .preview as ColumnPreview).element;
-                const insertLastPos = lastColInGroup.position().left + (lastColInGroup.width() / 2);
+            if (columnInstance.parent === this.parent && this.startDragEvent) {
+                const dragDirection = (event.pageX <= this.startDragEvent.pageX ? "left" : "right");
+                const adjacentLeftColumn = getAdjacentColumn(dragColumn, "-1");
 
+                // Determine the current move position based on the cursors position and direction of drag
                 this.movePosition = this.dropPositions.find((position) => {
-                    // Only ever look for the left placement, except the last item where we look on the right
-                    const placement = (currentX >= insertLastPos ? "right" : "left");
-                    // There is 200px area over each column borders
-                    return comparator(currentX, position[placement], 100) &&
-                        !comparator(currentX, currentColumnRight, 100) &&
-                        position.affectedColumn !== columnInstance && // Check affected column isn't the current column
-                        position.placement === placement; // Verify the position, we only check left on sorting
+                    return currentX > position.left && currentX < position.right &&
+                        position.placement === dragDirection && position.affectedColumn !== dragColumn;
                 });
 
+                // Differences in the element & event positions cause a right movement to activate on the left column
+                if (this.movePosition && dragDirection === "right" &&
+                    this.movePosition.affectedColumn === adjacentLeftColumn
+                ) {
+                    this.movePosition = null;
+                }
+
                 if (this.movePosition) {
                     this.dropPlaceholder.removeClass("left right");
                     this.movePlaceholder.css({
                         left: (this.movePosition.placement === "left" ? this.movePosition.left : ""),
-                        right: (this.movePosition.placement === "right" ?
-                                groupPosition.outerWidth - this.movePosition.right - 5 : ""
-                        ),
+                        right: (this.movePosition.placement === "right"
+                            ? groupPosition.width - this.movePosition.right : ""),
+                        width: dragColumn.preview.element.outerWidth() + "px",
                     }).addClass("active");
                 } else {
                     this.movePlaceholder.removeClass("active");