Class: Renderer

パネルに表示されるビジュアルパーツを描画する Abstract クラスです。 Abstract メソッド render 、 dispose が含まれています。 ご利用時はこのクラスを継承するクラスを作成して、メソッドを実装してください。 定義したクラスはexposeで使用します。

abstract

example

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)
  }
}

Hierarchy

• HTMLElement

  ↳ Renderer

Constructors

constructor

+ new Renderer(): Renderer

クラスの初期化を実行します。 特別な処理は必要ありません。

Returns: Renderer

Overrides: HTMLElement.constructor

Methods

dispose

▸ Abstractdispose(element: HTMLElement): void

解放処理を実行します。 element は、 render メソッドに引数として渡された element （コンテナ）と同じです。 dispose メソッドでは、 element に紐づく子要素のDOMや子要素のイベントハンドラを解放する処理を実装してください。

abstract

Parameters:

Name	Type
element	HTMLElement

Returns: void

---

render

▸ Abstractrender(element: HTMLElement, communicator: ExposerEvent): void

描画を実行します。 1回だけコールします。 状態を変更する場合は、 communicator のイベントを利用し、 element のDOMを再描画するようにしてください。

abstract

Parameters:

Name	Type
element	HTMLElement
communicator	ExposerEvent

Returns: void