lexgui 8.0.0 → 8.1.1

package/build/extensions/ImUi.js

@@ -3,7 +3,7 @@ import { LX } from '../core/Namespace.js';
 
 // ImUI.ts @jxarco
 if (!LX) {
-    throw ("Missing LX namespace!");
+    throw ('Missing LX namespace!');
 }
 LX.extensions.push('ImUI');
 const vec2 = LX.vec2;
@@ -68,25 +68,26 @@ class ImUI {
      * @param {Number} y
      */
     Button(text, x, y, callback) {
-        const ctx = this.canvas.getContext("2d");
+        const ctx = this.canvas.getContext('2d');
         // Element properties
         let fontSize = 16;
-        ctx.font = fontSize + "px Arial";
+        ctx.font = fontSize + 'px Arial';
         let padding = new LX.vec2(12, 8);
         let position = new LX.vec2(x, y);
         const metrics = ctx.measureText(text);
         let size = new LX.vec2(metrics.width, metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent);
         // Get mouse state
-        const hovered = this.mousePosition.x >= position.x && this.mousePosition.x <= (position.x + size.x + padding.x * 2.0)
+        const hovered = this.mousePosition.x >= position.x
+            && this.mousePosition.x <= (position.x + size.x + padding.x * 2.0)
             && this.mousePosition.y >= position.y && this.mousePosition.y <= (position.y + size.y + padding.y * 2.0);
         const active = hovered && this.mouseDown;
         // Draw button
         ctx.beginPath();
-        ctx.fillStyle = active ? "#666" : (hovered ? "#444" : "#222");
+        ctx.fillStyle = active ? '#666' : (hovered ? '#444' : '#222');
         ctx.roundRect(position.x, position.y, size.x + padding.x * 2.0, size.y + padding.y * 2.0, [8, 8, 8, 8]);
         ctx.fill();
         // Draw text
-        ctx.fillStyle = hovered ? "#fff" : "#ddd";
+        ctx.fillStyle = hovered ? '#fff' : '#ddd';
         ctx.fillText(text, position.x + padding.x, position.y + metrics.actualBoundingBoxAscent + padding.y);
         this.usePointerCursor = this.usePointerCursor || hovered;
         if (this.eventClick) {
@@ -104,7 +105,7 @@ class ImUI {
      * @param {Number} value
      */
     Slider(text, x, y, value = 0, callback) {
-        const ctx = this.canvas.getContext("2d");
+        const ctx = this.canvas.getContext('2d');
         // Store slider value
         if (!this.components[text]) {
             this.components[text] = { value: value };
@@ -114,7 +115,7 @@ class ImUI {
         }
         // Element properties
         let fontSize = 16;
-        ctx.font = fontSize + "px Arial";
+        ctx.font = fontSize + 'px Arial';
         let padding = new LX.vec2(12, 8);
         let position = new LX.vec2(x, y);
         const metrics = ctx.measureText(text);
@@ -126,7 +127,7 @@ class ImUI {
         const active = hovered && this.mouseDown;
         // Draw box
         ctx.beginPath();
-        ctx.fillStyle = hovered ? "#444" : "#222";
+        ctx.fillStyle = hovered ? '#444' : '#222';
         ctx.roundRect(position.x, position.y, fullSize.x, fullSize.y, [8, 8, 8, 8]);
         ctx.fill();
         // Draw value
@@ -138,9 +139,8 @@ class ImUI {
         }
         let valueSize = new LX.vec2(fullSize.x * value, size.y);
         ctx.beginPath();
-        ctx.fillStyle = hovered ? "#6074e7" : "#3e57e4";
-        if (valueSize.x > (fullSize.x - 8)) // 8: radius
-         {
+        ctx.fillStyle = hovered ? '#6074e7' : '#3e57e4';
+        if (valueSize.x > (fullSize.x - 8)) { // 8: radius
             ctx.roundRect(position.x, position.y, valueSize.x, valueSize.y + padding.y * 2.0, [8, 8, 8, 8]);
             ctx.fill();
         }
@@ -148,7 +148,7 @@ class ImUI {
             ctx.fillRect(position.x, position.y, valueSize.x, valueSize.y + padding.y * 2.0);
         }
         // Draw text
-        ctx.fillStyle = hovered ? "#fff" : "#ddd";
+        ctx.fillStyle = hovered ? '#fff' : '#ddd';
         ctx.fillText(text, position.x + padding.x, position.y + metrics.actualBoundingBoxAscent + padding.y);
         this.usePointerCursor = this.usePointerCursor || hovered;
         if (active) {
@@ -164,7 +164,7 @@ class ImUI {
      * @param {Number} value
      */
     Checkbox(text, x, y, value = false, callback) {
-        const ctx = this.canvas.getContext("2d");
+        const ctx = this.canvas.getContext('2d');
         // Store slider value
         if (!this.components[text]) {
             this.components[text] = { value: value };
@@ -174,7 +174,7 @@ class ImUI {
         }
         // Element properties
         let fontSize = 16;
-        ctx.font = fontSize + "px Arial";
+        ctx.font = fontSize + 'px Arial';
         let padding = new LX.vec2(12, 8);
         let position = new LX.vec2(x, y);
         const metrics = ctx.measureText(text);
@@ -190,7 +190,7 @@ class ImUI {
         const active = hovered && this.mouseDown;
         const pressed = hovered && this.eventClick;
         // Draw button
-        ctx.fillStyle = active ? "#666" : (hovered ? "#444" : "#222");
+        ctx.fillStyle = active ? '#666' : (hovered ? '#444' : '#222');
         ctx.fillRect(position.x, position.y, fullSize.x + padding.x * 2.0, fullSize.y + padding.y * 2.0);
         // Draw checkbox
         if (pressed) {
@@ -200,11 +200,12 @@ class ImUI {
                 callback(value);
             }
         }
-        ctx.fillStyle = value ? (active ? "#ddd" : (hovered ? "#6074e7" : "#3e57e4")) :
-            (active ? "#bbb" : (hovered ? "#777" : "#888"));
+        ctx.fillStyle = value
+            ? (active ? '#ddd' : (hovered ? '#6074e7' : '#3e57e4'))
+            : (active ? '#bbb' : (hovered ? '#777' : '#888'));
         ctx.fillRect(position.x + size.x + padding.x + boxMargin, position.y + padding.y, size.y, size.y);
         // Draw text
-        ctx.fillStyle = hovered ? "#fff" : "#ddd";
+        ctx.fillStyle = hovered ? '#fff' : '#ddd';
         ctx.fillText(text, position.x + padding.x, position.y + metrics.actualBoundingBoxAscent + padding.y);
         this.usePointerCursor = this.usePointerCursor || hovered;
     }
@@ -215,7 +216,7 @@ class ImUI {
     endFrame() {
         delete this.eventClick;
         // Pointer cursor on hover
-        document.body.style.cursor = this.usePointerCursor ? "pointer" : "default";
+        document.body.style.cursor = this.usePointerCursor ? 'pointer' : 'default';
         // Clear info
         this.usePointerCursor = false;
     }

package/build/extensions/ImUi.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImUi.js","sources":["../../src/extensions/ImUi.ts"],"sourcesContent":["// ImUI.ts @jxarco\r\n\r\nimport { LX } from '../core/Namespace';\r\n\r\nif( !LX )\r\n{\r\n    throw( \"Missing LX namespace!\" );\r\n}\r\n\r\nLX.extensions.push( 'ImUI' );\r\n\r\nconst vec2 = LX.vec2;\r\n\r\n/**\r\n * @class ImUI\r\n */\r\n\r\nexport class ImUI\r\n{\r\n    root: any;\r\n    canvas: any;\r\n\r\n    // Components\r\n    components: any = {};\r\n\r\n    // Mouse state\r\n    mouseDown: boolean = false;\r\n    mousePosition: typeof vec2 = new vec2();\r\n    usePointerCursor: boolean = false;\r\n    eventClick: MouseEvent | undefined = undefined;\r\n\r\n\r\n    constructor( canvas: HTMLCanvasElement, options: any = {} )\r\n    {\r\n        console.assert( canvas !== undefined );\r\n        \r\n        // To capture key events\r\n        canvas.tabIndex = -1;\r\n        \r\n        canvas.addEventListener( 'keydown', this._processKey.bind(this), true);\r\n        canvas.addEventListener( 'mousedown', this._processMouse.bind(this) );\r\n        canvas.addEventListener( 'mouseup', this._processMouse.bind(this) );\r\n        canvas.addEventListener( 'mousemove', this._processMouse.bind(this) );\r\n        canvas.addEventListener( 'click', this._processMouse.bind(this) );\r\n        \r\n        // this.font = new FontFace(\"Ubuntu\", \"url(../data/Ubuntu-Bold.ttf)\");\r\n        // this.font.load().then(\r\n        //     ( font ) => {\r\n        //         document.fonts.add( font );\r\n        //         if( options.onready ) options.onready();\r\n        //     },\r\n        //     (err) => {\r\n        //         console.error(err);\r\n        //     },\r\n        // );\r\n\r\n        this.root = this.canvas = canvas;\r\n    }\r\n\r\n    _processKey( e: KeyboardEvent )\r\n    {\r\n        const detail: any = e.detail;\r\n        const key = e.key ?? detail.key;\r\n        console.log( key );\r\n    }\r\n\r\n    _processMouse( e: MouseEvent )\r\n    {\r\n        if( e.type == 'mousedown' )\r\n        {\r\n            this.mouseDown = true;\r\n        }\r\n        \r\n        else if( e.type == 'mouseup' )\r\n        {\r\n            this._processClick(e);\r\n            this.mouseDown = false;\r\n        }\r\n\r\n        else if( e.type == 'mousemove' )\r\n        {\r\n            this.mousePosition.set( e.clientX, e.clientY );\r\n        }\r\n    }\r\n\r\n    _processClick( e: MouseEvent )\r\n    {\r\n        this.eventClick = e;\r\n    }\r\n\r\n    /**\r\n     * @method Button\r\n     * @param {String} text\r\n     * @param {Number} x\r\n     * @param {Number} y\r\n     */\r\n\r\n    Button( text: string, x: number, y: number, callback: any )\r\n    {\r\n        const ctx = this.canvas.getContext(\"2d\");\r\n\r\n        // Element properties\r\n\r\n        let fontSize = 16;\r\n        ctx.font = fontSize + \"px Arial\";\r\n\r\n        let padding = new LX.vec2( 12, 8 );\r\n        let position = new LX.vec2( x, y );\r\n\r\n        const metrics = ctx.measureText( text );\r\n        let size = new LX.vec2( metrics.width, metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent );\r\n\r\n        // Get mouse state\r\n\r\n        const hovered = this.mousePosition.x >= position.x && this.mousePosition.x <= (position.x + size.x + padding.x * 2.0)\r\n        && this.mousePosition.y >= position.y && this.mousePosition.y <= (position.y + size.y + padding.y * 2.0);\r\n\r\n        const active = hovered && this.mouseDown;\r\n\r\n        // Draw button\r\n\r\n        ctx.beginPath();\r\n        ctx.fillStyle = active ? \"#666\" : (hovered ? \"#444\" : \"#222\");\r\n        ctx.roundRect( position.x, position.y, size.x + padding.x * 2.0, size.y + padding.y * 2.0, [8, 8, 8, 8] );\r\n        ctx.fill();\r\n\r\n        // Draw text\r\n\r\n        ctx.fillStyle = hovered ? \"#fff\" : \"#ddd\";\r\n        ctx.fillText( text, position.x + padding.x, position.y + metrics.actualBoundingBoxAscent + padding.y );\r\n\r\n        this.usePointerCursor = this.usePointerCursor || hovered;\r\n\r\n        if( this.eventClick )\r\n        {\r\n            if(callback) callback();\r\n            return true;\r\n        }\r\n\r\n        return false;\r\n    }\r\n\r\n    /**\r\n     * @method Slider\r\n     * @param {String} text\r\n     * @param {Number} x\r\n     * @param {Number} y\r\n     * @param {Number} value\r\n     */\r\n\r\n    Slider( text: string, x: number, y: number, value: number = 0, callback: any )\r\n    {\r\n        const ctx = this.canvas.getContext(\"2d\");\r\n\r\n        // Store slider value\r\n        \r\n        if( !this.components[ text ] )\r\n        {\r\n            this.components[ text ] = { value: value };\r\n        }\r\n        else\r\n        {\r\n            value = this.components[ text ].value;\r\n        }\r\n\r\n        // Element properties\r\n\r\n        let fontSize = 16;\r\n        ctx.font = fontSize + \"px Arial\";\r\n\r\n        let padding = new LX.vec2( 12, 8 );\r\n        let position = new LX.vec2( x, y );\r\n\r\n        const metrics = ctx.measureText( text );\r\n        let size = new LX.vec2( metrics.width, metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent );\r\n        let fullSize = size.add( padding.mul( 2.0 ) );\r\n\r\n        // Get mouse state\r\n\r\n        const hovered = this.mousePosition.x >= position.x && this.mousePosition.x <= (position.x + fullSize.x)\r\n            && this.mousePosition.y >= position.y && this.mousePosition.y <= (position.y + fullSize.y);\r\n\r\n        const active = hovered && this.mouseDown;\r\n\r\n        // Draw box\r\n\r\n        ctx.beginPath();\r\n        ctx.fillStyle = hovered ? \"#444\" : \"#222\";\r\n        ctx.roundRect( position.x, position.y, fullSize.x, fullSize.y, [8, 8, 8, 8] );\r\n        ctx.fill();\r\n\r\n        // Draw value\r\n\r\n        const min = position.x;\r\n        const max = position.x + fullSize.x;\r\n\r\n        if( active )\r\n        {\r\n            value = LX.clamp((this.mousePosition.x - min) / (max - min), 0.0, 1.0);\r\n            this.components[ text ].value = value;\r\n        }\r\n        \r\n        let valueSize = new LX.vec2( fullSize.x * value, size.y );\r\n\r\n        ctx.beginPath();\r\n        ctx.fillStyle = hovered ? \"#6074e7\" : \"#3e57e4\";\r\n        if( valueSize.x > ( fullSize.x - 8 ) ) // 8: radius\r\n        {\r\n            ctx.roundRect( position.x, position.y, valueSize.x, valueSize.y + padding.y * 2.0, [8, 8, 8, 8] );\r\n            ctx.fill();    \r\n        }\r\n        else\r\n        {\r\n            ctx.fillRect( position.x, position.y, valueSize.x, valueSize.y + padding.y * 2.0 );\r\n        }\r\n\r\n        // Draw text\r\n\r\n        ctx.fillStyle = hovered ? \"#fff\" : \"#ddd\";\r\n        ctx.fillText( text, position.x + padding.x, position.y + metrics.actualBoundingBoxAscent + padding.y );\r\n\r\n        this.usePointerCursor = this.usePointerCursor || hovered;\r\n\r\n        if( active )\r\n        {\r\n            if(callback) callback( value );\r\n        }\r\n    }\r\n\r\n    /**\r\n     * @method Checkbox\r\n     * @param {String} text\r\n     * @param {Number} x\r\n     * @param {Number} y\r\n     * @param {Number} value\r\n     */\r\n\r\n    Checkbox( text: string, x: number, y: number, value: boolean = false, callback: any )\r\n    {\r\n        const ctx = this.canvas.getContext(\"2d\");\r\n\r\n        // Store slider value\r\n        \r\n        if( !this.components[ text ] )\r\n        {\r\n            this.components[ text ] = { value: value };\r\n        }\r\n        else\r\n        {\r\n            value = this.components[ text ].value;\r\n        }\r\n\r\n        // Element properties\r\n\r\n        let fontSize = 16;\r\n        ctx.font = fontSize + \"px Arial\";\r\n\r\n        let padding = new LX.vec2( 12, 8 );\r\n        let position = new LX.vec2( x, y );\r\n\r\n        const metrics = ctx.measureText( text );\r\n        let size = new LX.vec2( metrics.width, metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent );\r\n\r\n        let boxMargin = 12;\r\n        let fullSize = new LX.vec2(boxMargin * 2.0, 0);\r\n        fullSize.add( size, fullSize );\r\n\r\n        // Get mouse state\r\n\r\n        const boxStartX = position.x + size.x + padding.x + boxMargin;\r\n        const boxStartY = position.y + padding.y;\r\n        const hovered = this.mousePosition.x >= boxStartX && this.mousePosition.x <= (boxStartX + size.y)\r\n        && this.mousePosition.y >= boxStartY && this.mousePosition.y <= (boxStartY + size.y);\r\n\r\n        const active = hovered && this.mouseDown;\r\n        const pressed = hovered && this.eventClick;\r\n\r\n        // Draw button\r\n\r\n        ctx.fillStyle = active ? \"#666\" : (hovered ? \"#444\" : \"#222\");\r\n        ctx.fillRect( position.x, position.y, fullSize.x + padding.x * 2.0, fullSize.y + padding.y * 2.0 );\r\n\r\n        // Draw checkbox\r\n\r\n        if( pressed )\r\n        {\r\n            value = !value;\r\n            this.components[ text ].value = value;\r\n            if( callback )\r\n            {\r\n                callback( value );\r\n            }\r\n        }\r\n\r\n        ctx.fillStyle = value ? (active ? \"#ddd\" : (hovered ? \"#6074e7\" : \"#3e57e4\")) : \r\n                            (active ? \"#bbb\" : (hovered ? \"#777\" : \"#888\"));\r\n        ctx.fillRect( position.x + size.x + padding.x + boxMargin, position.y + padding.y, size.y, size.y );\r\n\r\n        // Draw text\r\n\r\n        ctx.fillStyle = hovered ? \"#fff\" : \"#ddd\";\r\n        ctx.fillText( text, position.x + padding.x, position.y + metrics.actualBoundingBoxAscent + padding.y );\r\n\r\n        this.usePointerCursor = this.usePointerCursor || hovered;\r\n    }\r\n\r\n    /**\r\n     * @method endFrame\r\n     * @description Clears the information stored during the last frame\r\n     */\r\n\r\n    endFrame() {\r\n\r\n        delete this.eventClick;\r\n\r\n        // Pointer cursor on hover\r\n        document.body.style.cursor = this.usePointerCursor ? \"pointer\" : \"default\";\r\n\r\n        // Clear info\r\n        this.usePointerCursor = false;\r\n    }\r\n}\r\n\r\nLX.ImUI = ImUI;"],"names":[],"mappings":";;;AAAA;AAIA,IAAI,CAAC,EAAE,EACP;IACI,OAAO,uBAAuB;AAClC;AAEA,EAAE,CAAC,UAAU,CAAC,IAAI,CAAE,MAAM,CAAE;AAE5B,MAAM,IAAI,GAAG,EAAE,CAAC,IAAI;AAEpB;;AAEG;MAEU,IAAI,CAAA;AAEb,IAAA,IAAI;AACJ,IAAA,MAAM;;IAGN,UAAU,GAAQ,EAAE;;IAGpB,SAAS,GAAY,KAAK;AAC1B,IAAA,aAAa,GAAgB,IAAI,IAAI,EAAE;IACvC,gBAAgB,GAAY,KAAK;IACjC,UAAU,GAA2B,SAAS;IAG9C,WAAA,CAAa,MAAyB,EAAE,OAAA,GAAe,EAAE,EAAA;AAErD,QAAA,OAAO,CAAC,MAAM,CAAE,MAAM,KAAK,SAAS,CAAE;;AAGtC,QAAA,MAAM,CAAC,QAAQ,GAAG,EAAE;AAEpB,QAAA,MAAM,CAAC,gBAAgB,CAAE,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC;AACtE,QAAA,MAAM,CAAC,gBAAgB,CAAE,WAAW,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAE;AACrE,QAAA,MAAM,CAAC,gBAAgB,CAAE,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAE;AACnE,QAAA,MAAM,CAAC,gBAAgB,CAAE,WAAW,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAE;AACrE,QAAA,MAAM,CAAC,gBAAgB,CAAE,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAE;;;;;;;;;;;QAajE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM,GAAG,MAAM;IACpC;AAEA,IAAA,WAAW,CAAE,CAAgB,EAAA;AAEzB,QAAA,MAAM,MAAM,GAAQ,CAAC,CAAC,MAAM;QAC5B,MAAM,GAAG,GAAG,CAAC,CAAC,GAAG,IAAI,MAAM,CAAC,GAAG;AAC/B,QAAA,OAAO,CAAC,GAAG,CAAE,GAAG,CAAE;IACtB;AAEA,IAAA,aAAa,CAAE,CAAa,EAAA;AAExB,QAAA,IAAI,CAAC,CAAC,IAAI,IAAI,WAAW,EACzB;AACI,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;QACzB;AAEK,aAAA,IAAI,CAAC,CAAC,IAAI,IAAI,SAAS,EAC5B;AACI,YAAA,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC;AACrB,YAAA,IAAI,CAAC,SAAS,GAAG,KAAK;QAC1B;AAEK,aAAA,IAAI,CAAC,CAAC,IAAI,IAAI,WAAW,EAC9B;AACI,YAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAE,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,OAAO,CAAE;QAClD;IACJ;AAEA,IAAA,aAAa,CAAE,CAAa,EAAA;AAExB,QAAA,IAAI,CAAC,UAAU,GAAG,CAAC;IACvB;AAEA;;;;;AAKG;AAEH,IAAA,MAAM,CAAE,IAAY,EAAE,CAAS,EAAE,CAAS,EAAE,QAAa,EAAA;QAErD,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC;;QAIxC,IAAI,QAAQ,GAAG,EAAE;AACjB,QAAA,GAAG,CAAC,IAAI,GAAG,QAAQ,GAAG,UAAU;QAEhC,IAAI,OAAO,GAAG,IAAI,EAAE,CAAC,IAAI,CAAE,EAAE,EAAE,CAAC,CAAE;QAClC,IAAI,QAAQ,GAAG,IAAI,EAAE,CAAC,IAAI,CAAE,CAAC,EAAE,CAAC,CAAE;QAElC,MAAM,OAAO,GAAG,GAAG,CAAC,WAAW,CAAE,IAAI,CAAE;AACvC,QAAA,IAAI,IAAI,GAAG,IAAI,EAAE,CAAC,IAAI,CAAE,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,uBAAuB,GAAG,OAAO,CAAC,wBAAwB,CAAE;;AAI3G,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,IAAI,QAAQ,CAAC,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,KAAK,QAAQ,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,GAAG,GAAG;AACjH,eAAA,IAAI,CAAC,aAAa,CAAC,CAAC,IAAI,QAAQ,CAAC,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,KAAK,QAAQ,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,GAAG,GAAG,CAAC;AAExG,QAAA,MAAM,MAAM,GAAG,OAAO,IAAI,IAAI,CAAC,SAAS;;QAIxC,GAAG,CAAC,SAAS,EAAE;QACf,GAAG,CAAC,SAAS,GAAG,MAAM,GAAG,MAAM,IAAI,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AAC7D,QAAA,GAAG,CAAC,SAAS,CAAE,QAAQ,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,GAAG,GAAG,EAAE,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAE;QACzG,GAAG,CAAC,IAAI,EAAE;;AAIV,QAAA,GAAG,CAAC,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM;QACzC,GAAG,CAAC,QAAQ,CAAE,IAAI,EAAE,QAAQ,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,GAAG,OAAO,CAAC,uBAAuB,GAAG,OAAO,CAAC,CAAC,CAAE;QAEtG,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,IAAI,OAAO;AAExD,QAAA,IAAI,IAAI,CAAC,UAAU,EACnB;AACI,YAAA,IAAG,QAAQ;AAAE,gBAAA,QAAQ,EAAE;AACvB,YAAA,OAAO,IAAI;QACf;AAEA,QAAA,OAAO,KAAK;IAChB;AAEA;;;;;;AAMG;IAEH,MAAM,CAAE,IAAY,EAAE,CAAS,EAAE,CAAS,EAAE,KAAA,GAAgB,CAAC,EAAE,QAAa,EAAA;QAExE,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC;;QAIxC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAE,IAAI,CAAE,EAC5B;YACI,IAAI,CAAC,UAAU,CAAE,IAAI,CAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE;QAC9C;aAEA;YACI,KAAK,GAAG,IAAI,CAAC,UAAU,CAAE,IAAI,CAAE,CAAC,KAAK;QACzC;;QAIA,IAAI,QAAQ,GAAG,EAAE;AACjB,QAAA,GAAG,CAAC,IAAI,GAAG,QAAQ,GAAG,UAAU;QAEhC,IAAI,OAAO,GAAG,IAAI,EAAE,CAAC,IAAI,CAAE,EAAE,EAAE,CAAC,CAAE;QAClC,IAAI,QAAQ,GAAG,IAAI,EAAE,CAAC,IAAI,CAAE,CAAC,EAAE,CAAC,CAAE;QAElC,MAAM,OAAO,GAAG,GAAG,CAAC,WAAW,CAAE,IAAI,CAAE;AACvC,QAAA,IAAI,IAAI,GAAG,IAAI,EAAE,CAAC,IAAI,CAAE,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,uBAAuB,GAAG,OAAO,CAAC,wBAAwB,CAAE;AAC3G,QAAA,IAAI,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAE,OAAO,CAAC,GAAG,CAAE,GAAG,CAAE,CAAE;;QAI7C,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,IAAI,QAAQ,CAAC,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,KAAK,QAAQ,CAAC,CAAC,GAAG,QAAQ,CAAC,CAAC;eAC/F,IAAI,CAAC,aAAa,CAAC,CAAC,IAAI,QAAQ,CAAC,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,KAAK,QAAQ,CAAC,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC;AAE9F,QAAA,MAAM,MAAM,GAAG,OAAO,IAAI,IAAI,CAAC,SAAS;;QAIxC,GAAG,CAAC,SAAS,EAAE;AACf,QAAA,GAAG,CAAC,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM;AACzC,QAAA,GAAG,CAAC,SAAS,CAAE,QAAQ,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAE;QAC7E,GAAG,CAAC,IAAI,EAAE;;AAIV,QAAA,MAAM,GAAG,GAAG,QAAQ,CAAC,CAAC;QACtB,MAAM,GAAG,GAAG,QAAQ,CAAC,CAAC,GAAG,QAAQ,CAAC,CAAC;QAEnC,IAAI,MAAM,EACV;YACI,KAAK,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC;YACtE,IAAI,CAAC,UAAU,CAAE,IAAI,CAAE,CAAC,KAAK,GAAG,KAAK;QACzC;AAEA,QAAA,IAAI,SAAS,GAAG,IAAI,EAAE,CAAC,IAAI,CAAE,QAAQ,CAAC,CAAC,GAAG,KAAK,EAAE,IAAI,CAAC,CAAC,CAAE;QAEzD,GAAG,CAAC,SAAS,EAAE;AACf,QAAA,GAAG,CAAC,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS;AAC/C,QAAA,IAAI,SAAS,CAAC,CAAC,IAAK,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAE;SACpC;AACI,YAAA,GAAG,CAAC,SAAS,CAAE,QAAQ,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAE;YACjG,GAAG,CAAC,IAAI,EAAE;QACd;aAEA;YACI,GAAG,CAAC,QAAQ,CAAE,QAAQ,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,GAAG,GAAG,CAAE;QACtF;;AAIA,QAAA,GAAG,CAAC,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM;QACzC,GAAG,CAAC,QAAQ,CAAE,IAAI,EAAE,QAAQ,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,GAAG,OAAO,CAAC,uBAAuB,GAAG,OAAO,CAAC,CAAC,CAAE;QAEtG,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,IAAI,OAAO;QAExD,IAAI,MAAM,EACV;AACI,YAAA,IAAG,QAAQ;gBAAE,QAAQ,CAAE,KAAK,CAAE;QAClC;IACJ;AAEA;;;;;;AAMG;IAEH,QAAQ,CAAE,IAAY,EAAE,CAAS,EAAE,CAAS,EAAE,KAAA,GAAiB,KAAK,EAAE,QAAa,EAAA;QAE/E,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC;;QAIxC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAE,IAAI,CAAE,EAC5B;YACI,IAAI,CAAC,UAAU,CAAE,IAAI,CAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE;QAC9C;aAEA;YACI,KAAK,GAAG,IAAI,CAAC,UAAU,CAAE,IAAI,CAAE,CAAC,KAAK;QACzC;;QAIA,IAAI,QAAQ,GAAG,EAAE;AACjB,QAAA,GAAG,CAAC,IAAI,GAAG,QAAQ,GAAG,UAAU;QAEhC,IAAI,OAAO,GAAG,IAAI,EAAE,CAAC,IAAI,CAAE,EAAE,EAAE,CAAC,CAAE;QAClC,IAAI,QAAQ,GAAG,IAAI,EAAE,CAAC,IAAI,CAAE,CAAC,EAAE,CAAC,CAAE;QAElC,MAAM,OAAO,GAAG,GAAG,CAAC,WAAW,CAAE,IAAI,CAAE;AACvC,QAAA,IAAI,IAAI,GAAG,IAAI,EAAE,CAAC,IAAI,CAAE,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,uBAAuB,GAAG,OAAO,CAAC,wBAAwB,CAAE;QAE3G,IAAI,SAAS,GAAG,EAAE;AAClB,QAAA,IAAI,QAAQ,GAAG,IAAI,EAAE,CAAC,IAAI,CAAC,SAAS,GAAG,GAAG,EAAE,CAAC,CAAC;AAC9C,QAAA,QAAQ,CAAC,GAAG,CAAE,IAAI,EAAE,QAAQ,CAAE;;AAI9B,QAAA,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,GAAG,SAAS;QAC7D,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC;QACxC,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,IAAI,SAAS,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,KAAK,SAAS,GAAG,IAAI,CAAC,CAAC;eAC7F,IAAI,CAAC,aAAa,CAAC,CAAC,IAAI,SAAS,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,KAAK,SAAS,GAAG,IAAI,CAAC,CAAC,CAAC;AAEpF,QAAA,MAAM,MAAM,GAAG,OAAO,IAAI,IAAI,CAAC,SAAS;AACxC,QAAA,MAAM,OAAO,GAAG,OAAO,IAAI,IAAI,CAAC,UAAU;;QAI1C,GAAG,CAAC,SAAS,GAAG,MAAM,GAAG,MAAM,IAAI,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AAC7D,QAAA,GAAG,CAAC,QAAQ,CAAE,QAAQ,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,GAAG,GAAG,EAAE,QAAQ,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,GAAG,GAAG,CAAE;;QAIlG,IAAI,OAAO,EACX;YACI,KAAK,GAAG,CAAC,KAAK;YACd,IAAI,CAAC,UAAU,CAAE,IAAI,CAAE,CAAC,KAAK,GAAG,KAAK;YACrC,IAAI,QAAQ,EACZ;gBACI,QAAQ,CAAE,KAAK,CAAE;YACrB;QACJ;AAEA,QAAA,GAAG,CAAC,SAAS,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,IAAI,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;aACvD,MAAM,GAAG,MAAM,IAAI,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC,CAAC;AACnE,QAAA,GAAG,CAAC,QAAQ,CAAE,QAAQ,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,GAAG,SAAS,EAAE,QAAQ,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAE;;AAInG,QAAA,GAAG,CAAC,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM;QACzC,GAAG,CAAC,QAAQ,CAAE,IAAI,EAAE,QAAQ,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,GAAG,OAAO,CAAC,uBAAuB,GAAG,OAAO,CAAC,CAAC,CAAE;QAEtG,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,IAAI,OAAO;IAC5D;AAEA;;;AAGG;IAEH,QAAQ,GAAA;QAEJ,OAAO,IAAI,CAAC,UAAU;;AAGtB,QAAA,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,gBAAgB,GAAG,SAAS,GAAG,SAAS;;AAG1E,QAAA,IAAI,CAAC,gBAAgB,GAAG,KAAK;IACjC;AACH;AAED,EAAE,CAAC,IAAI,GAAG,IAAI;;;;"}
+{"version":3,"file":"ImUi.js","sources":["../../src/extensions/ImUi.ts"],"sourcesContent":["// ImUI.ts @jxarco\r\n\r\nimport { LX } from '../core/Namespace';\r\n\r\nif ( !LX )\r\n{\r\n    throw ( 'Missing LX namespace!' );\r\n}\r\n\r\nLX.extensions.push( 'ImUI' );\r\n\r\nconst vec2 = LX.vec2;\r\n\r\n/**\r\n * @class ImUI\r\n */\r\n\r\nexport class ImUI\r\n{\r\n    root: any;\r\n    canvas: any;\r\n\r\n    // Components\r\n    components: any = {};\r\n\r\n    // Mouse state\r\n    mouseDown: boolean = false;\r\n    mousePosition: typeof vec2 = new vec2();\r\n    usePointerCursor: boolean = false;\r\n    eventClick: MouseEvent | undefined = undefined;\r\n\r\n    constructor( canvas: HTMLCanvasElement, options: any = {} )\r\n    {\r\n        console.assert( canvas !== undefined );\r\n\r\n        // To capture key events\r\n        canvas.tabIndex = -1;\r\n\r\n        canvas.addEventListener( 'keydown', this._processKey.bind( this ), true );\r\n        canvas.addEventListener( 'mousedown', this._processMouse.bind( this ) );\r\n        canvas.addEventListener( 'mouseup', this._processMouse.bind( this ) );\r\n        canvas.addEventListener( 'mousemove', this._processMouse.bind( this ) );\r\n        canvas.addEventListener( 'click', this._processMouse.bind( this ) );\r\n\r\n        // this.font = new FontFace(\"Ubuntu\", \"url(../data/Ubuntu-Bold.ttf)\");\r\n        // this.font.load().then(\r\n        //     ( font ) => {\r\n        //         document.fonts.add( font );\r\n        //         if( options.onready ) options.onready();\r\n        //     },\r\n        //     (err) => {\r\n        //         console.error(err);\r\n        //     },\r\n        // );\r\n\r\n        this.root = this.canvas = canvas;\r\n    }\r\n\r\n    _processKey( e: KeyboardEvent )\r\n    {\r\n        const detail: any = e.detail;\r\n        const key = e.key ?? detail.key;\r\n        console.log( key );\r\n    }\r\n\r\n    _processMouse( e: MouseEvent )\r\n    {\r\n        if ( e.type == 'mousedown' )\r\n        {\r\n            this.mouseDown = true;\r\n        }\r\n        else if ( e.type == 'mouseup' )\r\n        {\r\n            this._processClick( e );\r\n            this.mouseDown = false;\r\n        }\r\n        else if ( e.type == 'mousemove' )\r\n        {\r\n            this.mousePosition.set( e.clientX, e.clientY );\r\n        }\r\n    }\r\n\r\n    _processClick( e: MouseEvent )\r\n    {\r\n        this.eventClick = e;\r\n    }\r\n\r\n    /**\r\n     * @method Button\r\n     * @param {String} text\r\n     * @param {Number} x\r\n     * @param {Number} y\r\n     */\r\n\r\n    Button( text: string, x: number, y: number, callback: any )\r\n    {\r\n        const ctx = this.canvas.getContext( '2d' );\r\n\r\n        // Element properties\r\n\r\n        let fontSize = 16;\r\n        ctx.font = fontSize + 'px Arial';\r\n\r\n        let padding = new LX.vec2( 12, 8 );\r\n        let position = new LX.vec2( x, y );\r\n\r\n        const metrics = ctx.measureText( text );\r\n        let size = new LX.vec2( metrics.width, metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent );\r\n\r\n        // Get mouse state\r\n\r\n        const hovered = this.mousePosition.x >= position.x\r\n            && this.mousePosition.x <= ( position.x + size.x + padding.x * 2.0 )\r\n            && this.mousePosition.y >= position.y && this.mousePosition.y <= ( position.y + size.y + padding.y * 2.0 );\r\n\r\n        const active = hovered && this.mouseDown;\r\n\r\n        // Draw button\r\n\r\n        ctx.beginPath();\r\n        ctx.fillStyle = active ? '#666' : ( hovered ? '#444' : '#222' );\r\n        ctx.roundRect( position.x, position.y, size.x + padding.x * 2.0, size.y + padding.y * 2.0, [ 8, 8, 8, 8 ] );\r\n        ctx.fill();\r\n\r\n        // Draw text\r\n\r\n        ctx.fillStyle = hovered ? '#fff' : '#ddd';\r\n        ctx.fillText( text, position.x + padding.x, position.y + metrics.actualBoundingBoxAscent + padding.y );\r\n\r\n        this.usePointerCursor = this.usePointerCursor || hovered;\r\n\r\n        if ( this.eventClick )\r\n        {\r\n            if ( callback ) callback();\r\n            return true;\r\n        }\r\n\r\n        return false;\r\n    }\r\n\r\n    /**\r\n     * @method Slider\r\n     * @param {String} text\r\n     * @param {Number} x\r\n     * @param {Number} y\r\n     * @param {Number} value\r\n     */\r\n\r\n    Slider( text: string, x: number, y: number, value: number = 0, callback: any )\r\n    {\r\n        const ctx = this.canvas.getContext( '2d' );\r\n\r\n        // Store slider value\r\n\r\n        if ( !this.components[text] )\r\n        {\r\n            this.components[text] = { value: value };\r\n        }\r\n        else\r\n        {\r\n            value = this.components[text].value;\r\n        }\r\n\r\n        // Element properties\r\n\r\n        let fontSize = 16;\r\n        ctx.font = fontSize + 'px Arial';\r\n\r\n        let padding = new LX.vec2( 12, 8 );\r\n        let position = new LX.vec2( x, y );\r\n\r\n        const metrics = ctx.measureText( text );\r\n        let size = new LX.vec2( metrics.width, metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent );\r\n        let fullSize = size.add( padding.mul( 2.0 ) );\r\n\r\n        // Get mouse state\r\n\r\n        const hovered = this.mousePosition.x >= position.x && this.mousePosition.x <= ( position.x + fullSize.x )\r\n            && this.mousePosition.y >= position.y && this.mousePosition.y <= ( position.y + fullSize.y );\r\n\r\n        const active = hovered && this.mouseDown;\r\n\r\n        // Draw box\r\n\r\n        ctx.beginPath();\r\n        ctx.fillStyle = hovered ? '#444' : '#222';\r\n        ctx.roundRect( position.x, position.y, fullSize.x, fullSize.y, [ 8, 8, 8, 8 ] );\r\n        ctx.fill();\r\n\r\n        // Draw value\r\n\r\n        const min = position.x;\r\n        const max = position.x + fullSize.x;\r\n\r\n        if ( active )\r\n        {\r\n            value = LX.clamp( ( this.mousePosition.x - min ) / ( max - min ), 0.0, 1.0 );\r\n            this.components[text].value = value;\r\n        }\r\n\r\n        let valueSize = new LX.vec2( fullSize.x * value, size.y );\r\n\r\n        ctx.beginPath();\r\n        ctx.fillStyle = hovered ? '#6074e7' : '#3e57e4';\r\n        if ( valueSize.x > ( fullSize.x - 8 ) )\r\n        { // 8: radius\r\n            ctx.roundRect( position.x, position.y, valueSize.x, valueSize.y + padding.y * 2.0, [ 8, 8, 8, 8 ] );\r\n            ctx.fill();\r\n        }\r\n        else\r\n        {\r\n            ctx.fillRect( position.x, position.y, valueSize.x, valueSize.y + padding.y * 2.0 );\r\n        }\r\n\r\n        // Draw text\r\n\r\n        ctx.fillStyle = hovered ? '#fff' : '#ddd';\r\n        ctx.fillText( text, position.x + padding.x, position.y + metrics.actualBoundingBoxAscent + padding.y );\r\n\r\n        this.usePointerCursor = this.usePointerCursor || hovered;\r\n\r\n        if ( active )\r\n        {\r\n            if ( callback ) callback( value );\r\n        }\r\n    }\r\n\r\n    /**\r\n     * @method Checkbox\r\n     * @param {String} text\r\n     * @param {Number} x\r\n     * @param {Number} y\r\n     * @param {Number} value\r\n     */\r\n\r\n    Checkbox( text: string, x: number, y: number, value: boolean = false, callback: any )\r\n    {\r\n        const ctx = this.canvas.getContext( '2d' );\r\n\r\n        // Store slider value\r\n\r\n        if ( !this.components[text] )\r\n        {\r\n            this.components[text] = { value: value };\r\n        }\r\n        else\r\n        {\r\n            value = this.components[text].value;\r\n        }\r\n\r\n        // Element properties\r\n\r\n        let fontSize = 16;\r\n        ctx.font = fontSize + 'px Arial';\r\n\r\n        let padding = new LX.vec2( 12, 8 );\r\n        let position = new LX.vec2( x, y );\r\n\r\n        const metrics = ctx.measureText( text );\r\n        let size = new LX.vec2( metrics.width, metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent );\r\n\r\n        let boxMargin = 12;\r\n        let fullSize = new LX.vec2( boxMargin * 2.0, 0 );\r\n        fullSize.add( size, fullSize );\r\n\r\n        // Get mouse state\r\n\r\n        const boxStartX = position.x + size.x + padding.x + boxMargin;\r\n        const boxStartY = position.y + padding.y;\r\n        const hovered = this.mousePosition.x >= boxStartX && this.mousePosition.x <= ( boxStartX + size.y )\r\n            && this.mousePosition.y >= boxStartY && this.mousePosition.y <= ( boxStartY + size.y );\r\n\r\n        const active = hovered && this.mouseDown;\r\n        const pressed = hovered && this.eventClick;\r\n\r\n        // Draw button\r\n\r\n        ctx.fillStyle = active ? '#666' : ( hovered ? '#444' : '#222' );\r\n        ctx.fillRect( position.x, position.y, fullSize.x + padding.x * 2.0, fullSize.y + padding.y * 2.0 );\r\n\r\n        // Draw checkbox\r\n\r\n        if ( pressed )\r\n        {\r\n            value = !value;\r\n            this.components[text].value = value;\r\n            if ( callback )\r\n            {\r\n                callback( value );\r\n            }\r\n        }\r\n\r\n        ctx.fillStyle = value\r\n            ? ( active ? '#ddd' : ( hovered ? '#6074e7' : '#3e57e4' ) )\r\n            : ( active ? '#bbb' : ( hovered ? '#777' : '#888' ) );\r\n        ctx.fillRect( position.x + size.x + padding.x + boxMargin, position.y + padding.y, size.y, size.y );\r\n\r\n        // Draw text\r\n\r\n        ctx.fillStyle = hovered ? '#fff' : '#ddd';\r\n        ctx.fillText( text, position.x + padding.x, position.y + metrics.actualBoundingBoxAscent + padding.y );\r\n\r\n        this.usePointerCursor = this.usePointerCursor || hovered;\r\n    }\r\n\r\n    /**\r\n     * @method endFrame\r\n     * @description Clears the information stored during the last frame\r\n     */\r\n\r\n    endFrame()\r\n    {\r\n        delete this.eventClick;\r\n\r\n        // Pointer cursor on hover\r\n        document.body.style.cursor = this.usePointerCursor ? 'pointer' : 'default';\r\n\r\n        // Clear info\r\n        this.usePointerCursor = false;\r\n    }\r\n}\r\n\r\nLX.ImUI = ImUI;\r\n"],"names":[],"mappings":"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"}

package/build/extensions/Timeline.d.ts

@@ -125,9 +125,8 @@ export declare abstract class Timeline {
      */
     updateHeader(): void;
     /**
-    * @method updateLeftPanel
-    *
-    */
+     * @method updateLeftPanel
+     */
     updateLeftPanel(): void;
     setTrackHeight(trackHeight: number): void;
     /**
@@ -200,14 +199,14 @@ export declare abstract class Timeline {
      * @method changeState
      * @param {Boolean} skipCallback defaults false
      * @description change play/pause state
-     **/
+     */
     changeState(skipCallback?: boolean): void;
     /**
      * @method setState
      * @param {Boolean} state
      * @param {Boolean} skipCallback defaults false
      * @description change play/pause state
-     **/
+     */
     setState(state: boolean, skipCallback?: boolean): void;
     /**
      * @method setLoopMode
@@ -257,15 +256,14 @@ export declare abstract class Timeline {
     _updateTrackTreeSelection(): void;
     deselectAllElements(): void;
     /**
-    * @method setTrackState
-    * @param {Int} trackIdx
-    * @param {Boolean} isEnbaled
-    * @param {Boolean} skipCallback onSetTrackState
-    * @param {Boolean} updateTrackTree updates eye icon of the track, if it is visible in the timeline
-    */
+     * @method setTrackState
+     * @param {Int} trackIdx
+     * @param {Boolean} isEnbaled
+     * @param {Boolean} skipCallback onSetTrackState
+     * @param {Boolean} updateTrackTree updates eye icon of the track, if it is visible in the timeline
+     */
     setTrackState(trackIdx: number, isEnbaled?: boolean, skipCallback?: boolean, updateTrackTree?: boolean): void;
     /**
-     *
      * @param {Int} trackIdx
      * @param {Boolean} isLocked
      * @param {Boolean} skipCallback onSetTrackLock
@@ -286,14 +284,14 @@ export declare abstract class Timeline {
     resize(size?: Nullable<[number, number]>): void;
     resizeCanvas(): void;
     /**
-    * @method hide
-    * Hide timeline area
-    */
+     * @method hide
+     * Hide timeline area
+     */
     hide(): void;
     /**
-    * @method show
-    * Show timeline area if it is hidden
-    */
+     * @method show
+     * Show timeline area if it is hidden
+     */
     show(): void;
     /**
         These functions might be overriden by child classes. Nonetheless, they must have the same attributes, at least.
@@ -307,7 +305,6 @@ export declare abstract class Timeline {
      */
     generateSelectedItemsTreeData(): any;
     /**
-     *
      * @param {Object} options set some values for the track instance ( groups and trackIdx not included )
      * @returns
      */
@@ -392,7 +389,6 @@ export declare class KeyFramesTimeline extends Timeline {
      */
     getTrack(trackId: string, groupId?: Nullable<string>): any;
     /**
-     *
      * @param {Number} size pixels, height of keyframe
      * @param {Number} sizeHovered optional, size in pixels when hovered
      */
@@ -406,7 +402,7 @@ export declare class KeyFramesTimeline extends Timeline {
      * @param {*} ctx
      * ...
      * @description helper function, you can call it from drawContent to render all the keyframes
-    */
+     */
     drawTrackWithKeyframes(ctx: CanvasRenderingContext2D, trackHeight: number, track: any): void;
     drawTrackWithCurves(ctx: CanvasRenderingContext2D, trackHeight: number, track: any): void;
     _getValidTrackName(uglyName: string): (string | null)[];
@@ -451,11 +447,10 @@ export declare class KeyFramesTimeline extends Timeline {
         edited: any;
     };
     /**
-    *
-    * @param {*} track
-    * @param {Number} srcIdx keyFrame index
-    * @param {Number} trgIdx keyFrame index
-    */
+     * @param {*} track
+     * @param {Number} srcIdx keyFrame index
+     * @param {Number} trgIdx keyFrame index
+     */
     swapKeyFrames(track: any, srcIdx: number, trgIdx: number): void;
     copySelectedContent(): void;
     copyKeyFrameValue(track: any, index: number): void;
@@ -561,10 +556,9 @@ export declare class ClipsTimeline extends Timeline {
      */
     instantiateAnimationClip(animation: any, clone?: boolean): any;
     /**
-     *
      * @param {Object} options set some values for the track instance ( groups and trackIdx not included )
      * @returns
-    */
+     */
     instantiateTrack(options?: any, clone?: boolean): any;
     instantiateClip(options?: any): {
         id: any;
@@ -604,13 +598,12 @@ export declare class ClipsTimeline extends Timeline {
      */
     optimizeTracks(): void;
     /**
-    *
-    * @param {Object} clip  clip to be added
-    * @param {Int} trackIdx ( optional ) track where to put the clip. -1 will find the first free slot. ***WARNING*** Must call getClipsInRange, before calling this function with a valid trackdIdx
-    * @param {Number} offsetTime ( optional ) offset time of current time
-    * @param {Number} searchStartTrackIdx ( optional ) if trackIdx is set to -1, this idx will be used as the starting point to find a valid track
-    * @returns  a zero/positive value if successful. Otherwise, -1
-    */
+     * @param {Object} clip  clip to be added
+     * @param {Int} trackIdx ( optional ) track where to put the clip. -1 will find the first free slot. ***WARNING*** Must call getClipsInRange, before calling this function with a valid trackdIdx
+     * @param {Number} offsetTime ( optional ) offset time of current time
+     * @param {Number} searchStartTrackIdx ( optional ) if trackIdx is set to -1, this idx will be used as the starting point to find a valid track
+     * @returns  a zero/positive value if successful. Otherwise, -1
+     */
     addClip(clip: any, trackIdx?: number, offsetTime?: number, searchStartTrackIdx?: number): any;
     /**
      *  Add an array of clips to the timeline in the first suitable tracks. It tries to put clips in the same track if possible. All clips will be in adjacent tracks to each other
@@ -624,7 +617,7 @@ export declare class ClipsTimeline extends Timeline {
     /** Delete clip from the timeline
      * @param {Number} trackIdx
      * @param {Number} clipIdx clip to be deleted
-    */
+     */
     deleteClip(trackIdx: number, clipIdx: number, skipCallback?: boolean): void;
     /**
      * User defined. Used when copying and pasting