neo.mjs 8.15.0 → 8.17.0

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='8.15.0'
+         * @member {String} version='8.17.0'
          */
-        version: '8.15.0'
+        version: '8.17.0'
     }
 
     /**

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2025-02-06",
+      "datePublished": "2025-02-07",
       "publisher": {
         "@type": "Organization",
         "name": "Neo.mjs"

package/apps/portal/view/home/FooterContainer.mjs

@@ -107,7 +107,7 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                html  : 'v8.15.0'
+                html  : 'v8.17.0'
             }]
         }],
         /**

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='8.15.0'
+         * @member {String} version='8.17.0'
          */
-        version: '8.15.0'
+        version: '8.17.0'
     }
 
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "8.15.0",
+    "version": "8.17.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -60,7 +60,7 @@
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
         "postcss": "^8.5.1",
-        "sass": "^1.83.4",
+        "sass": "^1.84.0",
         "siesta-lite": "5.5.2",
         "url": "^0.11.4",
         "webpack": "^5.97.1",

package/resources/scss/src/grid/Container.scss

@@ -4,74 +4,18 @@
     overflow-y         : hidden;
     overscroll-behavior: none;
     position           : relative;
-}
-
-.neo-grid-container {
-    border             : 1px solid var(--grid-container-border-color);
-    border-spacing     : 0;
-    color              : var(--grid-container-color);
-    font-size          : 13px;
-    font-weight        : 400;
-    height             : 100%;
-    line-height        : 19px;
-    overscroll-behavior: none;
-    overflow-y         : hidden;
-    position           : absolute;
-    width              : 100%;
-
-    .neo-grid-row {
-        display: flex;
-        width  : 100%;
-    }
-
-    .neo-grid-header-toolbar .neo-grid-row:nth-child(1) .neo-grid-header-cell {
-        z-index : 10;
-    }
-
-    .neo-grid-body {
-        display   : block;
-        max-height: 300px; // an initial dummy value to reduce the flickering until the real height is available
-        overflow-y: scroll;
-    }
-
-    .neo-grid-row:last-child {
-        .neo-grid-cell {
-            border-bottom-width: 0 !important;
-        }
-    }
-
-    .neo-grid-row.neo-even {
-        .neo-grid-cell {
-            background-color: var(--grid-container-cell-background-color-even);
-        }
-    }
-
-    .neo-grid-header-cell {
-        position: sticky;
-        top     : 0;
-        z-index : 5;
-    }
-
-    .neo-grid-cell, .neo-grid-header-cell {
-        border-bottom: 1px solid var(--grid-container-border-color);
-        border-right : 1px solid var(--grid-container-border-color);
-        height       : inherit;
-        min-width    : 300px;
-
-        &:last-child {
-            border-right-width : 0;
-        }
-
-        &.neo-locked {
-            left: 0;
-        }
-    }
 
-    .neo-grid-cell {
-        align-items     : center;
-        background-color: var(--grid-container-cell-background-color);
-        display         : flex;
-        padding         : 2px 10px 2px;
-        width           : fit-content;
+    .neo-grid-container {
+        border             : 1px solid var(--grid-container-border-color);
+        border-spacing     : 0;
+        color              : var(--grid-container-color);
+        font-size          : 13px;
+        font-weight        : 400;
+        height             : 100%;
+        line-height        : 19px;
+        overscroll-behavior: none;
+        overflow-y         : hidden;
+        position           : absolute;
+        width              : 100%;
     }
 }

package/resources/scss/src/grid/Scrollbar.scss

@@ -0,0 +1,21 @@
+.neo-grid-scrollbar {
+    bottom          : 1px;
+    opacity         : 0;
+    overflow-y      : scroll;
+    position        : absolute;
+    right           : 0;
+    top             : 31px; // header-toolbar height
+    transition      : opacity 1s ease-out;
+    width           : 16px;
+    z-index         : 2;
+
+    &:hover {
+        opacity: 1;
+    }
+}
+
+.neo-grid-wrapper:has(.neo-grid-view.neo-is-scrolling) {
+    .neo-grid-scrollbar {
+        opacity: 1;
+    }
+}

package/resources/scss/src/grid/View.scss

@@ -4,17 +4,19 @@
     overflow-x     : hidden;
     overflow-y     : auto;
     position       : relative;
+    scrollbar-width: none;
 
     &:focus {
         outline: none;
     }
 
-    .neo-grid-scrollbar {
+    .neo-grid-stretcher {
         height        : 1px;
         position      : absolute;
         top           : 0;
         visibility    : hidden;
         width         : 1px;
+        z-index       : 1001; // Above the column dragProxy element
     }
 }
 
@@ -52,6 +54,13 @@
 
     .neo-grid-row {
         position: absolute;
+        width   : 100%;
+
+        &:last-child {
+            .neo-grid-cell {
+                border-bottom-width: 0 !important;
+            }
+        }
 
          &:hover {
              .neo-grid-cell {
@@ -59,6 +68,12 @@
              }
          }
 
+        &.neo-even {
+            .neo-grid-cell {
+                background-color: var(--grid-container-cell-background-color-even);
+            }
+        }
+
          // selection.RowModel
          &.neo-selected {
              .neo-grid-cell {
@@ -68,7 +83,19 @@
          }
 
          .neo-grid-cell {
-             position: absolute;
+             align-items     : center;
+             background-color: var(--grid-container-cell-background-color);
+             border-bottom   : 1px solid var(--grid-container-border-color);
+             border-right    : 1px solid var(--grid-container-border-color);
+             display         : flex;
+             height          : inherit;
+             padding         : 2px 10px 2px;
+             position        : absolute;
+             width           : fit-content;
+
+             &:last-child {
+                 border-right-width : 0;
+             }
 
              // selection.CellModel
              &.neo-selected {

package/src/DefaultConfig.mjs

@@ -262,12 +262,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '8.15.0'
+     * @default '8.17.0'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '8.15.0'
+    version: '8.17.0'
 };
 
 Object.assign(DefaultConfig, {

package/src/draggable/toolbar/SortZone.mjs

@@ -82,6 +82,12 @@ class SortZone extends DragZone {
         startIndex: -1
     }
 
+    /**
+     * @member {Boolean} isOverDragging=false
+     * @protected
+     */
+    isOverDragging = false
+
     /**
      * Override this method for class extensions (e.g. tab.header.Toolbar)
      * @param {Number} fromIndex
@@ -150,52 +156,70 @@ class SortZone extends DragZone {
      * @param {Object} data
      */
     async onDragMove(data) {
-        // the method can trigger before we got the client rects from the main thread
+        // The method can trigger before we got the client rects from the main thread
         if (!this.itemRects || this.isScrolling) {
             return
         }
 
         let me          = this,
-            moveFactor  = 0.55, // we can not use 0.5, since items would jump back & forth
             index       = me.currentIndex,
             {itemRects} = me,
             maxItems    = itemRects.length - 1,
             reversed    = me.reversedLayoutDirection,
-            delta, itemWidth;
+            delta, isOverDragging, isOverDraggingEnd, isOverDraggingStart, itemHeightOrWidth, moveFactor;
 
         if (me.sortDirection === 'horizontal') {
-            delta     = data.clientX + me.scrollLeft - me.offsetX - itemRects[index].left;
-            itemWidth = 'width'
+            delta               = data.clientX + me.scrollLeft - me.offsetX - itemRects[index].left;
+            isOverDraggingEnd   = data.clientX > me.boundaryContainerRect.right;
+            isOverDraggingStart = data.clientX < me.boundaryContainerRect.left;
+            itemHeightOrWidth   = 'width'
         } else {
-            delta     = data.clientY + me.scrollTop  - me.offsetY - itemRects[index].top;
-            itemWidth = 'height'
+            delta               = data.clientY + me.scrollTop - me.offsetY - itemRects[index].top;
+            isOverDraggingEnd   = data.clientY > me.boundaryContainerRect.bottom;
+            isOverDraggingStart = data.clientY < me.boundaryContainerRect.top;
+            itemHeightOrWidth   = 'height'
         }
 
-        if (index > 0 && (!reversed && delta < 0 || reversed && delta > 0)) {
-            if (Math.abs(delta) > itemRects[index - 1][itemWidth] * moveFactor) {
+        isOverDragging = isOverDraggingEnd || isOverDraggingStart;
+        moveFactor     = isOverDragging ? 0.02 : 0.55; // We can not use 0.5, since items would jump back & forth
+
+        if (isOverDraggingStart) {
+            if (index > 0) {
                 me.currentIndex--;
+                await me.scrollToIndex();
+                me.switchItems(index, me.currentIndex)
+            }
+        }
 
-                if (data.clientX < me.boundaryContainerRect.left) {
-                    me.isScrolling = true;
-                    await me.owner.scrollToIndex?.(me.currentIndex, itemRects[me.currentIndex]);
-                    me.isScrolling = false
-                }
+        else if (isOverDraggingEnd) {
+            if (index < maxItems) {
+                me.currentIndex++;
+                await me.scrollToIndex();
+                me.switchItems(index, me.currentIndex)
+            }
+        }
 
+        else if (index > 0 && (!reversed && delta < 0 || reversed && delta > 0)) {
+            if (Math.abs(delta) > itemRects[index - 1][itemHeightOrWidth] * moveFactor) {
+                me.currentIndex--;
                 me.switchItems(index, me.currentIndex)
             }
         }
 
         else if (index < maxItems && (!reversed && delta > 0 || reversed && delta < 0)) {
-            if (Math.abs(delta) > itemRects[index + 1][itemWidth] * moveFactor) {
+            if (Math.abs(delta) > itemRects[index + 1][itemHeightOrWidth] * moveFactor) {
                 me.currentIndex++;
+                me.switchItems(index, me.currentIndex)
+            }
+        }
 
-                if (data.clientX > me.boundaryContainerRect.right) {
-                    me.isScrolling = true;
-                    await me.owner.scrollToIndex?.(me.currentIndex, itemRects[me.currentIndex]);
-                    me.isScrolling = false
-                }
+        me.isOverDragging = isOverDragging && me.currentIndex !== 0 && me.currentIndex !== maxItems;
 
-                me.switchItems(index, me.currentIndex)
+        if (me.isOverDragging) {
+            await me.timeout(30); // wait for 1 frame
+
+            if (me.isOverDragging) {
+                await me.onDragMove(data)
             }
         }
     }
@@ -227,7 +251,7 @@ class SortZone extends DragZone {
                 startIndex             : index
             });
 
-            await me.dragStart(data); // we do not want to trigger the super class call here
+            await me.dragStart(data); // We do not want to trigger the super class call here
 
             owner.items.forEach((item, index) => {
                 indexMap[index] = index;
@@ -244,7 +268,7 @@ class SortZone extends DragZone {
                 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.
+                // 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;
 
@@ -277,6 +301,17 @@ class SortZone extends DragZone {
         }
     }
 
+    /**
+     * @returns {Promise<void>}
+     */
+    async scrollToIndex() {
+        let me = this;
+
+        me.isScrolling = true;
+        await me.owner.scrollToIndex?.(me.currentIndex, me.itemRects[me.currentIndex]);
+        me.isScrolling = false
+    }
+
     /**
      * @param {Number} index1
      * @param {Number} index2

package/src/grid/Container.mjs

@@ -1,5 +1,6 @@
 import BaseContainer   from '../container/Base.mjs';
 import ClassSystemUtil from '../util/ClassSystem.mjs';
+import GridScrollbar   from './Scrollbar.mjs';
 import GridView        from './View.mjs';
 import Store           from '../data/Store.mjs';
 import * as header     from './header/_export.mjs';
@@ -70,6 +71,11 @@ class GridContainer extends BaseContainer {
          * @member {Number} rowHeight_=32
          */
         rowHeight_: 32,
+        /**
+         * @member {Neo.grid.Scrollbar|null} scrollbar=null
+         * @protected
+         */
+        scrollbar: null,
         /**
          * @member {Boolean} showHeaderFilters_=false
          */
@@ -98,7 +104,7 @@ class GridContainer extends BaseContainer {
          */
         items: null,
         /**
-         * @member {Object} _vdom={cls:['neo-grid-wrapper'],cn:[{cn:[]}]}
+         * @member {Object} _vdom
          */
         _vdom:
         {cls: ['neo-grid-wrapper'], cn: [
@@ -134,8 +140,8 @@ class GridContainer extends BaseContainer {
     construct(config) {
         super.construct(config);
 
-        let me                 = this,
-            {rowHeight, store} = me;
+        let me = this,
+            {appName, rowHeight, store, windowId} = me;
 
         me.headerToolbarId = Neo.getId('grid-header-toolbar');
         me.viewId          = Neo.getId('grid-view');
@@ -147,13 +153,26 @@ class GridContainer extends BaseContainer {
             sortable         : me.sortable,
             ...me.headerToolbarConfig
         }, {
-            module: GridView,
-            id    : me.viewId,
+            module       : GridView,
+            flex         : 1,
+            gridContainer: me,
+            id           : me.viewId,
             rowHeight,
             store,
             ...me.viewConfig
         }];
 
+        me.scrollbar = Neo.create({
+            module  : GridScrollbar,
+            appName,
+            parentId: me.id,
+            rowHeight,
+            store,
+            windowId
+        });
+
+        me.vdom.cn.push(me.scrollbar.createVdomReference())
+
         me.vdom.id = me.getWrapperId();
 
         me.createColumns(me.columns);
@@ -219,15 +238,10 @@ class GridContainer extends BaseContainer {
      */
     async addResizeObserver(mounted) {
         let me             = this,
-            ResizeObserver = Neo.main?.addon?.ResizeObserver,
             {windowId}     = me,
+            ResizeObserver = await Neo.currentWorker.getAddon('ResizeObserver', windowId),
             resizeParams   = {id: me.id, windowId};
 
-        if (!ResizeObserver) {
-            await Neo.Main.importAddon({name: 'ResizeObserver', windowId});
-            ResizeObserver = Neo.main.addon.ResizeObserver
-        }
-
         if (mounted) {
             ResizeObserver.register(resizeParams);
             await me.passSizeToView()
@@ -505,12 +519,17 @@ class GridContainer extends BaseContainer {
 
     /**
      * @param {Object} data
+     * @param {Number} data.scrollLeft
+     * @param {Object} data.target
      */
-    onScroll({scrollLeft}) {
+    onScroll({scrollLeft, target}) {
         let me = this;
 
-        me.headerToolbar.scrollLeft = scrollLeft;
-        me.view.scrollPosition = {x: scrollLeft, y: me.view.scrollPosition.y}
+        // We must ignore events for grid-scrollbar
+        if (target.id.includes('grid-container')) {
+            me.headerToolbar.scrollLeft = scrollLeft;
+            me.view.scrollPosition = {x: scrollLeft, y: me.view.scrollPosition.y}
+        }
     }
 
     /**

package/src/grid/Scrollbar.mjs

@@ -0,0 +1,118 @@
+import Component from '../component/Base.mjs';
+
+/**
+ * @class Neo.grid.Scrollbar
+ * @extends Neo.component.Base
+ */
+class GridScrollbar extends Component {
+    static config = {
+        /**
+         * @member {String} className='Neo.grid.Scrollbar'
+         * @protected
+         */
+        className: 'Neo.grid.Scrollbar',
+        /**
+         * @member {String} ntype='grid-scrollbar'
+         * @protected
+         */
+        ntype: 'grid-scrollbar',
+        /**
+         * @member {String[]} baseCls=['neo-grid-scrollbar']
+         * @protected
+         */
+        baseCls: ['neo-grid-scrollbar'],
+        /**
+         * Number in px
+         * @member {Number} rowHeight_=0
+         */
+        rowHeight_: 0,
+        /**
+         * @member {Neo.data.Store|null} store_=null
+         */
+        store_: null,
+        /**
+         * @member {Object} _vdom
+         */
+        _vdom:
+        {cn: [
+            {cls: ['neo-grid-scrollbar-content']}
+        ]}
+    }
+
+    /**
+     * @param {Boolean} mounted
+     * @protected
+     */
+    async addScrollSync(mounted) {
+        let me         = this,
+            {windowId} = me,
+            ScrollSync = await Neo.currentWorker.getAddon('ScrollSync', windowId),
+            params     = {id: me.id, windowId};
+
+        if (mounted) {
+            ScrollSync.register({
+                fromId: me.parent.view.vdom.id,
+                toId  : me.id,
+                ...params
+            })
+        } else {
+            ScrollSync.unregister(params)
+        }
+    }
+
+    /**
+     * Triggered after the mounted config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetMounted(value, oldValue) {
+        super.afterSetMounted(value, oldValue);
+        oldValue !== undefined && this.addScrollSync(value)
+    }
+
+    /**
+     * Triggered after the rowHeight config got changed
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @protected
+     */
+    afterSetRowHeight(value, oldValue) {
+        value > 0 && this.updateScrollHeight()
+    }
+
+    /**
+     * Triggered after the store config got changed
+     * @param {Neo.data.Store|null} value
+     * @param {Neo.data.Store|null} oldValue
+     * @protected
+     */
+    afterSetStore(value, oldValue) {
+        if (value) {
+            let me = this;
+
+            value.on({
+                load : me.updateScrollHeight,
+                scope: me
+            });
+
+            value.getCount() > 0 && me.updateScrollHeight()
+        }
+    }
+
+    /**
+     *
+     */
+    updateScrollHeight() {
+        let me           = this,
+            countRecords = me.store.getCount(),
+            {rowHeight}  = me;
+
+        if (countRecords > 0 && rowHeight > 0) {
+            me.vdom.cn[0].height = `${(countRecords + 1) * rowHeight}px`;
+            me.update()
+        }
+    }
+}
+
+export default Neo.setupClass(GridScrollbar);

package/src/grid/View.mjs

@@ -126,7 +126,7 @@ class GridView extends Component {
         _vdom:
         {tabIndex: '-1', cn: [
             {cn: []},
-            {cls: 'neo-grid-scrollbar'}
+            {cls: 'neo-grid-stretcher'}
         ]}
     }
 

package/src/main/addon/ScrollSync.mjs

@@ -0,0 +1,90 @@
+import Base      from './Base.mjs';
+import DomAccess from '../DomAccess.mjs';
+
+/**
+ * Syncs the scroll state of 2 DOM nodes
+ * @class Neo.main.addon.ScrollSync
+ * @extends Neo.main.addon.Base
+ */
+class ScrollSync extends Base {
+    static config = {
+        /**
+         * @member {String} className='Neo.main.addon.ScrollSync'
+         * @protected
+         */
+        className: 'Neo.main.addon.ScrollSync',
+        /**
+         * Remote method access for other workers
+         * @member {Object} remote
+         * @protected
+         */
+        remote: {
+            app: [
+                'register',
+                'unregister'
+            ]
+        }
+    }
+
+    /**
+     * @param {String} fromId
+     * @param {String} toId
+     * @param {String} direction
+     */
+    addScrollListener(fromId, toId, direction) {
+        DomAccess.getElement(fromId)?.addEventListener('scroll', this.onScroll.bind(this, toId, direction))
+    }
+
+    /**
+     * @param {String} toId
+     * @param {String} direction
+     * @param {Event}  event
+     */
+    onScroll(toId, direction, event) {
+        let node                    = DomAccess.getElement(toId),
+            {scrollLeft, scrollTop} = event.target;
+
+        if (node) {
+            if (direction === 'both') {
+                node.scrollTo({
+                    behavior: 'instant',
+                    left    : scrollLeft,
+                    top     : scrollTop
+                })
+            } else if (direction === 'horizontal') {
+                node.scrollLeft = scrollLeft
+            } else if (direction === 'vertical') {
+                node.scrollTop = scrollTop
+            }
+        }
+    }
+
+    /**
+     * @param {Object}  data
+     * @param {String}  direction='vertical' 'horizontal', 'vertical' or 'both'
+     * @param {String}  fromId
+     * @param {String}  id                   The owner id (e.g. component id)
+     * @param {String}  toId
+     * @param {Boolean} twoWay=true          Sync the target's scroll state back to the source node
+     */
+    register({direction='vertical', fromId, id, toId, twoWay=true}) {
+        console.log('register', direction, fromId, id, toId, twoWay);
+
+        let me = this;
+
+        me.addScrollListener(fromId, toId, direction);
+
+        if (twoWay) {
+            me.addScrollListener(toId, fromId, direction)
+        }
+    }
+
+    /**
+     * @param {Object} data
+     */
+    unregister(data) {
+        console.log('unregister', data)
+    }
+}
+
+export default Neo.setupClass(ScrollSync);

package/src/worker/App.mjs

@@ -242,6 +242,23 @@ class App extends Base {
         })
     }
 
+    /**
+     * Convenience shortcut to lazy-load main thread addons, in case they are not imported yet
+     * @param {String} name
+     * @param {Number} windowId
+     * @returns {Promise<Neo.main.addon.Base>} The namespace of the addon to use via remote method access
+     */
+    async getAddon(name, windowId) {
+        let addon = Neo.main?.addon?.[name];
+
+        if (!addon) {
+            await Neo.Main.importAddon({name, windowId});
+            addon = Neo.main.addon[name]
+        }
+
+        return addon
+    }
+
     /**
      * Get configs of any app realm based Neo instance from main
      * @param {Object} data