Tworzenie nowego typu ikony

Aby utworzyć ikonę niestandardową, musisz zaimplementować interfejs IIcon. Informuje to Blockly o sposobie renderowania ikony, o tym, co ma robić po jej kliknięciu itd.

Zalecamy podklasyfikowanie klasy abstrakcyjnej Icon, ponieważ zapewnia ona już domyślne implementacje wielu metod w interfejsie 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śl typ ikony

Metoda getType zwraca wartość reprezentującą typ ikony. Służy do rejestrowania ikony na potrzeby serializacji i pobierania jej 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

Metoda initView pozwala tworzyć elementy SVG ikony, które znajdują się w bloku. Nowe elementy powinny być elementami podrzędnymi elementu this.svgRoot, aby zostały automatycznie wyczyszczone po zniszczeniu ikony.

Moduł Blockly.utils.dom zapewnia przejrzysty interfejs do tworzenia instancji plików 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.
  );
}

Zwróć rozmiar

Metoda getSize zwraca rozmiar ikony, dzięki czemu mechanizm renderowania może zrobić wystarczająco szeroki blok.

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

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

Ustaw kolejność

Kolejność ikon jest stała w obrębie bloku. Na przykład ikony wbudowanych mutatorów są zawsze wyświetlane przed ikonami komentarzy, które znajdują się przed ikonami ostrzeżeń.

Kolejność jest określana na podstawie wartości zwróconej przez metodę getWeight. Ikony z wagą dodatnią są renderowane po ikonach z mniejszą wagą.

getWeight() {
  return 10;
}

Uwaga: wagi są sprawdzane tylko po dołączeniu ikony do bloku, dlatego wagi dynamiczne nie są obsługiwane.

Implementowanie działania funkcji „onclick”

Wiele ikon jest interaktywnych i po kliknięciu wykonuje pewne działanie. Na przykład wbudowane ikony prezentują po kliknięciu dymek. Do tego celu możesz użyć metody onClick.

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

Reagowanie na zmiany dotyczące blokowania

Niektóre ikony chcą też reagować na zmiany w bloku, w szczególności na zmiany w możliwości edycji i zwijaniu.

Edytowalność

Jeśli ikona powinna działać inaczej w zależności od tego, czy blok jest edytowalny (np. nie można go kliknąć, gdy nie można go edytować), zastosuj metodę updateEditable. Ta metoda jest wywoływana automatycznie, gdy zmieni się stan bloku z możliwością edytowania.

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

Zwinięcie

Niektóre ikony są wyświetlane, gdy bryła jest zwinięta, ale domyślnie nie jest. Jeśli chcesz, aby ikona była widoczna, zastąp metodę isShownWhenCollapsed, aby zwrócić 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.
}

Pozbywanie się ikony

Ikony powinny usuwać po usunięciu wszystkie elementy DOM i odwołania zewnętrzne. Domyślnie wszystkie dane dołączone do pliku this.svgRoot zostają zniszczone, ale inne pliki referencyjne należy wyczyścić ręcznie. Należy to zrobić w metodzie dispose.

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

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