Trình xem trước kết nối tạo bản xem trước trực quan của kết nối đang chờ xử lý. Phương thức này cho bạn biết vị trí khối kéo sẽ được kết nối khi được thả.
Trình xem trước kết nối mặc định sẽ đặt điểm đánh dấu chèn tại nơi các khối sẽ kết nối. Thao tác này cũng làm nổi bật các kết nối và tạo hiệu ứng mờ dần trên các khối sẽ được thay thế và ngắt kết nối.
Các loại kết nối đang chờ xử lý
Có hai loại kết nối đang chờ xử lý. Trong một trường hợp, khối bị bỏ qua sẽ thay thế khối hiện có và khối hiện tại bị ngắt kết nối. Trong trường hợp còn lại, khối bị bỏ được chèn mà không cần ngắt kết nối các khối khác.
Thay thế
Quá trình thay thế xảy ra khi một kết nối trên khối được kéo sẽ kết nối với một kết nối đã có khối và không có chỗ nào để gắn lại khối hiện có. Khi khối được kéo bị thả, khối được thay thế sẽ bị ngắt kết nối và khối được kéo sẽ được kết nối tại vị trí của khối đó.
Theo mặc định, chúng tôi chỉ ra điều này bằng cách đặt hiệu ứng làm mờ trên khối đang được thay thế.
Chèn
Trường hợp chèn xảy ra trong hai trường hợp. Điều này xảy ra khi một kết nối trong khối được kéo sẽ kết nối với một kết nối trống. Điều này xảy ra khi một kết nối trên khối được kéo kết nối với một kết nối đã có một khối, nhưng nó có thể được chèn giữa hai khối hiện có, để khối hiện có không bị ngắt kết nối.
Theo mặc định, chúng tôi cho biết điều này bằng cách tạo điểm đánh dấu chèn và làm nổi bật các kết nối sẽ kết nối.
Tạo trình xem trước tuỳ chỉnh
Nếu muốn sử dụng hình ảnh khác để xem trước các kết nối đang chờ xử lý, bạn có thể tạo một phương thức triển khai IConnectionPreviewer tuỳ chỉnh.
Xây dựng và vứt bỏ
Bạn cần triển khai một hàm khởi tạo và phương thức loại bỏ cho IConnectionPreviewer.
Hàm khởi tạo được gọi bất cứ khi nào một thao tác kéo khối bắt đầu và truyền khối đang được kéo. Nếu cần khởi tạo bất kỳ trạng thái nào dựa trên khối, bạn có thể thực hiện việc đó trong hàm khởi tạo.
class MyConnectionPreviewer implements IConnectionPreviewer {
constructor(draggedBlock: Blockly.BlockSvg) {
// Initialize state here.
}
}
Phương thức dispose được gọi mỗi khi một khối lệnh kéo kết thúc. Nếu cần tham chiếu đến bất kỳ trạng thái nào khi thực thể IConnectionPreviewer bị xử lý, bạn nên thực hiện việc đó tại đây.
dispose() {
// Dispose of and dereference any state.
}
Tạo bản xem trước
IConnectionPreviewer của bạn cần triển khai logic để xem trước các kết nối một cách trực quan.
Thay thế
Để xem trước các thay thế, hãy triển khai phương thức previewReplacement.
previewReplacement(draggedConn, staticConn, replacedBlock) {
// Visually indicate that the replacedBlock will be disconnected, and the
// draggedConn will be connected to the staticConn.
}
Chèn
Để xem trước nội dung chèn, hãy triển khai phương thức previewConnection.
previewConnection(draggedConn, staticConn) {
// Visually indicate the draggedConn will be connected to the staticConn.
}
Nếu muốn có một bản xem trước khác tuỳ thuộc vào việc khối được kéo có đang được kết nối với một dữ liệu đầu vào trống hay không hoặc liệu khối đó có đang được chèn giữa các khối hay không, thì bạn có thể kiểm tra xem staticConn hiện có được kết nối với một kết nối khác hay không.
Nếu staticConn hiện đã được kết nối thì draggedConn đang được chèn giữa các khối.
previewConnection(draggedConn, staticConn) {
if (staticConn.targetConnection) {
// The dragged block is being inserted between blocks.
} else {
// The dragged block is connecting to an empty input.
}
}
Bản xem trước CSS
Bạn có thể xem trước các kết nối bằng cách áp dụng css cho khối. Ví dụ: bạn có thể bật/tắt chế độ làm mờ thay thế mặc định bằng cách thêm lớp CSS blocklyReplaceable vào khối.
previewReplacement(draggedConn, staticConn, replacedBlock) {
Blockly.utils.dom.addClass(replacedblock.getSvgRoot(), 'my-custom-class');
}
Bản xem trước trình kết xuất
Bạn có thể xem trước các kết nối bằng cách triển khai trình kết xuất tuỳ chỉnh có các hook đặc biệt xem trước.
previewReplacement(draggedConn, staticConn, replacedBlock) {
const renderer = replacedBlock.workspace.getRenderer()
if (renderer.addReplacementIndicator) {
renderer.addReplacementIndicator(replacedBlock);
}
}
Ẩn bản xem trước
IConnectionPreviewer của bạn cần có khả năng ẩn bản xem trước. Lệnh này được gọi khi khối được kéo di chuyển ra khỏi phạm vi của tất cả các kết nối, do đó sẽ không có bản xem trước nào hiển thị. Lệnh này cũng được gọi ngay trước khi trình xem trước bị xử lý.
hidePreview() {
// Remove CSS classes, toggle renderer methods, etc.
}
Đăng ký và sử dụng
Cuối cùng, sau khi tạo xong IConnectionPreviewer, bạn cần đăng ký. Tính năng này liên kết trình kết xuất với một chuỗi để bạn có thể truyền chuỗi đó vào cấu hình chèn. Bạn cũng có thể truyền trực tiếp lớp IConnectionPreviewer (tức là hàm khởi tạo) vào cấu hình chèn.
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,
},
};
Để biết thêm thông tin về cách đăng ký, hãy xem phần Chèn lớp con.