• 扩展编辑器面板
    • 定义方法
    • 定义入口程序
    • 在主菜单中添加打开面板选项
    • 窗口面板与主进程交互

    扩展编辑器面板

    Cocos Creator 允许用户定义一份面板窗口做编辑器的 UI 交互。

    定义方法

    在插件的 package.json 文件中定义 panel 字段如下:

    1. {
    2. "name": "simple-package",
    3. "panel": {
    4. "main": "panel/index.js",
    5. "type": "dockable",
    6. "title": "Simple Panel",
    7. "width": 400,
    8. "height": 300
    9. }
    10. }

    通过定义 panel 字段,并申明面板 typedockable 我们即可获得该份面板窗口。通过定义 main
    字段我们可以为我们的面板窗口指定一份入口程序。

    定义入口程序

    要定义一份面板的入口程序,我们需要通过 Editor.Panel.extend() 函数来注册面板。如以下代码:

    1. // panel/index.js
    2. Editor.Panel.extend({
    3. style: `
    4. :host { margin: 5px; }
    5. h2 { color: #f90; }
    6. `,
    7. template: `
    8. <h2>标准面板</h2>
    9. <ui-button id="btn">点击</ui-button>
    10. <hr />
    11. <div>状态: <span id="label">--</span></div>
    12. `,
    13. $: {
    14. btn: '#btn',
    15. label: '#label',
    16. },
    17. ready () {
    18. this.$btn.addEventListener('confirm', () => {
    19. this.$label.innerText = '你好';
    20. setTimeout(() => {
    21. this.$label.innerText = '--';
    22. }, 500);
    23. });
    24. },
    25. });

    在这份代码中,我们定义了面板的样式(style)和模板(template),并通过定义选择器 $ 获得面板元素,最后在
    ready 中对面板元素的事件进行处理。

    在完成了上述操作后,我们就可以通过调用 Editor.Panel.open('simple-package') 激活我们的面板窗口。

    更多关于面板定义的选项,请阅读面板定义参考。

    在主菜单中添加打开面板选项

    为了方便我们打开窗口,通常我们会将打开窗口的方法注册到主菜单中,并通过发消息给我们的插件主进程代码来完成。
    要做到这些事情,我们需要在我们的 package.json 中注册主进程入口函数和主菜单选项:

    1. {
    2. "name": "simple-package",
    3. "main": "main.js",
    4. "main-menu": {
    5. "Panel/Simple Panel": {
    6. "message": "simple-package:open"
    7. }
    8. },
    9. "panel": {
    10. "main": "panel/index.js",
    11. "type": "dockable",
    12. "title": "Simple Panel",
    13. "width": 400,
    14. "height": 300
    15. }
    16. }

    在主进程函数中,我们做如下定义:

    1. 'use strict';
    2. module.exports = {
    3. load () {
    4. },
    5. unload () {
    6. },
    7. messages: {
    8. open() {
    9. Editor.Panel.open('simple-package');
    10. },
    11. },
    12. };

    一切顺利的话,你将可以通过主菜单,打开如下的面板:

    simple-panel

    更多关于面板注册的选项,请阅读面板字段参考。

    窗口面板与主进程交互

    通常我们需要在窗口面板中设置一些 UI,然后通过发送 IPC 消息将任务交给主进程处理。这里我们可以通过
    Editor.Ipc 模块来完成。在我们上面定义的 index.js 中,我们可以通过在 ready() 函数中处理
    按钮消息来达成。

    1. this.$btn.addEventListener('confirm', () => {
    2. Editor.Ipc.sendToMain('simple-package:say-hello', 'Hello, this is simple panel');
    3. });

    当你点击按钮时,他将会给插件主进程发送 ‘say-hello’ 消息,并附带对应的参数。你可以用任何你能想得到的前端
    技术编辑你的窗口界面,还可以结合 Electron 的 内置 node 在窗口内 require 你希望的 node 模块,完成
    任何你希望做的操作。