lexgui 0.1.32 → 0.1.34

package/changelog.md

@@ -1,5 +1,19 @@
 # lexgui.js changelog
 
+## 0.1.34
+
+Fix setValue on Checkbox.
+Fix position of Dropdown menu when content is scrolled.
+`moveOutAction` option to delete or clamp curve points.
+Minor tweaks.
+
+## 0.1.33
+
+Work on VideoEditor UI component.
+Improvements Timeline.
+Allow to select multiple options in AssetViewer.
+Minor bug fixes.
+
 ## 0.1.32
 
 Timeline:

package/demo.js

@@ -433,6 +433,7 @@ function fillPanel( panel ) {
     window.tree = panel.addTree("Scene Tree", sceneData, { 
         icons: treeIcons, 
         // filter: false,
+        addDefault: true,
         onevent: (event) => { 
             console.log(event.string());
 
@@ -453,19 +454,9 @@ function fillPanel( panel ) {
                     console.log(event.node.id + " dbl clicked"); 
                     break;
                 case LX.TreeEvent.NODE_CONTEXTMENU: 
-                    LX.addContextMenu( event.multiple ? "Selected Nodes" : event.node.id, event.value, m => {
-
-                        // {options}: callback, color
-
-                        m.add( "Select Children", () => console.log("select children") );
-                        m.add( "Clone", { callback: () => console.log("Clone"), color: "#0d5" } );
-                        m.add( "Components/Transform");
-                        m.add( "Components/MeshRenderer");
-                        m.add( "Move before sibling" );
-                        m.add( "Move after sibling" );
-                        m.add( "Move to parent" );
-                        m.add( "Delete" );
-                    });
+                    const m = event.panel;
+                    m.add( "Components/Transform");
+                    m.add( "Components/MeshRenderer");
                     break;
                 case LX.TreeEvent.NODE_DRAGGED: 
                     console.log(event.node.id + " is now child of " + event.value.id); 

package/examples/timeline.html

@@ -18,7 +18,7 @@
     <script type="module">
 
         import { LX } from 'lexgui';
-        import { Timeline, KeyFramesTimeline, ClipsTimeline, CurvesTimeline } from 'lexgui/components/timeline.js';
+        import { Timeline, KeyFramesTimeline, ClipsTimeline, CurvesTimeline, CurvesKeyFramesTimeline } from 'lexgui/components/timeline.js';
 
         // init library and get main area
         let area = LX.init();
@@ -46,6 +46,8 @@
         
         const bottomTabs = bottomArea.addTabs();
         const types = { KEYFRAMES: 0, CLIPS: 1, CURVES: 2};
+        let position = [250, 350];
+        let trackName = "";
 
         let panel = new LX.Panel();
         panel = rightArea.addPanel(panel);        
@@ -76,14 +78,15 @@
                 if(activeTimeline.playing) {
                     
                     activeTimeline.currentTime += elapsed* 0.001;
-                    activeTimeline.onSetTime(activeTimeline.currentTime);
+                    if(activeTimeline.onSetTime) {
+                        activeTimeline.onSetTime(activeTimeline.currentTime);
+                    }
                     if(activeTimeline.currentTime >= activeTimeline.animationClip.duration) {
                         activeTimeline.currentTime = 0;
                         if(!activeTimeline.loop) {
                             activeTimeline.changeState();
                         }
-                    }
-                   
+                    }                   
                 }
             }
                         
@@ -108,10 +111,10 @@
         // **** **** **** **** **** **** **** **** **** **** **** **** 
 
         function fillPanel( panel ) {
-           panel.clear();
+            panel.clear();
             panel.branch("Canvas", {icon: "fa-solid fa-palette", filter: true});
             panel.addColor("Background", LX.getThemeColor("global-selected-light"));
-            panel.addText("Track", "", null)
+            panel.addText("Track", trackName, null)
             panel.addText("Text", "Lexgui.js @evallsg", null, {placeholder: "e.g. ColorPicker", icon: "fa fa-font"});
             panel.addColor("Font Color", [0.1, 0.1, 0.8], (value, event) => {
                 console.log("Font Color: ", value);
@@ -119,8 +122,9 @@
             panel.addNumber("Font Size", 36, (value, event) => {
                 console.log(value);
             }, { min: 1, max: 48, step: 1});
-            panel.addVector2("2D Position", [250, 350], (value, event) => {
-                console.log(value);
+            panel.addVector2("2D Position", position, (value, event) => {
+           
+                activeTimeline.updateSelectedKeyframe(value);
             }, { min: 0, max: 1024 });
             panel.branch_open = true;
             panel.merge();
@@ -185,8 +189,8 @@
             });
 
             keyframesPanel.attach(kfTimeline.root);
-            kfTimeline.setSelectedItems(["Item 1", "Item 2", "Item 3"]);
-            kfTimeline.setAnimationClip({tracks: [{name: "Item 1.position", values: [250, 350, 250, 250, 250, 350], 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,1,0], times: [0, 0.1, 0.2, 0.3]}, {name: "Item 3.scale", values: [0,1,0], times: [0, 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();
             
@@ -197,26 +201,37 @@
                     return;
                 }
                 rightArea.show();
-                let id = data.track.idx;
+                trackName = data.track.name;
+                if( trackName != "Font" || data.track.type != "position") {
+                    return
+                }
+                const id = data.track.clipIdx;
                 let values = kfTimeline.animationClip.tracks[id].values;
-                panel.setValue("Track", data.track.name)
-                panel.setValue("2D Position", values.slice(keyFrameIndex, keyFrameIndex+2))
+                const dim = kfTimeline.animationClip.tracks[id].dim;
+                
+                position = values.slice(keyFrameIndex * dim, keyFrameIndex * dim + dim);
+                fillPanel(panel);
                 //kfTimeline.animationClip.tracks[currentSelection[0][0]];
             }
             
             kfTimeline.onSetTime = ( time ) => {
                 rightArea.show();
-                let keyframes = kfTimeline.getKeyFramesInRange(kfTimeline.animationClip.tracks[0], time , time, 0.15);
-
+                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[keyframes[0] * 2];
-                let valueY = values[keyframes[0] * 2 + 1];
-                if(keyframes.length > 1) {
-                    let t = Math.abs(kfTimeline.animationClip.tracks[0].times[keyframes[0] * 2] - time);
-                    valueX =  valueX * (1 - t) + values[keyframes[1] * 2] * t;                    
-                    valueY =  valueY * (1 - t) + values[keyframes[1] * 2 + 1] * t;                    
+                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;                                        
+                    }
                 }
-                panel.setValue("2D Position", [valueX, valueY]);
+                position = [valueX, valueY];
+                fillPanel( panel );
             }
         }
 
@@ -267,10 +282,10 @@
 
             }});
 
-            let curvesTimeline = new LX.CurvesTimeline("curves-timeline", { range: [-1,1]});
+            let curvesTimeline = new LX.CurvesKeyFramesTimeline("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,0,1], times: [0, 0.1, 0.2, 0.3]}, {name: "Item 3.scale", values: [0,1,0], times: [0, 0.1, 0.2, 0.3]}], duration: 1});
+            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.show();
             curvesTimeline.draw(0);
         }

package/examples/video_editor.html

@@ -17,19 +17,36 @@
 <body></body>
     <script type="module">
 
-        import { LX } from 'lexgui';
-        import { VideoEditor } from 'lexgui/components/videoeditor.js';
-        // init library and get main area
-        let area = LX.init();
-            
-        // split main area
-        let [leftArea, rightArea] = area.split({sizes:["75%","25%"], minimizable: true});
-        area.extend();
-        
-        let videoEditor = new LX.VideoEditor(leftArea, { src: "../data/video.mp4"})
-        
-        let panel = new LX.Panel();
-        panel = rightArea.addPanel(panel);        
+      import { LX } from 'lexgui';
+      import { VideoEditor } from 'lexgui/components/videoeditor.js';
+      // init library and get main area
+      let area = LX.init();
+          
+      // split main area
+      let [leftArea, rightArea] = area.split({sizes:["75%","25%"], minimizable: true});
+      area.extend();
+      
+      const videoArea = new LX.Area({id:'video-area'});
+      const video = document.createElement('video');
+      video.src = "../data/video.mp4";
+      videoArea.attach(video);
+
+      const videoEditor = new LX.VideoEditor(leftArea, {videoArea, video})
+      
+      const canvas = document.createElement('canvas');
+      canvas.width = video.clientWidth;
+      canvas.height = video.clientHeight;
+      const ctx = canvas.getContext("2d");
+      ctx.fillStyle = LX.getThemeColor("global-selected-light");
+      ctx.font = "40px Arial";
+      ctx.fillText("I'm a canvas above the video!", canvas.width/2, 100);
+      
+      canvas.style.position = "absolute";
+      canvas.style.left = "0";
+      videoArea.attach(canvas);
+
+      let panel = new LX.Panel();
+      panel = rightArea.addPanel(panel);        
   
     </script>
 </html>

package/examples/video_editor2.html

@@ -0,0 +1,118 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+    <title>LexGUI Video Editor Demo</title>
+    <link rel="stylesheet" href="../build/lexgui.css">
+    <link rel="icon" href="../images/icon.png">
+    <script type="importmap">
+        {
+          "imports": {
+            "lexgui": "../build/lexgui.module.js",
+            "lexgui/components/": "../build/components/"
+          }
+        }
+    </script>
+</head>
+<body></body>
+    <script type="module">
+
+      import { LX } from 'lexgui';
+      import { VideoEditor } from 'lexgui/components/videoeditor.js';
+      
+      // Init library and get main area
+      let area = LX.init();
+      const menubar = area.addMenubar( m => {
+        m.setButtonImage("Page", "../data/godot_pixelart.png", null, {float: "left"});
+      });
+          
+      // Split main area
+      let [leftArea, rightArea] = area.split({sizes:["75%","25%"], minimizable: true});
+      let [topArea, bottomArea] = leftArea.split({sizes:["90%", null], minimizable: false, resize: false, type: "vertical"});
+      area.extend();
+      
+      /* Create video area with a menubar */
+      const videoArea = new LX.Area({id:'video-area'});
+      
+      /* Add video editor with the video into the area*/
+      const video = document.createElement('video');
+      video.src = "../data/video.mp4";
+      videoArea.attach(video);
+      const videoEditor = new LX.VideoEditor(topArea, {videoArea, video})
+    
+      /* Add canvas above video */
+      const canvas = document.createElement('canvas');
+      canvas.width = video.clientWidth;
+      canvas.height = video.clientHeight;
+      const ctx = canvas.getContext("2d");
+      ctx.fillStyle = LX.getThemeColor("global-selected-light");
+      ctx.font = "40px Arial";
+      ctx.fillText("I'm a canvas above the video!", canvas.width/2, 100);
+      
+      canvas.style.position = "absolute";
+      canvas.style.left = "0";
+      videoArea.attach(canvas);
+      leftArea.onresize = (size) => {
+        
+        canvas.width = video.clientWidth;
+        canvas.height = video.clientHeight;
+        const ctx = canvas.getContext("2d");
+        ctx.fillStyle = LX.getThemeColor("global-selected-light");
+        ctx.font = "40px Arial";
+        ctx.fillText("I'm a canvas above the video!", canvas.width/2, 100);
+        //videoEditor.timebar.resize(size)
+      }
+
+      /* Add show/hide right panel button*/
+      videoArea.addOverlayButtons([{
+        selectable: true,
+        selected: true,
+        icon: "fa-solid fa-info",
+        name: "Properties",
+        callback: (v, e) => {
+          if(area.split_extended) {
+            area.reduce();
+          }
+          else {
+            area.extend();
+          }
+        }
+      }], {float: 'tvr'});
+
+      let p = bottomArea.addPanel({width: "100%", height: "100%", style: {display: "flex", "flex-direction": "row", "justify-content": "center", "align-content": "flex-start", "flex-wrap": "wrap"}});
+      p.addButton(null, "Trim", (v) => {
+        console.log(videoEditor.getTrimedTimes())
+        
+        videoArea.sections[1].root.resize(["20%", "20%"])
+      }, {width: "100px"})
+      p.addButton(null, null, (v) => {}, {width: "40px", icon: "fa-solid fa-rotate-left"})
+      
+      /* Create right panel */
+      let panel = new LX.Panel({id:"Properties"});
+      panel = rightArea.addPanel({id:"Properties"});    
+      createBlendShapesInspector({"Name 1": 0, "Name 2": 0, "Name 3": 0.5, "Name 4": 0, "Name 5": 1,},
+      {inspector: panel});
+
+      /* Functions */
+      function createBlendShapesInspector(bsNames, options = {}) {
+      
+        let inspector = options.inspector || new LX.Panel({id:"blendshapes-inspector"});
+        
+        if(options.clear) {
+          inspector.clear();
+        }
+            
+        if(inspector.root.id) {
+          inspector.addTitle(inspector.root.id);
+        }
+
+        for(let name in bsNames) {
+            inspector.addProgress(name, bsNames[name], {min: 0, max: 1, low: 0.3, optimum: 1, high: 0.6, editable: options.editable, showNumber: options.showNumber, 
+                callback: (v,e) => {}, 
+                signal: "@on_change_au_" + name});
+        }
+        
+        return inspector;
+      } 
+    </script>
+</html>

package/package.json

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