Özel sürüklenebilir öğeler

Sürüklenebilir öğe, çalışma alanında bulunan ve sürüklenip bırakılabilen oluşturulmuş bir nesnedir. IDraggable arayüzünü uygularlar.

Blockly'ye yeni sürüklenebilir öğe eklemek isteyeceğiniz durumlar çok nadirdir (ör.çoklu seçim eklentisi veya mevcut bir nesnenin sürüklemeleri işleme şeklini değiştirme). Bunun nedeni, Blockly'ye yeni oluşturulmuş nesneler ekleyememenizdir. Çalışma alanında yalnızca bloklar, balonlar ve çalışma alanı yorumları oluşturulabilir.

Sorumluluklar

Sürüklenebilir öğelerin sürükleme işlemi sırasında çeşitli sorumlulukları vardır:

• SVG öğelerini sürükleme katmanına taşıma
• SVG öğelerini çevirme
• Taşıma etkinliklerini tetikleme.

Uygulama

Yeni bir sürüklenebilir öğe oluşturmak için IRenderedElement ve IDraggable arayüzlerini uygulamanız gerekir. Bu, Blockly'ye nesnenizin görünür olduğunu ve sürüklenebileceğini bildirir.

class MyDraggable extends IRenderedElement, IDraggable {}

Kök SVG öğesini döndürme

getRootSvg yöntemi, sürükleneni oluşturan tüm diğer öğeleri içeren kök svg öğesini (genellikle bir grup) döndürür.

getSvgRoot() {
  return this.rootSvg;
}

İade edilebilir

isMovable yöntemi, sürüklenebilir öğenin şu anda taşınıp taşınamayacağını döndürür (bir nesnenin sürüklenmesini geçici olarak devre dışı bırakmak isteyebilirsiniz). isMovable döndürülürse bunun yerine çalışma alanı sürüklenir.false

isMovable() {
  return true;
}

Dönüş pozisyonu

getRelativeToSurfaceXY yöntemi, çalışma alanındaki sürüklenebilir öğenin üst başlangıç köşesinin konumunu belirten bir Coordinate döndürür.

Çalışma alanı koordinatlarının başlangıç noktası, çalışma alanının en sol ve en üst noktasıdır. Ayrıca, çalışma alanı ölçeklendirildiğinde veya taşındığında da değişmezler.

getRelativeToSurfaceXY() {
  return this.loc;
}

Sürüklemeleri başlatma

startDrag yöntemi, sürüklenebilir öğede sürükleme işlemini başlatır. Bu yöntem, sürüklenebilir öğeyi taşımaz. Ancak sürükleme işlemini tamamlamak için gereken verileri saklamanız veya nesneleri oluşturmanız gerekir. Bu, revertDrag çağrılırsa sürüklemeyi geri almak için gereken tüm verileri içerir.

Ayrıca, SVG öğelerini çalışma alanının sürükleme katmanına taşıyarak diğer öğelerin üzerinde yer almalarını sağlamalıdır.

Ayrıca, basılan tuşları kontrol etmek için kullanabileceğiniz bir etkinlik de alır. Bu, (örneğin) kaydırma tuşuna basılı tutarak yapılan bir sürüklemeyi normal bir sürüklemeden farklı şekilde ele almanıza olanak tanır.

startDrag(e) {
  // Save the original location so we can revert the drag.
  this.startLoc = this.getRelativeToSurfaceXY();

  // Disable resizing the workspace for performance.
  this.workspace.setResizesEnabled(false);

  // Put the element on the drag layer.
  this.workspace.getLayerManager()?.moveToDragLayer(this);

  // Fire a drag event...

  // etc...
}

Sürüklenim

drag yöntemi, sürüklenebilir nesneyi taşır. newLoc, çalışma alanı koordinatlarında bulunur. Ayrıca, basılan tuşları kontrol etmek için kullanabileceğiniz bir etkinlik de iletilir.

drag(newLoc, e) {
  this.moveTo(newLoc);
}

Sürükleme işlemlerini geri alma

revertDrag yöntemi, sürüklenebilir öğeyi sürükleme işleminin başlangıcındaki konumuna döndürür. Örneğin, sürüklenebilir öğe, hareket etmeyi engelleyen bir sürükleme hedefinin üzerine bırakılırsa bu durum oluşur.

revertDrag() {
  // Move back to the position that was stored in `startDrag`.
  this.moveTo(this.startLoc);
}

Sürükleme işlemlerini sonlandırma

endDrag yöntemi, sürükleme işlemini temizler, depolanan verileri veya nesneleri serbest bırakır ve sürüklenebilir öğeyi orijinal katmanına döndürür.

revertDrag çağrılırsa endDrag her zaman revertDrag'den sonra çağrılır.

endDrag() {
  // Put the element back on its original layer (in this case BLOCK).
  this.workspace
    .getLayerManager()
    ?.moveOffDragLayer(this, Blockly.layers.BLOCK);

  // Allow the workspace to start resizing again.
  this.workspace.setResizesEnabled(true);
}

Seçim

Sürüklenen öğe, sürükleme işlemi algılandığında seçili olan öğeye göre belirlenir.

ISelectable

Sürüklenir bir öğenin seçilebilmesi için ISelectable arayüzünü uygulaması gerekir.

class MyDraggable implements ISelectable {
  constructor(workspace) {
    this.id = Blockly.utils.idGenerator.genUid();
    this.workspace = workspace;
  }

  select() {
    // Visually indicate this draggable is selected.
  }

  unselect() {
    // Visually indicate this draggable is not selected.
  }
}

Seçimi ayarlama

Seçili öğe, Blockly.common.setSelected() çağrılarak ayarlanabilir. Genellikle bunu, kullanıcıdan gelen bir pointerdown etkinliğine yanıt olarak yapmak istersiniz.

  constructor() {
    this.initSvg();

    Blockly.browserEvents.conditionalBind(
      this.getSvgRoot(),
      'pointerdown',
      this,
      () => Blockly.common.setSelected(this));
  }

Uyumluluk

Sürükleyebileceğiniz öğe, Blockly'deki diğer sistemlerle etkileşim kurabilmesi için ek arayüzler uygulayabilir.

Silinebilir

Sürükleyebildiğiniz öğelerin çöp kutusu veya diğer silme hedefleri tarafından silinmesine izin vermek için IDeleteable arayüzünü uygulayabilirsiniz.

class MyDraggable implements IDeletable {
  isDeletable() {
    return true;
  }

  dispose() {
    // Dispose of any references to data or SVG elements.
  }

  setDeleteStyle() {
    // Visually indicate that the draggable is about to be deleted.
  }
}

Kopyalanabilir

Sürükleyebildiğiniz öğelerin kopyalanmasına izin vermek için ICopyable arayüzünü uygulayabilir ve yapıştırılmasına izin vermek için IPaster tanımlayabilirsiniz.

Kopyalama ve yapıştırma hakkında daha fazla bilgi için Kopyalama ve yapıştırma başlıklı makaleyi inceleyin.