lexgui 0.1.39 → 0.1.41

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/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

@@ -3624,7 +3624,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 +3646,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 +4222,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 +4248,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 );
 

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 ) );

package/build/components/timeline.js

@@ -62,7 +62,7 @@ class Timeline {
         this.onBeforeCreateTopBar = options.onBeforeCreateTopBar;
         this.onAfterCreateTopBar = options.onAfterCreateTopBar;
         this.onChangePlayMode = options.onChangePlayMode;
-        this.onConfiguration = options.onConfiguration;
+        this.onShowConfiguration = options.onShowConfiguration;
         this.onBeforeDrawContent = options.onBeforeDrawContent;
         
         this.playing = false;
@@ -107,7 +107,8 @@ class Timeline {
         let height = options.height ? options.height - this.header_offset : null;
 
         let area = new LX.Area( {id: "bottom-timeline-area", width: width || "calc(100% - 7px)", height: height || "100%"});
-        area.split({ type: "horizontal", sizes: ["15%", "85%"]});
+        area.split({ type: "horizontal", sizes: ["15%", "85%"] });
+        area.split_bar.style.zIndex = 1; // for some reason this is needed here
         this.content_area = area;
         let [left, right] = area.sections;
         
@@ -197,23 +198,24 @@ class Timeline {
         if(this.onShowOptimizeMenu)
             header.addButton("", '<i class="fa-solid fa-filter"></i>', (value, event) => {this.onShowOptimizeMenu(event)}, {width: "40px"});
 
-        header.addButton("", '<i class="fa-solid fa-gear"></i>', (value, event) => {
-            if(this.configurationDialog){
-                this.configurationDialog.close();
-                this.configurationDialog = null;
-                return;
-            }
-            this.configurationDialog = new LX.Dialog("Configuration", d => {
-                if ( this.onConfiguration ){
-                    this.onConfiguration(d);
-                }               
-            }, {
-                onclose: (root) => {
-                    root.remove();
+        if(this.onShowConfiguration){
+            header.addButton("", '<i class="fa-solid fa-gear"></i>', (value, event) => {
+                if(this.configurationDialog){
+                    this.configurationDialog.close();
                     this.configurationDialog = null;
+                    return;
                 }
-            })
-        }, {width: "40px"})
+                this.configurationDialog = new LX.Dialog("Configuration", dialog => {
+                    this.onShowConfiguration(dialog);
+                }, {
+                    onclose: (root) => {
+                        this.configurationDialog.panel.clear(); // clear signals
+                        this.configurationDialog = null;
+                        root.remove();
+                    }
+                })
+            }, {width: "40px"})
+        }
 
         header.endLine();
         LX.DEFAULT_NAME_WIDTH = "30%";
@@ -509,19 +511,14 @@ class Timeline {
         let max_tracks = Math.ceil( (h - timeline_height + this.currentScrollInPixels) / line_height );
 
         ctx.save();
-        ctx.fillStyle = Timeline.BACKGROUND_COLOR;
-        for(let i = 0; i <= max_tracks; ++i)
+        ctx.fillStyle = "#f0f0f003"//Timeline.TRACK_COLOR_SECONDARY;
+        ctx.globalAlpha = 1;
+        for(let i = 0; i <= max_tracks; i+=2)
         {
-            ctx.fillStyle = i % 2 == 0 ?  Timeline.TRACK_COLOR_PRIMARY:  Timeline.BACKGROUND_COLOR;
             ctx.fillRect(0, timeline_height + i * line_height  - this.currentScrollInPixels, w, line_height );
         }
-    
-        //black bg
-        ctx.globalAlpha = 0.7;
-        ctx.fillStyle = Timeline.BACKGROUND_COLOR;
-        ctx.fillRect( margin, 0, canvas.width - margin, canvas.height);
         ctx.globalAlpha = this.opacity;
-        
+
         //bg lines
         ctx.strokeStyle = "#444";
         ctx.beginPath();
@@ -529,6 +526,7 @@ class Timeline {
         let pos = this.timeToX( 0 );
         if(pos < margin)
             pos = margin;
+        ctx.lineWidth = 1;
         ctx.moveTo( pos + 0.5, timeline_height);
         ctx.lineTo( pos + 0.5, canvas.height);
         ctx.moveTo( Math.round( this.timeToX( duration ) ) + 0.5, timeline_height);
@@ -704,7 +702,7 @@ class Timeline {
      * @param {Number} t 
      */
 
-    setDuration( t, updateHeader = true ) {
+    setDuration( t, updateHeader = true, skipCallback = false ) {
         let v = this.validateDuration(t);
         let decimals = t.toString().split('.')[1] ? t.toString().split('.')[1].length : 0;
         updateHeader = (updateHeader || +v.toFixed(decimals) != t);
@@ -714,7 +712,7 @@ class Timeline {
             LX.emit( "@on_set_duration_" + this.name, +this.duration.toFixed(3)); // skipcallback = true
         }
 
-        if( this.onSetDuration ) 
+        if( this.onSetDuration && !skipCallback ) 
             this.onSetDuration( this.duration );	 
     }
 
@@ -733,19 +731,19 @@ class Timeline {
      * @param {Number} speed 
      */
 
-    setSpeed(speed) {
+    setSpeed(speed, skipCallback = false) {
         this.speed = speed;
         LX.emit( "@on_set_speed_" + this.name, +this.speed.toFixed(3)); // skipcallback = true
         
-        if( this.onSetSpeed ) 
+        if( this.onSetSpeed && !skipCallback) 
             this.onSetSpeed( this.speed );	 
     }
 
-    setTime(time){
+    setTime(time, skipCallback = false ){
         this.currentTime = Math.max(0,Math.min(time,this.duration));
         LX.emit( "@on_set_time_" + this.name, +this.currentTime.toFixed(2)); // skipcallback = true
 
-        if(this.onSetTime)
+        if(this.onSetTime && !skipCallback)
             this.onSetTime(this.currentTime);
     }
 
@@ -832,6 +830,9 @@ class Timeline {
                 this.leftPanel.root.children[1].scrollTop += e.deltaY; // wheel deltaY
             }
             
+            if ( this.onMouse ){
+                this.onMouse(e, time);
+            }
             return;
         }
 
@@ -969,8 +970,8 @@ class Timeline {
             return true;
         }
 
-        if( this.onMouse && this.onMouse( e, time, this ) )
-            return;
+        if( this.onMouse )
+            this.onMouse( e, time, this );
 
         return true;
     }
@@ -2572,14 +2573,14 @@ class KeyFramesTimeline extends Timeline {
         
         const currentSelection = this.selectKeyFrame(t, keyFrameIndex, !multiple); // changes time 
 
+        if( !multiple ) {
+            this.setTime(this.animationClip.tracks[t.clipIdx].times[ keyFrameIndex ]);
+        }  
         if( this.onSelectKeyFrame && this.onSelectKeyFrame(e, currentSelection)) {
             // Event handled
             return;
         }        
-
-        if( !multiple ) {
-            this.setTime(this.animationClip.tracks[t.clipIdx].times[ keyFrameIndex ]);
-        }    
+          
     }
 
     /**
@@ -2605,7 +2606,6 @@ class KeyFramesTimeline extends Timeline {
     /**
      * @method clearTrack
      */
-
     clearTrack(idx, defaultValue) {
 
         let track =  this.animationClip.tracks[idx];
@@ -2615,11 +2615,14 @@ class KeyFramesTimeline extends Timeline {
             return;
         }
 
+        this.unHoverAll();
+        this.unSelectAllKeyFrames();
+
+        this.saveState(track.clipIdx);
         const count = track.times.length;
         for(let i = count - 1; i >= 0; i--)
         {
-            this.saveState(track.clipIdx);
-            this.#delete(track.clipIdx, i );
+            this.#delete(track.clipIdx, i);
         } 
         if(defaultValue != undefined) {
             if(typeof(defaultValue) == 'number')  {
@@ -2855,7 +2858,10 @@ class ClipsTimeline extends Timeline {
     onMouseMove( e, time ) {
         // function not called if shift is pressed (boxselection)
 
-        if(this.grabbing && e.buttons != 2) {
+        if ( this.grabbingTimeBar || this.grabbingScroll ){
+            return;
+        }
+        else if(this.grabbing && e.buttons != 2) {
             this.unHoverAll();
 
             let delta = time - this.grabTime;
@@ -2879,7 +2885,8 @@ class ClipsTimeline extends Timeline {
                         duration = Math.min( track.clips[this.lastClipsSelected[0][1] + 1].start - clip.start - 0.0001, duration );
                     }
                     clip.duration = duration;
-                    clip.fadeout = Math.max(Math.min((clip.fadeout || clip.start+clip.duration) + delta, clip.start+clip.duration), clip.start);
+                    clip.fadeout = Math.max(Math.min((clip.fadeout ?? (clip.start+clip.duration)) + delta, clip.start+clip.duration), clip.start);
+                    clip.fadein = Math.max(Math.min((clip.fadein ?? (clip.start+clip.duration)), (clip.fadeout ?? (clip.start+clip.duration))), clip.start);
                     if(this.duration < clip.start + clip.duration){
                         this.setDuration(clip.start + clip.duration);
                     }
@@ -3258,16 +3265,13 @@ class ClipsTimeline extends Timeline {
     /**
      * @method optimizeTrack
      */
-
     optimizeTrack(trackIdx) {	
     }
 
     /**
      * @method optimizeTracks
      */
-
     optimizeTracks() {
-        this.addClip()
     }
 
    /**
@@ -5154,14 +5158,14 @@ class CurvesTimeline extends Timeline {
         
         const currentSelection = this.selectKeyFrame(t, keyFrameIndex, !multiple, multiple); // changes time on the first keyframe selected
 
+        if (!multiple){
+            this.setTime(this.animationClip.tracks[t.clipIdx].times[ keyFrameIndex ]);
+        }
+
         if( this.onSelectKeyFrame && this.onSelectKeyFrame(e, currentSelection)) {
             // Event handled
             return;
         }
-
-        if (!multiple){
-            this.setTime(this.animationClip.tracks[t.clipIdx].times[ keyFrameIndex ]);
-        }
     }
 
     /**
@@ -5195,12 +5199,15 @@ class CurvesTimeline extends Timeline {
         {
             return;
         }
-
+        
+        this.unHoverAll();
+        this.unSelectAllKeyFrames();
+        
+        this.saveState(track.clipIdx);
         const count = track.times.length;
         for(let i = count - 1; i >= 0; i--)
         {
-            this.saveState(track.clipIdx);
-            this.#delete(track, i );
+            this.#delete(track.clipIdx, i );
         } 
         if(defaultValue != undefined) {
             if(typeof(defaultValue) == 'number')  {
@@ -5292,4 +5299,4 @@ LX.UTILS.concatTypedArray = (arrays, ArrayType) => {
     return result;
 }
 
-export { Timeline, KeyFramesTimeline, ClipsTimeline, CurvesTimeline };
+export { Timeline, KeyFramesTimeline, ClipsTimeline, CurvesTimeline };

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.css

@@ -2562,6 +2562,45 @@ meter::-webkit-meter-even-less-good-value {
   border-radius: 50%;
   position: relative;
   box-shadow: 0px 3px 9px 2px #121212a9;
+  --knob-snap-mark: 45deg;
+}
+
+/* Arc Indicator */
+.lexknob .knobcircle::before {
+  content: "";
+  position: absolute;
+  width: 125%;
+  height: 125%;
+  top: -15.5%;
+  left: -15.5%;
+  border-radius: 50%;
+  border: 2px solid rgba(255, 255, 255, 0.2);
+  border-bottom-color: transparent;
+}
+
+/* Tick Marks */
+.lexknob.show-ticks .knobcircle::after {
+  content: "";
+  position: absolute;
+  width: 130%;
+  height: 130%;
+  top: -15.5%;
+  left: -15.5%;
+  border-radius: 50%;
+  pointer-events: none;
+  mask-image: radial-gradient(circle, transparent 60%, black 60%), conic-gradient(
+    transparent -135deg,
+    black -135deg 275deg,
+    transparent 275deg
+  );
+  -webkit-mask-composite: intersect;
+  mask-composite: intersect;
+  background: repeating-conic-gradient(
+    transparent 0deg,
+    rgba(255, 255, 255, 0.4) 1deg 3deg,
+    transparent 4deg calc( var(--knob-snap-mark) - 1deg )
+  );
+  transform: rotate(-135deg);
 }
 
 .lexknob.sm .knobcircle {
@@ -2606,6 +2645,10 @@ meter::-webkit-meter-even-less-good-value {
   margin-top: 6px;
 }
 
+.lexknob.disabled .knobmarker {
+  background-color: var(--global-text-terciary);
+}
+
 .lexknob.sm .knobmarker {
   width: 5px;
   height: 5px;