lexgui 8.2.5 → 8.3.0

package/changelog.md

@@ -2,7 +2,37 @@
 
 ## dev
 
-## 8.2.5 (master)
+## 8.3.0 (master)
+
+CodeEditor:
+Added `Tabs.setIcon(name, icon)`.
+Added DropdownMenu item option `useKbdSpecialKeys` (true).
+Added `LX.requestFileAsync` util.
+Added support for AlertDialog `options.cancelCallback`.
+Replace `options.addDefault` for `options.useDefaultContextMenuItems (true)` in NodeTree.
+Added support for `options.contextMenuTitle` in NodeTree.
+Fixed Progress component default `blue-500` color.
+
+Full refactor for CodeEditor:
+- Improved robustness and fixed several minor bugs.
+- Improved symbol detection.
+- Added support to write Backtick char (`).
+- Added support for `HLSL` language.
+- Added `options.onCodeChange` to receive callback on code document changed.
+- `options.files` moved to `CodeEditor.loadFiles`.
+- Removed legacy `options.onsave` and `options.onrun`.
+- Disabled virtual scrolling until next version.
+- Next version will add back `detectLanguage`.
+
+Timeline:
+- Selected Tree entries now use the primary color.
+- Removed `onTrackTreeEvent`.
+- Added `setTrackTreeEventListener`. It sets a specific callback for the tree component.
+
+VideoEditor
+- `controlsLayout` of the constructor now expects an object that may contain `type`, `height` and/or `l1TimelineHeight`.
+
+## 8.2.5
 
 Added some WGSL keywords to DocMaker code snippets.
 `NodeTree.select` now supports using `path` for select items.

package/examples/code-editor.html

@@ -69,9 +69,91 @@
         // skipInfo: true,
         fileExplorer: fileExplorer,
         explorerName: "EXPLORER",
+        highlight: 'TypeScript',
         // statusShowFontSizeZoom: false,
         // skipTabs: true,
-        files: [
+        xonCreateFile: ( instance ) => {
+            return { name: "new_shader.wgsl", language: "WGSL" }
+        },
+        onCtrlSpace: () => console.log("Ctrl + Space pressed"),
+        onRun: () => console.log("Script running"),
+        onSave: () => console.log("Script saved"),
+        onContextMenu: ( editor, content, event ) => {
+            if( !content ) return;
+            return [
+                { path: "Custom Action", callback: () => console.log( content ) }
+            ];
+        },
+    });
+
+        editor.setText(`// Example TypeScript file for syntax highlighting
+
+// Type alias and interface
+type ID = number | string;
+
+interface Person {
+    id: ID;
+    name: string;
+    age?: number;
+}
+
+// Enum
+enum Role {
+    Admin,
+    User,
+    Guest
+}
+
+// Class with generics and inheritance
+class User<T extends Person> {
+    private role: Role;
+
+    constructor(public data: T, role: Role = Role.User) {
+        this.role = role;
+    }
+
+    get id(): ID {
+        return this.data.id;
+    }
+
+    printInfo(): void {
+        console.log(\`\${this.data.name} (\${Role[this.role]})\`);
+    }
+}
+
+// Generic function
+function identity<T>(value: T): T {
+    return value;
+}
+
+// Arrow function and async/await
+const fetchUser = async (id: ID): Promise<Person> => {
+    return { id, name: "Alice", age: 25 };
+};
+
+// Union, intersection, type assertions
+let input: string | number = "42";
+let result = (input as string).toUpperCase();
+
+// Arrays, tuples
+let nums: number[] = [1, 2, 3];
+let pair: [string, number] = ["age", 30];
+
+// Map, Set (built-ins)
+const map = new Map<string, number>();
+map.set("one", 1);
+
+const set = new Set<ID>([1, "two"]);
+
+// Usage
+(async () => {
+    const person = await fetchUser(1);
+    const user = new User(person, Role.Admin);
+    user.printInfo();
+    console.log(identity(nums));
+})();`);
+
+    editor.loadFiles( [
             "../data/js_sample.js",
             "../data/ts_sample.ts",
             "../data/json_sample.json",
@@ -87,24 +169,14 @@
             "../data/frag.wgsl",
             "../changelog.md",
             "../index.html",
-        ],
-        onFilesLoaded: ( instance, loadedTabs, numFilesLoaded ) => {
+            "../README.md"
+        ], ( instance, results, numFilesLoaded ) => {
             console.log( `CodeEditor: ${ numFilesLoaded } files loaded!` );
             instance.loadTab("js_sample.js");
-        },
-        xonCreateFile: ( instance ) => {
-            return { name: "new_shader.wgsl", language: "WGSL" }
-        },
-        onContextMenu: ( editor, content, event ) => {
-            if( !content ) return;
-            return [
-                { path: "Custom Action", callback: () => console.log( content ) }
-            ];
-        },
-    });
+        } );
 
-    // editor.loadFile("../data/animation.bml", { language: "JSON" });
-    // editor.loadFile("../data/CMakeLists.txt", { language: "CMake" });
+    editor.loadFile("../data/animation.bml", { language: "JSON" });
+    editor.loadFile("../data/CMakeLists.txt", { language: "CMake" });
 
     if( !fileExplorer )
     {

package/package.json

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