lexgui 0.6.8 → 0.6.10

package/changelog.md

@@ -2,7 +2,48 @@
 
 ## dev
 
-## 0.6.8 (master)
+## 0.6.10 (master)
+
+Timeline:
+- Added support for cloning clips and tracks.
+- Minor fixes.
+
+Widgets:
+- All `Button` widgets have now `setState` method (not only those with `swap` feature).
+- Layers Widget allow `options.maxBits` to specify number of bit layers.
+- If Button is selectable, the `selected` state is not sent to the callback.
+- Fixed Color Picker not updating on change Hex text input.
+- TabSections: Allow `item.selected` option. Add support for `select( tabName )`.
+- Fixed Select Widget positioning when no space above&below.
+
+New `AreaOverlayButtons` to improve management and support changing buttons state.
+Fixed Commandbar error on checking String Menubar items.
+Fixed Asset View custom title overflow.
+Docs updated.
+
+## 0.6.9
+
+Timeline:
+- `addKeyframes` now returns new indices.
+- Fixed fadein/fadeout when one of them doesn't exist.
+- Fix fadeout draw
+- `setClip` now returns the Animation Clip.
+
+Widgets:
+- Added support for `options.iconPosition` in Button Widget (`cover` as default).
+- Fixed rowId in Table Widget.
+- Show "No results." row if no data in Table Widget.
+- Fixed disabled NumberInput slider.
+- TabSections icons can be modified using `iconClass` and `svgClass`.
+- TabSection's `onCreate` now receives also the tab content HTML Container (2nd parameter).
+- Fixed some Delete edge cases (key and ContextMenu) of Tree Widget.
+- Select Widget now allows creating new widgets as suboptions for each select value.
+
+Added support for Area Overlaybuttons separators.
+Fixed Menubar buttons using `float: left` alignment.
+Minor fixes CSS.
+
+## 0.6.8
 
 Widgets:
 - Support `options.onCreate` on register Custom Widget.

package/demo.js

@@ -16,8 +16,8 @@ const area = await LX.init( { layoutMode: "document", rootClass: "wrapper" } );
 
     menubar.setButtonImage("lexgui.js", "images/icon.png", () => {window.open("https://jxarco.github.io/lexgui.js/")}, {float: "left"})
 
-    const commandButton = new LX.Button(null, "Search command...", () => { LX.setCommandbarState( true ) }, {
-        width: "256px", className: "right", buttonClass: "border left fg-tertiary bg-secondary" }
+    const commandButton = new LX.Button(null, `Search command...<span class="ml-auto">${ LX.makeKbd( ["Ctrl", "Space"], false, "bg-tertiary border px-1 rounded" ).innerHTML }</span>`, () => { LX.setCommandbarState( true ) }, {
+        width: "256px", className: "right", buttonClass: "border fg-tertiary bg-secondary" }
     );
     menubar.root.appendChild( commandButton.root );
 

package/examples/all_widgets.html

@@ -224,6 +224,7 @@
             panelB.addNumber("Disabled", 0, null, { disabled: true });
             panelB.addNumber("With Units", 12, null, { units: "px" });
             panelB.addNumber("With Slider", 0, null, { min: 1, max: 48, step: 1 });
+            panelB.addNumber("Disabled Slider", 0, null, { min: 1, max: 48, step: 1, disabled: true });
             panelB.branch("Vector Inputs", { closed: closedDefault });
             panelB.addVector2("Classic Vec2", [0, 0], null);
             panelB.addVector3("Disabled Vec3", [0, 0, 0], null, { disabled: true });
@@ -254,6 +255,9 @@
             panelB.addRange("Disabled", 29, null, { min: 1, max: 48, step: 1, disabled: true });
             panelB.branch("Select Inputs", { closed: closedDefault });
             panelB.addSelect("Classic", selectValues, "Unity", null);
+            panelB.addSelect("With Suboptions", selectValues, "Unity", null, { on_Unity: (p) => {
+                p.addButton("Unity Button", "Click me!", null, { buttonClass: "contrast" });
+            } });
             panelB.addSelect("With Labels", selectValuesWithLabels, "Unity", null);
             panelB.addSelect("With Filter", selectValuesWithLabels, "Godot", null, { filter: true, placeholder: "Search tools..." });
             panelB.addSelect("Custom Empty Msg", selectValuesWithLabels, "Unreal Engine", null, { filter: true, emptyMsg: "No tools found.", placeholder: "Search tools..." });
@@ -290,10 +294,7 @@
                                 'actions': [
                                     {
                                         'name': 'Open script',
-                                        'icon': 'Scroll',
-                                        'callback': function (node) {
-                                            console.log(node.id + ": Script opened!")
-                                        }
+                                        'icon': 'Scroll'
                                     }
                                 ]
                             }

package/examples/editor.html

@@ -197,7 +197,7 @@
         },
         {
             name: "Help", submenu: [
-                { name: "Search Help", icon: "Search", kbd: "F1", callback: () => { window.open("./docs/") } },
+                { name: "Search Help", icon: "Search", kbd: "F1", callback: () => { window.open("../docs/") } },
                 { name: "Support LexGUI", icon: "Heart" },
             ]
         },
@@ -225,7 +225,7 @@
         {
             icon: "RotateLeft",
             callback: (value, event) => {
-                const playButton = m.getButton("Play");
+                const playButton = menubar.getButton("Play");
                 playButton.swap();
             }
         },
@@ -418,7 +418,7 @@
     // add on resize event to control canvas size
     topTabs.area.onresize = resizeCanvas;
 
-    topTabs.area.addOverlayButtons([
+    const overlaybuttons = topTabs.area.addOverlayButtons([
         [
             {
                 name: "Select",
@@ -440,8 +440,9 @@
             }
         ],
         {
-            name: "Lit",
+            name: "Render Mode",
             options: ["Lit", "Unlit", "Wireframe"],
+            value: "Lit",
             callback: (value, event) => console.log(value)
         },
         [
@@ -452,11 +453,14 @@
                 selectable: true
             },
             {
-                name: 10,
+                name: "Snap Values",
+                value: 10,
                 options: [10, 100, 1000],
                 callback: value => console.log(value)
             }
-        ], {
+        ],
+        null, // Separator
+        {
             name: "Open Sidebar Sheet",
             icon: "PanelLeftDashed",
             callback: (value, event) => {
@@ -467,27 +471,27 @@
                 const sidebar = area.addSidebar(m => {
                     m.group("Projects", { icon: "Plus", callback: (groupName, event) => { console.log(groupName) } });
                     m.add("Getting Started", { icon: "Box" /*,collapsable: false*/ });
-                    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.add("Getting Started/Installation", { icon: "Box" });
+                    m.add("Getting Started/Project Structure", { icon: "Box", action: { name: "ShowMenu", icon: null } });
+                    m.add("Building Your Application", { icon: "Code", action: { name: "ShowMenu", icon: null } });
+                    m.add("Search Blocks", { icon: "Search" });
+                    m.add("Very loooooooooooooooooooooooong sun", { icon: "Sun", action: { name: "ShowMenu", icon: null } });
                     m.separator();
                     m.group("API Reference");
-                    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.add("Components", { icon: "Box" });
+                    m.add("File Conventions", { icon: "Code" });
+                    m.add("Functions", { icon: "Search" });
+                    m.add("CLI", { icon: "Sun" });
                     m.separator();
                     m.group("Architecture");
-                    m.add("Accessibility ", { icon: "Box", callback: logParams });
-                    m.add("Fast Refresh", { icon: "Code", callback: logParams });
-                    m.add("Supported Browsers", { icon: "Search", callback: logParams });
+                    m.add("Accessibility ", { icon: "Box" });
+                    m.add("Fast Refresh", { icon: "Code" });
+                    m.add("Supported Browsers", { icon: "Search" });
                     m.separator();
                     m.add("Calendar ", { icon: "Calendar", collapsable: 3 });
-                    m.add("Personal ", { callback: logParams, type: "checkbox" });
-                    m.add("Work", { callback: logParams, type: "checkbox", value: true });
-                    m.add("Family", { callback: logParams, type: "checkbox" });
+                    m.add("Personal ", { type: "checkbox" });
+                    m.add("Work", { type: "checkbox", value: true });
+                    m.add("Family", { type: "checkbox" });
                 }, { /* collapseToIcons: false, */
                     skipHeader: true,
                     filter: true,
@@ -725,6 +729,9 @@
         panel.addLayers("Layers", 10, (value, event) => {
             console.log(value);
         });
+        panel.addLayers("Layers (8 bits)", 10, (value, event) => {
+            console.log(value);
+        }, { maxBits: 8 });
         panel.addArray("An Item Array", ['GPTeam', 'Blat Panthers', 'Blat Bunny'], (value, event) => {
             console.log(value);
         });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lexgui",
-    "version": "0.6.8",
+    "version": "0.6.10",
     "description": "JS library to create web graphical user interfaces",
     "type": "module",
     "main": "./build/lexgui.js",
@@ -39,7 +39,8 @@
         "rollup-js": "rollup -c rollup.build.config.js",
         "minify-css": "cleancss -o build/lexgui.min.css build/lexgui.css",
         "minify": "npm run rollup-js && npm run minify-css",
-        "build": "python build-legacy.py && npm run minify"
+        "legacy": "python build-legacy.py",
+        "build": "npm run legacy && npm run minify"
     },
     "devDependencies": {
         "@rollup/plugin-terser": "^0.4.4"