lexgui 0.1.41 → 0.1.43

package/changelog.md

@@ -1,11 +1,43 @@
 # lexgui.js changelog
 
-## 0.1.42 (dev)
+## 0.1.44 (dev)
 
-## 0.1.41 (master)
+
+
+## 0.1.43 (master)
+
+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`
+- AssetView onRefreshContent option
+
+CodeEditor:
+- Renamed all option parameters (remove snake case).
+- Fixed tab language override.
+- Support addTab() and loadFile() with options (`options.language`)
+- Fixed XML highlighting
+
+Support options.title in Panel.addButton.
+[Area] `options.no_append` -> `options.skipAppend`.
+[Area] `options.skip_default_area` -> `options.skipDefaultArea`.
+Minor bug fixes.
+
+## 0.1.41
 
 AssetView:
-- Renamed all option parameters (remove snake_case).
+- Renamed all option parameters (remove snake case).
 - Support showing `lastModified` file data.
 
 Knob Widget:

package/demo.js

@@ -129,6 +129,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 });
 
@@ -176,18 +182,16 @@ bottom.addMenubar( m => {
             kfTimeline.resize();
         }
         else {
-            kfTimeline = new LX.KeyFramesTimeline("kf-timeline", { width: m.root.clientWidth, height: m.parent.root.parentElement.clientHeight - m.root.clientHeight });
+            kfTimeline = new LX.KeyFramesTimeline("kf-timeline", {
+                onBeforeCreateTopBar: panel => {
+                    panel.addButton('', '<i class="fa fa-wand-magic-sparkles"></i>', ( value, event ) => { });
+                }
+            });
+
             bottom.attach(kfTimeline.root);
             kfTimeline.setSelectedItems(["Item 1", "Item 2", "Item 3"]);
             kfTimeline.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,1,0], 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});
-            
-            kfTimeline.addButtons([
-                { icon: 'fa fa-wand-magic-sparkles', name: 'autoKeyEnabled' },
-                { icon: 'fa fa-filter', name: "optimize", callback: (value, event) => {   kfTimeline.onShowOptimizeMenu(event);}},
-                { icon: 'fa-regular fa-rectangle-xmark', name: 'unselectAll', callback: (value, event) => { kfTimeline.unSelectAllKeyFrames();}}
-            ]);
-            
-            kfTimeline.draw(0);
+            kfTimeline.draw( 0 );
         }
     });
 
@@ -542,7 +546,7 @@ function fillPanel( panel ) {
     }, { padSize: "100px", min: -1, max: 2 });
     panel.addSize("Screen Res", [1280, 720], (value, event) => {
         console.log(value);
-    }, { units: "p" });
+    }, { units: "p", precision: 0 });
 
     const formData = { username: "", password: { value: "", type: "password" } };
     panel.addForm("Test form", formData, (value, event) => {
@@ -703,9 +707,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 );

package/examples/asset_view.html

@@ -42,7 +42,8 @@
             canvas.height = bounding.height;
         };
 
-        let assetView = new LX.AssetView({ 
+        let assetView = new LX.AssetView({
+            // useNativeTitle: true,
             // skipBrowser: true,
             // skipPreview: true,
             // rootPath: "../"
@@ -121,7 +122,7 @@
                     {
                         id: "color.png",
                         type: "image",
-                        src: "https://cdn.icon-icons.com/icons2/2389/PNG/512/unreal_engine_logo_icon_144771.png"
+                        src: "https://cdn2.unrealengine.com/ue-logotype-2023-vertical-white-1686x2048-bbfded26daa7.png"
                     },
                     {
                         id: "demo.js",

package/examples/code_editor.html

@@ -23,9 +23,9 @@
         // init library and get main area
         let area = LX.init();
 
-        const file_explorer = true;
+        const fileExplorer = true;
 
-        if( !file_explorer )
+        if( !fileExplorer )
         {
             var [leftArea, rightArea] = area.split({ sizes:["55%","45%"] });
 
@@ -46,22 +46,27 @@
         }
 
         let editor = new LX.CodeEditor(area, {
-            // allow_add_scripts: false,
+            // allowAddScripts: false,
             // autocomplete: false,
-            // disable_edition: true,
-            file_explorer: file_explorer
+            // disableEdition: true,
+            fileExplorer: fileExplorer
         });
 
         editor.loadFile( "../data/js_sample.js" );
         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" );
         
-        if( !file_explorer )
+        if( !fileExplorer )
         {
             var ctx = canvas.getContext("2d");
             ctx.fillStyle = "#b7a9b1";

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/package.json

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