Es gibt mehrere Möglichkeiten, das Aussehen von Verbindungen anzupassen. und zunehmender Schwierigkeitsgrad. Sie alle müssen ein benutzerdefinierten Renderer.
Grundlegende Dimensionen
Sie können Verbindungen anpassen, indem Sie ihre Breite oder Höhe ändern, die Grundform beibehalten. Dazu müssen Sie ein benutzerdefinierten Konstantenanbieter-Komponente und einige Konstanten überschreiben.
Unterschiedliche Renderer definieren und verwenden unterschiedliche Konstanten. Sehen Sie sich die Referenzdokumentation für Ihre Superklasse:
Für den Basis-Renderer können Sie NOTCH_WIDTH überschreiben und
NOTCH_HEIGHT für nächste und vorherige Verbindungen und
TAB_WIDTH und TAB_HEIGHT für Ein- und Ausgabe
Verbindungen.
class CustomConstantProvider extends Blockly.blockRendering.ConstantProvider {
constructor() {
super();
this.NOTCH_WIDTH = 20;
this.NOTCH_HEIGHT = 10;
this.TAB_HEIGHT = 8;
}
}
Grundformen
Sie können Verbindungen anpassen, indem Sie ihre Grundform überschreiben. Grundformen eine Höhe, eine Breite und zwei Pfade.
Bei jedem Pfad wird dieselbe Form gezeichnet, jedoch von den anderen Enden aus!
Dies ist notwendig, denn wenn die Leiste den Umriss des wird jede Art von Verbindung in beide Richtungen gezeichnet. Beispiel: Vorherige Verbindungen werden von links nach rechts gezeichnet, die nächsten Verbindungen von rechts nach links gezogen werden. Sie müssen also Pfade für beide für diese Fälle.
Sie können die makeNotch-Methode für die nächste und vorherige Sitzung überschreiben.
Verbindungen und die makePuzzleTab-Methode für Eingabe- und
Ausgangsverbindungen.
class CustomConstantProvider extends Blockly.blockRendering.ConstantProvider {
makePuzzleTab() {
const width = this.TAB_WIDTH;
const height = this.TAB_HEIGHT;
return {
type: this.SHAPES.PUZZLE,
width,
height,
pathUp: Blockly.utils.svgPaths.line([
Blockly.utils.svgPaths.point(-width, -height / 2),
Blockly.utils.svgPaths.point(width, -height / 2)]),
pathDown: Blockly.utils.svgPaths.line([
Blockly.utils.svgPaths.point(-width, height / 2),
Blockly.utils.svgPaths.point(width, height / 2)]),
};
}
}
In der Dokumentation zum MDN-SVG-Pfad erfahren Sie, wie Sie
um Pfadzeichenfolgen zu definieren. Der Namespace Blockly.utils.svgPaths wird bereitgestellt
als dünner Wrapper um diese Zeichenfolgen, um sie besser lesbar zu machen.
Formen für Verbindungsprüfungen
Sie können Verbindungen anpassen, indem Sie die Form basierend auf den Verbindungsprüfung durchführen.
Auf diese Weise können Sie verschiedene Formen erstellen, um verschiedene Datentypen darzustellen. So könnten Strings durch dreieckige Verbindungen dargestellt werden, während Boolesche Werte werden durch runde Verbindungen dargestellt.
Um verschiedene Formen für verschiedene Verbindungsprüfungen bereitzustellen, müssen Sie
Methode shapeFor Die zurückgegebenen Formen sollten initialisiert werden.
in „init“.
Unter Basisformen finden Sie Informationen dazu, welche Arten von Formen Formen werden unterstützt.
export class ConstantProvider extends Blockly.blockRendering.BaseConstantProvider {
shapeFor(connection) {
let check = connection.getCheck();
// For connections with no check, match any child block.
if (!check && connection.targetConnection) {
check = connection.targetConnection.getCheck();
}
if (check && check.includes('String')) return this.TRIANGULAR_TAB;
if (check && check.includes('Boolean')) return this.ROUND_TAB;
return super.shapeFor(connection);
}
}
Benutzerdefinierte Eingaben
Sie können Verbindungsformen anpassen, indem Sie eine vollständig benutzerdefinierte Eingabe erstellen. Dieses wird nur erstellt, wenn Sie möchten, dass einige Verbindungen sich von anderen unterscheiden, das nicht auf der Verbindungsprüfung basieren soll.
Wenn z. B. einige Werteingaben wie Anweisungseingaben eingerückt werden sollen, können Sie eine benutzerdefinierte Eingabe erstellen.
Benutzerdefinierte Eingabeklasse erstellen
Folgen Sie der Anleitung zum Erstellen einer benutzerdefinierten Eingabe.
Einen messbaren
Sie müssen ein messbares Element erstellen, das Ihre benutzerdefinierte Eingabe darstellt.
Ihre benutzerdefinierte, messbare Eingabe sollte von
Blockly.blockRendering.InputConnection Sie können auch
Messdaten, die Sie benötigen,
um die Form der Eingabe zu zeichnen.
export class CustomInputMeasurable extends Blockly.blockRendering.InputConnection {
constructor(constants, input) {
super(constants, input);
// Any extra measurement data...
}
}
Messbare Werte instanziieren
Ihre Renderinginformationen müssen Ihre benutzerdefinierten
messbar sind. Dazu müssen Sie die Methode addInput_ überschreiben.
export class RenderInfo extends Blockly.blockRendering.RenderInfo {
addInput_(input, activeRow) {
if (input instanceof CustomInput) {
activeRow.elements.push(new CustomInputMeasurable(this.constants_, input));
}
super.addInput_(input, activeRow);
}
}
Optional: Zeile erstellen
Standardmäßig werden durch Eingaben keine neuen Zeilen erstellt. Wenn Sie Ihre Eingabe
um das Ende einer Zeile auszulösen, müssen Sie den
shouldStartNewRow_-Methode Ihres
Informationen zum Rendern.
export class RenderInfo extends Blockly.blockRendering.RenderInfo {
shouldStartNewRow_(currInput, prevInput) {
if (prevInput instanceof CustomInput) return true;
return super.shouldStartNewRow_(currInput, prevInput);
}
}
Optional: Form für Ihre Eingabe erstellen
Es empfiehlt sich, die Form Ihres Inputs in einer konstanten für Kerben und Puzzle-Registerkarten. So bleibt Ihr Code organisiert und später leichter ändern können.
Eingabe zeichnen
Zum Schluss müssen Sie noch Ihre Leiste ändern, um die Form zu zeichnen.
Für benutzerdefinierte Eingaben gibt es folgende Optionen:
Sie können den Umriss Ihres Blocks beeinflussen, z. B. Anweisungseingaben
Oder wirken sich auf das Innere des Blocks aus, z. B. die Inline-Werteingaben
Wenn sich die Eingabe auf den Umriss des Blocks auswirkt, überschreiben Sie
drawOutline_, andernfalls überschreiben
drawInternals_
export class Drawer extends Blockly.blockRendering.Drawer {
drawOutline_() {
this.drawTop_();
for (let r = 1; r < this.info_.rows.length - 1; r++) {
const row = this.info_.rows[r];
// Insert checks for your input here!
if (row.getLastInput() instanceof CustomInputMeasurable) {
this.drawCustomInput(row);
} else if (row.hasJaggedEdge) {
this.drawJaggedEdge_(row);
} else if (row.hasStatement) {
this.drawStatementInput_(row);
} else if (row.hasExternalInput) {
this.drawValueInput_(row);
} else {
this.drawRightSideRow_(row);
}
}
this.drawBottom_();
this.drawLeft_();
}
protected drawInternals_() {
for (const row of rows) {
for (const elem of row) {
// Insert checks for your input here!
if (elem instanceof CustomInputMeasurable) {
this.drawCustomInput(elem);
}
if (Types.isInlineInput(elem)) {
this.drawInlineInput_(elem as InlineInput);
} else if (Types.isIcon(elem) || Types.isField(elem)) {
this.layoutField_(elem as Field | Icon);
}
}
}
}
}