neo.mjs 6.17.1 → 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;

package/resources/images/Neo_Vector.svg

@@ -1,3 +0,0 @@
-<svg width="274" height="178" viewBox="0 0 274 178" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M231.866 178L136.597 82.5858L41.3368 178L0.101562 136.702L136.597 0L273.102 136.702L231.866 178Z" fill="#11F4A1"/>
-</svg>

package/resources/images/logos/Github-logo-black.svg

@@ -1 +0,0 @@
-<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#24292f"/></svg>

package/resources/images/logos/Slack-logo-black.svg

@@ -1,17 +0,0 @@
-<svg width="123" height="124" viewBox="0 0 123 124" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_460_4276)">
-<path d="M25.8 78.1988C25.8 85.2988 20 91.0988 12.9 91.0988C5.8 91.0988 0 85.2988 0 78.1988C0 71.0988 5.8 65.2988 12.9 65.2988H25.8V78.1988Z" fill="black"/>
-<path d="M32.3008 78.1988C32.3008 71.0988 38.1008 65.2988 45.2008 65.2988C52.3008 65.2988 58.1008 71.0988 58.1008 78.1988V110.499C58.1008 117.599 52.3008 123.399 45.2008 123.399C38.1008 123.399 32.3008 117.599 32.3008 110.499V78.1988Z" fill="black"/>
-<path d="M45.2008 26.3996C38.1008 26.3996 32.3008 20.5996 32.3008 13.4996C32.3008 6.39961 38.1008 0.599609 45.2008 0.599609C52.3008 0.599609 58.1008 6.39961 58.1008 13.4996V26.3996H45.2008Z" fill="black"/>
-<path d="M45.2 32.9004C52.3 32.9004 58.1 38.7004 58.1 45.8004C58.1 52.9004 52.3 58.7004 45.2 58.7004H12.9C5.8 58.7004 0 52.9004 0 45.8004C0 38.7004 5.8 32.9004 12.9 32.9004H45.2Z" fill="black"/>
-<path d="M97 45.8004C97 38.7004 102.8 32.9004 109.9 32.9004C117 32.9004 122.8 38.7004 122.8 45.8004C122.8 52.9004 117 58.7004 109.9 58.7004H97V45.8004Z" fill="black"/>
-<path d="M90.4992 45.7996C90.4992 52.8996 84.6992 58.6996 77.5992 58.6996C70.4992 58.6996 64.6992 52.8996 64.6992 45.7996V13.4996C64.6992 6.39961 70.4992 0.599609 77.5992 0.599609C84.6992 0.599609 90.4992 6.39961 90.4992 13.4996V45.7996Z" fill="black"/>
-<path d="M77.5992 97.5996C84.6992 97.5996 90.4992 103.4 90.4992 110.5C90.4992 117.6 84.6992 123.4 77.5992 123.4C70.4992 123.4 64.6992 117.6 64.6992 110.5V97.5996H77.5992Z" fill="black"/>
-<path d="M77.5992 91.0988C70.4992 91.0988 64.6992 85.2988 64.6992 78.1988C64.6992 71.0988 70.4992 65.2988 77.5992 65.2988H109.899C116.999 65.2988 122.799 71.0988 122.799 78.1988C122.799 85.2988 116.999 91.0988 109.899 91.0988H77.5992Z" fill="black"/>
-</g>
-<defs>
-<clipPath id="clip0_460_4276">
-<rect width="123" height="124" fill="white"/>
-</clipPath>
-</defs>
-</svg>