Özel sürükleyiciler

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 eklemek istediği için özel bir sürükleç uygular. Bu, 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);
}

Ayrıca, temel sorumlulukları zaten üstlenen yerleşik Blockly.dragging.Dragger sınıfını alt sınıfa da ayırabilirsiniz.

Sürüklemeyi başlatma

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

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. Bu işlev, sürüklenebilen öğenin yeni çalışma alanı konumunu, piksel koordinatlarında verilen totalDelta değerine göre hesaplar.

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

  • 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. Taşınabilir öğeyi, sürüklemenin sona erdiği ve fareyle üzerine gelinen sürükle hedefinin taşınabilir öğenin bırakıldığı konusunda bilgilendirmelidir. 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ükle-bırak aracınızı uyguladıktan sonra yapılandırma seçeneklerinize aktararak 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,
  },
});