neo.mjs 6.5.1 → 6.5.3

package/apps/ServiceWorker.mjs

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

package/apps/form/view/FormContainerController.mjs

@@ -19,12 +19,10 @@ class FormContainerController extends Component {
     onComponentConstructed() {
         super.onComponentConstructed();
 
-        this.component.on('fieldFocusLeave', data => {
-            console.log('fieldFocusLeave', data);
-        })
-
-        this.component.on('fieldChange', data => {
-            console.log('fieldChange', data);
+        this.component.on({
+            fieldChange    : data => console.log('fieldChange'    , data),
+            fieldFocusLeave: data => console.log('fieldFocusLeave', data),
+            fieldUserChange: data => console.log('fieldUserChange', data)
         })
     }
 

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.1'
+         * @member {String} version='6.5.3'
          */
-        version: '6.5.1'
+        version: '6.5.3'
     }
 
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "6.5.1",
+    "version": "6.5.3",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -53,11 +53,11 @@
         "envinfo": "^7.10.0",
         "fs-extra": "^11.1.1",
         "highlightjs-line-numbers.js": "^2.8.0",
-        "inquirer": "^9.2.10",
+        "inquirer": "^9.2.11",
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
         "postcss": "^8.4.29",
-        "sass": "^1.66.1",
+        "sass": "^1.67.0",
         "showdown": "^2.1.0",
         "webpack": "^5.88.2",
         "webpack-cli": "^5.1.4",
@@ -67,7 +67,7 @@
     },
     "devDependencies": {
         "siesta-lite": "5.5.2",
-        "url": "^0.11.1"
+        "url": "^0.11.2"
     },
     "funding": {
         "type": "GitHub Sponsors",

package/src/DefaultConfig.mjs

@@ -236,12 +236,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '6.5.1'
+     * @default '6.5.3'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '6.5.1'
+    version: '6.5.3'
 };
 
 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

package/src/form/field/Base.mjs

@@ -7,6 +7,16 @@ import ComponentManager from '../../manager/Component.mjs';
  * @extends Neo.component.Base
  */
 class Base extends Component {
+    /**
+     * @member {Object} delayable
+     * @protected
+     * @static
+     */
+    static delayable = {
+        fireChangeEvent    : {type: 'debounce', timer: 300},
+        fireUserChangeEvent: {type: 'debounce', timer: 300}
+    }
+
     static config = {
         /**
          * @member {String} className='Neo.form.field.Base'
@@ -127,29 +137,49 @@ class Base extends Component {
 
     /**
      * Override this method as needed
-     * @param {*} value
-     * @param {*} oldValue
+     * @param {*}      value
+     * @param {*}      oldValue
+     * @param {String} eventName
      */
-    fireChangeEvent(value, oldValue) {
+    doFireChangeEvent(value, oldValue, eventName) {
         let me            = this,
             FormContainer = Neo.form?.Container,
+            formEvent     = 'field' + Neo.capitalize(eventName),
             opts          = {component: me, oldValue, value};
 
         if (Neo.isFunction(me.getGroupValue)) {
             opts.groupValue = me.getGroupValue()
         }
 
-        me.fire('change', opts);
+        me.fire(eventName, opts);
 
         if (!me.suspendEvents) {
             ComponentManager.getParents(me).forEach(parent => {
                 if (FormContainer && parent instanceof FormContainer) {
-                    parent.fire('fieldChange', opts)
+                    parent.fire(formEvent, opts)
                 }
             })
         }
     }
 
+    /**
+     * Override this method as needed
+     * @param {*} value
+     * @param {*} oldValue
+     */
+    fireChangeEvent(value, oldValue) {
+        this.doFireChangeEvent(value, oldValue, 'change')
+    }
+
+    /**
+     * Override this method as needed
+     * @param {*} value
+     * @param {*} oldValue
+     */
+    fireUserChangeEvent(value, oldValue) {
+        this.doFireChangeEvent(value, oldValue, 'userChange')
+    }
+
     /**
      * Forms in neo can be nested. This method will return the closest parent which is a form.Container or null.
      * @returns {Neo.form.Container|null}

package/src/form/field/CheckBox.mjs

@@ -525,7 +525,9 @@ class CheckBox extends Base {
         // keep the vdom & vnode in sync for future updates
         me.vnode.childNodes[0].childNodes[me.hideLabel ? 0 : 1].attributes.checked = `${checked}`;
 
-        me.checked = checked
+        me.checked = checked;
+
+        me.fireUserChangeEvent(me.getValue(), me.getOldValue())
     }
 
     /**

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']
@@ -1231,16 +1242,19 @@ class Text extends Base {
      * @protected
      */
     onInputValueChange(data) {
-        let me    = this,
-            value = data.value,
-            vnode = VNodeUtil.findChildVnode(me.vnode, {nodeName: 'input'});
+        let me       = this,
+            oldValue = me.value,
+            value    = data.value,
+            vnode    = VNodeUtil.findChildVnode(me.vnode, {nodeName: 'input'});
 
         if (vnode) {
             // required for validation -> revert a wrong user input
             vnode.vnode.attributes.value = value;
         }
 
-        me.value = me.inputValueAdjustor(value)
+        me.value = me.inputValueAdjustor(value);
+
+        me.fireUserChangeEvent(value, oldValue)
     }
 
     /**

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=300
+ * @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]}`
                 });
             }