@cccsaurora/howler-ui 2.14.0-dev.232 → 2.14.0-dev.247

package/utils/menuUtils.js

@@ -0,0 +1,243 @@
+import { MainMenuInsertOperation } from '../plugins/store';
+import { isNil } from 'lodash-es';
+class AppMenuBuilder {
+    items;
+    indexMap;
+    constructor(defaultMenu) {
+        this.items = defaultMenu;
+        this.updateMenuMap();
+    }
+    /**
+     * Applies a collection of Menu Operation objects created by the plugin system
+     *
+     * @param operations Operations created by the plugin system
+     */
+    applyOperations(operations) {
+        for (const operation of operations) {
+            switch (operation.operation) {
+                case MainMenuInsertOperation.Insert:
+                    // Inserts at end or adds to sub-elements
+                    this.insert(operation.targetId, operation.item);
+                    break;
+                case MainMenuInsertOperation.InsertBefore:
+                    // Inserts before target element
+                    this.insertBefore(operation.targetId, operation.item);
+                    break;
+                case MainMenuInsertOperation.InsertAfter:
+                    // Inserts after target element
+                    this.insertAfter(operation.targetId, operation.item);
+                    break;
+            }
+            this.updateMenuMap();
+        }
+    }
+    /**
+     * Get the completed menu structure
+     */
+    get menu() {
+        return this.items;
+    }
+    /**
+     * Insert provided menu item at the menu object identified by targetId.
+     *
+     * If the target menu is a group then item will be placed at end of sub items
+     *
+     * If the target menu is a standard item then group will be created and new item added, warning this removes
+     * the route from the new group parent item, be sure to add it back.
+     *
+     * If the target is 'root' then item will be added to end of root menu
+     *
+     * @param targetId Identifier of menu to insert to
+     * @param item Menu Item to insert
+     */
+    insert(targetId, item) {
+        const menuLocation = this.indexOfMenuId(targetId);
+        const target = this.menuFromIndex(menuLocation.index, menuLocation.subIndex);
+        if (!Array.isArray(target) && this.isGroupElement(target)) {
+            if (item.type === 'divider') {
+                console.warn(`Skipping DIVIDER Operation: INSERT on Target: ${targetId}, Dividers cannot be inserted to sub-menus`);
+                return;
+            }
+            const group = target.element;
+            const newItem = { ...item.element, nested: true };
+            group.items = [...group.items, newItem];
+            return;
+        }
+        if (Array.isArray(target)) {
+            target.push(item);
+            return;
+        }
+        if (menuLocation.index !== -1 && isNil(menuLocation.subIndex)) {
+            if (item.type === 'divider') {
+                console.warn(`Skipping DIVIDER Operation: INSERT on Target: ${targetId}, Dividers cannot be inserted to sub-menus`);
+                return;
+            }
+            if (!this.isItemElement(target)) {
+                return;
+            }
+            const header = target.element;
+            const inserted = { ...item.element, nested: true };
+            const newGroup = {
+                type: 'group',
+                element: {
+                    id: header.id,
+                    open: true,
+                    i18nKey: header.i18nKey,
+                    title: header.text,
+                    userPropValidators: header.userPropValidators,
+                    icon: header.icon,
+                    items: [inserted]
+                }
+            };
+            this.items[menuLocation.index] = newGroup;
+            return;
+        }
+    }
+    /**
+     * Insert provided menu item before the menu object identified by targetId.
+     *
+     * @param targetId Identifier of menu to insert to
+     * @param item Menu Item to insert
+     */
+    insertBefore(targetId, item) {
+        const menuLocation = this.indexOfMenuId(targetId);
+        if (!isNil(menuLocation.subIndex)) {
+            if (item.type === 'divider') {
+                console.warn(`Skipping DIVIDER Operation: INSERT on Target: ${targetId}, Dividers cannot be inserted to sub-menus`);
+                return;
+            }
+            const parentElement = this.menuFromIndex(menuLocation.index);
+            if (!Array.isArray(parentElement) && this.isGroupElement(parentElement)) {
+                const group = parentElement.element;
+                const newItem = { ...item.element, nested: true };
+                group.items = [
+                    ...group.items.slice(0, menuLocation.subIndex),
+                    newItem,
+                    ...group.items.slice(menuLocation.subIndex)
+                ];
+            }
+            return;
+        }
+        // Root level insertion before target index
+        if (menuLocation.index < 0) {
+            menuLocation.index = 0;
+        }
+        this.items = [...this.items.slice(0, menuLocation.index), item, ...this.items.slice(menuLocation.index)];
+    }
+    /**
+     * Insert provided menu item after the menu object identified by targetId.
+     *
+     * @param targetId Identifier of menu to insert to
+     * @param item Menu Item to insert
+     */
+    insertAfter(targetId, item) {
+        const menuLocation = this.indexOfMenuId(targetId);
+        if (!isNil(menuLocation.subIndex)) {
+            if (item.type === 'divider') {
+                console.warn(`Skipping DIVIDER Operation: INSERT on Target: ${targetId}, Dividers cannot be inserted to sub-menus`);
+                return;
+            }
+            const parentElement = this.menuFromIndex(menuLocation.index);
+            if (!Array.isArray(parentElement) && this.isGroupElement(parentElement)) {
+                const group = parentElement.element;
+                const newItem = { ...item.element, nested: true };
+                group.items = [
+                    ...group.items.slice(0, menuLocation.subIndex + 1),
+                    newItem,
+                    ...group.items.slice(menuLocation.subIndex + 1)
+                ];
+            }
+            return;
+        }
+        // Root level insertion after target index
+        if (menuLocation.index < 0) {
+            menuLocation.index = this.items.length;
+        }
+        this.items = [...this.items.slice(0, menuLocation.index + 1), item, ...this.items.slice(menuLocation.index + 1)];
+    }
+    /**
+     * Locates menu location in menu structure by menu id.
+     *
+     * @param id Menu Id to search for
+     * @return {index: number, subIndex: number} A dictionary containing indexes needed to access Menu Item
+     */
+    indexOfMenuId(id) {
+        if (id === 'root') {
+            // Root item so return entire menu
+            return { index: -1 };
+        }
+        else if (id in this.indexMap) {
+            // Item exists, check if it's a subitem
+            if ('parent' in this.indexMap[id]) {
+                return { index: this.indexMap[id].parent, subIndex: this.indexMap[id].index };
+            }
+            return { index: this.indexMap[id].index };
+        }
+        else {
+            throw new Error(`Menu element with id of '${id}' not found.`);
+        }
+    }
+    /**
+     *  Grabs a menu by indexes, helper function to account for an index of -1
+     *  to represent the root menu
+     *
+     * @param index First level index
+     * @param subIndex Second level index
+     * @return {} Menu item
+     */
+    menuFromIndex(index, subIndex) {
+        if (index === -1) {
+            return this.items;
+        }
+        if (isNil(subIndex)) {
+            return this.items[index];
+        }
+        const menuItem = this.items[index];
+        if (menuItem.type === 'group') {
+            return menuItem.element.items[subIndex];
+        }
+        throw new Error(`Menu item at index ${index} is not a group and does not have sub-items.`);
+    }
+    /**
+     * Determine if provided element is a group element
+     *
+     * @param elem Element to check
+     * @private
+     */
+    isGroupElement(elem) {
+        return !!elem && typeof elem === 'object' && elem.type === 'group';
+    }
+    /**
+     * Determine if provided element is an item element
+     *
+     * @param elem Element to check
+     * @private
+     */
+    isItemElement(elem) {
+        return !!elem && typeof elem === 'object' && elem.type === 'item';
+    }
+    /**
+     * Creates a flat list of menu items and subitems by menu id
+     * for quick lookup.
+     *
+     * @private
+     */
+    updateMenuMap() {
+        const indexMap = {};
+        for (let index = 0; index < this.items.length; index++) {
+            const menuItem = this.items[index];
+            if (menuItem.type === 'divider') {
+                continue;
+            }
+            indexMap[menuItem.element.id] = { index };
+            if (menuItem.type === 'group') {
+                for (let subIndex = 0; subIndex < menuItem.element.items.length; subIndex++) {
+                    const subMenuItem = menuItem.element.items[subIndex];
+                    indexMap[subMenuItem.id] = { index: subIndex, parent: index };
+                }
+            }
+        }
+        this.indexMap = indexMap;
+    }
+}
+export default AppMenuBuilder;