コピーして貼り付け

Blockly は、ブロック、ワークスペースのコメント、バブルなど、多くの組み込みコンポーネントのコピー、切り取り、貼り付けのオペレーションをサポートしています。

デフォルトのクリップボードの動作

Blockly コアには、ブロック、ワークスペースのコメント、ICopyable インターフェースを実装するその他のコンポーネントを切り取り、コピー、貼り付けることができるキーボードショートカットが用意されています。また、ブロックを複製するためのコンテキストメニューオプションも用意されています。これらのデフォルトのショートカットとメニュー項目は、必要に応じて変更または削除できます。

デフォルトのクリップボード実装では、コピー可能なオブジェクトは、コピー元のワークスペースにのみ貼り付けることができます。フライアウトからコピーされた場合は、コピー先のワークスペースに貼り付けることができます。つまり、フライアウトからそのフライアウトのターゲットワークスペースにブロックをコピーすることはできますが、あるメインワークスペースから別のメインワークスペースにブロックをコピーすることはできません。

ワークスペースとタブをまたいでコピー＆ペーストする

ユーザーが 1 つのワークスペースからブロックをコピーして別のワークスペースに貼り付けられるようにする場合や、別のタブで実行されているアプリのコピーのワークスペースに貼り付けられるようにする場合は、@blockly/plugin-cross-tab-copy-paste プラグインをインストールします。

カスタムのクリップボード動作

異なる動作が必要な場合は、Blockly に付属のキーボードショートカットをアンインストールし、異なる動作をする別のキーボードショートカットをインストールすることで、カスタムのクリップボードを実装できます。これを容易にするため、Blockly.clipboard Namespace のメソッドを使用して、コピー、貼り付け、オブジェクトのコピー元ワークスペースの設定などのより詳細な制御を行うことができます。

コピー可能なカスタムオブジェクト

任意のアイテムをコピー/ペーストシステムに対応させるには、3 つのインターフェースを使用します。ICopyable はコピー可能なオブジェクトを表し、ICopyData はコピーされたオブジェクトを表し、IPaster はコピーデータをコピー可能なオブジェクトに戻すことができるオブジェクトを表します。すべての ICopyable 型には、そのデータを貼り付けることができる関連する IPaster が必要です。

対応する IPaster と ICopyData を持つ ICopyable オブジェクトは、デフォルトのクリップボードシステムと自動的に連携します。

コピー可能なオブジェクトはレンダリングされるため、カスタムのコピー可能なオブジェクトやカスタムの貼り付けツール（マルチセレクトプラグインなど）を実装する状況はほとんどありません。レンダリングされた新しいオブジェクトを Blockly に追加することはできません。ワークスペース内に存在できるレンダリングされたオブジェクトは、ブロック、バブル、ワークスペースのコメントのみです。

コピー可能な実装

コピー可能なオブジェクトを作成するには、ICopyable インターフェースを実装する必要があります。

選択可能

ICopyable インターフェースは ISelectable インターフェースを拡張しているため、これらのメソッドとプロパティも実装する必要があります。

キーボードショートカットは選択されたオブジェクトを参照してコピー対象を特定するため、選択可能である必要があります。

class MyCopyable 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.
  }
}

コピー可能

ICopyable インターフェース自体には 1 つのメソッド toCopyData しかありません。このメソッドは、コピー可能なオブジェクトの状態の JSON シリアル化可能な表現を返します。この表現は、コピー可能なオブジェクトを再作成するために使用できます。

コピーデータには、このコピーデータを貼り付けるペーストに関連付けられた登録済み文字列名を保持する paster プロパティも含まれている必要があります。ペースト機能の詳細については、ペースト機能を実装するをご覧ください。

class MyCopyable implements ICopyable {
  constructor(workspace, state) {
    this.workspace = workspace;
    this.myState = state;
  }

  toCopyData() {
    return {
      // This string matches the string used to register the paster.
      paster: 'MY_PASTER',
      state: this.myState,
    };
  }
}

ペーストを実装する

ペーストを作成するには、IPaster インターフェースを実装する必要があります。メソッドは 1 つだけです。paste は、貼り付けるもののコピーデータ、貼り付け先のワークスペース、貼り付け先の座標（省略可）を受け取ります。

class MyPaster implements IPaster {
  paste(copyData, workspace, coordinate) {
    return new MyCopyable(workspace, copyData.state);
    // Optionally position the copyable at the passed coordinate.
    // Optionally select the copyable after it is pasted.
  }
}

登録

ペーストを実装したら、それを登録して、指定されたコピーデータに関連付けられたペーストを paster プロパティから見つけられるようにする必要があります。

// This string matches the string assigned to the 'paster' property.
Blockly.clipboard.registry.register('MY_PASTER', new MyPaster());

コピーして貼り付け コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。