neo.mjs 8.11.0 → 8.13.0

package/src/grid/View.mjs

@@ -381,13 +381,14 @@ class GridView extends Component {
      * @param {Object} data
      * @param {String} [data.cellId]
      * @param {Object} data.column
+     * @param {Number} data.columnIndex
      * @param {Neo.grid.Container} data.gridContainer
-     * @param {Number} data.index
      * @param {Object} data.record
+     * @param {Number} data.rowIndex
      * @returns {Object}
      */
     applyRendererOutput(data) {
-        let {cellId, column, gridContainer, index, record} = data,
+        let {cellId, column, columnIndex, gridContainer, record, rowIndex} = data,
             me          = this,
             cellCls     = ['neo-grid-cell'],
             colspan     = record[me.colspanField],
@@ -401,10 +402,11 @@ class GridView extends Component {
 
         rendererOutput = column.renderer.call(column.rendererScope || gridContainer, {
             column,
+            columnIndex,
             dataField,
             gridContainer,
-            index,
             record,
+            rowIndex,
             value: fieldValue
         });
 
@@ -447,7 +449,7 @@ class GridView extends Component {
         }
 
         cellConfig = {
-            'aria-colindex': index + 1, // 1 based
+            'aria-colindex': columnIndex + 1, // 1 based
             id             : cellId,
             cls            : cellCls,
             role           : 'gridcell',
@@ -511,10 +513,7 @@ class GridView extends Component {
 
         if (selectedRows?.includes(id)) {
             trCls.push('neo-selected');
-
-            gridContainer.fire('select', {
-                record
-            })
+            gridContainer.fire('select', {record})
         }
 
         gridRow = {
@@ -535,7 +534,7 @@ class GridView extends Component {
 
         for (i=startIndex; i <= endIndex; i++) {
             column = columns[i];
-            config = me.applyRendererOutput({column, gridContainer, index: rowIndex, record});
+            config = me.applyRendererOutput({column, columnIndex: i, gridContainer, record, rowIndex});
 
             if (column.dock) {
                 config.cls = ['neo-locked', ...config.cls || []]
@@ -817,17 +816,16 @@ class GridView extends Component {
      * @param {Object} opts.record
      */
     onStoreRecordChange({fields, record}) {
-        let me               = this,
-            fieldNames       = fields.map(field => field.name),
-            needsUpdate      = false,
-            {gridContainer}  = me,
-            {selectionModel} = gridContainer.view,
-            {vdom}           = me,
-            cellId, cellNode, cellStyle, cellVdom, column, index;
+        let me                     = this,
+            fieldNames             = fields.map(field => field.name),
+            needsUpdate            = false,
+            {gridContainer}        = me,
+            rowIndex               = me.store.indexOf(record),
+            {selectionModel, vdom} = me,
+            cellId, cellNode, cellStyle, cellVdom, column, columnIndex;
 
         if (fieldNames.includes(me.colspanField)) {
-            index = me.store.indexOf(record);
-            me.vdom.cn[index] = me.createRow({record, rowIndex: index});
+            me.vdom.cn[rowIndex] = me.createRow({record, rowIndex});
             me.update()
         } else {
             fields.forEach(field => {
@@ -843,8 +841,8 @@ class GridView extends Component {
                     if (cellNode?.vdom) {
                         cellStyle   = cellNode.vdom.style;
                         column      = me.getColumn(field.name);
-                        index       = cellNode.index;
-                        cellVdom    = me.applyRendererOutput({cellId, column, gridContainer, index, record});
+                        columnIndex = cellNode.index;
+                        cellVdom    = me.applyRendererOutput({cellId, column, columnIndex, gridContainer, record, rowIndex});
                         needsUpdate = true;
 
                         // The cell-positioning logic happens outside applyRendererOutput()
@@ -854,7 +852,7 @@ class GridView extends Component {
                             width: cellStyle.width
                         });
 
-                        cellNode.parentNode.cn[index] = cellVdom
+                        cellNode.parentNode.cn[columnIndex] = cellVdom
                     }
                 }
             })

package/src/grid/header/Button.mjs

@@ -45,10 +45,6 @@ class Button extends BaseButton {
          * @member {String} defaultSortDirection='ASC'
          */
         defaultSortDirection: 'ASC',
-        /**
-         * @member {Boolean} draggable_=true
-         */
-        draggable_: true,
         /**
          * @member {Object} editorConfig=null
          */
@@ -100,43 +96,6 @@ class Button extends BaseButton {
         sortable_: true
     }
 
-    /**
-     * @param {Object} config
-     */
-    construct(config) {
-        super.construct(config);
-
-        let me = this;
-
-        me.draggable && me.addDomListeners({
-            dragend  : me.onDragEnd,
-            dragenter: me.onDragEnter,
-            dragleave: me.onDragLeave,
-            dragover : me.onDragOver,
-            dragstart: me.onDragStart,
-            drop     : me.onDrop,
-            scope    : me
-        })
-    }
-
-    /**
-     * Triggered after the draggable config got changed
-     * @param {Boolean} value
-     * @param {Boolean} oldValue
-     * @protected
-     */
-    afterSetDraggable(value, oldValue) {
-        let me = this;
-
-        if (value === true) {
-            me.getVdomRoot().draggable = true
-        } else {
-            delete me.getVdomRoot().draggable
-        }
-
-        me.update()
-    }
-
     /**
      * Triggered after the isSorted config got changed
      * @param {String|null} value
@@ -269,13 +228,14 @@ class Button extends BaseButton {
     }
 
     /**
-     * @param {Object} data
-     * @param {Neo.button.Base} data.column
-     * @param {String} data.dataField
+     * @param {Object}             data
+     * @param {Neo.button.Base}    data.column
+     * @param {Number}             data.columnIndex
+     * @param {String}             data.dataField
      * @param {Neo.grid.Container} data.gridContainer
-     * @param {Number} data.index
-     * @param {Object} data.record
-     * @param {Number|String} data.value
+     * @param {Object}             data.record
+     * @param {Number}             data.rowIndex
+     * @param {Number|String}      data.value
      * @returns {*}
      */
     cellRenderer(data) {
@@ -315,74 +275,6 @@ class Button extends BaseButton {
         me.isSorted = map[me.isSorted + '']
     }
 
-    /**
-     * @protected
-     */
-    onDragEnd() {
-        let me      = this,
-            {style} = me;
-
-        delete style.opacity;
-        me.style = style
-    }
-
-    /**
-     * @protected
-     */
-    onDragEnter() {
-        let me    = this,
-            {cls} = me;
-
-        NeoArray.add(cls, 'neo-drag-over');
-        me.cls = cls
-    }
-
-    /**
-     * @protected
-     */
-    onDragLeave() {
-        let me    = this,
-            {cls} = me;
-
-        NeoArray.remove(cls, 'neo-drag-over');
-        me.cls = cls
-    }
-
-    /**
-     * @param {Object} event
-     */
-    onDragOver(event) {
-        //console.log('onDragOver', event);
-    }
-
-    /**
-     * @protected
-     */
-    onDragStart() {
-        let me      = this,
-            {style} = me;
-
-        style.opacity = 0.4;
-        me.style = style
-    }
-
-    /**
-     * @param {Object} data
-     */
-    onDrop(data) {
-        let me             = this,
-            headerToolbar  = me.parent,
-            {style}        = me,
-            gridContainer  = headerToolbar.parent;
-
-        me.onDragLeave();
-        headerToolbar.switchItems(me.id, data.srcId);
-        gridContainer.createViewData(gridContainer.store.data);
-
-        style.opacity = 1;
-        me.style = style
-    }
-
     /**
      * @param {Object} data
      */

package/src/grid/header/Toolbar.mjs

@@ -21,6 +21,10 @@ class Toolbar extends BaseToolbar {
          * @member {String[]} baseCls=['neo-grid-header-toolbar','neo-toolbar']
          */
         baseCls: ['neo-grid-header-toolbar', 'neo-toolbar'],
+        /**
+         * @member {Boolean} draggable_=true
+         */
+        draggable_: true,
         /**
          * @member {Neo.grid.Container|null} gridContainer=null
          */
@@ -40,6 +44,8 @@ class Toolbar extends BaseToolbar {
          */
         showHeaderFilters_: false,
         /**
+         * Convenience shortcut to pass sortable to all toolbar items.
+         * If set to true, header clicks will sort the matching column (ASC, DESC, null)
          * @member {Boolean} sortable=true
          */
         sortable: true,
@@ -50,6 +56,31 @@ class Toolbar extends BaseToolbar {
         {'aria-rowindex': 1, cn: [{cn: []}]}
     }
 
+    /**
+     * Triggered after the draggable config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetDraggable(value, oldValue) {
+        let me = this;
+
+        if (value && !me.sortZone) {
+            import('../../draggable/grid/header/toolbar/SortZone.mjs').then(module => {
+                let {appName, id, windowId} = me;
+
+                me.sortZone = Neo.create({
+                    module             : module.default,
+                    appName,
+                    boundaryContainerId: id,
+                    owner              : me,
+                    windowId,
+                    ...me.sortZoneConfig
+                })
+            })
+        }
+    }
+
     /**
      * Triggered after the mounted config got changed
      * @param {Boolean} value
@@ -98,6 +129,7 @@ class Toolbar extends BaseToolbar {
                 })
             });
 
+            me.updateDepth = 2;
             me.update()
         }
     }

package/src/main/DomAccess.mjs

@@ -576,7 +576,7 @@ class DomAccess extends Base {
      * Include a script into the document.head
      * You can add more attributes if needed. See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
      * @param {String} src
-     * @param {Object} opts=defer:true}
+     * @param {Object} opts={defer:true}
      * @param {Boolean} [opts.async]
      * @param {Boolean} [opts.defer]
      * @returns {Promise<unknown>}

package/src/main/DomEvents.mjs

@@ -194,7 +194,7 @@ class DomEvents extends Base {
 
     /**
      * Local domEvent listener
-     * @param {Object} event
+     * @param {Event} event
      */
     domEventListener(event) {
         let me       = this,
@@ -211,40 +211,7 @@ class DomEvents extends Base {
                 }
             };
 
-        // console.log('domEventListener', event.type, target.id, target.value, event);
-
         switch (event.type) {
-            case 'dragend':
-                me.dragElementId = null;
-                break
-            case 'dragenter':
-                if (me.dragElementId === target.id) {
-                    return // ignore target and source to be the same
-                }
-                break
-            case 'dragleave':
-                if (me.dragElementId === target.id) {
-                    return // ignore target and source to be the same
-                }
-                break
-            case 'dragover':
-                me.onDragOver(event);
-                event.preventDefault();
-                break
-            case 'dragstart':
-                me.dragElementId = target.id;
-                break
-            case 'drop':
-                if (!me.dragElementId || me.dragElementId === target.id) {
-                    return // drop fires twice by default & drop should not trigger on the drag element
-                }
-                if (event.stopPropagation) {
-                    event.stopPropagation() // stops the browser from redirecting.
-                }
-                event.preventDefault();
-                config.data.srcId = me.dragElementId;
-                me.dragElementId = null;
-                break
             case 'mousemove':
                 Object.assign(config.data, me.getMouseEventData(event));
                 break
@@ -427,10 +394,10 @@ class DomEvents extends Base {
      * @param {Object} event
      */
     onBeforeUnload(event) {
-        let manager = Neo.worker.Manager;
+        let {Manager} = Neo.worker;
 
-        manager.appNames.forEach(appName => {
-            manager.broadcast({action: 'disconnect', appName, windowId: manager.windowId})
+        Manager.appNames.forEach(appName => {
+            Manager.broadcast({action: 'disconnect', appName, windowId: Manager.windowId})
         })
     }
 
@@ -498,13 +465,6 @@ class DomEvents extends Base {
         me.testPathInclusion(event, preventClickTargets) && event.preventDefault()
     }
 
-    /**
-     * @param {Object} event
-     */
-    onDragOver(event) {
-        event.dataTransfer.dropEffect = 'move'
-    }
-
     /**
      * @param {FocusEvent} event
      */
@@ -616,13 +576,11 @@ class DomEvents extends Base {
      * @param {Event} event
      */
     onOrientationChange(event) {
-        const
-            {orientation} = screen,
+        let {orientation} = screen,
             {angle, type} = orientation,
-            layout        = angle === 0 || angle === 180 ? 'portrait' : 'landscape',
-            {Manager}     = Neo.worker;
+            layout        = angle === 0 || angle === 180 ? 'portrait' : 'landscape';
 
-        Manager.sendMessage('app', {
+        Neo.worker.Manager.sendMessage('app', {
             action: 'orientationChange',
             data  : {angle, layout, type}
         })
@@ -633,7 +591,9 @@ class DomEvents extends Base {
      */
     onScroll(event) {
         let {clientHeight, clientWidth, scrollLeft, scrollTop} = event.target;
-event.preventDefault();
+
+        event.preventDefault();
+
         this.sendMessageToApp({
             ...this.getEventData(event),
             clientHeight,

package/src/main/addon/AmCharts.mjs

@@ -28,15 +28,15 @@ class AmCharts extends Base {
          */
         dataMap: {},
         /**
-         * @member {String} downloadPath='https//www.amcharts.com/lib/4/'
+         * @member {String} downloadPath='https//cdn.amcharts.com/lib/4/'
          * @protected
          */
-        downloadPath: 'https://www.amcharts.com/lib/4/',
+        downloadPath: 'https://cdn.amcharts.com/lib/4/',
         /**
-         * @member {String} fallbackPath='https://neomjs.github.io/pages/resources_pub/amCharts/'
+         * @member {String} fallbackPath='https://raw.githubusercontent.com/neomjs/pages/main/resources_pub/amCharts'
          * @protected
          */
-        fallbackPath: 'https://neomjs.github.io/pages/resources_pub/amCharts/',
+        fallbackPath: 'https://raw.githubusercontent.com/neomjs/pages/main/resources_pub/amCharts/',
         /**
          * Remote method access for other workers
          * @member {Object} remote
@@ -51,7 +51,13 @@ class AmCharts extends Base {
                 'setProperty',
                 'updateData'
             ]
-        }
+        },
+        /**
+         * Enforce using the fallbackPath
+         * @member {Boolean} useFallbackPath=false
+         * @protected
+         */
+        useFallbackPath: false
     }
 
     /**
@@ -187,8 +193,19 @@ class AmCharts extends Base {
      * @param {Boolean} useFallback=false
      */
     loadFiles(useFallback=false) {
-        let me       = this,
-            basePath = useFallback ? me.fallbackPath : me.downloadPath;
+        let me              = this,
+            useFallbackPath = me.useFallbackPath || useFallback,
+            basePath;
+
+        if (useFallbackPath && Neo.config.isGitHubPages) {
+            basePath = '../../../../resources_pub/amCharts/';
+
+            if (Neo.config.environment !== 'development') {
+                basePath = `../../${basePath}`
+            }
+        } else {
+            basePath = useFallbackPath ? me.fallbackPath : me.downloadPath
+        }
 
         me.isLoading = true;
 
@@ -203,8 +220,10 @@ class AmCharts extends Base {
                 me.isReady   = true
             })
         }).catch(e => {
-            console.log('Download from amcharts.com failed, switching to fallback', e);
-            me.loadFiles(true)
+            if (!useFallback && !me.useFallbackPath) {
+                console.log('Download from amcharts.com failed, switching to fallback', e);
+                me.loadFiles(true)
+            }
         })
     }
 

package/src/main/addon/DragDrop.mjs

@@ -196,17 +196,13 @@ class DragDrop extends Base {
     }
 
     /**
-     * @param {Object} event
+     * @param {Event} event
      */
     onDragEnd(event) {
         let me          = this,
             parsedEvent = me.getEventData(event),
             isDrop      = me.pathIncludesDropZone(parsedEvent.targetPath);
 
-        DomAccess.setBodyCls({
-            remove: ['neo-unselectable']
-        });
-
         if (me.bodyCursorStyle) {
             DomAccess.setStyle({
                 id   : 'document.body',
@@ -254,7 +250,7 @@ class DragDrop extends Base {
     }
 
     /**
-     * @param {Object} event
+     * @param {Event} event
      */
     onDragMove(event) {
         let me        = this,
@@ -290,17 +286,14 @@ class DragDrop extends Base {
                 }
             }
 
-            if (!me.moveHorizontal) {
-                left = me.dragProxyRect.x
+            if (me.moveHorizontal) {
+                me.dragProxyElement.style.left = `${left}px`
             }
 
-            me.dragProxyElement.style.left = `${left}px`;
 
-            if (!me.moveVertical) {
-                top = me.dragProxyRect.y
+            if (me.moveVertical) {
+                me.dragProxyElement.style.top = `${top}px`
             }
-
-            me.dragProxyElement.style.top = `${top}px`
         }
 
         if (!me.dragProxyElement || me.alwaysFireDragMove) {
@@ -318,16 +311,12 @@ class DragDrop extends Base {
     }
 
     /**
-     * @param {Object} event
+     * @param {Event} event
      */
     onDragStart(event) {
         let me   = this,
             rect = event.target.getBoundingClientRect();
 
-        DomAccess.setBodyCls({
-            add: ['neo-unselectable']
-        });
-
         Object.assign(me, {
             dragProxyRect: rect,
             offsetX      : event.detail.clientX - rect.left,
@@ -341,7 +330,7 @@ class DragDrop extends Base {
     }
 
     /**
-     * @param {Object} event
+     * @param {Event} event
      */
     onMouseEnter(event) {
         let me = this;
@@ -356,7 +345,7 @@ class DragDrop extends Base {
     }
 
     /**
-     * @param {Object} event
+     * @param {Event} event
      */
     onMouseLeave(event) {
         let me = this;

package/src/main/mixin/DeltaUpdates.mjs

@@ -115,18 +115,24 @@ class DeltaUpdates extends Base {
      * @param {String} delta.index
      * @param {String} delta.parentId
      */
-    du_moveNode(delta) {
-        let {index}    = delta,
-            node       = this.getElement(delta.id),
-            parentNode = this.getElement(delta.parentId);
+    du_moveNode({id, index, parentId}) {
+        let node       = this.getElement(id),
+            parentNode = this.getElement(parentId),
+            currentNode;
 
         if (node && parentNode) {
             if (index >= parentNode.children.length) {
                 parentNode.appendChild(node)
             } else {
-                //index++; // todo?: increase the index in case same parent, oldIndex < newIndex, direct swap
-                if (node && parentNode.children[index].id !== delta.id) {
-                    parentNode.insertBefore(node, parentNode.children[index])
+                currentNode = parentNode.children[index];
+
+                if (node && currentNode.id !== id) {
+                    // Check for a direct swap OP
+                    if (node === currentNode.nextElementSibling) {
+                        node.replaceWith(currentNode)
+                    }
+
+                    parentNode.insertBefore(node, currentNode)
                 }
             }
         }

package/src/selection/grid/BaseModel.mjs

@@ -20,7 +20,7 @@ class BaseModel extends Model {
      * @member {String[]} dataFields
      */
     get dataFields() {
-        return this.view.parent.columns.map(c => c.dataField)
+        return this.view.parent.columns.map(column => column.dataField)
     }
 }