Tworzenie nowego typu ikony

Aby utworzyć ikonę niestandardową, musisz wdrożyć interfejs IIcon. Informuje Blockly o tym, jak ma być renderowana ikona i jak ma być wyświetlana. po kliknięciu itd.

Zalecamy użycie klasy abstrakcyjnej Icon w podklasie, ponieważ jest ona już udostępnia domyślne implementacje wielu metod w interfejsie IIcon. za pomocą prostego interfejsu online.

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 elementu . Służy do rejestrowania ikony na potrzeby serializacji. pobierając ikonę 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');
  }

Utwórz widok ikony

Widok ikony odnosi się do elementów SVG znajdujących się na bryle.

Inicjowanie widoku

Metoda initView służy do tworzenia elementów SVG obiektów która znajduje się na danym bloku. Nowe elementy powinny być elementami podrzędnymi argumentu this.svgRoot, dzięki czemu zostaną automatycznie wyczyszczone, gdy ikona jest zniszczona.

Moduł Blockly.utils.dom ma 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.
  );
}

Zwracanie rozmiaru

Metoda getSize zwraca rozmiar ikony, więc renderer może odpowiednio ustawić blok.

Rozmiar jest podany w dowolnych „jednostkach obszaru roboczego” (które nie zmieniają się jako obszar roboczy, zmienia skalę).

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

Ustaw kolejność

Ikony mają stałą kolejność w obrębie bloku. Na przykład wbudowany mutator są zawsze widoczne przed ikonami komentarzy, widocznymi przed ikonami ostrzeżeń.

Kolejność jest określana na podstawie wartości zwróconej przez getWeight . Ikony z większą wagą dodatnią są renderowane po ikonach o mniejszej wadze. ważenie dodatnie.

getWeight() {
  return 10;
}

Zaimplementuj działanie funkcji „onclick”

Wiele ikon jest interaktywnych i po kliknięciu wykonuje określone działanie. Przykład: wszystkie wbudowane ikony wyświetlają dymek po kliknięciu. Dostępne opcje użyj metody onClick.

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

Reagowanie na zmiany w blokowaniu

Niektóre ikony chcą również reagować na zmiany w bloku, a konkretnie na zmiany oraz możliwość edycji i zwinięcia.

Możliwość edytowania

Czy ikona powinna działać inaczej w zależności od tego, czy blokada z możliwością edycji lub nie (np. nie można kliknąć, jeśli blok nie jest do edycji), zaimplementuj metodę updateEditable. Ta metoda jest wywoływana automatycznie, gdy zmieni się stan bloku, który można edytować.

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 są one Nie. Jeśli chcesz, aby Twoja ikona się wyświetlała, zastąp Metoda isShownWhenCollapsed, która zwraca 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.
}

Utylizacja ikony

Ikony powinny usuwać elementy DOM lub odwołania zewnętrzne, gdy się znajdują. lub surowców wtórnych. Domyślnie wszystkie elementy dołączone do this.svgRoot ale inne odwołania trzeba wyczyścić ręcznie. Powinien to być w metodzie dispose.

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

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