接続プレビューア

接続プレビューアは、保留中の接続の視覚的なプレビューを作成します。これにより、ドラッグ ブロックがドロップされたときに、そのドラッグ ブロックの接続先がわかります。

デフォルトの接続プレビューアでは、ブロックが接続される挿入マーカーが配置されます。また、接続が強調表示され、置き換えて接続解除されるブロックにフェード効果を適用します。

組み込みプレビューアのデモ

保留中の接続の種類

保留中の接続は 2 種類あります。場合によっては、ドロップされたブロックが既存のブロックに置き換わり、既存のブロックが切断されます。それ以外の場合は、ドロップされたブロックが他のブロックを切断することなく挿入されます。

交換品

置換は、ドラッグされたブロックの接続が、すでにブロックを含む接続に接続しようとしたときに、既存のブロックを再接続する場所がない場合に発生します。ドラッグしたブロックをドロップすると、置換したブロックの接続が解除され、ドラッグしたブロックが代わりに接続されます。

デフォルトでは、置き換えられるブロックにフェード効果を適用することで、これを示します。

組み込みの代替プレビューは

Insertion

挿入には 2 つのケースがあります。これは、ドラッグしたブロックの接続が空の接続に接続しようとした場合に発生します。また、ドラッグしたブロックの接続が、すでにブロックを持つ接続に接続されるものの、既存の 2 つのブロック間に挿入できるため、既存のブロックの接続が切断されない場合に発生します。

デフォルトでは、挿入マーカーが作成され、接続する接続がハイライト表示されます。

組み込みの挿入プレビューは

カスタム プレビューアを作成する

保留中の接続をプレビューするために別のビジュアルを使用する場合は、カスタムの IConnectionPreviewer 実装を作成します。

建設と廃棄

IConnectionPreviewer にコンストラクタと廃棄メソッドを実装する必要があります。

ブロックのドラッグが開始されるたびにコンストラクタが呼び出され、ドラッグ対象のブロックが渡されます。ブロックに基づいて状態を初期化する必要がある場合は、コンストラクタで初期化できます。

class MyConnectionPreviewer implements IConnectionPreviewer {
  constructor(draggedBlock: Blockly.BlockSvg) {
    // Initialize state here.
  }
}

dispose メソッドは、ブロックのドラッグが終了するたびに呼び出されます。IConnectionPreviewer インスタンスが破棄されたときに状態を逆参照する必要がある場合は、ここで行います。

dispose() {
  // Dispose of and dereference any state.
}

プレビューを作成する

IConnectionPreviewer には、接続を視覚的にプレビューするためのロジックを実装する必要があります。

交換品

置換をプレビューするには、previewReplacement メソッドを実装します。

previewReplacement(draggedConn, staticConn, replacedBlock) {
  // Visually indicate that the replacedBlock will be disconnected, and the
  // draggedConn will be connected to the staticConn.
}

Insertion

挿入をプレビューするには、previewConnection メソッドを実装します。

previewConnection(draggedConn, staticConn) {
  // Visually indicate the draggedConn will be connected to the staticConn.
}

ドラッグしたブロックが空の入力に接続されているか、ブロック間に挿入されているかに応じて、異なるプレビューを表示する場合は、staticConn が現在別の接続に接続されているかどうかを確認できます。staticConn が現在接続されている場合は、draggedConn がブロック間に挿入されています。

previewConnection(draggedConn, staticConn) {
  if (staticConn.targetConnection) {
    // The dragged block is being inserted between blocks.
  } else {
    // The dragged block is connecting to an empty input.
  }
}

CSS プレビュー

ブロックに CSS を適用することで、接続をプレビューできます。たとえば、デフォルトの置換フェードは、blocklyReplaceable CSS クラスをブロックに追加することで切り替えられます。

previewReplacement(draggedConn, staticConn, replacedBlock) {
  Blockly.utils.dom.addClass(replacedblock.getSvgRoot(), 'my-custom-class');
}

レンダラのプレビュー

接続をプレビューするには、特別なプレビュー フックを持つカスタム レンダラを実装します。

previewReplacement(draggedConn, staticConn, replacedBlock) {
  const renderer = replacedBlock.workspace.getRenderer()
  if (renderer.addReplacementIndicator) {
    renderer.addReplacementIndicator(replacedBlock);
  }
}

プレビューを非表示にする

IConnectionPreviewerでプレビューを非表示にできるようにする必要があります。これは、ドラッグされたブロックがすべての接続の範囲外に移動したときに呼び出されるため、プレビューは表示されません。また、プレビューアが破棄される直前に呼び出されます。

hidePreview() {
  // Remove CSS classes, toggle renderer methods, etc.
}

登録と使用

最後に、IConnectionPreviewer の作成が完了したら、それを登録する必要があります。これによりレンダラが文字列に関連付けられ、インジェクション構成に渡すことができます。IConnectionPreviewer クラス（コンストラクタ）をインジェクション構成に直接渡すこともできます。

Blockly.registry.register(
  Blockly.registry.Type.CONNECTION_PREVIEWER,
  'MyConnectionPreviewer',
  MyConnectionPreviewer,
);

// You can use the string.
const myWorkspace = Blockly.inject({
  // options...
  plugins: {
    connectionPreviewer: 'myConnectionPreviewer',
  },
};

// Or you can pass the class / constructor directly.
const myWorkspace = Blockly.inject({
  // options...
  plugins: {
    connectionPreviewer: MyConnectionPreviewer,
  },
};

登録の詳細については、サブクラスの挿入をご覧ください。