Kemampuan dapat ditarik

Elemen yang dapat ditarik adalah objek yang dirender dan ada di ruang kerja serta dapat ditarik lalu dilepas. Mereka menerapkan antarmuka IDraggable.

Ada beberapa situasi ketika Anda ingin menambahkan objek yang dapat ditarik baru ke Blockly (misalnya, plugin multi-pilihan, atau mengubah cara objek yang ada menangani penarikan), karena Anda tidak dapat menambahkan objek baru yang dirender ke Blockly. Satu-satunya objek yang dirender yang ada di dalam ruang kerja adalah blok, balon, dan komentar ruang kerja.

Tanggung Jawab

Draggable memiliki beberapa tanggung jawab saat menjalankan tarik:

• Memindahkan elemen svg ke lapisan tarik.
• Menerjemahkan elemen svg.
• Mengaktifkan peristiwa gerakan.

Penerapan

Untuk membuat antarmuka baru yang dapat ditarik, Anda harus mengimplementasikan antarmuka IRenderedElement dan IDraggable. Hal ini memungkinkan Blockly mengetahui bahwa objek Anda terlihat dan dapat ditarik.

class MyDraggable extends IRenderedElement, IDraggable {}

Menampilkan elemen SVG root

Metode getRootSvg menampilkan elemen svg root (biasanya grup) yang menampung semua elemen lain yang membentuk tampilan untuk elemen yang dapat ditarik.

getSvgRoot() {
  return this.rootSvg;
}

Tampilkan kemampuan berpindah

Metode isMovable menampilkan apakah objek yang dapat ditarik saat ini dapat dipindahkan (karena Anda mungkin ingin menonaktifkan penarikan objek untuk sementara). Jika isMovable menampilkan false, ruang kerja akan ditarik.

isMovable() {
  return true;
}

Posisi pengembalian

Metode getRelativeToSurfaceXY menampilkan Coordinate yang menentukan lokasi sudut awal atas dari koordinat ruang kerja yang dapat ditarik.

Koordinat ruang kerja memiliki titik asal di sebelah kiri dan teratas absolut dari ruang kerja. Selain itu, ruang kerja tersebut tidak berubah saat ruang kerja diskalakan atau dipindahkan.

getRelativeToSurfaceXY() {
  return this.loc;
}

Mulai penarikan

Metode startDrag menginisialisasi penarikan pada elemen yang dapat ditarik. Metode ini tidak akan memindahkan elemen yang dapat ditarik. Namun, Anda harus menyimpan data atau membuat objek yang diperlukan untuk menyelesaikan penarikan. Hal ini mencakup data apa pun yang perlu Anda kembalikan jika revertDrag dipanggil.

Anda juga harus mengubah elemen svg agar berada di lapisan tarik pada ruang kerja, sehingga mereka berada di atas elemen lainnya.

Ini juga membutuhkan kejadian, yang dapat Anda gunakan untuk memeriksa tombol yang ditekan. Hal ini memungkinkan Anda (misalnya) memperlakukan tarik sambil menggeser secara berbeda dari tarikan biasa.

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

Tarik

Metode drag sebenarnya memindahkan objek yang dapat ditarik. newLoc berada dalam koordinat ruang kerja, dan ada juga peristiwa yang diteruskan yang dapat Anda gunakan untuk memeriksa tombol yang ditekan.

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

Kembalikan tarik

Metode revertDrag akan menampilkan elemen yang dapat ditarik ke posisi semula di awal penarikan. Hal ini terjadi jika, misalnya, elemen yang dapat ditarik dilepaskan pada target tarik yang mencegah gerakan.

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

Akhiri tarik

Metode endDrag membersihkan tarik, melepaskan data atau objek yang tersimpan, dan menampilkan yang dapat ditarik ke lapisan aslinya.

endDrag selalu dipanggil setelah revertDrag jika revertDrag dipanggil.

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);
}

Pilihan

Elemen yang ditarik ditentukan oleh elemen yang dipilih saat tarik terdeteksi.

ISelectable

Agar dipilih, file yang dapat ditarik harus mengimplementasikan antarmuka 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.
  }
}

Tetapkan pilihan

Elemen yang dipilih dapat ditetapkan dengan memanggil Blockly.common.setSelected(). biasanya Anda perlu melakukannya sebagai respons terhadap peristiwa pointerdown dari pengguna.

  constructor() {
    this.initSvg();

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

Kompatibilitas

Draggable Anda dapat mengimplementasikan antarmuka tambahan sehingga dapat berinteraksi dengan sistem lain di Blockly.

Dapat dihapus

Anda dapat menerapkan antarmuka IDeleteable agar dapat ditarik ke tempat sampah atau target penghapusan lainnya.

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

Dapat disalin

Anda dapat mengimplementasikan antarmuka ICopyable agar file yang dapat ditarik dapat disalin dan dapat menentukan IPaster untuk ditempelkan.

Untuk mengetahui informasi selengkapnya tentang cara menyalin dan menempel, lihat Salin dan tempel.