Extending the Assets Panel

    Assuming a location (where) in the Assets panel has a right-click menu event, the currently supported extended locations (where) are:

    • createMenu — two entry points for creating assets: one is the + button in the top left corner of the panel; the other is the Create option in the right-click menu.
    • dbMenu — the asset database root node
    • assetMenu — asset general node
    • panelMenu — blank area of the panel

    Specific implementation steps:

    • Select Extension —> Create Extension in the menu bar at the top of the editor and create a new extension in the Global/Projects directory as needed. The extension package will then be generated in the extensions directory of the root/project directory.

    • Open the package.json file of the extension package and configure the contributions.assets.menu property, where methods is introduced into the assets-menu.js file. Other properties such as createMenu are explicit declarations of where above, and the corresponding onCreateMenu is the method exported from assets-menu.js:

    • The assets-menu.js part of the code example in the Demo example at the end of the article is as follows:

      • Parameter Object

        • displayName String - the name of the asset to be displayed
        • importer String - the name of the importer
        • isDirectory Boolean - whether it is a folder
        • instantiation (optional) String - will carry this extension name if the virtual asset can be instantiated as an entity
        • imported Boolean - whether the import is complete
        • invalid Boolean - whether the import is failed
        • name String - the name of the asset
        • file String - the absolute path to the disk where the asset file is located
        • redirect Object - jump to the asset
          • type String - the asset type
          • uuid String - the asset ID
        • readonly Boolean - whether to be read-only
        • type String - asset type
        • url String - the address of the asset starting with db://

      • Return Value MenuItem[], MenuItem Object

        • type (optional) String - optional, normal, separator, submenu, checkbox or radio
        • (optional) String - the text displayed
        • sublabel (optional) String - the secondary text displayed
        • submenu (optional) MenuItem[] - the submenu
        • click (optional) Function - the click event
        • enable (optional) Boolean - whether it is available, if not it will be grayed out style
        • visible (optional) Boolean - whether to show
        • accelerator (optional) String - Show shortcut keys
        • checked (optional) Boolean - whether checked when type is checkbox / radio

    More properties can be found in the data format of the electron menu-item documentation.

    The effect of implementing the extension is illustrated as follows:

    Recognizing an acceptable type requires the support of the editor UI component <ui-drag-item>, where an important property is type, <ui-drag-item type="xxx">. Customize a drag-in type and inject it into the Assets panel’s scope. If a <ui-drag-item> element containing that custom type is subsequently dragged into the Assets panel from another editor panel, the Assets panel recognizes it and sends a message to the registrant (plugin) of the custom type. The registrant can then perform a custom action, such as creating a new set of assets.

    The specific implementation steps are roughly the same as the above extension right-click menu, open the extension’s package.json file to do the corresponding configuration.

    • The panel.js file in the Demo example at the end of the article:

      assetInfo parameter description:

      • uuid String - The UUID of the asset at the mouse release location when dragging an asset in the Assets panel.
      • type String - the asset type

    For executable code for both extensions, please download the working