Draggable

Ein ziehbares Objekt ist ein gerendertes Objekt im Arbeitsbereich, das per Drag-and-drop verschoben werden kann. Er implementiert die IDraggable-Schnittstelle.

Es gibt nur sehr wenige Fälle, in denen Sie ein neues ziehbares Element zu Blockly hinzufügen möchten, z.B. das Mehrfachauswahl-Plug-in oder das Verschieben eines vorhandenen Objekts zum Verschieben, da Sie keine neuen gerenderten Objekte zu Blockly hinzufügen können. Die einzigen gerenderten Objekte, die in einem Arbeitsbereich vorhanden sein können, sind Blöcke, Blasen und Kommentare im Arbeitsbereich.

Verantwortlichkeiten

Ziehbare Elemente haben beim Ausführen von Ziehbewegungen mehrere Aufgaben:

• SVG-Elemente werden in die Drag-Layer-Ebene verschoben.
• SVG-Elemente werden übersetzt.
• Das Auslösen von Verschieben-Ereignissen wird ausgelöst.

Implementierung

Wenn Sie ein neues ziehbares Element erstellen möchten, müssen Sie die Schnittstellen IRenderedElement und IDraggable implementieren. Dadurch teilt Blockly mit, dass Ihr Objekt sichtbar ist und gezogen werden kann.

class MyDraggable extends IRenderedElement, IDraggable {}

SVG-Stammelement zurückgeben

Die Methode getRootSvg gibt das svg-Stammelement (in der Regel eine Gruppe) zurück, das alle anderen Elemente enthält, aus denen die Ansicht des ziehbaren Elements besteht.

getSvgRoot() {
  return this.rootSvg;
}

Rückgabebeweglichkeit

Die Methode isMovable gibt zurück, ob das ziehbare Element derzeit verschiebbar ist, da Sie das Ziehen eines Objekts möglicherweise vorübergehend deaktivieren möchten. Wenn isMovable den Wert false zurückgibt, wird der Arbeitsbereich stattdessen gezogen.

isMovable() {
  return true;
}

Rückgabeposition

Die Methode getRelativeToSurfaceXY gibt einen Coordinate zurück, der die Position der oberen Startecke der ziehbaren in den Arbeitsbereichskoordinaten angibt.

Die Koordinaten des Arbeitsbereichs haben einen Ursprung ganz links und ganz oben im Arbeitsbereich. Sie ändern sich nicht, wenn der Arbeitsbereich skaliert oder verschoben wird.

getRelativeToSurfaceXY() {
  return this.loc;
}

Ziehen starten

Die Methode startDrag initialisiert einen Drag für das ziehbare Element. Durch diese Methode wird das ziehbare Element nicht verschoben. Sie sollten jedoch alle Daten speichern oder Objekte erstellen, die Sie zum Abschließen des Drag-Vorgangs benötigen. Dies schließt alle Daten ein, die Sie beim Aufrufen von revertDrag zurücksetzen müssten.

Außerdem sollten sich die SVG-Elemente so ändern, dass sie sich auf der Ziehebene des Arbeitsbereichs befinden, sodass sie sich über allen anderen Elementen befinden.

Außerdem wird ein Ereignis erfasst, mit dem Sie prüfen können, ob die Tasten gedrückt wurden. So können Sie beispielsweise einen Zug beim Verschieben anders behandeln als normal.

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...
}

Strömungswiderstand

Mit der Methode drag wird das verschiebbare Objekt tatsächlich verschoben. Die newLoc ist in Arbeitsbereichskoordinaten angegeben und es wird auch ein Ereignis übergeben, mit dem Sie prüfen können, ob die Tasten gedrückt wurden.

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

Ziehbewegungen rückgängig machen

Die Methode revertDrag gibt das ziehbare Element an die Position zurück, an der es sich am Anfang des Ziehvorgangs befand. Dies ist beispielsweise der Fall, wenn das ziehbare Element auf einem Drag-Ziel abgelegt wird, das eine Bewegung verhindert.

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

Ziehbewegungen beenden

Die Methode endDrag bereinigt einen Ziehpunkt, gibt alle gespeicherten Daten oder Objekte frei und gibt das ziehbare Element in seiner ursprünglichen Ebene zurück.

endDrag wird immer nach revertDrag aufgerufen, wenn revertDrag aufgerufen wird.

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);
}

Auswahl

Das Element, das gezogen wird, wird durch das Element bestimmt, das ausgewählt wird, wenn ein Ziehen erkannt wird.

ISelectable

Zur Auswahl muss ein ziehbares Element die Schnittstelle ISelectable implementiert haben.

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.
  }
}

Auswahl festlegen

Das ausgewählte Element kann durch Aufrufen von Blockly.common.setSelected() festgelegt werden. Das ist normalerweise als Reaktion auf ein pointerdown-Ereignis des Nutzers erforderlich.

  constructor() {
    this.initSvg();

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

Kompatibilität

Ihr ziehbares Element kann zusätzliche Schnittstellen implementieren, damit es mit anderen Systemen in Blockly interagieren kann.

Löschbar

Sie können die IDeleteable-Schnittstelle implementieren, damit Ihr ziehbares Element vom Papierkorb oder von anderen Löschzielen entsorgt wird.

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.
  }
}

Kopierbar

Sie können die ICopyable-Schnittstelle implementieren, damit Ihr ziehbares Element kopiert werden kann, und eine IPaster für das Einfügen definieren.

Weitere Informationen zum Kopieren und Einfügen finden Sie unter Kopieren/Einfügen.