Ein ziehbares Element ist ein gerendertes Objekt, das sich im Arbeitsbereich befindet und per Drag-and-drop verschoben werden kann. Sie implementieren die IDraggable-Schnittstelle.
Es gibt nur sehr wenige Fälle, in denen Sie Blockly ein neues ziehbares Element hinzufügen möchten, z. B. das Plugin für die Mehrfachauswahl oder wenn Sie ändern möchten, wie ein vorhandenes Objekt Ziehvorgänge verarbeitet. Das liegt daran, dass Sie Blockly keine neuen gerenderten Objekte hinzufügen können. Die einzigen gerenderten Objekte, die in einem Arbeitsbereich vorhanden sein können, sind Blöcke, Sprechblasen und Arbeitsbereichskommentare.
Zuständigkeiten
Drag-Objekte haben beim Ausführen von Drag-Vorgängen mehrere Aufgaben:
- SVG-Elemente werden auf die Drag-Ebene verschoben.
- SVG-Elemente übersetzen
- Bewegungs-Ereignisse auslösen
Implementierung
Wenn Sie ein neues ziehbares Element erstellen möchten, müssen Sie die Schnittstellen IRenderedElement und IDraggable implementieren. So weiß Blockly, dass Ihr Objekt sichtbar ist und gezogen werden kann.
class MyDraggable extends IRenderedElement, IDraggable {}
Gibt das SVG-Stammelement zurück.
Die Methode getRootSvg gibt das SVG-Stammelement (in der Regel eine Gruppe) zurück, das alle anderen Elemente enthält, aus denen die Ansicht für das ziehbare Element besteht.
getSvgRoot() {
return this.rootSvg;
}
Rückgabeberechtigung
Die isMovable-Methode gibt zurück, ob das ziehbare Element derzeit verschiebbar ist. Möglicherweise möchten Sie das Ziehen eines Objekts vorübergehend deaktivieren. Wenn isMovable false zurückgibt, wird stattdessen der Arbeitsbereich gezogen.
isMovable() {
return true;
}
Rückgabeposition
Die Methode getRelativeToSurfaceXY gibt ein Coordinate zurück, das die Position der oberen linken Ecke des ziehbaren Elements in Arbeitsbereichskoordinaten angibt.
Die Koordinaten des Arbeitsbereichs haben ihren Ursprung ganz links und ganz oben im Arbeitsbereich. Sie ändern sich auch nicht, wenn der Arbeitsbereich skaliert oder verschoben wird.
getRelativeToSurfaceXY() {
return this.loc;
}
Ziehen starten
Die Methode startDrag initialisiert einen Drag-Vorgang für das ziehbare Element. Bei dieser Methode wird das ziehbare Element nicht verschoben. Sie sollten jedoch alle Daten speichern oder alle Objekte erstellen, die Sie zum Ausführen des Ziehens benötigen. Dazu gehören alle Daten, die Sie benötigen, um den Drag rückgängig zu machen, wenn revertDrag aufgerufen wird.
Außerdem sollten die SVG-Elemente in die Drag-Ebene des Arbeitsbereichs verschoben werden, damit sie über allen anderen Elementen liegen.
Außerdem wird ein Ereignis übergeben, mit dem Sie prüfen können, ob Tasten gedrückt wurden. So können Sie beispielsweise einen Drag beim Schalten anders behandeln als einen normalen Drag.
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...
}
Ziehen
Die Methode drag verschiebt das ziehbare Objekt. Die newLoc befindet sich in Arbeitsbereichskoordinaten. Außerdem wird ein Ereignis übergeben, mit dem Sie prüfen können, ob Tasten gedrückt wurden.
drag(newLoc, e) {
this.moveTo(newLoc);
}
Ziehen rückgängig machen
Die Methode revertDrag setzt das ziehbare Element auf die Position zurück, die es zu Beginn des Ziehens hatte. Das passiert beispielsweise, wenn das ziehbare Element auf einem Drag-Ziel abgelegt wird, das Bewegungen verhindert.
revertDrag() {
// Move back to the position that was stored in `startDrag`.
this.moveTo(this.startLoc);
}
Ziehen beenden
Mit der Methode endDrag wird ein Ziehvorgang beendet. Dabei werden alle gespeicherten Daten oder Objekte freigegeben und das ziehbare Element wird auf seine ursprüngliche Ebene zurückgesetzt.
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 ist, wenn ein Ziehen erkannt wird.
ISelectable
Damit ein Element ausgewählt werden kann, muss es die ISelectable-Schnittstelle implementieren.
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. Normalerweise sollten Sie dies als Reaktion auf ein pointerdown-Ereignis des Nutzers tun.
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 anderen Löschzielen entsorgt werden kann.
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 das ziehbare Element kopiert werden kann, und ein IPaster definieren, damit es eingefügt werden kann.
Weitere Informationen zum Kopieren und Einfügen finden Sie unter Kopieren und Einfügen.