neo.mjs 6.17.2 → 6.18.0

package/examples/component/helix/Viewport.mjs

@@ -0,0 +1,309 @@
+import BaseViewport       from '../../../src/container/Viewport.mjs';
+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';
+import ViewportController from './ViewportController.mjs';
+
+/**
+ * @class Neo.examples.component.helix.Viewport
+ * @extends Neo.container.Viewport
+ */
+class Viewport extends BaseViewport {
+    /**
+     * Internally storing the windowIds, into which this container got mounted
+     * @member {Number[]} windowIds=[]
+     * @protected
+     * @static
+     */
+    static windowIds = []
+
+    static config = {
+        /**
+         * @member {String} className='Neo.examples.component.helix.ViewportController'
+         * @protected
+         */
+        className: 'Neo.examples.component.helix.Viewport',
+        /**
+         * @member {Neo.controller.Component} controller=ViewportController
+         */
+        controller: ViewportController,
+        /**
+         * @member {Neo.component.Helix|null} helix=null
+         */
+        helix: null,
+        /**
+         * @member {Object|null} helixConfig=null
+         */
+        helixConfig: null,
+        /**
+         * @member {Object|null} layout={ntype: 'hbox',align:'stretch'}
+         */
+        layout: {ntype: 'hbox', align: 'stretch'},
+        /**
+         * @member {Boolean} showGitHubStarButton_=true
+         */
+        showGitHubStarButton_: true,
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            ntype : 'container',
+            flex  : 1,
+            layout: 'fit',
+            style : {position: 'relative'},
+
+            items: [{
+                ntype: 'component',
+                html : 'DeltaUpdates / s: <span id="neo-delta-updates"></span>',
+                style: {
+                    position: 'absolute',
+                    right   : '150px',
+                    top     : '25px',
+                    width   : '200px',
+                    zIndex  : 1
+                }
+            }, {
+                ntype    : 'component',
+                html     : '<a class="github-button" href="https://github.com/neomjs/neo" data-size="large" data-show-count="true" aria-label="Star neomjs/neo on GitHub">Star</a>',
+                reference: 'github-button',
+
+                style: {
+                    position: 'absolute',
+                    right   : '20px',
+                    top     : '20px',
+                    zIndex  : 1
+                }
+            }]
+        }, {
+            module   : Panel,
+            layout   : {ntype: 'vbox', align: 'stretch'},
+            reference: 'controls-panel',
+            style    : {backgroundColor: '#2b2b2b'},
+            width    : 250,
+
+            containerConfig: {
+                flex : null,
+                style: {overflowY: 'scroll'}
+            },
+
+            headers: [{
+                dock: 'top',
+                text: 'Helix Controls'
+            }],
+
+            itemDefaults: {
+                ntype        : 'rangefield',
+                flex         : '0 1 auto',
+                labelWidth   : '100px',
+                listeners    : {change: 'onRangefieldChange'},
+                style        : {padding: '10px'},
+                useInputEvent: true
+            },
+
+            items: [{
+                labelText: 'Translate X',
+                maxValue : 2000,
+                minValue : -2000,
+                name     : 'translateX',
+                value    : 400
+            }, {
+                labelText: 'Translate Y',
+                maxValue : 2500,
+                minValue : -2500,
+                name     : 'translateY',
+                value    : -350
+            }, {
+                eventName: 'changeTranslateZ',
+                labelText: 'Translate Z',
+                listeners: {change: 'onRangefieldChange', mounted: 'onRangefieldMounted'},
+                maxValue : 4500,
+                minValue : -4500,
+                name     : 'translateZ',
+                value    : -1500
+            }, {
+                labelText : 'Delta Y',
+                labelAlign: 'top',
+                maxValue  : 600,
+                minValue  : -600,
+                name      : 'deltaY',
+                value     : 70
+            }, {
+                eventName: 'changeRotation',
+                labelText: 'Rotate',
+                listeners: {change: 'onRangefieldChange', mounted: 'onRangefieldMounted'},
+                minValue : -720,
+                maxValue : 720,
+                name     : 'rotationAngle',
+                value    : 0
+            }, {
+                labelText: 'Radius',
+                maxValue : 3500,
+                minValue : 900,
+                name     : 'radius',
+                value    : 1500
+            }, {
+                labelText: 'Perspective',
+                minValue : 50,
+                maxValue : 3000,
+                name     : 'perspective',
+                value    : 800
+            }, {
+                labelText: 'Item Angle',
+                minValue : 1,
+                maxValue : 36,
+                name     : 'itemAngle',
+                value    : 8
+            }, {
+                labelText: 'Max Opacity',
+                name     : 'maxOpacity',
+                minValue : 0,
+                maxValue : 100,
+                value    : 80 // todo [30, 80]
+            }, {
+                labelText: 'Min Opacity',
+                name     : 'minOpacity',
+                minValue : 0,
+                maxValue : 100,
+                value    : 30
+            }, {
+                module   : NumberField,
+                clearable: false,
+                labelText: 'Max Items',
+                maxValue : 600,
+                minValue : 100,
+                name     : 'maxItems',
+                stepSize : 100,
+                value    : 300
+            }, {
+                ntype    : 'button',
+                handler  : 'onFlipItemsButtonClick',
+                listeners: {},
+                style    : {margin: '20px'},
+                text     : 'Flip Items'
+            }, {
+                ntype    : 'button',
+                disabled : true,
+                handler  : 'onSortLastnameButtonClick',
+                listeners: {},
+                reference: 'sort-lastname-button',
+                style    : {margin: '20px', marginBottom: '10px'},
+                text     : 'Sort by Lastname'
+            }, {
+                ntype    : 'button',
+                disabled : true,
+                handler  : 'onSortFirstnameButtonClick',
+                listeners: {},
+                reference: 'sort-firstname-button',
+                style    : {margin: '20px', marginTop: 0},
+                text     : 'Sort by Firstname'
+            }, {
+                ntype    : 'button',
+                handler  : 'onFollowSelectionButtonClick',
+                iconCls  : 'fa fa-square',
+                listeners: {},
+                style    : {margin: '20px', marginBottom: '10px'},
+                text     : 'Follow Selection'
+            }, {
+                module        : CheckBox,
+                checked       : Neo.config.logDeltaUpdates,
+                hideLabel     : true,
+                hideValueLabel: false,
+                listeners     : {change: 'onLogDeltasCheckboxChange'},
+                style         : {marginLeft: '10px', marginTop: '10px'},
+                valueLabelText: 'logDeltaUpdates'
+            }, {
+                ntype: 'label',
+                text : [
+                    '<b>Navigation Concept</b>',
+                    '<p>Click on an item to select it. Afterwards you can use the Arrow Keys to walk through the items.</p>',
+                    '<p>Hit the Space Key to rotate the currently selected item to the front.</p>',
+                    '<p>Hit the Enter Key to expand the currently selected item.</p>'
+                ].join(''),
+
+                style: {
+                    backgroundColor: '#323232',
+                    color          : '#ddd',
+                    fontSize       : '13px',
+                    margin         : '10px',
+                    padding        : '10px',
+                    whiteSpace     : 'normal'
+                }
+            }]
+        }]
+    }
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+
+        let me = this;
+
+        me.helix = Neo.create({
+            module   : Helix,
+            appName  : me.appName,
+            reference: 'helix',
+            store    : ImageStore,
+            windowId : me.windowId,
+            ...me.helixConfig
+        });
+
+        me.items[0].items.unshift(me.helix)
+    }
+
+    /**
+     * Triggered after the mounted config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetMounted(value, oldValue) {
+        super.afterSetMounted(value, oldValue);
+
+        if (value) {
+            let me = this;
+
+            Neo.Main.setNeoConfig({
+                key     : 'renderCountDeltas',
+                value   : true,
+                windowId: me.windowId
+            });
+
+            if (me.showGitHubStarButton) {
+                setTimeout(() => {
+                    let {windowId}  = me,
+                        {windowIds} = Viewport;
+
+                    if (!windowIds.includes(windowId)) {
+                        windowIds.push(windowId);
+
+                        Neo.main.DomAccess.addScript({
+                            async: true,
+                            defer: true,
+                            src  : 'https://buttons.github.io/buttons.js',
+                            windowId
+                        })
+                    }
+                }, 200)
+            }
+        }
+    }
+
+    /**
+     * Triggered after the showGitHubStarButton config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetShowGitHubStarButton(value, oldValue) {
+        this.getItem('github-button').hidden = !value;
+    }
+}
+
+Neo.setupClass(Viewport);
+
+export default Viewport;

package/examples/component/helix/ViewportController.mjs

@@ -0,0 +1,122 @@
+import Controller from '../../../src/controller/Component.mjs';
+
+/**
+ * @class Neo.examples.component.helix.ViewportController
+ * @extends Neo.controller.Component
+ */
+class ViewportController extends Controller {
+    static config = {
+        /**
+         * @member {String} className='Neo.examples.component.helix.ViewportController'
+         * @protected
+         */
+        className: 'Neo.examples.component.helix.ViewportController',
+        /**
+         * @member {Neo.component.Helix|null} helix_=null
+         * @protected
+         */
+        helix_: null
+    }
+
+    /**
+     * Triggered when accessing the helix config
+     * @param {Neo.component.Helix|null} value
+     * @protected
+     */
+    beforeGetHelix(value) {
+        if (!value) {
+            this._helix = value = this.getReference('helix')
+        }
+
+        return value
+    }
+
+    /**
+     * {Object} data
+     */
+    onFlipItemsButtonClick(data) {
+        this.helix.flipped = !this.helix.flipped
+    }
+
+    /**
+     * {Object} data
+     */
+    onFollowSelectionButtonClick(data) {
+        const button = data.component;
+
+        if (button.iconCls === 'fa fa-square') {
+            this.helix.followSelection = true;
+            button.iconCls = 'fa fa-check-square'
+        } else {
+            this.helix.followSelection = false;
+            button.iconCls = 'fa fa-square'
+        }
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onLogDeltasCheckboxChange(data) {
+        Neo.Main.setNeoConfig({
+            key     : 'logDeltaUpdates',
+            value   : data.value,
+            windowId: data.component.windowId
+        })
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onRangefieldChange(data) {
+        let me      = this,
+            {name}  = data.component,
+            {value} = data;
+
+        if (['deltaY', 'maxOpacity', 'minOpacity'].includes(name)) {
+            value /= 100
+        }
+
+        if (name === 'maxItems') {
+            me.getReference('sort-firstname-button').disabled = value !== 600;
+            me.getReference('sort-lastname-button') .disabled = value !== 600
+        }
+
+        me.helix[name] = value
+    }
+
+    /**
+     * @param {String} id
+     */
+    onRangefieldMounted(id) {
+        let field = Neo.getComponent(id);
+
+        this.helix.on(field.eventName, function(value) {
+            value = Math.min(Math.max(value, field.minValue), field.maxValue);
+            field.value = value
+        })
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onSortFirstnameButtonClick(data) {
+        this.helix.store.sorters = [
+            {property : 'lastname',  direction: 'ASC'},
+            {property : 'firstname', direction: 'ASC'}
+        ]
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onSortLastnameButtonClick(data) {
+        this.helix.store.sorters = [
+            {property : 'firstname', direction: 'ASC'},
+            {property : 'lastname',  direction: 'ASC'}
+        ]
+    }
+}
+
+Neo.setupClass(ViewportController);
+
+export default ViewportController;

package/examples/component/helix/app.mjs

@@ -1,6 +1,6 @@
-import MainContainer from './MainContainer.mjs';
+import Viewport from './Viewport.mjs';
 
 export const onStart = () => Neo.app({
-    mainView: MainContainer,
+    mainView: Viewport,
     name    : 'Neo.examples.component.helix'
 });

package/examples/component/helix/neo-config.json

@@ -3,7 +3,6 @@
     "basePath"         : "../../../",
     "environment"      : "development",
     "mainPath"         : "./Main.mjs",
-    "renderCountDeltas": true,
     "themes"           : ["neo-theme-dark"],
     "useServiceWorker" : true
 }

package/examples/component/multiWindowHelix/Viewport.mjs

@@ -1,13 +1,21 @@
-import MainContainer      from '../helix/MainContainer.mjs';
+import BaseViewport       from '../helix/Viewport.mjs';
 import ViewportController from './ViewportController.mjs';
 
 /**
  * @class Neo.examples.component.multiWindowHelix.Viewport
- * @extends Neo.examples.component.helix.MainContainer
+ * @extends Neo.examples.component.helix.Viewport
  */
-class Viewport extends MainContainer {
+class Viewport extends BaseViewport {
     static config = {
+        /**
+         * @member {String} className='Neo.examples.component.multiWindowHelix.Viewport'
+         * @protected
+         */
         className: 'Neo.examples.component.multiWindowHelix.Viewport',
+        /**
+         * @member {String[]} cls=['multi-window-helix-viewport']
+         */
+        cls: ['multi-window-helix-viewport'],
         /**
          * @member {Neo.controller.Component} controller=ViewportController
          */

package/examples/component/multiWindowHelix/ViewportController.mjs

@@ -1,10 +1,10 @@
-import Component from '../../../src/controller/Component.mjs';
+import Controller from '../helix/ViewportController.mjs';
 
 /**
  * @class Neo.examples.component.multiWindowHelix.ViewportController
- * @extends Neo.controller.Component
+ * @extends Neo.examples.component.helix.ViewportController
  */
-class ViewportController extends Component {
+class ViewportController extends Controller {
     static config = {
         /**
          * @member {String} className='Neo.examples.component.multiWindowHelix.ViewportController'
@@ -22,19 +22,31 @@ class ViewportController extends Component {
      *
      */
     async createPopupWindow() {
-        let me                         = this,
-            widget                     = me.getReference('controls-panel'),
-            winData                    = await Neo.Main.getWindowData(),
-            rect                       = await me.component.getDomRect(widget.id),
+        let me              = this,
+            {windowId}      = me,
+            {windowConfigs} = Neo,
+            firstWindowId   = parseInt(Object.keys(windowConfigs)[0]),
+            {basePath}      = windowConfigs[firstWindowId],
+            widget          = me.getReference('controls-panel'),
+            winData         = await Neo.Main.getWindowData({windowId}),
+            rect            = await me.component.getDomRect(widget.id),
             {height, left, top, width} = rect;
 
         height -= 62; // popup header in Chrome
         left   += (width + winData.screenLeft);
         top    += (winData.outerHeight - winData.innerHeight + winData.screenTop);
 
+        /*
+         * For this demo, the url './childapp/' would be sufficient.
+         * However, we also want to open it from within apps/portal.
+         *
+         * We match the basePath to the firstWindowId,
+         * assuming the first connected window is the (main) one which we want to be in charge.
+         */
         await Neo.Main.windowOpen({
-            url           : './childapp/index.html',
+            url           : basePath + 'examples/component/multiWindowHelix/childapp/',
             windowFeatures: `height=${height},left=${left},top=${top},width=${width}`,
+            windowId      : firstWindowId,
             windowName    : 'HelixControls'
         })
     }
@@ -81,7 +93,7 @@ class ViewportController extends Component {
             me.component.add(controlsPanel)
         }
         // Close popup windows when closing or reloading the main window
-        else {
+        else if (appName === 'Neo.examples.component.multiWindowHelix') {
             Neo.Main.windowClose({names: me.connectedApps, windowId})
         }
     }

package/examples/component/multiWindowHelix/neo-config.json

@@ -3,7 +3,6 @@
     "basePath"         : "../../../",
     "environment"      : "development",
     "mainPath"         : "./Main.mjs",
-    "renderCountDeltas": true,
     "themes"           : ["neo-theme-dark"],
     "useSharedWorkers" : true
 }

package/examples/fieldWithPrefix/MainContainer.mjs

@@ -19,7 +19,7 @@ class MainContainer extends ConfigurationViewport {
 
     onPluginConfigChange(config, opts) {
         const textfield = this.exampleComponent.items[0],
-              plugin    = textfield.getPlugin({flag: 'prefix'});
+              plugin    = textfield.getPlugin('prefixfield');
 
         if (config === 'accept') {
             plugin.accept = opts.record.value;
@@ -88,7 +88,6 @@ class MainContainer extends ConfigurationViewport {
                 plugins  : [
                     {
                         module : PrefixPlugin,
-                        flag   : 'prefix',
                         pattern: '+1 (___) ___-___-____',
                         slots  : '_'
                     }
@@ -99,7 +98,6 @@ class MainContainer extends ConfigurationViewport {
                 plugins  : [
                     {
                         module : PrefixPlugin,
-                        flag   : 'prefix',
                         pattern: 'dd/mm/yyyy hh:mm',
                         slots  : 'dmyh'
                     }
@@ -110,7 +108,6 @@ class MainContainer extends ConfigurationViewport {
                 plugins  : [
                     {
                         module : PrefixPlugin,
-                        flag   : 'prefix',
                         pattern: 'XX:XX:XX:XX:XX:XX',
                         slots  : 'X',
                         accept : '[A-H]'
@@ -122,7 +119,6 @@ class MainContainer extends ConfigurationViewport {
                 plugins  : [
                     {
                         module : PrefixPlugin,
-                        flag   : 'prefix',
                         pattern: '__-__-__-____',
                         slots  : '_',
                         accept : /\w/
@@ -134,7 +130,6 @@ class MainContainer extends ConfigurationViewport {
                 plugins  : [
                     {
                         module : PrefixPlugin,
-                        flag   : 'prefix',
                         pattern: '.... .... .... ....',
                         slots  : '.',
                         accept : /\d/

package/examples/list/animate/MainContainerController.mjs

@@ -65,7 +65,7 @@ class MainContainerController extends Component {
      * @param {Object} data
      */
     changeTransitionDuration(data) {
-        this.getReference('list').getPlugin('animate').transitionDuration = data.value;
+        this.getReference('list').getPlugin('list-animate').transitionDuration = data.value;
     }
 }
 

package/examples/worker/task/MyTasks.mjs

@@ -43,6 +43,4 @@ class MyTasks extends Base {
     }
 }
 
-let instance = Neo.setupClass(MyTasks);
-
-export default instance;
+export default Neo.setupClass(MyTasks);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "6.17.2",
+    "version": "6.18.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -54,7 +54,7 @@
         "highlightjs-line-numbers.js": "^2.8.0",
         "inquirer": "^9.2.23",
         "marked": "^13.0.0",
-        "monaco-editor": "^0.49.0",
+        "monaco-editor": "^0.50.0",
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
         "postcss": "^8.4.38",