neo.mjs 6.5.0 → 6.5.2

package/apps/ServiceWorker.mjs

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

package/apps/form/view/pages/Page1.mjs

@@ -1,3 +1,4 @@
+import Button            from '../../../../src/button/Base.mjs';
 import FormPageContainer from '../FormPageContainer.mjs';
 import TextField         from '../../../../src/form/field/Text.mjs';
 
@@ -31,8 +32,21 @@ class Page1 extends FormPageContainer {
             name     : 'status',
             readOnly : true,
             value    : 'Active'
+        }, {
+            module : Button,
+            handler: Page1.buttonHandler,
+            style  : {marginTop: '2em', maxWidth: '300px'},
+            text   : 'Change values'
         }]
     }
+
+    static buttonHandler(data) {
+        let container = data.component.up();
+
+        container.items[0].value = Math.random();
+        container.items[1].value = Math.random();
+        container.items[2].value = Math.random()
+    }
 }
 
 Neo.applyClassConfig(Page1);

package/examples/ServiceWorker.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "6.5.0",
+    "version": "6.5.2",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

package/src/DefaultConfig.mjs

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

package/src/core/Base.mjs

@@ -1,3 +1,4 @@
+import {debounce}  from '../util/Function.mjs';
 import IdGenerator from './IdGenerator.mjs'
 
 const configSymbol       = Symbol.for('configSymbol'),
@@ -17,6 +18,20 @@ class Base {
      * @static
      */
     static methodNameRegex = /\n.*\n\s+at\s+.*\.(\w+)\s+.*/
+    /**
+     * You can define methods which should get delayed
+     * @example
+     *  delayable: {
+     *      fireChangeEvent: {
+     *          type : 'debounce',
+     *          timer: 300
+     *      }
+     *  }
+     * @member {Object} delayable={}
+     * @protected
+     * @static
+     */
+    static delayable = {}
     /**
      * True automatically applies the core.Observable mixin
      * @member {Boolean} observable=false
@@ -126,6 +141,8 @@ class Base {
             value     : true
         });
 
+        me.applyDelayable();
+
         me.remote && setTimeout(me.initRemote.bind(me), 1)
     }
 
@@ -157,6 +174,23 @@ class Base {
         }
     }
 
+    /**
+     * Adjusts all methods inside static delayable
+     */
+    applyDelayable() {
+        let me = this;
+
+        Object.entries(me.constructor.delayable).forEach(([key, value]) => {
+            let map = {
+                debounce() {
+                    me[key] = new debounce(me[key], me, value.timer)
+                }
+            };
+
+            map[value.type]?.()
+        })
+    }
+
     /**
      * Applying overwrites and adding overwrittenMethods to the class constructors
      * @param {Object} cfg

package/src/data/connection/WebSocket.mjs

@@ -1,6 +1,6 @@
-import Base        from '../../core/Base.mjs';
-import NeoFunction from '../../util/Function.mjs';
-import Observable  from '../../core/Observable.mjs';
+import Base                from '../../core/Base.mjs';
+import {createInterceptor} from '../../util/Function.mjs';
+import Observable          from '../../core/Observable.mjs';
 
 /**
  * @class Neo.data.connection.WebSocket
@@ -120,7 +120,7 @@ class Socket extends Base {
                 onopen   : me.onOpen   .bind(me)
             });
 
-            NeoFunction.createInterceptor(value, 'send', me.beforeSend, me);
+            createInterceptor(value, 'send', me.beforeSend, me);
         }
 
         return value;

package/src/form/Container.mjs

@@ -33,7 +33,6 @@ class Container extends BaseContainer {
 
     /**
      * Helper function used by setValues() which wraps the leaves of a tree structure into a new property.
-     * The logic assumes that field config values must not be objects (separation between the key & value realm).
      * @param {Object} values
      * @param {String} configName
      * @param {String[]} fieldPaths
@@ -313,11 +312,15 @@ class Container extends BaseContainer {
      */
     async setValues(values={}, suspendEvents=false) {
         let fields     = await this.getFields(),
-            fieldPaths = [];
+            fieldPaths = [],
+            path;
 
         // Grouped CheckBoxes & Radios can have the same path
         // => using NeoArray to ensure they only get added once
-        fields.map(field => NeoArray.add(fieldPaths, field.getPath()));
+        fields.map(field => {
+            path = field.getPath();
+            path && NeoArray.add(fieldPaths, path)
+        });
 
         values = Neo.clone(values, true);
 

package/src/form/field/Base.mjs

@@ -184,6 +184,13 @@ class Base extends Component {
         let me = this,
             path;
 
+        // fields could have formGroups, but no name.
+        // returning the namespace can confuse form.Container.adjustTreeLeaves(),
+        // since namespaces could be considered as field instances.
+        if (!me.name) {
+            return null
+        }
+
         if (!me.path) {
             path = me.formGroup ? me.formGroup.split('.') : [];
 

package/src/form/field/Text.mjs

@@ -17,6 +17,17 @@ class Text extends Base {
      * @static
      */
     static autoCapitalizeValues = ['characters', 'none', 'on', 'off', 'sentences', 'words']
+    /**
+     * @member {Object} delayable
+     * @protected
+     * @static
+     */
+    static delayable = {
+        fireChangeEvent: {
+            type : 'debounce',
+            timer: 300
+        }
+    }
     /**
      * Valid values for labelPosition
      * @member {String[]} labelPositions=['bottom','inline','left','right','top']

package/src/util/Function.mjs

@@ -1,84 +1,93 @@
-import Base from '../core/Base.mjs';
-
 /**
- * @class Neo.util.Function
- * @extends Neo.core.Base
+ * Append args instead of prepending them
+ * @param {Object} scope
+ * @returns {Function}
  */
-class NeoFunction extends Base {
-    static config = {
-        /**
-         * @member {String} className='Neo.util.Function'
-         * @protected
-         */
-        className: 'Neo.util.Function'
+export function bindAppend(scope) {
+    const fn   = this,
+          args = [].slice.call(arguments).slice(1);
+
+    return function() {
+        return fn.apply(scope, [].slice.call(arguments).concat(args))
     }
+}
 
-    /**
-     * Append args instead of prepending them
-     * @param {Object} scope
-     * @returns {Function}
-     */
-    static bindAppend(scope) {
-        const fn   = this,
-              args = [].slice.call(arguments).slice(1);
+/**
+ * Intended for functions with 1 param where the interceptor can change the value
+ * @param {Object} target
+ * @param {String} targetMethodName
+ * @param {Function} interceptFunction
+ * @param {Object} scope=target
+ * @returns {Function}
+ */
+export function createInterceptor(target, targetMethodName, interceptFunction, scope) {
+    let targetMethod = target[targetMethodName];
 
-        return function() {
-            return fn.apply(scope, [].slice.call(arguments).concat(args));
-        }
-    }
+    return (target[targetMethodName] = function(value) {
+        return targetMethod.call(target, interceptFunction.call(scope || target, value))
+    })
+}
 
-    /**
-     * Intended for functions with 1 param where the interceptor can change the value
-     * @param {Object} target
-     * @param {String} targetMethodName
-     * @param {Function} interceptFunction
-     * @param {Object} scope=target
-     * @returns {Function}
-     */
-    static createInterceptor(target, targetMethodName, interceptFunction, scope) {
-        let targetMethod = target[targetMethodName];
+/**
+ * @param {Neo.core.Base} target
+ * @param {String} methodName
+ * @param {Function} fn
+ * @param {Object} scope
+ * @returns {Function}
+ */
+export function createSequence(target, methodName, fn, scope) {
+    let method = target[methodName] || Neo.emptyFn;
 
-        return (target[targetMethodName] = function(value) {
-            return targetMethod.call(target, interceptFunction.call(scope || target, value));
-        });
-    }
+    return (target[methodName] = function() {
+        method.apply(this, arguments);
+        return fn.apply(scope || this, arguments);
+    })
+}
 
-    /**
-     * @param {Neo.core.Base} target
-     * @param {String} methodName
-     * @param {Function} fn
-     * @param {Object} scope
-     * @returns {Function}
-     */
-    static createSequence(target, methodName, fn, scope) {
-        let method = target[methodName] || Neo.emptyFn;
+/**
+ * @param {Function} func
+ * @param {Neo.core.Base} scope
+ * @param {Number} timeout
+ * @returns {Function}
+ */
+export function debounce(func, scope, timeout=300) {
+    let debounceTimer;
 
-        return (target[methodName] = function() {
-            method.apply(this, arguments);
-            return fn.apply(scope || this, arguments);
-        });
-    }
+    return function(...args) {
+        // leading edge => trigger the first call right away
+        if (!Neo.isNumber(debounceTimer)) {
+            // we need to check if the scope (instance) did not get destroyed yet
+            scope?.id && func.apply(scope, args);
 
-    /**
-     * The interceptor can prevent the targetMethod from getting executed in case it returns false.
-     * @param {Object} target
-     * @param {String} targetMethodName
-     * @param {Function} interceptFunction
-     * @param {Object} scope=target
-     * @param {*} preventedReturnValue=null The value to return in case the interceptFunction returns false
-     * @returns {Function}
-     */
-    static intercept(target, targetMethodName, interceptFunction, scope, preventedReturnValue=null) {
-        let targetMethod = target[targetMethodName];
+            // we still want to start a timer, do delay the 2nd+ update
+            debounceTimer = setTimeout(() => {debounceTimer = null},  timeout)
+        } else {
+            clearTimeout(debounceTimer);
 
-        return (target[targetMethodName] = function() {
-            return (interceptFunction.apply(scope || target, arguments) === false)
-                ? preventedReturnValue
-                : targetMethod.apply(target, arguments);
-        });
+            debounceTimer = setTimeout(() => {
+                // we need to check if the scope (instance) did not get destroyed yet
+                scope?.id && func.apply(scope, args);
+                debounceTimer = setTimeout(() => {debounceTimer = null},  timeout)
+            },  timeout)
+        }
     }
 }
 
-Neo.applyClassConfig(NeoFunction);
+/**
+ * The interceptor can prevent the targetMethod from getting executed in case it returns false.
+ * @param {Object} target
+ * @param {String} targetMethodName
+ * @param {Function} interceptFunction
+ * @param {Object} scope=target
+ * @param {*} preventedReturnValue=null The value to return in case the interceptFunction returns false
+ * @returns {Function}
+ */
+export function intercept(target, targetMethodName, interceptFunction, scope, preventedReturnValue=null) {
+    let targetMethod = target[targetMethodName];
 
-export default NeoFunction;
+    return (target[targetMethodName] = function() {
+        return (interceptFunction.apply(scope || target, arguments) === false)
+            ? preventedReturnValue
+            : targetMethod.apply(target, arguments)
+    })
+}

package/src/util/Rectangle.mjs

@@ -451,11 +451,11 @@ export default class Rectangle extends DOMRect {
 
                 // Fall back to the other two zones.
                 zonesToTry.push({
-                    zone      : zone = (alignSpec.startZone + 1) % 4,
+                    zone      : zone = (edges.theirEdgeZone + 1) % 4,
                     edgeAlign : `${oppositeEdge[zoneEdges[zone]]}-${zoneEdges[zone]}`
                 });
                 zonesToTry.push({
-                    zone      : zone = (zone + 2) % 4,
+                    zone      : zone = (edges.theirEdgeZone + 3) % 4,
                     edgeAlign : `${oppositeEdge[zoneEdges[zone]]}-${zoneEdges[zone]}`
                 });
             }