lexgui 8.2.0 → 8.2.1

package/changelog.md

@@ -2,7 +2,29 @@
 
 ## dev
 
-## 8.2 (master)
+## 8.2.1 (master)
+
+CodeEditor:
+- Fixed `options.onReady` being called before processing lines.
+
+VideoEditor:
+- Added `resizeVideo` and `resizeControls` to update area sizes. They are automatically called by resize.
+- Added `controlsComponents` object that holds all buttons and timebar that will be displayed in the ui.
+- Added a `createControls` function to create different button layouts. It creates all buttons and then calls a layout creator.
+- Added `createControlsLayout_0` and `createControlsLayout_1` with default button layouts.
+- Added `controlsLayout` option to specify which default layout to use or a custom function.
+- Added `onChangeState` and `onChangeLoop` user callbacks.
+- Added `resetCropBtn`. Only displayed in layout 1.
+
+VideoEditor TimeBar:
+- `mousemove` and `mouseup` events now attach to document instead of canvas, for a better user experience.
+- Added `unbind` function to remove document events.
+- Fixed marker grabbing when both overlapped.
+
+Expose DocMaker extension in LX.
+Minor CSS fixes.
+
+## 8.2
 
 Use Tailwind (finally) to create and compile CSS.
 Removed custom utility classes, refactored theme colors and every theme variable used in LX.

package/examples/all-components.html

@@ -42,9 +42,9 @@
         },
         {
             title: "Change Theme",
-            icon: "Moon",
-            swap: "Sun",
-            callback: (swapValue) => { LX.setMode(swapValue ? "light" : "dark") }
+            icon: starterTheme == "dark" ? "Moon" : "Sun",
+            swap: starterTheme == "dark" ? "Sun" : "Moon",
+            callback: () => LX.switchMode()
         },
         {
             title: "Switch Spacing",
@@ -167,7 +167,6 @@
             buttonsRightPanel.addButton(null, "Warning Outline", null, { buttonClass: "warning outline" });
             buttonsRightPanel.addButton(null, "Destructive Outline", null, { buttonClass: "destructive outline" });
             buttonsRightPanel.branch("Dashed Buttons", { closed: closedDefault });
-            buttonsRightPanel.addButton(null, "Primary Dashed", null, { buttonClass: "primary dashed" });
             buttonsRightPanel.addButton(null, "Secondary Dashed", null, { buttonClass: "secondary dashed" });
             buttonsRightPanel.addButton(null, "Muted Dashed", null, { buttonClass: "muted dashed" });
             buttonsRightPanel.addButton(null, "Success Dashed", null, { buttonClass: "success dashed" });

package/examples/code-editor.html

@@ -29,6 +29,17 @@
     // init library and get main area
     let area = await LX.init();
 
+    const starterTheme = LX.getMode();
+    const menubar = area.addMenubar( [], { sticky: false } );
+    menubar.addButtons([
+        {
+            title: "Change Theme",
+            icon: starterTheme == "dark" ? "Moon" : "Sun",
+            swap: starterTheme == "dark" ? "Sun" : "Moon",
+            callback: () => LX.switchMode()
+        }
+    ]);
+
     const fileExplorer = true;
 
     if( !fileExplorer )

package/examples/dialogs.html

@@ -22,7 +22,18 @@
     import { LX } from 'lexgui';
 
     // Init library and get main area
-    let area = await LX.init({ skipDefaultArea: true });
+    let area = await LX.init();
+
+    const starterTheme = LX.getMode();
+    const menubar = area.addMenubar( [], { sticky: false } );
+    menubar.addButtons([
+        {
+            title: "Change Theme",
+            icon: starterTheme == "dark" ? "Moon" : "Sun",
+            swap: starterTheme == "dark" ? "Sun" : "Moon",
+            callback: () => LX.switchMode()
+        }
+    ]);
 
     LX.popup("Hello! I'm a popup dialog :)", null, { position: ["45%", "20%"] })
 
@@ -91,7 +102,7 @@
     canvas.height = window.innerHeight
     canvas.style.width = "100%";
     canvas.style.height = "100%";
-    document.body.appendChild(canvas);
+    area.attach( canvas );
 
     function loop(dt) {
 

package/package.json

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