lexgui 0.6.11 → 0.7.0

package/examples/editor.html

@@ -6,13 +6,13 @@
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <title>LexGUI Editor demo</title>
     <link rel="stylesheet" href="../build/lexgui.css">
-    <link rel="icon" href="../images/icon.png">
+    <link rel="icon" href="../images/favicon.png">
 
     <script type="importmap">
         {
           "imports": {
             "lexgui": "../build/lexgui.module.js",
-            "lexgui/components/": "../build/components/"
+            "lexgui/extensions/": "../build/extensions/"
           }
         }
     </script>
@@ -26,9 +26,9 @@
 <script type="module">
 
     import { LX } from 'lexgui';
-    import 'lexgui/components/codeeditor.js';
-    import 'lexgui/components/timeline.js';
-    import 'lexgui/components/audio.js';
+    import 'lexgui/extensions/codeeditor.js';
+    import 'lexgui/extensions/timeline.js';
+    import 'lexgui/extensions/audio.js';
 
     window.LX = LX;
 
@@ -121,7 +121,7 @@
                         { name: "GLTF", kbd: "G" }
                     ]
                 },
-                { name: "Export", icon: "Download" }
+                { name: "Download", icon: "Download" }
             ]
         },
         {
@@ -130,7 +130,7 @@
                 {
                     name: "Settings", icon: "Settings2", callback: () => {
                         const dialog = new LX.Dialog("Settings", p => {
-                            p.addText("A Text", "Testing first widget");
+                            p.addText("A Text", "Testing first Component");
                             p.sameLine(3);
                             p.addLabel("Buttons:");
                             p.addButton(null, "Click me", () => {
@@ -234,11 +234,20 @@
             icon: starterTheme == "dark" ? "Moon" : "Sun",
             swap: starterTheme == "dark" ? "Sun" : "Moon",
             callback: (value, event) => { LX.switchTheme() }
+        },
+        {
+            title: "Switch Spacing",
+            icon: "AlignVerticalSpaceAround",
+            callback:  (value, event) => { LX.switchSpacing() }
         }
     ]);
 
     menubar.setButtonIcon("Github", "Github@solid", () => { window.open("https://github.com/jxarco/lexgui.js/") })
-    menubar.setButtonImage("lexgui.js", "../images/icon.png", () => { window.open("https://jxarco.github.io/lexgui.js/") }, { float: "left" })
+    menubar.setButtonImage("lexgui.js", `../images/icon_small_${ starterTheme }.png`, () => { window.open("https://jxarco.github.io/lexgui.js/") }, { float: "left" } );
+
+    LX.addSignal( "@on_new_color_scheme", ( el, value ) => {
+        menubar.setButtonImage( "lexgui.js", `../images/icon_small_${ value }.png` );
+    } );
 
     // split main area
     var [left, right] = area.split({ sizes: ["70%", "30%"], minimizable: true });
@@ -522,7 +531,7 @@
 
         var ctx = canvas.getContext("2d");
 
-        // Get values from panel widgets (e.g. color value)
+        // Get values from panel components (e.g. color value)
         ctx.fillStyle = sidePanel.getValue('Background');
 
         ctx.fillRect(0, 0, canvas.width, canvas.height);
@@ -657,7 +666,7 @@
             }
         });
 
-        // add widgets to panel branch
+        // add components to panel branch
         panel.branch("Canvas", { icon: "Palette", filter: true });
         panel.addColor("Background", "#b7a9b1", (value, event) => {
             console.log(value);
@@ -837,9 +846,9 @@
                 }
             ], { vertical: false /*, showNames: true */ });
 
-            panel.addText(null, "Widgets below are out the tabs", null, { disabled: true })
+            panel.addText(null, "Component below are out the tabs", null, { disabled: true })
 
-            // update panel values uising widget name
+            // update panel values uising component name
             panel.addNumber("HeadRoll Value", 0, (value, event) => {
                 panel.setValue('HeadRoll', value);
             }, { min: -1, max: 1, step: 0.1 });
@@ -882,9 +891,9 @@
             ]);
 
             /************** */
-            // Custom Widget
+            // Custom Component
 
-            LX.ADD_CUSTOM_WIDGET("Shader", {
+            LX.ADD_CUSTOM_COMPONENT("Shader", {
                 icon: "Box",
                 default: {
                     position: [0, 0],
@@ -911,9 +920,9 @@
 
     function fillBottomPanel(panel) {
 
-        // add widgets to panel branch
+        // add components to panel branch
         panel.branch("Information", { icon: "Info" });
-        window.tableWidget = panel.addTable("A Table", {
+        window.tableComponent = panel.addTable("A Table", {
             head: ["Name", "Status", "Priority", "ID"],
             body: [
                 ["Alice", "In Progress", "High", 1],
@@ -946,7 +955,7 @@
                     {
                         name: "Export", callback: (a) => {
                             tableData.body[index][0] = "Alex";
-                            tableWidget.refresh();
+                            tableComponent.refresh();
                         }
                     },
                     { name: "Make a copy", callback: (a) => console.log(a) },
@@ -1103,7 +1112,7 @@
                         break;
                 }
             })
-        }, { title: 'Lexemes', close: true, minimize: false, size: ["80%"], scroll: true, resizable: true, draggable: true });
+        }, { modal: true, title: 'Lexemes', close: true, minimize: false, size: ["80%"], scroll: true, resizable: true, draggable: true });
     }
 
 </script>

package/examples/{immediate_ui.html → immediate-ui.html}

@@ -5,12 +5,12 @@
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <title>LexGUI ImUI Demo</title>
     <link rel="stylesheet" href="../build/lexgui.css">
-    <link rel="icon" href="../images/icon.png">
+    <link rel="icon" href="../images/favicon.png">
     <script type="importmap">
         {
           "imports": {
             "lexgui": "../build/lexgui.module.js",
-            "lexgui/components/": "../build/components/"
+            "lexgui/extensions/": "../build/extensions/"
           }
         }
     </script>
@@ -20,7 +20,7 @@
 <script type="module">
 
     import { LX } from 'lexgui';
-    import 'lexgui/components/imui.js';
+    import 'lexgui/extensions/imui.js';
 
     // init library and get main area
     let area = await LX.init();

package/examples/index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <title>Examples - LexGUI.js </title>
     <link rel="stylesheet" href="../build/lexgui.css">
-    <link rel="icon" href="../images/icon.png">
+    <link rel="icon" href="../images/favicon.png">
     <style>
         iframe { border: none; }
     </style>
@@ -13,7 +13,7 @@
         {
           "imports": {
             "lexgui": "../build/lexgui.module.js",
-            "lexgui/components/": "../build/components/"
+            "lexgui/extensions/": "../build/extensions/"
           }
         }
     </script>
@@ -29,7 +29,7 @@
 
         const mobile = navigator && /Android|iPhone/i.test( navigator.userAgent );
         const examples = [
-            'All Widgets',    
+            'All Components',
             'Area Tabs',
             'Asset View',
             'Code Editor',
@@ -57,7 +57,7 @@
         if( mobile )
         {
             const sheetArea = new LX.Area({ skipAppend: true });
-            panel = sheetArea.addPanel();
+            panel = sheetArea.addPanel({ className: "flex flex-col gap-2" });
             iFrameArea = area;
 
             overlayButtons.splice( 0, 0, {
@@ -70,7 +70,7 @@
         }
         else
         {
-            let [ leftArea, rightArea ] = area.split({ sizes: ["20%","80%"], resize: false });
+            let [ leftArea, rightArea ] = area.split({ sizes: ["15%","85%"], resize: false });
             leftArea.root.style.borderRight = "2px solid gray";
 
             const menubar = leftArea.addMenubar( [
@@ -78,7 +78,7 @@
             ] );
             menubar.setButtonIcon("Github", "Github", () => {window.open("https://github.com/jxarco/lexgui.js/")}, { float: "left" });
 
-            panel = leftArea.addPanel();
+            panel = leftArea.addPanel({ className: "flex flex-col gap-1" });
             iFrameArea = rightArea;
         }
 
@@ -86,7 +86,7 @@
 
         let iframe = document.createElement('iframe');
         iframe.id = iframe.name = 'viewer';
-        iframe.src = examples[0].replace(" ", "_").toLowerCase() + ".html";
+        iframe.src = examples[0].replace(" ", "-").toLowerCase() + ".html";
         iframe.style.width = "100%";
         iframe.style.height = "100%";
         iFrameArea.root.appendChild(iframe);
@@ -101,7 +101,7 @@
 
             for( let ex of examples )
             {
-                const id = ex.replace(" ", "_").toLowerCase();
+                const id = ex.replace(" ", "-").toLowerCase();
                 const options = {
                     img: "previews/" + id + ".png",
                     callback: function() {

package/examples/{node_graph.html → node-graph.html}

@@ -5,12 +5,12 @@
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <title>LexGUI Node Graph Demo</title>
     <link rel="stylesheet" href="../build/lexgui.css">
-    <link rel="icon" href="../images/icon.png">
+    <link rel="icon" href="../images/favicon.png">
     <script type="importmap">
         {
           "imports": {
             "lexgui": "../build/lexgui.module.js",
-            "lexgui/components/": "../build/components/"
+            "lexgui/extensions/": "../build/extensions/"
           }
         }
     </script>
@@ -20,7 +20,7 @@
 <script type="module">
 
     import { LX } from 'lexgui';
-    import 'lexgui/components/nodegraph.js';
+    import 'lexgui/extensions/nodegraph.js';
 
     // init library and get main area
     let area = await LX.init();

package/examples/{side_bar.html → side-bar.html}

@@ -5,12 +5,12 @@
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <title>LexGUI Area Tabs Demo</title>
     <link rel="stylesheet" href="../build/lexgui.css">
-    <link rel="icon" href="../images/icon.png">
+    <link rel="icon" href="../images/favicon.png">
     <script type="importmap">
         {
           "imports": {
             "lexgui": "../build/lexgui.module.js",
-            "lexgui/components/": "../build/components/"
+            "lexgui/extensions/": "../build/extensions/"
           }
         }
     </script>
@@ -65,7 +65,7 @@
     }, {
         headerTitle: "jxarco",
         headerSubtitle: "alexroco.30@gmail.com",
-        headerImage: "https://raw.githubusercontent.com/jxarco/lexgui.js/refs/heads/master/images/icon.png",
+        headerImage: "https://raw.githubusercontent.com/jxarco/lexgui.js/refs/heads/master/images/favicon.png",
         footerTitle: "jxarco",
         footerSubtitle: "alexroco.30@gmail.com",
         footerImage: "https://avatars.githubusercontent.com/u/25059187?s=400&u=ad8907b748c13e4e1a7cdd3882826acb6a2928b5&v=4",

package/examples/timeline.html

@@ -4,12 +4,12 @@
     <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">
+    <link rel="icon" href="../images/favicon.png">
     <script type="importmap">
         {
           "imports": {
             "lexgui": "../build/lexgui.module.js",
-            "lexgui/components/": "../build/components/"
+            "lexgui/extensions/": "../build/extensions/"
           }
         }
     </script>
@@ -18,7 +18,7 @@
     <script type="module">
 
         import { LX } from 'lexgui';
-        import { Timeline, KeyFramesTimeline, ClipsTimeline } from 'lexgui/components/timeline.js';
+        import { Timeline, KeyFramesTimeline, ClipsTimeline } from 'lexgui/extensions/timeline.js';
 
         // init library and get main area
         let area = await LX.init();
@@ -97,7 +97,7 @@
                 ctx.font = panel.getValue('Font Size') + "px Monospace";
                 ctx.fillStyle = panel.getValue('Font Color');
     
-                // Get values from panel widgets (e.g. position value)                
+                // Get values from panel component (e.g. position value)
                 const text = panel.getValue('Text');
                 const pos2D = panel.getValue('2D Position');
                 ctx.fillText(text, pos2D[0], pos2D[1]);
@@ -213,7 +213,7 @@
                 },
                 onCreateAfterTopBar: (panel) => {
                     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();} });
+                    panel.addButton("deselectAll", "deselectAll", (value, event) => { kfTimeline.deselectAllKeyFrames();}, { icon: 'X', hideName: true, callback: (value, event) => { kfTimeline.deselectAllKeyFrames();} });
                 }
             });
 

package/examples/{video_editor.html → video-editor.html}

@@ -5,12 +5,12 @@
     <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">
+    <link rel="icon" href="../images/favicon.png">
     <script type="importmap">
         {
           "imports": {
             "lexgui": "../build/lexgui.module.js",
-            "lexgui/components/": "../build/components/"
+            "lexgui/extensions/": "../build/extensions/"
           }
         }
     </script>
@@ -20,7 +20,7 @@
 <script type="module">
 
     import { LX } from 'lexgui';
-    import { VideoEditor } from 'lexgui/components/videoeditor.js';
+    import { VideoEditor } from 'lexgui/extensions/videoeditor.js';
     // init library and get main area
     let area = await LX.init();
 

package/examples/{video_editor2.html → video-editor2.html}

@@ -5,12 +5,12 @@
     <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">
+    <link rel="icon" href="../images/favicon.png">
     <script type="importmap">
         {
           "imports": {
             "lexgui": "../build/lexgui.module.js",
-            "lexgui/components/": "../build/components/"
+            "lexgui/extensions/": "../build/extensions/"
           }
         }
     </script>
@@ -20,7 +20,7 @@
 <script type="module">
 
     import { LX } from 'lexgui';
-    import { VideoEditor } from 'lexgui/components/videoeditor.js';
+    import { VideoEditor } from 'lexgui/extensions/videoeditor.js';
 
     // Init library and get main area
     let area = await LX.init();

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lexgui",
-    "version": "0.6.11",
+    "version": "0.7.0",
     "description": "JS library to create web graphical user interfaces",
     "type": "module",
     "main": "./build/lexgui.js",
@@ -11,7 +11,7 @@
     },
     "files": [
         "build",
-        "build/components",
+        "build/extensions",
         "examples",
         "LICENSE",
         "package.json",