Bağlantı önizleyici, beklemedeki bir bağlantının görsel önizlemesini oluşturur. Bu özellik, sürükleme bloğunun bırakıldığında nereye bağlanacağına dair bir gösterge sunar.
Varsayılan bağlantı önizleyici, blokların bağlanacağı yerlere ekleme işaretçileri yerleştirir. Aynı zamanda bağlantıları vurgular ve değiştirilecek ve bağlantısı kesilecek bloklar üzerinde şeffaflaşma efekti uygular.
Bekleyen bağlantı türleri
İki tür bekleyen bağlantı vardır. Bir durumda, çıkarılan blok mevcut bir bloğun yerine geçer ve mevcut blokun bağlantısı kesilir. Diğer durumda, bırakılan blok diğer blokların bağlantısı kesilmeden eklenir.
Değiştirme
Değişim, sürüklenen bloktaki bir bağlantı halihazırda blok içeren bir bağlantıya bağlanacaksa ve mevcut bloğun yeniden ekleneceği bir yer yoksa gerçekleştirilir. Sürüklenen blok bırakıldığında, değiştirilen blokun bağlantısı kesilir ve sürüklenen blok yerine bağlanır.
Varsayılan olarak, bu durumu, değiştirilecek bloka şeffaflaştırma efekti uygulayarak belirtiriz.
Ekleme
Ekleme iki durumda gerçekleşir. Bu durum, sürüklenen bloktaki bir bağlantı boş bir bağlantıya bağlandığında meydana gelir. Bu durum, sürüklenen bloktaki bir bağlantı, zaten bir bloğu olan bir bağlantıya gittiğinde ancak bu bağlantı, mevcut iki blokun arasına eklenebildiğinde ortaya çıkar. Böylece mevcut blokun bağlantısı kesilmez.
Varsayılan olarak, bunu ekleme işaretçileri oluşturarak ve bağlanacak bağlantıları vurgulayarak belirtiriz.
Özel önizleyici oluşturma
Beklemedeki bağlantıları önizlemek için farklı bir görsel kullanmak isterseniz özel bir IConnectionPreviewer
uygulaması oluşturabilirsiniz.
İnşaat ve imha
IConnectionPreviewer
öğeniz için oluşturucu ve elden çıkarma yöntemi uygulamanız gerekiyor.
Oluşturucu, bir blok sürükleme başladığında çağrılır ve sürüklenmekte olan bloktan geçer. Bloka bağlı olarak herhangi bir durumu başlatmanız gerekirse bunu oluşturucuda yapabilirsiniz.
class MyConnectionPreviewer implements IConnectionPreviewer {
constructor(draggedBlock: Blockly.BlockSvg) {
// Initialize state here.
}
}
Blok sürükleme sona erdiğinde dispose
yöntemi çağrılır. IConnectionPreviewer
örneğiniz imha edildiğinde herhangi bir durumun referansını kaldırmanız gerekirse bunu burada yapmanız gerekir.
dispose() {
// Dispose of and dereference any state.
}
Önizlemeyi oluşturma
IConnectionPreviewer
cihazınızın, bağlantıları görsel olarak önizlemek için mantık uygulaması gerekir.
Değiştirme
Değişimleri önizlemek için previewReplacement
yöntemini uygulayın.
previewReplacement(draggedConn, staticConn, replacedBlock) {
// Visually indicate that the replacedBlock will be disconnected, and the
// draggedConn will be connected to the staticConn.
}
Ekleme
Eklentileri önizlemek için previewConnection
yöntemini uygulayın.
previewConnection(draggedConn, staticConn) {
// Visually indicate the draggedConn will be connected to the staticConn.
}
Sürüklenen bloğun boş bir girişe mi yoksa bloklar arasına mı yerleştirildiğine bağlı olarak farklı bir önizleme görmek isterseniz staticConn
öğesinin o anda başka bir bağlantıya bağlı olup olmadığını kontrol edebilirsiniz.
staticConn
şu anda bağlıysa draggedConn
, blokların arasına yerleştirilmektedir.
previewConnection(draggedConn, staticConn) {
if (staticConn.targetConnection) {
// The dragged block is being inserted between blocks.
} else {
// The dragged block is connecting to an empty input.
}
}
CSS önizlemeleri
Bloğa CSS uygulayarak bağlantıları önizleyebilirsiniz. Örneğin, varsayılan değişim efekti, bloğa blocklyReplaceable
CSS sınıfı eklenerek açılır.
previewReplacement(draggedConn, staticConn, replacedBlock) {
Blockly.utils.dom.addClass(replacedblock.getSvgRoot(), 'my-custom-class');
}
Oluşturucu önizlemeleri
Özel önizleme kancaları olan bir özel oluşturucu uygulayarak bağlantıları önizleyebilirsiniz.
previewReplacement(draggedConn, staticConn, replacedBlock) {
const renderer = replacedBlock.workspace.getRenderer()
if (renderer.addReplacementIndicator) {
renderer.addReplacementIndicator(replacedBlock);
}
}
Önizlemeyi gizleme
IConnectionPreviewer
cihazınızın önizlemeleri gizleyebilmesi gerekir. Bu işlev, sürüklenen blok tüm bağlantı aralığının dışına çıktığında çağrılır ve böylece önizleme gösterilmemelidir. Ayrıca önizleme aracı atılmadan hemen önce çağrılır.
hidePreview() {
// Remove CSS classes, toggle renderer methods, etc.
}
Kayıt ve kullanım
Son olarak, IConnectionPreviewer
oluşturma işlemini tamamladıktan sonra kaydetmeniz gerekir. Bu işlem, oluşturucuyu ekleme yapılandırmanıza iletebilmeniz için bir dizeyle ilişkilendirir. Ayrıca, IConnectionPreviewer
sınıfını (ör. kurucu) doğrudan ekleme yapılandırmanıza geçirebilirsiniz.
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,
},
};
Kayıt hakkında daha fazla bilgi için Alt sınıf ekleme bölümüne bakın.