面板定义参考

    style

    使用 CSS 定义你的样式。在 Panel 定义中，CSS 样式被定义在 中，所以他遵循 Shadow DOM 的样式定义规范。

    使用 来表示 Panel 本身的样式。而在 Panel 中的其他样式则遵循 CSS 选择器的书写规则。由于采用 Shadow DOM，我们定义在面板内的样式和其他面板样式以及全局样式是隔离开的，所以不必担心 CSS命名污染的问题。

    更多的 Shadow DOM 的介绍可以参考：

    template

    使用 HTML 标记语言定义你的面板的 UI 元素。

    listeners

    通过定义一个 Object 将 DOM 事件绑定到自定义函数上。这个 Object 的 Key 就是 DOM 事件名，Value则是函数本身。样例如下：

    1. Editor.Panel.extend({
    2.   // ...
    4.   listeners: {
    5.     mousedown ( event ) {
    6.       event.stopPropagation();
    7.       Editor.log('on mousedown');
    8.     },
    9.     'panel-resize' ( event ) {
    10.       event.stopPropagation();
    12.     }
    13.   }
    14. });

    messages

    通过定义一个 Object 将 IPC 消息绑定到自定义函数上。这个 Object 的 Key 就是 IPC 消息名，Value则是函数本身。样例如下：

    behaviors

    使用方法如下：

    1.   // foobar.js
    2.   module.exports = {
    3.     sayHello () {
    4.       Editor.log('Hello Foobar');
    5.     }
    6.   }

    dependencies

    为一个数组，其内部元素为 url 或 文件路径。 有时候我们会需要用到一些第三方库，通过指定 dependencies 会在 Panel 初始化前，就先将第三方库读入。

    使用方法如下：

    1. Editor.Panel.extend({
    2.   dependencies: [
    3.     'packages://foobar/index.js',
    4. });

    $

    $ 为一个 Object，他可以通过 CSS 选择器的语法，将模板中的元素映射成 $ 变量方便用户使用。假设我们有以下代码：

    我们可以看到，通过选择器，我们得到 $foo 和 $bar 两个元素。方便了我们在初始化过程中对其进行进一步的操作。

    ready ()

    当 Panel 被正确读入，模板实例化并且样式也被正确加入后，将会调动 ready 函数。

    run ( argv )

    close ()

    当 Panel 被关闭退出前被调用。通过返回值决定 Panel 是否真正被关闭。如果返回为 true 则关闭 Panel。

    panel-show

    当 Panel 显示的时候发送

    panel-hide

    当 Panel 隐藏的时候发送

    panel-resize

    当 Panel 大小改变的时候发送

    panel-cut

    当操作系统剪切行为触发时发送

    panel-copy

    当操作系统复制行为触发时发送

    panel-paste