Elemen yang dapat ditarik kustom

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

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

Tanggung Jawab

Objek yang dapat ditarik memiliki beberapa tanggung jawab saat menjalankan penarikan:

Penerapan

Untuk membuat objek yang dapat ditarik baru, Anda harus menerapkan antarmuka IRenderedElement dan IDraggable. Hal ini memberi tahu Blockly 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 menyimpan semua elemen lain yang membentuk tampilan untuk item yang dapat ditarik.

getSvgRoot() {
  return this.rootSvg;
}

Kemampuan untuk dipindahkan

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

isMovable() {
  return true;
}

Posisi kembali

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

Koordinat ruang kerja memiliki titik asal di kiri absolut dan atas absolut ruang kerja. Selain itu, izin ini tidak berubah saat ruang kerja diskalakan atau dipindahkan.

getRelativeToSurfaceXY() {
  return this.loc;
}

Mulai penarikan

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

Hal ini juga akan mengubah elemen SVG agar berada di lapisan penarikan ruang kerja, sehingga elemen tersebut berada di atas elemen lainnya.

Fungsi ini juga menerima peristiwa, yang dapat Anda gunakan untuk memeriksa tombol yang ditekan. Hal ini memungkinkan Anda (misalnya) memperlakukan penarikan saat bergeser secara berbeda dari penarikan normal.

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 benar-benar memindahkan objek yang dapat ditarik. newLoc berada di koordinat ruang kerja, dan ada juga peristiwa yang diteruskan yang dapat Anda gunakan untuk memeriksa tombol yang ditekan.

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

Mengembalikan penarikan

Metode revertDrag mengembalikan objek yang dapat ditarik ke posisi awalnya saat awal penarikan. Hal ini terjadi jika, misalnya, objek yang dapat ditarik dilepas di target penarikan yang mencegah pergerakan.

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

Mengakhiri penarikan

Metode endDrag membersihkan operasi tarik, melepaskan data atau objek yang disimpan, dan mengembalikan item 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 penarikan terdeteksi.

ISelectable

Agar dapat dipilih, elemen 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 disetel dengan memanggil Blockly.common.setSelected(). Biasanya, Anda akan melakukannya sebagai respons terhadap peristiwa pointerdown dari pengguna.

  constructor() {
    this.initSvg();

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

Kompatibilitas

Objek yang dapat ditarik dapat menerapkan antarmuka tambahan sehingga dapat berinteraksi dengan sistem lain di Blockly.

Dapat dihapus

Anda dapat menerapkan antarmuka IDeleteable untuk mengizinkan item yang dapat ditarik dihapus oleh 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 menerapkan antarmuka ICopyable untuk mengizinkan item yang dapat ditarik disalin dan menentukan IPaster untuk mengizinkannya ditempel.

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