npm - lexgui - Versions diffs - 0.1.31 → 0.1.33 - Mend

lexgui 0.1.31 → 0.1.33

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/build/components/timeline.js +2619 -1677
package/build/components/videoeditor.js +630 -0
package/build/lexgui.css +110 -4
package/build/lexgui.js +335 -282
package/build/lexgui.module.js +307 -232
package/changelog.md +18 -0
package/examples/index.html +2 -1
package/examples/timeline.html +294 -0
package/examples/video_editor.html +52 -0
package/examples/video_editor2.html +118 -0
package/package.json +1 -1

package/changelog.md CHANGED Viewed

@@ -1,5 +1,23 @@
 # lexgui.js changelog
+## 0.1.33
+- New VideoEditor UI component.
+- Improvements Timeline.
+- Allow to select multiple options in AssetViewer.
+- Minor bug fixes.
+## 0.1.32
+Timeline:
+- Allow addition of widgets in top bar.
+- General improvements.
+- Docs started.
+New VideoEditor component (still wip).
+Added skipCallback for `Widget.set()`.
+Minor bug fixes.
 ## 0.1.31
 GraphEditor:

package/examples/index.html CHANGED Viewed

@@ -50,7 +50,8 @@
             'Dialogs',
             // 'Immediate UI',
             'Node Graph',
-            'Side Bar'
+            'Side Bar',
+            "Timeline"
         ];
         let panel = leftArea.addPanel({ className: "lexexamplespanel" });

package/examples/timeline.html ADDED Viewed

@@ -0,0 +1,294 @@
+<!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 Timelines 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 { Timeline, KeyFramesTimeline, ClipsTimeline, CurvesTimeline, CurvesKeyFramesTimeline } from 'lexgui/components/timeline.js';
+        // init library and get main area
+        let area = LX.init();
+        // split main area
+        var [leftArea, rightArea] = area.split({sizes:["75%","25%"]});
+        // split left area
+        var [upArea, bottomArea] = leftArea.split({ type: 'vertical', sizes:["50%", null], minimizable: true });
+        // add canvas to left upper part
+        var canvas = document.createElement('canvas');
+        canvas.id = "mycanvas";
+        canvas.width = leftArea.root.clientWidth;
+        canvas.height = leftArea.root.clientHeight;
+        canvas.style.width = "100%";
+        canvas.style.height = "100%";
+        upArea.attach(canvas);
+        // add on resize event to control canvas size
+        leftArea.onresize = function( bounding ) {
+            canvas.width = bounding.width;
+            canvas.height = bounding.height;
+        };
+        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);
+        fillPanel( panel );
+        let activeTimeline = null
+        createKyeframeTimeline( bottomTabs );
+        createClipsTimeline( bottomTabs );
+        createCurvesTimeline( bottomTabs );
+        let mode = types.KEYFRAMES;
+        bottomArea.onresize = (size) => {
+            activeTimeline.resize(size);
+        }
+        function loop(dt) {
+            if (!lastTime) {
+                lastTime = dt;
+            }
+            let elapsed = dt - lastTime;
+            lastTime = dt;
+            if(activeTimeline) {
+                activeTimeline.draw();
+                if(activeTimeline.playing) {
+                    activeTimeline.currentTime += elapsed* 0.001;
+                    if(activeTimeline.onSetTime) {
+                        activeTimeline.onSetTime(activeTimeline.currentTime);
+                    }
+                    if(activeTimeline.currentTime >= activeTimeline.animationClip.duration) {
+                        activeTimeline.currentTime = 0;
+                        if(!activeTimeline.loop) {
+                            activeTimeline.changeState();
+                        }
+                    }
+                }
+            }
+            if(mode == types.KEYFRAMES) {
+                let ctx = canvas.getContext("2d");
+                ctx.fillStyle = LX.getThemeColor("global-selected-light");
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+                ctx.font = panel.getValue('Font Size') + "px Monospace";
+                ctx.fillStyle = panel.getValue('Font Color');
+                // Get values from panel widgets (e.g. position value)
+                const text = panel.getValue('Text');
+                const pos2D = panel.getValue('2D Position');
+                ctx.fillText(text, pos2D[0], pos2D[1]);
+            }
+            requestAnimationFrame(loop);
+        }
+        let lastTime = 0;
+        requestAnimationFrame(loop);
+        // **** **** **** **** **** **** **** **** **** **** **** ****
+        function fillPanel( panel ) {
+            panel.clear();
+            panel.branch("Canvas", {icon: "fa-solid fa-palette", filter: true});
+            panel.addColor("Background", LX.getThemeColor("global-selected-light"));
+            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);
+            });
+            panel.addNumber("Font Size", 36, (value, event) => {
+                console.log(value);
+            }, { min: 1, max: 48, step: 1});
+            panel.addVector2("2D Position", position, (value, event) => {
+                activeTimeline.updateSelectedKeyframe(value);
+            }, { min: 0, max: 1024 });
+            panel.branch_open = true;
+            panel.merge();
+        }
+        function fillClipPanel( panel, clip ) {
+            panel.clear();
+            if(!clip) {
+                return;
+            }
+            panel.branch(clip.name || "Clip", {icon: "fa-solid fa-clip", filter: true});
+            panel.addNumber("Start", clip.start, (v) => {
+                const diff = v - clip.start;
+                clip.start = v;
+                clip.fadein += diff;
+                clip.fadeout += diff;
+                LX.emit("@on_start_change_fadein", clip.fadein);
+                LX.emit("@on_start_change_fadeout", clip.fadeout);
+            }, {step: 0.01});
+            if(clip.fadein != undefined) {
+                panel.addNumber("Fade-In", clip.fadein, (v) => {
+                    clip.fadein = v;
+                }, {min: clip.start, max: clip.fadeout, step: 0.01, signal: "@on_start_change_fadein"});
+            }
+            if(clip.fadeout != undefined) {
+                panel.addNumber("Fade-Out", clip.fadeout, (v) => {
+                    clip.fadeout = v;
+                }, {min: clip.fadein, max: clip.start + clip.duration, step: 0.01, signal: "@on_start_change_fadeout"});
+            }
+            panel.addNumber("Duration", clip.duration, (v) => {
+                clip.duration = v;
+            }, {step: 0.01});
+            panel.merge();
+        }
+        function createKyeframeTimeline( bottomTabs ) {
+            let keyframesPanel = new LX.Panel();
+            bottomTabs.add( "Keyframes", keyframesPanel, {onSelect: () => {
+                activeTimeline = kfTimeline;
+                kfTimeline.show();
+                fillPanel(panel);
+                mode = types.KEYFRAMES;
+            }} );
+            keyframesPanel.onresize = () => {
+                kfTimeline.resize();
+            }
+            let kfTimeline = new LX.KeyFramesTimeline('', {
+                disableNewTracks: true,
+                onBeforeCreateTopBar: (panel) => {
+                    panel.addDropdown("Animation", ["Anim 1", "Anim 2", "Anim 3"], "Anim 1", ()=> {})
+                },
+                onAfterCreateTopBar: (panel) => {
+                    panel.addButton("", "autoKeyEnable", null, { icon: 'fa fa-wand-magic-sparkles', name: 'autoKeyEnabled', width: "40px" });
+                    panel.addButton("", "unselectAll", (value, event) => { kfTimeline.unSelectAllKeyFrames();}, { icon: 'fa-regular fa-rectangle-xmark', name: 'unselectAll', callback: (value, event) => { kfTimeline.unSelectAllKeyFrames();}, width: "40px"});
+                }
+            });
+            keyframesPanel.attach(kfTimeline.root);
+            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) => {
+                if(data.multipleSelection) {
+                    rightArea.hide();
+                    return;
+                }
+                rightArea.show();
+                trackName = data.track.name;
+                if( trackName != "Font" || data.track.type != "position") {
+                    return
+                }
+                const id = data.track.clipIdx;
+                let values = kfTimeline.animationClip.tracks[id].values;
+                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();
+                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;
+                    }
+                }
+                position = [valueX, valueY];
+                fillPanel( panel );
+            }
+        }
+        function createClipsTimeline( bottomTabs ) {
+            let clipsPanel = new LX.Panel();
+            bottomTabs.add( "Clips", clipsPanel, {onSelect: () => {
+                activeTimeline = clipsTimeline;
+                clipsTimeline.show();
+                panel.clear();
+                mode = types.CLIPS;
+            }});
+            let clipsTimeline = new LX.ClipsTimeline("clips-timeline");
+            clipsPanel.attach(clipsTimeline.root);
+            let clip = {id:"Clip 1", start:0, duration:1, type:""};
+            clipsTimeline.addClip(clip);
+            clip = {id:"Clip 2", start:0, fadein: 0.5, fadeout: 0.8, duration:1, type:""};
+            clipsTimeline.addClip(clip);
+            clip = {id:"Clip 3", start:0, fadein: 0.5, fadeout: 0.8, duration:1, type:""};
+            clipsTimeline.addClip(clip);
+            clip = {id:"Clip 4", start:0, fadein: 0.5, fadeout: 0.8, duration:1, type:""};
+            clipsTimeline.addClip(clip);
+            clip = {id:"Clip 5", start:0, fadein: 0.5, fadeout: 0.8, duration:1, type:""};
+            clipsTimeline.addClip(clip);
+            // clipsTimeline.setAnimationClip({tracks: [{clips: [clip]}], duration: 2});
+            clipsTimeline.selectedItems = ["Clip 1"];
+            clipsTimeline.show();
+            clipsTimeline.onSelectClip = (clip) => {
+                rightArea.show();
+                fillClipPanel(panel, clip);
+            }
+            clipsTimeline.draw(0);
+        }
+        function createCurvesTimeline( bottomTabs ) {
+            let curvesPanel = new LX.Panel();
+            bottomTabs.add( "Curves", curvesPanel, {onSelect: () => {
+                activeTimeline = curvesTimeline;
+                curvesTimeline.show();
+                panel.clear();
+                mode = types.CLIPS;
+            }});
+            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,1], times: [0]}, {name: "Item 3.scale", values: [0,1,0], times: [0, 0.1, 0.3]}], duration: 1});
+            curvesTimeline.show();
+            curvesTimeline.draw(0);
+        }
+    </script>
+</html>

package/examples/video_editor.html ADDED Viewed

@@ -0,0 +1,52 @@
+<!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();
+      // 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 ADDED Viewed

@@ -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 CHANGED Viewed

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