neo.mjs 3.2.4 → 3.2.5

package/examples/component/helix/ImageModel.mjs

@@ -0,0 +1,38 @@
+import Model from '../../../src/data/Model.mjs';
+
+/**
+ * @class Neo.examples.component.helix.ImageModel
+ * @extends Neo.data.Model
+ */
+class ImageModel extends Model {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.examples.component.helix.ImageModel'
+         * @protected
+         */
+        className: 'Neo.examples.component.helix.ImageModel',
+        /**
+         * @member {Object[]} fields
+         */
+        fields: [{
+            name: 'firstname',
+            type: 'String'
+        }, {
+            name: 'id',
+            type: 'Integer'
+        }, {
+            name: 'image',
+            type: 'String'
+        }, {
+            name: 'isOnline',
+            type: 'Boolean'
+        }, {
+            name: 'lastname',
+            type: 'String'
+        }]
+    }}
+}
+
+Neo.applyClassConfig(ImageModel);
+
+export default ImageModel;

package/examples/component/helix/ImageStore.mjs

@@ -0,0 +1,32 @@
+import ImageModel from './ImageModel.mjs';
+import Store      from '../../../src/data/Store.mjs';
+
+/**
+ * @class Neo.examples.component.helix.ImageStore
+ * @extends Neo.data.Store
+ */
+class ImageStore extends Store {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.examples.component.helix.ImageModel'
+         * @protected
+         */
+        className: 'Neo.examples.component.helix.ImageStore',
+        /**
+         * @member {Boolean} autoLoad=true
+         */
+        autoLoad: true,
+        /**
+         * @member {Neo.data.Model} model=ImageModel
+         */
+        model: ImageModel,
+        /**
+         * @member {String} url='../../resources/examples/data/ai_contacts.json'
+         */
+        url: '../../resources/examples/data/ai_contacts.json'
+    }}
+}
+
+Neo.applyClassConfig(ImageStore);
+
+export default ImageStore;

package/examples/component/helix/MainContainer.mjs

@@ -1,5 +1,6 @@
 import CheckBox    from '../../../src/form/field/CheckBox.mjs';
 import Helix       from '../../../src/component/Helix.mjs';
+import ImageStore  from './ImageStore.mjs';
 import NumberField from '../../../src/form/field/Number.mjs';
 import Panel       from '../../../src/container/Panel.mjs';
 import RangeField  from '../../../src/form/field/Range.mjs';
@@ -312,6 +313,7 @@ class MainContainer extends Viewport {
         me.helix = Neo.create({
             module: Helix,
             id    : 'neo-helix-1',
+            store : ImageStore,
             ...me.helixConfig
         });
 

package/package.json

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

package/resources/scss/src/component/Helix.scss

@@ -16,6 +16,12 @@
         outline: 0;
     }
 
+    &.neo-follow-selection {
+        .neo-helix-item {
+            transition: all 0.1s linear;
+        }
+    }
+
     &.neo-transition-100 {
         .neo-helix-item {
             transition: all 0.1s ease-in-out !important;
@@ -87,4 +93,4 @@
         right       : 0;
         text-shadow : 0 0 10px #61DFE5;
     }
-}
+}

package/src/calendar/view/MainContainer.mjs

@@ -500,7 +500,7 @@ class MainContainer extends Container {
         return import('./SettingsContainer.mjs').then(module => {
             me.items[1].add({
                 module             : module.default,
-                collapsed          : collapsed,
+                collapsed,
                 removeInactiveCards: me.removeInactiveCards,
                 style              : {marginRight: !collapsed ? '0' : `-${me.settingsContainerWidth}px`},
                 width              : me.settingsContainerWidth,

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

@@ -554,10 +554,7 @@ class Component extends BaseComponent {
             date.setDate(date.getDate() + 1);
         }
 
-        return {
-            header: header,
-            row   : row
-        }
+        return {header, row}
     }
 
     /**
@@ -626,16 +623,12 @@ class Component extends BaseComponent {
         let oldPath = data.oldPath,
             path    = data.path;
 
-        if (oldPath) {
-            if (oldPath[0]?.cls.includes('neo-event')) {
-                Neo.applyDeltas(this.appName, {id: oldPath[0].id, cls: {remove: ['neo-focus']}});
-            }
+        if (oldPath?.[0]?.cls.includes('neo-event')) {
+            Neo.applyDeltas(this.appName, {id: oldPath[0].id, cls: {remove: ['neo-focus']}});
         }
 
-        if (path) {
-            if (path[0]?.cls.includes('neo-event')) {
-                Neo.applyDeltas(this.appName, {id: path[0].id, cls: {add: ['neo-focus']}});
-            }
+        if (path?.[0]?.cls.includes('neo-event')) {
+            Neo.applyDeltas(this.appName, {id: path[0].id, cls: {add: ['neo-focus']}});
         }
     }
 
@@ -668,9 +661,7 @@ class Component extends BaseComponent {
 
                     week = me.createWeek(DateUtil.clone(date));
 
-                    if (week.header) {
-                        container.cn.push(week.header);
-                    }
+                    week.header && container.cn.push(week.header);
 
                     container.cn.push(week.row);
                 }
@@ -702,9 +693,7 @@ class Component extends BaseComponent {
 
                     container.cn.unshift(week.row);
 
-                    if (week.header) {
-                        container.cn.unshift(week.header);
-                    }
+                    week.header && container.cn.unshift(week.header);
                 }
 
                 me.promiseVdomUpdate(me.vdom).then(() => {
@@ -723,9 +712,7 @@ class Component extends BaseComponent {
                 me.vdom = vdom;
             }
 
-            if (me.scrollTaskId) {
-                clearTimeout(me.scrollTaskId);
-            }
+            me.scrollTaskId && clearTimeout(me.scrollTaskId);
 
             me.scrollTaskId = setTimeout(me.onWheelEnd.bind(me), 300);
         }

package/src/component/Gallery.mjs

@@ -576,15 +576,11 @@ class Gallery extends Component {
      * @param {Object} data
      */
     onMouseWheel(data) {
-        let me         = this,
-            deltaX     = data.deltaX,
-            deltaY     = data.deltaY,
-            translateX = me.translateX,
-            translateZ = me.translateZ;
+        let me = this;
 
         if (me.mouseWheelEnabled) {
-            me._translateX = translateX - (deltaX * me.mouseWheelDeltaX); // silent update
-            me._translateZ = translateZ + (deltaY * me.mouseWheelDeltaY); // silent update
+            me._translateX = me.translateX - (me.deltaX * me.mouseWheelDeltaX); // silent update
+            me._translateZ = me.translateZ + (me.deltaY * me.mouseWheelDeltaY); // silent update
 
             me.moveOrigin();
 

package/src/component/Helix.mjs

@@ -1,5 +1,4 @@
 import ClassSystemUtil from '../util/ClassSystem.mjs';
-import Collection      from '../collection/Base.mjs'
 import Component       from './Base.mjs';
 import HelixModel      from '../selection/HelixModel.mjs';
 import Matrix          from '../util/Matrix.mjs';
@@ -272,6 +271,19 @@ class Helix extends Component {
         me.domListeners = domListeners;
     }
 
+    /**
+     * Triggered after the followSelection config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetFollowSelection(value, oldValue) {
+        let cls = this.cls;
+
+        NeoArray[value ? 'add' : 'remove'](cls, 'neo-follow-selection');
+        this.cls = cls;
+    }
+
     /**
      * Triggered after the flipped config got changed
      * @param {Boolean} value
@@ -436,20 +448,9 @@ class Helix extends Component {
 
         oldValue?.destroy();
 
-        // todo: remove the if check once all demos use stores (instead of collections)
-        if (value) {
-            return ClassSystemUtil.beforeSetInstance(value, Store, {
-                listeners  : {
-                    load : me.onStoreLoad,
-                    sort : me.onSort,
-                    scope: me
-                }
-            });
-        }
-
-        return Neo.create(Collection, {
-            keyProperty: 'id',
+        return ClassSystemUtil.beforeSetInstance(value, Store, {
             listeners  : {
+                load : me.onStoreLoad,
                 sort : me.onSort,
                 scope: me
             }
@@ -746,11 +747,8 @@ class Helix extends Component {
             Neo.currentWorker.promiseMessage('main', {
                 action    : 'readDom',
                 appName   : me.appName,
-                vnodeId   : me.id,
-                attributes: [
-                    'offsetHeight',
-                    'offsetWidth'
-                ]
+                attributes: ['offsetHeight', 'offsetWidth'],
+                vnodeId   : me.id
             }).then(data => {
                 me.offsetHeight = data.attributes.offsetHeight;
                 me.offsetWidth  = data.attributes.offsetWidth;
@@ -795,15 +793,7 @@ class Helix extends Component {
      */
     onConstructed() {
         super.onConstructed();
-
-        let me = this;
-
-        me.selectionModel?.register(me);
-
-        // load data for the example collection
-        if (!(me.store instanceof Store)) {
-            me.loadData();
-        }
+        this.selectionModel?.register(this);
     }
 
     /**
@@ -825,15 +815,11 @@ class Helix extends Component {
      * @param {Object} data
      */
     onMouseWheel(data) {
-        let me            = this,
-            deltaX        = data.deltaX,
-            deltaY        = data.deltaY,
-            rotationAngle = me.rotationAngle,
-            translateZ    = me.translateZ;
+        let me = this;
 
         if (me.mouseWheelEnabled && me[lockWheel]) {
-            me._rotationAngle = rotationAngle + (deltaX * me.mouseWheelDeltaX); // silent update
-            me._translateZ    = translateZ    + (deltaY * me.mouseWheelDeltaY); // silent update
+            me._rotationAngle = me.rotationAngle + (data.deltaX * me.mouseWheelDeltaX); // silent update
+            me._translateZ    = me.translateZ    + (data.deltaY * me.mouseWheelDeltaY); // silent update
 
             me.refresh();
 
@@ -849,7 +835,7 @@ class Helix extends Component {
     onSelectionChange(value, oldValue) {
         let me = this;
 
-        if (me.followSelection && value && value[0]) {
+        if (me.followSelection && value?.[0]) {
             me.applyItemTransitions(me.moveToSelectedItem, 100, value[0]);
         }
     }
@@ -860,7 +846,7 @@ class Helix extends Component {
     onSort() {
         let me = this;
 
-        if (me[itemsMounted] === true) {console.log('sort');
+        if (me[itemsMounted] === true) {
             me.applyItemTransitions(me.sortItems, 1000);
         }
     }
@@ -915,9 +901,9 @@ class Helix extends Component {
             s = Math.sin(angle * Math.PI / 180);
             c = Math.cos(angle * Math.PI / 180);
 
-            x =  -300 + radius * s     + translateX;
-            y =  -400 + angle * deltaY + translateY;
-            z = 99800 + radius * c     + translateZ;
+            x =  -300 + radius * s      + translateX;
+            y =  -400 + angle  * deltaY + translateY;
+            z = 99800 + radius * c      + translateZ;
 
             matrix.items = [
                 [c, 0, -s, 0],

package/src/worker/App.mjs

@@ -146,21 +146,19 @@ class App extends Base {
 
                 themeFolders = Neo.ns(mapClassName || className, false, cssMap.fileInfo);
 
-                if (themeFolders) {
-                    if (!Neo.ns(`${lAppName}.${className}`, false, cssMap)) {
-                        classPath = className.split('.');
-                        fileName  = classPath.pop();
-                        classPath = classPath.join('.');
-                        ns        = Neo.ns(`${lAppName}.${classPath}`, true, cssMap);
-
-                        ns[fileName] = true;
-
-                        Neo.main.addon.Stylesheet.addThemeFiles({
-                            appName,
-                            className: mapClassName || className,
-                            folders  : themeFolders
-                        });
-                    }
+                if (themeFolders && !Neo.ns(`${lAppName}.${className}`, false, cssMap)) {
+                    classPath = className.split('.');
+                    fileName  = classPath.pop();
+                    classPath = classPath.join('.');
+                    ns        = Neo.ns(`${lAppName}.${classPath}`, true, cssMap);
+
+                    ns[fileName] = true;
+
+                    Neo.main.addon.Stylesheet.addThemeFiles({
+                        appName,
+                        className: mapClassName || className,
+                        folders  : themeFolders
+                    });
                 }
             }
         }
@@ -236,9 +234,7 @@ class App extends Base {
             .then(response => response.json())
             .then(data => {this.createThemeMap(data)});
 
-        if (!config.useVdomWorker) {
-            import('../vdom/Helper.mjs');
-        }
+        !config.useVdomWorker && import('../vdom/Helper.mjs');
     }
 
     /**