Erweiterte Anpassungen

Mit Blockly können Sie bestimmte Funktionen anpassen, indem Sie die entsprechenden Blockly-Klassen ersetzen.

Austauschbare Klassen

Die folgenden Blockly-Klassen können ersetzt werden:

Blockly-Kurs	Schnittstelle	Name des Registrierungstyps
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	--

Informationen zum Ersetzen eines Renderers finden Sie unter Benutzerdefinierte Renderer erstellen.

Ersatzkurs erstellen

Um eine Ersatzklasse zu erstellen, implementieren Sie die Funktionen in der entsprechenden Schnittstelle. Sie können alle diese Funktionen in einer neuen Klasse implementieren oder die Blockly-Klasse erweitern und nur die Funktionen überschreiben, die Sie ändern möchten. Die einzige Anforderung besteht darin, dass Sie (oder die Basisklasse) alle Funktionen in der Schnittstelle implementieren und alle Anforderungen einhalten, die in Kommentaren zur Schnittstelle beschrieben sind.

Wenn Sie dem Typprüfer mitteilen möchten, dass Sie eine bestimmte Schnittstelle implementieren, versehen Sie Ihre Klasse mit dem @implements {InterfaceName}-JSDoc-Tag (in JavaScript) oder dem implements-Schlüsselwort (in TypeScript).

Blockly über die Ersatzklasse informieren

Es gibt zwei Möglichkeiten, Blockly über Ihre Ersatzklasse zu informieren: Sie können sie als Standardklasse ihres Typs registrieren (bevorzugt) oder sie mit der Konfigurationsoption plugins einfügen.

Ersatzklasse als Standard registrieren

Die bevorzugte Methode, Blockly über Ihre Ersatzklasse zu informieren, besteht darin, sie als Standard für ihren Typ zu registrieren. Rufen Sie dazu Blockly.registry.register mit dem Namen Blockly.registry.DEFAULT auf und legen Sie den Parameter opt_allowOverrides auf true fest.

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

Ersatzklasse einfügen

Sie können auch Ersatzklassen mit der plugins-Konfigurationsoption einfügen. Dies ist ein Objekt, das Registrierungstypnamen als Attributnamen und Ersatzklassen oder registrierte Namen als Attributwerte verwendet.

Trotz des Namens des Attributs plugins muss Ihre Klasse nicht wie die Plugins zum Erweitern von Blockly über npm verpackt und verteilt werden.

Entweder übergeben Sie die Ersatzklasse an Blockly.inject:

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

Oder Sie registrieren die Klasse mit Blockly.registry.register und übergeben den registrierten Namen an Blockly.inject. Das ist nützlich, wenn Sie Ihre Konfigurationsoptionen als reines JSON speichern.

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

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