Bağlantı önizleyenler

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.