Trình xem trước kết nối sẽ tạo bản xem trước trực quan cho kết nối đang chờ xử lý. Nó cung cấp cho bạn chỉ báo về vị trí khối kéo sẽ được kết nối khi giảm.
Trình xem trước kết nối mặc định đặt điểm đánh dấu chèn nơi các khối sẽ kết nối. Tính năng này cũng làm nổi bật các kết nối và làm mờ ảnh hưởng đến các khối sẽ bị 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ỏ thay thế khối hiện có và khối hiện có bị ngắt kết nối. Trong mô hình khác khối đã thả sẽ được chèn vào mà không ngắt kết nối các khối khác.
Thay thế
Quá trình thay thế diễn ra khi một kết nối trên khối đã kéo sẽ kết nối với một kết nối đã bị chặn và không có kết nối nào cho khối để được đính kèm lại. Khi khối đã kéo bị thả, khối được thay thế sẽ bị ngắt kết nối và khối đã kéo sẽ được kết nối vào vị trí của khối.
Theo mặc định, chúng tôi cho biết điều này bằng cách đặt hiệu ứng làm mờ trên khối đang được bị thay thế.
Chèn
Việc chèn xảy ra trong 2 trường hợp. Điều này xảy ra khi một kết nối trên 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 sẽ chuyển đến một kết nối đã có nhưng có thể được chèn vào giữa hai khối hiện có, do đó mã 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 các điểm đánh dấu chèn và đánh dấu 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à tiêu huỷ
Bạn cần triển khai một hàm khởi tạo và một phương thức loại bỏ cho
IConnectionPreviewer.
Hàm khởi tạo được gọi mỗi khi bắt đầu kéo khối và được truyền giá trị đang được kéo. Nếu bạn cần khởi tạo bất kỳ trạng thái nào dựa trên 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 bất cứ khi nào một thao tác kéo khối kết thúc. Nếu bạn cần
huỷ tham chiếu bất kỳ trạng thái nào khi thực thể IConnectionPreviewer bị huỷ bỏ, bạn
nên làm việc đó ở đâ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 trực quan
kết nối.
Thay thế
Để xem trước nội dung thay thế, hãy triển khai 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 các trường hợp 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 bạn 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ó
được kết nối với một đầu vào trống hoặc nếu mã này được chèn giữa các khối,
bạn có thể kiểm tra xem staticConn hiện có được kết nối với kết nối nào khác không.
Nếu staticConn hiện đang được kết nối thì draggedConn đang được kết nối
đượ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ụ:
Chế độ làm mờ thay thế mặc định được bật/tắt 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ó nội dung hấp dẫn xem trước đặc biệt.
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. Thao tác này sẽ đượ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, vì vậy không có bản xem trước nào
sẽ xuất hiện. Lệnh này cũng được gọi ngay trước khi hệ thống xử lý trình xem trước.
hidePreview() {
// Remove CSS classes, toggle renderer methods, etc.
}
Đăng ký và sử dụng
Cuối cùng, sau khi hoàn tất việc tạo IConnectionPreviewer, bạn
bạn cần đăng ký tài khoản. Thao tác này sẽ liên kết trình kết xuất với một chuỗi để bạn có thể
hãy chuyển tệp đó vào cấu hình chèn. Bạn cũng có thể chuyển
Lớp IConnectionPreviewer (tức là hàm khởi tạo) trực tiếp vào nội dung 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 Chèn các lớp con.