增强资源管理器面板

为了能更好的理解本篇文档内容,在继续阅读本文档之前,推荐大家先阅读 Cocos Creator 扩展编辑器 文档,了解扩展开发相关知识。

自定义右击菜单

若要自定义右击菜单,请先参考 创建并安装扩展 新建一个扩展,在扩展的 package.json文件中,通过定义 contributions.assets.menu 字段,即可对 资源管理器 面板的右击菜单显示事件进行监听,可以实现菜单的追加,如下所示:

  1. // package.json
  2. {
  3. "contributions": {
  4. "assets": {
  5. "menu": {
  6. "methods": "./dist/assets-menu.js",
  7. "createMenu": "onCreateMenu",
  8. "assetMenu": "onAssetMenu",
  9. "dbMenu": "onDBMenu",
  10. "panelMenu": "onPanelMenu"
  11. }
  12. }
  13. }
  14. }

各字段含义:

  • methods - 菜单事件处理函数(示例中的 on***Menu 系列)所在的脚本相对路径
  • createMenu - 创建资源 菜单显示时触发的事件,有两个触发时机:
    • 点击资源管理器面板左上角的 + 按钮
    • 资源菜单中的 新建 菜单项被选中时
  • dbMenu - 右击资源数据库根节点 assets 时触发的事件
  • assetMenu - 右击普通资源节点或目录时触发的事件
  • panelMenu - 右击资源管理面板空白区域时触发的事件

生成 ./dist/assets-menu.js 文件的 assets-menu.ts 内容如下:

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

assets-menu.tson****Menu(assetInfo:AssetInfo):MenuItem[] 系列函数参数和返回值说明如下:

  • 参数 AssetInfo:{}

    • displayName:string - 资源用于显示的名字
    • extends:string[] - 可选,继承类
    • importer:string - 导入器名字
    • isDirectory:boolean - 是否是文件夹
    • imported:boolean - 是否导入完成
    • invalid:boolean - 是否导入失败
    • name:string - 资源名字
    • file:string - 资源文件所在的磁盘绝对路径
    • readonly:boolean - 是否只读
    • type:string - 资源类型
    • url:string - db:// 开头的资源地址
    • uuid:string - 资源 ID
  • 返回值 [MenuItem]

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

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

示例中以 i18n: 开始的字符串,需要配置多语言相关内容,请参考多语言系统(i18n)

最终实现效果如下图所示:

extend-create-menu

拖入识别

假设我们做了一个拥有若干资源的扩展包,且有一个面板用于展示这些资源的图标。 我们希望实现将面板上的图标拖放到资源窗口时,即可将资源包中的资源拷贝到资源窗口。

在 Cocos Creator 扩展中实现这个流程并不复杂。只需要定义一个 <ui-drag-item type="xxx"> UI 组件,自定义一个拖入类型,并注入到 资源管理器 面板的识别范围内。后续在编辑器其他面板将含有该自定义类型的 <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. },
  12. },
  13. "messages": {
  14. "drop-asset": {
  15. "methods": ["default.dropAsset"], // 'default' 是指当前扩展的默认面板
  16. },
  17. },
  18. }
  • 在扩展的 default 面板中加入 dropAsset 方法,如下所示:

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

    assetInfo 参数说明:

    • uuid:string - 拖拽资源时,鼠标释放位置的资源 uuid
    • type:string - 该资源的类型
    • isDirectory:boolean - 该资源是否是文件夹
  • 在扩展的 defualt 面板中加入 ui-drag-item UI 组件,如下所示:

    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>

    注意ui-drag-item 中的 type 需要与 contributions.assets.drop.type 一致,才能产生关联。

执行效果如下图所示:

extend-assets-drop

Demo 示例

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