lexgui 8.1.0 → 8.1.2

package/changelog.md

@@ -2,7 +2,22 @@
 
 ## dev
 
-## 8.1.0 (master)
+## 8.1.2 (master)
+
+Removed legacy code `CurvesTimeline` from `editor.html` example.
+
+VideoEditor:
+- Forced area to have position relative so cropArea is correctly positioned.
+
+Timeline:
+- Autmatically calls `updateTheme` color on instance creation.
+
+## 8.1.1
+
+Fixed Table Component bug when there's a filter but no custom filters.
+Fixed AssetView `onEnterFolder` not allowing async callbacks.
+
+## 8.1.0
 
 AssetView:
 - Added CreateFolder implementation to the MoveItem dialog button.

package/examples/asset-view.html

@@ -201,6 +201,19 @@
         }
     ];
 
+    const fakeServerRequest = function( payload, delay = 800 ) {
+        return new Promise(resolve => {
+            setTimeout(() => {
+                // 70% chance to allow the action
+                const ok = Math.random() > 0.3;
+                resolve({
+                    ok,
+                    reason: ok ? undefined : "Server rejected the operation"
+                });
+            }, delay);
+        });
+    }
+
     // Click events
     {
         assetView.on( "select", ( event, resolve ) => {
@@ -214,9 +227,42 @@
 
     // Folder events
     {
-        assetView.on( "enterFolder", ( event ) => {
+        assetView.on( "enterFolder", async ( event ) => {
             console.log(`Entered ${ event.to.id } folder` );
-        } );
+
+            // const r = await (() => { return new Promise(resolve => {
+            //     setTimeout(() => {
+            //         resolve({
+            //             ok: true
+            //         });
+            //     }, 2000);
+            // }) })();
+
+            // if( r?.ok )
+            // {
+            //     event.to.children = [
+            //         {
+            //             id: "brow_lowerer.png",
+            //             type: "clip",
+            //             src: "../data/brow_lowerer.png",
+            //             metadata: {
+            //                 lastModified: 1740181312813
+            //             }
+            //         },
+            //         {
+            //             id: "brow_lowerer.png",
+            //             type: "clip",
+            //             src: "../data/brow_lowerer.png",
+            //             metadata: {
+            //                 lastModified: 1740181312813
+            //             }
+            //         }
+            //     ]
+            // }
+
+            // return true;
+
+        });
 
         assetView.on( "beforeCreateFolder", ( event, resolve ) => {
             LX.prompt("Perform CreateFolder Action?", "Server Message", () => {

package/examples/editor.html

@@ -258,12 +258,10 @@
 
     var kfTimeline = null;
     var clipsTimeline = null;
-    var curvesTimeline = null;
 
     bottom.onresize = bounding => {
         if (kfTimeline) kfTimeline.resize([bounding.width, bounding.height]);
         if (clipsTimeline) clipsTimeline.resize([bounding.width, bounding.height]);
-        if (curvesTimeline) curvesTimeline.resize([bounding.width, bounding.height]);
     }
 
     // another menu bar
@@ -275,9 +273,6 @@
                 if (el)
                     el.style.display = 'none';
                 el = document.getElementById('clips-timeline');
-                if (el)
-                    el.style.display = 'none';
-                el = document.getElementById('curves-timeline');
                 if (el)
                     el.style.display = 'none';
                 var bottomPanel = document.getElementById('bottom-panel');
@@ -291,9 +286,6 @@
                 if (el)
                     el.style.display = 'none';
                 el = document.getElementById('clips-timeline');
-                if (el)
-                    el.style.display = 'none';
-                el = document.getElementById('curves-timeline');
                 if (el)
                     el.style.display = 'none';
                 var timeline = document.getElementById('kf-timeline');
@@ -330,9 +322,6 @@
                     el.style.display = 'none';
 
                 el = document.getElementById('kf-timeline');
-                if (el)
-                    el.style.display = 'none';
-                el = document.getElementById('curves-timeline');
                 if (el)
                     el.style.display = 'none';
                 var ctimeline = document.getElementById('clips-timeline');
@@ -360,35 +349,7 @@
                     clipsTimeline.draw(0);
                 }
             }
-        },
-        {
-            name: "Curves Timeline", callback: e => {
-                console.log(e);
-                let el = document.getElementById('bottom-panel');
-                if (el)
-                    el.style.display = 'none';
-                el = document.getElementById('kf-timeline');
-                if (el)
-                    el.style.display = 'none';
-                el = document.getElementById('clips-timeline');
-                if (el)
-                    el.style.display = 'none';
-
-                var timeline = document.getElementById('curves-timeline');
-                if (timeline) {
-                    timeline.style.display = 'block';
-                    curvesTimeline.resize();
-                }
-                else {
-                    curvesTimeline = new LX.CurvesTimeline("curves-timeline");
-                    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.setSelectedItems(["Item 1", "Item 2", "Item 3"]);
-                    bottom.attach(curvesTimeline.mainArea);
-                    curvesTimeline.resize();
-                    curvesTimeline.draw(0);
-                }
-            }
-        },
+        }
 
     ]);
 
@@ -398,9 +359,6 @@
 
         if (kfTimeline)
             kfTimeline.resize();
-
-        if (curvesTimeline)
-            curvesTimeline.resize();
     }
 
     var bottomPanel = bottom.addPanel({ id: "bottom-panel" });
@@ -550,9 +508,6 @@
         if (clipsTimeline)
             clipsTimeline.draw();
 
-        if (curvesTimeline)
-            curvesTimeline.draw();
-
         requestAnimationFrame(loop);
     }
 

package/package.json

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