Per creare un renderer personalizzato, devi creare una sottoclasse per la classe Renderer. Consulta i documenti sul concetto di renderingr per ulteriori informazioni su cosa sia un renderer e cosa fa.
class CustomRenderer extends Blockly.blockRendering.Renderer {
constructor() {
super();
}
}
Senza alcuna personalizzazione, il renderer predefinito ha il seguente aspetto:
Puoi anche sottoclasse uno degli altri renderer integrati e quindi eseguirne l'override.
class CustomRenderer extends Blockly.thrasos.Renderer {
constructor() {
super();
}
}
Sottoclasse altri componenti del renderer
La forma effettiva del blocco è determinata dai sottocomponenti del renderer.
Per impostazione predefinita, la classe Renderer fornisce versioni funzionanti di
tutti i componenti di rendering. In questo modo puoi modificare un singolo componente senza doverti preoccupare degli altri.
Ad esempio, se vuoi modificare le forme delle connessioni, puoi eseguire l'override delle constants senza dover toccare gli altri componenti.
Consulta la documentazione relativa ai componenti di rendering per ulteriori informazioni sulle operazioni svolte da ogni singolo componente.
Override dei metodi di fabbrica
Dopo aver assegnato una sottoclasse ai componenti di rendering, devi eseguire l'override dei metodi di fabbrica di Renderer per i componenti sottoclassificati. Ciò consente al renderer di collegare correttamente
i diversi componenti.
Esiste un metodo per ogni tipo di componente:
makeConstants_makeRenderInfo_makePathObject(tieni presente che non è presente il trattino basso)makeDrawer_
Registra il renderer
Infine, dopo aver completato la creazione del renderer personalizzato, devi registrarlo. In questo modo il renderer viene associato a una stringa in modo che tu possa passarla alla configurazione di inserimento.
Blockly.blockRendering.register('custom_renderer', CustomRenderer);
const workspace = Blockly.inject(blocklyDiv, {
renderer: 'custom_renderer',
});