lexgui 0.1.39 → 0.1.40

package/README.md

@@ -1,6 +1,8 @@
 # lexgui.js
 
-**lexgui.js** is a lightweight JavaScript library that allows you to create web interfaces using only JavaScript, HTML, and CSS. It provides an easy-to-use API for building dynamic and interactive common and complex editor interfaces without the need for tedious frameworks or big libraries. With lexgui.js, you can create custom UI components, handle user interactions, and update the interface dynamically.
+**lexgui.js** is a lightweight JavaScript library that allows you to create web interfaces using only JavaScript, HTML, and CSS. It provides an easy API for building dynamic and interactive editor interfaces without the need for tedious frameworks or big libraries. With lexgui.js, you can create custom UI components, handle user interactions, and update the interface dynamically.
+
+NPM Package: [npmjs.com/package/lexgui](https://www.npmjs.com/package/lexgui)
 
 <table>
   <tr>

package/build/components/videoeditor.js

@@ -359,16 +359,19 @@ class VideoEditor {
         this.startTimeString = "0:0";
         this.endTimeString = "0:0";
 
-        let [videoArea, controlsArea] = area.split({ type: 'vertical', sizes: ["80%", null], minimizable: false, resize: false });
+        this.mainArea = area;
+
+        let [videoArea, controlsArea] = area.split({ type: 'vertical', sizes: ["85%", null], minimizable: false, resize: false });
         controlsArea.root.classList.add('lexconstrolsarea');
 
         // Create video element and load it
         let video = this.video = options.video ?? document.createElement( 'video' );
+        this.video.loop = true;
+        
         if(options.src) {
             this.video.src = options.src;
+            this._loadVideo(options);
         }
-        this.video.loop = true;
-        this._loadVideo(options);
         if(options.videoArea) {
             options.videoArea.root.classList.add("lexvideoeditor");
             videoArea.attach(options.videoArea);
@@ -458,6 +461,24 @@ class VideoEditor {
             this.timebar.resize([availableWidth, timeBarArea.root.clientHeight]);
         })
 
+        this.onKeyUp = (event) => {
+            if(this.controls && event.key == " ") {
+                event.preventDefault();
+                event.stopPropagation();
+
+                if(!this.playing) {
+                    this.video.play();
+                }
+                else {
+                    this.video.pause();
+                }
+                this.playing = !this.playing;
+                this.controlsPanelLeft.refresh();
+            }
+        }
+
+        window.addEventListener( "keyup", this.onKeyUp);
+
         videoArea.onresize = (v) => {
             bottomArea.setSize([v.width, 40]);
         }
@@ -483,7 +504,7 @@ class VideoEditor {
                 this.timebar.onMouseMove(event);
             }
         });
-
+        
     }
 
     async _loadVideo( options = {} ) {
@@ -491,13 +512,17 @@ class VideoEditor {
             await new Promise(r => setTimeout(r, 1000));
             this.video.currentTime = 10000000 * Math.random();
         }
-        this.video.currentTime = -1; // BUG: some videos will not play unless this line is present 
-        this.video.currentTime = 0;
+        
+        this.timebar.startX = this.timebar.position.x;
+        this.timebar.endX = this.timebar.width;
+
+        this.video.currentTime = 0.01; // BUG: some videos will not play unless this line is present 
         this.endTime = this.video.duration;
-        this.timebar.currentX = this._timeToX(0);
+        
         this._setEndValue(this.timebar.endX);
         this._setStartValue(this.timebar.startX);
-        this._setCurrentValue(this.timebar.currentX);
+        this.timebar.currentX = this._timeToX(this.video.currentTime);
+        this._setCurrentValue(this.timebar.currentX, false);
         this.timebar.update(this.timebar.currentX);
         
         if ( !this.requestId ){ // only have one update on flight
@@ -508,6 +533,8 @@ class VideoEditor {
             this.hideControls();
         }
 
+        window.addEventListener( "keyup", this.onKeyUp);
+
         if(this.onVideoLoaded) {
             this.onVideoLoaded(this.video);
         }
@@ -627,9 +654,15 @@ class VideoEditor {
         }
     }
 
-    delete ( ) {
+    unbind ( ) {
         this.stopUpdates();
-        delete this;
+        
+        this.video.pause();
+        this.playing = false;
+        this.controlsPanelLeft.refresh();
+        this.video.src = "";
+
+        window.removeEventListener("keyup", this.onKeyUp);
     }
 }
 

package/build/lexgui.js

@@ -12,7 +12,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
     */
 
     var LX = global.LX = {
-        version: "0.1.39",
+        version: "0.1.40",
         ready: false,
         components: [], // specific pre-build components
         signals: {} // events and triggers
@@ -1200,7 +1200,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 // Send area resize to every widget in the area
                 for( let widget of widgets )
                 {
-                    const jsInstance = widget.jsIinstance;
+                    const jsInstance = widget.jsInstance;
 
                     if( jsInstance.onresize )
                     {
@@ -2541,6 +2541,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         static KNOB         = 23;
         static SIZE         = 24;
         static PAD          = 25;
+        static FORM         = 26;
 
         static NO_CONTEXT_TYPES = [
             Widget.BUTTON,
@@ -2627,6 +2628,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 case Widget.KNOB: return "Knob";
                 case Widget.SIZE: return "Size";
                 case Widget.PAD: return "Pad";
+                case Widget.FORM: return "Form";
                 case Widget.CUSTOM: return this.customName;
             }
         }
@@ -3528,7 +3530,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             if( name != undefined )
             {
-                if( !(options.no_name ?? false) )
+                if( !(options.hideName ?? false) )
                 {
                     let domName = document.createElement( 'div' );
                     domName.className = "lexwidgetname";
@@ -3568,6 +3570,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             }
 
             widget.domEl = element;
+            element.jsInstance = widget;
 
             const insert_widget = el => {
                 if(options.container)
@@ -3637,7 +3640,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             element.className += " lexfilter noname";
             
             let input = document.createElement('input');
-            input.id = 'input-filter';
+            input.className = 'lexinput-filter';
             input.setAttribute("placeholder", options.placeholder);
             input.style.width =  "calc( 100% - 17px )";
             input.value = options.filterValue || "";
@@ -4222,7 +4225,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
         addCard( name, options = {} ) {
 
-            options.no_name = true;
+            options.hideName = true;
             let widget = this.create_widget(name, Widget.CARD, options);
             let element = widget.domEl;
 
@@ -4273,6 +4276,89 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             return widget;
         }
 
+        /**
+         * @method addForm
+         * @param {String} name Widget name
+         * @param {Object} data Form data
+         * @param {Function} callback Callback function on submit form
+         * @param {*} options:
+         * actionName: Text to be shown in the button
+         */
+
+        addForm( name, data, callback, options = {} ) {
+
+            if( data.constructor != Object )
+            {
+                console.error( "Form data must be an Object" );
+                return;
+            }
+
+            // Always hide name for this one
+            options.hideName = true;
+
+            let widget = this.create_widget( name, Widget.FORM, options );
+
+            widget.onGetValue = () => {
+                return container.formData;
+            };
+
+            widget.onSetValue = ( newValue, skipCallback ) => {
+                container.formData = newValue;
+                const entries = container.querySelectorAll( ".lexwidget" );
+                for( let i = 0; i < entries.length; ++i )
+                {
+                    const entry = entries[ i ];
+                    if( entry.jsInstance.type != LX.Widget.TEXT )
+                    {
+                        continue;
+                    }
+                    let entryName = entries[ i ].querySelector( ".lexwidgetname" ).innerText;
+                    let entryInput = entries[ i ].querySelector( ".lextext input" );
+                    entryInput.value = newValue[ entryName ] ?? "";
+                    Panel._dispatch_event( entryInput, "focusout", skipCallback );
+                }
+            };
+
+            // Add widget value
+
+            let element = widget.domEl;
+
+            let container = document.createElement( 'div' );
+            container.className = "lexformdata";
+
+            this.queue( container );
+
+            container.formData = {};
+
+            for( let entry in data )
+            {
+                const entryData = data[ entry ];
+                this.addText( entry, entryData.constructor == Object ? entryData.value : entryData, ( value ) => {
+                    container.formData[ entry ] = value;
+                }, entryData );
+
+                container.formData[ entry ] = entryData.constructor == Object ? entryData.value : entryData;
+            }
+
+            this.addButton( null, options.actionName ?? "Submit", ( value, event ) => {
+                if( callback )
+                {
+                    callback( container.formData, event );
+                }
+            } );
+
+            this.clearQueue();
+
+            element.appendChild( container );
+
+            if( !widget.name || options.hideName ) {
+                element.className += " noname";
+                container.style.width = "100%";
+            }
+
+            return widget;
+        }
+
         /**
          * @method addContent
          * @param {HTMLElement} element
@@ -4297,27 +4383,29 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         async addImage( url, options = {} ) {
 
             if( !url )
-            return;
+            {
+                return;
+            }
 
-            options.no_name = true;
-            let widget = this.create_widget(null, Widget.IMAGE, options);
+            options.hideName = true;
+            let widget = this.create_widget( null, Widget.IMAGE, options );
             let element = widget.domEl;
 
-            let container = document.createElement('div');
+            let container = document.createElement( 'div' );
             container.className = "leximage";
             container.style.width = "100%";
 
-            let img = document.createElement('img');
+            let img = document.createElement( 'img' );
             img.src = url;
 
-            for(let s in options.style) {
-
-                img.style[s] = options.style[s];
+            for( let s in options.style )
+            {
+                img.style[ s ] = options.style[ s ];
             }
 
             await img.decode();
-            container.appendChild(img);
-            element.appendChild(container);
+            container.appendChild( img );
+            element.appendChild( container );
 
             return widget;
         }
@@ -4416,7 +4504,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     setTimeout( () => delete this.unfocus_event, 200 );
                 } else if ( e.relatedTarget && e.relatedTarget.tagName == "INPUT" ) {
                     return;
-                }else if ( e.target.id == 'input-filter' ) {
+                }else if ( e.target.id == 'lexinput-filter' ) {
                     return;
                 }
                 this.toggleAttribute( 'hidden', true );
@@ -5391,7 +5479,6 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             vecinput.addEventListener( "mousedown", inner_mousedown );
 
             var that = this;
-            var lastY = 0;
 
             function inner_mousedown( e )
             {
@@ -5403,13 +5490,16 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 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' );
                 dragIcon.classList.remove( 'hidden' );
                 e.stopImmediatePropagation();
                 e.stopPropagation();
 
+                if( !document.pointerLockElement )
+                {
+                    vecinput.requestPointerLock();
+                }
+
                 if( options.onPress )
                 {
                     options.onPress.bind( vecinput )( e, vecinput );
@@ -5418,8 +5508,10 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             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;
@@ -5428,7 +5520,6 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     Panel._dispatch_event( vecinput, "change" );
                 }
 
-                lastY = e.pageY;
                 e.stopPropagation();
                 e.preventDefault();
             }
@@ -5438,10 +5529,14 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 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' );
                 dragIcon.classList.add( 'hidden' );
 
+                if( document.pointerLockElement )
+                {
+                    document.exitPointerLock();
+                }
+
                 if( options.onRelease )
                 {
                     options.onRelease.bind( vecinput )( e, vecinput );
@@ -5534,7 +5629,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
                 if( value[ i ].constructor == Number )
                 {
-                    value[ i ] = clamp(value[ i ], +vecinput.min, +vecinput.max);
+                    value[ i ] = clamp( value[ i ], +vecinput.min, +vecinput.max );
                     value[ i ] = round( value[ i ], options.precision );
                 }
 
@@ -5576,7 +5671,9 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 vecinput.addEventListener( "change", e => {
 
                     if( isNaN( e.target.value ) )
+                    {
                         return;
+                    }
 
                     const skipCallback = e.detail;
 
@@ -5587,7 +5684,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     if( !skipCallback )
                     {
                         let btn = element.querySelector( ".lexwidgetname .lexicon" );
-                        if( btn ) btn.style.display = val != vecinput.iValue ? "block": "none";
+                        if( btn ) btn.style.display = val != vecinput.iValue ? "block" : "none";
                     }
 
                     if( locker.locked )
@@ -5596,7 +5693,8 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                             v.value = val;
                             value[ v.idx ] = val;
                         }
-                    } else
+                    }
+                    else
                     {
                         vecinput.value = val;
                         value[ e.target.idx ] = val;
@@ -5610,7 +5708,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 vecinput.addEventListener( "mousedown", inner_mousedown );
 
                 var that = this;
-                var lastY = 0;
+
                 function inner_mousedown( e )
                 {
                     if( document.activeElement == vecinput )
@@ -5621,13 +5719,17 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     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' );
                     dragIcon.classList.remove( 'hidden' );
                     e.stopImmediatePropagation();
                     e.stopPropagation();
 
+                    if( !document.pointerLockElement )
+                    {
+                        vecinput.requestPointerLock();
+                    }
+
                     if( options.onPress )
                     {
                         options.onPress.bind( vecinput )( e, vecinput );
@@ -5636,8 +5738,10 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
                 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;
@@ -5656,7 +5760,6 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                         }
                     }
 
-                    lastY = e.pageY;
                     e.stopPropagation();
                     e.preventDefault();
                 }
@@ -5666,10 +5769,14 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     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' );
                     dragIcon.classList.add('hidden');
 
+                    if( document.pointerLockElement )
+                    {
+                        document.exitPointerLock();
+                    }
+
                     if( options.onRelease )
                     {
                         options.onRelease.bind( vecinput )( e, vecinput );
@@ -5707,7 +5814,8 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 {
                     this.classList.add( "fa-lock" );
                     this.classList.remove( "fa-lock-open" );
-                } else {
+                }
+                else {
                     this.classList.add( "fa-lock-open" );
                     this.classList.remove( "fa-lock" );
                 }

package/build/lexgui.module.js

@@ -8,7 +8,7 @@
 */
 
 var LX = {
-    version: "0.1.39",
+    version: "0.1.40",
     ready: false,
     components: [], // specific pre-build components
     signals: {} // events and triggers
@@ -1198,7 +1198,7 @@ class Area {
             // Send area resize to every widget in the area
             for( let widget of widgets )
             {
-                const jsInstance = widget.jsIinstance;
+                const jsInstance = widget.jsInstance;
 
                 if( jsInstance.onresize )
                 {
@@ -2538,6 +2538,7 @@ class Widget {
     static KNOB         = 23;
     static SIZE         = 24;
     static PAD          = 25;
+    static FORM         = 26;
 
     static NO_CONTEXT_TYPES = [
         Widget.BUTTON,
@@ -2624,6 +2625,7 @@ class Widget {
             case Widget.KNOB: return "Knob";
             case Widget.SIZE: return "Size";
             case Widget.PAD: return "Pad";
+            case Widget.FORM: return "Form";
             case Widget.CUSTOM: return this.customName;
         }
     }
@@ -3526,7 +3528,7 @@ class Panel {
 
         if( name != undefined )
         {
-            if( !(options.no_name ?? false) )
+            if( !(options.hideName ?? false) )
             {
                 let domName = document.createElement( 'div' );
                 domName.className = "lexwidgetname";
@@ -3566,7 +3568,7 @@ class Panel {
         }
 
         widget.domEl = element;
-        element.jsIinstance = widget;
+        element.jsInstance = widget;
 
         const insert_widget = el => {
             if(options.container)
@@ -3636,7 +3638,7 @@ class Panel {
         element.className += " lexfilter noname";
         
         let input = document.createElement('input');
-        input.id = 'input-filter';
+        input.className = 'lexinput-filter';
         input.setAttribute("placeholder", options.placeholder);
         input.style.width =  "calc( 100% - 17px )";
         input.value = options.filterValue || "";
@@ -4224,7 +4226,7 @@ class Panel {
 
     addCard( name, options = {} ) {
 
-        options.no_name = true;
+        options.hideName = true;
         let widget = this.create_widget(name, Widget.CARD, options);
         let element = widget.domEl;
 
@@ -4275,6 +4277,89 @@ class Panel {
         return widget;
     }
 
+    /**
+     * @method addForm
+     * @param {String} name Widget name
+     * @param {Object} data Form data
+     * @param {Function} callback Callback function on submit form
+     * @param {*} options:
+     * actionName: Text to be shown in the button
+     */
+
+    addForm( name, data, callback, options = {} ) {
+
+        if( data.constructor != Object )
+        {
+            console.error( "Form data must be an Object" );
+            return;
+        }
+
+        // Always hide name for this one
+        options.hideName = true;
+
+        let widget = this.create_widget( name, Widget.FORM, options );
+
+        widget.onGetValue = () => {
+            return container.formData;
+        };
+
+        widget.onSetValue = ( newValue, skipCallback ) => {
+            container.formData = newValue;
+            const entries = container.querySelectorAll( ".lexwidget" );
+            for( let i = 0; i < entries.length; ++i )
+            {
+                const entry = entries[ i ];
+                if( entry.jsInstance.type != LX.Widget.TEXT )
+                {
+                    continue;
+                }
+                let entryName = entries[ i ].querySelector( ".lexwidgetname" ).innerText;
+                let entryInput = entries[ i ].querySelector( ".lextext input" );
+                entryInput.value = newValue[ entryName ] ?? "";
+                Panel._dispatch_event( entryInput, "focusout", skipCallback );
+            }
+        };
+
+        // Add widget value
+
+        let element = widget.domEl;
+
+        let container = document.createElement( 'div' );
+        container.className = "lexformdata";
+
+        this.queue( container );
+
+        container.formData = {};
+
+        for( let entry in data )
+        {
+            const entryData = data[ entry ];
+            this.addText( entry, entryData.constructor == Object ? entryData.value : entryData, ( value ) => {
+                container.formData[ entry ] = value;
+            }, entryData );
+
+            container.formData[ entry ] = entryData.constructor == Object ? entryData.value : entryData;
+        }
+
+        this.addButton( null, options.actionName ?? "Submit", ( value, event ) => {
+            if( callback )
+            {
+                callback( container.formData, event );
+            }
+        } );
+
+        this.clearQueue();
+
+        element.appendChild( container );
+
+        if( !widget.name || options.hideName ) {
+            element.className += " noname";
+            container.style.width = "100%";
+        }
+
+        return widget;
+    }
+
     /**
      * @method addContent
      * @param {HTMLElement} element
@@ -4299,27 +4384,29 @@ class Panel {
     async addImage( url, options = {} ) {
 
         if( !url )
-        return;
+        {
+            return;
+        }
 
-        options.no_name = true;
-        let widget = this.create_widget(null, Widget.IMAGE, options);
+        options.hideName = true;
+        let widget = this.create_widget( null, Widget.IMAGE, options );
         let element = widget.domEl;
 
-        let container = document.createElement('div');
+        let container = document.createElement( 'div' );
         container.className = "leximage";
         container.style.width = "100%";
 
-        let img = document.createElement('img');
+        let img = document.createElement( 'img' );
         img.src = url;
 
-        for(let s in options.style) {
-
-            img.style[s] = options.style[s];
+        for( let s in options.style )
+        {
+            img.style[ s ] = options.style[ s ];
         }
 
         await img.decode();
-        container.appendChild(img);
-        element.appendChild(container);
+        container.appendChild( img );
+        element.appendChild( container );
 
         return widget;
     }
@@ -4418,7 +4505,7 @@ class Panel {
                 setTimeout( () => delete this.unfocus_event, 200 );
             } else if ( e.relatedTarget && e.relatedTarget.tagName == "INPUT" ) {
                 return;
-            }else if ( e.target.id == 'input-filter' ) {
+            }else if ( e.target.className == 'lexinput-filter' ) {
                 return;
             }
             this.toggleAttribute( 'hidden', true );
@@ -5393,7 +5480,6 @@ class Panel {
         vecinput.addEventListener( "mousedown", inner_mousedown );
 
         var that = this;
-        var lastY = 0;
 
         function inner_mousedown( e )
         {
@@ -5405,13 +5491,16 @@ class Panel {
             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' );
             dragIcon.classList.remove( 'hidden' );
             e.stopImmediatePropagation();
             e.stopPropagation();
 
+            if( !document.pointerLockElement )
+            {
+                vecinput.requestPointerLock();
+            }
+
             if( options.onPress )
             {
                 options.onPress.bind( vecinput )( e, vecinput );
@@ -5420,8 +5509,10 @@ class Panel {
 
         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;
@@ -5430,7 +5521,6 @@ class Panel {
                 Panel._dispatch_event( vecinput, "change" );
             }
 
-            lastY = e.pageY;
             e.stopPropagation();
             e.preventDefault();
         }
@@ -5440,10 +5530,14 @@ class Panel {
             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' );
             dragIcon.classList.add( 'hidden' );
 
+            if( document.pointerLockElement )
+            {
+                document.exitPointerLock();
+            }
+
             if( options.onRelease )
             {
                 options.onRelease.bind( vecinput )( e, vecinput );
@@ -5536,7 +5630,7 @@ class Panel {
 
             if( value[ i ].constructor == Number )
             {
-                value[ i ] = clamp(value[ i ], +vecinput.min, +vecinput.max);
+                value[ i ] = clamp( value[ i ], +vecinput.min, +vecinput.max );
                 value[ i ] = round( value[ i ], options.precision );
             }
 
@@ -5578,7 +5672,9 @@ class Panel {
             vecinput.addEventListener( "change", e => {
 
                 if( isNaN( e.target.value ) )
+                {
                     return;
+                }
 
                 const skipCallback = e.detail;
 
@@ -5589,7 +5685,7 @@ class Panel {
                 if( !skipCallback )
                 {
                     let btn = element.querySelector( ".lexwidgetname .lexicon" );
-                    if( btn ) btn.style.display = val != vecinput.iValue ? "block": "none";
+                    if( btn ) btn.style.display = val != vecinput.iValue ? "block" : "none";
                 }
 
                 if( locker.locked )
@@ -5598,7 +5694,8 @@ class Panel {
                         v.value = val;
                         value[ v.idx ] = val;
                     }
-                } else
+                }
+                else
                 {
                     vecinput.value = val;
                     value[ e.target.idx ] = val;
@@ -5612,7 +5709,7 @@ class Panel {
             vecinput.addEventListener( "mousedown", inner_mousedown );
 
             var that = this;
-            var lastY = 0;
+
             function inner_mousedown( e )
             {
                 if( document.activeElement == vecinput )
@@ -5623,13 +5720,16 @@ class Panel {
                 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' );
                 dragIcon.classList.remove( 'hidden' );
                 e.stopImmediatePropagation();
                 e.stopPropagation();
 
+                if( !document.pointerLockElement )
+                {
+                    vecinput.requestPointerLock();
+                }
+
                 if( options.onPress )
                 {
                     options.onPress.bind( vecinput )( e, vecinput );
@@ -5638,8 +5738,10 @@ class Panel {
 
             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;
@@ -5658,7 +5760,6 @@ class Panel {
                     }
                 }
 
-                lastY = e.pageY;
                 e.stopPropagation();
                 e.preventDefault();
             }
@@ -5668,10 +5769,14 @@ class Panel {
                 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' );
                 dragIcon.classList.add('hidden');
 
+                if( document.pointerLockElement )
+                {
+                    document.exitPointerLock();
+                }
+
                 if( options.onRelease )
                 {
                     options.onRelease.bind( vecinput )( e, vecinput );
@@ -5709,7 +5814,9 @@ class Panel {
             {
                 this.classList.add( "fa-lock" );
                 this.classList.remove( "fa-lock-open" );
-            } else {
+            }
+            else
+            {
                 this.classList.add( "fa-lock-open" );
                 this.classList.remove( "fa-lock" );
             }

package/changelog.md

@@ -1,8 +1,17 @@
 # lexgui.js changelog
 
-## 0.1.40 (dev)
+## 0.1.41 (dev)
 
-## 0.1.39 (master)
+
+
+## 0.1.40 (master)
+
+New widget: Form. Series of Text + Submit Button using form data (Object).
+Fix non-unique "input-filter" id.
+Improved Number/Vector mouse interaction with `pointerLock`.
+Updated docs.
+
+## 0.1.39
 
 New widget: Pad. Bidimensional slider.
 `LX.makeDraggable` now supports 'absolute' and 'fixed' positions.

package/demo.js

@@ -481,12 +481,6 @@ function fillPanel( panel ) {
     panel.sameLine(2);
     panel.addFile("Img1", data => { console.log(data) }, {} );
     panel.addFile("Img2", data => { console.log(data) }, {} );
-    panel.addPad("2D Pad", [0.5, 0.5], (value, event) => {
-        console.log(value);
-    }, { padSize: "100px", min: -1, max: 2 });
-    panel.addSize("Screen Res", [1280, 720], (value, event) => {
-        console.log(value);
-    }, { units: "p" });
     panel.addDropdown("Best Engine", ["Godot", "Unity", "Unreal Engine"], "Unity", (value, event) => {
         console.log(value);
     });
@@ -543,6 +537,17 @@ function fillPanel( panel ) {
     panel.addCurve("Opacity", opacityValues, (value, event) => {
         console.log(value);
     });
+    panel.addPad("2D Pad", [0.5, 0.5], (value, event) => {
+        console.log(value);
+    }, { padSize: "100px", min: -1, max: 2 });
+    panel.addSize("Screen Res", [1280, 720], (value, event) => {
+        console.log(value);
+    }, { units: "p" });
+
+    const formData = { username: "", password: { value: "", type: "password" } };
+    panel.addForm("Test form", formData, (value, event) => {
+        console.log(value);
+    }, { actionName: "Login" });
 
     // another branch
     panel.branch("Canvas", {icon: "fa-solid fa-palette", filter: true});

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lexgui",
-    "version": "0.1.39",
+    "version": "0.1.40",
     "description": "JS library to create web graphical user interfaces",
     "type": "module",
     "main": "./build/lexgui.js",