draggable.toolbar.SortZone: adjustProxyRectToParent, itemMargin configs #6332

Author: tobiu

src/draggable/grid/header/toolbar/SortZone.mjs

@@ -1,5 +1,4 @@
 import BaseSortZone from '../../../toolbar/SortZone.mjs';
-import VDomUtil     from '../../../../util/VDom.mjs';
 
 /**
  * @class Neo.draggable.grid.header.toolbar.SortZone
@@ -17,6 +16,15 @@ class SortZone extends BaseSortZone {
          * @protected
          */
         ntype: 'grid-header-toolbar-sortzone',
+        /**
+         * @member {Boolean} adjustProxyRectToParent=true
+         */
+        adjustProxyRectToParent: true,
+        /**
+         * @member {String|null} itemMargin=null
+         * @protected
+         */
+        itemMargin: '1px',
         /**
          * @member {Boolean} moveVertical=false
          */
@@ -40,84 +48,6 @@ class SortZone extends BaseSortZone {
 
         owner.parent.view.createViewData()
     }
-
-    /**
-     * @param {Object} data
-     */
-    onDragStart(data) {
-        let me         = this,
-            button     = Neo.getComponent(data.path[0].id),
-            {owner}    = me,
-            itemStyles = me.itemStyles = [],
-            {layout}   = owner,
-            ownerStyle = owner.style || {},
-            index, indexMap, itemStyle, ownerRect, rect;
-
-        if (owner.sortable) {
-            index    = owner.indexOf(button.id);
-            indexMap = {};
-
-            Object.assign(me, {
-                currentIndex           : index,
-                dragElement            : VDomUtil.find(owner.vdom, button.id).vdom,
-                dragProxyConfig        : {...me.dragProxyConfig, cls : [...owner.cls]},
-                indexMap               : indexMap,
-                ownerStyle             : {height: ownerStyle.height, width : ownerStyle.width},
-                reversedLayoutDirection: layout.direction === 'column-reverse' || layout.direction === 'row-reverse',
-                sortDirection          : owner.layout.ntype === 'layout-vbox' ? 'vertical' : 'horizontal',
-                startIndex             : index
-            });
-
-            me.dragStart(data); // we do not want to trigger the super class call here
-
-            owner.items.forEach((item, index) => {
-                indexMap[index] = index;
-
-                itemStyles.push({
-                    height: item.height ? `${item.height}px` :  item.style?.height,
-                    width : item.width  ? `${item.width}px`  :  item.style?.width
-                })
-            });
-
-            owner.getDomRect([owner.id].concat(owner.items.map(e => e.id))).then(itemRects => {
-                me.ownerRect = ownerRect = itemRects[0];
-
-                ownerStyle.height = `${itemRects[0].height}px`;
-                ownerStyle.width  = `${itemRects[0].width}px`;
-
-                // the only reason we are adjusting the toolbar style is that there is no min height or width present.
-                // removing items from the layout could trigger a change in size.
-                owner.style = ownerStyle;
-
-                itemRects.shift();
-                me.itemRects = itemRects;
-
-                owner.items.forEach((item, index) => {
-                    itemStyle = item.style || {};
-                    rect      = itemRects[index];
-
-                    rect.x = rect.x - ownerRect.x - 1;
-                    rect.y = rect.y - ownerRect.y - 1;
-
-                    item.style = Object.assign(itemStyle, {
-                        height  : `${rect.height}px`,
-                        left    : `${rect.left}px`,
-                        margin  : '1px',
-                        position: 'absolute',
-                        top     : `${rect.top}px`,
-                        width   : `${rect.width}px`
-                    })
-                });
-
-                // we need to add a short (1 frame) delay to ensure the item has switched to an absolute position
-                me.timeout(5).then(() => {
-                    itemStyle = button.style || {};
-                    itemStyle.visibility = 'hidden';
-                    button.style = itemStyle
-                })
-            })
-        }
-    }
 }
 
 export default Neo.setupClass(SortZone);

src/draggable/toolbar/SortZone.mjs

@@ -17,6 +17,14 @@ class SortZone extends DragZone {
          * @protected
          */
         ntype: 'toolbar-sortzone',
+        /**
+         * Depending on the parent tree positioning (especially using position: relative),
+         * it might be required to subtract the parent height & width from the proxy element position.
+         * draggable.grid.header.toolbar.SortZone needs it
+         * draggable.tab.header.toolbar.SortZone does not need it
+         * @member {Boolean} adjustProxyRectToParent=false
+         */
+        adjustProxyRectToParent: false,
         /**
          * @member {Boolean} alwaysFireDragMove=true
          */
@@ -31,6 +39,11 @@ class SortZone extends DragZone {
          * @protected
          */
         indexMap: null,
+        /**
+         * @member {String|null} itemMargin=null
+         * @protected
+         */
+        itemMargin: null,
         /**
          * @member {Array|null} itemRects=null
          * @protected
@@ -225,9 +238,15 @@ class SortZone extends DragZone {
                     itemStyle = item.style || {};
                     rect      = itemRects[index];
 
+                    if (me.adjustProxyRectToParent) {
+                        rect.x = rect.x - me.ownerRect.x - 1;
+                        rect.y = rect.y - me.ownerRect.y - 1
+                    }
+
                     item.style = Object.assign(itemStyle, {
                         height  : `${rect.height}px`,
                         left    : `${rect.left}px`,
+                        margin  : me.itemMargin,
                         position: 'absolute',
                         top     : `${rect.top}px`,
                         width   : `${rect.width}px`