Pratinjau koneksi

Pratinjau koneksi akan membuat pratinjau visual dari koneksi yang tertunda. Ini memberi indikasi di mana blok penyeret akan terhubung saat menurun.

Pratinjau koneksi default menempatkan penanda penyisipan di mana blok akan terhubung. Pola ini juga menyoroti koneksi, dan pada blok yang akan diganti dan diputus.

Jenis koneksi yang tertunda

Ada dua jenis koneksi yang tertunda. Dalam satu kasus, blok yang dilepas menggantikan blok yang ada, dan blok yang ada terputus. Di sisi lain, ini, blok yang dijatuhkan akan dimasukkan tanpa memutuskan blok lainnya.

Penggantian

Penggantian terjadi saat koneksi pada blok yang ditarik akan terhubung ke koneksi yang sudah memiliki blok, dan tidak ada jalur untuk untuk dipasang kembali. Jika blok yang ditarik dilepas, blok yang diganti akan terputus, dan blok yang diseret akan disambungkan pada tempatnya.

Secara {i>default<i}, kita tunjukkan dengan memberi efek pudar pada blok yang sedang diganti.

Penyisipan

Penyisipan terjadi dalam dua kasus. Ini terjadi ketika koneksi pada akan terhubung ke koneksi yang kosong. Dan itu terjadi ketika di blok yang ditarik menuju ke koneksi yang sudah memiliki tetapi bisa dimasukkan di antara dua blok yang ada, sehingga blok yang ada tidak terputus.

Secara default, kita menunjukkannya dengan membuat penanda penyisipan, dan menandai koneksi yang akan terhubung.

Membuat pratinjau kustom

Jika Anda ingin menggunakan visual lain untuk melihat pratinjau koneksi yang tertunda, Anda dapat buat implementasi IConnectionPreviewer kustom.

Konstruksi dan pembuangan

Anda perlu mengimplementasikan konstruktor dan metode pembuangan untuk IConnectionPreviewer.

Konstruktor dipanggil setiap kali penyeretan blok dimulai, dan diteruskan ke yang sedang ditarik. Jika Anda perlu menginisialisasi status apa pun berdasarkan , Anda bisa melakukannya di konstruktor.

class MyConnectionPreviewer implements IConnectionPreviewer {
  constructor(draggedBlock: Blockly.BlockSvg) {
    // Initialize state here.
  }
}

Metode dispose dipanggil setiap kali blok tarik berakhir. Jika Anda ingin menghapus referensi status apa pun saat instance IConnectionPreviewer dibuang, Anda Anda harus melakukannya di sini.

dispose() {
  // Dispose of and dereference any state.
}

Membuat pratinjau

IConnectionPreviewer Anda perlu menerapkan logika untuk melihat pratinjau secara visual koneksi jarak jauh.

Penggantian

Untuk melihat pratinjau penggantian, terapkan previewReplacement .

previewReplacement(draggedConn, staticConn, replacedBlock) {
  // Visually indicate that the replacedBlock will be disconnected, and the
  // draggedConn will be connected to the staticConn.
}

Penyisipan

Untuk melihat pratinjau penyisipan, terapkan metode previewConnection.

previewConnection(draggedConn, staticConn) {
  // Visually indicate the draggedConn will be connected to the staticConn.
}

Jika Anda ingin memiliki pratinjau yang berbeda bergantung pada apakah blok yang ditarik terhubung ke input kosong, atau jika dimasukkan di antara blok, Anda dapat memeriksa apakah staticConn saat ini terhubung ke koneksi lain. Jika staticConn saat ini terhubung, berarti draggedConn sedang yang disisipkan di antara blok.

previewConnection(draggedConn, staticConn) {
  if (staticConn.targetConnection) {
    // The dragged block is being inserted between blocks.
  } else {
    // The dragged block is connecting to an empty input.
  }
}

Pratinjau CSS

Anda dapat melihat pratinjau koneksi dengan menerapkan CSS ke blok tersebut. Misalnya, fade pengganti default dialihkan dengan menambahkan class CSS blocklyReplaceable dari blok tersebut.

previewReplacement(draggedConn, staticConn, replacedBlock) {
  Blockly.utils.dom.addClass(replacedblock.getSvgRoot(), 'my-custom-class');
}

Pratinjau perender

Anda dapat melihat pratinjau koneksi dengan menerapkan perender kustom yang memiliki hook pratinjau khusus.

previewReplacement(draggedConn, staticConn, replacedBlock) {
  const renderer = replacedBlock.workspace.getRenderer()
  if (renderer.addReplacementIndicator) {
    renderer.addReplacementIndicator(replacedBlock);
  }
}

Menyembunyikan pratinjau

IConnectionPreviewer Anda harus dapat menyembunyikan pratinjau. Hal ini disebut saat blok yang ditarik bergerak keluar dari jangkauan semua koneksi, sehingga tidak ada pratinjau harus ditampilkan. Fungsi ini juga akan dipanggil tepat sebelum pratinjau dihapus.

hidePreview() {
  // Remove CSS classes, toggle renderer methods, etc.
}

Pendaftaran dan penggunaan

Terakhir, setelah menyelesaikan pembuatan IConnectionPreviewer, Anda harus mendaftarkannya. Tindakan ini akan mengaitkan perender dengan string sehingga Anda dapat meneruskannya ke konfigurasi injeksi Anda. Anda juga dapat meneruskan Class IConnectionPreviewer (yaitu konstruktor) langsung ke injeksi Anda konfigurasi Anda.

Blockly.registry.register(
  Blockly.registry.Type.CONNECTION_PREVIEWER,
  'MyConnectionPreviewer',
  MyConnectionPreviewer,
);

// You can use the string.
const myWorkspace = Blockly.inject({
  // options...
  plugins: {
    connectionPreviewer: 'myConnectionPreviewer',
  },
};

// Or you can pass the class / constructor directly.
const myWorkspace = Blockly.inject({
  // options...
  plugins: {
    connectionPreviewer: MyConnectionPreviewer,
  },
};

Untuk informasi selengkapnya tentang pendaftaran, lihat Memasukkan subclass.