lexgui 0.6.2 → 0.6.4

package/changelog.md

@@ -2,7 +2,37 @@
 
 ## dev
 
-## 0.6.2 (master)
+## 0.6.4 (master)
+
+Timeline:
+  - Paste refactor.
+  - `onUpdateTrack` now expects an array of track indices as argument.
+  - Added root.
+  - Added documentation.
+  - Fixed example.
+
+Widgets:
+- Centered Map2D initial position.
+
+Add `Editor` demo example.
+Separate source into files. Generate module using `npm rollup`.
+Fixed making floating branch + docking to panel.
+Fixed graph renaming bug in NodeGraph editor.
+Resize fixes in VideoEditor component.
+
+## 0.6.3
+
+Widgets:
+- New Map2D Widget (For NNI).
+- Fixed `NodeTree.select` when item is not shown.
+- Fixed issue corrupting table body when manual sorting in Table Widget.
+
+Fixed `autoTheme` on start with `dark` color scheme.
+Improved Context Menu docs section.
+Added a few more icon solid variants.
+Minor fixes.
+
+## 0.6.2
 
 Widgets:
 - Fixed Title Widget class override.

package/demo.js

@@ -7,11 +7,11 @@ window.LX = LX;
 
 const area = await LX.init( { layoutMode: "document", rootClass: "wrapper" } );
 
-
 // Menubar
 {
     const menubar = area.addMenubar( [
-        { name: "Docs", icon: "search", kbd: "F1", callback: () => { window.open("./docs/") } }
+        { name: "Docs", callback: () => { window.open("./docs/") } },
+        { name: "Examples", callback: () => { window.open("./examples/") } },
     ] );
 
     menubar.setButtonImage("lexgui.js", "images/icon.png", () => {window.open("https://jxarco.github.io/lexgui.js/")}, {float: "left"})
@@ -173,7 +173,7 @@ const area = await LX.init( { layoutMode: "document", rootClass: "wrapper" } );
                                 'actions': [
                                     {
                                         'name': 'Open script',
-                                        'icon': 'Script'
+                                        'icon': 'Scroll'
                                     }
                                 ]
                             }
@@ -236,6 +236,18 @@ const area = await LX.init( { layoutMode: "document", rootClass: "wrapper" } );
             panel.addCheckbox("Visibility", true, null, { className: "accent" });
             panel.addLayers("Layers", 10, null);
 
+            const map2Dpoints = [
+                { "name": "angry", "pos": [-0.29348334680286725,-0.8813498603327697] },
+                { "name": "happy", "pos": [0.5728906393051147,-0.2508566975593567] },
+                { "name": "sad", "pos": [-0.542498156289837,0.3795300176749039] },
+                { "name": "calm", "pos": [0.46099435955317536,0.6203009288162395] },
+                { "name": "bored", "pos": [-0.349232931016368,0.8103832270857154] },
+                { "name": "frustrated", "pos": [-0.49046521102390306,-0.5708814736724744] },
+                { "name": "smile", "pos": [0.5762101669277435,0.20211987262339348] },
+                { "name": "upset", "pos": [-0.5796645457655041,-0.1907168771335228] }
+            ];
+            panel.addMap2D("Map2D", map2Dpoints, null, { size: [ 300, 300 ] });
+
             panel.addTitle( "Transform" );
             panel.addVector3( "Position", [0.0, 0.0, 0.0] );
             panel.addVector4( "Rotation", [0.0, 0.0, 0.0, 1.0] );
@@ -361,7 +373,7 @@ const area = await LX.init( { layoutMode: "document", rootClass: "wrapper" } );
         {
             // Buttons
             {
-                const mailPreviewHeader = LX.makeContainer( [ "100%", "59.59px" ], "flex flex-row border-bottom p-1", "", right );
+                const mailPreviewHeader = LX.makeContainer( [ "100%", "43.5px" ], "flex flex-row border-bottom p-1", "", right );
 
                 mailPreviewHeader.appendChild( new LX.Button( null, "", null, { title: "Archive", tooltip: true, buttonClass: "bg-none", icon: "Archive" } ).root );
                 mailPreviewHeader.appendChild( new LX.Button( null, "", null, { title: "Move to junk", tooltip: true, buttonClass: "bg-none", icon: "ArchiveX" } ).root );
@@ -421,7 +433,7 @@ const area = await LX.init( { layoutMode: "document", rootClass: "wrapper" } );
                         LX.toast( "Message sent!", "To:" + mail.email, { timeout: 5000, action: { name: "Undo", callback: ( toast, actionName, event ) => {
                             toast.close();
                         } } } );
-                    }, { className: "ml-auto", buttonClass: "contrast" } );
+                    }, { className: "ml-auto", buttonClass: "contrast px-2" } );
                     previewButtons.appendChild( sendButton.root );
                 };
             }
@@ -439,17 +451,17 @@ const area = await LX.init( { layoutMode: "document", rootClass: "wrapper" } );
         `, tasksContainer );
 
         const tableWidget = new LX.Table(null, {
-            head: ["Name", "Status", "Priority"],
+            head: [ "Name", "Status", "Priority", "ID" ],
             body: [
-                ["Alice", "In Progress", "High"],
-                ["Bob", "Backlog", "Medium"],
-                ["Prince", "Canceled", "Low"],
-                ["Sean", "Done", "High"],
-                ["Carter", "In Progress", "Medium"],
-                ["James", "Backlog", "Low"],
-                ["Mickey", "Todo", "Low"],
-                ["Charlie", "Canceled", "Low"],
-                ["Potato", "Todo", "High"]
+                [ "Alice", "In Progress", "High", 1 ],
+                [ "Bob", "Backlog", "Medium", 2 ],
+                [ "Prince", "Canceled", "Low", 3 ],
+                [ "Sean", "Done", "High", 4 ],
+                [ "Carter", "In Progress", "Medium", 5 ],
+                [ "James", "Backlog", "Low", 6 ],
+                [ "Mickey", "Todo", "Low", 7 ],
+                [ "Charlie", "Canceled", "Low", 8 ],
+                [ "Potato", "Todo", "High", 9 ]
             ]
         }, {
             selectable: true,
@@ -459,6 +471,7 @@ const area = await LX.init( { layoutMode: "document", rootClass: "wrapper" } );
             customFilters: [
                 { name: "Status", options: ["Backlog", "Todo", "In Progress", "Done", "Cancelled"] },
                 { name: "Priority", options: ["Low", "Medium", "High"] },
+                { name: "ID", type: "range", min: 0, max: 9, step: 1, units: "hr" },
             ],
             rowActions: [
                 { icon: "Edit", title: "Edit Row" },
@@ -469,7 +482,9 @@ const area = await LX.init( { layoutMode: "document", rootClass: "wrapper" } );
                 return [
                     { name: "Export" },
                     { name: "Make a copy" },
-                    { name: "Favourite" }
+                    { name: "Favourite" },
+                    null,
+                    { name: "Delete", icon: "Trash2", className: "fg-error" },
                 ]
             }
         });

package/examples/all_widgets.html

@@ -60,6 +60,17 @@
 
     let closedDefault = false;
 
+    const map2Dpoints = [
+        { "name": "angry", "pos": [-0.29348334680286725,-0.8813498603327697] },
+        { "name": "happy", "pos": [0.5728906393051147,-0.2508566975593567] },
+        { "name": "sad", "pos": [-0.542498156289837,0.3795300176749039] },
+        { "name": "calm", "pos": [0.46099435955317536,0.6203009288162395] },
+        { "name": "bored", "pos": [-0.349232931016368,0.8103832270857154] },
+        { "name": "frustrated", "pos": [-0.49046521102390306,-0.5708814736724744] },
+        { "name": "smile", "pos": [0.5762101669277435,0.20211987262339348] },
+        { "name": "upset", "pos": [-0.5796645457655041,-0.1907168771335228] }
+    ];
+
     fillPanels();
 
     // **** **** **** **** **** **** **** **** **** **** **** **** 
@@ -222,6 +233,8 @@
             panelB.addOTP("Custom Pattern", "23423411", null, { pattern: "xxxx-xxxx" });
             panelB.addOTP("Empty", "");
             panelB.addOTP("Disabled OTP", "965114", null, { disabled: true });
+            panelB.branch("Map2D Inputs", { closed: closedDefault });
+            panelB.addMap2D("Map2D", map2Dpoints, null, { size: [ 300, 300 ] });
             panelB.branch("Color Inputs", { closed: closedDefault });
             panelB.addColor("From Hex Color", "#b7a9b1");
             panelB.addColor("From RGB Color", { r: 1, g: 0.1, b: 0.6 });
@@ -277,7 +290,7 @@
                                 'actions': [
                                     {
                                         'name': 'Open script',
-                                        'icon': 'Script',
+                                        'icon': 'Scroll',
                                         'callback': function (node) {
                                             console.log(node.id + ": Script opened!")
                                         }
@@ -338,6 +351,14 @@
             });
         }
 
+        // List
+        {
+            panelC.branch("List", { closed: closedDefault });
+            panelC.addList("Number List", [ 1, 2, 3, 4 ] );
+            panelC.addList("String List", [ 'GPTeam', 'Blat Bunny', 'Blat Panthers' ], 'Blat Panthers');
+            panelC.addList("String List with Icons", [['GPTeam', 'Gpu'], ['Blat Bunny', 'Bone'], ['Blat Panthers', 'PawPrint']], 'Blat Panthers');
+        }
+
         // Table
         {
             panelC.branch("Tables", { closed: closedDefault });
@@ -389,6 +410,14 @@
             panelC.branch("Layers", { closed: closedDefault });
             panelC.addLayers("Layers", 10);
         }
+
+        // Progress
+        {
+            panelC.branch("Progress", { closed: closedDefault });
+            panelC.addProgress("Default", 0.65, { showValue: true });
+            panelC.addProgress("Custom", 0.1, { min: -1, max: 1, low: -0.25, high: 0.25, optimum: 0.75, showValue: true });
+            panelC.addProgress("Custom Editable", -0.4, { min: -1, max: 1, low: -0.25, high: 0.25, optimum: 0.75, showValue: true, editable: true });
+        }
     }
 </script>
 

package/examples/dialogs.html

@@ -22,7 +22,7 @@
     import { LX } from 'lexgui';
 
     // Init library and get main area
-    let area = await LX.init({ skip_default_area: true });
+    let area = await LX.init({ skipDefaultArea: true });
 
     LX.popup("Hello! I'm a popup dialog :)", null, { position: ["45%", "20%"] })