lexgui 8.2.4 → 8.3.0

package/changelog.md

@@ -2,7 +2,50 @@
 
 ## dev
 
-## 8.2.4 (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.
+
+AssetView:
+- Custom item actions now receive item or selected items list.
+- Fixed `options.allowMultipleSelection`, added moved old option to `options.allowItemCheck`.
+- Fixed item deletion when multiple selection.
+- Fixed minor issues with AssetView item rename.
+- Fixed AssetView MoveItem dialog not showing path Breadcrumb component.
+- Fixed minor bug `_enterFolder` using same ids for >1 folder.
+
+## 8.2.4
 
 Fixed Form not automatically syncing inputs when pressing primary action button.
 Added support for Tags `options.tagClass`.

package/examples/asset-view.html

@@ -51,6 +51,8 @@
         // skipPreview: true,
         // rootPath: "../",
         // onlyFolders: false,
+        // allowItemCheck: true,
+        allowMultipleSelection: true,
         allowedTypes: {
             "Mesh": { color: "rose-800" },
             "Script": { color: "orange-500" },
@@ -58,7 +60,7 @@
             "SIGML": { color: "emerald-300" },
         },
         itemContextMenuOptions: [
-            { name: "Like", callback: ( item ) => { console.log(item) } }
+            { name: "Like", callback: ( items ) => { console.log(items) } }
         ]
     });
     bottomArea.attach(assetView);
@@ -172,6 +174,31 @@
         {
             id: "unreal",
             type: "folder",
+            children: [
+                {
+                    id: "color.png",
+                    type: "image",
+                    src: "https://cdn2.unrealengine.com/ue-logotype-2023-vertical-white-1686x2048-bbfded26daa7.png"
+                },
+                {
+                    id: "demo.js",
+                    type: "script",
+                    src: "../data/script.js"
+                },
+                {
+                    id: "empty_folder",
+                    type: "folder",
+                    children: [{
+                        id: "demo.js",
+                        type: "script",
+                        src: "../data/script.js"
+                    }]
+                }
+            ]
+        },
+        {
+            id: "unreal2",
+            type: "folder",
             children: [
                 {
                     id: "color.png",
@@ -300,7 +327,7 @@
         } );
 
         assetView.on( "delete", ( event ) => {
-            console.log(event.items[ 0 ].id + " deleted");
+            event.items.forEach( item => console.log(item.id + " deleted") );
         } );
     }
 

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.4",
+    "version": "8.3.0",
     "description": "JS library to create web graphical user interfaces",
     "type": "module",
     "main": "./build/lexgui.js",
@@ -54,6 +54,7 @@
         "@rollup/plugin-alias": "^6.0.0",
         "@rollup/plugin-terser": "^0.4.4",
         "@tailwindcss/cli": "^4.1.18",
+        "baseline-browser-mapping": "^2.9.19",
         "cssnano": "^7.1.2",
         "dprint": "^0.50.2",
         "postcss": "^8.5.6",