lexgui 0.5.11 → 0.6.0

package/examples/index.html

@@ -23,18 +23,18 @@
         import { LX } from 'lexgui';
 
         // Init library and get main area
-        let area = LX.init();
+        let area = await LX.init();
 
         // Split main area
         let [leftArea, rightArea] = area.split({ sizes: ["20%","80%"], resize: false });
 
         leftArea.root.style.borderRight = "2px solid gray";
-        leftArea.addMenubar( m => {
-            m.add( "Docs v" + LX.version, (v, name) => {
-                location.href = "../docs/";
-            });
-            m.setButtonIcon("Github", "fa-brands fa-github", () => {window.open("https://github.com/jxarco/lexgui.js/")}, { float: "left" });
-        });
+
+        const menubar = leftArea.addMenubar( [
+            { name: "Docs v" + LX.version, callback: (v, name) => { location.href = "../docs/"; } }
+        ] );
+
+        menubar.setButtonIcon("Github", "Github", () => {window.open("https://github.com/jxarco/lexgui.js/")}, { float: "left" });
 
         const examples = [
             'All Widgets',    
@@ -61,7 +61,7 @@
         rightArea.addOverlayButtons([
             {
                 name: "View Source Code",
-                icon: "fa fa-code",
+                icon: "Code",
                 callback: (value, event) => { 
                     const tokens = iframe.src.split('/');
                     window.open("https://github.com/jxarco/lexgui.js/blob/master/examples/" + tokens[tokens.length - 1], '_blank')

package/examples/node_graph.html

@@ -23,7 +23,7 @@
     import 'lexgui/components/nodegraph.js';
 
     // init library and get main area
-    let area = LX.init();
+    let area = await LX.init();
 
     // split main area
     var [topArea, bottomArea] = area.split({ type: 'vertical', sizes: ["25%", "75%"] });

package/examples/side_bar.html

@@ -22,7 +22,7 @@
     import { LX } from 'lexgui';
 
     // init library and get main area
-    let area = LX.init();
+    let area = await LX.init();
 
     area.root.style.width = "100%";
     area.root.style.height = "100%";
@@ -39,24 +39,24 @@
     const actionLogParams = (entryName, event) => { console.log("Action called!", entryName, event) };
 
     window.sidebar = area.addSidebar(m => {
-        m.group("Projects", { icon: "fa fa-plus", callback: (groupName, event) => { console.log(groupName) } });
-        m.add("Getting Started", { icon: "fa fa-cube", callback: logParams });
-        m.add("Getting Started/Installation", { icon: "fa fa-cube", callback: logParams });
-        m.add("Getting Started/Project Structure", { icon: "fa fa-cube", callback: logParams, action: { name: "ShowMenu", callback: actionLogParams, icon: null } });
-        m.add("Building Your Application", { icon: "fa fa-code", callback: logParams, action: { name: "ShowMenu", callback: actionLogParams, icon: null } });
-        m.add("Search Blocks", { icon: "fa fa-search", callback: logParams });
-        m.add("Very loooooooooooooooooooooooong sun", { icon: "fa fa-sun", callback: logParams, action: { name: "ShowMenu", callback: actionLogParams, icon: null } });
+        m.group("Projects", { icon: "Plus", callback: (groupName, event) => { console.log(groupName) } });
+        m.add("Getting Started", { icon: "Box", callback: logParams });
+        m.add("Getting Started/Installation", { icon: "Box", callback: logParams });
+        m.add("Getting Started/Project Structure", { icon: "Box", callback: logParams, action: { name: "ShowMenu", callback: actionLogParams, icon: null } });
+        m.add("Building Your Application", { icon: "Code", callback: logParams, action: { name: "ShowMenu", callback: actionLogParams, icon: null } });
+        m.add("Search Blocks", { icon: "Search", callback: logParams });
+        m.add("Very loooooooooooooooooooooooong sun", { icon: "Sun", callback: logParams, action: { name: "ShowMenu", callback: actionLogParams, icon: null } });
         m.separator();
         m.group("API Reference");
-        m.add("Components", { icon: "fa fa-cube", callback: logParams });
-        m.add("File Conventions", { icon: "fa fa-code", callback: logParams });
-        m.add("Functions", { icon: "fa fa-search", callback: logParams });
-        m.add("CLI", { icon: "fa fa-sun", callback: logParams });
+        m.add("Components", { icon: "Box", callback: logParams });
+        m.add("File Conventions", { icon: "Code", callback: logParams });
+        m.add("Functions", { icon: "Search", callback: logParams });
+        m.add("CLI", { icon: "Sun", callback: logParams });
         m.separator();
         m.group("Architecture");
-        m.add("Accessibility ", { icon: "fa fa-cube", callback: logParams });
-        m.add("Fast Refresh", { icon: "fa fa-code", callback: logParams });
-        m.add("Supported Browsers", { icon: "fa fa-search", callback: logParams });
+        m.add("Accessibility ", { icon: "Box", callback: logParams });
+        m.add("Fast Refresh", { icon: "Code", callback: logParams });
+        m.add("Supported Browsers", { icon: "Search", callback: logParams });
         m.separator();
         m.add("Calendar ", { collapsable: 3 });
         m.add("Personal ", { callback: logParams, type: "checkbox" });

package/examples/timeline.html

@@ -21,7 +21,7 @@
         import { Timeline, KeyFramesTimeline, ClipsTimeline, CurvesTimeline } from 'lexgui/components/timeline.js';
 
         // init library and get main area
-        let area = LX.init();
+        let area = await LX.init();
 
         // split main area
         var [leftArea, rightArea] = area.split({sizes:["75%","25%"]});
@@ -92,7 +92,7 @@
                         
             if(mode == types.KEYFRAMES) {                
                 let ctx = canvas.getContext("2d");
-                ctx.fillStyle = LX.getThemeColor("global-selected-light");
+                ctx.fillStyle = LX.getThemeColor("global-color-accent");
                 ctx.fillRect(0, 0, canvas.width, canvas.height);
                 ctx.font = panel.getValue('Font Size') + "px Monospace";
                 ctx.fillStyle = panel.getValue('Font Color');
@@ -112,10 +112,10 @@
 
         function fillPanel( panel ) {
             panel.clear();
-            panel.branch("Canvas", {icon: "fa-solid fa-palette", filter: true});
-            panel.addColor("Background", LX.getThemeColor("global-selected-light"));
+            panel.branch("Canvas", {icon: "Palette", filter: true});
+            panel.addColor("Background", LX.getThemeColor("global-color-accent"));
             panel.addText("Track", trackName, null)
-            panel.addText("Text", "Lexgui.js @evallsg", null, {placeholder: "e.g. ColorPicker", icon: "fa fa-font"});
+            panel.addText("Text", "Lexgui.js @evallsg", null, {placeholder: "e.g. ColorPicker", icon: "Type"});
             panel.addColor("Font Color", { r: 1, g: 0.1, b: 0.6 }, (value, event) => {
                 console.log("Font Color: ", value);
             });
@@ -147,7 +147,7 @@
                 return;
             }
 
-            panel.branch(clip.name || "Clip", {icon: "fa-solid fa-clip", filter: true});
+            panel.branch(clip.name || "Clip", {filter: true});
             panel.addNumber("Start", clip.start, (v) => {
                 const diff = v - clip.start;
                 clip.start = v;    
@@ -191,12 +191,12 @@
                     panel.addSelect("Animation", ["Anim 1", "Anim 2", "Anim 3"], "Anim 1", ()=> {})
                 },
                 onAfterCreateTopBar: (panel) => {
-                    panel.addButton("autoKeyEnabled", "autoKeyEnable", null, { icon: 'fa fa-wand-magic-sparkles', hideName: true });
-                    panel.addButton("unselectAll", "unselectAll", (value, event) => { kfTimeline.unSelectAllKeyFrames();}, { icon: 'fa-regular fa-rectangle-xmark', hideName: true, callback: (value, event) => { kfTimeline.unSelectAllKeyFrames();} });
+                    panel.addButton("autoKeyEnabled", "autoKeyEnable", null, { icon: 'WandSparkles', hideName: true });
+                    panel.addButton("unselectAll", "unselectAll", (value, event) => { kfTimeline.unSelectAllKeyFrames();}, { icon: 'X', hideName: true, callback: (value, event) => { kfTimeline.unSelectAllKeyFrames();} });
                 }
             });
 
-            keyframesPanel.attach(kfTimeline.root);
+            keyframesPanel.attach(kfTimeline.mainArea);
             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"]);
             activeTimeline = kfTimeline;

package/examples/video_editor.html

@@ -22,7 +22,7 @@
     import { LX } from 'lexgui';
     import { VideoEditor } from 'lexgui/components/videoeditor.js';
     // init library and get main area
-    let area = LX.init();
+    let area = await LX.init();
 
     // split main area
     let [leftArea, rightArea] = area.split({ sizes: ["75%", "25%"], minimizable: true });

package/examples/video_editor2.html

@@ -23,10 +23,9 @@
     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" });
-    });
+    let area = await LX.init();
+    const menubar = area.addMenubar();
+    menubar.setButtonImage("Page", "../data/godot_pixelart.png", null, { float: "left" });
 
     // Split main area
     let [leftArea, rightArea] = area.split({ sizes: ["75%", "25%"], minimizable: true });
@@ -69,7 +68,7 @@
     videoArea.addOverlayButtons([{
         selectable: true,
         selected: true,
-        icon: "fa-solid fa-info",
+        icon: "Info",
         name: "Properties",
         callback: (v, e) => {
             if (area.split_extended) {
@@ -87,7 +86,7 @@
 
         videoArea.sections[1].root.resize(["20%", "20%"])
     }, { width: "100px" })
-    p.addButton(null, null, (v) => { }, { width: "40px", icon: "fa-solid fa-rotate-left" })
+    p.addButton(null, null, (v) => { }, { width: "40px", icon: "RotateLeft" })
 
     /* Create right panel */
     let panel = new LX.Panel({ id: "Properties" });

package/package.json

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