Tworzenie niestandardowych mechanizmów renderowania

Aby utworzyć niestandardowy moduł renderujący, musisz utworzyć podklasę klasy Renderer. Więcej informacji o tym, czym jest renderowanie i jak działa, znajdziesz w dokumentacji dotyczącej tego zagadnienia.

class CustomRenderer extends Blockly.blockRendering.Renderer {
  constructor() {
    super();
  }
}

Bez żadnych dostosowań domyślny mechanizm renderowania wygląda tak:

podstawowy mechanizm renderowania

Możesz też utworzyć podklasę jednego z innych wbudowanych rendererów, a potem zastąpić niektóre ich części.

class CustomRenderer extends Blockly.thrasos.Renderer {
  constructor() {
    super();
  }
}

Tworzenie podklas innych komponentów renderera

Rzeczywisty kształt bloku jest określany przez podelementy w renderze.

Domyślnie klasa Renderer udostępnia działające wersje wszystkich komponentów renderera. Dzięki temu możesz zmodyfikować pojedynczy komponent bez obaw o pozostałe.

Jeśli na przykład chcesz zmienić kształty połączeń, możesz zastąpić stałe bez konieczności dotykania innych komponentów.

Więcej informacji o funkcjach poszczególnych komponentów znajdziesz w dokumentacji komponentów renderera.

Zastępowanie metod fabrycznych

Po utworzeniu podklas komponentów renderera musisz zastąpić metody fabryczne Renderer w przypadku komponentów, dla których utworzono podklasy. Dzięki temu renderowanie może prawidłowo połączyć różne komponenty.

Dla każdego rodzaju komponentu jest jedna metoda:

Rejestrowanie modułu renderującego

Na koniec, gdy skończysz tworzenie niestandardowego renderowania, musisz je zarejestrować. Dzięki temu procesor zostanie powiązany z ciągiem znaków, co umożliwi Ci przekazanie go do opcji konfiguracji.

Blockly.blockRendering.register('custom_renderer', CustomRenderer);

const workspace = Blockly.inject(blocklyDiv, {
  renderer: 'custom_renderer',
});