高度なカスタマイズ

Blockly では、対応する Blockly クラスを置き換えることで、特定の機能をカスタマイズできます。

置換可能なクラス

次の Blockly クラスは置き換えることができます。

Blockly クラス インターフェース 登録名
Blockly.dragging.Dragger Blockly.IDragger blockDragger
Blockly.ConnectionChecker Blockly.IConnectionChecker connectionChecker
Blockly.InsertionMarkerPreviewer Blockly.IConnectionPreviewer connectionPreviewer
Blockly.Flyout Blockly.IFlyout flyoutsVerticalToolbox
flyoutsHorizontalToolbox
Blockly.MetricsManager Blockly.IMetricsManager metricsManager
Blockly.blockRendering.Renderer* -- renderer
Blockly.Toolbox Blockly.IToolbox toolbox

* すべてのレンダラ用の基本クラスです。レンダラまたは既存のレンダラをサブクラス化できます。新しいレンダラを作成するをご覧ください。

Blockly のインターフェースは core/interfaces で定義されています。

置換クラスを作成する

置換クラスを作成するには、対応するインターフェースの関数を実装します。これらの関数をすべて新しいクラスに実装することも、Blockly クラスを拡張して変更する関数のみをオーバーライドすることもできます。唯一の要件は、インターフェースのすべての関数を実装し、インターフェースのコメントに記載されている要件に準拠することです。

特定のインターフェースを実装していることを型チェッカーに示すには、クラスに @implements {InterfaceName} JSDoc タグ（JavaScript の場合）または implements キーワード（TypeScript の場合）をアノテーションします。

置換クラスを挿入する

置換クラスを Blockly に通知するには、Blockly.inject に渡される構成オプションで plugins プロパティを使用します。（このプロパティの名前にもかかわらず、クラスは Blockly の拡張に使用されるプラグインのように、npm でパッケージ化および配布する必要はありません）。

サブクラスを inject メソッドに渡すことができます。

Blockly.inject('blocklyDiv', {
  plugins: {
    'metricsManager': CustomMetricsManagerClass
  }
}

または、Blockly.registry を使用してクラスを登録し、レジストリ名を使用してクラスを挿入することもできます。これは、構成オプションを純粋な JSON として保存する場合に便利です。

Blockly.registry.register(Blockly.registry.Type.METRICS_MANAGER, 'YOUR_NAME', SubClass);

Blockly.inject('blocklyDiv', {
  plugins: {
    'metricsManager': 'YOUR_NAME'
  }
}