neo.mjs 6.19.3 → 6.20.0

package/apps/ServiceWorker.mjs

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

package/apps/portal/view/home/parts/Colors.mjs

@@ -24,6 +24,7 @@ class Colors extends BaseContainer {
          */
         items: [{
             ntype : 'container',
+            cls   : ['portal-content-text'],
             flex  : '1',
             style : {padding: '2rem'},
             layout: {ntype: 'vbox', align: 'center', pack: 'center'},

package/apps/portal/view/home/parts/Features.mjs

@@ -25,23 +25,71 @@ class Features extends BaseContainer {
          */
         items: [{
             module: ContentBox,
-            header: 'Next-Generation Runtime',
+            header: 'Multi-Window Apps',
             route : '#/learn/WhyNeo-Quick',
 
             content: [
-                'Multi-threaded',
-                'Elegant state management',
-                'Simple and powerful debugging'
+                'No need for a Native Shell (e.g. Electron)',
+                'Sharing Data across Windows',
+                'Sharing State across Windows',
+                'Moving Components across Windows while keeping the same JS instances'
             ]
         }, {
             module: ContentBox,
-            header: 'Extreme Speed',
+            header: 'Multi-threading',
+            route : '#/learn/WhyNeo-Quick',
+
+            content: [
+                'Following the OMT (Off the Main-Thread) paradigm',
+                'Your Apps & the Framework live within an Application Worker',
+                'Non-blocking, no-freeze, user interaction responses, even for heavy data i/o, processing, and intensive, complex screen updating',
+                'Additional Workers for OffscreenCanvas, Data, Delta-Updates & Tasks',
+                'A ServiceWorker connected to the App Worker for predictive Caching'
+            ]
+        }, {
+            module: ContentBox,
+            header: 'Modern JavaScript directly in your Browser',
+            route : '#/learn/WhyNeo-Quick',
+
+            content: [
+                'The Dev-Mode runs without the need for Transpilations or Compilations',
+                'Using the latest ECMAScript Features, as soon as the Browser Support is there',
+                'Simple and powerful Debugging',
+                'Reduced Development Costs'
+            ]
+        }, {
+            module: ContentBox,
+            header: 'Powerful Component-Library',
+            route : '#/learn/WhyNeo-Quick',
+
+            content: [
+                'Declarative Component-Trees',
+                'High Order Components',
+                'Many out-of-the-box Components, including nested lazy-loaded forms',
+                'Multiple themes, which can get nested'
+            ]
+        }, {
+            module: ContentBox,
+            header: 'Elegant State Management',
+            route : '#/learn/WhyNeo-Speed',
+
+            content: [
+                'Multiple communicating State-Providers',
+                'Observable',
+                'Supporting different architectures like MVVM without enforcing them'
+            ]
+        }, {
+            module: ContentBox,
+            header: 'Core Features',
             route : '#/learn/WhyNeo-Speed',
 
             content: [
-                'Multi-threaded',
-                'Over 40,000 delta updates per second',
-                'Item 3'
+                'RPC Layer (cross-realm, including Backends)',
+                'Extensibility',
+                'Scalability',
+                'Class Config System',
+                'Drag & Drop',
+                'Mixins, Plugins & Main-Thread Addons'
             ]
         }]
     }

package/apps/portal/view/home/parts/Helix.mjs

@@ -24,6 +24,7 @@ class Helix extends BaseContainer {
          */
         items: [{
             ntype : 'container',
+            cls   : ['portal-content-text'],
             flex  : '1',
             style : {padding: '2rem'},
             layout: {ntype: 'vbox', align: 'center', pack: 'center'},

package/apps/portal/view/home/parts/How.mjs

@@ -23,6 +23,7 @@ class How extends BaseContainer {
          */
         items: [{
             ntype : 'container',
+            cls   : ['portal-content-text'],
             flex  : '1',
             style : {padding: '2rem'},
             layout: {ntype: 'vbox', align: 'center', pack: 'center'},

package/examples/ServiceWorker.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "6.19.3",
+    "version": "6.20.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -52,7 +52,7 @@
         "envinfo": "^7.13.0",
         "fs-extra": "^11.2.0",
         "highlightjs-line-numbers.js": "^2.8.0",
-        "inquirer": "^10.1.0",
+        "inquirer": "^10.1.2",
         "marked": "^13.0.2",
         "monaco-editor": "^0.50.0",
         "neo-jsdoc": "1.0.1",

package/resources/scss/src/apps/portal/home/ContentBox.scss

@@ -2,7 +2,6 @@
     border         : 1px solid darkgray;
     cursor         : pointer;
     color          : #000;
-    height         : 200px;
     margin-top     : 2em;
     padding        : 0 1em 1em 1em;
     text-decoration: none;
@@ -23,4 +22,8 @@
     .portal-content-box-header {
 
     }
+
+    @media (max-width: 600px) {
+        margin-right: 0;
+    }
 }

package/resources/scss/src/apps/portal/home/parts/BaseContainer.scss

@@ -53,4 +53,11 @@
     .page-live-preview {
         margin: 0;
     }
+
+    .portal-content-text {
+        @media (max-width: 600px) {
+            justify-content: start;
+            overflow-y     : auto;
+        }
+    }
 }

package/resources/scss/src/apps/portal/home/parts/Features.scss

@@ -1,3 +1,5 @@
 .portal-home-features {
-    padding: 3em;
+    padding      : 3em;
+    overflow-y   : auto;
+    place-content: start;
 }

package/resources/scss/src/apps/portal/learn/PageContainer.scss

@@ -16,6 +16,12 @@
             .neo-button-text, .neo-button-glyph {
                 padding-top: 16px;
             }
+
+            .neo-button-text {
+                overflow     : hidden;
+                text-overflow: ellipsis;
+                word-break   : break-word;
+            }
         }
 
         .content-bottom-toolbar-previous:before {

package/src/DefaultConfig.mjs

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

package/src/component/Helix.mjs

@@ -258,9 +258,10 @@ class Helix extends Component {
         me[lockWheel]    = true;
 
         me.addDomListeners({
-            click: me.onClick,
-            wheel: me.onMouseWheel,
-            scope: me
+            click    : me.onClick,
+            touchmove: me.onTouchMove,
+            wheel    : me.onMouseWheel,
+            scope    : me
         })
     }
 
@@ -840,6 +841,13 @@ class Helix extends Component {
         }
     }
 
+    /**
+     * @param {Object} data
+     */
+    onTouchMove(data) {
+        this.onMouseWheel(data)
+    }
+
     /**
      * @param {String[]} value
      * @param {String[]} oldValue

package/src/list/Base.mjs

@@ -769,7 +769,6 @@ class Base extends Component {
      * @param {Number} data.index
      * @param {Neo.data.Model} data.model
      * @param {Object} data.record
-     *
      */
     onStoreRecordChange(data) {
         let me      = this,

package/src/main/DomEvents.mjs

@@ -111,6 +111,12 @@ class DomEvents extends Base {
         }
     }
 
+    /**
+     *
+     * @member {Object} touch
+     */
+    lastTouch = null
+
     /**
      * @param {Object} config
      */

package/src/main/mixin/TouchDomEvents.mjs

@@ -19,14 +19,20 @@ class TouchDomEvents extends Base {
      * @param {Object} event
      */
     onTouchCancel(event) {
-        this.sendMessageToApp(this.getEventData(event))
+        let me = this;
+
+        me.sendMessageToApp(me.getEventData(event));
+        me.lastTouch = null
     }
 
     /**
      * @param {Object} event
      */
     onTouchEnd(event) {
-        this.sendMessageToApp(this.getEventData(event))
+        let me = this;
+
+        me.sendMessageToApp(me.getEventData(event));
+        me.lastTouch = null
     }
 
     /**
@@ -47,14 +53,31 @@ class TouchDomEvents extends Base {
      * @param {Object} event
      */
     onTouchMove(event) {
-        this.sendMessageToApp(this.getEventData(event))
+        let me          = this,
+            data        = me.getEventData(event),
+            touch       = event.touches[0],
+            {lastTouch} = me;
+
+        if (lastTouch) {
+            Object.assign(data, {
+                deltaX: touch.clientX - lastTouch.clientX,
+                deltaY: touch.clientY - lastTouch.clientY
+            })
+        }
+
+        me.sendMessageToApp(data);
+        me.lastTouch = touch
     }
 
     /**
      * @param {Object} event
      */
     onTouchStart(event) {
-        this.sendMessageToApp(this.getEventData(event))
+        let me = this;
+
+        me.lastTouch = event.touches[0];
+
+        me.sendMessageToApp(me.getEventData(event))
     }
 }
 

package/src/manager/DomEvent.mjs

@@ -34,6 +34,7 @@ const globalDomEvents = [
     'neonavigate',
     'scroll',
     'selectionchange',
+    'touchmove',
     'wheel'
 ];
 

package/src/tree/List.mjs

@@ -3,6 +3,7 @@ import ClassSystemUtil from '../util/ClassSystem.mjs';
 import Collection      from '../collection/Base.mjs';
 import NeoArray        from '../util/Array.mjs';
 import TreeModel       from '../selection/TreeModel.mjs';
+import VDomUtil        from "../util/VDom.mjs";
 
 /**
  * @class Neo.tree.List
@@ -172,6 +173,53 @@ class Tree extends Base {
         }
     }
 
+    /**
+     *
+     * @param {Object} record
+     * @returns {Object}
+     */
+    createItem(record) {
+        let me                   = this,
+            {folderCls, itemCls} = me,
+            cls                  = [itemCls],
+            itemVdom;
+
+        if (record.isLeaf) {
+            cls.push(itemCls + (record.singleton ? '-leaf-singleton' : '-leaf'))
+        } else {
+            cls.push(folderCls);
+
+            if (!record.collapsed) {
+                cls.push('neo-folder-open')
+            }
+        }
+
+        itemVdom = {
+            tag: 'li',
+            cls,
+            id : me.getItemId(record.id),
+            cn : [{
+                tag      : 'span',
+                cls      : [itemCls + '-content', record.iconCls],
+                innerHTML: record.name,
+                style    : {pointerEvents: 'none'}
+            }],
+            style: {
+                display : record.hidden ? 'none' : 'flex',
+                padding : '10px',
+                position: record.isLeaf ? null : 'sticky',
+                top     : record.isLeaf ? null : (record.level * 38) + 'px',
+                zIndex  : record.isLeaf ? null : (20 / (record.level + 1))
+            }
+        };
+
+        if (me.itemsFocusable) {
+            itemVdom.tabIndex = -1
+        }
+
+        return itemVdom
+    }
+
     /**
      * @param {String} [parentId] The parent node
      * @param {Object} [vdomRoot] The vdom template root for the current sub tree
@@ -181,10 +229,9 @@ class Tree extends Base {
      * @protected
      */
     createItems(parentId, vdomRoot, level, hidden=false) {
-        let me                   = this,
-            items                = me.store.find('parentId', parentId),
-            {folderCls, itemCls} = me,
-            cls, itemVdom, tmpRoot;
+        let me    = this,
+            items = me.store.find('parentId', parentId),
+            tmpRoot;
 
         if (items.length > 0) {
             if (!vdomRoot.cn) {
@@ -207,45 +254,12 @@ class Tree extends Base {
                 tmpRoot = vdomRoot
             }
 
-            items.forEach(item => {
-                cls = [itemCls];
-
-                if (item.isLeaf) {
-                    cls.push(itemCls + (item.singleton ? '-leaf-singleton' : '-leaf'))
-                } else {
-                    cls.push(folderCls);
-
-                    if (!item.collapsed) {
-                        cls.push('neo-folder-open')
-                    }
-                }
+            items.forEach(record => {
+                record.level = level;
 
-                itemVdom = {
-                    tag: 'li',
-                    cls,
-                    id : me.getItemId(item.id),
-                    cn : [{
-                        tag      : 'span',
-                        cls      : [itemCls + '-content', item.iconCls],
-                        innerHTML: item.name,
-                        style    : {pointerEvents: 'none'}
-                    }],
-                    style: {
-                        display : item.hidden ? 'none' : 'flex',
-                        padding : '10px',
-                        position: item.isLeaf ? null : 'sticky',
-                        top     : item.isLeaf ? null : (level * 38) + 'px',
-                        zIndex  : item.isLeaf ? null : (20 / (level + 1))
-                    }
-                };
+                tmpRoot.cn.push(me.createItem(record));
 
-                if (me.itemsFocusable) {
-                    itemVdom.tabIndex = -1
-                }
-
-                tmpRoot.cn.push(itemVdom);
-
-                me.createItems(item.id, tmpRoot, level + 1, item.hidden || hidden)
+                me.createItems(record.id, tmpRoot, level + 1, record.hidden || hidden)
             })
         }
 
@@ -435,6 +449,23 @@ class Tree extends Base {
             this.expandAll()
         }
     }
+
+    /**
+     * @param {Object} data
+     * @param {Object[]} data.fields Each field object contains the keys: name, oldValue, value
+     * @param {Number} data.index
+     * @param {Neo.data.Model} data.model
+     * @param {Object} data.record
+     */
+    onStoreRecordChange(data) {
+        let me                  = this,
+            {record}            = data,
+            {index, parentNode} = VDomUtil.findVdomChild(me.vdom, me.getItemId(record.id));
+
+        parentNode.cn[index] = me.createItem(record);
+
+        me.update()
+    }
 }
 
 Neo.setupClass(Tree);