Tworzenie ikon niestandardowych

Aby utworzyć ikonę niestandardową, musisz zaimplementować interfejs IIcon. Dzięki temu Blockly będzie wiedzieć, jak ma renderować ikonę, co ma się stać po kliknięciu ikony itp.

Zalecamy utworzenie podklasy klasy abstrakcyjnej Icon, ponieważ zawiera ona domyślne implementacje wielu metod z interfejsu IIcon.

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

Określanie typu ikony

Metoda getType zwraca wartość reprezentującą typ ikony. Służy do rejestrowania ikony na potrzeby serializacji i pobierania ikony z getIcon.

JavaScript

getType() {
  return new Blockly.icons.IconType('my_icon');
}

TypeScript

getType(): Blockly.icons.IconType<MyIcon> {
  return new Blockly.icons.IconType<MyIcon>('my_icon');
}

Tworzenie widoku ikony

Widok ikony odnosi się do elementów SVG, które znajdują się w bloku.

Inicjowanie widoku

W metodzie initView tworzysz elementy SVG ikony , które znajdują się w bloku. Nowe elementy powinny być elementami podrzędnymi elementu this.svgRoot, aby były automatycznie usuwane po zniszczeniu ikony.

Moduł Blockly.utils.dom zapewnia przejrzysty interfejs do tworzenia instancji SVG.

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

Zwracanie rozmiaru

Metoda getSize zwraca rozmiar ikony, dzięki czemu renderer może powiększyć blok.

Rozmiar jest podawany w dowolnych „jednostkach obszaru roboczego” (które nie zmieniają się wraz ze zmianą skali obszaru roboczego).

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

Ustawianie kolejności

Ikony mają statyczną kolejność w bloku. Na przykład wbudowane ikony mutatorów są zawsze wyświetlane przed ikonami komentarzy, które są wyświetlane przed ikonami ostrzeżeń.

Kolejność jest kontrolowana przez wartość zwracaną przez getWeight metodę. Ikony z większą wagą są renderowane po ikonach z mniejszą wagą.

getWeight() {
  return 10;
}

Implementowanie działania po kliknięciu

Wiele ikon jest interaktywnych i wykonuje jakąś czynność po kliknięciu. Na przykład, wszystkie wbudowane ikony wyświetlają dymek po kliknięciu. Aby to zaimplementować, możesz użyć metody onClick.

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

Reagowanie na zmiany bloku

Niektóre ikony reagują też na zmiany w bloku, w szczególności na zmiany dotyczące możliwości edycji i zwinięcia.

Możliwość edycji

Jeśli ikona ma się zachowywać inaczej w zależności od tego, czy blok można edytować, czy nie (np. nie można jej kliknąć, gdy blok nie jest edytowalny), zaimplementuj metodę updateEditable. Ta metoda jest wywoływana automatycznie, gdy zmienia się stan edytowalności bloku.

updateEditable() {
  if (this.sourceBlock.isEditable()) {
    // Do editable things.
  } else {
    // Do non-editable things.
  }
}

Zwinięcie

Niektóre ikony są wyświetlane, gdy blok jest zwinięty, ale domyślnie tak nie jest. Jeśli chcesz, aby ikona była wyświetlana, zastąp metodę isShownWhenCollapsed, aby zwracała wartość true.

isShownWhenCollapsed() {
  return true;
}

Następnie zastąp metodę updateCollapsed.

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

Usuwanie ikony

Ikony powinny zwalniać miejsce z elementów DOM lub odwołań zewnętrznych, gdy są usuwane. Domyślnie wszystko, co jest dołączone do this.svgRoot, jest niszczone, ale inne odwołania trzeba usunąć ręcznie. Należy to zrobić w metodzie dispose.

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

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