lexgui 0.1.42 → 0.1.44

package/changelog.md

@@ -1,10 +1,35 @@
 # lexgui.js changelog
 
-## 0.1.43 (dev)
+## 0.1.45 (dev)
 
+## 0.1.44 (master)
 
+VideoEditor:
+- Support cropping video area.
 
-## 0.1.42 (master)
+Added new `Toggle` Widget (same usage as Checkbox).
+Adding support for inline HTML badges `LX.badge(text)`.
+Checkbox, Progressbar, FileInput css updated.
+Improved Form widget.
+Begin support for light-scheme appearance.
+Fix ContextMenu position when scroll > 0.
+Minor bug fixes.
+Docs Updated.
+
+## 0.1.43
+
+CodeEditor:
+- Support C and CMake highlight.
+- Support C/C++ header files highlighting.
+
+Support `options.skipRoot` on LX.init.
+Support lock aspect ratio in Panel.addSize
+Improved CSS for overlay buttons `Area.addOverlayButtons`.
+Docs Updated. Add interactive widget examples.
+Minor CSS general changes.
+Minor bug fixes.
+
+## 0.1.42
 
 AssetView:
 - Support custom element title on hover for Content layout mode `options.useNativeTitle`

package/demo.js

@@ -81,12 +81,8 @@ area.addMenubar( m => {
 
         }, { size: ["30%", null], float: "right", draggable: false});
     }} );
-    m.add( "Editor/Open AssetView", { icon: "fa-solid fa-rect", callback: () => {
-        createAssetDialog();
-    }} );
-    m.add( "Help/Search Help", { icon: "fa-solid fa-magnifying-glass", short:  "F1", callback: () => { window.open("./docs/") }});
-    m.add( "Help/Support LexGUI/Please", { icon: "fa-solid fa-heart" } );
-    m.add( "Help/Support LexGUI/Do it" );
+    m.add( "Editor/Open AssetView", { icon: "fa-solid fa-rect", callback: () => { createAssetDialog(); }} );
+    m.add( "Account/Login", { icon: "fa-solid fa-user", callback: () => { createLoginForm(); }} );
     m.add( "Timeline/Shortcuts", { disabled: true });
     m.add( "Timeline/Shortcuts/Play-Pause", { short: "SPACE" });
     m.add( "Timeline/Shortcuts/Zoom", { short: "Wheel" });
@@ -100,6 +96,9 @@ area.addMenubar( m => {
     m.add( "Timeline/Shortcuts/Key Selection/Single", { short: "Left Click" });
     m.add( "Timeline/Shortcuts/Key Selection/Multiple", { short: "Hold LSHIFT" });
     m.add( "Timeline/Shortcuts/Key Selection/Box", { short: "Hold LSHIFT+Drag" });
+    m.add( "Help/Search Help", { icon: "fa-solid fa-magnifying-glass", short:  "F1", callback: () => { window.open("./docs/") }});
+    m.add( "Help/Support LexGUI/Please", { icon: "fa-solid fa-heart" } );
+    m.add( "Help/Support LexGUI/Do it" );
     m.addButtons( [
         {
             title: "Play",
@@ -129,6 +128,12 @@ area.addMenubar( m => {
 // split main area
 var [left, right] = area.split({ sizes:["80%","20%"], minimizable: true });
 
+// left.addSidebar( m => {
+//     m.add( "Scene", { icon: "fa fa-cube", callback: () => {  } } );
+//     m.add( "Code", { icon: "fa fa-code", callback: () => {  } } );
+//     m.add( "Search", { icon: "fa fa-search", bottom: true, callback: () => { } } );
+// });
+
 // split left area
 var [up, bottom] = left.split({ type: 'vertical', sizes:["50%", null], minimizable: true });
 
@@ -474,15 +479,19 @@ function fillPanel( panel ) {
 
     // add widgets to panel branch
     panel.branch("Preferences", {icon: "fa-solid fa-gear"});
-    panel.addButton(null, "Click me, Im Full Width...");
+    panel.addButton(null, "Show Notifications" + LX.badge("+99", "accent sm"));
     panel.addText("Text", "Warning text", null, { warning: true });
-    panel.sameLine(2);
-    panel.addFile("Img1", data => { console.log(data) }, {} );
-    panel.addFile("Img2", data => { console.log(data) }, {} );
+    panel.addCheckbox("Check me, Please", false, (value, event) => {
+        console.log(value);
+    }, { className: "secondary" });
+    panel.addToggle("Toggle me, Please", false, (value, event) => {
+        console.log(value);
+    }, { className: "accent" });
+    panel.addFile("I'm a File Input", data => { console.log(data) }, { disabled: true } );
     panel.addDropdown("Best Engine", ["Godot", "Unity", "Unreal Engine"], "Unity", (value, event) => {
         console.log(value);
     });
-    panel.addDropdown("Best Logo", [{value:"Godot", src: "https://godotengine.org/assets/press/logo_vertical_color_light.webp"}, {value: "Unity", src: "https://logos-world.net/wp-content/uploads/2023/01/Unity-Logo.png"}, {value:"Unreal Engine", src: "https://cdn2.unrealengine.com/ue-logo-stacked-unreal-engine-w-677x545-fac11de0943f.png"}], "Godot", (value, event) => {
+    panel.addDropdown("Best Logo", [{value:"Godot", src: "https://godotengine.org/assets/press/logo_vertical_color_light.png"}, {value: "Unity", src: "https://logos-world.net/wp-content/uploads/2023/01/Unity-Logo.png"}, {value:"Unreal Engine", src: "https://cdn2.unrealengine.com/ue-logo-stacked-unreal-engine-w-677x545-fac11de0943f.png"}], "Godot", (value, event) => {
         console.log(value);
     }, {filter: true});
 
@@ -540,12 +549,7 @@ function fillPanel( panel ) {
     }, { padSize: "100px", min: -1, max: 2 });
     panel.addSize("Screen Res", [1280, 720], (value, event) => {
         console.log(value);
-    }, { units: "p" });
-
-    const formData = { username: "", password: { value: "", type: "password" } };
-    panel.addForm("Test form", formData, (value, event) => {
-        console.log(value);
-    }, { actionName: "Login" });
+    }, { units: "p", precision: 0 });
 
     // another branch
     panel.branch("Canvas", {icon: "fa-solid fa-palette", filter: true});
@@ -625,7 +629,7 @@ function fillRightBottomPanel( panel, tab ) {
         panel.addNumber("HeadRoll Value", 0, (value, event) => {
             panel.setValue('HeadRoll', value);
         }, { min: -1, max: 1, step: 0.1 });
-        panel.addProgress("HeadRoll", 0, { min: -1, max: 1, showValue: true, editable: true, callback: (value, event) => {
+        panel.addProgress("HeadRoll", 0, { min: -1, max: 1, low: -0.25, high: 0.25, optimum: 0.75, showValue: true, editable: true, callback: (value, event) => {
             panel.setValue('HeadRoll Value', value);
         } });
     }
@@ -665,24 +669,24 @@ function fillRightBottomPanel( panel, tab ) {
         /************** */
         // Custom Widget
 
-        LX.ADD_CUSTOM_WIDGET( 'Shader', {
-            // icon: "fa-dice-d6",
+        LX.ADD_CUSTOM_WIDGET( "Shader", {
+            icon: "fa-cube",
             default: {
-                'position': [0, 0],
-                'velocity': [0, 0, 0],
-                'color': [0, 0, 0, 0],
-                'hex_color': '#000',
-                'high_res': false
+                position: [0, 0],
+                velocity: [0, 0, 0],
+                color: [0, 0, 0, 0],
+                hexColor: "#000",
+                highRes: false
             }
         });
 
         const shaderInstance = {
-            'hex_color': '#f5f505',
-            'high_res': true
+            'hexColor': "#f5f505",
+            'highRes': true
         };
 
-        panel.addShader( "PBR Shader", shaderInstance, (instance) => { console.log(instance) } );
-        panel.addShader( "Empty", null );
+        panel.addShader( "A Shader", shaderInstance, (instance) => { console.log(instance) } );
+        panel.addShader( "Empty Instance", null );
 
         /************** */
     }
@@ -701,9 +705,9 @@ function fillBottomPanel( panel ) {
     panel.addTextArea("Notes", "", (value, event) => {
         console.log(value);
     }, { placeholder: 'Some notes...' });
-    panel.addKnob("A Small Knob", 4, 0, 200, value => { console.log( value ) }, { size: 'sm', disabled: true });
+    panel.addKnob("A Small but disabled Knob", 4, 0, 200, value => { console.log( value ) }, { size: 'sm', disabled: true });
     panel.addKnob("A Knob", 4, 0, 200, value => { console.log( value ) } );
-    panel.addKnob("A Big Knob", 4, 0, 200, value => { console.log( value ) }, { size: 'bg', snap: 4 });
+    panel.addKnob("A Big Knob with Snap", 4, 0, 200, value => { console.log( value ) }, { size: 'bg', snap: 4 });
     panel.addButton("Apply", "Add button to branch", (value, event) => {
         const branch = panel.getBranch("Information");
         panel.queue( branch.content );
@@ -716,6 +720,35 @@ function fillBottomPanel( panel ) {
     panel.merge();
 }
 
+function createLoginForm() {
+
+    let dialog = new LX.Dialog('Login', panel => {
+
+        const formData = {
+            Username: {
+                value: "",
+                placeholder: "Enter username",
+                icon: "fa fa-user"
+            },
+            Password: {
+                value: "",
+                type: "password",
+                placeholder: "Enter password",
+                icon: "fa fa-key"
+            }
+        };
+
+        panel.addForm("Test form", formData, (value, event) => {
+            console.log(value);
+        }, { actionName: "Login" });
+
+        panel.addLabel( "Or", { float: 'center' } );
+
+        panel.addButton( null, "Sign up", ( value, event ) => { });
+
+    }, { close: true, minimize: false, size: ["25%"], scroll: true, resizable: true, draggable: true });
+}
+
 function createAssetDialog() {
 
     let dialog = new LX.Dialog('Non Manual Features lexemes', (p) => {
@@ -782,7 +815,6 @@ function createAssetDialog() {
             }
         })
     },{ title:'Lexemes', close: true, minimize: false, size: ["80%"], scroll: true, resizable: true, draggable: true });
- 
-    
 }
-LX.popup("Hello! I'm a popup :)", null, {position: ["50px", "100px"]})
+
+LX.popup("Hello! I'm a popup :)", null, {position: ["50px", "100px"]});

package/examples/asset_view.html

@@ -160,7 +160,7 @@
                         const area = new LX.Area();
                         p.attach( area );
                         let editor = new LX.CodeEditor(area, {
-                            allow_add_scripts: false
+                            allowAddScripts: false
                         });
                         editor.loadFile( event.item.src );
                     }, { size: ["40%", "600px"], closable: true });

package/examples/code_editor.html

@@ -56,10 +56,13 @@
         editor.loadFile( "../data/json_sample.json" );
         editor.loadFile( "../data/css_sample.css" );
         editor.loadFile( "../data/cpp_sample.cpp" );
+        editor.loadFile( "../data/cpp_header_sample.hpp" );
+        editor.loadFile( "../data/c_sample.c" );
         editor.loadFile( "../data/xml_sample.xml" );
         editor.loadFile( "../data/python_sample.py" );
         editor.loadFile( "../data/rust_sample.rs" );
         editor.loadFile( "../data/animation.bml", { language: "JSON" } );
+        editor.loadFile( "../data/CMakeLists.txt", { language: "CMake" } );
         editor.loadFile( "../localhost.bat" );
         editor.loadFile( "../index.html" );
         

package/examples/side_bar.html

@@ -60,12 +60,12 @@
             
             var ctx = canvas.getContext("2d");
 
-            ctx.fillStyle =  "#def698";
+            ctx.fillStyle =  "#b7a9b1";
 
             ctx.fillRect(0, 0, canvas.width, canvas.height);
             ctx.font = "44px Monospace";
 
-            ctx.fillStyle = "#f13523";
+            ctx.fillStyle = "#ff1999";
 
             const text = "lexgui @jxarco";
             const pos2D = [200, 200];

package/examples/video_editor.html

@@ -31,7 +31,7 @@
       video.src = "../data/video.mp4";
       videoArea.attach(video);
 
-      const videoEditor = new LX.VideoEditor(leftArea, {videoArea, video})
+      const videoEditor = new LX.VideoEditor(leftArea, {videoArea, video, crop: true})
       
       const canvas = document.createElement('canvas');
       canvas.width = video.clientWidth;

package/package.json

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