接続プレビューア

接続のプレビュー担当者は、保留中の接続の視覚的なプレビューを作成します。これは、 ドラッグ ブロックが接続されるときに、その接続がどこにあるかを示します。 減少します

デフォルトの接続プレビューアでは、挿入マーカーが配置される ブロックが連携しますまた、コネクションが強調表示され、フェードインします。 置き換えられるブロックや接続解除されるブロックにも影響します。

組み込みのプレビュー機能のデモ

保留中の接続の種類

保留中の接続には 2 種類があります。一例としてドロップされたブロックは 既存のブロックが置き換えられ、既存のブロックは接続解除されます。もう一方の 破棄されたブロックは、他のブロックの接続を解除せずに挿入されます。

交換

置換は、ドラッグしたブロックの接続が接続されるときに行われます。 接続には、すでにブロックがあり、既存の接続用の ブロックを再アタッチできます。ドラッグしたブロックをドロップすると、置き換えられたブロックが ドラッグしたブロックが代わりに接続されます。

デフォルトでは、再生中のブロックにフェード効果を 交換されます。

組み込みの代替機能 プレビュー

Insertion

挿入は 2 つのケースで行われます。ドラッグしたメディア上で接続が block は空の接続に接続します。これは、ユーザーが ドラッグされたブロック上の接続は、既存の接続に ただし、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,
  },
};

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