lexgui 0.1.40 → 0.1.42

package/build/components/audio.js

@@ -44,12 +44,29 @@ Panel.prototype.addKnob = function( name, value, min, max, callback, options = {
         });
     }
 
+    const snapEnabled = ( options.snap && options.snap.constructor == Number );
+    const ticks = [];
+    if( snapEnabled )
+    {
+        const range = (max - min) / options.snap;
+        for( let i = 0; i < ( options.snap + 1 ); ++i )
+        {
+            ticks.push( min + (i  * range) );
+        }
+    }
+
     var container = document.createElement( 'div' );
-    container.className = "lexknob " + ( options.size ?? '' );
+    container.className = "lexknob";
+    container.addClass( options.size );
+    container.addClass( snapEnabled ? "show-ticks" : null );
     container.style.width = options.inputWidth || "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + ")";
 
     let knobCircle = document.createElement( 'div' );
     knobCircle.className = "knobcircle";
+    if( snapEnabled )
+    {
+        knobCircle.style.setProperty( "--knob-snap-mark", ( 270 / options.snap ) + "deg" );
+    }
 
     let innerKnobCircle = document.createElement( 'div' );
     innerKnobCircle.className = "innerknobcircle";
@@ -69,6 +86,7 @@ Panel.prototype.addKnob = function( name, value, min, max, callback, options = {
 
     innerKnobCircle.value = innerKnobCircle.iValue = value;
 
+    let mustSnap = false;
     let innerSetValue = function( v ) {
         // Convert val between (-135 and 135)
         const angle = LX.remapRange( v, innerKnobCircle.min, innerKnobCircle.max, -135.0, 135.0 );
@@ -81,29 +99,20 @@ Panel.prototype.addKnob = function( name, value, min, max, callback, options = {
 
     if( options.disabled )
     {
-        // vecinput.disabled = true;
+        container.addClass( "disabled" );
     }
 
-    // Add wheel input
-
-    innerKnobCircle.addEventListener( "wheel", function( e ) {
-        e.preventDefault();
-        if( this !== document.activeElement )
-            return;
-        let mult = options.step ?? 1;
-        if( e.shiftKey ) mult *= 10;
-        else if( e.altKey ) mult *= 0.1;
-        let new_value = ( this.value - mult * ( e.deltaY > 0 ? 1 : -1 ) );
-        this.value = new_value;// .toFixed( 4 ).replace( /([0-9]+(\.[0-9]+[1-9])?)(\.?0+$)/, '$1' );
-        Panel._dispatch_event( innerKnobCircle, "change" );
-    }, { passive: false });
-
     innerKnobCircle.addEventListener( "change", e => {
 
         const knob = e.target;
 
         const skipCallback = e.detail;
 
+        if( mustSnap )
+        {
+            knob.value = ticks.reduce(( prev, curr ) => Math.abs( curr - knob.value ) < Math.abs( prev - knob.value ) ? curr : prev );
+        }
+
         let val = knob.value = LX.clamp( knob.value, knob.min, knob.max );
         val = options.precision ? LX.round( val, options.precision ) : val;
 
@@ -114,9 +123,14 @@ Panel.prototype.addKnob = function( name, value, min, max, callback, options = {
         {
             let btn = element.querySelector( ".lexwidgetname .lexicon" );
             if( btn ) btn.style.display = val != innerKnobCircle.iValue ? "block": "none";
+
+            if( !( snapEnabled && !mustSnap ) )
+            {
+                this._trigger( new LX.IEvent( name, val, e ), callback );
+                mustSnap = false;
+            }
         }
 
-        if( !skipCallback ) this._trigger( new LX.IEvent( name, val, e ), callback );
     }, { passive: false });
     
     // Add drag input
@@ -124,41 +138,64 @@ Panel.prototype.addKnob = function( name, value, min, max, callback, options = {
     innerKnobCircle.addEventListener( "mousedown", inner_mousedown );
 
     var that = this;
-    var lastY = 0;
+
     function inner_mousedown( e ) {
-        if( document.activeElement == innerKnobCircle ) return;
+
+        if( document.activeElement == innerKnobCircle || options.disabled )
+        {
+            return;
+        }
+
         var doc = that.root.ownerDocument;
         doc.addEventListener("mousemove",inner_mousemove);
         doc.addEventListener("mouseup",inner_mouseup);
-        lastY = e.pageY;
-        document.body.classList.add('nocursor');
         document.body.classList.add('noevents');
+
+        if( !document.pointerLockElement )
+        {
+            container.requestPointerLock();
+        }
+
         e.stopImmediatePropagation();
         e.stopPropagation();
     }
 
     function inner_mousemove( e ) {
-        if (lastY != e.pageY) {
-            let dt = lastY - e.pageY;
+
+        let dt = -e.movementY;
+
+        if ( dt != 0 )
+        {
             let mult = options.step ?? 1;
             if(e.shiftKey) mult *= 10;
             else if(e.altKey) mult *= 0.1;
             let new_value = (innerKnobCircle.value - mult * dt);
-            innerKnobCircle.value = new_value;//.toFixed( 4 ).replace(/([0-9]+(\.[0-9]+[1-9])?)(\.?0+$)/,'$1');
+            innerKnobCircle.value = new_value;
             Panel._dispatch_event( innerKnobCircle, 'change' );
         }
 
-        lastY = e.pageY;
         e.stopPropagation();
         e.preventDefault();
     }
 
     function inner_mouseup( e ) {
+
         var doc = that.root.ownerDocument;
         doc.removeEventListener( 'mousemove', inner_mousemove );
         doc.removeEventListener( 'mouseup', inner_mouseup );
-        document.body.classList.remove( 'nocursor' );
         document.body.classList.remove( 'noevents' );
+
+        // Snap if necessary
+        if( snapEnabled )
+        {
+            mustSnap = true;
+            Panel._dispatch_event( innerKnobCircle, 'change' );
+        }
+
+        if( document.pointerLockElement )
+        {
+            document.exitPointerLock();
+        }
     }
     
     container.appendChild( knobCircle );

package/build/components/codeeditor.js

@@ -239,7 +239,10 @@ class CodeEditor {
 
     /**
      * @param {*} options
-     * skip_info, allow_add_scripts, name
+     * name:
+     * skipInfo:
+     * fileExplorer:
+     * allowAddScripts:
      */
 
     constructor( area, options = {} ) {
@@ -249,9 +252,9 @@ class CodeEditor {
         CodeEditor.__instances.push( this );
         
         // File explorer
-        if( options.file_explorer ?? false )
+        if( options.fileExplorer ?? false )
         {
-            var [explorerArea, codeArea] = area.split({ sizes:["15%","85%"] });
+            var [ explorerArea, codeArea ] = area.split({ sizes:[ "15%","85%" ] });
             explorerArea.setLimitBox( 180, 20, 512 );
             this.explorerArea = explorerArea;
 
@@ -259,6 +262,8 @@ class CodeEditor {
 
             panel.addTitle( "EXPLORER" );
 
+            this._tabStorage = {};
+
             let sceneData = {
                 'id': 'WORKSPACE',
                 'skipVisibility': true,
@@ -305,7 +310,7 @@ class CodeEditor {
         }
 
         this.base_area = area;
-        this.area = new LX.Area( { className: "lexcodeeditor", height: "100%", no_append: true } );
+        this.area = new LX.Area( { className: "lexcodeeditor", height: "100%", skipAppend: true } );
 
         this.tabs = this.area.addTabs( { onclose: (name) => {
             delete this.openedTabs[ name ];
@@ -315,8 +320,9 @@ class CodeEditor {
                 this.cursors.classList.remove( 'show' );
             }
         } } );
+
         this.tabs.root.addEventListener( 'dblclick', (e) => {
-            if( options.allow_add_scripts ?? true ) {
+            if( options.allowAddScripts ?? true ) {
                 e.preventDefault();
                 this.addTab("unnamed.js", true);
             }
@@ -332,8 +338,8 @@ class CodeEditor {
         this.root.tabIndex = -1;
         area.attach( this.root );
 
-        this.skipCodeInfo = options.skip_info ?? false;
-        this.disableEdition = options.disable_edition ?? false;
+        this.skipCodeInfo = options.skipInfo ?? false;
+        this.disableEdition = options.disableEdition ?? false;
 
         if( !this.disableEdition )
         {
@@ -1045,10 +1051,12 @@ class CodeEditor {
         this.loadedTabs = { };
         this.openedTabs = { };
         
-        if( options.allow_add_scripts ?? true )
+        if( options.allowAddScripts ?? true )
+        {
             this.addTab("+", false, "New File");
+        }
 
-        this.addTab( options.name || "untitled", true, options.title );
+        this.addTab( options.name || "untitled", true, options.title, { language: "CSS" } );
 
         // Create inspector panel
         let panel = this._createPanelInfo();
@@ -1191,7 +1199,7 @@ class CodeEditor {
         }
     }
 
-    loadFile( file ) {
+    loadFile( file, options = {} ) {
 
         const inner_add_tab = ( text, name, title ) => {
 
@@ -1207,16 +1215,25 @@ class CodeEditor {
 
             if( this.explorer )
             {
-                this._storedLines = this._storedLines ?? {};
-                this._storedLines[ name ] = lines;
-                this.addExplorerItem( { 'id': name, 'skipVisibility': true, 'icon': this._getFileIcon( name ) } );
+                this._tabStorage[ name ] = {
+                    lines: lines,
+                    options: options
+                };
+
+                const ext = this.languages[ options.language ] ?. ext;
+                this.addExplorerItem( { 'id': name, 'skipVisibility': true, 'icon': this._getFileIcon( name, ext ) } );
                 this.explorer.frefresh( name );
             }
             else
             {
-                this.addTab(name, true, title);
+                this.addTab( name, true, title, options );
                 this.code.lines = lines;
-                this._changeLanguageFromExtension( LX.getExtension( name ) );
+
+                // Default inferred language if not specified
+                if( !options.language )
+                {
+                    this._changeLanguageFromExtension( LX.getExtension( name ) );
+                }
             }
         };
 
@@ -1224,7 +1241,6 @@ class CodeEditor {
         {
             let filename = file;
             LX.request({ url: filename, success: text => {
-
                 const name = filename.substring(filename.lastIndexOf( '/' ) + 1);
                 inner_add_tab( text, name, filename );
             } });
@@ -1417,10 +1433,16 @@ class CodeEditor {
         }
     }
 
-    _changeLanguage( lang ) {
+    _changeLanguage( lang, override = false ) {
 
         this.code.language = lang;
         this.highlight = lang;
+
+        if( override )
+        {
+            this.code.languageOverride = lang;
+        }
+
         this._updateDataInfoPanel( "@highlight", lang );
         this.processLines();
 
@@ -1491,8 +1513,12 @@ class CodeEditor {
             }, { width: "10%", nameWidth: "15%", signal: "@tab-spaces" });
             panel.addButton( "<b>{ }</b>", this.highlight, ( value, event ) => {
                 LX.addContextMenu( "Language", event, m => {
-                    for( const lang of Object.keys(this.languages) )
-                        m.add( lang, this._changeLanguage.bind(this) );
+                    for( const lang of Object.keys( this.languages ) )
+                    {
+                        m.add( lang, v => {
+                            this._changeLanguage( v, true )
+                        } );
+                    }
                 });
             }, { width: "17.5%", nameWidth: "15%", signal: "@highlight" });
             panel.endLine();
@@ -1553,8 +1579,16 @@ class CodeEditor {
         this.restoreCursor( cursor, this.code.cursorState );    
 
         this.endSelection();
-        this._changeLanguageFromExtension( LX.getExtension( name ) );
         this._updateDataInfoPanel( "@tab-name", name );
+
+        if( this.code.languageOverride )
+        {
+            this._changeLanguage( this.code.languageOverride );
+        }
+        else
+        {
+            this._changeLanguageFromExtension( LX.getExtension( name ) );
+        }
     }
 
     _onContextMenuTab( isNewTabButton, event, name,  ) {
@@ -1569,7 +1603,7 @@ class CodeEditor {
         });
     }
 
-    addTab( name, selected, title ) {
+    addTab( name, selected, title, options = {} ) {
         
         // If already loaded, set new name...
         const repeats = Object.keys( editor.loadedTabs ).slice( 1 ).reduce( ( v, key ) => {
@@ -1586,7 +1620,7 @@ class CodeEditor {
         let code = document.createElement( 'div' );
         code.className = 'code';
         code.lines = [ "" ];
-        code.language = "Plain Text";
+        code.language = options.language ?? "Plain Text";
         code.cursorState = {};
         code.undoSteps = [];
         code.redoSteps = [];
@@ -1643,6 +1677,12 @@ class CodeEditor {
             this.processLines();
         }
 
+        if( options.language )
+        {
+            code.languageOverride = options.language;
+            this._changeLanguage( code.languageOverride );
+        }
+
         this._updateDataInfoPanel( "@tab-name", name );
 
         // Bc it could be overrided..
@@ -1663,13 +1703,25 @@ class CodeEditor {
         if( !code )
         {
             this.addTab( name, true );
-            // Unload lines from file...
-            if( this._storedLines[ name ] )
+
+            // Unload lines from storage...
+            const tabData = this._tabStorage[ name ];
+            if( tabData )
             {
-                this.code.lines = this._storedLines[ name ];
-                delete this._storedLines[ name ];
+                this.code.lines = tabData.lines;
+
+                if( tabData.options.language )
+                {
+                    this._changeLanguage( tabData.options.language, true );
+                }
+                else
+                {
+                    this._changeLanguageFromExtension( LX.getExtension( name ) );
+                }
+
+                delete this._tabStorage[ name ];
             }
-            this._changeLanguageFromExtension( LX.getExtension( name ) );
+
             return;
         }
 
@@ -1697,7 +1749,7 @@ class CodeEditor {
         this.resetCursorPos( CodeEditor.CURSOR_LEFT | CodeEditor.CURSOR_TOP );
         this.processLines();
         this._changeLanguageFromExtension( LX.getExtension( name ) );
-        this._updateDataInfoPanel( "@tab-name", tabname );
+        this._updateDataInfoPanel( "@tab-name", code.tabname );
     }
 
     loadTabFromFile() {
@@ -2910,7 +2962,7 @@ class CodeEditor {
         else if( this._buildingString != undefined )
             discardToken = this._appendStringToken( token );
         
-        else if( this._mustHightlightWord( token, CodeEditor.keywords ) && ( lang.tags ?? false ? ( this._enclosedByTokens( token, tokenIndex, '<', '>' ) ) : true ) )
+        else if( ( this._mustHightlightWord( token, CodeEditor.keywords ) || highlight == 'xml' ) && ( lang.tags ?? false ? ( this._enclosedByTokens( token, tokenIndex, '<', '>' ) ) : true ) )
             token_classname = "cm-kwd";
 
         else if( this._mustHightlightWord( token, CodeEditor.builtin ) && ( lang.tags ?? false ? ( this._enclosedByTokens( token, tokenIndex, '<', '>' ) ) : true ) )
@@ -3016,11 +3068,14 @@ class CodeEditor {
         const tagStartIndex = indexOfFrom( this._currentLineString, tagStart, tokenStartIndex, true );
         if( tagStartIndex < 0 ) // Not found..
             return;
+        const tagStartIndexOpposite = indexOfFrom( this._currentLineString, tagEnd, tokenStartIndex, true );
+        if( tagStartIndexOpposite >= 0  && tagStartIndexOpposite > tagStartIndex ) // Found the opposite first while reversing..
+            return;
         const tagEndIndex = indexOfFrom( this._currentLineString, tagEnd, tokenStartIndex );
         if( tagEndIndex < 0 ) // Not found..
             return;
 
-        return ( tagStartIndex < tokenStartIndex ) && ( tagEndIndex >= ( tokenStartIndex + token.length ) );
+        return ( tagStartIndex < tokenStartIndex ) && ( tagEndIndex >= ( tokenStartIndex + token.length ) ) && !this._mustHightlightWord( token, CodeEditor.symbols );
     }
 
     _inBlockCommentSection( line ) {
@@ -3624,7 +3679,7 @@ class CodeEditor {
         const scrollBarWidth = this.hScrollbar.thumb.parentElement.offsetWidth;
         const scrollThumbWidth = this.hScrollbar.thumb.offsetWidth;
 
-        this.hScrollbar.thumb._left = LX.UTILS.clamp( value, 0, ( scrollBarWidth - scrollThumbWidth ) );
+        this.hScrollbar.thumb._left = LX.clamp( value, 0, ( scrollBarWidth - scrollThumbWidth ) );
         this.hScrollbar.thumb.style.left = this.hScrollbar.thumb._left + "px";
 
         // Scroll code
@@ -3646,7 +3701,7 @@ class CodeEditor {
         const scrollBarHeight = this.vScrollbar.thumb.parentElement.offsetHeight;
         const scrollThumbHeight = this.vScrollbar.thumb.offsetHeight;
 
-        this.vScrollbar.thumb._top = LX.UTILS.clamp( value, 0, ( scrollBarHeight - scrollThumbHeight ) );
+        this.vScrollbar.thumb._top = LX.clamp( value, 0, ( scrollBarHeight - scrollThumbHeight ) );
         this.vScrollbar.thumb.style.top = this.vScrollbar.thumb._top + "px";
 
         // Scroll code
@@ -4222,7 +4277,7 @@ class CodeEditor {
         var r = document.querySelector( ':root' );
         var s = getComputedStyle( r );
         var pixels = parseInt( s.getPropertyValue( "--code-editor-font-size" ) );
-        pixels = LX.UTILS.clamp( pixels + 1, CodeEditor.CODE_MIN_FONT_SIZE, CodeEditor.CODE_MAX_FONT_SIZE );
+        pixels = LX.clamp( pixels + 1, CodeEditor.CODE_MIN_FONT_SIZE, CodeEditor.CODE_MAX_FONT_SIZE );
         r.style.setProperty( "--code-editor-font-size", pixels + "px" );
         this.charWidth = this._measureChar( "a", true );
 
@@ -4248,7 +4303,7 @@ class CodeEditor {
         var r = document.querySelector( ':root' );
         var s = getComputedStyle( r );
         var pixels = parseInt( s.getPropertyValue( "--code-editor-font-size" ) );
-        pixels = LX.UTILS.clamp( pixels - 1, CodeEditor.CODE_MIN_FONT_SIZE, CodeEditor.CODE_MAX_FONT_SIZE );
+        pixels = LX.clamp( pixels - 1, CodeEditor.CODE_MIN_FONT_SIZE, CodeEditor.CODE_MAX_FONT_SIZE );
         r.style.setProperty( "--code-editor-font-size", pixels + "px" );
         this.charWidth = this._measureChar( "a", true );
 
@@ -4358,7 +4413,8 @@ CodeEditor.symbols = {
     'Rust': ['<', '>', '[', ']', '(', ')', '='],
     'Python': ['<', '>', '[', ']', '(', ')', '='],
     'Batch': ['[', ']', '(', ')', '%'],
-    'HTML': ['<', '>', '/']
+    'HTML': ['<', '>', '/'],
+    'XML': ['<', '>', '/']
 };
 
 LX.CodeEditor = CodeEditor;

package/build/components/imui.js

@@ -195,7 +195,7 @@ class ImUI {
 
         if(active)
         {
-            value = LX.UTILS.clamp((this.mousePosition.x - min) / (max - min), 0.0, 1.0);
+            value = LX.clamp((this.mousePosition.x - min) / (max - min), 0.0, 1.0);
             this.widgets[ text ].value = value;
         }
         

package/build/components/nodegraph.js

@@ -1728,7 +1728,7 @@ class GraphEditor {
         if( delta > 0.0 ) this.currentGraph.scale *= 0.9;
         else this.currentGraph.scale *= ( 1.0 / 0.9 );
 
-        this.currentGraph.scale = LX.UTILS.clamp( this.currentGraph.scale, GraphEditor.MIN_SCALE, GraphEditor.MAX_SCALE );
+        this.currentGraph.scale = LX.clamp( this.currentGraph.scale, GraphEditor.MIN_SCALE, GraphEditor.MAX_SCALE );
 
         // Compute zoom center in pattern space using new scale
         // and get delta..
@@ -2218,7 +2218,7 @@ class GraphEditor {
         startPos = this._getPatternPosition( startPos );
         endPos = this._getPatternPosition( endPos );
 
-        const distanceX = LX.UTILS.clamp( Math.abs( startPos.x - endPos.x ), 0.0, 256.0 );
+        const distanceX = LX.clamp( Math.abs( startPos.x - endPos.x ), 0.0, 256.0 );
         const cPDistance = 128.0 * Math.pow( distanceX / 256.0, 0.5 );
 
         let cPoint1 = startPos.add( new LX.vec2( cPDistance, 0 ) );