neo.mjs 6.17.2 → 6.18.0

package/examples/component/helix/MainContainer.mjs

@@ -1,340 +0,0 @@
-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 Viewport    from '../../../src/container/Viewport.mjs';
-
-/**
- * @class Neo.examples.component.helix.MainContainer
- * @extends Neo.container.Viewport
- */
-class MainContainer extends Viewport {
-    static config = {
-        className: 'Neo.examples.component.helix.MainContainer',
-        /**
-         * @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>',
-                style: {
-                    position: 'absolute',
-                    right   : '20px',
-                    top     : '20px',
-                    zIndex  : 1
-                }
-            }]
-        }, {
-            ntype    : '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',
-                style        : {padding: '10px'},
-                useInputEvent: true,
-
-                listeners: {
-                    change: function(data) {
-                        if (['deltaY', 'maxOpacity', 'minOpacity'].includes(this.name)) {
-                            data.value /= 100;
-                        }
-                        Neo.get('neo-helix-1')[this.name] = data.value;
-                    }
-                }
-            },
-
-            items: [{
-                labelText: 'Translate X',
-                maxValue : 2000,
-                minValue : -2000,
-                name     : 'translateX',
-                value    : 400
-            }, {
-                labelText: 'Translate Y',
-                maxValue : 2500,
-                minValue : -2500,
-                name     : 'translateY',
-                value    : -350
-            }, {
-                labelText: 'Translate Z',
-                maxValue : 4500,
-                minValue : -4500,
-                name     : 'translateZ',
-                value    : -1500,
-                listeners: {
-                    change: function(data) {
-                        Neo.get('neo-helix-1')[this.name] = data.value;
-                    },
-                    mounted: function(fieldId) {
-                        let field = Neo.get(fieldId);
-
-                        Neo.get('neo-helix-1').on('changeTranslateZ', function(value) {
-                            value = Math.min(Math.max(value, this.minValue), this.maxValue);
-                            this.value = value;
-                        }, field);
-                    }
-                }
-            }, {
-                labelText : 'Delta Y',
-                labelAlign: 'top',
-                maxValue  : 600,
-                minValue  : -600,
-                name      : 'deltaY',
-                value     : 70
-            }, {
-                labelText: 'Rotate',
-                minValue : -720,
-                maxValue : 720,
-                name     : 'rotationAngle',
-                value    : 0,
-                listeners: {
-                    change: function(data) {
-                        Neo.get('neo-helix-1')[this.name] = data.value;
-                    },
-                    mounted: function(fieldId) {
-                        let field = Neo.get(fieldId);
-
-                        Neo.get('neo-helix-1').on('changeRotation', function(value) {
-                            value = Math.min(Math.max(value, this.minValue), this.maxValue);
-                            this.value = value;
-                        }, field);
-                    }
-                }
-            }, {
-                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',
-                text      : 'Flip Items',
-                listeners: {},
-                style    : {margin: '20px'},
-                domListeners: {
-                    click: data => {
-                        const helix = Neo.get('neo-helix-1');
-                        helix.flipped = !helix.flipped;
-                    }
-                }
-            }, {
-                ntype     : 'button',
-                disabled  : true, // component.Helix: buffered sorting #105
-                text      : 'Sort by Lastname',
-                listeners: {},
-                domListeners: {
-                    click: data => {
-                        Neo.get('neo-helix-1').store.sorters = [{
-                            property : 'lastname',
-                            direction: 'ASC'
-                        }, {
-                            property : 'firstname',
-                            direction: 'ASC'
-                        }];
-                    }
-                },
-                style: {
-                    margin      : '20px',
-                    marginBottom: '10px'
-                }
-            }, {
-                ntype     : 'button',
-                disabled  : true, // component.Helix: buffered sorting #105
-                text      : 'Sort by Firstname',
-                listeners: {},
-                domListeners: {
-                    click: data => {
-                        Neo.get('neo-helix-1').store.sorters = [{
-                            property : 'firstname',
-                            direction: 'ASC'
-                        }, {
-                            property : 'lastname',
-                            direction: 'ASC'
-                        }];
-                    }
-                },
-                style: {
-                    margin   : '20px',
-                    marginTop: 0
-                }
-            }, {
-                ntype    : 'button',
-                iconCls  : 'fa fa-square',
-                text     : 'Follow Selection',
-                listeners: {},
-                domListeners: {
-                    click: function(data) {
-                        let me   = this,
-                            helix = Neo.get('neo-helix-1');
-
-                        if (me.iconCls === 'fa fa-square') {
-                            helix.followSelection = true;
-                            me.iconCls = 'fa fa-check-square';
-                        } else {
-                            helix.followSelection = false;
-                            me.iconCls = 'fa fa-square';
-                        }
-                    }
-                },
-                style: {
-                    margin      : '20px',
-                    marginBottom: '10px'
-                }
-            }, {
-                module        : CheckBox,
-                checked       : Neo.config.logDeltaUpdates,
-                hideLabel     : true,
-                hideValueLabel: false,
-                style         : {marginLeft: '10px', marginTop: '10px'},
-                valueLabelText: 'logDeltaUpdates',
-
-                listeners: {
-                    change: function (data) {
-                        Neo.Main.setNeoConfig({
-                            key: 'logDeltaUpdates',
-                            value: data.value
-                        });
-                    }
-                }
-            }, {
-                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,
-            id    : 'neo-helix-1',
-            store : ImageStore,
-            ...me.helixConfig
-        });
-
-        me.items[0].items.unshift(me.helix);
-
-        if (me.showGitHubStarButton) {
-            me.on('mounted', () => {
-                Neo.main.DomAccess.addScript({
-                    async: true,
-                    defer: true,
-                    src  : 'https://buttons.github.io/buttons.js'
-                });
-            });
-        }
-    }
-
-    /**
-     * @returns {Neo.data.Store}
-     */
-    getStore() {
-        return this.items[0].items[0].store;
-    }
-}
-
-Neo.setupClass(MainContainer);
-
-export default MainContainer;