neo.mjs 6.12.1 → 6.13.0

package/src/component/wrapper/MonacoEditor.mjs

@@ -0,0 +1,420 @@
+import Base from '../../component/Base.mjs';
+
+/**
+ * Using this wrapper component requires to import the related main thread addon: Neo.main.addon.MonacoEditor
+ * @class Neo.component.wrapper.MonacoEditor
+ * @extends Neo.component.Base
+ */
+class MonacoEditor extends Base {
+    /**
+     * Valid values for cursorBlinking
+     * @member {String[]} cursorBlinkings=['blink','expand','phase','smooth','solid']
+     * @protected
+     * @static
+     */
+    static cursorBlinkings = ['blink', 'expand', 'phase', 'smooth', 'solid']
+    /**
+     * @member {Object} delayable
+     * @protected
+     * @static
+     */
+    static delayable = {
+        layoutEditor: {type: 'buffer', timer: 50}
+    }
+    /**
+     * Valid values for editorTheme
+     * @member {String[]} editorThemes=['hc-black','hc-light','vs','vs-dark']
+     * @protected
+     * @static
+     */
+    static editorThemes = ['hc-black', 'hc-light', 'vs', 'vs-dark']
+
+    static config = {
+        /**
+         * @member {String} className='Neo.component.wrapper.MonacoEditor'
+         * @protected
+         */
+        className: 'Neo.component.wrapper.MonacoEditor',
+        /**
+         * @member {String} ntype='monaco-editor'
+         * @protected
+         */
+        ntype: 'monaco-editor',
+        /**
+         * @member {Boolean} contextmenu_=false
+         */
+        contextmenu_: false,
+        /**
+         * Options are: 'blink', 'expand', 'phase', 'smooth', 'solid'
+         * @member {String} cursorBlinking_='blink'
+         */
+        cursorBlinking_: 'blink',
+        /**
+         * additional property to only use in combination with readOnly === true.
+         * domReadOnly additionally sets the readonly attribute to the underlying textarea.
+         * @member {Boolean} domReadOnly_=false
+         */
+        domReadOnly_: false,
+        /**
+         * Options are: 'vs', 'vs-dark', 'hc-black', 'hc-light'
+         * @member {String} editorTheme_='vs'
+         */
+        editorTheme_: 'vs',
+        /**
+         * @member {Number} fontSize_=14
+         */
+        fontSize_: 14,
+        /**
+         * @member {String} language_='javascript'
+         */
+        language_: 'javascript',
+        /**
+         * @member {Object} minimap_={enabled: false}
+         */
+        minimap_: {enabled: false},
+        /**
+         * A generic config which allows changing all editor options which are not exposed as configs here.
+         * For a full list of available options see:
+         * https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IEditorOptions.html
+         *
+         * For initial options this config will win over related class configs.
+         * However, run-time changes of related class configs will dynamically change their option values.
+         * @member {Object} options_={}
+         */
+        options_: {},
+        /**
+         * @member {Boolean} readOnly_=false
+         */
+        readOnly_: false,
+        /**
+         * @member {Boolean} scrollBeyondLastLine_=false
+         */
+        scrollBeyondLastLine_: false,
+        /**
+         * @member {Boolean} showLineNumbers_=true
+         */
+        showLineNumbers_: true,
+        /**
+         * @member {String|String[]} value_=''
+         */
+        value_: ''
+    }
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+
+        let me = this;
+
+        me.addDomListeners({
+            editorChange: me.onContentChange,
+            resize      : me.layoutEditor,
+            scope       : me
+        })
+    }
+
+    /**
+     * Triggered after the contextmenu config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetContextmenu(value, oldValue) {
+        this.updateOptions({contextmenu: value})
+    }
+
+    /**
+     * Triggered after the cursorBlinking config got changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    afterSetCursorBlinking(value, oldValue) {
+        this.updateOptions({cursorBlinking: value})
+    }
+
+    /**
+     * Triggered after the domReadOnly config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetDomReadOnly(value, oldValue) {
+        this.updateOptions({domReadOnly: value})
+    }
+
+    /**
+     * Triggered after the mounted config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetMounted(value, oldValue) {
+        super.afterSetMounted(value, oldValue);
+
+        value && setTimeout(() => {
+            let me = this;
+
+            Neo.main.addon.MonacoEditor.createInstance(me.getInitialOptions()).then(() => {
+                Neo.main.addon.ResizeObserver.register({
+                    id      : me.id,
+                    windowId: me.windowId
+                });
+
+                // use this custom method as needed inside your class extensions
+                me.onEditorMounted?.()
+            })
+        }, 50)
+    }
+
+    /**
+     * Triggered after the editorTheme config got changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    afterSetEditorTheme(value, oldValue) {
+        let me = this;
+
+        if (me.mounted) {
+            Neo.main.addon.MonacoEditor.setTheme({
+                id      : me.id,
+                value,
+                windowId: me.windowId
+            })
+        }
+    }
+
+    /**
+     * Triggered after the fontSize config got changed
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @protected
+     */
+    afterSetFontSize(value, oldValue) {
+        this.updateOptions({fontSize: value})
+    }
+
+    /**
+     * Triggered after the language config got changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    afterSetLanguage(value, oldValue) {
+        let me = this;
+
+        if (me.mounted) {
+            Neo.main.addon.MonacoEditor.setLanguage({
+                id      : me.id,
+                value,
+                windowId: me.windowId
+            })
+        }
+    }
+
+    /**
+     * Triggered after the minimap config got changed
+     * @param {Object} value
+     * @param {Object} oldValue
+     * @protected
+     */
+    afterSetMinimap(value, oldValue) {
+        this.updateOptions({minimap: value})
+    }
+
+    /**
+     * Triggered after the options config got changed
+     * @param {Object} value
+     * @param {Object} oldValue
+     * @protected
+     */
+    afterSetOptions(value, oldValue) {
+        this.updateOptions(value)
+    }
+
+    /**
+     * Triggered after the readOnly config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetReadOnly(value, oldValue) {
+        this.updateOptions({readOnly: value})
+    }
+
+    /**
+     * Triggered after the scrollBeyondLastLine config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetScrollBeyondLastLine(value, oldValue) {
+        this.updateOptions({scrollBeyondLastLine: value})
+    }
+
+    /**
+     * Triggered after the showLineNumbers config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetShowLineNumbers(value, oldValue) {
+        this.updateOptions({lineNumbers: value ? 'on' : 'off'})
+    }
+
+    /**
+     * Triggered after the value config got changed
+     * @param {String|String[]} value
+     * @param {String|String[]} oldValue
+     * @protected
+     */
+    afterSetValue(value, oldValue) {
+        let me = this;
+
+        if (me.mounted) {
+            Neo.main.addon.MonacoEditor.setValue({
+                id      : me.id,
+                value   : me.stringifyValue(me.value),
+                windowId: me.windowId
+            })
+        }
+    }
+
+    /**
+     * Triggered before the cursorBlinking config gets changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @returns {String}
+     * @protected
+     */
+    beforeSetCursorBlinking(value, oldValue) {
+        return this.beforeSetEnumValue(value, oldValue, 'cursorBlinking')
+    }
+
+    /**
+     * Triggered before the editorTheme config gets changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @returns {String}
+     * @protected
+     */
+    beforeSetEditorTheme(value, oldValue) {
+        return this.beforeSetEnumValue(value, oldValue, 'editorTheme')
+    }
+
+    /**
+     * @param args
+     */
+    destroy(...args) {
+        let me = this;
+
+        me.mounted && Neo.main.addon.ResizeObserver.unregister({
+            id      : me.id,
+            windowId: me.windowId
+        });
+
+        Neo.main.addon.MonacoEditor.destroyInstance({
+            id      : me.id,
+            windowId: me.windowId
+        });
+
+        super.destroy(...args)
+    }
+
+    /**
+     * Fetches the current value from the editor instance
+     * @returns {Promise<*>}
+     */
+    async getEditorValue() {
+        let me = this;
+
+        return Neo.main.addon.MonacoEditor.getValue({
+            id      : me.id,
+            windowId: me.windowId
+        })
+    }
+
+    /**
+     * Override this method as needed inside your own class extensions
+     * @returns {Object}
+     */
+    getInitialOptions() {
+        let me = this;
+
+        return {
+            appName             : me.appName,
+            contextmenu         : me.contextmenu,
+            cursorBlinking      : me.cursorBlinking,
+            domReadOnly         : me.domReadOnly,
+            id                  : me.id,
+            fontSize            : me.fontSize,
+            language            : me.language,
+            lineNumbers         : me.showLineNumbers ? 'on' : 'off',
+            minimap             : me.minimap,
+            readOnly            : me.readOnly,
+            scrollBeyondLastLine: me.scrollBeyondLastLine,
+            theme               : me.editorTheme,
+            value               : me.stringifyValue(me.value),
+            ...me.options
+        }
+    }
+
+    /**
+     *
+     */
+    layoutEditor() {
+        let me = this;
+
+        if (me.mounted) {
+            Neo.main.addon.MonacoEditor.layoutEditor({
+                id      : me.id,
+                windowId: me.windowId
+            })
+        }
+    }
+
+    /**
+     * @param {Object} data
+     * @param {Object} data.event
+     * @param {String} data.id
+     * @param {String} data.value
+     */
+    onContentChange(data) {
+        this.fire('editorChange', data)
+    }
+
+    /**
+     *
+     * @param {String|String[]} value
+     * @returns {String}
+     */
+    stringifyValue(value) {
+        if (Array.isArray(value)) {
+            value = value.join('\n')
+        }
+
+        return value
+    }
+
+    /**
+     * @param {Object} options
+     */
+    updateOptions(options) {
+        let me = this;
+
+        if (me.mounted) {
+            Neo.main.addon.MonacoEditor.updateOptions({
+                id      : me.id,
+                windowId: me.windowId,
+                options
+            })
+        }
+    }
+}
+
+Neo.setupClass(MonacoEditor);
+
+export default MonacoEditor;

package/src/container/Accordion.mjs

@@ -125,6 +125,6 @@ class Accordion extends Panel {
     }
 }
 
-Neo.applyClassConfig(Accordion);
+Neo.setupClass(Accordion);
 
 export default Accordion;

package/src/container/AccordionItem.mjs

@@ -177,6 +177,6 @@ class AccordionContainer extends Base {
     }
 }
 
-Neo.applyClassConfig(AccordionContainer);
+Neo.setupClass(AccordionContainer);
 
 export default AccordionContainer;

package/src/container/Base.mjs

@@ -218,11 +218,17 @@ class Base extends Component {
      * @protected
      */
     afterSetWindowId(value, oldValue) {
-        value && this.items?.forEach(item => {
+        let me = this;
+
+        value && me.items?.forEach(item => {
             if (Neo.isObject(item)) {
                 item.windowId = value
             }
         })
+
+        if (value && me.layout) {
+            me.layout.windowId = value
+        }
     }
 
     /**
@@ -272,7 +278,7 @@ class Base extends Component {
      */
     createItem(item, index) {
         let me       = this,
-            config   = {appName: me.appName, parentId: me.id, parentIndex: index},
+            config   = {appName: me.appName, parentId: me.id, parentIndex: index, windowId: me.windowId},
             defaults = {...me.itemDefaults},
             lazyLoadItem, module;
 
@@ -391,11 +397,13 @@ class Base extends Component {
         if (value) {
             if (value instanceof LayoutBase && value.isLayout) {
                 value.appName     = me.appName;
-                value.containerId = me.id
+                value.containerId = me.id;
+                value.windowId    = me.windowId;
             } else {
                 value = me.parseLayoutClass(value);
                 value.appName     = me.appName;
                 value.containerId = me.id;
+                value.windowId    = me.windowId;
                 value = Neo.ntype(value)
             }
         }
@@ -580,6 +588,7 @@ class Base extends Component {
      * @param {Neo.component.Base} component
      * @param {Boolean} [destroyItem=true]
      * @param {Boolean} [silent=false]
+     * @returns {Neo.component.Base|null}
      */
     remove(component, destroyItem=true, silent=false) {
         let items = [...this.items],
@@ -623,6 +632,7 @@ class Base extends Component {
      * @param {Number} index
      * @param {Boolean} destroyItem=true
      * @param {Boolean} silent=false
+     * @returns {Neo.component.Base|null}
      */
     removeAt(index, destroyItem=true, silent=false) {
         let me    = this,
@@ -642,9 +652,11 @@ class Base extends Component {
             me[silent || destroyItem ? '_vdom' : 'vdom'] = vdom;
 
             if (destroyItem) {
-                item.destroy(true, silent)
+                item.destroy(true, silent);
+                return null
             } else {
-                item.mounted = false
+                item.mounted = false;
+                return item
             }
         }
     }
@@ -688,6 +700,6 @@ class Base extends Component {
     }
 }
 
-Neo.applyClassConfig(Base);
+Neo.setupClass(Base);
 
 export default Base;

package/src/container/Panel.mjs

@@ -190,6 +190,6 @@ class Panel extends Container {
     }
 }
 
-Neo.applyClassConfig(Panel);
+Neo.setupClass(Panel);
 
 export default Panel;

package/src/container/Viewport.mjs

@@ -46,6 +46,6 @@ class Viewport extends Container {
     }
 }
 
-Neo.applyClassConfig(Viewport);
+Neo.setupClass(Viewport);
 
 export default Viewport;

package/src/controller/Application.mjs

@@ -125,7 +125,7 @@ class Application extends Base {
     }
 }
 
-Neo.applyClassConfig(Application);
+Neo.setupClass(Application);
 
 // convenience shortcut
 Neo.app = config => Neo.create({

package/src/controller/Base.mjs

@@ -78,7 +78,7 @@ class Base extends CoreBase {
             if (key.toLowerCase() === 'default'){
                 me.defaultRoute = value[key]
             } else {
-                me.handleRoutes[key] = new RegExp(key.replace(routeParamRegex, '([\\w-]+)')+'$')
+                me.handleRoutes[key] = new RegExp(key.replace(routeParamRegex, '([\\w-.]+)')+'$')
             }
         })
     }
@@ -205,6 +205,6 @@ class Base extends CoreBase {
     }
 }
 
-Neo.applyClassConfig(Base);
+Neo.setupClass(Base);
 
 export default Base;

package/src/controller/Component.mjs

@@ -270,6 +270,6 @@ class Component extends Base {
     }
 }
 
-Neo.applyClassConfig(Component);
+Neo.setupClass(Component);
 
 export default Component;

package/src/core/Base.mjs

@@ -1,5 +1,5 @@
-import {debounce, throttle, buffer} from '../util/Function.mjs';
-import IdGenerator          from './IdGenerator.mjs'
+import {buffer, debounce, throttle} from '../util/Function.mjs';
+import IdGenerator                  from './IdGenerator.mjs'
 
 const configSymbol       = Symbol.for('configSymbol'),
       forceAssignConfigs = Symbol('forceAssignConfigs'),
@@ -12,7 +12,8 @@ const configSymbol       = Symbol.for('configSymbol'),
  */
 class Base {
     /**
-     * You can define methods which should get delayed
+     * You can define methods which should get delayed.
+     * Types are buffer, debounce & throttle.
      * @example
      *  delayable: {
      *      fireChangeEvent: {
@@ -191,9 +192,9 @@ class Base {
         Object.entries(delayable).forEach(([key, value]) => {
             if (value) {
                 let map = {
+                    buffer()   {me[key] = new buffer(me[key],   me, value.timer)},
                     debounce() {me[key] = new debounce(me[key], me, value.timer)},
-                    throttle() {me[key] = new throttle(me[key], me, value.timer)},
-                    buffer()   {me[key] = new buffer(me[key],   me, value.timer)}
+                    throttle() {me[key] = new throttle(me[key], me, value.timer)}
                 };
 
                 map[value.type]?.()
@@ -616,7 +617,7 @@ class Base {
     }
 }
 
-Neo.applyClassConfig(Base);
+Neo.setupClass(Base);
 
 Base.instanceManagerAvailable = false;
 

package/src/core/Compare.mjs

@@ -129,7 +129,7 @@ class Compare extends Base {
     }
 }
 
-Neo.applyClassConfig(Compare);
+Neo.setupClass(Compare);
 
 // alias
 Neo.isEqual = Compare.isEqual;

package/src/core/IdGenerator.mjs

@@ -72,6 +72,6 @@ class IdGenerator {
     onConstructed() {}
 }
 
-let instance = Neo.applyClassConfig(IdGenerator);
+let instance = Neo.setupClass(IdGenerator);
 
 export default instance;

package/src/core/Observable.mjs

@@ -291,6 +291,6 @@ class Observable extends Base {
     }
 }
 
-Neo.applyClassConfig(Observable);
+Neo.setupClass(Observable);
 
 export default Observable;

package/src/core/Util.mjs

@@ -209,7 +209,7 @@ class Util extends Base {
     }
 }
 
-Neo.applyClassConfig(Util);
+Neo.setupClass(Util);
 
 // aliases
 Neo.applyFromNs(Neo, Util, {

package/src/dashboard/Container.mjs

@@ -19,6 +19,6 @@ class Container extends BaseContainer {
     }
 }
 
-Neo.applyClassConfig(Container);
+Neo.setupClass(Container);
 
 export default Container;

package/src/data/Model.mjs

@@ -65,6 +65,6 @@ class Model extends Base {
     }
 }
 
-Neo.applyClassConfig(Model);
+Neo.setupClass(Model);
 
 export default Model;