扩展资源管理器面板

扩展右击菜单

右击菜单的显示机制,是在显示之前获取实时的菜单数据。插件预先在自己的 package.json 中注册 assets 模块,就能获取 资源管理器 面板的右击菜单显示事件,并通过事件返回要显示的菜单数据,然后再统一显示出来。注册完成的菜单一般显示在现有菜单的后面。

假设 资源管理器 面板的某个位置 (where) 有右击菜单事件,目前支持扩展的位置 (where) 有:

  • createMenu — 创建资源的两个入口: 一是面板左上角的 + 按钮;二是右击菜单中的 新建 选项。
  • dbMenu — 资源数据库根节点
  • assetMenu — 资源普通节点
  • panelMenu — 面板空白区域

具体实现步骤:

  • 在编辑器顶部的菜单栏中选择 扩展 —> 创建扩展,根据需要在 全局/项目 目录下新建一个插件。插件包就会生成在根目录/项目目录的 extensions 目录下。
  • 打开插件包的 package.json 文件,然后配置 contributions.assets.menu 属性,其中 methods 引入 assets-menu.js 文件。其他属性如 createMenu 为上述 where 的显式声明,对应的 onCreateMenuassets-menu.js export 出来的方法:

    1. // package.json
    2. {
    3. contributions: {
    4. assets: {
    5. menu: {
    6. methods: './assets-menu.js', // 下面 Demo 示例中有这个文件
    7. createMenu: 'onCreateMenu',
    8. assetMenu: 'onAssetMenu',
    9. dbMenu: 'onDBMenu',
    10. panelMenu: 'onPanelMenu',
    11. },
    12. },
    13. },
    14. }
  • 文末的 Demo 示例assets-menu.js 部分代码示例如下:

    1. // assets-menu.js
    2. exports.onCreateMenu = function (assetInfo) {
    3. return [
    4. {
    5. label: 'i18n:extend-assets-demo.menu.createAsset',
    6. click() {
    7. if (!assetInfo) {
    8. console.log('get create command from header menu');
    9. } else {
    10. console.log('get create command, the detail of diretory asset is:');
    11. console.log(assetInfo);
    12. }
    13. },
    14. },
    15. ];
    16. };
    17. exports.onAssetMenu = function (assetInfo) {
    18. return [
    19. {
    20. label: 'i18n:extend-assets-demo.menu.assetCommandParent',
    21. submenu: [
    22. {
    23. label: 'i18n:extend-assets-demo.menu.assetCommand1',
    24. enabled: assetInfo.isDirectory,
    25. click() {
    26. console.log('get it');
    27. console.log(assetInfo);
    28. },
    29. },
    30. {
    31. label: 'i18n:extend-assets-demo.menu.assetCommand2',
    32. enabled: !assetInfo.isDirectory,
    33. click() {
    34. console.log('yes, you clicked');
    35. console.log(assetInfo);
    36. },
    37. },
    38. ],
    39. },
    40. ];
    41. };
  • assets-menu.jsonCreateMenu(assetInfo) 函数及同类函数说明:

    • 参数 assetInfo Object

      • displayName String - 资源用于显示的名字
      • extends (可选) String[] - 继承类
      • importer String - 导入器名字
      • isDirectory Boolean - 是否是文件夹
      • instantiation (可选) String - 虚拟资源可以实例化成实体的话,会带上这个扩展名
      • imported Boolean - 是否导入完成
      • invalid Boolean - 是否导入失败
      • name String - 资源名字
      • file String - 资源文件所在的磁盘绝对路径
      • redirect Object - 跳转指向资源
        • type String - 资源类型
        • uuid String - 资源 ID
      • readonly Boolean - 是否只读
      • type String - 资源类型
      • url String - db:// 开头的资源地址
      • uuid String - 资源 ID
    • 返回值 MenuItem[], MenuItem Object

      • type (可选) String - 可选,normal、separator、submenu、checkbox 或 radio
      • label (可选) String - 显示的文本
      • sublabel (可选) String - 显示的二级文本
      • submenu (可选) MenuItem[] - 子项菜单
      • click (可选) Function - 点击事件
      • enable (可选) Boolean - 是否可用,不可用会有置灰样式
      • visible (可选) Boolean - 是否显示
      • accelerator (可选) String - 显示快捷键
      • checked (可选) Boolean - 当 type 为 checkbox / radio 时是否选中

      更多属性可参考 electron menu-item 的数据格式。

实现扩展的效果图如下:

extend-create-menu

扩展拖入识别

识别一个可被接受的类型,需要编辑器 UI 组件 <ui-drag-item> 的支持,其中一个重要的属性是 type, <ui-drag-item type="xxx">。自定义一个拖入类型,并注入到 资源管理器 面板的识别范围内,后续在编辑器其他面板将含有该自定义类型的 <ui-drag-item> 元素拖入 资源管理器 面板时,资源管理器 面板便能识别到它,并给自定义类型的注册方(插件)发送消息,注册方便能执行一个自定义的动作,比如执行新建一组资源。

具体实现步骤,大致跟上述的 扩展右击菜单 一样,打开插件的 package.json 文件做对应的配置。

  1. // package.json
  2. {
  3. contributions: {
  4. assets: {
  5. drop: [
  6. {
  7. type: 'my-defined-asset-type-for-drop', // 对应 Demo 示例中 panel.html 的用法
  8. message: 'drop-asset',
  9. },
  10. ],
  11. menu: './assets-menu.js',
  12. },
  13. },
  14. messages: {
  15. 'drop-asset': {
  16. methods: ['default.dropAsset'], // 'default' 是指当前插件的默认面板
  17. },
  18. },
  19. }
  • 文末的 Demo 示例panel.js 文件:

    1. exports.methods = {
    2. dropAsset(assetInfo, dragInfo) {
    3. console.log(Editor.I18n.t('extend-assets-demo.drop.callback'));
    4. console.log(assetInfo);
    5. console.log(dragInfo);
    6. },
    7. };

    assetInfo 参数说明:

    • uuid String - 拖放到该资源上,该资源的 ID
    • type String - 该资源的类型
    • isDirectory Boolean - 该资源是否是文件夹
  • 文末的 Demo 示例panel.html 文件:

    1. <ui-drag-item
    2. type="my-defined-asset-type-for-drop"
    3. additional='{"value":"this additional is dragInfo data."}'
    4. >
    5. <ui-label>Drag me to assets panel, and look conosole log.</ui-label>
    6. </ui-drag-item>

Demo 示例

两个扩展功能的可执行代码可下载 范例 查看