カスタム ドラッグ可能アイテム

ドラッグ可能オブジェクトは、コンテナ内の ワークスペースです。ドラッグ&ドロップできます。。 IDraggable インターフェースを実装します。

新しいドラッグ可能オブジェクト インスタンスを ブロック（例: 複数選択プラグインを使用するか、 既存のオブジェクトのドラッグ処理など）を使用して、既存のオブジェクトを ブロックリー。ワークスペース内に存在できるレンダリングされたオブジェクトはブロックのみです。 バブル、ワークスペースのコメントなどです

責任

ドラッグ可能なオブジェクトには、ドラッグを実行する際にいくつかの責任があります。

実装

新しいドラッグ可能なオブジェクトを作成するには、IRenderedElement インターフェースと IDraggable インターフェースを実装する必要があります。これにより、Blockly はオブジェクトが表示されていることを通知し、 ドラッグされます。

class MyDraggable extends IRenderedElement, IDraggable {}

ルート SVG 要素を返す

getRootSvg メソッドは、ルートの svg 要素（通常は group です）。これは、ビューを構成する他のすべての要素を保持します。 ドラッグします。

getSvgRoot() {
  return this.rootSvg;
}

返品可能かどうか

isMovable メソッドは、ドラッグ可能なオブジェクトが現在移動可能かどうかを返します（オブジェクトのドラッグを一時的に無効にする必要がある場合があるため）。isMovable が返される場合 falseすると、ワークスペースがドラッグされます。

isMovable() {
  return true;
}

返品先住所

getRelativeToSurfaceXY メソッドは、ワークスペース座標でドラッグ可能なオブジェクトの左上隅の位置を指定する Coordinate を返します。

ワークスペースの座標は、原点の左端と右端（右端）に位置します できます。ワークスペースがスケーリングまたは移動されても、名前は変わりません。

getRelativeToSurfaceXY() {
  return this.loc;
}

ドラッグを開始する

startDrag メソッドは、ドラッグ可能領域でのドラッグを初期化します。このメソッドでは、ドラッグ可能な要素は移動されません。ただし、ドラッグを完了するために必要なデータは保存するか、オブジェクトを作成する必要があります。これには、以前のプランを元に戻すために必要な revertDrag が呼び出された場合はドラッグします。

また、svg 要素がワークスペースのドラッグ レイヤになるように変更される必要があります。 他の要素より上に配置するようにします。

また、イベントも受け取ります。このイベントを使用して、押されたキーを確認できます。これにより、たとえば、シフト中のドラッグを通常のドラッグとは異なる方法で処理できます。

startDrag(e) {
  // Save the original location so we can revert the drag.
  this.startLoc = this.getRelativeToSurfaceXY();

  // Disable resizing the workspace for performance.
  this.workspace.setResizesEnabled(false);

  // Put the element on the drag layer.
  this.workspace.getLayerManager()?.moveToDragLayer(this);

  // Fire a drag event...

  // etc...
}

抗力

drag メソッドは、ドラッグ可能なオブジェクトを実際に移動します。newLoc が登場しました イベントも渡されます。このイベントを使用して、 押されたキーを確認します。

drag(newLoc, e) {
  this.moveTo(newLoc);
}

ドラッグを元に戻す

revertDrag メソッドは、ドラッグ可能オブジェクトの位置を 開始時です。これは、たとえば、ドラッグ可能な要素が、移動を妨げるドラッグ ターゲットにドロップされた場合に発生します。

revertDrag() {
  // Move back to the position that was stored in `startDrag`.
  this.moveTo(this.startLoc);
}

ドラッグを終了

endDrag メソッドはドラッグをクリーンアップし、保存されているデータやオブジェクトを解放して、ドラッグ可能なオブジェクトを元のレイヤに戻します。

revertDrag が呼び出された場合、endDrag は常に revertDrag の後に呼び出されます。

endDrag() {
  // Put the element back on its original layer (in this case BLOCK).
  this.workspace
    .getLayerManager()
    ?.moveOffDragLayer(this, Blockly.layers.BLOCK);

  // Allow the workspace to start resizing again.
  this.workspace.setResizesEnabled(true);
}

選択

ドラッグされる要素は、移行時に選択される要素によって決まります。 ドラッグが検出されます。

ISelectable

ドラッグ可能として選択されるには、ISelectable インターフェースを実装する必要があります。

class MyDraggable implements ISelectable {
  constructor(workspace) {
    this.id = Blockly.utils.idGenerator.genUid();
    this.workspace = workspace;
  }

  select() {
    // Visually indicate this draggable is selected.
  }

  unselect() {
    // Visually indicate this draggable is not selected.
  }
}

選択を設定する

選択された要素は、 Blockly.common.setSelected()。通常はこの方法で （ユーザーの pointerdown イベントに応答する）。

  constructor() {
    this.initSvg();

    Blockly.browserEvents.conditionalBind(
      this.getSvgRoot(),
      'pointerdown',
      this,
      () => Blockly.common.setSelected(this));
  }

互換性

ドラッグ可能なオブジェクトは、Blockly 内の他のシステムとやり取りできるように、追加のインターフェースを実装できます。

削除可能

IDeleteable インターフェースを実装すると、 ゴミ箱やその他の削除ターゲットで破棄するためにドラッグ可能にします。

class MyDraggable implements IDeletable {
  isDeletable() {
    return true;
  }

  dispose() {
    // Dispose of any references to data or SVG elements.
  }

  setDeleteStyle() {
    // Visually indicate that the draggable is about to be deleted.
  }
}

コピー可能

ICopyable インターフェースを実装して、ドラッグ可能オブジェクトをコピーできるようにします。 IPaster を定義して貼り付けられるようにします。

コピーと貼り付けについて詳しくは、コピーして貼り付けをご覧ください。