新しいレンダラを作成する

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

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

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

ベースレンダラ

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

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

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

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

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

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

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

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

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

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

レンダラを登録する

カスタム レンダラの作成が完了したら、最後に登録する必要があります。これにより、レンダラが文字列に関連付けられ、インジェクション構成に渡せるようになります。

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

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