@aptpod/data-viz-visual-parts-sdk/es/visual-parts/index.js

Visual Parts SDK for VM2M Data Visualizer

/**
 * パネルに表示されるビジュアルパーツを描画する Abstract クラスです。
 * Abstract メソッド `render` 、 `dispose` が含まれています。
 * ご利用時はこのクラスを継承するクラスを作成して、メソッドを実装してください。
 * 定義したクラスは{@link expose}で使用します。
 * @abstract
 * @example
 * ```typescript
 * import React, { useEffect } from 'react'
 * import { render, unmountComponentAtNode } from 'react-dom'
 * import { Renderer } from '@aptpod/data-viz-visual-parts-sdk'
 *
 * const App = (comm: ExposerEvent) => {
 *   useEffect(() => {
 *     // set event listener
 *     comm.loaded.emit()
 *   }, [comm])
 *
 *   return <div>Hello World</div>
 * }
 *
 * class VisualPartsRenderer extends Renderer {
 *   render(element: HTMLElement, communicator: ExposerEvent) {
 *     render(<App comm={communicator} />, element)
 *   }
 *
 *   dispose(element: HTMLElement) {
 *     unmountComponentAtNode(element)
 *   }
 * }
 * ```
 */
export class Renderer extends HTMLElement {
    /**
     * クラスの初期化を実行します。
     * 特別な処理は必要ありません。
     */
    constructor() {
        super();
        this.communicator = null;
        this.mountPoint = null;
    }
    /** @internal */
    connectedCallback() {
        const mountPoint = document.createElement('div');
        this.attachShadow({ mode: 'open' }).append(mountPoint);
        this.mountPoint = mountPoint;
    }
    /** @internal */
    disconnectedCallback() {
        if (this.mountPoint) {
            this.dispose(this.mountPoint);
        }
        if (this.shadowRoot && this.mountPoint) {
            this.shadowRoot.removeChild(this.mountPoint);
        }
        this.mountPoint = null;
        this.communicator = null;
    }
    /** @internal */
    setCommunicator(comm) {
        this.communicator = comm;
        if (this.mountPoint) {
            this.render(this.mountPoint, this.communicator);
        }
    }
}
//# sourceMappingURL=index.js.map