lexgui 8.2.4 → 8.2.5

package/build/components/NodeTree.d.ts

@@ -1,51 +1,51 @@
-import { BaseComponent } from './BaseComponent';
-export type NodeTreeAction = 'select' | 'dbl_click' | 'move' | 'delete' | 'rename' | 'visibility' | 'caret' | 'context_menu';
-export interface NodeTreeEvent {
-    type: NodeTreeAction;
-    domEvent?: Event;
-    items?: any[];
-    result?: any[];
-    from?: any;
-    to?: any;
-    where?: any;
-    oldName?: string;
-    newName?: string;
-    search?: any[];
-    userInitiated: boolean;
-}
-/**
- * Signature for cancelable events.
- * `resolve()` MUST be called by the user to perform the UI action
- */
-export type NodeTreeEventCallback = (event: NodeTreeEvent, resolve?: (...args: any[]) => void) => boolean | void | Promise<void>;
-/**
- * @class NodeTree
- */
-export declare class NodeTree {
-    domEl: any;
-    data: any;
-    options: any;
-    selected: any[];
-    _forceClose: boolean;
-    _callbacks: Record<string, NodeTreeEventCallback>;
-    constructor(domEl: any, data: any, options?: any);
-    _createItem(parent: any, node: any, level?: number, selectedId?: string): void;
-    refresh(newData?: any, selectedId?: string): void;
-    frefresh(id: string): void;
-    select(id: string): void;
-    deleteNodes(nodes: any[]): any[];
-    deleteNode(node: any): boolean;
-}
-/**
- * @class Tree
- * @description Tree Component
- */
-export declare class Tree extends BaseComponent {
-    innerTree: NodeTree;
-    constructor(name: string, data: any, options?: any);
-    /**
-     * @method on
-     * @description Stores an event callback for the desired action
-     */
-    on(eventName: string, callback: NodeTreeEventCallback): void;
-}
+import { BaseComponent } from './BaseComponent';
+export type NodeTreeAction = 'select' | 'dbl_click' | 'move' | 'delete' | 'rename' | 'visibility' | 'caret' | 'context_menu';
+export interface NodeTreeEvent {
+    type: NodeTreeAction;
+    domEvent?: Event;
+    items?: any[];
+    result?: any[];
+    from?: any;
+    to?: any;
+    where?: any;
+    oldName?: string;
+    newName?: string;
+    search?: any[];
+    userInitiated: boolean;
+}
+/**
+ * Signature for cancelable events.
+ * `resolve()` MUST be called by the user to perform the UI action
+ */
+export type NodeTreeEventCallback = (event: NodeTreeEvent, resolve?: (...args: any[]) => void) => boolean | void | Promise<void>;
+/**
+ * @class NodeTree
+ */
+export declare class NodeTree {
+    domEl: any;
+    data: any;
+    options: any;
+    selected: any[];
+    _forceClose: boolean;
+    _callbacks: Record<string, NodeTreeEventCallback>;
+    constructor(domEl: any, data: any, options?: any);
+    _createItem(parent: any, node: any, level?: number, selectedId?: string): void;
+    refresh(newData?: any, selectedId?: string): void;
+    frefresh(id: string): void;
+    select(id?: string, path?: string[]): void;
+    deleteNodes(nodes: any[]): any[];
+    deleteNode(node: any): boolean;
+}
+/**
+ * @class Tree
+ * @description Tree Component
+ */
+export declare class Tree extends BaseComponent {
+    innerTree: NodeTree;
+    constructor(name: string, data: any, options?: any);
+    /**
+     * @method on
+     * @description Stores an event callback for the desired action
+     */
+    on(eventName: string, callback: NodeTreeEventCallback): void;
+}

package/build/core/Namespace.js

@@ -10,7 +10,7 @@ const g = globalThis;
 let LX = g.LX;
 if (!LX) {
     LX = {
-        version: '8.2.4',
+        version: '8.2.5',
         ready: false,
         extensions: [], // Store extensions used
         extraCommandbarEntries: [], // User specific entries for command bar

package/build/core/Namespace.js.map

@@ -1 +1 @@
-{"version":3,"file":"Namespace.js","sources":["../../src/core/Namespace.ts"],"sourcesContent":["// Namespace.ts @jxarco\r\n\r\n/**\r\n * Main namespace\r\n * @namespace LX\r\n */\r\n\r\nconst g = globalThis as any;\r\n\r\n// Update global namespace if not present (Loading module)\r\n// Extension scripts rely on LX being globally available\r\nlet LX: any = g.LX;\r\n\r\nif ( !LX )\r\n{\r\n    LX = {\r\n        version: '8.2.4',\r\n        ready: false,\r\n        extensions: [], // Store extensions used\r\n        extraCommandbarEntries: [], // User specific entries for command bar\r\n        signals: {}, // Events and triggers\r\n        activeDraggable: null, // Watch for the current active draggable\r\n\r\n        spacingMode: 'default',\r\n        layoutMode: 'app',\r\n\r\n        MOUSE_LEFT_CLICK: 0,\r\n        MOUSE_MIDDLE_CLICK: 1,\r\n        MOUSE_RIGHT_CLICK: 2,\r\n\r\n        MOUSE_DOUBLE_CLICK: 2,\r\n        MOUSE_TRIPLE_CLICK: 3,\r\n\r\n        CURVE_MOVEOUT_CLAMP: 0,\r\n        CURVE_MOVEOUT_DELETE: 1,\r\n\r\n        DRAGGABLE_Z_INDEX: 101\r\n    };\r\n\r\n    g.LX = LX;\r\n}\r\n\r\nexport { LX };\r\n"],"names":[],"mappings":";AAAA;AAEA;;;AAGG;AAEH,MAAM,CAAC,GAAG,UAAiB;AAE3B;AACA;AACA,IAAI,EAAE,GAAQ,CAAC,CAAC;AAEhB,IAAK,CAAC,EAAE,EACR;AACI,IAAA,EAAE,GAAG;AACD,QAAA,OAAO,EAAE,OAAO;AAChB,QAAA,KAAK,EAAE,KAAK;QACZ,UAAU,EAAE,EAAE;QACd,sBAAsB,EAAE,EAAE;QAC1B,OAAO,EAAE,EAAE;QACX,eAAe,EAAE,IAAI;AAErB,QAAA,WAAW,EAAE,SAAS;AACtB,QAAA,UAAU,EAAE,KAAK;AAEjB,QAAA,gBAAgB,EAAE,CAAC;AACnB,QAAA,kBAAkB,EAAE,CAAC;AACrB,QAAA,iBAAiB,EAAE,CAAC;AAEpB,QAAA,kBAAkB,EAAE,CAAC;AACrB,QAAA,kBAAkB,EAAE,CAAC;AAErB,QAAA,mBAAmB,EAAE,CAAC;AACtB,QAAA,oBAAoB,EAAE,CAAC;AAEvB,QAAA,iBAAiB,EAAE;KACtB;AAED,IAAA,CAAC,CAAC,EAAE,GAAG,EAAE;AACb;;;;"}
+{"version":3,"file":"Namespace.js","sources":["../../src/core/Namespace.ts"],"sourcesContent":["// Namespace.ts @jxarco\r\n\r\n/**\r\n * Main namespace\r\n * @namespace LX\r\n */\r\n\r\nconst g = globalThis as any;\r\n\r\n// Update global namespace if not present (Loading module)\r\n// Extension scripts rely on LX being globally available\r\nlet LX: any = g.LX;\r\n\r\nif ( !LX )\r\n{\r\n    LX = {\r\n        version: '8.2.5',\r\n        ready: false,\r\n        extensions: [], // Store extensions used\r\n        extraCommandbarEntries: [], // User specific entries for command bar\r\n        signals: {}, // Events and triggers\r\n        activeDraggable: null, // Watch for the current active draggable\r\n\r\n        spacingMode: 'default',\r\n        layoutMode: 'app',\r\n\r\n        MOUSE_LEFT_CLICK: 0,\r\n        MOUSE_MIDDLE_CLICK: 1,\r\n        MOUSE_RIGHT_CLICK: 2,\r\n\r\n        MOUSE_DOUBLE_CLICK: 2,\r\n        MOUSE_TRIPLE_CLICK: 3,\r\n\r\n        CURVE_MOVEOUT_CLAMP: 0,\r\n        CURVE_MOVEOUT_DELETE: 1,\r\n\r\n        DRAGGABLE_Z_INDEX: 101\r\n    };\r\n\r\n    g.LX = LX;\r\n}\r\n\r\nexport { LX };\r\n"],"names":[],"mappings":";AAAA;AAEA;;;AAGG;AAEH,MAAM,CAAC,GAAG,UAAiB;AAE3B;AACA;AACA,IAAI,EAAE,GAAQ,CAAC,CAAC;AAEhB,IAAK,CAAC,EAAE,EACR;AACI,IAAA,EAAE,GAAG;AACD,QAAA,OAAO,EAAE,OAAO;AAChB,QAAA,KAAK,EAAE,KAAK;QACZ,UAAU,EAAE,EAAE;QACd,sBAAsB,EAAE,EAAE;QAC1B,OAAO,EAAE,EAAE;QACX,eAAe,EAAE,IAAI;AAErB,QAAA,WAAW,EAAE,SAAS;AACtB,QAAA,UAAU,EAAE,KAAK;AAEjB,QAAA,gBAAgB,EAAE,CAAC;AACnB,QAAA,kBAAkB,EAAE,CAAC;AACrB,QAAA,iBAAiB,EAAE,CAAC;AAEpB,QAAA,kBAAkB,EAAE,CAAC;AACrB,QAAA,kBAAkB,EAAE,CAAC;AAErB,QAAA,mBAAmB,EAAE,CAAC;AACtB,QAAA,oBAAoB,EAAE,CAAC;AAEvB,QAAA,iBAAiB,EAAE;KACtB;AAED,IAAA,CAAC,CAAC,EAAE,GAAG,EAAE;AACb;;;;"}

package/build/extensions/AssetView.d.ts

@@ -1,137 +1,138 @@
-import { LX } from '../core/Namespace';
-declare const Area: any;
-declare const Panel: any;
-declare const NodeTree: any;
-declare const Tree: any;
-export type AssetViewAction = 'select' | 'dbl_click' | 'check' | 'clone' | 'move' | 'delete' | 'rename' | 'enter_folder' | 'create-folder' | 'refresh-content' | 'node-drag';
-export interface AssetViewItem {
-    id: string;
-    type: string;
-    children: AssetViewItem[];
-    parent?: AssetViewItem;
-    path?: string;
-    src?: string;
-    dir?: AssetViewItem[];
-    domEl?: HTMLElement;
-    metadata: any;
-}
-interface AssetViewEvent {
-    type: AssetViewAction;
-    items?: AssetViewItem[];
-    result?: AssetViewItem[];
-    from?: AssetViewItem;
-    to?: AssetViewItem;
-    where?: AssetViewItem;
-    oldName?: string;
-    newName?: string;
-    search?: any[];
-    userInitiated: boolean;
-}
-/**
- * Signature for cancelable events.
- * `resolve()` MUST be called by the user to perform the UI action
- */
-export type AssetViewEventCallback = (event: AssetViewEvent, resolve?: (...args: any[]) => void) => boolean | void | Promise<void>;
-/**
- * @class AssetView
- * @description Asset container with Tree for file system
- */
-export declare class AssetView {
-    static LAYOUT_GRID: number;
-    static LAYOUT_COMPACT: number;
-    static LAYOUT_LIST: number;
-    static CONTENT_SORT_ASC: number;
-    static CONTENT_SORT_DESC: number;
-    root: HTMLElement;
-    area: typeof Area | null;
-    content: HTMLElement;
-    leftPanel: typeof Panel | null;
-    toolsPanel: any;
-    contentPanel: any;
-    previewPanel: any;
-    tree: typeof NodeTree | null;
-    prevData: AssetViewItem[];
-    nextData: AssetViewItem[];
-    data: AssetViewItem[];
-    currentData: AssetViewItem[];
-    currentFolder: AssetViewItem | undefined;
-    rootItem: AssetViewItem;
-    path: string[];
-    rootPath: string;
-    selectedItem: AssetViewItem | undefined;
-    allowedTypes: any;
-    searchValue: string;
-    filter: string;
-    gridScale: number;
-    layout: number;
-    sortMode: number;
-    skipBrowser: boolean;
-    skipPreview: boolean;
-    useNativeTitle: boolean;
-    onlyFolders: boolean;
-    allowMultipleSelection: boolean;
-    previewActions: any[];
-    contextMenu: any[];
-    itemContextMenuOptions: any;
-    private _assetsPerPage;
-    get assetsPerPage(): any;
-    set assetsPerPage(v: any);
-    _callbacks: Record<string, AssetViewEventCallback>;
-    _lastSortBy: string;
-    _paginator: typeof LX.Pagination | undefined;
-    _scriptCodeDialog: typeof LX.Dialog | undefined;
-    _moveItemDialog: typeof LX.Dialog | undefined;
-    _movingItem: AssetViewItem | undefined;
-    constructor(options?: any);
-    /**
-     * @method on
-     * @description Stores an event callback for the desired action
-     */
-    on(eventName: string, callback: AssetViewEventCallback): void;
-    /**
-     * @method load
-     * @description Loads and processes the input data
-     */
-    load(data: any): void;
-    /**
-     * @method addItem
-     * @description Creates an item DOM element
-     */
-    addItem(item: AssetViewItem, childIndex: number | undefined, updateTree?: boolean): HTMLLIElement;
-    /**
-     * @method clear
-     * @description Creates all AssetView container panels
-     */
-    clear(): void;
-    _processData(data: any, parent?: AssetViewItem): void;
-    _updatePath(): void;
-    _createNavigationBar(panel: typeof Panel): void;
-    _createTreePanel(area: typeof Area): void;
-    _subscribeTreeEvents(tree: typeof Tree): void;
-    _setContentLayout(layoutMode: number): void;
-    _createContentPanel(area: typeof Area): void;
-    _makeNameFilterFn(searchValue: string): (name: string) => boolean;
-    _refreshContent(searchValue?: string, filter?: string, userInitiated?: boolean): void;
-    _previewAsset(file: AssetViewItem): void;
-    _processDrop(e: DragEvent): void;
-    _sortData(sortBy?: string, sortMode?: number): void;
-    _enterFolder(folderItem: AssetViewItem | undefined, storeCurrent?: boolean): Promise<void>;
-    _removeItemFromParent(item: AssetViewItem): boolean;
-    _requestDeleteItem(item: AssetViewItem): void;
-    _deleteItem(item: AssetViewItem): void;
-    _requestMoveItemToFolder(item: AssetViewItem, folder: AssetViewItem): void;
-    _moveItemToFolder(item: AssetViewItem, folder: AssetViewItem): void;
-    _moveItem(item: AssetViewItem, defaultFolder?: AssetViewItem | AssetViewItem[]): void;
-    _requestCloneItem(item: AssetViewItem): false | undefined;
-    _cloneItem(item: AssetViewItem): AssetViewItem;
-    _getClonedName(originalName: string, siblings: any[]): string;
-    _requestRenameItem(item: AssetViewItem, newName: string, treeEvent?: boolean): void;
-    _renameItem(item: AssetViewItem, newName: string, data?: AssetViewItem[]): void;
-    _renameItemPopover(item: AssetViewItem): void;
-    _requestCreateFolder(folder?: AssetViewItem): void;
-    _createFolder(folder?: AssetViewItem, newFolderName?: string): AssetViewItem;
-    _openScriptInEditor(script: any): void;
-    _setAssetsPerPage(n: number): void;
-    _lastModifiedToStringDate(lm: number): string;
-}
-export {};
+import { LX } from '../core/Namespace';
+declare const Area: any;
+declare const Panel: any;
+declare const NodeTree: any;
+declare const Tree: any;
+export type AssetViewAction = 'select' | 'dbl_click' | 'check' | 'clone' | 'move' | 'delete' | 'rename' | 'enter_folder' | 'create-folder' | 'refresh-content' | 'node-drag';
+export interface AssetViewItem {
+    id: string;
+    type: string;
+    children: AssetViewItem[];
+    parent?: AssetViewItem;
+    path?: string;
+    src?: string;
+    dir?: AssetViewItem[];
+    domEl?: HTMLElement;
+    metadata: any;
+}
+interface AssetViewEvent {
+    type: AssetViewAction;
+    items?: AssetViewItem[];
+    result?: AssetViewItem[];
+    from?: AssetViewItem;
+    to?: AssetViewItem;
+    where?: AssetViewItem;
+    oldName?: string;
+    newName?: string;
+    search?: any[];
+    userInitiated: boolean;
+}
+/**
+ * Signature for cancelable events.
+ * `resolve()` MUST be called by the user to perform the UI action
+ */
+export type AssetViewEventCallback = (event: AssetViewEvent, resolve?: (...args: any[]) => void) => boolean | void | Promise<void>;
+/**
+ * @class AssetView
+ * @description Asset container with Tree for file system
+ */
+export declare class AssetView {
+    static LAYOUT_GRID: number;
+    static LAYOUT_COMPACT: number;
+    static LAYOUT_LIST: number;
+    static CONTENT_SORT_ASC: number;
+    static CONTENT_SORT_DESC: number;
+    root: HTMLElement;
+    area: typeof Area | null;
+    content: HTMLElement;
+    leftPanel: typeof Panel | null;
+    toolsPanel: any;
+    contentPanel: any;
+    previewPanel: any;
+    tree: typeof NodeTree | null;
+    prevData: AssetViewItem[];
+    nextData: AssetViewItem[];
+    data: AssetViewItem[];
+    currentData: AssetViewItem[];
+    currentFolder: AssetViewItem | undefined;
+    rootItem: AssetViewItem;
+    path: string[];
+    rootPath: string;
+    selectedItems: AssetViewItem[];
+    allowedTypes: any;
+    searchValue: string;
+    filter: string;
+    gridScale: number;
+    layout: number;
+    sortMode: number;
+    skipBrowser: boolean;
+    skipPreview: boolean;
+    useNativeTitle: boolean;
+    onlyFolders: boolean;
+    allowMultipleSelection: boolean;
+    allowItemCheck: boolean;
+    previewActions: any[];
+    contextMenu: any[];
+    itemContextMenuOptions: any;
+    private _assetsPerPage;
+    get assetsPerPage(): any;
+    set assetsPerPage(v: any);
+    _callbacks: Record<string, AssetViewEventCallback>;
+    _lastSortBy: string;
+    _paginator: typeof LX.Pagination | undefined;
+    _scriptCodeDialog: typeof LX.Dialog | undefined;
+    _moveItemDialog: typeof LX.Dialog | undefined;
+    _movingItem: AssetViewItem | undefined;
+    constructor(options?: any);
+    /**
+     * @method on
+     * @description Stores an event callback for the desired action
+     */
+    on(eventName: string, callback: AssetViewEventCallback): void;
+    /**
+     * @method load
+     * @description Loads and processes the input data
+     */
+    load(data: any): void;
+    /**
+     * @method addItem
+     * @description Creates an item DOM element
+     */
+    addItem(item: AssetViewItem, childIndex: number | undefined, updateTree?: boolean): HTMLLIElement;
+    /**
+     * @method clear
+     * @description Creates all AssetView container panels
+     */
+    clear(): void;
+    _processData(data: any, parent?: AssetViewItem): void;
+    _updatePath(): void;
+    _createNavigationBar(panel: typeof Panel): void;
+    _createTreePanel(area: typeof Area): void;
+    _subscribeTreeEvents(tree: typeof Tree): void;
+    _setContentLayout(layoutMode: number): void;
+    _createContentPanel(area: typeof Area): void;
+    _makeNameFilterFn(searchValue: string): (name: string) => boolean;
+    _refreshContent(searchValue?: string, filter?: string, userInitiated?: boolean): void;
+    _previewAsset(file: AssetViewItem): void;
+    _processDrop(e: DragEvent): void;
+    _sortData(sortBy?: string, sortMode?: number): void;
+    _enterFolder(folderItem: AssetViewItem | undefined, storeCurrent?: boolean): Promise<void>;
+    _removeItemFromParent(item: AssetViewItem): boolean;
+    _requestDeleteItem(items: AssetViewItem[]): void;
+    _deleteItem(item: AssetViewItem): void;
+    _requestMoveItemToFolder(item: AssetViewItem, folder: AssetViewItem): void;
+    _moveItemToFolder(item: AssetViewItem, folder: AssetViewItem): void;
+    _moveItem(item: AssetViewItem, defaultFolder?: AssetViewItem | AssetViewItem[]): void;
+    _requestCloneItem(item: AssetViewItem): false | undefined;
+    _cloneItem(item: AssetViewItem): AssetViewItem;
+    _getClonedName(originalName: string, siblings: any[]): string;
+    _requestRenameItem(item: AssetViewItem, newName: string, treeEvent?: boolean): void;
+    _renameItem(item: AssetViewItem, newName: string, data?: AssetViewItem[]): void;
+    _renameItemPopover(item: AssetViewItem): void;
+    _requestCreateFolder(folder?: AssetViewItem): void;
+    _createFolder(folder?: AssetViewItem, newFolderName?: string): AssetViewItem;
+    _openScriptInEditor(script: any): void;
+    _setAssetsPerPage(n: number): void;
+    _lastModifiedToStringDate(lm: number): string;
+}
+export {};

package/build/extensions/AssetView.js

@@ -36,7 +36,7 @@ class AssetView {
     rootItem;
     path = [];
     rootPath = '';
-    selectedItem = undefined;
+    selectedItems = [];
     allowedTypes;
     searchValue = '';
     filter = 'None';
@@ -48,7 +48,8 @@ class AssetView {
     skipPreview = false;
     useNativeTitle = false;
     onlyFolders = true;
-    allowMultipleSelection = false;
+    allowMultipleSelection = true;
+    allowItemCheck = false;
     previewActions = [];
     contextMenu = [];
     itemContextMenuOptions = null;
@@ -88,6 +89,7 @@ class AssetView {
         this.useNativeTitle = options.useNativeTitle ?? this.useNativeTitle;
         this.onlyFolders = options.onlyFolders ?? this.onlyFolders;
         this.allowMultipleSelection = options.allowMultipleSelection ?? this.allowMultipleSelection;
+        this.allowItemCheck = options.allowItemCheck ?? this.allowItemCheck;
         this.previewActions = options.previewActions ?? [];
         this.itemContextMenuOptions = options.itemContextMenuOptions;
         this.gridScale = options.gridScale ?? this.gridScale;
@@ -184,9 +186,9 @@ class AssetView {
         if (!this.useNativeTitle) {
             let desc = document.createElement('span');
             desc.className = 'lexitemdesc';
-            desc.id = `floatingTitle_${metadata.uid}`;
+            desc.id = LX.getSupportedDOMName(`floatingTitle_${metadata.uid}`);
             desc.innerHTML = `File: ${item.id}<br>Type: ${type}`;
-            LX.insertChildAtIndex(this.content, desc, childIndex ? childIndex + 1 : undefined);
+            LX.insertChildAtIndex(this.content, desc, childIndex !== undefined ? childIndex + 1 : undefined);
             itemEl.addEventListener('mousemove', (e) => {
                 if (!isGridLayout) {
                     return;
@@ -212,7 +214,7 @@ class AssetView {
         else {
             itemEl.title = type + ': ' + item.id;
         }
-        if (this.allowMultipleSelection) {
+        if (this.allowItemCheck) {
             let checkbox = document.createElement('input');
             checkbox.type = 'checkbox';
             checkbox.className = 'lexcheckbox';
@@ -301,11 +303,12 @@ class AssetView {
             e.stopPropagation();
             const isDoubleClick = e.detail == LX.MOUSE_DOUBLE_CLICK;
             if (!isDoubleClick) {
-                if (!e.shiftKey) {
+                if (!e.shiftKey || !that.allowMultipleSelection) {
                     that.content.querySelectorAll('.lexassetitem').forEach((i) => i.classList.remove('selected'));
+                    that.selectedItems.length = 0;
                 }
                 this.classList.add('selected');
-                that.selectedItem = item;
+                that.selectedItems.push(item);
                 if (!that.skipPreview) {
                     that._previewAsset(item);
                 }
@@ -337,35 +340,44 @@ class AssetView {
             e.preventDefault();
             e.stopImmediatePropagation();
             e.stopPropagation();
-            const multiple = that.content.querySelectorAll('.selected').length;
+            const multipleSelection = that.selectedItems.length > 1;
             const options = [
                 {
-                    name: (multiple > 1) ? (multiple + ' selected') : item.id,
+                    name: multipleSelection ? (`${that.selectedItems.length} selected`) : item.id,
                     icon: LX.makeIcon('CircleSmall', { svgClass: `fill-current text-${typeColor}` }),
                     className: 'text-sm',
                     disabled: true
                 },
                 null
             ];
-            if (multiple <= 1) {
+            // By now, allow with none/single selected items
+            if (!multipleSelection) {
                 options.push({ name: 'Rename', icon: 'TextCursor', callback: that._renameItemPopover.bind(that, item) });
             }
-            if (!isFolder) {
+            // By now, allow with none/single selected items
+            if (!isFolder && !multipleSelection) {
                 options.push({ name: 'Clone', icon: 'Copy', callback: that._requestCloneItem.bind(that, item) });
             }
-            options.push({ name: 'Move', icon: 'FolderInput', callback: () => that._moveItem(item) });
-            if (type == 'Script' && LX.has('CodeEditor')) {
+            // By now, allow with none/single selected items
+            if (!multipleSelection) {
+                options.push({ name: 'Move', icon: 'FolderInput', callback: () => that._moveItem(item) });
+            }
+            // By now, allow with none/single selected items
+            if (!multipleSelection && type == 'Script' && LX.has('CodeEditor')) {
                 options.push({ name: 'Open in Editor', icon: 'Code', callback: that._openScriptInEditor.bind(that, item) });
             }
             if (that.itemContextMenuOptions) {
-                options.push(null);
+                if (options.length > 2)
+                    options.push(null);
                 for (let o of that.itemContextMenuOptions) {
                     if (!o.name || !o.callback)
                         continue;
-                    options.push({ name: o.name, icon: o.icon, callback: o.callback?.bind(that, item) });
+                    options.push({ name: o.name, icon: o.icon,
+                        callback: o.callback?.bind(that, multipleSelection ? that.selectedItems : [item]) });
                 }
             }
-            options.push(null, { name: 'Delete', icon: 'Trash2', className: 'destructive', callback: that._requestDeleteItem.bind(that, item) });
+            options.push(null, { name: 'Delete', icon: 'Trash2', className: 'destructive',
+                callback: that._requestDeleteItem.bind(that, multipleSelection ? that.selectedItems : [item]) });
             LX.addClass(that.contentPanel.root, 'pointer-events-none');
             LX.addDropdownMenu(e.target, options, { side: 'right', align: 'start', event: e, onBlur: () => {
                     LX.removeClass(that.contentPanel.root, 'pointer-events-none');
@@ -396,7 +408,8 @@ class AssetView {
                 e.dataTransfer.setDragImage(img, 0, 0);
                 e.dataTransfer.effectAllowed = 'move';
             }
-            const desc = that.content.querySelector(`#floatingTitle_${metadata.uid}`);
+            const domName = LX.getSupportedDOMName(`floatingTitle_${metadata.uid}`);
+            const desc = that.content.querySelector(`#${domName}`);
             if (desc)
                 desc.style.display = 'none';
         }, false);
@@ -431,7 +444,8 @@ class AssetView {
         });
         itemEl.addEventListener('mouseenter', (e) => {
             if (!that.useNativeTitle && isGridLayout) {
-                const desc = that.content.querySelector(`#floatingTitle_${metadata.uid}`);
+                const domName = LX.getSupportedDOMName(`floatingTitle_${metadata.uid}`);
+                const desc = that.content.querySelector(`#${domName}`);
                 if (desc)
                     desc.style.display = 'unset';
             }
@@ -445,7 +459,8 @@ class AssetView {
         itemEl.addEventListener('mouseleave', (e) => {
             if (!that.useNativeTitle && isGridLayout) {
                 setTimeout(() => {
-                    const desc = that.content.querySelector(`#floatingTitle_${metadata.uid}`);
+                    const domName = LX.getSupportedDOMName(`floatingTitle_${metadata.uid}`);
+                    const desc = that.content.querySelector(`#${domName}`);
                     if (desc)
                         desc.style.display = 'none';
                 }, 100);
@@ -574,7 +589,7 @@ class AssetView {
                     const dom = node.domEl;
                     dom?.classList.add('selected');
                 }
-                this.selectedItem = node;
+                this.selectedItems = [node];
             }
         });
         tree.on('beforeMove', (event, resolve) => {
@@ -725,6 +740,7 @@ class AssetView {
         });
         this.content.addEventListener('click', function () {
             this.querySelectorAll('.lexassetitem').forEach((i) => i.classList.remove('selected'));
+            that.selectedItems.length = 0;
         });
         this.content.addEventListener('contextmenu', function (e) {
             e.preventDefault();
@@ -943,7 +959,7 @@ class AssetView {
             return;
         }
         const child = this.currentData[0];
-        const sameFolder = child?.parent?.id === folderItem.id;
+        const sameFolder = child?.parent?.metadata?.uid === folderItem.metadata?.uid;
         if (storeCurrent) {
             this.prevData.push(this.currentFolder ?? {
                 id: '/',
@@ -969,7 +985,15 @@ class AssetView {
         if (mustRefresh) {
             this._processData(this.data);
             this._refreshContent();
-            this.tree?.select(this.currentFolder.id);
+            // Get path to avoid same id issues
+            let path = `${this.currentFolder.id}/`;
+            let parent = this.currentFolder.parent;
+            while (parent && parent.id !== '/') {
+                path += `${parent.id}/`;
+                parent = parent.parent;
+            }
+            const parentsPath = path.split('/').filter(Boolean).reverse();
+            this.tree?.select(undefined, parentsPath);
         }
         this._updatePath();
     }
@@ -994,14 +1018,14 @@ class AssetView {
         }
         return true;
     }
-    _requestDeleteItem(item) {
+    _requestDeleteItem(items) {
         const onBeforeDelete = this._callbacks['beforeDelete'];
         const onDelete = this._callbacks['delete'];
         const resolve = (...args) => {
-            this._deleteItem(item);
+            items.forEach((item) => this._deleteItem(item));
             const event = {
                 type: 'delete',
-                items: [item],
+                items,
                 userInitiated: true
             };
             if (onDelete)
@@ -1010,7 +1034,7 @@ class AssetView {
         if (onBeforeDelete) {
             const event = {
                 type: 'delete',
-                items: [item],
+                items,
                 userInitiated: true
             };
             onBeforeDelete(event, resolve);
@@ -1119,7 +1143,7 @@ class AssetView {
             }
             bcContainer.innerHTML = '';
             bcContainer.appendChild(LX.makeBreadcrumb(path.reverse().map((p) => {
-                return { title: p };
+                return { name: p };
             }), {
                 maxItems: 4,
                 separatorIcon: 'ChevronRight'
@@ -1289,16 +1313,21 @@ class AssetView {
         // It could be a Tree event, so maybe the elements is not created yet
         if (item.domEl) {
             const wasSelected = LX.hasClass(item.domEl, 'selected');
-            const hoverTitle = this.content.querySelector(`#floatingTitle_${item.id.replace(/\s/g, '_').replaceAll('.', '_')}`);
+            const hoverTitleDomName = LX.getSupportedDOMName(`floatingTitle_${item.metadata.uid}`);
+            const hoverTitle = this.content.querySelector(`#${hoverTitleDomName}`);
             if (hoverTitle)
                 hoverTitle.remove();
             item.domEl?.remove();
+            // Update new name
+            item.id = newName;
             item.domEl = this.addItem(item, idx * 2);
             if (wasSelected) {
                 this._previewAsset(item);
             }
         }
-        item.id = newName;
+        else {
+            item.id = newName;
+        }
         this.tree?.refresh();
         this._processData(this.data);
     }