neo.mjs 7.15.0 → 8.0.0-alpha.1

package/src/calendar/view/week/Component.mjs

@@ -190,6 +190,7 @@ class Component extends BaseComponent {
          * @protected
          */
         totalColumns: null,
+        updateDepth: -1,
         /**
          * @member {Object} vdom
          */
@@ -224,17 +225,16 @@ class Component extends BaseComponent {
             {wheel   : me.onWheel,            scope: me}
         ]);
 
-        me.timeAxis = Neo.create(TimeAxisComponent, {
+        me.timeAxis = Neo.create({
+            module   : TimeAxisComponent,
             appName  : me.appName,
             parentId : me.id,
-            listeners: {
-                change: me.onTimeAxisChange,
-                scope : me
-            },
+            listeners: {change: me.onTimeAxisChange, scope : me},
+            windowId : me.windowId,
             ...me.timeAxisConfig
         });
 
-        me.getColumnTimeAxisContainer().cn[me.timeAxisPosition === 'start' ? 'unshift' : 'push'](me.timeAxis.vdom);
+        me.getColumnTimeAxisContainer().cn[me.timeAxisPosition === 'start' ? 'unshift' : 'push'](me.timeAxis.createVdomReference());
 
         if (me.calendarStore.getCount() > 0 && me.eventStore.getCount() > 0) {
             me.needsEventUpdate = true
@@ -686,7 +686,7 @@ class Component extends BaseComponent {
             let me                 = this,
                 {editEventContainer} = me.owner,
                 eventNode          = path[0],
-                eventVdom          = VDomUtil.findVdomChild(me.vdom, eventNode.id).vdom,
+                eventVdom          = VDomUtil.find(me.vdom, eventNode.id).vdom,
                 record             = me.eventStore.get(eventVdom.flag),
                 {style}            = editEventContainer;
 

package/src/calendar/view/week/EventDragZone.mjs

@@ -219,7 +219,7 @@ class EventDragZone extends DragZone {
             endDate   = me.newEndDate;
             startDate = me.newStartDate || record.startDate
         } else {
-            startDate = new Date(VDomUtil.findVdomChild(owner.vdom, me.proxyParentId).vdom.flag + 'T00:00:00.000Z');
+            startDate = new Date(VDomUtil.find(owner.vdom, me.proxyParentId).vdom.flag + 'T00:00:00.000Z');
             startDate.setHours(me.axisStartTime);
             startDate.setMinutes(me.currentInterval * me.intervalSize);
 

package/src/calendar/view/week/TimeAxisComponent.mjs

@@ -187,8 +187,8 @@ class TimeAxisComponent extends Component {
             html = i === 24 ? '00:00' : (i < 10 ? '0' : '') + i + ':00';
 
             vdom.cn.push({
-                cls  : ['neo-c-w-timeaxis-item'],
-                cn   : [{html: html}]
+                cls: ['neo-c-w-timeaxis-item'],
+                cn : [{html}]
             })
         }
     }

package/src/calendar/view/week/plugin/DragDrop.mjs

@@ -188,7 +188,7 @@ class DragDrop extends Base {
                 intervalHeight  = columnRect.height / intervals,
                 position        = Math.min(columnRect.height, data.clientY - columnRect.top),
                 currentInterval = Math.floor(position / intervalHeight),
-                startDate       = new Date(VDomUtil.findVdomChild(owner.vdom, data.path[0].id).vdom.flag + 'T00:00:00.000Z'),
+                startDate       = new Date(VDomUtil.find(owner.vdom, data.path[0].id).vdom.flag + 'T00:00:00.000Z'),
                 dragElement, endDate, eventDragZone, eventId, record;
 
             me.isDragging = true;
@@ -216,7 +216,7 @@ class DragDrop extends Base {
             // wait until the new event got mounted
             me.timeout(50).then(() => {
                 eventId     = owner.getEventId(record.id);
-                dragElement = VDomUtil.findVdomChild(owner.vdom, eventId).vdom;
+                dragElement = VDomUtil.find(owner.vdom, eventId).vdom;
 
                 eventDragZone = me.getEventDragZone({
                     dragElement,
@@ -294,7 +294,7 @@ class DragDrop extends Base {
 
             me.isDragging = true;
 
-            dragElement = VDomUtil.findVdomChild(owner.vdom, data.path[0].id).vdom;
+            dragElement = VDomUtil.find(owner.vdom, data.path[0].id).vdom;
 
             eventDragZone = me.getEventDragZone({
                 dragElement,

package/src/collection/Base.mjs

@@ -734,7 +734,8 @@ class Base extends CoreBase {
     }
 
     /**
-     * Returns items which match the property and value
+     * Returns items which match the property and value.
+     * Properties can contain dots for namespaces => find('vdom.id', 'neo-vnode-1')
      * @param {Object|String} property
      * @param {String|Number} [value] Only required in case the first param is a string
      * @param {Boolean} returnFirstMatch=false
@@ -758,7 +759,7 @@ class Base extends CoreBase {
                 matchArray = [];
 
                 propertiesArray.forEach(([key, value]) => {
-                    if (item[key] === value) {
+                    if (Neo.ns(key, false, item) === value) {
                         matchArray.push(true)
                     }
                 });
@@ -770,7 +771,7 @@ class Base extends CoreBase {
 
                     items.push(item)
                 }
-            } else if (item[property] === value) {
+            } else if (Neo.ns(property, false, item) === value) {
                 if (returnFirstMatch) {
                     return item
                 }

package/src/component/Base.mjs

@@ -359,6 +359,15 @@ class Base extends CoreBase {
          * @member {String|null} ui_=null
          */
         ui_: null,
+        /**
+         * Defines the depth of the vdom tree for the next update cycle.
+         * - The value 1 will only send the current vdom structure as it is
+         * - The value of 2 will include the vdom of direct children
+         * - The value of 3 will include the vdom of grandchildren
+         * - The value of -1 will include the full tree of any depth
+         * @member {Number} updateDepth_=1
+         */
+        updateDepth_: 1,
         /**
          * The component vnode tree. Available after the component got rendered.
          * @member {Object} vnode_=null
@@ -713,7 +722,7 @@ class Base extends CoreBase {
         this.changeVdomRootKey('id', value);
 
         oldValue && ComponentManager.unregister(oldValue);
-        ComponentManager.register(this)
+        value    && ComponentManager.register(this)
     }
 
     /**
@@ -1346,6 +1355,21 @@ class Base extends CoreBase {
         return (Neo.isNumber(oldValue) && oldValue > 0) ? (oldValue - 1) : 0
     }
 
+    /**
+     * Triggered before the updateDepth config gets changed.
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @returns {Number}
+     * @protected
+     */
+    beforeSetUpdateDepth(value, oldValue) {
+        if (oldValue === undefined) {
+            return value
+        }
+
+        return oldValue === -1 || value === -1 ? -1 : Math.max(value, oldValue)
+    }
+
     /**
      * Changes the value of a vdom object attribute or removes it in case it has no value
      * @param {String} key
@@ -1393,6 +1417,22 @@ class Base extends CoreBase {
         }
     }
 
+    /**
+     * Convenience shortcut to create a component reference
+     * @returns {Object}
+     */
+    createVdomReference() {
+        let me        = this,
+            reference = {componentId: me.id},
+            vdomId    = me.vdom.id;
+
+        if (vdomId && me.id !== vdomId) {
+            reference.id = vdomId
+        }
+
+        return reference
+    }
+
     /**
      * Unregister this instance from the ComponentManager
      * @param {Boolean} updateParentVdom=false true to remove the component from the parent vdom => real dom
@@ -1473,7 +1513,7 @@ class Base extends CoreBase {
      */
     #executeVdomUpdate(vdom, vnode, resolve, reject) {
         let me   = this,
-            opts = {vdom, vnode},
+            opts = {},
             deltas;
 
         if (Neo.currentWorker.isSharedWorker) {
@@ -1488,6 +1528,12 @@ class Base extends CoreBase {
         me._needsVdomUpdate = false;
         me.afterSetNeedsVdomUpdate?.(false, true);
 
+        opts.vdom  = ComponentManager.getVdomTree(vdom, me.updateDepth);
+        opts.vnode = ComponentManager.getVnodeTree(vnode, me.updateDepth);
+
+        // Reset the updateDepth to the default value for the next update cycle
+        me._updateDepth = me.constructor.config.updateDepth;
+
         Neo.vdom.Helper.update(opts).catch(err => {
             me.isVdomUpdating = false;
             console.log('Error attempting to update component dom', err, me);
@@ -1495,9 +1541,9 @@ class Base extends CoreBase {
             reject?.()
         }).then(data => {
             me.isVdomUpdating = false;
+
             // checking if the component got destroyed before the update cycle is done
             if (me.id) {
-                // console.log('Component vnode updated', data);
                 me.vnode = data.vnode;
 
                 deltas = data.deltas;
@@ -1763,8 +1809,7 @@ class Base extends CoreBase {
      * @returns {Object}
      */
     getVdomChild(id, vdom=this.vdom) {
-        let node = VDomUtil.findVdomChild(vdom, id);
-        return node?.vdom
+        return VDomUtil.find(vdom, id)?.vdom
     }
 
     /**
@@ -2206,7 +2251,7 @@ class Base extends CoreBase {
                 parentId   : autoMount ? me.getMountedParentId()    : undefined,
                 parentIndex: autoMount ? me.getMountedParentIndex() : undefined,
                 windowId   : me.windowId,
-                ...me.vdom
+                ...ComponentManager.getVdomTree(me.vdom)
             });
 
             me.onRender(data, useVdomWorker ? autoMount : false);
@@ -2296,7 +2341,7 @@ class Base extends CoreBase {
      * hideMode: 'visibility' uses css visibility.
      */
     show() {
-        const me = this;
+        let me = this;
 
         if (me.hideMode !== 'visibility') {
             delete me.vdom.removeDom;
@@ -2323,7 +2368,7 @@ class Base extends CoreBase {
      * @param {Object} [vdom=this.vdom]
      * @param {Boolean} force=false
      */
-    syncVdomIds(vnode = this.vnode, vdom = this.vdom, force = false) {
+    syncVdomIds(vnode=this.vnode, vdom=this.vdom, force=false) {
         VDomUtil.syncVdomIds(vnode, vdom, force)
     }
 
@@ -2335,8 +2380,10 @@ class Base extends CoreBase {
      * @param {Neo.vdom.VNode} [vnode=this.vnode]
      */
     syncVnodeTree(vnode=this.vnode) {
-        let me    = this,
-            debug = false,
+        let me              = this,
+            childComponents = ComponentManager.getChildren(me),
+            debug           = false,
+            map             = {},
             childVnode, start;
 
         if (debug) {
@@ -2345,12 +2392,30 @@ class Base extends CoreBase {
 
         me.syncVdomIds();
 
+        if (vnode && me.id !== vnode.id) {
+            ComponentManager.registerWrapperNode(vnode.id, me)
+        }
+
+        // we need one separate iteration first to ensure all wrapper nodes get registered
+        childComponents.forEach(component => {
+            childVnode = VNodeUtil.findChildVnode(me.vnode, component.vdom.id)?.vnode;
+
+            if (childVnode) {
+                map[component.id] = childVnode;
+
+                if (component.id !== childVnode.id) {
+                    ComponentManager.registerWrapperNode(childVnode.id, component)
+                }
+            }
+        });
+
         // delegate the latest node updates to all possible child components found inside the vnode tree
-        ComponentManager.getChildren(me).forEach(component => {
-            childVnode = VNodeUtil.findChildVnode(me.vnode, component.vdom.id);
+        childComponents.forEach(component => {
+            childVnode = map[component.id];
 
             if (childVnode) {
-                component._vnode = childVnode.vnode; // silent update
+                // silent update
+                component._vnode = ComponentManager.addVnodeComponentReferences(childVnode, component.id);
 
                 if (!component.rendered) {
                     component._rendered = true;
@@ -2363,28 +2428,8 @@ class Base extends CoreBase {
             }
         });
 
-        // console.log(me.vnode, me.mounted);
-
-        // keep the vnode parent tree in sync
-        ComponentManager.getParents(me).forEach((component, index) => {
-            if (component.vnode) {
-                if (!me.vnode) {
-                    if (index === 0 && !VNodeUtil.removeChildVnode(component.vnode, me.id)) {
-                        // This can fail, in case the vnode is already removed (not an issue, better safe than sorry)
-                        // console.warn('syncVnodeTree: Could not remove the parent vnode for', me.id, component);
-                    }
-                }
-
-                // check for dynamically rendered components which get inserted into the component tree
-                else if (index === 0 && me.vnode.outerHTML) {
-                    // console.log('dyn item', me.vnode, me.parentIndex);
-                    component.vnode.childNodes.splice(me.parentIndex || 0, 0, me.vnode)
-                } else if (!VNodeUtil.replaceChildVnode(component.vnode, me.vnode.id, me.vnode)) {
-                    // todo: can happen for dynamically inserted container items
-                    // console.warn('syncVnodeTree: Could not replace the parent vnode for', me.vnode.id, component);
-                }
-            }
-        });
+        // silent update
+        me._vnode = vnode ? ComponentManager.addVnodeComponentReferences(vnode, me.id) : null;
 
         debug && console.log('syncVnodeTree', me.id, performance.now() - start)
     }
@@ -2472,7 +2517,7 @@ class Base extends CoreBase {
             opts, vdom, vnode, vnodeStyle;
 
         if (delta) {
-            vdom  = VDomUtil.findVdomChild(me.vdom, id);
+            vdom  = VDomUtil.find(me.vdom, id);
             vnode = me.vnode && VNodeUtil.findChildVnode(me.vnode, id);
 
             if (!me.hasUnmountedVdomChanges) {

package/src/component/Circle.mjs

@@ -545,9 +545,7 @@ class Circle extends Component {
      * @returns {Object}
      */
     getItemEl(itemId) {
-        let item = VDomUtil.findVdomChild(this.getFrontEl(), itemId);
-
-        return item?.vdom
+        return VDomUtil.find(this.getFrontEl(), itemId)?.vdom
     }
 
     /**

package/src/component/DateSelector.mjs

@@ -722,7 +722,7 @@ class DateSelector extends Component {
      */
     onCellClick(data) {
         let me     = this,
-            cellEl = VDomUtil.findVdomChild(me.vdom, data.path[0].id),
+            cellEl = VDomUtil.find(me.vdom, data.path[0].id),
             date   = me.currentDate; // cloned
 
         date.setDate(parseInt(cellEl.vdom.cn[0].html));

package/src/component/wrapper/MonacoEditor.mjs

@@ -358,6 +358,11 @@ class MonacoEditor extends Base {
             scrollBeyondLastLine: me.scrollBeyondLastLine,
             theme               : me.editorTheme,
             value               : me.stringifyValue(me.value),
+
+            scrollbar: {
+                alwaysConsumeMouseWheel: false // enables page scrolling when over-scrolling the content box
+            },
+
             ...me.options
         }
     }

package/src/container/Accordion.mjs

@@ -48,7 +48,7 @@ class Accordion extends Panel {
         expandedItems_: [],
         /**
          * Creates a top header
-         * @memeber {String|null} title=null
+         * @member {String|null} title=null
          */
         title_: null
     }

package/src/container/Base.mjs

@@ -377,7 +377,8 @@ class Base extends Component {
         let me        = this,
             items     = me._items,
             itemsRoot = me.getVdomItemsRoot(),
-            {layout}  = me;
+            {layout}  = me,
+            vdom;
 
         itemsRoot.cn = [];
 
@@ -385,10 +386,13 @@ class Base extends Component {
             items[index] = item = me.createItem(item, index);
 
             if (item instanceof Neo.core.Base) {
-                layout?.applyChildAttributes(item, index)
+                layout?.applyChildAttributes(item, index);
+                vdom = item.createVdomReference()
+            } else {
+                vdom = item.vdom
             }
 
-            itemsRoot.cn.push(item.vdom)
+            itemsRoot.cn.push(vdom)
         });
 
         me.update()
@@ -527,12 +531,14 @@ class Base extends Component {
 
             me.items = items;
 
-            me.getVdomItemsRoot().cn.splice(index, 0, item.vdom)
+            me.getVdomItemsRoot().cn.splice(index, 0, item.createVdomReference())
         }
 
         if (!silent) {
+            me.updateDepth = -1; // pass the full vdom tree to honor new nested component trees
+
             me.promiseUpdate().then(() => {
-                me.fire('insert', { index, item })
+                me.fire('insert', {index, item})
             })
         }
 
@@ -631,7 +637,7 @@ class Base extends Component {
 
         for (; i < len; i++) {
             if (items[i].id === component.id) {
-                this.removeAt(i, destroyItem, silent)
+                return this.removeAt(i, destroyItem, silent)
             }
         }
     }
@@ -682,6 +688,9 @@ class Base extends Component {
 
             me.getVdomItemsRoot().cn.splice(index, 1);
 
+            // the next update cycle needs to include direct children
+            me.updateDepth = 2;
+
             !silent && me.update();
 
             if (destroyItem) {
@@ -730,6 +739,9 @@ class Base extends Component {
         NeoArray.move(me.items,                 item2Index, item1Index);
         NeoArray.move(me.getVdomItemsRoot().cn, item2Index, item1Index);
 
+        // the next update cycle needs to include direct children
+        me.updateDepth = 2;
+
         me.update()
     }
 }

package/src/core/Base.mjs

@@ -131,7 +131,7 @@ class Base {
         delete config.id;
 
         if (me.constructor.config) {
-            delete me.constructor.config.id;
+            delete me.constructor.config.id
         }
 
         me.getStaticConfig('observable') && me.initObservable(config);
@@ -178,11 +178,13 @@ class Base {
             }
         }
 
-        if (hasManager) {
-            Neo.manager.Instance.register(me);
-        } else {
-            Neo.idMap = Neo.idMap || {};
-            Neo.idMap[me.id] = me
+        if (value) {
+            if (hasManager) {
+                Neo.manager.Instance.register(me);
+            } else {
+                Neo.idMap = Neo.idMap || {};
+                Neo.idMap[me.id] = me
+            }
         }
     }
 
@@ -275,8 +277,7 @@ class Base {
      */
     callOverwritten(...args) {
         let stack      = new Error().stack,
-            regex      = Base.methodNameRegex,
-            methodName = stack.match(regex)[1];
+            methodName = stack.match(Base.methodNameRegex)[1];
 
         this.__proto__.constructor.overwrittenMethods[methodName].call(this, ...args)
     }
@@ -370,7 +371,7 @@ class Base {
 
         me.isConfiguring = true;
         Object.assign(me[configSymbol], me.mergeConfig(config, preventOriginalConfig));
-        me.processConfigs()
+        me.processConfigs();
         me.isConfiguring = false;
     }
 

package/src/draggable/list/DragZone.mjs

@@ -118,7 +118,7 @@ class DragZone extends BaseDragZone {
         let me = this;
 
         if (me.owner.draggable) {
-            me.dragElement = VDomUtil.findVdomChild(me.owner.vdom, data.path[0].id).vdom;
+            me.dragElement = VDomUtil.find(me.owner.vdom, data.path[0].id).vdom;
             me.dragStart(data)
         }
     }

package/src/draggable/toolbar/DragZone.mjs

@@ -92,7 +92,7 @@ class DragZone extends BaseDragZone {
         let me = this;
 
         if (me.owner.draggable) {
-            me.dragElement = VDomUtil.findVdomChild(me.owner.vdom, data.path[0].id).vdom;
+            me.dragElement = VDomUtil.find(me.owner.vdom, data.path[0].id).vdom;
             me.dragStart(data)
         }
     }

package/src/draggable/toolbar/SortZone.mjs

@@ -187,7 +187,7 @@ class SortZone extends DragZone {
 
             Object.assign(me, {
                 currentIndex           : index,
-                dragElement            : VDomUtil.findVdomChild(owner.vdom, button.id).vdom,
+                dragElement            : VDomUtil.find(owner.vdom, button.id).vdom,
                 dragProxyConfig        : {...me.dragProxyConfig, cls : [...owner.cls]},
                 indexMap               : indexMap,
                 ownerStyle             : {height: ownerStyle.height, width : ownerStyle.width},

package/src/draggable/tree/DragZone.mjs

@@ -88,7 +88,7 @@ class DragZone extends BaseDragZone {
             me.dragElement = {
                 tag: 'ul',
                 cls: ['neo-list-container', 'neo-list'],
-                cn : [VDomUtil.findVdomChild(me.owner.vdom, data.path[0].id).vdom]
+                cn : [VDomUtil.find(me.owner.vdom, data.path[0].id).vdom]
             };
 
             me.dragStart(data)

package/src/form/Fieldset.mjs

@@ -213,6 +213,8 @@ class Fieldset extends FormContainer {
             }
         } else {
             if (legend) {
+                me.updateDepth = 2;
+
                 legend.setSilent({
                     iconCls,
                     text: title

package/src/form/field/Color.mjs

@@ -51,7 +51,7 @@ class Color extends ComboBox {
         super.construct(config);
 
         let me           = this,
-            inputWrapper = VDomUtil.findVdomChild(me.vdom, {id: me.getInputWrapperId()});
+            inputWrapper = VDomUtil.find(me.vdom, me.getInputWrapperId());
 
         inputWrapper.vdom.cn.unshift({
             cls  : 'neo-color',
@@ -61,7 +61,7 @@ class Color extends ComboBox {
             }
         });
 
-        me.update();
+        me.update()
     }
 
     /**
@@ -73,12 +73,12 @@ class Color extends ComboBox {
      */
     afterSetValue(value, oldValue, preventFilter=false) {
         let me             = this,
-            colorIndicator = VDomUtil.findVdomChild(me.vdom, {id: me.getColorIndicatorId()})?.vdom,
+            colorIndicator = VDomUtil.find(me.vdom, me.getColorIndicatorId())?.vdom,
             {list, record} = me,
             selectionModel = me.list?.selectionModel;
 
         if (colorIndicator) {
-            colorIndicator.style.backgroundColor = me.getColor();
+            colorIndicator.style.backgroundColor = me.getColor()
         }
 
         if (record) {

package/src/form/field/ComboBox.mjs

@@ -456,7 +456,7 @@ class ComboBox extends Picker {
      * @returns {Object}
      */
     getInputHintEl() {
-        return VDomUtil.findVdomChild(this.vdom, this.getInputHintId())?.vdom
+        return VDomUtil.find(this.vdom, this.getInputHintId())?.vdom
     }
 
     /**
@@ -696,7 +696,7 @@ class ComboBox extends Picker {
      */
     updateTypeAhead(silent=false) {
         let me      = this,
-            inputEl = VDomUtil.findVdomChild(me.vdom, {flag: 'neo-real-input'});
+            inputEl = VDomUtil.find(me.vdom, {flag: 'neo-real-input'});
 
         if (me.typeAhead) {
             inputEl.parentNode.cn[inputEl.index] = {

package/src/form/field/Date.mjs

@@ -98,7 +98,8 @@ class DateField extends Picker {
 
         let me = this;
 
-        me.dateSelector = Neo.create(DateSelector, {
+        me.dateSelector = Neo.create({
+            module       : DateSelector,
             dayNameFormat: 'short',
             maxValue     : me.maxValue,
             minValue     : me.minValue,

package/src/form/field/Picker.mjs

@@ -136,7 +136,8 @@ class Picker extends Text {
             {pickerWidth}   = me,
             pickerComponent = me.createPickerComponent();
 
-        me.picker =  Neo.create(Container, {
+        me.picker =  Neo.create({
+            module   : Container,
             parentId : 'document.body',
             floating : true,
             align    : {