Sürükleyici

Taşıyıcı, kullanıcı etkileşimlerine yanıt olarak taşınabilir öğelerin sürüklenmesini koordine eden bir denetleyici nesnedir.

Özel bir sürükle seçici uygulamak isteyeceğiniz çok az durum vardır. Bunun nedeni, sürüklemeyi koordine etme konusunda özelleştirmek isteyebileceğiniz çok fazla şey olmamasıdır. scroll-options eklentisi, çalışma alanının kenarına kaydırma özelliği eklemek istediği için özel bir sürükleç uygular. Bu sürükleç, piksel koordinatlarının çalışma alanı koordinatlarına dönüştürülme şeklini değiştirir.

Sorumluluklar

Taşıyan, sürükleme işlemini gerçekleştirirken çeşitli sorumluluklara sahiptir:

• Taşınabilir öğe üzerinde sürükleme yöntemlerini çağırma.
• Taşınabilir öğenin Workspace koordinatlarında taşınması gereken konumu hesaplama.
• Fareyle üzerine gelinen sürükle hedeflerinde sürükle hedefi yöntemlerini çağırma.

Uygulama

Özel bir sürükle ve bırak aracı oluşturmak için IDragger arayüzünü uygulamanız gerekir.

class MyDragger implements IDragger {
  // Takes in the draggable being dragged and the workspace the drag
  // is occurring in.
  constructor(draggable, workspace);
}

Zaten temel sorumlulukları karşılayan yerleşik Blockly.dragging.Dragger öğesini de alt sınıfa ekleyebilirsiniz.

Sürüklemeleri başlatma

onDragStart yöntemi, sürüklemeyi başlatır. Sürüklemeyi gerçekleştirmek için gereken tüm verileri saklamalıdır. Ayrıca, sürüklenen sürüklenebilen öğede startDrag çağrılmalıdır.

Not: Her sürükleme işlemi için yeni bir sürükleyici oluşturulur. Böylece, bazı başlatma işlemleri (başlangıç konumunu kaydetme gibi) alternatif olarak oluşturucuda yapılabilir.

onDragStart(e) {
  this.startLoc = this.draggable.getRelativeToSurfaceXY();

  this.draggable.startDrag(e);
}

Sürüklenim

onDrag yöntemi bir sürükleme işlemi gerçekleştirir. Sürüklenebilir öğe için yeni çalışma alanı konumu, piksel koordinatlarında verilen totalDelta öğesine göre hesaplanmalıdır.

Ayrıca, fareyle üzerine gelinen tüm sürükleme hedeflerini de güncellemelidir.

• wouldDelete, sürükleme hedefindeki diğer kancaları çağırmadan önce her zaman çağrılmalıdır.
• onDragExit, yeni sürükle hedefinde onDragEnter çağrılmadan önce her zaman eski sürükle hedefinde çağrılmalıdır.
• onDragOver, sürükleme hedefinin üzerine ilk kez gelindiğinde onDragEnter çağrıldıktan sonra ve sürükleme hedefinin hâlâ üzerine gelindiği her onDrag çağrısında çağrılmalıdır.

onDrag(e, totalDelta) {
  // Update the draggable location.
  const delta = this.pixelsToWorkspaceUnits(totalDelta);
  const newLoc = Coordinate.sum(this.startLoc, delta);
  this.draggable.drag(newLoc, e);

  // Call wouldDeleteDraggable.
  if (isDeletable(this.draggable)) {
    this.draggable.setDeleteStyle(
      // Checks that the drag target is an `IDeleteArea` and calls `wouldDelete`
      // on it.
      this.wouldDeleteDraggable(e, this.draggable),
    );
  }

  const newDragTarget = this.workspace.getDragTarget(e);
  if (this.dragTarget !== newDragTarget) {
    // Call `onDragExit` then `onDragEnter`.
    this.dragTarget?.onDragExit(this.draggable);
    newDragTarget?.onDragEnter(this.draggable);
  }
  // Always call `onDragOver`
  newDragTarget?.onDragOver(this.draggable);
  this.dragTarget = newDragTarget;
}

Sürüklemeleri sonlandırma

onEndDrag yöntemi, sürüklemeyi sonlandırır. Sürüklenebilirliğe, sürüklemenin sona erdiğini ve fareyle üzerine gelinen sürükleme hedefine sürüklenebilir öğenin düştüğünü bildirir. Ayrıca, sürükleme hedefi bir silme alanıysa sürüklenebilen öğeyi de kaldırmalıdır.

• onDrop her zaman diğer yöntemlerden önce çağrılmalıdır.
• Sürükle hedefi sürüklemeyi engelliyorsa revertDrag çağrılmalıdır.
• endDrag, sürüklemeyi geri döndürdükten sonra ancak kullanımdan kaldırmadan önce çağrılmalıdır.
• dispose, sürüklenen hedef bir silme alanıysa çağrılmalıdır.

onDragEnd(e) {
  // Call `onDrop` first.
  const dragTarget = this.workspace.getDragTarget(e);
  if (dragTarget) {
    this.dragTarget?.onDrop(this.draggable);
  }

  // Then revert the drag (if applicable).
  if (this.shouldReturnToStart(e, this.draggable)) {
    this.draggable.revertDrag();
  }

  // Then end the drag.
  this.draggable.endDrag(e);

  // Then delete the draggable (if applicable).
  if (
    isDeletable(this.draggable) &&
    this.wouldDeleteDraggable(e, this.draggable)
  ) {
    this.draggable.dispose();
  }
}

Kayıt

Sürüklemeler algılandığında oluşturulabilmesi için sürükle sınıfınızın kaydedilmesi gerekir.

// Note that the type is BLOCK_DRAGGER even though draggers drag more than
// blocks. The name is for backwards compatibility.
Blockly.registry.register(registry.Type.BLOCK_DRAGGER, 'MY_DRAGGER', MyDragger);

Kullanım

Özel sürükleyicinizi uyguladıktan sonra, ekleme yapılandırma yapılandırmanıza ileterek kullanabilirsiniz.

const myWorkspace = Blockly.inject('blocklyDiv', {
  plugins: {
    // Note that we pass this to blockDragger even though draggers drag more
    // than blocks. The name is for backwards compatibility.
    blockDragger: MyDragger,
  },
});