Sürüklenebilir

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

Blockly'ye yeni bir sürüklenebilir öğe ekleyemeyeceğiniz için çok az durumda (ör. multiselect eklentisi veya mevcut bir nesnenin sürükleme işlemlerini değiştirme) sürüklenebilir öğe eklemek isteyebilirsiniz. Bir çalışma alanı içinde oluşturulmuş nesneler yalnızca bloklar, balonlar ve çalışma alanı yorumlarıdır.

Sorumluluklar

Sürüklenebilir öğelerin, sürüklemeleri yürütürken çeşitli sorumlulukları vardır:

• svg öğelerini sürükle katmanına taşınıyor.
• Svg öğeleri çevriliyor.
• Taşıma etkinlikleri tetikleniyor.

Uygulama

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

class MyDraggable extends IRenderedElement, IDraggable {}

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

getRootSvg yöntemi, sürüklenebilir öğenin görünümünü oluşturan diğer tüm öğeleri barındıran kök svg öğesini (genellikle bir grup) döndürür.

getSvgRoot() {
  return this.rootSvg;
}

İade taşınabilirliği

isMovable yöntemi, sürüklenebilir öğenin o anda taşınabilir olup olmadığını döndürür (nesnenin sürüklenmesini geçici olarak devre dışı bırakmak isteyebileceğiniz için). isMovable değeri false değerini döndürürse çalışma alanı sürüklenir.

isMovable() {
  return true;
}

Dönüş konumu

getRelativeToSurfaceXY yöntemi, çalışma alanı koordinatlarında 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 mutlak sol ve mutlak üst noktasındadır. Ayrıca çalışma alanı ölçeklendirildiğinde veya taşındığında değişmezler.

getRelativeToSurfaceXY() {
  return this.loc;
}

Sürüklemeleri başlat

startDrag yöntemi, sürüklenebilir üzerinde bir sürüklemeyi başlatır. Bu yöntem, sürüklenebilir öğeyi hareket ettirmez. Ancak herhangi bir veriyi depolamanız veya sürükleme işlemini tamamlamak için ihtiyacınız olan nesneleri oluşturmanız gerekir. Buna, revertDrag çağrılırsa sürükleme işlemini geri almak için ihtiyaç duyacağınız tüm veriler dahildir.

Çalışma alanının sürükleme katmanında yer alacak svg öğeleri de değiştirilmelidir. Böylece, bu öğeler diğer öğelerin üzerinde yer alır.

Ayrıca, basılan tuşları kontrol etmek için kullanabileceğiniz bir etkinlik de alır. Bu, (örneğin) normal bir sürüklenmeden farklı bir şekilde geçiş yaparken sürüklemeyi işlemenize 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 aslında sürüklenebilir nesneyi taşır. newLoc, çalışma alanı koordinatlarındadır ve basılan tuşları kontrol etmek için kullanabileceğiniz bir etkinlik geçirildi.

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

Sürüklemeleri geri alma

revertDrag yöntemi, sürüklenebilir öğeyi sürüklemenin başında olduğu konuma döndürür. Örneğin, sürüklenebilir öğe hareketi önleyen bir sürükleme hedefine bırakılırsa bu durum gerçekleşir.

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

Sürüklemeleri sonlandır

endDrag yöntemi bir sürüklemeyi temizleyerek depolanan verileri veya nesneleri serbest bırakır ve sürüklenebilir öğeyi orijinal katmanına geri döndürür.

revertDrag çağrılırsa endDrag, her zaman revertDrag tarihinden 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, bir sürükleme algılandığında seçilen öğe tarafından belirlenir.

ISelectable

Sürüklenebilir 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 ayarla

Seçilen öğe, Blockly.common.setSelected() çağrısı yapılarak ayarlanabilir. genellikle bunu kullanıcıdan 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üklenebilir öğeniz, Blockly'deki diğer sistemlerle etkileşim kurabilmek için ek arayüzler uygulayabilir.

Silinebilir

Sürüklenebilir öğelerinizin çöp kutusu veya diğer silme hedefleri tarafından atılmasını sağlamak 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üklenebilir öğelerin kopyalanmasına olanak tanımak için ICopyable arayüzünü uygulayabilir ve yapıştırılmasına izin vermek için bir IPaster tanımlayabilirsiniz.

Kopyalama yapıştırma hakkında daha fazla bilgi için Kopyalama yapıştırma konusuna bakın.