Neuen Symboltyp erstellen

Um ein benutzerdefiniertes Symbol zu erstellen, müssen Sie die IIcon-Schnittstelle implementieren. Dadurch wird Blockly mitgeteilt, wie das Symbol gerendert werden soll und wie es aussehen soll. was passiert, wenn ein Nutzer darauf klickt usw.

Wir empfehlen, abgeleitete Klassen der abstrakten Klasse Icon zu erstellen, da sie bereits stellt Standardimplementierungen vieler Methoden in IIcon bereit. .

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 . Es wird zum Registrieren des Symbols für die Serialisierung verwendet. Symbol von getIcon wird abgerufen.

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

Über die Methode initView erstellen Sie die SVG-Elemente Ihres . Neue Elemente sollten untergeordnete Elemente von this.svgRoot-Element, sodass es automatisch bereinigt wird, wenn das Symbol zerstört wird.

Das Modul Blockly.utils.dom bietet eine übersichtliche Oberfläche zur Instanziierung 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. renderer kann den Block breit genug machen.

Die Größe wird in beliebigen „Arbeitsbereichseinheiten“ angegeben. (die sich nicht als Arbeitsbereich Skalieren von Änderungen).

getSize() {
  return new Blockly.utils.Size(16, 16);
}

Reihenfolge festlegen

Symbole haben eine statische Reihenfolge innerhalb des Blocks. Der integrierte Mutator Kommentarsymbole stehen immer vor Kommentarsymbolen, Warnsymbolen.

Die Reihenfolge wird durch den Wert bestimmt, der von getWeight zurückgegeben wird . Symbole mit einer höheren Gewichtung werden nach Symbolen mit weniger positive Gewichtungen.

getWeight() {
  return 10;
}

Hinweis: Die Gewichtung wird nur geprüft, wenn das Symbol an den Block angehängt wird. dynamische Gewichtungen werden nicht unterstützt.

„onclick“-Verhalten implementieren

Viele Symbole sind interaktiv und führen Aktionen aus, wenn darauf geklickt wird. Beispiel: Bei allen integrierten Symbolen wird beim Anklicken ein Infofeld angezeigt. Sie können Verwenden Sie die Methode onClick, um dies zu implementieren.

onClick() {
  // Do something when clicked.
}

Auf Blockierungsänderungen reagieren

Einige Symbole möchten auch auf Änderungen im Block reagieren, insbesondere auf Änderungen. bis hin zur Bearbeitung und der Minimierung.

Bearbeitungsmöglichkeiten

Wenn Ihr Symbol je nachdem, ob es sich um einen Block handelt, bearbeitbar oder nicht (z. B. wenn der Block nicht anklickbar ist, bearbeitbar), 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.
  }
}

Minimierte Ansicht

Einige Symbole werden angezeigt, wenn der Block minimiert ist. Standardmäßig sind sie nicht. Wenn Ihr Symbol angezeigt werden soll, überschreiben Sie isShownWhenCollapsed-Methode, um true zurückzugeben.

isShownWhenCollapsed() {
  return true;
}

und überschreiben Sie dann die Methode updateCollapsed.

updateCollapsed() {
  // By default icons are hidden when the block is collapsed. We want it to
  // be shown, so do nothing.
}

Symbol entsorgen

Symbole sollten alle dom-Elemente oder externen Verweise bereinigen, wenn sie entsorgt wurden. Standardmäßig wird alles, was an this.svgRoot angehängt wird, aber andere Referenzen müssen manuell bereinigt werden. Dies sollte Dies erfolgt in der Methode dispose.

dispose() {
  // Always call super!
  super.dispose();

  this.myBubble?.dispose();
  this.myOtherReference?.dispose();
}