lexgui 0.1.35 → 0.1.37

package/changelog.md

@@ -1,6 +1,27 @@
 # lexgui.js changelog
 
-## 0.1.36 (dev)
+## 0.1.37
+
+Audio:
+- Start new audio widgets (Knob wip).
+
+Timeline:
+- Major refactor of Timeline
+- Fixed examples
+
+Allow unit labels for Number widgets.
+Fixed Number/Vector precision.
+Fixed ContextMenu position on creation over window size.
+Minor bug fixes.
+
+## 0.1.36 (master)
+
+Default skipCallback as `true` on emit widget signal.
+Add some vec2 math functions.
+`Panel.addTabs` support for onCreate (prev. `callback`) and onSelect callbacks.
+Apply original `display` when showing Areatab.
+Minor styling tweaks.
+Documentation updates.
 
 ## 0.1.35
 

package/demo.js

@@ -1,6 +1,9 @@
 import { LX } from 'lexgui';
 import 'lexgui/components/codeeditor.js';
 import 'lexgui/components/timeline.js';
+import 'lexgui/components/audio.js';
+
+window.LX = LX;
 
 // Init library and get main area
 let area = LX.init();
@@ -475,6 +478,7 @@ function fillPanel( panel ) {
     panel.branch("Preferences", {icon: "fa-solid fa-gear"});
     panel.addButton(null, "Click me, Im Full Width...");
     panel.addText("Text", "Warning text", null, { warning: true });
+    panel.addKnob("A Knob", 4, 0, 200, value => { console.log(value) }, /*{ size: 'sm' }*/);
     panel.sameLine(2);
     panel.addFile("Img1", data => { console.log(data) }, {} );
     panel.addFile("Img2", data => { console.log(data) }, {} );
@@ -545,7 +549,7 @@ function fillPanel( panel ) {
     });
     panel.addNumber("Font Size", 36, (value, event) => {
         console.log(value);
-    }, { min: 1, max: 48, step: 1});
+    }, { min: 1, max: 48, step: 1, units: "px"});
     panel.addVector2("2D Position", [250, 350], (value, event) => {
         console.log(value);
     }, { min: 0, max: 1024 });
@@ -582,15 +586,18 @@ function fillRightBottomPanel( panel, tab ) {
             { 
                 name: "First tab",
                 icon: "fa-brands fa-discord",
-                callback: p => {
+                onCreate: p => {
                     p.addTitle("Discord tab");
                     p.addButton(null, "Connect");
+                },
+                onSelect: p => {
+                    console.log( p );
                 }
             },
             { 
                 name: "Second tab",
                 icon: "fa-brands fa-twitter",
-                callback: p => {
+                onCreate: p => {
                     p.addTitle("Twitter tab");
                     p.addText("Tweet", "", null, {placeholder: "Tyler Rake 2"});
                 }
@@ -598,7 +605,7 @@ function fillRightBottomPanel( panel, tab ) {
             { 
                 name: "Third tab",
                 icon: "fa-brands fa-github",
-                callback: p => {
+                onCreate: p => {
                     p.addTitle("Github tab");
                     p.addButton(null, "Go", () => {window.open("https://github.com/jxarco/lexgui.js/")});
                 }
@@ -621,7 +628,7 @@ function fillRightBottomPanel( panel, tab ) {
             { 
                 name: "First tab",
                 icon: "fa-brands fa-discord",
-                callback: (p, content) => {
+                onCreate: (p, content) => {
                     p.addTitle("Discord tab");
                     p.addButton("Apply", "Add button to branch", (value, event) => {
                         p.queue( content );
@@ -633,7 +640,7 @@ function fillRightBottomPanel( panel, tab ) {
             { 
                 name: "Second tab",
                 icon: "fa-brands fa-twitter",
-                callback: p => {
+                onCreate: p => {
                     p.addTitle("Twitter tab");
                     p.addText("Tweet", "", null, {placeholder: "Tyler Rake 2"});
                 }
@@ -641,7 +648,7 @@ function fillRightBottomPanel( panel, tab ) {
             { 
                 name: "Third tab",
                 icon: "fa-brands fa-github",
-                callback: p => {
+                onCreate: p => {
                     p.addTitle("Github tab");
                     p.addButton(null, "Go", (value, event) => {window.open("https://github.com/jxarco/lexgui.js/")});
                 }

package/examples/timeline.html

@@ -18,7 +18,7 @@
     <script type="module">
 
         import { LX } from 'lexgui';
-        import { Timeline, KeyFramesTimeline, ClipsTimeline, CurvesTimeline, CurvesKeyFramesTimeline } from 'lexgui/components/timeline.js';
+        import { Timeline, KeyFramesTimeline, ClipsTimeline, CurvesTimeline } from 'lexgui/components/timeline.js';
 
         // init library and get main area
         let area = LX.init();
@@ -123,8 +123,16 @@
                 console.log(value);
             }, { min: 1, max: 48, step: 1});
             panel.addVector2("2D Position", position, (value, event) => {
-           
-                activeTimeline.updateSelectedKeyframe(value);
+                let currentSelection = activeTimeline.lastKeyFramesSelected[0];
+                if( currentSelection ){
+                    const track = activeTimeline.animationClip.tracks[0];
+                    const keyframe = currentSelection[2];
+                    const dim = track.dim;
+                    
+                    track.values[keyframe * track.dim] = value[0];
+                    track.values[keyframe * track.dim + 1] = value[1];
+                    track.edited[keyframe] = true;
+                }
             }, { min: 0, max: 1024 });
             panel.branch_open = true;
             panel.merge();
@@ -177,7 +185,7 @@
             keyframesPanel.onresize = () => {
                 kfTimeline.resize();
             }
-            let kfTimeline = new LX.KeyFramesTimeline('', {
+            let kfTimeline = new LX.KeyFramesTimeline('keyframesTimeline', {
                 disableNewTracks: true,
                 onBeforeCreateTopBar: (panel) => {
                     panel.addDropdown("Animation", ["Anim 1", "Anim 2", "Anim 3"], "Anim 1", ()=> {})
@@ -189,13 +197,13 @@
             });
 
             keyframesPanel.attach(kfTimeline.root);
+            kfTimeline.setAnimationClip({tracks: [{name: "Font.position", values: [250, 450, 250, 250, 250, 450], times: [0, 0.5, 1.0]}, {name: "Item 1.scale", values: [0,1,0, 0.5], times: [0, 0.1, 0.2, 0.3]}, {name: "Item 2", values: [0,1,0,1], times: [0.1]}, {name: "Item 3.position", values: [0,1,0,0,0,0], times: [0.1, 0.2, 0.3]}, {name: "Item 3.scale", values: [0,1,0], times: [ 0.1, 0.2, 0.3]}], duration: 1});
             kfTimeline.setSelectedItems(["Font", "Item 2", "Item 3"]);
-            kfTimeline.setAnimationClip({tracks: [{name: "Font.position", values: [250, 350, 250, 250, 250, 350], times: [0, 0.1, 0.2]}, {name: "Item 1.scale", values: [0,1,0, 0.5], times: [0, 0.1, 0.2, 0.3]}, {name: "Item 2", values: [0,1,0,1], times: [0.1]}, {name: "Item 3.position", values: [0,1,0,0,0,0], times: [0.1, 0.2, 0.3]}, {name: "Item 3.scale", values: [0,1,0], times: [ 0.1, 0.2, 0.3]}], duration: 1});
             activeTimeline = kfTimeline;
             kfTimeline.show();
             
             
-            kfTimeline.onSelectKeyFrame = (data, currentSelection, keyFrameIndex) => {
+            kfTimeline.onSelectKeyFrame = (data, currentSelection) => {
                 if(data.multipleSelection) {
                     rightArea.hide();
                     return;
@@ -209,6 +217,8 @@
                 let values = kfTimeline.animationClip.tracks[id].values;
                 const dim = kfTimeline.animationClip.tracks[id].dim;
                 
+                //currentSelection == [track.name, track.idx, frameIdx, track.clipIdx, track.times[frameIdx]]
+                const keyFrameIndex = currentSelection[2];
                 position = values.slice(keyFrameIndex * dim, keyFrameIndex * dim + dim);
                 fillPanel(panel);
                 //kfTimeline.animationClip.tracks[currentSelection[0][0]];
@@ -216,21 +226,23 @@
             
             kfTimeline.onSetTime = ( time ) => {
                 rightArea.show();
-                const frametime = kfTimeline.getNearestKeyFrame( kfTimeline.animationClip.tracks[0], time);
-                let keyframe = kfTimeline.animationClip.tracks[0].times.indexOf(frametime);
-                let values = kfTimeline.animationClip.tracks[0].values;
-                let valueX = values[keyframe * 2];
-                let valueY = values[keyframe * 2 + 1];
-                if(keyframe != undefined) {
-                    let t = Math.abs(frametime - time);
-                    let sign = frametime - time > 0 ? -1 : 1;
-                    const nearestFrame = keyframe * 2 + sign;
-                    if (nearestFrame <= values.length - 2 && nearestFrame >= 0) {
-                        valueX =  valueX * (1 - t) + values[keyframe * 2 + sign] * t;                    
-                        valueY =  valueY * (1 - t) + values[keyframe * 2 + sign + 1] * t;                                        
+                const keyframe = kfTimeline.getNearestKeyFrame( kfTimeline.animationClip.tracks[0], time, -1);
+                if(keyframe != -1) {
+                    const trackLength = kfTimeline.animationClip.tracks[0].times.length;
+                    const nextKeyframe = keyframe < (trackLength-1) ? (keyframe + 1) : keyframe;
+                    const frametime = kfTimeline.animationClip.tracks[0].times[keyframe];
+                    const nextframeTime = kfTimeline.animationClip.tracks[0].times[nextKeyframe];
+
+                    let t = 1;
+                    if ( keyframe < trackLength-1){
+                       t = (time - frametime) / (nextframeTime - frametime);
                     }
+
+                    let values = kfTimeline.animationClip.tracks[0].values;
+                    let valueX = values[keyframe * 2] * (1-t) + t * values[nextKeyframe * 2];
+                    let valueY = values[keyframe * 2 + 1] * (1-t) + t * values[nextKeyframe * 2 + 1];
+                    position = [valueX, valueY];
                 }
-                position = [valueX, valueY];
                 fillPanel( panel );
             }
         }
@@ -282,10 +294,10 @@
 
             }});
 
-            let curvesTimeline = new LX.CurvesKeyFramesTimeline("curves-timeline", { range: [-1,1]});
+            let curvesTimeline = new LX.CurvesTimeline("curves-timeline", { range: [-1,1]});
             curvesPanel.attach(curvesTimeline.root);
-            curvesTimeline.setSelectedItems(["Item 1", "Item 2", "Item 3"]);
             curvesTimeline.setAnimationClip({tracks: [{name: "Item 1.position", values: [0,1,0,-1], times: [0, 0.1, 0.2, 0.3]}, {name: "Item 1.scale", values: [0,1,0, 0.5], times: [0, 0.1, 0.2, 0.3]}, {name: "Item 2", values: [0,1,0,1], times: [0.1, 0.2, 0.3, 0.8]}, {name: "Item 3.position", values: [0,0,1], times: [0]}, {name: "Item 3.scale", values: [0,1,0], times: [0, 0.1, 0.3]}], duration: 1});
+            curvesTimeline.setSelectedItems(["Item 1", "Item 2", "Item 3"]);
             curvesTimeline.show();
             curvesTimeline.draw(0);
         }

package/package.json

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