lexgui 0.7.2 → 0.7.4

package/changelog.md

@@ -2,7 +2,29 @@
 
 ## dev
 
-## 0.7.2 (master)
+## 0.7.4 (master)
+
+Added `LX.toKebabCase`.
+
+CodeEditor:
+- Added support to togge status bar items by default.
+- Scopes, symbols and block comments refactor to fix instabilities.
+- Improved method-calls, variable symbols detection.
+- New autocomplete item icons based on Symbols.
+- Minor bugs fixed.
+
+## 0.7.3
+
+VideoEditor:
+- Minor Controls sizes refactor.
+- Fixed Controls event listeners.
+
+CodeEditor:
+- Improved scope detection.
+- Added basic symbols detection to feed autocomplete.
+- Fixed resizing and scrollbar issues.
+
+## 0.7.2
 
 Fixed AssetView Filter select.
 Fixed tooltips on Dialog without modal.

package/examples/code-editor.html

@@ -22,6 +22,10 @@
     import { LX } from 'lexgui';
     import 'lexgui/extensions/codeeditor.js';
 
+    LX.CodeEditor.debugScopes = false;
+    LX.CodeEditor.debugSymbols = false;
+    LX.CodeEditor.debugProcessedLines = false;
+
     // init library and get main area
     let area = await LX.init();
 
@@ -52,27 +56,37 @@
         // autocomplete: false,
         // disableEdition: true,
         // skipInfo: true,
-        fileExplorer: fileExplorer
+        fileExplorer: fileExplorer,
+        // statusShowFontSizeZoom: false,
+        // skipTabs: true,
+        files: [
+            "../data/js_sample.js",
+            "../data/ts_sample.ts",
+            "../data/json_sample.json",
+            "../data/css_sample.css",
+            "../data/cpp_sample.cpp",
+            "../data/cpp_header_sample.hpp",
+            "../data/c_sample.c",
+            "../data/xml_sample.xml",
+            "../data/python_sample.py",
+            "../data/rust_sample.rs",
+            "../data/php_sample.php",
+            "../data/localhost.bat",
+            "../data/frag.wgsl",
+            "../changelog.md",
+            "../index.html",
+        ],
+        onFilesLoaded: ( instance, numFilesLoaded ) => {
+            console.log( `CodeEditor: ${ numFilesLoaded } files loaded!` );
+            instance.loadTab("js_sample.js");
+        }
     });
 
-    editor.loadFile("../data/js_sample.js");
-    editor.loadFile("../data/ts_sample.ts");
-    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("../data/php_sample.php");
-    editor.loadFile("../data/localhost.bat");
-    editor.loadFile("../changelog.md");
-    editor.loadFile("../index.html");
-
-    if (!fileExplorer) {
+    // editor.loadFile("../data/animation.bml", { language: "JSON" });
+    // editor.loadFile("../data/CMakeLists.txt", { language: "CMake" });
+
+    if( !fileExplorer )
+    {
         var ctx = canvas.getContext("2d");
         ctx.fillStyle = "#b7a9b1";
         ctx.font = "48px Monospace";

package/examples/video-editor.html

@@ -34,7 +34,8 @@
     videoArea.attach(video);
 
     const videoEditor = new LX.VideoEditor(leftArea, { videoArea, video, crop: true })
-
+    videoEditor._loadVideo();
+    
     const canvas = document.createElement('canvas');
     canvas.width = video.clientWidth;
     canvas.height = video.clientHeight;

package/examples/video-editor2.html

@@ -29,7 +29,8 @@
 
     // Split main area
     let [leftArea, rightArea] = area.split({ sizes: ["75%", "25%"], minimizable: true });
-    let [topArea, bottomArea] = leftArea.split({ sizes: ["90%", null], minimizable: false, resize: false, type: "vertical" });
+    let [topArea, bottomArea] = leftArea.split({ sizes: ["80%", null], minimizable: false, resize: false, type: "vertical" });
+    let [controlsArea, buttonsArea] = bottomArea.split({ sizes: ["50%", null], minimizable: false, resize: false, type: "vertical" });
     area.extend();
 
     /* Create video area with a menubar */
@@ -39,8 +40,8 @@
     const video = document.createElement('video');
     video.src = "../data/video.mp4";
     videoArea.attach(video);
-    const videoEditor = new LX.VideoEditor(topArea, { videoArea, video })
-
+    const videoEditor = new LX.VideoEditor(topArea, { videoArea, video, controlsArea })
+    videoEditor._loadVideo();
     /* Add canvas above video */
     const canvas = document.createElement('canvas');
     canvas.width = video.clientWidth;
@@ -80,7 +81,7 @@
         }
     }], { float: 'tvr' });
 
-    let p = bottomArea.addPanel({ width: "100%", height: "100%", style: { display: "flex", "flex-direction": "row", "justify-content": "center", "align-content": "flex-start", "flex-wrap": "wrap" } });
+    let p = buttonsArea.addPanel({ width: "100%", height: "100%", style: { display: "flex", "flex-direction": "row", "justify-content": "center", "align-content": "flex-start", "flex-wrap": "wrap" } });
     p.addButton(null, "Trim", (v) => {
         console.log(videoEditor.getTrimedTimes())
 

package/package.json

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