编写面板

我们已经在 package.json 里写好了面板的定义,这时候就需要实现面板的逻辑功能了。

这时候就需要在 panel 定义中标识 main 入口文件,并填充其内容:

  1. 'use strict';
  2. // html 文本
  3. exports.template = '';
  4. // 样式文本
  5. exports.style = '';
  6. // 渲染后 html 选择器
  7. exports.$ = {};
  8. // 面板上的方法
  9. exports.methods = {};
  10. // 面板上触发的事件
  11. exports.listeners = {};
  12. // 当面板渲染成功后触发
  13. exports.ready = async function() {};
  14. // 尝试关闭面板的时候触发
  15. exports.beforeClose = async function() {};
  16. // 当面板实际关闭后触发
  17. exports.close = async function() {};

template

html 字符串,例如:

  1. exports.template = `
  2. <header>
  3. Header
  4. </header>
  5. <section class="test">
  6. Section
  7. </section>
  8. `;

也可以直接读取一个 html 文件:

  1. const { readFileSync } = require('fs');
  2. const { join } = require('path');
  3. exports.template = readFileSync(join(__dirname, '../static/default.html'), 'utf8');

当定义好 template 后,面板被打开的时候,将自动把 template 的内容渲染到界面上。

此外编辑器也提供了一些 custom element,可以参考 UI组件 使用。

style

有了 html,还需要自定义一些样式就需要使用 style 了,style 和 template 一样是一个字符串。

  1. exports.style = `
  2. header { padding: 10px; }
  3. `;

当然,也可以读取一个 css 文件:

  1. const { readFileSync } = require('fs');
  2. const { join } = require('path');
  3. exports.template = readFileSync(join(__dirname, '../static/default.css'), 'utf8');

$

这是一个 html 元素选择器,直接调用 querySelector 查找到指定元素后,作为一个快捷方式使用。

  1. exports.$ = {
  2. header: 'header',
  3. test: '.test',
  4. };

首先定义好选择器,编辑器会在 template 渲染完成后,自动调用 document.querySelector 找到对应的元素,并挂在 this.$ 上:

  1. exports.ready = function() {
  2. console.log(this.$.header); // <header>
  3. console.log(this.$.test); // <section class="test">
  4. }

methods

面板上定义的方法。面板对外的功能都需要封装成方法,以函数为单位对外提供。消息也可以直接触发面板上的方法,详细请参考 消息通信

这个对象里都是函数,请不要挂载其他类型的对象到这里。

  1. exports.methods = {
  2. open() {
  3. Editor.Panel.open('hello-world');
  4. },
  5. };

listeners

基础的布局完成后,我们有时候需要根据一些情况,去更新一些面板上的状态,这时候就需要使用 listeners 功能了。

  1. exports.listeners = {
  2. /**
  3. * 面板隐藏的时候触发
  4. */
  5. hide() {
  6. console.log(this.hidden);
  7. },
  8. /**
  9. * 面板显示的时候触发
  10. */
  11. show() {
  12. console.log(this.hidden);
  13. },
  14. /**
  15. * 面板大小更改的时候触发
  16. */
  17. resize() {
  18. console.log(this.clientHeight);
  19. console.log(this.clientWidth);
  20. },
  21. };

ready

当面板启动完成的时候,将会触发这个生命周期函数。

beforeClose

当面板尝试被关闭的时候,将会触发这个函数,beforeClose 可以是一个 async 函数,可以进行异步判断,如果 return false,则会终止当前的关闭操作。

请不要在这个函数里执行实际的销毁和关闭相关的逻辑代码,这一步骤只是进行询问,实际的销毁请放到 close 函数里。

请谨慎使用 如果判断错误,可能导致编辑器或者面板窗口无法正常关闭。

close

当窗口内的所有面板允许关闭后,会触发面板的 close,一旦触发 close,结束后将强制关闭窗口,所以请在 close 进行数据的保存,如果出现异常关闭,请做好数据的备份,以便在重新启动的时候尽可能恢复数据。