Personalizzazione avanzata

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

Classi sostituibili

È possibile sostituire le seguenti classi Blockly:

Corso Blockly	Interfaccia	Nome del tipo di registro
Blockly.dragging.Dragger	Blockly.IDragger	blockDragger
Blockly.ConnectionChecker	Blockly.IConnectionChecker	connectionChecker
Blockly.InsertionMarkerPreviewer	Blockly.IConnectionPreviewer	connectionPreviewer
Blockly.HorizontalFlyout	Blockly.IFlyout	flyoutsHorizontalToolbox
Blockly.VerticalFlyout	Blockly.IFlyout	flyoutsVerticalToolbox
Blockly.MetricsManager	Blockly.IMetricsManager	metricsManager
Blockly.Toolbox	Blockly.IToolbox	toolbox
Blockly.VariableMap	Blockly.IVariableMap	variableMap
Blockly.VariableModel	Blockly.IVariableModel	--

Per informazioni su come sostituire un renderer, consulta Creare renderer personalizzati.

Creare una classe sostitutiva

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 base) implementi tutte le funzioni nell'interfaccia e rispetti tutti i requisiti descritti nei commenti sull'interfaccia.

Per indicare al controllo del tipo che implementi un'interfaccia specifica, annotare la classe con il tag JSDoc @implements {InterfaceName} (in JavaScript) o la parola chiave implements (in TypeScript).

Comunicare a Blockly la classe sostitutiva

Esistono due modi per comunicare a Blockly la classe di sostituzione: registrarla come classe predefinita del suo tipo (opzione preferita) o inserirla utilizzando l'opzione di configurazione plugins.

Registrare la classe sostitutiva come predefinita

Il modo migliore per comunicare a Blockly la classe di sostituzione è registrarla come predefinita per il suo tipo. Per farlo, chiama Blockly.registry.register utilizzando il nome Blockly.registry.DEFAULT e imposta il parametro opt_allowOverrides su true.

Blockly.registry.register(
  Blockly.registry.Type.VARIABLE_MODEL,
  Blockly.registry.DEFAULT,
  CustomVariableModel,
  true,
);

Inserisci la classe sostitutiva

Puoi anche inserire classi di sostituzione utilizzando l'opzione di configurazione plugins. Si tratta di un oggetto che utilizza i nomi dei tipi di registro come nomi delle proprietà e le classi di sostituzione o i nomi registrati come valori delle proprietà.

Nonostante il nome della proprietà plugins, la tua classe non deve essere pacchettizzata e distribuita tramite npm come i plug-in utilizzati per estendere Blockly.

Supera il corso sostitutivo entro il giorno Blockly.inject:

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

In alternativa, registra la classe utilizzando Blockly.registry.register e passa il nome registrato a Blockly.inject. Questo è utile se memorizzi le opzioni di configurazione come JSON puro.

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

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