Neuen Feldtyp erstellen

Überlegen Sie vor dem Erstellen eines neuen Feldtyps, ob einer der anderen Methoden zum Anpassen von Feldern. Wenn Ihre Anwendung ein Werttyp ändern oder eine neue Benutzeroberfläche für einen vorhandenen Werttyp erstellen möchten, müssen Sie wahrscheinlich einen neuen Feldtyp erstellen.

So erstellen Sie ein neues Feld:

1. Implementieren Sie einen Konstruktor.
2. JSON-Schlüssel registrieren und fromJson implementieren
3. Initialisieren der On-Block-UI und des -Ereignisses verarbeiten Hörer.
4. Behebung von Ereignis-Listenern (die Benutzeroberfläche wird für du.
5. Wertverarbeitung implementieren:
6. Fügen Sie der Barrierefreiheit eine Textdarstellung des Feldwerts hinzu.
7. Fügen Sie zusätzliche Funktionen hinzu, z. B.: <ph type="x-smartling-placeholder">
   </ph>
   • Bearbeiter:
   • Updates auf dem Sperrbildschirm.
   • Serialisierung:
8. Konfigurieren Sie zusätzliche Aspekte Ihres Fachgebiets, z. B.: <ph type="x-smartling-placeholder">
   </ph>
   • Bearbeitbar und serialisierbar Properties
   • Cursor

In diesem Abschnitt wird vorausgesetzt, dass Sie den Inhalt der Aufbau eines Feld:

Ein Beispiel für ein benutzerdefiniertes Feld finden Sie unter Benutzerdefinierte Felder Demo .

Konstruktor implementieren

Der Konstruktor des Felds ist für die Einrichtung des Anfangswerts des Felds verantwortlich und optional eine lokale Validator. Der benutzerdefinierte Der Konstruktor des Feldes wird während der Initialisierung des Quellblocks aufgerufen, unabhängig davon, ob der Quellblock in JSON oder JavaScript definiert ist. Die benutzerdefinierte hat während der Erstellung keinen Zugriff auf den Quellblock.

Im folgenden Codebeispiel wird ein benutzerdefiniertes Feld mit dem Namen GenericField erstellt:

class GenericField extends Blockly.Field {
  constructor(value, validator) {
    super(value, validator);

    this.SERIALIZABLE = true;
  }
}

Methodensignatur

Feldkonstruktoren nehmen normalerweise einen Wert und eine lokale Validierung an. Der Wert ist optional und wenn Sie keinen Wert übergeben (oder ein Wert übergeben wird, bei dem die Klasse nicht erfolgreich ist) Validierung), wird der Standardwert der Basisklasse verwendet. Für die Field-Standardklasse, dieser Wert ist null. Wenn Sie diese Standardeinstellung nicht Wert ist, achten Sie darauf, einen geeigneten Wert zu übergeben. Der Parameter „validator“ ist nur für bearbeitbare Felder vorhanden und in der Regel als optional gekennzeichnet. Weitere Informationen Validierungen Dokumentation.

Struktur

Die Logik in Ihrem Konstruktor sollte diesem Ablauf folgen:

1. Rufen Sie den übernommenen Superkonstruktor auf (alle benutzerdefinierten Felder sollten von Blockly.Field oder einer seiner abgeleiteten Klassen), um den Wert korrekt zu initialisieren und legen Sie die lokale Validierung für Ihr Feld fest.
2. Wenn Ihr Feld serialisierbar ist, legen Sie die entsprechende Eigenschaft in der -Konstruktor. Bearbeitbare Felder müssen serialisierbar und bearbeitbar sein Daher sollten Sie diese Eigenschaft wahrscheinlich auf "true" setzen, es sei denn, Sie wissen nicht serialisierbar.
3. Optional: Nehmen Sie weitere Anpassungen vor, z. B. Labelfelder. eine CSS-Klasse übergeben, die dann auf den Text angewendet wird).

JSON und Registrierung

Im JSON-Block Definitionen, -Felder werden durch einen String beschrieben (z.B. field_number, field_textinput). Blockly verwaltet eine Zuordnung von diesen Strings zu Feldobjekten und Aufrufen fromJson für das entsprechende Objekt während der Konstruktion.

Rufen Sie Blockly.fieldRegistry.register auf, um dieser Karte Ihren Feldtyp hinzuzufügen. und übergeben die Feldklasse als zweites Argument:

Blockly.fieldRegistry.register('field_generic', GenericField);

Außerdem müssen Sie die fromJson-Funktion definieren. Ihre Implementierung sollte Dereferenzieren Sie zunächst eine beliebige Zeichenfolge Tabelle Referenzen mit replaceMessageReferences, und dann die Werte an den Konstruktor übergeben.

GenericField.fromJson = function(options) {
  const value = Blockly.utils.parsing.replaceMessageReferences(
      options['value']);
  return new CustomFields.GenericField(value);
};

Hinweis: Lokale Validatoren werden derzeit nicht unterstützt, wenn eine JSON-Definition verwendet wird. Sie können jedoch über eine Erweiterung

Wird initialisiert

Wenn Ihr Feld erstellt wird, enthält es im Grunde nur einen Wert. Bei der Initialisierung wird das DOM und das Modell erstellt (wenn das Feld besitzt ein Modell) und Ereignisse sind gebunden.

On-Block-Display

Während der Initialisierung sind Sie dafür verantwortlich, alles zu erstellen, was Sie benötigen für die Blockanzeige des Feldes.

Standardeinstellungen, Hintergrund und Text

Die Standardfunktion initView erstellt ein helles rect-Element und ein text-Element. Wenn Ihr Feld sowohl beides als auch zusätzliche rufen Sie die Funktion initView auf, bevor Sie den Rest der DOM-Elemente. Wenn Sie möchten, dass Ihr Feld eine, aber nicht beides Elemente, die Sie mit der Funktion createBorderRect_ oder createTextElement_ verwenden können.

DOM-Konstruktion anpassen

Wenn Ihr Feld ein generisches Textfeld ist (z.B. Text Input) Die DOM-Erstellung wird für Sie übernommen. Andernfalls müssen Sie die die initView-Funktion zum Erstellen der DOM-Elemente, die Sie während für die zukünftige Darstellung Ihres Felds.

Ein Dropdown-Feld kann beispielsweise sowohl Bilder als auch Text enthalten. In initView ein einzelnes Bildelement und ein einzelnes Textelement. Danach: render_ wird das aktive Element angezeigt und das andere ausgeblendet, je nachdem, ausgewählte Option.

DOM-Elemente können entweder über die Blockly.utils.dom.createSvgElement-Methode oder über die herkömmliche DOM-Erstellung .

Für die Anzeige auf einem Feld gelten folgende Anforderungen:

• Alle DOM-Elemente müssen untergeordnete Elemente von fieldGroup_ des Felds sein. Das Feld wird automatisch erstellt.
• Alle DOM-Elemente müssen innerhalb der angegebenen Dimensionen des Felds bleiben.

Weitere Informationen finden Sie in der Rendering .

Textsymbole hinzufügen

Wenn Sie dem Text eines Feldes Symbole hinzufügen möchten, z. B. das Winkel Grad-Symbols), können Sie das Symbolelement (normalerweise in einem <tspan>) direkt in die textElement_ des Felds.

Eingabe-Ereignisse

Standardmäßig werden in den Feldern Kurzinfo-Ereignisse und Mousedown-Ereignisse (zur Verwendung für wird angezeigt Mitbearbeiter. Wenn Sie andere Arten von Ereignissen überwachen möchten (z.B. um durch Ziehen eines Felds), sollten Sie die bindEvents_-Funktion des Felds überschreiben.

bindEvents_() {
  // Call the superclass function to preserve the default behavior as well.
  super.bindEvents_();

  // Then register your own additional event listeners.
  this.mouseDownWrapper_ =
  Blockly.browserEvents.conditionalBind(this.getClickTarget_(), 'mousedown', this,
      function(event) {
        this.originalMouseX_ = event.clientX;
        this.isMouseDown_ = true;
        this.originalValue_ = this.getValue();
        event.stopPropagation();
      }
  );
  this.mouseMoveWrapper_ =
    Blockly.browserEvents.conditionalBind(document, 'mousemove', this,
      function(event) {
        if (!this.isMouseDown_) {
          return;
        }
        var delta = event.clientX - this.originalMouseX_;
        this.setValue(this.originalValue_ + delta);
      }
  );
  this.mouseUpWrapper_ =
    Blockly.browserEvents.conditionalBind(document, 'mouseup', this,
      function(_event) {
        this.isMouseDown_ = false;
      }
  );
}

Hinweis: Wenn Sie bindEvents_ überschreiben, sollten Sie immer die Basisfunktion aufrufen.

Zur Bindung an ein Ereignis sollten Sie im Allgemeinen die Methode Blockly.utils.browserEvents.conditionalBind . Diese Methode von Bindungsereignissen filtert sekundäre Berührungen während Drags. Wenn der Handler auch mitten in einem Drag-Vorgang ausgeführt werden soll, können Sie den Blockly.browserEvents.bind .

Entsorgung

Wenn Sie benutzerdefinierte Ereignis-Listener innerhalb des Felds bindEvents_ registriert haben müssen sie nicht in der dispose-Funktion registriert werden.

Hinweis: Wenn Sie die Beseitigung überschreiben, sollten Sie immer die Basisfunktion aufrufen.

Wenn Sie die ansehen des Feldes (durch Anfügen aller DOM-Elemente an fieldGroup_) und der Wert wird das DOM des Felds automatisch entfernt.

Umgang mit Werten

→ Informationen zum Wert eines Feldes im Vergleich zu seinem Text finden Sie unter Aufbau eines Feldes Feld ein.

Validierungsreihenfolge

Klassenvalidierung implementieren

Felder dürfen nur bestimmte Werte akzeptieren. Zahlenfelder sollten beispielsweise nur können nur Zahlen akzeptiert werden. Für Farbfelder sind nur Farben usw. zulässig. über Kurs- und lokale Kampagnen Validatoren. Die Klasse Für die Validierung gelten dieselben Regeln wie für lokale Validierungen, mit der Ausnahme, dass sie auch ausgeführt wird. in der Konstruktor Daher sollte er nicht auf den Quellblock verweisen.

Überschreibe doClassValidation_, um die Klassenvalidierung deines Felds zu implementieren .

doClassValidation_(newValue) {
  if (typeof newValue != 'string') {
    return null;
  }
  return newValue;
};

Hinweis: Die an doClassValidation_ übergebene newValue kann einen beliebigen Typ haben. Je nachdem, wie verantwortungsvoll die anderen Entwickler sind, mit Grenzfällen umgehen.

Gültige Werte verarbeiten

Wenn der Wert, der an ein Feld mit setValue übergeben wurde, gültig ist, erhalten Sie eine doValueUpdate_-Rückruf. Standardmäßig gilt für die Funktion doValueUpdate_ Folgendes:

• Legt das Attribut value_ auf newValue fest.
• Legt den isDirty_ fest. zu true.

Wenn Sie den Wert nur speichern und keine benutzerdefinierte Verarbeitung vornehmen möchten, müssen Sie doValueUpdate_ nicht überschreiben.

Andernfalls können Sie Folgendes tun:

• Benutzerdefinierter Speicher von newValue.
• Andere Eigenschaften basierend auf newValue ändern.
• Speichert, ob der aktuelle Wert gültig ist oder nicht.

Sie müssen doValueUpdate_ überschreiben:

doValueUpdate_(newValue) {
  super.doValueUpdate_(newValue);
  this.displayValue_ = newValue;
  this.isValueValid_ = true;
}

Achtung: Wenn Ihr Feld auf Attribute des Blocks oder Arbeitsbereichs zugreifen muss, festgelegt ist, sollte doValueUpdate_ sauber fehlschlagen, wenn diese nicht verfügbar.

Umgang mit ungültigen Werten

Wenn der mit setValue übergebene Wert ungültig ist, erhalten Sie eine doValueInvalid_-Rückruf. Standardmäßig führt die Funktion doValueInvalid_ nichts. Das bedeutet, dass ungültige Werte standardmäßig nicht angezeigt werden. Außerdem wird das Feld nicht erneut gerendert, isDirty_ wird nicht festgelegt.

Wenn ungültige Werte angezeigt werden sollen, müssen Sie doValueInvalid_ überschreiben. In den meisten Fällen solltest du eine displayValue_-Eigenschaft auf die ungültiger Wert, festgelegt isDirty_ bis true und überschreiben render_ damit das Display auf dem Sperrbildschirm basierend auf displayValue_ und nicht anhand des value_

doValueInvalid_(newValue) {
  this.displayValue_ = newValue;
  this.isDirty_ = true;
  this.isValueValid_ = false;
}

Warnung: Legen Sie die Eigenschaft value_ nie auf einen ungültigen Wert fest. Feldwerte sollten immer gültig für Codegenerierung.

Mehrteilige Werte

Wenn das Feld einen mehrteiligen Wert enthält (z.B. Listen, Vektoren, Objekte), möchten, dass die Teile wie einzelne Werte behandelt werden.

doClassValidation_(newValue) {
  if (FieldTurtle.PATTERNS.indexOf(newValue.pattern) == -1) {
    newValue.pattern = null;
  }

  if (FieldTurtle.HATS.indexOf(newValue.hat) == -1) {
    newValue.hat = null;
  }

  if (FieldTurtle.NAMES.indexOf(newValue.turtleName) == -1) {
    newValue.turtleName = null;
  }

  if (!newValue.pattern || !newValue.hat || !newValue.turtleName) {
    this.cachedValidatedValue_ = newValue;
    return null;
  }
  return newValue;
}

Im obigen Beispiel wird jedes Attribut von newValue einzeln validiert. Dann am Ende der doClassValidation_-Funktion, wenn ein einzelnes Attribut ungültig ist, wird der Wert vor dem Speichern in der Property cacheValidatedValue_ im Cache gespeichert. Rückgabe von null (ungültig). Caching des Objekts mit einzeln validierten Eigenschaften doValueInvalid_ um sie separat zu verarbeiten, indem Sie einfach eine !this.cacheValidatedValue_.property-Prüfung, anstatt jede einzelne neu zu validieren für jede einzelne Property.

Dieses Muster zur Validierung mehrteiliger Werte kann auch in lokalen Validatoren, aber Derzeit gibt es keine Möglichkeit, dieses Muster zu erzwingen.

isDirty_

isDirty_ ist ein Flag, das im setValue und andere Teile des Feldes, um festzustellen, ob das Feld das erneut gerendert wurde. Wenn sich der Anzeigewert des Felds geändert hat, sollte isDirty_ normalerweise auf true festgelegt werden.

Text

→ Informationen dazu, wo der Text eines Felds verwendet wird und wie er sich unterscheidet aus dem Feldwert siehe Aufbau eines Feld ein.

Weicht der Text des Feldes vom Wert des Feldes ab, sollten Sie überschreiben getText-Funktion um den richtigen Text bereitzustellen.

getText() {
  let text = this.value_.turtleName + ' wearing a ' + this.value_.hat;
  if (this.value_.hat == 'Stovepipe' || this.value_.hat == 'Propeller') {
    text += ' hat';
  }
  return text;
}

Editor erstellen

Wenn Sie die Funktion showEditor_ definieren, wartet Blockly automatisch auf klicken und zur richtigen Zeit showEditor_ anrufen. Sie können jeden beliebigen HTML-Code anzeigen lassen. in Ihrem Editor, indem Sie eine von zwei speziellen div-Tags einschließen, dem DropDownDiv-Element. und WidgetDiv, die über dem Rest der Blockly-Benutzeroberfläche schweben.

Wichtig :Aktualisierungen der Anzeige eines Editors sollten während Rendering anstatt sofort bearbeitet zu werden. So können Validatoren die Wert, bevor er angewendet wird.

DropDownDiv vs. WidgetDiv

Die DropDownDiv wird verwendet, um Mitbearbeitern bereitzustellen, die sich in einer Box befinden, die verbunden ist in ein Feld ein. Das Gerät positioniert sich automatisch so, dass es in der Nähe des Spielfelds ist, ohne den Anschluss zu verändern. innerhalb der sichtbaren Grenzen. Die Winkelauswahl und die Farbauswahl sind gute Beispiele für DropDownDiv.

Der WidgetDiv wird für Folgendes verwendet: Editoren bereitstellen, die nicht in einem Paket enthalten sind. In Zahlenfeldern wird die WidgetDiv zur Abdeckung des Feldes mit einem HTML-Texteingabefeld. Während die DropDownDiv- die Positionierung für Sie übernimmt, WidgetDiv nicht. Elemente müssen manuell positioniert werden. Das Koordinatensystem wird in Pixelkoordinaten bezogen auf oben links im Fenster. Der Texteingabeeditor ist ein gutes Beispiel für WidgetDiv

DropDownDiv-Beispielcode

showEditor_() {
  // Create the widget HTML
  this.editor_ = this.dropdownCreate_();
  Blockly.DropDownDiv.getContentDiv().appendChild(this.editor_);

  // Set the dropdown's background colour.
  // This can be used to make it match the colour of the field.
  Blockly.DropDownDiv.setColour('white', 'silver');

  // Show it next to the field. Always pass a dispose function.
  Blockly.DropDownDiv.showPositionedByField(
      this, this.disposeWidget_.bind(this));
}

Hinweis: Das programmatische Erstellen von HTML kann recht aufwändig sein und werden hier bereitgestellt. Ein Beispiel hierfür finden Sie im Abschnitt Benutzerdefinierte Felder Demo

WidgetDiv-Beispielcode

showEditor_() {
  // Show the div. This automatically closes the dropdown if it is open.
  // Always pass a dispose function.
  Blockly.WidgetDiv.show(
    this, this.sourceBlock_.RTL, this.widgetDispose_.bind(this));

  // Create the widget HTML.
  var widget = this.createWidget_();
  Blockly.WidgetDiv.getDiv().appendChild(widget);
}

Hinweis: Das programmatische Erstellen von Widget-HTML-Code kann recht aufwendig sein. ist hier nicht verfügbar. Ein Beispiel hierfür finden Sie in der Implementierung von Text Input Feld .

Hinweis: Wenn Sie ein Widget erstellen, das wie eine Eingabe fungieren soll, aber ein benutzerdefiniertes Element, das Sie data-is-text-input='true' zu Ihrem Element hinzufügen können, um Benachrichtigungen zu erhalten Blockiert, um das Element als Eingabe zu behandeln.

Bereinigen

Sowohl DropDownDiv als auch WidgetDiv-Handle zerstören den Widget-HTML-Code -Elemente. Alle vorhandenen Ereignis-Listener müssen jedoch manuell entfernt werden. auf diese Elemente angewendet.

widgetDispose_() {
  for (let i = this.editorListeners_.length, listener;
      listener = this.editorListeners_[i]; i--) {
    Blockly.browserEvents.unbind(listener);
    this.editorListeners_.pop();
  }
}

Die Funktion dispose wird in einem null-Kontext auf der DropDownDiv aufgerufen. An Das WidgetDiv, das im Kontext von WidgetDiv aufgerufen wird. In beiden Fällen verwenden Sie am besten das binden , wenn Sie eine Löschfunktion übergeben, wie in der obigen DropDownDiv gezeigt. und WidgetDiv Beispiele.

→ Informationen zur Entsorgung, die sich nicht speziell auf die Entsorgung von Redakteuren beziehen, finden Sie unter Entsorgung:

On-Block-Display aktualisieren

Mit der Funktion render_ wird die Blockanzeige des Felds entsprechend aktualisiert. seinen internen Wert.

Beispiele:

• Text ändern (Dropdown-Menü)
• Farbe (Farbe) ändern

Wichtig: Das Feld sollte niemals render_ direkt aufrufen. Wird stattdessen erneut gerendert durch Festlegen der Eigenschaft isDirty_ Property auf true.

Standardeinstellungen

Mit der Standardfunktion render_ wird als Anzeigetext das Ergebnis des getDisplayText_ . Die Funktion getDisplayText_ gibt das Attribut value_ des Felds zurück Umwandlung in eine Zeichenfolge, nachdem sie abgeschnitten wurde, um den maximalen Text zu berücksichtigen Länge.

Wenn Sie das standardmäßige On-Block-Display und das Standardtextverhalten für Ihr Feld funktioniert, müssen Sie render_ nicht überschreiben.

Wenn das Standardtextverhalten für Ihr Feld funktioniert, es aber zusätzliche statische Elemente enthält, können Sie den Standardwert render_ Sie müssen sie jedoch trotzdem überschreiben, um den Wert des Felds zu aktualisieren. Größe.

Wenn das Standardtextverhalten für Ihr Feld nicht funktioniert oder die die On-Block-Display-Anzeige zusätzliche dynamische Elemente enthält, müssen Sie die die render_ Funktion.

Rendering anpassen

Wenn das Standardrenderingverhalten für Ihr Feld nicht funktioniert, müssen Sie das benutzerdefinierte Rendering-Verhalten zu definieren. Dies kann alles umfassen, vom Festlegen benutzerdefinierter Anzeigetext, zum Ändern von Bildelementen und zum Aktualisieren der Hintergrundfarben.

Alle DOM-Attributänderungen sind zulässig. Die einzigen beiden Dinge, die Sie beachten sollten, sind:

1. Die DOM-Erstellung sollte während der Initialisierung, weil es effizienter ist.
2. Du solltest immer die size_ aktualisieren. an die Größe des Bildschirms angepasst.

render_() {
  switch(this.value_.hat) {
    case 'Stovepipe':
      this.stovepipe_.style.display = '';
      break;
    case 'Crown':
      this.crown_.style.display = '';
      break;
    case 'Mask':
      this.mask_.style.display = '';
      break;
    case 'Propeller':
      this.propeller_.style.display = '';
      break;
    case 'Fedora':
      this.fedora_.style.display = '';
      break;
  }

  switch(this.value_.pattern) {
    case 'Dots':
      this.shellPattern_.setAttribute('fill', 'url(#polkadots)');
      break;
    case 'Stripes':
      this.shellPattern_.setAttribute('fill', 'url(#stripes)');
      break;
    case 'Hexagons':
      this.shellPattern_.setAttribute('fill', 'url(#hexagons)');
      break;
  }

  this.textContent_.nodeValue = this.value_.turtleName;

  this.updateSize_();
}

Wichtig: Verwenden Sie immer this.textContent_.nodeValue, um den Anzeigetext zu aktualisieren. auf Ihrem Gebiet. Dies hilft bei der Texterstellung Symbole..

Größe wird aktualisiert

Die Aktualisierung der Eigenschaft size_ eines Felds ist sehr wichtig, da sie den wie das Feld positioniert werden soll. Der beste Weg, um herauszufinden, wie diese size_ aussehen sollte, indem Sie experimentieren.

updateSize_() {
  const bbox = this.movableGroup_.getBBox();
  let width = bbox.width;
  let height = bbox.height;
  if (this.borderRect_) {
    width += this.constants_.FIELD_BORDER_RECT_X_PADDING * 2;
    height += this.constants_.FIELD_BORDER_RECT_X_PADDING * 2;
    this.borderRect_.setAttribute('width', width);
    this.borderRect_.setAttribute('height', height);
  }
  // Note how both the width and the height can be dynamic.
  this.size_.width = width;
  this.size_.height = height;
}

Achtung: Das Aufrufen von getBBox während des Renderings kann zu Layout-Trashing führen. sollten Sie sich vielleicht mit anderen Methoden zum Abrufen der Größe auseinandersetzen.

Hinweis: Die Breite und Höhe eines Felds können dynamisch sein, während die Aktualisierung der Größe nicht in einer eigenen Funktion enthalten sein müssen; kann sie im Inneren render_. In der Regel ist sie jedoch getrennt, um den Code besser zu organisieren.

Übereinstimmende Blockfarben

Wenn Elemente Ihres Feldes den Farben des Blocks entsprechen sollen, verknüpft ist, sollten Sie die Methode applyColour überschreiben. Sie sollten greifen Sie über die Stileigenschaft des Blocks auf die Farbe zu.

applyColour() {
  const sourceBlock = this.sourceBlock_;
  if (sourceBlock.isShadow()) {
    this.arrow_.style.fill = sourceBlock.style.colourSecondary;
  } else {
    this.arrow_.style.fill = sourceBlock.style.colourPrimary;
  }
}

Hinweis: Es empfiehlt sich, die Farben in der Methode applyColour im Cache zu speichern, können Sie sie auf Ihre Bearbeiter sobald er aktiviert ist.

Bearbeitbarkeit wird aktualisiert

Mit der Funktion updateEditable können Sie die Darstellung Ihres Felds ändern je nachdem, ob sie bearbeitbar sind oder nicht. Die Standardfunktion sorgt dafür, dass der Im Hintergrund wird über den Mauszeiger (Rahmen) angezeigt bzw. nicht angezeigt, wenn er bearbeitet werden kann bzw. nicht bearbeitet werden kann. Die Größe des On-Block-Displays sollte sich nicht je nach Bearbeitungsfähigkeit ändern, aber Alle anderen Änderungen sind zulässig.

updateEditable() {
  if (!this.fieldGroup_) {
    // Not initialized yet.
    return;
  }
  super.updateEditable();

  const group = this.getClickTarget_();
  if (!this.isCurrentlyEditable()) {
    group.style.cursor = 'not-allowed';
  } else {
    group.style.cursor = this.CURSOR;
  }
}

Achtung :Die Kommunikation mit dem Cursor eines Felds ist instabil.

Serialisierung

Bei der Serialisierung geht es darum, Status des Felds, damit es später wieder in den Arbeitsbereich geladen werden kann.

Der Status des Arbeitsbereichs enthält immer den Wert des Felds, er kann aber auch weitere Status enthalten, z. B. den Status der Benutzeroberfläche Ihres Felds. Wenn zum Beispiel eine zoombare Karte war, mit der Nutzer Länder auswählen konnten, auch die Zoomstufe serialisieren.

Wenn das Feld serialisierbar ist, musst du das Attribut SERIALIZABLE auf true.

Blockly bietet zwei Sätze von Serialisierungs-Hooks für Felder. Ein Paar Haken funktioniert mit dem neuen JSON-Serialisierungssystem, während das andere Paar mit dem ein altes XML-Serialisierungssystem.

saveState und loadState

saveState und loadState sind Serialisierungs-Hooks, die mit dem neuen JSON-Format kompatibel sind Serialisierungssystem vor.

In einigen Fällen müssen Sie diese nicht angeben, da die Standardeinstellungen Implementierungen funktionieren. Wenn (1) Ihr Feld eine direkte abgeleitete Klasse der Basisklasse ist, Blockly.Field-Klasse, (2) Ihr Wert ist eine serialisierbare JSON-Datei. eingeben und (3) Sie müssen nur serialisieren Sie den Wert, dann funktioniert die Standardimplementierung gut.

Andernfalls sollte die Funktion saveState eine serialisierbare JSON-Datei zurückgeben. Objekt/Wert, der den Status des Felds darstellt. Und dein loadState -Funktion sollte dasselbe serialisierbare JSON-Objekt bzw. denselben JSON-serialisierbaren Wert akzeptieren und denselben auf dem Feld.

saveState() {
  return {
    'country': this.getValue(),  // Value state
    'zoom': this.getZoomLevel(), // UI state
  };
}

loadState(state) {
  this.setValue(state['country']);
  this.setZoomLevel(state['zoom']);
}

Vollständige Serialisierung und Sicherungsdaten

saveState empfängt auch den optionalen Parameter doFullSerialization. Dies ist von Feldern verwendet werden, die normalerweise auf den Zustand verweisen, der von einem anderen Serializer (wie unterstützende Datenmodelle). Der Parameter signalisiert, Der referenzierte Zustand ist nicht verfügbar, wenn der Block deserialisiert wird, sodass der sollte die gesamte Serialisierung selbst übernehmen. Dies trifft beispielsweise zu, wenn ein einzelner Block serialisiert oder wenn ein Block kopiert und eingefügt wird.

Zwei häufige Anwendungsfälle hierfür sind:

• Wenn ein einzelner Block in einen Arbeitsbereich geladen wird, in dem die unterstützenden Daten nicht vorhanden ist, verfügt das Feld über genügend Informationen im eigenen Status, um um ein neues Datenmodell zu erstellen.
• Wenn ein Block kopiert und eingefügt wird, erstellt das Feld immer eine neue Sicherung Datenmodell zu verwenden, anstatt auf ein vorhandenes Modell zu verweisen.

Ein Feld, in dem dies verwendet wird, ist das integrierte Variablenfeld. Normalerweise serialisiert sie Die ID der Variablen, auf die sie verweist, aber wenn doFullSerialization wahr ist alle Status serialisiert.

saveState(doFullSerialization) {
  const state = {'id': this.variable_.getId()};
  if (doFullSerialization) {
    state['name'] = this.variable_.name;
    state['type'] = this.variable_.type;
  }
  return state;
}

loadState(state) {
  const variable = Blockly.Variables.getOrCreateVariablePackage(
      this.getSourceBlock().workspace,
      state['id'],
      state['name'],   // May not exist.
      state['type']);  // May not exist.
  this.setValue(variable.getId());
}

Das Variablenfeld sorgt dafür, dass beim Laden in einen Arbeitsbereich wo seine Variable nicht vorhanden ist, kann sie eine neue Variable erstellen, auf die verwiesen werden kann.

toXml und fromXml

toXml und fromXml sind Serialisierungs-Hooks, die mit der alten XML-Datei funktionieren Serialisierungssystem vor. Verwenden Sie diese Aufhänger nur, wenn es nötig ist (z.B. wenn Sie auf einer alten Codebasis, die noch nicht migriert wurde). Andernfalls verwenden Sie saveState und loadState.

Die Funktion toXml sollte einen XML-Knoten zurückgeben, der den Status auf dem Feld. Die Funktion fromXml sollte denselben XML-Knoten akzeptieren und in das Feld ein.

toXml(fieldElement) {
  fieldElement.textContent = this.getValue();
  fieldElement.setAttribute('zoom', this.getZoomLevel());
  return fieldElement;
}

fromXml(fieldElement) {
  this.setValue(fieldElement.textContent);
  this.setZoomLevel(fieldElement.getAttribute('zoom'));
}

Bearbeitbare und serialisierbare Eigenschaften

Das Attribut EDITABLE bestimmt, ob das Feld über eine Benutzeroberfläche verfügen soll, um anzugeben, dass mit dem es interagieren kann. Der Standardwert ist true.

Das Attribut SERIALIZABLE bestimmt, ob das Feld serialisiert werden soll. Es ist standardmäßig false. Wenn diese Property true ist, müssen Sie möglicherweise angeben, Serialisierungs- und Deserialisierungsfunktionen (siehe Serialisierung).

Wichtig: Wenn EDITABLE für Ihr Feld true ist, SERIALIZABLE sollte auch true festgelegt ist. Dies ist aus Gründen der Abwärtskompatibilität standardmäßig nicht der Fall. Gründe.

Cursor anpassen

Das Attribut CURSOR bestimmt den Cursor, den Nutzer sehen, wenn sie den Mauszeiger auf in Ihrem Bereich. Er sollte ein gültiger CSS-Cursorstring sein. Standardmäßig wird der Cursor definiert durch .blocklyDraggable, d. h. den Greif-Cursor.