lexgui 0.1.43 → 0.1.44

package/changelog.md

@@ -1,10 +1,22 @@
 # lexgui.js changelog
 
-## 0.1.44 (dev)
+## 0.1.45 (dev)
 
+## 0.1.44 (master)
 
+VideoEditor:
+- Support cropping video area.
 
-## 0.1.43 (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.

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",
@@ -480,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});
 
@@ -548,11 +551,6 @@ function fillPanel( panel ) {
         console.log(value);
     }, { units: "p", precision: 0 });
 
-    const formData = { username: "", password: { value: "", type: "password" } };
-    panel.addForm("Test form", formData, (value, event) => {
-        console.log(value);
-    }, { actionName: "Login" });
-
     // another branch
     panel.branch("Canvas", {icon: "fa-solid fa-palette", filter: true});
     panel.addColor("Background", "#b7a9b1");
@@ -631,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);
         } });
     }
@@ -671,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 );
 
         /************** */
     }
@@ -722,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) => {
@@ -788,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/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.43",
+    "version": "0.1.44",
     "description": "JS library to create web graphical user interfaces",
     "type": "module",
     "main": "./build/lexgui.js",