Bağlantı önizleyenler

Bağlantı önizleme aracı, bekleyen bir bağlantının görsel önizlemesini oluşturur. Google Sürükleme bloğunun nereye bağlanacağını gösterir. düştü.

Varsayılan bağlantı önizleyici, ekleme işaretçileri yerleştirir nerede bulacağını göstereceğim. Ayrıca bağlantıları vurgular ve bu, değiştirilecek ve bağlantısı kesilecek bloklar üzerindeki etkisidir.

Bekleyen bağlantı türleri

İki tür bekleyen bağlantı vardır. Bir durumda, bırakılan blok mevcut engellemenin yerini alır ve mevcut engellemenin bağlantısı kaldırılır. Diğer durumda, bırakılan blok, diğer blokların bağlantısı kesilmeden eklenir.

Değiştirme

Değiştirme işlemi, sürüklenen bloktaki bir bağlantı bağlandığında yapılır veya mevcut blokun herhangi bir yeri yoktur. bloktur. Sürüklenen blok bırakıldığında, değiştirilen blok bağlantısı kesilir ve sürüklenen blok onun yerine bağlanır.

Varsayılan olarak bunu, oluşturulan bloka bir solma efekti uygulayarak değiştirildi.

Ekleme

Ekleme iki durumda gerçekleşir. Sürüklenen kişi üzerinde bir bağlantı boş bir bağlantıya bağlanıyor. Bir kullanıcının bağlantısı, halihazırda bir ancak mevcut iki blok arasına eklenebilir. Dolayısıyla mevcut blokun bağlantısı kesilmiyor.

Varsayılan olarak, bunu, ekleme işaretçileri oluşturarak ve değişeceğini unutmayın.

Ö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

Projeniz için bir oluşturucu ve imha yöntemi uygulamanız IConnectionPreviewer

Oluşturucu, bir blok sürükleme başladığında çağrılır ve öğe bir bloktur. 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. Gerekirse IConnectionPreviewer örneğiniz atıldığında tüm durumların referansını kaldırın. Bunu burada yapmalıdır.

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

Önizlemeyi oluşturma

IConnectionPreviewer uygulamanızın, görsel önizleme için mantığı uygulaması gerekir bağlantılar.

Değiştirme

Değişiklikleri önizlemek için previewReplacement uygulayın yöntemidir.

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

Ekleme

Kampanyaları ö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 mevcut olup olmadığına bağlı olarak farklı bir önizlemeye sahip olmak isterseniz boş bir girişe bağlı olması veya bloklar arasına eklenmesi durumunda staticConn cihazının şu anda başka bir bağlantıya bağlı olup olmadığını kontrol edebilirsiniz. staticConn şu anda bağlıysa draggedConn bağlanıyordur satır öğeleri ekleyin.

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ğuya CSS uygulayarak bağlantıları önizleyebilirsiniz. Örneğin, varsayılan yedek karartma, blocklyReplaceable CSS sınıfı eklenerek açılır kullanabilirsiniz.

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

Oluşturucu önizlemeleri

Bir özel oluşturucu uygulayarak bağlantıları önizleyebilirsiniz. video reklamlar oluşturun.

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. Buna ne ad verilir? Sürüklenen blok tüm bağlantıların kapsama alanı dışına çıktığında, önizleme gösterilmez gösterilmelidir. Ayrıca, önizleyen kişi silinmeden hemen önce de ç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ığınızda bunu kaydetmeniz gerekir. Bu işlem, oluşturucuyu bir dizeyle ilişkilendirir. Bu sayede, bunu ekleme yapılandırmanıza ileteceksiniz. Ayrıca IConnectionPreviewer sınıfını (ör. kurucu) doğrudan ekleme işleminize yapılandırma.

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 bkz. Alt sınıf ekleme.