Personalizzazione avanzata

Blockly ti consente di personalizzare determinate funzionalità sostituendo le classi Blockly corrispondenti.

Classi sostituibili

Le seguenti classi Blockly possono essere sostituite:

Corso Blockly Interfaccia Nomi di registrazione
Blockly.dragging.Dragger Blockly.IDragger blockDragger
Blockly.ConnectionChecker Blockly.IConnectionChecker connectionChecker
Blockly.InsertionMarkerPreviewer Blockly.IConnectionPreviewer connectionPreviewer
Blockly.Flyout Blockly.IFlyout flyoutsVerticalToolbox
flyoutsHorizontalToolbox
Blockly.MetricsManager Blockly.IMetricsManager metricsManager
Blockly.blockRendering.Renderer* -- renderer
Blockly.Toolbox Blockly.IToolbox toolbox

* Questa è la classe di base per tutti i renderer. Puoi creare una sottoclasse o un visualizzatore esistente. Vedi Creare un nuovo visualizzatore.

Le interfacce di Blockly sono definite in core/interfaces.

Creare un corso sostitutivo

Per creare una classe sostitutiva, implementa le funzioni nell'interfaccia corrispondente. Puoi implementare tutte queste funzioni in una nuova classe o estendere la classe Blockly e sostituire solo le funzioni che vuoi modificare. L'unico requisito è che tu (o la classe di base) implementi tutte le funzioni nell'interfaccia e rispetti tutti i requisiti descritti nei commenti sull'interfaccia.

Per indicare al programma di controllo dei tipi che implementi un'interfaccia specifica, annota la classe con il tag JSDoc @implements {InterfaceName} (in JavaScript) o la parola chiave implements (in TypeScript).

Inserisci il corso sostitutivo

Per comunicare a Blockly la classe di sostituzione, utilizza la proprietà plugins nelle opzioni di configurazione passate a Blockly.inject. Nonostante il nome di questa proprietà, la classe non deve essere pacchettizzata e distribuita tramite npm come i plug-in utilizzati per estendere Blockly.

Puoi passare la sottoclasse al metodo inject.

Blockly.inject('blocklyDiv', {
  plugins: {
    'metricsManager': CustomMetricsManagerClass
  }
}

In alternativa, puoi registrare la classe utilizzando Blockly.registry e utilizzare il nome del registry per iniettare la classe. Questo è utile se archivi le opzioni di configurazione come JSON puro.

Blockly.registry.register(Blockly.registry.Type.METRICS_MANAGER, 'YOUR_NAME', SubClass);

Blockly.inject('blocklyDiv', {
  plugins: {
    'metricsManager': 'YOUR_NAME'
  }
}