Creating a Custom Panel

    Identify the main entry file in the panel definition and fill in its content. Example:

    An HTML string. Example:

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

    It is possible to read an HTML file directly. Example:

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

    The template is defined, when the panel is opened, the content of the template will be automatically rendered on the interface.

    Style

    With HTML, it is possible to customize some styles. Style is a string style template. Example:

    It is also posible to read a CSS file directly. Example:

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

    This is an HTML element selector, directly call querySelector to find the specified element and use it as a shortcut. Example:

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

    First, define the selector. After the template is rendered, the editor will automatically call document.querySelector to find the corresponding element and hang it on this.$. Example:

    Methods

    This object is full of functions, do not attach other types of objects here. Example:

    1. const packageJSON = require('./package.json');
    2. exports.methods = {
    3.     open() {
    4.         Editor.Panel.open(packageJSON.name);
    5.     },
    6. };

    After the basic layout is completed, it is sometimes necessary to update the status on some panels according to some situations. It is necessary to use the listeners function. Example:

    1. exports.listeners = {
    2.     /**
    3.      */
    4.     hide() {
    6.     },
    7.     /**
    8.      * Triggered when the panel is displayed
    9.      */
    10.     show() {
    11.         console.log(this.hidden);
    12.     },
    13.     /**
    14.      * Triggered when the panel size changes
    15.      */
    16.     resize() {
    17.         console.log(this.clientHeight);
    18.         console.log(this.clientWidth);
    19. };

    beforeClose

    When the panel tries to be closed, this function will be triggered. can be an async function that can be used for asynchronous judgment. If it returns false, the current closing operation will be terminated.

    Do not execute the actual destruction and close-related logic code in this function. This step is just for inquiry. Please put the actual destruction in the close function.

    When all the panels in the window are allowed to be closed, the panel close will be triggered. Once the close is triggered, the window will be forcibly closed after the end, please save the data in the close. If an abnormal close occurs, please make a backup of the data in order to restore data as much as possible when restarting.