lexgui 0.1.36 → 0.1.37

package/build/components/videoeditor.js

@@ -491,6 +491,7 @@ 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.endTime = this.video.duration;
         this.timebar.currentX = this._timeToX(0);
@@ -498,7 +499,10 @@ class VideoEditor {
         this._setStartValue(this.timebar.startX);
         this._setCurrentValue(this.timebar.currentX);
         this.timebar.update(this.timebar.currentX);
-        this._update();
+        
+        if ( !this.requestId ){ // only have one update on flight
+            this._update();
+        } 
         this.controls = options.controls ?? true;
         if(!this.controls) {
             this.hideControls();
@@ -615,12 +619,16 @@ class VideoEditor {
         this.controlsArea.hide();
     }
 
-    delete ( ) {
+    stopUpdates(){
+
         if(this.requestId) {
             cancelAnimationFrame(this.requestId);
             this.requestId = null;
         }
+    }
 
+    delete ( ) {
+        this.stopUpdates();
         delete this;
     }
 }

package/build/lexgui.css

@@ -776,6 +776,7 @@ body.noevents * {
   margin-top: 0.3em;
   margin-right: 0.7em;
   color: var(--global-selected-light);
+  font-size: 11px;
 }
 
 .lextitle.link {
@@ -1282,6 +1283,17 @@ input[type=number] {
   border: 2px solid var(--global-selected);
 }
 
+.lexwidget .numberbox span {
+  position: absolute;
+  top: -2px;
+  pointer-events: none;
+}
+
+.lexinputmeasure {
+  font-family: var(--global-font);
+  font-size: var(--global-font-size);
+}
+
 .lexinputslider {
   appearance: none;
   -moz-appearance: none;
@@ -2090,7 +2102,7 @@ meter::-webkit-meter-even-less-good-value {
 }
 
 .lexoverlaybuttons .lexbutton {
-  padding: 18px 12px;
+  padding: 16px 12px;
   font-size: var(--global-font-size-big);
   border-radius: 10px;
   justify-content: center;
@@ -2146,7 +2158,6 @@ meter::-webkit-meter-even-less-good-value {
   background: none;
   -webkit-backdrop-filter: none;
   backdrop-filter: none;
-  aspect-ratio: 1;
 }
 
 .lexoverlaybuttons.vertical .lexoverlaygroup {
@@ -2502,6 +2513,76 @@ meter::-webkit-meter-even-less-good-value {
   width: 95%;
 }
 
+/* Knob Widget */
+
+.lexknob {
+  padding: 8px;
+}
+
+.lexknob .knobcircle {
+  background: rgb(62,62,62);
+  background: linear-gradient(180deg, rgba(82,82,82,1) 0%, rgba(40,40,40,1) 100%);
+  width: 64px;
+  height: 64px;
+  margin: 0 auto;
+  border-radius: 50%;
+  position: relative;
+  box-shadow: 0px 3px 9px 2px #121212a9;
+}
+
+.lexknob.sm .knobcircle {
+  width: 48px;
+  height: 48px;
+}
+
+.lexknob.bg .knobcircle {
+  width: 81px;
+  height: 81px;
+}
+
+.lexknob .innerknobcircle {
+  background-color:rgba(62,62,62,1);
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  margin: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  translate: -50% -50%;
+}
+
+.lexknob.sm .innerknobcircle {
+  width: 39px;
+  height: 39px;
+}
+
+.lexknob.bg .innerknobcircle {
+  width: 73px;
+  height: 73px;
+}
+
+.lexknob .knobmarker {
+  background-color: var(--global-selected);
+  filter: brightness(1.5);
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  margin: 0 auto;
+  margin-top: 6px;
+}
+
+.lexknob.sm .knobmarker {
+  width: 5px;
+  height: 5px;
+}
+
+.lexknob.bg .knobmarker {
+  width: 7px;
+  height: 7px;
+  margin-top: 8px;
+}
+
 /** Timeline */
 
 .lextimeline {

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.36",
+        version: "0.1.37",
         ready: false,
         components: [], // specific pre-build components
         signals: {} // events and triggers
@@ -29,7 +29,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
     LX.CURVE_MOVEOUT_DELETE = 1;
 
     function clamp( num, min, max ) { return Math.min( Math.max( num, min ), max ); }
-    function round( num, n ) { return +num.toFixed( n ); }
+    function round( number, precision ) { return +(( number ).toFixed( precision ?? 2 ).replace( /([0-9]+(\.[0-9]+[1-9])?)(\.?0+$)/, '$1' )); }
     
     function getSupportedDOMName( string )
     {
@@ -113,6 +113,8 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         return (S4()+"-"+S4()+"-"+S4());
     }
 
+    LX.guidGenerator = simple_guidGenerator;
+
     // Timer that works everywhere (from litegraph.js)
     if (typeof performance != "undefined") {
         LX.getTime = performance.now.bind(performance);
@@ -304,11 +306,18 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             else
             {
                 for( let c of LX.components )
-                    if( LX[c].prototype.onKeyPressed ) 
+                {
+                    if( !LX[c] || !LX[c].prototype.onKeyPressed )
+                    {
+                        continue;
+                    }
+
+                    const instances = LX.CodeEditor.getInstances();
+                    for( let i of instances )
                     {
-                        const instances = LX.CodeEditor.getInstances();
-                        for( let i of instances ) i.onKeyPressed( e );
+                        i.onKeyPressed( e );
                     }
+                }
             }
         });
 
@@ -634,6 +643,8 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         }
     };
 
+    LX.IEvent = IEvent;
+
     class TreeEvent {
 
         static NONE                 = 0;
@@ -2451,6 +2462,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         static CONTENT      = 20;
         static CUSTOM       = 21;
         static SEPARATOR    = 22;
+        static KNOB         = 23;
 
         static NO_CONTEXT_TYPES = [
             Widget.BUTTON,
@@ -2459,7 +2471,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             Widget.PROGRESS
         ];
 
-        constructor(name, type, options) {
+        constructor( name, type, options ) {
             this.name = name;
             this.type = type;
             this.options = options;
@@ -2467,10 +2479,12 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
         value() {
 
-            if(this.onGetValue)
+            if( this.onGetValue )
+            {
                 return this.onGetValue();
+            }
 
-            console.warn("Can't get value of " + this.typeName());
+            console.warn( "Can't get value of " + this.typeName() );
         }
 
         set( value, skipCallback = false ) {
@@ -2530,6 +2544,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 case Widget.LIST: return "List";
                 case Widget.TAGS: return "Tags";
                 case Widget.CURVE: return "Curve";
+                case Widget.KNOB: return "Knob";
                 case Widget.CUSTOM: return this.customName;
             }
         }
@@ -4843,7 +4858,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             flag.className = "checkbox " + (flag.value ? "on" : "");
             flag.id = "checkbox"+simple_guidGenerator();
             flag.innerHTML = "<a class='fa-solid fa-check' style='display: " + (flag.value ? "block" : "none") + "'></a>";
-            
+
             if( options.disabled ) {
                 flag.disabled = true;
                 toggle.className += " disabled";
@@ -5011,6 +5026,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
          * precision: The number of digits to appear after the decimal point
          * min, max: Min and Max values for the input
          * skipSlider: If there are min and max values, skip the slider
+         * units: Unit as string added to the end of the value
          */
 
         addNumber( name, value, callback, options = {} ) {
@@ -5021,7 +5037,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 return +vecinput.value;
             };
             widget.onSetValue = ( newValue, skipCallback ) => {
-                vecinput.value = newValue;
+                vecinput.value = round( newValue, options.precision );
                 Panel._dispatch_event( vecinput, "change", skipCallback );
             };
 
@@ -5046,27 +5062,48 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             box.className = "numberbox";
 
             let vecinput = document.createElement( 'input' );
+            vecinput.id = "number_" + simple_guidGenerator();
             vecinput.className = "vecinput";
             vecinput.min = options.min ?? -1e24;
             vecinput.max = options.max ?? 1e24;
             vecinput.step = options.step ?? "any";
             vecinput.type = "number";
-            vecinput.id = "number_" + simple_guidGenerator();
 
             if( value.constructor == Number )
             {
                 value = clamp( value, +vecinput.min, +vecinput.max );
-                value = options.precision ? round( value, options.precision ) : value;
+                value = round( value, options.precision );
             }
 
             vecinput.value = vecinput.iValue = value;
             box.appendChild( vecinput );
 
-            let drag_icon = document.createElement( 'a' );
-            drag_icon.className = "fa-solid fa-arrows-up-down drag-icon hidden";
-            box.appendChild( drag_icon );
+            let measureRealWidth = function( value, paddingPlusMargin = 8 ) {
+                var i = document.createElement( "span" );
+                i.className = "lexinputmeasure";
+                i.innerHTML = value;
+                document.body.appendChild( i );
+                var rect = i.getBoundingClientRect();
+                LX.UTILS.deleteElement( i );
+                return rect.width + paddingPlusMargin;
+            }
 
-            if( options.disabled ) {
+            if( options.units )
+            {
+                let unitSpan = document.createElement( 'span' );
+                unitSpan.className = "lexunit";
+                unitSpan.innerText = options.units;
+                unitSpan.style.left = measureRealWidth( vecinput.value ) + "px";
+                vecinput.unitSpan = unitSpan;
+                box.appendChild( unitSpan );
+            }
+
+            let dragIcon = document.createElement( 'a' );
+            dragIcon.className = "fa-solid fa-arrows-up-down drag-icon hidden";
+            box.appendChild( dragIcon );
+
+            if( options.disabled )
+            {
                 vecinput.disabled = true;
             }
 
@@ -5081,7 +5118,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 slider.value = value;
                 slider.addEventListener( "input", function( e ) {
                     let new_value = +this.valueAsNumber;
-                    vecinput.value = ( +new_value ).toFixed( 4 ).replace( /([0-9]+(\.[0-9]+[1-9])?)(\.?0+$)/, '$1' );
+                    vecinput.value = round( new_value, options.precision );
                     Panel._dispatch_event( vecinput, "change" );
                 }, false );
                 box.appendChild( slider );
@@ -5097,7 +5134,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 if( e.shiftKey ) mult *= 10;
                 else if( e.altKey ) mult *= 0.1;
                 let new_value = ( +this.valueAsNumber - mult * ( e.deltaY > 0 ? 1 : -1 ) );
-                this.value = ( +new_value ).toFixed( 4 ).replace( /([0-9]+(\.[0-9]+[1-9])?)(\.?0+$)/, '$1' );
+                this.value = round( new_value, options.precision );
                 Panel._dispatch_event(vecinput, "change");
             }, { passive: false });
 
@@ -5110,12 +5147,20 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
                 let val = e.target.value = clamp( +e.target.valueAsNumber, +vecinput.min, +vecinput.max );
                 val = options.precision ? round( val, options.precision ) : val;
-                // update slider!
+
+                // Update slider!
                 if( box.querySelector( ".lexinputslider" ) )
+                {
                     box.querySelector( ".lexinputslider" ).value = val;
+                }
 
                 vecinput.value = val;
 
+                if( options.units )
+                {
+                    vecinput.unitSpan.style.left = measureRealWidth( vecinput.value ) + "px";
+                }
+
                 // Reset button (default value)
                 if( !skipCallback )
                 {
@@ -5140,7 +5185,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 lastY = e.pageY;
                 document.body.classList.add('nocursor');
                 document.body.classList.add('noevents');
-                drag_icon.classList.remove('hidden');
+                dragIcon.classList.remove('hidden');
                 e.stopImmediatePropagation();
                 e.stopPropagation();
             }
@@ -5152,8 +5197,8 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     if(e.shiftKey) mult *= 10;
                     else if(e.altKey) mult *= 0.1;
                     let new_value = (+vecinput.valueAsNumber + mult * dt);
-                    vecinput.value = (+new_value).toFixed(4).replace(/([0-9]+(\.[0-9]+[1-9])?)(\.?0+$)/,'$1');
-                    Panel._dispatch_event(vecinput, "change");
+                    vecinput.value = (+new_value).toFixed( 4 ).replace(/([0-9]+(\.[0-9]+[1-9])?)(\.?0+$)/,'$1');
+                    Panel._dispatch_event( vecinput, "change" );
                 }
 
                 lastY = e.pageY;
@@ -5167,7 +5212,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 doc.removeEventListener("mouseup",inner_mouseup);
                 document.body.classList.remove('nocursor');
                 document.body.classList.remove('noevents');
-                drag_icon.classList.add('hidden');
+                dragIcon.classList.add('hidden');
             }
             
             container.appendChild(box);
@@ -5204,9 +5249,15 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             };
             widget.onSetValue = ( newValue, skipCallback ) => {
                 const inputs = element.querySelectorAll( ".vecinput" );
+                if( inputs.length == newValue.length )
+                {
+                    console.error( "Input length does not match vector length." );
+                    return;
+                }
+
                 for( var i = 0; i < inputs.length; ++i ) {
                     let value = newValue[ i ];
-                    inputs[ i ].value = value ?? 0;
+                    inputs[ i ].value = round( value, options.precision ) ?? 0;
                     Panel._dispatch_event( inputs[ i ], "change", skipCallback );
                 }
             };
@@ -5246,14 +5297,14 @@ 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 ] = options.precision ? round(value[ i ], options.precision) : value[ i ];
+                    value[ i ] = round( value[ i ], options.precision );
                 }
 
                 vecinput.value = vecinput.iValue = value[ i ];
 
-                let drag_icon = document.createElement( 'a' );
-                drag_icon.className = "fa-solid fa-arrows-up-down drag-icon hidden";
-                box.appendChild( drag_icon );
+                let dragIcon = document.createElement( 'a' );
+                dragIcon.className = "fa-solid fa-arrows-up-down drag-icon hidden";
+                box.appendChild( dragIcon );
 
                 if( options.disabled ) {
                     vecinput.disabled = true;
@@ -5269,14 +5320,17 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     if( e.shiftKey ) mult = 10;
                     else if( e.altKey ) mult = 0.1;
 
-                    if( lock_icon.locked )
+                    if( locker.locked )
                     {
-                        for( let v of element.querySelectorAll(".vecinput") ) {
-                            v.value = ( +v.valueAsNumber - mult * ( e.deltaY > 0 ? 1 : -1 ) ).toPrecision( 5 );
+                        for( let v of element.querySelectorAll(".vecinput") )
+                        {
+                            v.value = round( +v.valueAsNumber - mult * ( e.deltaY > 0 ? 1 : -1 ), options.precision );
                             Panel._dispatch_event(v, "change");
                         }
-                    } else {
-                        this.value = ( +this.valueAsNumber - mult * ( e.deltaY > 0 ? 1 : -1 ) ).toPrecision( 5 );
+                    }
+                    else
+                    {
+                        this.value = round( +this.valueAsNumber - mult * ( e.deltaY > 0 ? 1 : -1 ), options.precision );
                         Panel._dispatch_event( vecinput, "change" );
                     }
                 }, { passive: false } );
@@ -5289,7 +5343,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     const skipCallback = e.detail;
 
                     let val = e.target.value = clamp( e.target.value, +vecinput.min, +vecinput.max );
-                    val = options.precision ? round( val, options.precision ) : val;
+                    val = round( val, options.precision );
 
                     // Reset button (default value)
                     if( !skipCallback )
@@ -5298,7 +5352,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                         if( btn ) btn.style.display = val != vecinput.iValue ? "block": "none";
                     }
 
-                    if( lock_icon.locked )
+                    if( locker.locked )
                     {
                         for( let v of element.querySelectorAll( ".vecinput" ) ) {
                             v.value = val;
@@ -5326,7 +5380,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     lastY = e.pageY;
                     document.body.classList.add('nocursor');
                     document.body.classList.add('noevents');
-                    drag_icon.classList.remove('hidden');
+                    dragIcon.classList.remove('hidden');
                     e.stopImmediatePropagation();
                     e.stopPropagation();
                 }
@@ -5338,14 +5392,14 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                         if(e.shiftKey) mult = 10;
                         else if(e.altKey) mult = 0.1;
 
-                        if( lock_icon.locked )
+                        if( locker.locked )
                         {
                             for( let v of element.querySelectorAll(".vecinput") ) {
-                                v.value = (+v.valueAsNumber + mult * dt).toPrecision(5);
+                                v.value = round( +v.valueAsNumber + mult * dt, options.precision );
                                 Panel._dispatch_event(v, "change");
                             }
                         } else {
-                            vecinput.value = (+vecinput.valueAsNumber + mult * dt).toPrecision(5);
+                            vecinput.value = round( +vecinput.valueAsNumber + mult * dt, options.precision );
                             Panel._dispatch_event(vecinput, "change");
                         }
                     }
@@ -5355,23 +5409,23 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     e.preventDefault();
                 }
 
-                function inner_mouseup(e) {
+                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');
-                    drag_icon.classList.add('hidden');
+                    dragIcon.classList.add('hidden');
                 }
-                
-                box.appendChild(vecinput);
-                container.appendChild(box);
+
+                box.appendChild( vecinput );
+                container.appendChild( box );
             }
 
-            let lock_icon = document.createElement('a');
-            lock_icon.className = "fa-solid fa-lock-open lexicon";
-            container.appendChild(lock_icon);
-            lock_icon.addEventListener("click", function(e) {
+            let locker = document.createElement('a');
+            locker.className = "fa-solid fa-lock-open lexicon";
+            container.appendChild(locker);
+            locker.addEventListener("click", function(e) {
                 this.locked = !this.locked;
                 if(this.locked){
                     this.classList.add("fa-lock");
@@ -5382,7 +5436,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 }
             }, false);
             
-            element.appendChild(container);
+            element.appendChild( container );
 
             return widget;
         }
@@ -6302,7 +6356,8 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             this.items = [];
             this.colors = {};
 
-            if(title) {
+            if( title )
+            {
                 const item = {};
                 item[ title ] = [];
                 item[ 'className' ] = "cmtitle";
@@ -6317,7 +6372,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             
             if(!useAbsolute)
             {   
-                let width = rect.width + 36; // this has paddings
+                let width = rect.width;
                 if(window.innerWidth - rect.right < 0)
                     div.style.left = (window.innerWidth - width - margin) + "px";
 
@@ -6358,7 +6413,6 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             contextmenu.style.marginTop =  3.5 - c.offsetHeight + "px";
 
             // Set final width
-            // contextmenu.style.width = contextmenu.offsetWidth + "px";
             this._adjust_position( contextmenu, 6, true );
         }
 
@@ -6432,7 +6486,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         }
 
         onCreate() {
-            this._adjust_position( this.root, 6 );
+            doAsync( () => this._adjust_position( this.root, 6 ) );
         }
 
         add( path, options = {} ) {
@@ -6537,10 +6591,12 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
     function addContextMenu( title, event, callback, options )
     {
         var menu = new ContextMenu( event, title, options );
-        LX.root.appendChild(menu.root);
+        LX.root.appendChild( menu.root );
 
-        if(callback)
+        if( callback )
+        {
             callback( menu );
+        }
 
         menu.onCreate();