lexgui 0.1.36 → 0.1.39

package/changelog.md

@@ -1,10 +1,40 @@
 # lexgui.js changelog
 
-## 0.1.37 (dev)
+## 0.1.40 (dev)
 
+## 0.1.39 (master)
 
+New widget: Pad. Bidimensional slider.
+`LX.makeDraggable` now supports 'absolute' and 'fixed' positions.
+Fix passing onDragStart/onMove functions to Dialogs.
+Minor bug fixes.
+
+## 0.1.38
+
+Timeline: Fixed timeline signals and added callbacks
+
+Number/Vector widgets:
+    - Support for onPress&onRelease for catching mouse events.
+    - Added `setLimits` for min, max, step parameters.
+
+Added Size Widget (N dimension number widget).
+Minor bug fixes.
+
+## 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)
+## 0.1.36
 
 Default skipCallback as `true` on emit widget signal.
 Add some vec2 math functions.

package/demo.js

@@ -1,6 +1,7 @@
 import { LX } from 'lexgui';
 import 'lexgui/components/codeeditor.js';
 import 'lexgui/components/timeline.js';
+import 'lexgui/components/audio.js';
 
 window.LX = LX;
 
@@ -480,10 +481,15 @@ function fillPanel( panel ) {
     panel.sameLine(2);
     panel.addFile("Img1", data => { console.log(data) }, {} );
     panel.addFile("Img2", data => { console.log(data) }, {} );
+    panel.addPad("2D Pad", [0.5, 0.5], (value, event) => {
+        console.log(value);
+    }, { padSize: "100px", min: -1, max: 2 });
+    panel.addSize("Screen Res", [1280, 720], (value, event) => {
+        console.log(value);
+    }, { units: "p" });
     panel.addDropdown("Best Engine", ["Godot", "Unity", "Unreal Engine"], "Unity", (value, event) => {
         console.log(value);
     });
-
     panel.addDropdown("Best Logo", [{value:"Godot", src: "https://godotengine.org/assets/press/logo_vertical_color_light.webp"}, {value: "Unity", src: "https://logos-world.net/wp-content/uploads/2023/01/Unity-Logo.png"}, {value:"Unreal Engine", src: "https://cdn2.unrealengine.com/ue-logo-stacked-unreal-engine-w-677x545-fac11de0943f.png"}], "Godot", (value, event) => {
         console.log(value);
     }, {filter: true});
@@ -547,7 +553,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 });
@@ -692,6 +698,7 @@ function fillBottomPanel( panel ) {
     panel.addTextArea("Notes", "", (value, event) => {
         console.log(value);
     }, { placeholder: 'Some notes...' });
+    panel.addKnob("A Knob", 4, 0, 200, value => { console.log(value) }, /*{ size: 'sm' }*/);
     panel.addButton("Apply", "Add button to branch", (value, event) => {
         const branch = panel.getBranch("Information");
         panel.queue( branch.content );

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.36",
+    "version": "0.1.39",
     "description": "JS library to create web graphical user interfaces",
     "type": "module",
     "main": "./build/lexgui.js",