カスタム レンダラを作成する

注: レンダラのコンセプトに関するドキュメントを読んでいないか、カスタム レンダラ Codelab を完了していない場合は、まずそれらを完了することをおすすめします。

カスタム レンダラを作成するには、Renderer クラスのサブクラスを作成する必要があります。レンダラとその機能の詳細については、レンダラのコンセプト ドキュメントをご覧ください。

class CustomRenderer extends Blockly.blockRendering.Renderer {
  constructor() {
    super();
  }
}

カスタマイズしない場合、デフォルトのレンダラは次のようになります。

他の組み込みレンダラのいずれかをサブクラス化して、その一部をオーバーライドすることもできます。

class CustomRenderer extends Blockly.thrasos.Renderer {
  constructor() {
    super();
  }
}

他のレンダラ コンポーネントのサブクラスを作成する

ブロックの実際の形状は、レンダラのサブコンポーネントによって決まります。

デフォルトでは、Renderer クラスはすべてのレンダラ コンポーネントの動作バージョンを提供します。これにより、他のコンポーネントを気にすることなく、単一のコンポーネントを変更できます。

たとえば、接続の形状を変更する場合は、他のコンポーネントに変更を加えなくても、定数をオーバーライドできます。

各コンポーネントの機能の詳細については、レンダラ コンポーネントのドキュメントをご覧ください。

ファクトリ メソッドをオーバーライドする

レンダラ コンポーネントをサブクラス化したら、サブクラス化したコンポーネントの Renderer のファクトリ メソッドをオーバーライドする必要があります。これにより、レンダラはさまざまなコンポーネントを適切に接続できます。

コンポーネントの種類ごとにメソッドがあります。

• makeConstants_
• makeRenderInfo_
• makePathObject（アンダースコアはありません）
• makeDrawer_

レンダラを登録する

最後に、カスタム レンダラを作成したら、それを登録する必要があります。これにより、レンダラが文字列に関連付けられ、構成オプションに渡すことができます。

Blockly.blockRendering.register('custom_renderer', CustomRenderer);

const workspace = Blockly.inject(blocklyDiv, {
  renderer: 'custom_renderer',
});