接続形態

接続の外観をカスタマイズする方法はいくつかあります。 難しくなりますどの方法でも、 カスタム レンダラ。

基本サイズ

異なる次元の接続

幅や高さを変更することで接続をカスタマイズできますが、 維持します。そのためには、まず カスタムの定数プロバイダ コンポーネントを作成し、一部の定数をオーバーライドします。

レンダラによって、定義され使用される定数も異なるため、 スーパークラスのリファレンス ドキュメントをご覧ください。

で確認できます。

ベースレンダラでは、NOTCH_WIDTH をオーバーライドし、 次の接続と前の接続用の NOTCH_HEIGHT TAB_WIDTH と TAB_HEIGHT（入力と出力） 接続します

class CustomConstantProvider extends Blockly.blockRendering.ConstantProvider {
  constructor() {
    super();
    this.NOTCH_WIDTH = 20;
    this.NOTCH_HEIGHT = 10;
    this.TAB_HEIGHT = 8;
  }
}

基本的なシェイプ

異なる形状の接続。

接続をカスタマイズするには、基本形状をオーバーライドします。基本的なシェイプ 高さ、幅、2 つのパスがあります。

どのパスも同じ形を描きますが、両端から描画します。

両方向から描画されたノッチ

このように配置する必要があるのは、ドロワーが ブロックでは、それぞれの種類の接続が双方向に描画されます。たとえば 前の接続は左から右に描画されますが、次の接続は 右から左に描画しますそのため、両方の Cloud Storage バケットに 対応できます

ブロックが描画される方向

次と前の makeNotch メソッドをオーバーライドできます。 入力と出力用の makePuzzleTab メソッドを使用すると、 構成されます

class CustomConstantProvider extends Blockly.blockRendering.ConstantProvider {
  makePuzzleTab() {
    const width = this.TAB_WIDTH;
    const height = this.TAB_HEIGHT;
    return {
      type: this.SHAPES.PUZZLE,
      width,
      height,
      pathUp: Blockly.utils.svgPaths.line([
          Blockly.utils.svgPaths.point(-width, -height / 2),
          Blockly.utils.svgPaths.point(width, -height / 2)]),
      pathDown: Blockly.utils.svgPaths.line([
          Blockly.utils.svgPaths.point(-width, height / 2),
          Blockly.utils.svgPaths.point(width, height / 2)]),
    };
  }
}

詳しくは、MDN SVG パスのドキュメントをご確認ください。 を使用してパスの文字列を定義します。Blockly.utils.svgPaths 名前空間が指定されている シンラッパーとして格納し、読みやすくします。

接続チェック用のシェイプ

さまざまな接続の形状を

接続の状況に応じて形状を変更することで、接続をカスタマイズできます。 接続チェックを行います。

これにより、さまざまなデータタイプを表すさまざまなシェイプを作成できます。 たとえば、文字列は三角形の接続で表現でき、 ラウンド接続で表されます。

接続チェックごとに異なるシェイプを提供するには、 shapeFor メソッド返されるシェイプは、 （init）

種類に関する情報については、基本的なシェイプをご覧ください。 シェイプはサポートされています。

export class ConstantProvider extends Blockly.blockRendering.BaseConstantProvider {
  shapeFor(connection) {
    let check = connection.getCheck();
    // For connections with no check, match any child block.
    if (!check && connection.targetConnection) {
      check = connection.targetConnection.getCheck();
    }

    if (check && check.includes('String')) return this.TRIANGULAR_TAB;
    if (check && check.includes('Boolean')) return this.ROUND_TAB;

    return super.shapeFor(connection);
  }
}

カスタム入力

完全にカスタムの入力を作成することで、接続形態をカスタマイズできます。この これは、一部の接続を他の接続とは異なるものにする場合に限って行いますが、 接続チェックに基づいて適用したくない場合があるからです。

たとえば、ステートメント入力のように一部の値の入力をインデントしたい場合は、 カスタム入力を作成できます

カスタム入力クラスを作成する

カスタム入力を作成するの手順に沿って操作します。

測定可能な

カスタム入力を表す measurable を作成する必要があります。

測定可能なカスタム入力は Blockly.blockRendering.InputConnection。また、 入力の形状を描画するために必要な追加の測定データでなくてもかまいません。

export class CustomInputMeasurable extends Blockly.blockRendering.InputConnection {
  constructor(constants, input) {
    super(constants, input);

    // Any extra measurement data...
  }
}

測定可能な

レンダリング情報では、UDM イベントでカスタム できますそのためには、addInput_ メソッドをオーバーライドする必要があります。

export class RenderInfo extends Blockly.blockRendering.RenderInfo {
  addInput_(input, activeRow) {
    if (input instanceof CustomInput) {
      activeRow.elements.push(new CustomInputMeasurable(this.constants_, input));
    }
    super.addInput_(input, activeRow);
  }
}

必要に応じて行を作成する

デフォルトでは、入力によって新しい行は作成されません。入力フィールドとして 行の最後にトリガーするには、 shouldStartNewRow_ メソッド レンダリング情報。

export class RenderInfo extends Blockly.blockRendering.RenderInfo {
  shouldStartNewRow_(currInput, prevInput) {
    if (prevInput instanceof CustomInput) return true;
    return super.shouldStartNewRow_(currInput, prevInput);
  }
}

必要に応じて入力用のシェイプを作成する

次のように、入力の形状を定数に格納することをおすすめします。 ノッチタブやパズルタブにも 当てはまりますこれにより、コードが整理され、 後で変更しやすくなります。

入力を描画する

最後に、ドロワーを変更してシェイプを描画する必要があります。

カスタム入力は次のいずれかです。

  • ステートメントの入力など、ブロックのアウトラインに影響を与えます。

    アウトライン入力の画像

  • または、インライン値の入力など、ブロックの内部に影響を与える

    内部入力の画像

入力がブロックの枠線に影響する場合は、 drawOutline_、それ以外の場合はオーバーライド drawInternals_。

export class Drawer extends Blockly.blockRendering.Drawer {
  drawOutline_() {
    this.drawTop_();
    for (let r = 1; r < this.info_.rows.length - 1; r++) {
      const row = this.info_.rows[r];

      // Insert checks for your input here!
      if (row.getLastInput() instanceof CustomInputMeasurable) {
        this.drawCustomInput(row);
      } else if (row.hasJaggedEdge) {
        this.drawJaggedEdge_(row);
      } else if (row.hasStatement) {
        this.drawStatementInput_(row);
      } else if (row.hasExternalInput) {
        this.drawValueInput_(row);
      } else {
        this.drawRightSideRow_(row);
      }
    }
    this.drawBottom_();
    this.drawLeft_();
  }

  protected drawInternals_() {
    for (const row of rows) {
      for (const elem of row) {

        // Insert checks for your input here!
        if (elem instanceof CustomInputMeasurable) {
          this.drawCustomInput(elem);
        }

        if (Types.isInlineInput(elem)) {
          this.drawInlineInput_(elem as InlineInput);
        } else if (Types.isIcon(elem) || Types.isField(elem)) {
          this.layoutField_(elem as Field | Icon);
        }
      }
    }
  }
}