Zum Erstellen eines benutzerdefinierten Symbols müssen Sie die Schnittstelle IIcon implementieren.
Dadurch wird Blockly mitgeteilt, wie Ihr Symbol dargestellt werden soll, was bei einem Klick passieren soll usw.
Wir empfehlen, von der abstrakten Klasse Icon abgeleitete Klassen zu erstellen, da sie bereits Standardimplementierungen vieler Methoden in der Schnittstelle IIcon bereitstellt.
class MyIcon extends Blockly.icons.Icon {
// The constructor should always take in the source block so that svg elements
// can be properly created.
constructor(sourceBlock) {
super(sourceBlock);
}
}
Symboltyp angeben
Die Methode getType gibt einen Wert zurück, der den Typ des Symbols darstellt. Sie wird verwendet, um das Symbol für die Serialisierung zu registrieren und das Symbol aus getIcon abzurufen.
JavaScript
getType() {
return new Blockly.icons.IconType('my_icon');
}
TypeScript
getType(): Blockly.icons.IconType<MyIcon> {
return new Blockly.icons.IconType<MyIcon>('my_icon');
}
Ansicht des Symbols erstellen
Die Ansicht des Symbols bezieht sich auf die SVG-Elemente auf dem Block.
Ansicht initialisieren
Mit der Methode initView erstellen Sie die SVG-Elemente Ihres Symbols, die sich auf dem Block befinden. Neue Elemente sollten dem Element this.svgRoot untergeordnet sein, damit sie automatisch bereinigt werden, wenn das Symbol gelöscht wird.
Das Modul Blockly.utils.dom bietet eine übersichtliche Oberfläche zum Instanziieren von SVGs.
initView(pointerdownListener) {
if (this.svgRoot) return; // Already initialized.
// This adds the pointerdownListener to the svgRoot element.
// If you do not call `super` you must do this yourself.
super.initView(pointerdownListener);
Blockly.utils.dom.createSvgElement(
Blockly.utils.Svg.CIRCLE,
{
'class': 'my-css-class',
'r': '8',
'cx': '8',
'cy': '8',
},
this.svgRoot // Append to the svgRoot.
);
}
Größe zurückgeben
Die Methode getSize gibt die Größe des Symbols zurück, sodass der Renderer den Block breit genug für ihn machen kann.
Die Größe wird in beliebigen „Arbeitsbereichseinheiten“ angegeben, die sich nicht ändern, wenn sich die Größe des Arbeitsbereichs ändert.
getSize() {
return new Blockly.utils.Size(16, 16);
}
Reihenfolge festlegen
Symbole haben eine statische Reihenfolge innerhalb des Blocks. Die integrierten Mutatorsymbole werden beispielsweise immer vor Kommentarsymbolen angezeigt, also vor Warnsymbolen.
Die Reihenfolge wird durch den Wert gesteuert, der von der Methode getWeight zurückgegeben wird. Symbole mit einer höheren Gewichtung werden nach Symbolen mit einer geringeren Gewichtung gerendert.
getWeight() {
return 10;
}
„onclick“-Verhalten implementieren
Viele Symbole sind interaktiv und haben eine Aktion, wenn auf sie geklickt wird. Beispielsweise wird für alle integrierten Symbole eine Bubble angezeigt, wenn auf sie geklickt wird. Sie können die Methode onClick verwenden, um dies zu implementieren.
onClick() {
// Do something when clicked.
}
Auf Änderungen an Blockierungen reagieren
Einige Symbole möchten auch auf Änderungen im Block reagieren, insbesondere Änderungen der Bearbeitbarkeit und der Minimierung.
Bearbeitungsmöglichkeiten
Wenn sich das Symbol je nachdem, ob der Block bearbeitbar ist oder nicht, anders verhalten soll (z. B. nicht anklickbar, wenn der Block nicht bearbeitbar ist), implementieren Sie die Methode updateEditable. Diese Methode wird automatisch aufgerufen, wenn sich der bearbeitbare Status des Blocks ändert.
updateEditable() {
if (this.sourceBlock.isEditable()) {
// Do editable things.
} else {
// Do non-editable things.
}
}
Minimiert
Einige Symbole werden angezeigt, wenn der Block minimiert ist, standardmäßig jedoch nicht. Wenn Ihr Symbol angezeigt werden soll, überschreiben Sie die Methode isShownWhenCollapsed, sodass true zurückgegeben wird.
isShownWhenCollapsed() {
return true;
}
Anschließend wird die Methode updateCollapsed überschrieben.
updateCollapsed() {
// By default icons are hidden when the block is collapsed. We want it to
// be shown, so do nothing.
}
Symbol entfernen
Symbole sollten beim Entfernen alle dom-Elemente oder externen Verweise bereinigen. Standardmäßig wird alles gelöscht, was an this.svgRoot angehängt ist. Andere Verweise müssen jedoch manuell bereinigt werden. Dies sollte in der Methode dispose erfolgen.
dispose() {
// Always call super!
super.dispose();
this.myBubble?.dispose();
this.myOtherReference?.dispose();
}