ErdEditorElement

Der Editor ist ein einfaches HTMLElement.
Seine Typdefinition lautet wie folgt.

interface ErdEditorElement extends HTMLElement {
  readonly: boolean;
  systemDarkMode: boolean; // system dark/light auto
  enableThemeBuilder: boolean;
  enableLocalePicker: boolean;
  enableWelcomeScreen: boolean;
  value: string;
  readonly runtimeValue: string;
  focus: () => void;
  blur: () => void;
  clear: () => void;
  destroy: () => void;
  setInitialValue: (value: string) => void;
  setPresetTheme: (themeOptions: Partial<ThemeOptions>) => void;
  setSystemAppearance: (appearance: 'dark' | 'light' | null) => void;
  setTheme: (theme: Partial<Theme>) => void;
  setLocale: (locale: LocaleOption) => void;
  setSystemLocale: (locale: string | null) => void;
  setKeyBindingMap: (
    keyBindingMap: Partial<
      Omit<
        KeyBindingMap,
        | 'edit'
        | 'stop'
        | 'undo'
        | 'redo'
        | 'zoomIn'
        | 'zoomOut'
        | 'zoomReset'
      >
    >
  ) => void;
  setSchemaSQL: SetSchema;
  setSchemaGraphQL: SetSchema;
  setSchemaDBML: SetSchema;
  setSchemaAML: SetSchema;
  setSchemaJSON: (
    value: string,
    options?: { mode?: 'replace' | 'append' }
  ) => void;
  getSchemaSQL: (
    databaseVendor?: DatabaseVendor,
    options?: SchemaSQLOptions
  ) => string;
  getSharedStore: (
    config?: SharedStoreConfig & {
      mouseTracker?: boolean;
      focusTracker?: boolean;
    }
  ) => SharedStore;
  setDiffValue: (value: string) => void;
}

Der Editor rendert in einen geschlossenen Shadow Root, daher ist editor.shadowRoot gleich null, und Stile der Seite gelangen weder hinein noch hinaus.
Nichts im Inneren ist mit einem Selektor erreichbar – gestalten Sie den Editor stattdessen über setTheme und die Custom Properties --erd-editor-*.

readonly, system-dark-mode, enable-theme-builder, enable-locale-picker und enable-welcome-screen sind die einzigen Attribute, und alle fünf haben den Standardwert false. Die letzten beiden sind neu in 4.0.0. Jedes liest seinen Wert so, wie es unter readonly beschrieben ist.

Seit 4.1.0 hat die Registerkarte ERD einen Explorer, einen links neben der Zeichenfläche angedockten Baum des Diagramms mit Suchen und Ersetzen an seinem oberen Rand. Kein Attribut, keine Eigenschaft, keine Methode und kein Ereignis öffnet oder schließt ihn oder meldet seinen Zustand: Er öffnet sich über die Schaltfläche Explorer der Symbolleiste, über Toggle Explorer in der Schnellsuche oder im Kontextmenü der Zeichenfläche oder mit der Belegung findReplace.
Jedes Element startet mit geschlossenem Explorer. Ob er geöffnet ist, seine Breite, sein Einklappzustand und seine Suche bleiben so lange erhalten wie das Element, über Wechsel der Registerkarte und jedes Laden hinweg, setInitialValue eingeschlossen, und stehen nie in value, runtimeValue, im Verlauf oder in einem gemeinsamen Store.

readonly

Legt fest, ob der Editor bearbeitet werden kann.
Solange es gesetzt ist, werden das Zuweisen von value, clear(), setSchemaSQL(), setSchemaGraphQL(), setSchemaDBML(), setSchemaAML(), setSchemaJSON(), Rückgängig und Wiederholen ignoriert, und das Ereignis change wird nie ausgelöst. Laden Sie ein Dokument stattdessen mit setInitialValue.
Das Ansehen funktioniert weiterhin: Zoom, Verschieben der Ansicht, das Hand-Werkzeug, der Zen-Modus, die Registerkarte der Zeichenfläche, die Registerkarte Visualisierung in beiden Modi einschließlich des Fokussierens auf Tabellen, das Datenbanksystem sowie die Ausgabeeinstellungen für SQL und den Codegenerator wirken alle weiterhin, sodass ein schreibgeschützter Editor weiterhin SQL für ein anderes Datenbanksystem exportieren oder generierten Code anzeigen kann.
Seit 4.1.0 öffnet sich auch der Explorer, und die Auswahl einer seiner Zeilen wechselt zu dem, wofür die Zeile steht, wie in einem bearbeitbaren Editor. Suchen und Ersetzen an seinem oberen Rand sucht nur, ohne den Pfeil Toggle Replace und ohne die Ersetzungszeile, und der Wechsel zu einem Treffer holt diesen weiterhin in den sichtbaren Bereich und wählt ihn aus. Der Bereich trägt den Titel Explorer, und der Tooltip der Schaltfläche in der Symbolleiste lautet in jedem Editor Explorer (Ctrl + F) (Windows/Linux) oder Explorer (⌘ + F) (Mac). Von 3.10.0 bis 4.0.0 öffnete sich Suchen und Ersetzen als schwebender Bereich nur zum Suchen mit dem Titel Find.
Die Tabelleneigenschaften lassen sich weiterhin öffnen, und seit 3.10.0 zeigen sie neben ihrem Titel ein Badge Read only, und ihre Registerkarte Indexes lässt keine Änderungen zu – siehe Tabelleneigenschaften.
Seit 4.0.0 bietet ein schreibgeschützter Editor weder Import and Add, New Table Group, Group selected tables, Remove from group (siehe Tabellengruppen) noch Map Columns an und zeigt keinen Willkommensbildschirm. Die Sperrschaltflächen auf der Registerkarte Einstellungen ändern nichts, und die Skripte Before tables und After tables der Registerkarte Schema SQL lassen sich nicht bearbeiten.
Seit 4.1.0 zeigt er außerdem keine der Schaltflächen New Table, New Memo und New Table Group in der Symbolleiste der Zeichenfläche, und die Belegungen addTableGroup und groupSelectedTables bewirken nichts.
Die Auswahlen This window only der Registerkarte Schema SQL, Statements, Header und Tables, werden nie gespeichert und wirken weiterhin, ebenso der Dialog Export image, die Designauswahl und die Sprachauswahl. Eine Wahl in der Designauswahl oder der Sprachauswahl löst weiterhin changePresetTheme oder changeLocale aus.
Ein Attribut ohne Wert, ="" und ="true" werden alle als true gelesen. ="false" wird als false gelesen, ebenso jede andere Zeichenkette – einschließlich der HTML-typischen Schreibweise readonly="readonly".

editor.readonly = true;
// or
editor.setAttribute('readonly', 'true');

<erd-editor readonly></erd-editor>

systemDarkMode

Legt fest, ob sich der Editor automatisch mit dem dunklen/hellen Modus des Systems synchronisiert.
Seit 4.0.0 setzt das Einschalten den Wert appearance des Designs auf 'system', wie setPresetTheme({ appearance: 'system' }). Der Editor zeigt dann das helle oder dunkle Erscheinungsbild, das das Betriebssystem meldet, oder dasjenige, das setSystemAppearance angibt, und wechselt, wenn sich dieses ändert.
Ein späteres setPresetTheme mit 'light' oder 'dark' oder die Wahl von Light oder Dark in der Designauswahl oder der Schnellsuche ersetzt 'system' und bleibt bestehen: Die nächste Änderung im Betriebssystem überschreibt es nicht mehr, obwohl systemDarkMode weiterhin true ist. Vor 4.0.0 überschrieb es die nächste Änderung im Betriebssystem.
Das Ausschalten, während das Erscheinungsbild 'system' ist, behält das in diesem Moment angezeigte helle oder dunkle Erscheinungsbild bei. Das Ausschalten, nachdem das Erscheinungsbild von 'system' auf einen anderen Wert geändert wurde, lässt es unverändert.
Eine Änderung löst kein Ereignis aus.

editor.systemDarkMode = true;
// or
editor.setAttribute('system-dark-mode', 'true');

<erd-editor system-dark-mode></erd-editor>

enableThemeBuilder

Legt fest, ob eine Oberfläche bereitgestellt wird, mit der sich vordefinierte Designs einfach einstellen lassen.
Es blendet die Schaltfläche Theme der Symbolleiste ein, die die Designauswahl mit Accent color, Gray color und Appearance öffnet. Seit 4.0.0 bietet Appearance neben Light und Dark auch System an, und solange dies eingeschaltet ist, listet die Schnellsuche Theme mit System, Light und Dark auf. Siehe Sprache und Design.

editor.enableThemeBuilder = true;
// or
editor.setAttribute('enable-theme-builder', 'true');

<erd-editor enable-theme-builder></erd-editor>

Eine Änderung des vordefinierten Designs in diesem Bereich oder in der Schnellsuche löst das Ereignis changePresetTheme aus.

enableLocalePicker

Legt seit 4.0.0 fest, ob eine Oberfläche zur Auswahl der Anzeigesprache des Editors bereitgestellt wird.
Es blendet die Schaltfläche Display Language der Symbolleiste ein, hinter Theme, wenn beide angezeigt werden. Die Schaltfläche öffnet die Sprachauswahl, und die Schnellsuche listet Display Language auf. Beide bieten System und die 25 Sprachen an – siehe Sprache und Design.
Es bestimmt außerdem, was ein Editor anzeigt, bevor setLocale aufgerufen oder eine Sprache ausgewählt wird: 'system', solange es eingeschaltet ist, Englisch, solange es ausgeschaltet ist, sodass ein Element, das nichts konfiguriert, bei dem Englisch bleibt, das es immer gezeigt hat. Das Ein- oder Ausschalten wechselt sofort zwischen beiden. Sobald eine Sprache gesetzt oder ausgewählt wurde, bleibt diese Wahl bestehen, egal wie es geschaltet wird.
Setzen Sie es, bevor das Element eingefügt wird, damit bereits der erste Frame 'system' folgt.
Eine Auswahl löst changeLocale aus.

editor.enableLocalePicker = true;
// or
editor.setAttribute('enable-locale-picker', 'true');

<erd-editor enable-locale-picker></erd-editor>

enableWelcomeScreen

Legt seit 4.0.0 fest, ob ein leeres Diagramm den Benutzer mit dem Willkommensbildschirm begrüßt.
Er liegt über der Registerkarte ERD, solange das Dokument keine Tabelle, keine angezeigte Notiz und keine angezeigte Tabellengruppe enthält. Er wird nicht angezeigt, solange readonly gesetzt ist, im Zen-Modus oder solange die Tabelleneigenschaften, die Diff-Ansicht, die Zeitreise oder die Vorschau des Automatischen Layouts geöffnet ist. Die erste Tabelle, angezeigte Notiz oder angezeigte Tabellengruppe lässt ihn verschwinden, und ein Rückgängigmachen bis zu einem leeren Diagramm holt ihn zurück.
Seine Einträge New Table, New Memo und Command Palette zeigen die erste Tastenkombination von addTable, addMemo und search so, wie setKeyBindingMap sie belassen hat, und keine für einen leer gelassenen Namen. Seine Pfeile zeigen nur dort auf die Schaltflächen Theme und Display Language, wo enableThemeBuilder und enableLocalePicker sie einblenden.
In seinem Menü wechseln ↑, ↓, Home und End zwischen den Zeilen, und bei ihnen wird die Standardaktion verhindert und die Weitergabe gestoppt. Bei Enter und Space wird die Weitergabe gestoppt, die Standardaktion aber nicht verhindert, sodass die fokussierte Zeile sie erhält, und Escape bei den Formaten von Import führt zurück, mit verhinderter Standardaktion und gestoppter Weitergabe. Jede andere Taste erreicht den Editor und die Seite wie gewohnt.
Er ändert nichts am Dokument, lässt also value unverändert und löst kein change aus.
Schalten Sie die Option ein, sobald setInitialValue das Dokument geladen hat, wie es die offiziellen Hosts tun, damit der Bildschirm nie kurz über einer Datei aufblitzt, die noch geladen wird.

editor.enableWelcomeScreen = true;
// or
editor.setAttribute('enable-welcome-screen', 'true');

<erd-editor enable-welcome-screen></erd-editor>

value

getter

Liefert das aktuelle Dokument als JSON-Zeichenkette im Schema, das der Editor definiert.
Seit 4.0.0 ist der Wert die Speicherform, also das Dokument, wie eine Datei es enthält, und damit auch das, was der Export json schreibt und die offiziellen Hosts speichern. Er enthält nur die vorhandenen Entitäten, ohne die entfernten, die Stapelreihenfolge oder das, was der Editor selbst ermittelt, etwa gemessene Breiten, Schlüsselmarkierungen und Ankerpunkte von Beziehungen. Die Schlüssel seiner Entitäten stehen in fester Reihenfolge, er ist mit zwei Leerzeichen eingerückt und endet mit einem Zeilenumbruch, sodass dasselbe Dokument immer dieselben Bytes ergibt.
Jede Einstellung, deren Sperre eingeschaltet ist, wird mit dem gesperrten Wert geschrieben, nicht so, wie der Bildschirm sie zeigt. Die Sperre Viewport umfasst originX, originY und zoomLevel, und Canvas Type, Language, Table Name Case, Column Name Case und Bracket Type umfassen jeweils ihre eigene Einstellung. Jede andere Einstellung wird so geschrieben, wie sie gerade ist, und lockSettings wird immer geschrieben. Zu den Bits siehe Settings.
In einem neuen Dokument sind alle Sperren eingeschaltet, ob es das Dokument ist, das ein Element zeigt, bevor es einen Wert erhält, oder eines, das aus einem leeren Wert geladen wurde. Sein value behält den Ursprung bei 0, 0, die Zoomstufe bei 1, die Registerkarte ERD sowie die Standardsprache des Codegenerators, die Standardschreibweisen und den Standardbegrenzertyp, bis die zugehörige Sperre ausgeschaltet wird.
Vor 4.0.0 lieferte der Getter das gesamte Dokument so, wie der Editor es hielt, mit angewendetem ignoreSaveSettings. Das Dokument, wie der Editor es hält, ist jetzt runtimeValue, und ignoreSaveSettings wird nicht mehr gelesen oder geschrieben.

const data = editor.value;

setter

Lädt einen zuvor gespeicherten Zustand des Editors. Er ersetzt das gesamte Dokument – das aktuelle wird zuerst geleert.
Wie clear(), setInitialValue() und die Methoden setSchema* in ihrem Standardmodus mode: 'replace' verwirft er außerdem die Flow-Ansicht der Registerkarte Visualisierung: ihr Layout, die Tabellen, auf die sie eingeschränkt ist, ihre Zeilenanzeige, Zoom und Verschiebung. Ein Anhängen (mode: 'append') verwirft sie nicht.
Er wird im Verlauf aufgezeichnet, sodass Undo, Redo möglich ist, und löst change aus.
Er nimmt die Speicherform, einen runtimeValue oder eine Datei an, die eine frühere Version gespeichert hat.
Eine leere Zeichenkette oder alles, was keine Zeichenkette ist, lädt ein neues Dokument, statt einen Fehler auszulösen, prüfen Sie den Wert also, bevor Sie ihn zuweisen.
Dieses neue Dokument ist dasjenige, mit dem setInitialValue('') beginnt: leer, mit Standardeinstellungen und seit 4.0.0 mit allen Sperren eingeschaltet. In 3.10.x speicherte es weder die Scrollposition noch die Zoomstufe, und davor speicherte es beides.
Ein gemeinsamer Store leitet dieses Laden mit dem vollständigen JSON des neuen Dokuments an die Mitbearbeiter weiter, sodass jeder Teilnehmer, auch einer mit einer älteren Version, dasselbe Dokument lädt.
Seit 4.0.0 stammen die Sperren des geladenen Dokuments und die gesperrten Werte, die value anschließend schreibt, aus dem Text, und die Ansicht landet dort, wo der Text sie hinsetzt, oder auf dem Diagramm, wenn dort nichts davon gezeichnet ist. Für jede andere Einstellung, die der Text sperrt – die Registerkarte, die Sprache des Codegenerators, die Schreibweisen und den Begrenzertyp –, zeigt der Editor weiterhin, was er vor dem Laden gezeigt hat. Eine Einstellung, die der Text nicht sperrt, übernimmt den Wert aus dem Text. setInitialValue übernimmt dagegen jeden Wert, den der Text enthält; siehe dort auch zu einem Text, der keine Sperren nennt.
Auch Text, der kein JSON ist, etwa eine Datei mit zurückgebliebenen Merge-Konfliktmarkierungen, löst keinen Fehler aus: Das Dokument wird geleert, seine Einstellungen bleiben, wie sie waren, und der Parse-Fehler wird in der Konsole protokolliert.
Er wird ignoriert, solange readonly gesetzt ist; verwenden Sie setInitialValue, um in einen schreibgeschützten Editor zu laden.

editor.value = 'json...';

runtimeValue

Liefert seit 4.0.0 das Dokument so, wie dieser Editor es hält, als JSON-Zeichenkette. Es gibt keinen Setter, daher löst eine Zuweisung in Code im Strict Mode einen Fehler aus.
Der Wert enthält, was value weglässt: entfernte Entitäten und ihre Reihenfolge, die Stapelreihenfolge, gemessene Breiten, Schlüsselmarkierungen, Ankerpunkte von Beziehungen und Sequenzen. Gesperrte Einstellungen werden auch hier mit ihren gesperrten Werten geschrieben.
Verwenden Sie ihn, um einen weiteren Editor, der einer bereits laufenden Sitzung beitritt, etwa einen Mitbearbeiter oder eine zweite Ansicht desselben Dokuments, über dessen setInitialValue zu initialisieren. Ein Rückgängigmachen einer Entfernung, das die Sitzung später sendet, stellt die Entität dort dann vollständig wieder her, während ein aus value initialisierter Editor keine entfernte Entität hält und stattdessen eine leere, namenlose Tabelle wiederherstellt. Siehe Gemeinsame Bearbeitung.
Entfernte Entitäten werden nicht mehr eingesammelt, daher bleiben sie darin, bis das Dokument das nächste Mal aus seiner Datei geöffnet wird.
Schreiben Sie ihn nie in eine Datei: Speichern Sie value, den das JSON Schema akzeptiert, diesen Wert hier aber nicht.

otherEditor.setInitialValue(editor.runtimeValue);

setInitialValue

Lädt einen zuvor gespeicherten Zustand des Editors. Das Laden selbst wird nicht im Verlauf aufgezeichnet, kann also nicht rückgängig gemacht werden, und es wird kein Ereignis change ausgelöst.
Die Methode leert außerdem den Verlauf, sodass nichts, was vor dem Laden geschah, am geladenen Dokument rückgängig gemacht oder wiederholt werden kann.
Sie nimmt die Speicherform, einen runtimeValue oder eine Datei an, die eine frühere Version gespeichert hat, und übernimmt anders als das Zuweisen von value jede Einstellung, die der Text enthält, einschließlich der Registerkarte und der Code-Einstellungen.
Eine leere Zeichenkette oder alles, was keine Zeichenkette ist, lädt ein neues Dokument, statt einen Fehler auszulösen, daher beginnt setInitialValue('') ein leeres Diagramm.
Seit 4.0.0 sind in diesem neuen Dokument, das auch ein Element zeigt, bevor es irgendeinen Wert erhält, alle Sperren eingeschaltet. Scrollen, Zoomen, der Wechsel der Registerkarte und eine Änderung der Sprache des Codegenerators, der Schreibweisen oder des Begrenzertyps lassen value unverändert und lösen kein change aus. In 3.10.x speicherte es weder die Scrollposition noch die Zoomstufe, und davor speicherte es beides.
Ein aus Text geladenes Dokument behält die Sperren, die es nennt. Eines, das keine nennt – jede vor 4.0.0 gespeicherte Datei, gleich was ihr ignoreSaveSettings besagte, und eine v2-Datei .vuerd –, öffnet sich mit allen Sperren eingeschaltet, mit Viewport gesperrt auf Ursprung 0, 0 und Zoomstufe 1, auf der Registerkarte ERD und mit Sprache, Schreibweisen und Begrenzertyp so, wie es sie gespeichert hat.
In beiden Fällen öffnet sich die Ansicht an der Ansichtsposition des Dokuments – an der, die der Text gespeichert hat, wenn er seine Sperren nennt, bei Ursprung 0, 0 und Zoomstufe 1, wenn er keine nennt – oder auf dem Diagramm, wenn dort nichts davon gezeichnet ist. Ein gesperrter Viewport behält seine gesperrten Werte in value dennoch bei.
Seit 4.0.0 verwirft die Methode außerdem den Zustand der Zusammenarbeit des zuvor gehaltenen Dokuments, und ein bereits abonnierter gemeinsamer Store dieses Editors fragt die anderen Editoren erneut nach deren Zustand, sodass ein in einer laufenden Sitzung neu geladener Editor aufholt. Initialisieren Sie einen solchen Editor mit dem runtimeValue eines anderen Editors.
Auch Text, der kein JSON ist, löst keinen Fehler aus: Das Dokument wird geleert, seine Einstellungen bleiben, wie sie waren, und der Parse-Fehler wird in der Konsole protokolliert.
Anders als das Zuweisen von value wird die Methode nicht durch readonly blockiert, daher laden Sie mit ihr ein Dokument in einen schreibgeschützten Editor.

editor.setInitialValue('json...');

Beim Start laden, bei Änderungen speichern.

editor.setInitialValue(localStorage.getItem('my-diagram') ?? '');
editor.addEventListener('change', () => {
  localStorage.setItem('my-diagram', editor.value);
});

Ereignisse

change, changePresetTheme und changeLocale sind die einzigen drei öffentlichen Ereignisse; changeLocale ist neu in 4.0.0.
Das Element löst für seine eigene Verdrahtung außerdem interne Ereignisse @dineug/erd-editor/internal-* an sich selbst aus; diese gehören nicht zur API.

change

Wenn es Änderungen im Editor gibt, löst er ein Ereignis aus.
Das Ereignis wird um 200 ms entprellt und nicht ausgelöst, solange readonly den Wert true hat.
Es wird bei jeder Änderung des Dokuments ausgelöst – einer Bearbeitung in der Oberfläche, dem Zuweisen von value, clear(), jeder der Methoden setSchema* und seit 4.0.0 setSchemaJSON() und Import and Add. setInitialValue löst es nicht aus.
Nichts, was im Flow-Modus der Registerkarte Visualisierung geschieht, löst es aus – Zoom, Verschieben der Ansicht, Verschieben von Karten, Tidy Up, die Zeilenanzeige oder das Einschränken der Ansicht von einer Karte aus –, da nichts davon eine Änderung des Dokuments ist.
Seit 4.0.0 löst auch eine Änderung an einer Einstellung, deren Sperre eingeschaltet ist, es nicht aus, weil sie nur den Bildschirm verändert und nie value: ein Scrollen oder Zoomen der ERD-Zeichenfläche, solange Viewport gesperrt ist, ein Wechsel der Registerkarte, solange Canvas Type gesperrt ist, und eine Änderung der Sprache des Codegenerators, der Schreibweise der Tabellennamen, der Schreibweise der Spaltennamen oder des Begrenzertyps, solange die jeweils eigene Sperre eingeschaltet ist. Nur diese Änderungen entfallen, daher löst ein Stapel, der zusätzlich das Dokument bearbeitet, es weiterhin aus. Das Sperren oder Entsperren einer Einstellung löst es aus.
In einem neuen Dokument und in jeder vor 4.0.0 gespeicherten Datei sind alle Sperren eingeschaltet, daher lösen Scrollen, Zoomen und der Wechsel der Registerkarte standardmäßig nichts aus. Das umfasst das Fokussieren auf Tabellen von der Registerkarte ERD aus, die Kartenschaltfläche mit dem Symbol für externe Links, die Sie von Flow zurück zur Registerkarte ERD bringt, den Wechsel zu einer Zeile des Explorers oder zu einem Suchtreffer sowie das Öffnen des Explorers oder den Wechsel zu einem Ergebnis der Schnellsuche von einer anderen Registerkarte aus. Jede dieser Aktionen löst nur dann ein change aus, wenn eine Sperre, die sie abdeckt, ausgeschaltet ist: Canvas Type für den Wechsel der Registerkarte und Viewport für das Scrollen, das eine Kartenschaltfläche, ein Ergebnis der Schnellsuche, eine Zeile des Explorers oder ein Suchtreffer zusätzlich bewirkt. Seit 4.1.0 folgt jeder dieser Scrollvorgänge einer einzigen Regel, Wohin ein Sprung führt, daher scrollt ein Tabellenergebnis der Schnellsuche nicht mehr jedes Mal, und ein Sprung, bei dem die Regel die Ansicht an Ort und Stelle lässt, erzeugt kein Scrollen, das ein Ereignis auslösen könnte. Das Öffnen, Schließen oder Ändern der Breite des Explorers verschmälert oder verbreitert die Zeichenfläche, ohne ihren Ursprung zu verschieben, und löst ebenfalls nichts aus. Vor 4.0.0 lösten Scrollen, Zoomen und der Wechsel der Registerkarte es immer aus, auch wenn editor.value gleich blieb.
Um Schreibvorgänge zu überspringen, die nichts ändern, vergleichen Sie editor.value mit dem Wert, den Sie zuletzt gespeichert haben, nicht mit der Datei, die Sie geladen haben: Eine Datei, die eine frühere Version geschrieben hat, eine v2-Datei oder eine von Hand bearbeitete Datei kann in value gleich nach dem Laden anders ausfallen, weil value sie in der Speicherform schreibt. Dasselbe gilt für eine Datei, deren Sperre Viewport ausgeschaltet ist und deren Ursprung auf diesem Bildschirm nichts vom Diagramm zeigt: Das Laden verschiebt die Ansicht auf das Diagramm, und value schreibt, wo sie landet. Seit 4.0.0 verursachen gemessene Breiten dies nicht mehr, weil value keine enthält. Ein Host, der Dateien schreibt, kann stattdessen mit dem Wert changed eines Replikations-Stores eine Bearbeitung von einer Änderung der Ansicht unterscheiden – siehe on@change.
Das Ereignis trägt kein detail, steigt nicht auf (kein Bubbling) und überschreitet die Shadow-Grenze nicht, registrieren Sie den Listener daher am Element selbst und lesen Sie editor.value im Handler.

editor.addEventListener('change', event => {
  const data = event.target.value;
});

changePresetTheme

Wird ausgelöst, wenn das vordefinierte Design in der eingebauten Designauswahl oder seit 4.0.0 über Theme in der Schnellsuche geändert wird. Jede Auswahl löst es aus, auch die Auswahl der bereits geltenden Option.
Ein eigener Aufruf von setPresetTheme oder setSystemAppearance oder das Ein- oder Ausschalten von systemDarkMode löst es nicht aus.
event.detail ist das vollständige ThemeOptions nach der Auswahl – { appearance, grayColor, accentColor } –, nicht das angeforderte Teilobjekt. Seit 4.0.0 hat sein Feld appearance den Wert 'system', solange System ausgewählt ist, nicht den des angezeigten hellen oder dunklen Erscheinungsbilds, speichern Sie den Wert daher unverändert und übergeben Sie ihn wieder an setPresetTheme.

editor.addEventListener('changePresetTheme', event => {
  const themeOptions = event.detail;
});

changeLocale

Wird seit 4.0.0 ausgelöst, wenn im Editor eine Sprache ausgewählt wird, in der Sprachauswahl oder über Display Language in der Schnellsuche, die beide von enableLocalePicker eingeschaltet werden.
Es wird ausgelöst, nachdem die Sprache angewendet wurde, bei jeder Auswahl, auch bei der Auswahl der bereits geltenden Option. setLocale und setSystemLocale lösen es nie aus, ebenso wenig eine Änderung der Sprachen des Browsers. Ein Sprachwechsel löst kein change aus.
event.detail ist { locale }, eine LocaleOption: 'system', wenn System ausgewählt wurde, sonst der Code der Sprache. Das Element merkt sich die Auswahl nicht, speichern Sie sie daher und übergeben Sie sie beim nächsten Laden an setLocale.
Wie change steigt es nicht auf, registrieren Sie den Listener daher am Element selbst.

editor.addEventListener('changeLocale', event => {
  const { locale } = event.detail; // 'system' | 'ko-KR' | ...
});

focus

Setzt den Fokus auf den Editor.

editor.focus();

blur

Entfernt den Fokus vom Editor.

editor.blur();

clear

Leert das Dokument und entfernt jede Tabelle, Spalte, Beziehung, jeden Index und jede Notiz sowie seit 4.0.0 jede Tabellengruppe.
Jede Einstellung bleibt erhalten, einschließlich der Datenbank, der Ansichtsposition, der Zoomstufe, der Ansichtsoptionen für Tabellen, jeder Sperre mit dem Wert, den sie hält, und der Skripte Before tables und After tables der Registerkarte Schema SQL, sodass eine geleerte Datei weiterhin speichert, was sie gespeichert hat. Um stattdessen ein neues Dokument zu beginnen, weisen Sie value den Wert '' zu oder rufen Sie setInitialValue('') auf.
Die Methode wird im Verlauf aufgezeichnet, kann also rückgängig gemacht werden, und löst change aus. Ein Rückgängigmachen stellt das Dokument so wieder her, wie der Editor es hielt, jede gesperrte Einstellung mit ihrem gesperrten Wert. Solange readonly gesetzt ist, wird sie ignoriert.

editor.clear();

destroy

Zerstört die Editorinstanz vollständig, sodass sie nicht mehr wiederverwendet werden kann.
Die Methode gibt die Listener und Abonnements des Editors frei und zerstört jeden gemeinsamen Store, den getSharedStore zurückgegeben hat.
Ein Stream-Stapel, den ein gemeinsamer Store noch zurückhält, wird mit ihm verworfen; rufen Sie zuvor flushStreamBuffers dieses Stores auf, um ihn zu senden.

editor.destroy();

setKeyBindingMap

Definiert Tastenkombinationen neu.
edit, stop, undo, redo, zoomIn, zoomOut und zoomReset sind fest und können nicht neu definiert werden.
Nur die einundzwanzig unten aufgeführten Namen werden geschrieben; alles andere im Objekt wird ignoriert, auch die festen Namen.
Seit 3.10.0 kann search neu definiert werden, und findReplace ist neu. Davor war search fest. Seit 4.0.0 ist removeSelection neu. Seit 4.1.0 sind addTableGroup und groupSelectedTables neu.
Der Wert einer Belegung muss ein ShortcutOption[] sein. Eine bloße Zeichenkette wird ignoriert, schreiben Sie also { addTable: [{ shortcut: 'Alt+KeyN' }] } statt { addTable: 'Alt+KeyN' }.
Ein leeres Array wird akzeptiert und belegt nichts: setKeyBindingMap({ findReplace: [] }) überlässt Ctrl + F (Windows/Linux) oder ⌘ + F (Mac) der Seite, und { search: [] } tut dasselbe für Ctrl + K (Windows/Linux) oder ⌘ + K (Mac). Die Schaltfläche Search der Symbolleiste öffnet weiterhin die Schnellsuche, die Schaltfläche Explorer der Symbolleiste öffnet und schließt weiterhin den Explorer, und Toggle Explorer in der Schnellsuche und im Kontextmenü der Zeichenfläche öffnet weiterhin seine Suche oder schließt ihn; keine davon zeigt eine Tastenkombination für einen leer gelassenen Namen. { removeSelection: [] } überlässt Delete und Backspace der Seite, und die Löscheinträge des Tabellenmenüs, des Notizmenüs und des Gruppenmenüs (Delete, Delete selected, Delete column, Delete columns) zeigen dann keine Tastenkombination.
Seit 4.1.0 überlässt { addTableGroup: [] } der Seite Alt + G (Windows/Linux) oder ⌥ + G (Mac), und { groupSelectedTables: [] } überlässt ihr T und dann G. New Table Group in der Symbolleiste der Zeichenfläche, im Kontextmenü der Zeichenfläche und in der Schnellsuche, Group selected tables im Tabellenmenü und Group Selected Tables in der Schnellsuche funktionieren weiterhin, ohne dass eine Tastenkombination angezeigt wird. Die Tooltips der Schaltflächen New Table, New Memo und New Table Group in der Symbolleiste der Zeichenfläche nennen die erste Tastenkombination von addTable, addMemo und addTableGroup oder bei einer leer gelassenen Belegung nur die Schaltfläche.
Der Aufruf ist eine teilweise Zusammenführung: Namen, die Sie weglassen, behalten ihre Standardwerte, und ein zweiter Aufruf behält die früheren Änderungen bei. Es gibt keinen Getter für die aktuellen Belegungen: createKeyBindingMap liefert die Standardbelegungen, nicht das, was setKeyBindingMap geändert hat.

type ShortcutOption = {
  shortcut: string;
  preventDefault?: boolean;
  stopPropagation?: boolean;
};

const defaultKeyBindingMap: Omit<
  KeyBindingMap,
  | 'edit'
  | 'stop'
  | 'undo'
  | 'redo'
  | 'zoomIn'
  | 'zoomOut'
  | 'zoomReset'
> = {
  search: [
    { shortcut: '$mod+KeyK', preventDefault: true, stopPropagation: true },
  ],
  findReplace: [
    { shortcut: '$mod+KeyF', preventDefault: true, stopPropagation: true },
  ],
  addTable: [{ shortcut: 'Alt+KeyN', preventDefault: true }],
  addColumn: [{ shortcut: 'Alt+Enter', preventDefault: true }],
  addMemo: [{ shortcut: 'Alt+KeyM', preventDefault: true }],
  addTableGroup: [
    { shortcut: 'Alt+KeyG', preventDefault: true, stopPropagation: true },
  ],
  groupSelectedTables: [{ shortcut: 'KeyT KeyG', preventDefault: true }],
  removeTable: [
    { shortcut: '$mod+Backspace', preventDefault: true },
    { shortcut: '$mod+Delete', preventDefault: true },
  ],
  removeColumn: [
    { shortcut: 'Alt+Backspace', preventDefault: true },
    { shortcut: 'Alt+Delete', preventDefault: true },
  ],
  removeSelection: [
    { shortcut: 'Delete', preventDefault: true },
    { shortcut: 'Backspace', preventDefault: true },
  ],
  primaryKey: [{ shortcut: 'Alt+KeyK', preventDefault: true }],
  selectAllTable: [
    { shortcut: '$mod+KeyA', preventDefault: true },
    { shortcut: '$mod+Alt+KeyA', preventDefault: true },
  ],
  selectAllColumn: [{ shortcut: 'Alt+KeyA', preventDefault: true }],
  relationshipZeroOne: [{ shortcut: '$mod+Alt+Digit1', preventDefault: true }],
  relationshipZeroN: [{ shortcut: '$mod+Alt+Digit2', preventDefault: true }],
  relationshipOneOnly: [{ shortcut: '$mod+Alt+Digit3', preventDefault: true }],
  relationshipOneN: [{ shortcut: '$mod+Alt+Digit4', preventDefault: true }],
  tableProperties: [{ shortcut: 'Alt+Space', preventDefault: true }],
  focusView: [
    { shortcut: 'Alt+KeyF', preventDefault: true, stopPropagation: true },
  ],
  handTool: [{ shortcut: 'Space', preventDefault: true }],
  zenMode: [
    { shortcut: 'Alt+KeyZ', preventDefault: true, stopPropagation: true },
  ],
};

// example
editor.setKeyBindingMap({
  addTable: [{ shortcut: '$mod+KeyN', preventDefault: true }],
});

selectAllTable, handTool, removeSelection und seit 4.1.0 groupSelectedTables lassen einem Textcursor den Vortritt: Solange der Fokus in einem Eingabefeld, einem mehrzeiligen Textfeld oder einem Element mit contenteditable liegt, wählt $mod + A den Text aus, Space gibt ein Leerzeichen ein, Delete und Backspace löschen Text, und T und dann G gibt die beiden Buchstaben ein, statt die Zeichenfläche zu erreichen. Bei keinem dieser Tastendrücke wird die Standardaktion verhindert. Jede Taste, mit der Sie sie neu belegen, verhält sich genauso.

Seit 4.0.0 entfernt removeSelection (Delete oder Backspace) die Auswahl auf der Registerkarte ERD als einen Rückgängig-Schritt, ohne nachzufragen. Wenn die fokussierte Tabelle als Einziges ausgewählt ist, eine oder mehrere ihrer Spalten ausgewählt sind und ihre Zeilen bei der aktuellen Zoomstufe gezeichnet werden, entfernt es diese Spalten; andernfalls entfernt es jede ausgewählte Tabelle, Notiz und Tabellengruppe, wobei die Tabellen einer Gruppe erhalten bleiben. Siehe Tabellen und Notizen löschen.
Eine gehaltene Taste entfernt nur einmal, und nichts wird entfernt, solange ein Editor für eine Zelle, eine Notiz oder den Namen einer Tabellengruppe geöffnet ist. Außerhalb eines Textfelds und der Bereiche, die Belegungen zurückhalten (siehe createKeyBindingMap), wird die Standardaktion des Tastendrucks auf jeder Registerkarte verhindert, solange der Editor den Fokus hat, auch auf einer fokussierten Schaltfläche der Symbolleiste und in einem schreibgeschützten Editor, wo er nichts entfernt.

Seit 4.1.0 aktiviert addTableGroup (Alt+KeyG) auf der Registerkarte ERD das Zeichnen mit New Table Group, bei dem der nächste Druck der primären Maustaste auf der Zeichenfläche die Gruppe zeichnet, und ein erneuter Tastendruck deaktiviert das Zeichnen wieder, wie die Schaltfläche New Table Group in der Symbolleiste der Zeichenfläche. groupSelectedTables (KeyT KeyG, T und dann G) legt die ausgewählten Tabellen in eine neue Gruppe und öffnet deren Namenseditor, wie Group selected tables im Kontextmenü einer Tabelle. Ohne ausgewählte Tabelle fügt es nichts hinzu; eine ausgewählte Notiz oder Tabellengruppe zählt nicht. Siehe Gruppe zeichnen und Ausgewählte Tabellen gruppieren.
Beide wirken nur dort, wo die Menüs eine Gruppe anbieten: nicht, solange readonly gesetzt ist, solange die Ansichtsoption Table Groups die Gruppen ausblendet oder solange ein Editor für eine Zelle, eine Notiz oder den Namen einer Tabellengruppe geöffnet ist. Wie die anderen Belegungen der Zeichenfläche wirken sie nur auf der Registerkarte ERD und nicht, solange die Schnellsuche, die Tabelleneigenschaften, die Diff-Ansicht, die Zeitreise, die Vorschau des Automatischen Layouts, Export image oder Map Columns geöffnet ist. Wo sie nichts bewirken, wird die Standardaktion des Tastendrucks trotzdem verhindert, außer wenn groupSelectedTables einem Textcursor den Vortritt lässt. Bei addTableGroup wird außerdem die Weitergabe gestoppt, wie bei focusView und zenMode, sodass ein Listener für keydown der Seite in der Bubbling-Phase den Tastendruck nie empfängt.

Seit 3.10.0 öffnet findReplace ($mod+KeyF) Suchen und Ersetzen. Seit 4.1.0 blendet es den Explorer, der Suchen und Ersetzen enthält, ein und aus, und die Registerkarte Tastenkombinationen führt es als Toggle Explorer.
Solange die Schaltfläche Explorer der Symbolleiste gedrückt erscheint (der Explorer auf der Registerkarte ERD geöffnet und nicht durch den Zen-Modus ausgeblendet), schließt es den Explorer, außer wenn die Schnellsuche, die Tabelleneigenschaften, die Designauswahl, die Sprachauswahl, der Dialog Export image oder Map Columns geöffnet ist. Andernfalls schließt es, was davon geöffnet ist, holt die Registerkarte ERD von jeder anderen Registerkarte aus nach vorn und öffnet den Explorer mit dem Textcursor in seinem Feld Find und ausgewähltem Suchbegriff. Ein Editor, der zu schmal ist, um den Explorer neben der Zeichenfläche anzuzeigen, hält ihn geöffnet, aber beiseite, und zeigt die Meldung Widen the window to show the Explorer. Vor 4.1.0 öffnete es den schwebenden Bereich Suchen und Ersetzen oder gab dessen Feld die Tastatur zurück und schloss ihn nie.
Es lässt einem Textcursor nicht den Vortritt: Solange der Editor den Fokus hat, wird es auf jeder Registerkarte abgefangen, von der Zeichenfläche aus oder aus einem Eingabefeld im Editor. Die Standardaktion des Tastendrucks wird verhindert, sodass der Browser keine Suchleiste öffnet, und seine Weitergabe wird gestoppt, sodass kein Listener für keydown der Seite in der Bubbling-Phase ihn empfängt. Bei geöffnetem Editor für eine Zelle oder Notiz oder seit 4.0.0 für den Namen einer Tabellengruppe werden Standardaktion und Weitergabe weiterhin verhindert und gestoppt, aber die Belegung bewirkt nichts.
Solange die Diff-Ansicht, die Zeitreise oder die Vorschau des Automatischen Layouts geöffnet ist, auf welcher Registerkarte auch immer, oder solange eine IME noch Zeichen zusammensetzt, wird weder die Standardaktion verhindert noch die Weitergabe gestoppt, sodass die eigene Suche des Browsers oder des Hosts den Tastendruck erhält. Im Explorer wird bei einem Tastendruck während des Zusammensetzens die Weitergabe gestoppt, die Standardaktion aber nicht verhindert. Jede Taste, mit der Sie findReplace neu belegen, verhält sich genauso.

focusView wirkt nur auf der Registerkarte ERD. Mit mindestens einer ausgewählten Tabelle öffnet es die Registerkarte Visualisierung im Flow-Modus, eingeschränkt auf diese Tabellen und jede Tabelle, die direkt über eine Beziehung mit ihnen verbunden ist; eine ausgewählte Notiz oder Tabellengruppe zählt nicht, und ohne ausgewählte Tabelle bewirkt es nichts. Siehe Auf Tabellen fokussieren.

stop (Escape) beendet auf der Registerkarte ERD einen geöffneten Editor für eine Zelle oder Notiz oder das Zeichnen einer Beziehung und lässt die Auswahl unverändert. Seit 4.0.0 beendet es außerdem einen Namenseditor einer Tabellengruppe, ohne einen Namen zu schreiben, sowie das Zeichnen mit New Table Group. Der Editor ruft für diesen Tastendruck preventDefault() auf.
Ist nichts davon geöffnet, hebt Escape die Auswahl und die fokussierte Zelle auf, und seine Standardaktion wird nicht verhindert. Eine Bearbeitung zu verlassen und die Auswahl aufzuheben, erfordert daher zwei Tastendrücke.
Abgesehen vom Explorer, den Formaten von Import im Willkommensbildschirm und den unten genannten Auswahlen und Dialogen stoppt der Editor die Weitergabe von Escape nie, sodass eine Seite, die selbst darauf lauscht, etwa um einen eigenen Dialog zu schließen, beide Tastendrücke empfängt und denjenigen überspringen kann, dessen defaultPrevented den Wert true hat.
Solange die Schnellsuche, die Tabelleneigenschaften, die Diff-Ansicht, die Vorschau des Automatischen Layouts oder die Zeitreise geöffnet ist, schließt Escape stattdessen diese und lässt die Auswahl unverändert. Auch bei diesem Tastendruck wird die Standardaktion nicht verhindert.
Seit 4.0.0 nimmt auch ein geöffneter Dialog Export image oder Map Columns Escape entgegen, schließt sich und lässt die Auswahl unverändert. Jeder übernimmt beim Öffnen die Tastatur, und bei diesem Escape wird sowohl die Standardaktion verhindert als auch die Weitergabe gestoppt.
Seit 4.1.0 gibt ein Escape, das mit dem Fokus im Explorer gedrückt wird, in seinem Baum, seinen Feldern oder seinen Schaltflächen, die Tastatur an die Zeichenfläche zurück und lässt den Explorer geöffnet und die Auswahl unverändert. Der Editor ruft dafür sowohl preventDefault() als auch stopPropagation() auf, sodass es nie einen Listener für keydown der Seite in der Bubbling-Phase erreicht.
Ein Escape auf der Zeichenfläche schließt den Explorer nie. Vor 4.1.0 schloss ein Escape im Bereich Suchen und Ersetzen diesen, und eines auf der Zeichenfläche schloss ihn mit demselben Tastendruck, der die Auswahl aufhob.
Seit 4.0.0 schließen sich die Sprachauswahl und die Farbauswahl mit Escape: Darin wird seine Standardaktion verhindert und seine Weitergabe gestoppt, und auf der Zeichenfläche schließt es sie mit demselben Tastendruck, der die Auswahl aufhebt, ohne dass die Standardaktion verhindert oder die Weitergabe gestoppt wird.
Ein Escape, das gedrückt wird, während eine IME noch Zeichen zusammensetzt, gehört zum Zusammensetzen. Es lässt einen geöffneten Editor unverändert, und seine Standardaktion wird nicht verhindert, daher kann eine Seite auch einen Tastendruck überspringen, dessen isComposing den Wert true hat oder dessen keyCode 229 lautet. Im Explorer wird bei einem solchen Tastendruck, wie bei jeder dort während des Zusammensetzens gedrückten Taste, außerdem die Weitergabe gestoppt, und die Tastatur bleibt im Feld.
Vor 3.9.2 beendete ein einziges Escape eine Bearbeitung oder ein Zeichnen und hob zugleich die Auswahl auf, und der Editor verhinderte seine Standardaktion nie.

createKeyBindingMap

Seit 3.9.2 exportiert das Paket createKeyBindingMap() und zusammen damit die Typen KeyBindingMap, KeyBindingName und ShortcutOption.
Die Funktion liefert die Standard-Tastenbelegungen, alle 28 Namen einschließlich der festen, bei jedem Aufruf als neue Map, sodass eine Änderung der zurückgegebenen Map nichts anderes ändert.
Von dieser Belegung geht jeder Editor aus, und ein Aufruf von setKeyBindingMap zeigt sich darin nicht.
Nur createKeyBindingMap ist ein Laufzeitexport; die anderen drei sind Typen.

type KeyBindingName =
  | 'edit'
  | 'stop'
  | 'search'
  | 'findReplace'
  | 'undo'
  | 'redo'
  | 'addTable'
  | 'addColumn'
  | 'addMemo'
  | 'addTableGroup'
  | 'groupSelectedTables'
  | 'removeTable'
  | 'removeColumn'
  | 'removeSelection'
  | 'primaryKey'
  | 'selectAllTable'
  | 'selectAllColumn'
  | 'relationshipZeroOne'
  | 'relationshipZeroN'
  | 'relationshipOneOnly'
  | 'relationshipOneN'
  | 'tableProperties'
  | 'focusView'
  | 'zoomIn'
  | 'zoomOut'
  | 'zoomReset'
  | 'handTool'
  | 'zenMode';

type KeyBindingMap = Record<KeyBindingName, ShortcutOption[]>;

declare function createKeyBindingMap(): KeyBindingMap;

// example
import { createKeyBindingMap } from '@dineug/erd-editor';

const shortcuts = Object.values(createKeyBindingMap())
  .flat()
  .map(({ shortcut }) => shortcut); // 'Enter', 'Escape', '$mod+KeyK', ...

Jeder Wert shortcut ist eine Tastenkombination in der Syntax von tinykeys, die ihre Taste über KeyboardEvent.code benennt, wobei $mod unter macOS ⌘ und sonst Control ist.
Seit 4.0.0 liest der Editor diese Tastenkombinationen selbst statt über tinykeys, in derselben Syntax. Eine Taste passt über ihren code oder über ihren key in beliebiger Groß-/Kleinschreibung, und ein Tastendruck passt nur, wenn genau die genannten Zusatztasten gehalten werden. AltGraph zählt unter Windows als Control und Alt und unter macOS als Alt. Durch ein Leerzeichen getrennte Tastendrücke bilden eine Tastenfolge, die nach einer Sekunde ohne keydown von vorn beginnt.
Seit 4.1.0 ist eine Standardbelegung eine Tastenfolge: groupSelectedTables ist KeyT KeyG, T und dann G. Eine Tastenfolge wird bei dem Tastendruck ausgeführt, der sie vervollständigt, und nur dieser Tastendruck erhält ihr preventDefault und stopPropagation, sodass mit den Standardbelegungen T die Seite erreicht und nur bei G die Standardaktion verhindert wird. Menüs, die Schnellsuche und die Registerkarte Tastenkombinationen zeigen eine Tastenfolge als eine Taste pro Tastendruck.
Die festen Namen sind mit Enter (edit), Escape (stop), $mod+KeyZ (undo), $mod+Shift+KeyZ (redo), $mod+Equal (zoomIn), $mod+Minus (zoomOut) und $mod+Digit0 (zoomReset) belegt. edit und stop tragen keine Flags; die anderen fünf tragen preventDefault und stopPropagation. Die übrigen sind die oben gezeigten Standardbelegungen, darunter search und findReplace.

Der Editor lauscht an seinem eigenen Element auf diese Tasten, daher muss ein Host, der Tasten vor dem Editor abgreift, mit globalen Hotkeys oder einem Listener für keydown in der Capture-Phase, sie durchlassen, solange der Editor den Fokus hat.
Bauen Sie die Liste der durchzulassenden Tasten aus createKeyBindingMap() auf, mit den Belegungen, die Sie an setKeyBindingMap übergeben haben, anstelle der Standardbelegungen.
Seit 3.10.0 enthält diese Liste $mod+KeyF, die Tastenkombination der browsereigenen Suche. Ein Host, der seine eigene Suche auf dieser Tastenkombination behalten will, ruft setKeyBindingMap({ findReplace: [] }) auf.
Seit 4.0.0 enthält sie außerdem Delete und Backspace ohne Zusatztaste. Ein Host, der diese Tasten behalten will, ruft setKeyBindingMap({ removeSelection: [] }) auf.
Seit 4.1.0 enthält sie außerdem Alt+KeyG und die Tastenfolge KeyT KeyG, die als eine einzige Zeichenkette kommt: Teilen Sie sie am Leerzeichen und lassen Sie jeden Tastendruck durch, auch T und G ohne Zusatztaste, da eine Tastenfolge, der ein Tastendruck fehlt, nie vollständig wird. Ein Host, der diese Tasten behalten will, ruft setKeyBindingMap({ addTableGroup: [] }) oder setKeyBindingMap({ groupSelectedTables: [] }) auf.

Solange der Fokus im Explorer liegt, in seinem Baum, seinen Feldern Find und Replace oder seinen Schaltflächen, werden findReplace, search, undo, redo, zoomIn, zoomOut und zoomReset an den Editor durchgelassen, sodass findReplace dort wie auf der Zeichenfläche wirkt. Jede andere Belegung, wie sie gerade eingestellt ist, wird am Explorer angehalten, eine Tastenfolge mit ihrem letzten Tastendruck (mit den Standardbelegungen ein G ohne Zusatztaste), und ebenso die Pfeiltasten, Tab, Enter, Space, Home, End und jede Taste, die gedrückt wird, während eine IME noch Zeichen zusammensetzt. Abgesehen von Escape, das die Tastatur an die Zeichenfläche zurückgibt, wird ihre Weitergabe gestoppt, ohne dass ihre Standardaktion verhindert wird, sodass sie in den Feldern, Schaltflächen und im Baum des Explorers als gewöhnliche Tasten wirken und weder die Zeichenfläche noch einen Listener für keydown der Seite in der Bubbling-Phase erreichen: Alt + N fügt dort keine Tabelle hinzu, und Delete entfernt nichts. Bei den Tasten, die den Fokus durch die Zeilen des Baums bewegen, eine Zeile einklappen oder zu ihr wechseln, und bei Enter im Feld Find oder Replace, das durch die Treffer wechselt oder ersetzt, wird zusätzlich die Standardaktion verhindert.
Jede andere Taste, etwa die Tastenkombination eines Hosts zum Speichern oder für seine Befehlspalette, gelangt wie gewohnt zur Seite. Siehe Tasten im Explorer. Vor 4.1.0 hielt der schwebende Bereich Suchen und Ersetzen Tasten auf dieselbe Weise zurück, abgesehen von Home, End, dem letzten Tastendruck einer Tastenfolge und Space, solange handTool auf eine andere Taste gelegt war.
Seit 4.0.0 hält die Sprachauswahl Tasten auf dieselbe Weise zurück: Dieselben sieben Belegungen werden durchgelassen, und bei jeder anderen Belegung (seit 4.1.0 bei einer Tastenfolge mit ihrem letzten Tastendruck), den Pfeiltasten und Tab wird dort die Weitergabe gestoppt, ohne dass die Standardaktion verhindert wird, ebenso bei jeder Taste, die gedrückt wird, während eine IME noch Zeichen zusammensetzt. ↑, ↓, Home, End, Enter und Space auf einer ihrer Zeilen wechseln durch die Zeilen oder wählen eine aus, und bei ihnen wird zusätzlich die Standardaktion verhindert.

$mod

Tauscht die Taste Control je nach Umgebung aus.

• Mac: $mod = Meta (⌘)
• Windows/Linux: $mod = Control

Tabelle der Tastenkombinationen

Verwendet die Eigenschaften key, code des Tastaturereignisses.
Verwenden Sie code für absolute Positionen und key für Eingabewerte.

Windows	macOS	key	code
entfällt	Command / ⌘	Meta	MetaLeft / MetaRight
Alt	Option / ⌥	Alt	AltLeft / AltRight
Control	Control / ^	Control	ControlLeft / ControlRight
Shift	Shift	Shift	ShiftLeft / ShiftRight
Space	Space	entfällt	Space
Enter	Return	Enter	Enter
Esc	Esc	Escape	Escape
Backspace	Delete / ⌫	Backspace	Backspace
Delete	fn + Delete	Delete	Delete
1, 2 usw.	1, 2 usw.	1, 2 usw.	Digit1, Digit2 usw.
a, b usw.	a, b usw.	a, b usw.	KeyA, KeyB usw.
-	-	-	Minus
=	=	=	Equal
+	+	+	Equal

Design

setPresetTheme

Legt ein vordefiniertes Design fest.
Die Standardwerte sind appearance: 'dark', grayColor: 'slate' und accentColor: 'indigo'.
Jedes Feld wird für sich angewendet, sodass ein teilweiser Aufruf die anderen beiden unverändert lässt. Ein Wert, der keiner der unten aufgeführten Namen ist, wird ignoriert, und der Aufruf löst nie einen Fehler aus.
Seit 4.0.0 nimmt appearance auch 'system' an, die Option System der Designauswahl. Dieser Wert zeigt das helle oder dunkle Erscheinungsbild, das das Betriebssystem meldet, oder dasjenige, das setSystemAppearance angibt, und wechselt, wenn sich dieses ändert.

type ThemeOptions = {
  appearance: 'dark' | 'light' | 'system';
  grayColor: 'gray' | 'mauve' | 'slate' | 'sage' | 'olive' | 'sand';
  accentColor:
    | 'gray'
    | 'gold'
    | 'bronze'
    | 'brown'
    | 'yellow'
    | 'amber'
    | 'orange'
    | 'tomato'
    | 'red'
    | 'ruby'
    | 'crimson'
    | 'pink'
    | 'plum'
    | 'purple'
    | 'violet'
    | 'iris'
    | 'indigo'
    | 'blue'
    | 'cyan'
    | 'teal'
    | 'jade'
    | 'green'
    | 'grass'
    | 'lime'
    | 'mint'
    | 'sky';
};

// example
editor.setPresetTheme({ appearance: 'light' });

setSystemAppearance

Gibt seit 4.0.0 an, welches helle oder dunkle Erscheinungsbild das Erscheinungsbild 'system' zeigt, für einen Host mit eigenem hellem und dunklem Erscheinungsbild, etwa einem IDE-Design. Solange eines angegeben ist, werden Änderungen im Betriebssystem ignoriert.
null oder jeder andere Wert als 'dark' oder 'light' kehrt dazu zurück, dem Betriebssystem zu folgen.
Solange das Erscheinungsbild 'light' oder 'dark' ist, ändert die Methode nichts auf dem Bildschirm, aber der Wert bleibt erhalten und wirkt, sobald das Erscheinungsbild 'system' wird. Andernfalls wirkt er sofort. Dabei löst sie nichts aus, und changePresetTheme meldet weiterhin 'system'.
Die Hosts für VS Code, JetBrains und Obsidian rufen sie mit ihrem eigenen hellen oder dunklen Erscheinungsbild auf und erneut, sobald sich dieses ändert.

editor.setPresetTheme({ appearance: 'system' });
editor.setSystemAppearance('light'); // null follows the OS again

setTheme

Ermöglicht es, das Design anzupassen.
Jeder Aufruf ersetzt die gesamte benutzerdefinierte Überlagerung, übergeben Sie also erneut das vollständige Objekt, um ein Token zusätzlich zu einer bestehenden Überschreibung zu ändern, und übergeben Sie {}, um zum vordefinierten Design zurückzukehren.
Nur die unten aufgeführten Token-Namen mit Zeichenkettenwerten werden behalten; alles andere wird ohne Fehler verworfen.
Die Überlagerung liegt über dem vordefinierten Design, sodass ein späteres setPresetTheme das darunterliegende vordefinierte Design austauscht, während Ihre Überschreibungen bleiben.

JavaScript

type Theme = {
  grayColor1: string;
  grayColor2: string;
  grayColor3: string;
  grayColor4: string;
  grayColor5: string;
  grayColor6: string;
  grayColor7: string;
  grayColor8: string;
  grayColor9: string;
  grayColor10: string;
  grayColor11: string;
  grayColor12: string;

  accentColor1: string;
  accentColor2: string;
  accentColor3: string;
  accentColor4: string;
  accentColor5: string;
  accentColor6: string;
  accentColor7: string;
  accentColor8: string;
  accentColor9: string;
  accentColor10: string;
  accentColor11: string;
  accentColor12: string;

  canvasBackground: string;
  canvasBoundaryBackground: string;

  tableBackground: string;
  tableHeaderBackground: string;
  tableSelect: string;
  tableBorder: string;
  tableShadow: string;

  tableGroupHeaderBackground: string;
  tableGroupBackground: string;
  tableGroupBorder: string;

  memoBackground: string;
  memoSelect: string;
  memoBorder: string;
  memoShadow: string;

  columnSelect: string;
  columnSelectHover: string;
  columnHover: string;

  relationshipHover: string;

  visualizationLink: string;
  visualizationColumn: string;
  visualizationRelationship: string;

  toolbarBackground: string;

  contextMenuBackground: string;
  contextMenuSelect: string;
  contextMenuHover: string;
  contextMenuBorder: string;

  minimapBorder: string;
  minimapShadow: string;
  minimapViewportBorder: string;
  minimapViewportBorderHover: string;

  toastBackground: string;
  toastBorder: string;
  toastSuccess: string;
  toastError: string;

  findReplaceError: string;

  mapColumnsError: string;

  schemaSqlWarningBackground: string;
  schemaSqlWarningForeground: string;

  dragSelectBackground: string;
  dragSelectBorder: string;

  scrollbarTrack: string;
  scrollbarThumb: string;
  scrollbarThumbHover: string;

  foreground: string;
  active: string;
  placeholder: string;

  focus: string;
  inputActive: string;

  keyPK: string;
  keyFK: string;
  keyPFK: string;

  treeBackground: string;
  treeRowHover: string;
  treeRowCurrent: string;
  treeMuted: string;
  treeMatch: string;

  explorerBackground: string;
  explorerBorder: string;

  diffInsertForeground: string;
  diffDeleteForeground: string;
  diffModifyForeground: string;
  diffRenameForeground: string;
};

// example
editor.setTheme({
  canvasBackground: '#1b1b1f',
  tableBackground: '#242429',
  keyPK: '#ffc53d',
});

tableShadow und memoShadow sind die Farbe des Schattens, den Tabellen und Notizen auf die ERD-Zeichenfläche werfen. Das dunkle vordefinierte Design lässt sie transparent, was keinen Schatten wirft, wie die Übergabe von none oder einer leeren Zeichenkette an setTheme; das helle vordefinierte Design verwendet rgba(0, 0, 0, 0.18).

Seit 4.0.0 gibt es neun weitere Token:

• tableGroupHeaderBackground, tableGroupBackground und tableGroupBorder färben die Titelleiste, die Innenfläche und den Umriss einer Tabellengruppe, die keine eigene Farbe hat.
• toastSuccess und toastError färben das Symbol einer Meldung, die berichtet, wie etwas ausgegangen ist.
• findReplaceError und mapColumnsError färben die Fehler, die Suchen und Ersetzen und der Dialog „Spalten zuordnen“ anzeigen. Suchen und Ersetzen verwendete zuvor diffDeleteForeground, daher färbt eine Überschreibung dieses Tokens Suchen und Ersetzen nicht mehr um.
• schemaSqlWarningBackground und schemaSqlWarningForeground färben die Warnungen in den Optionen der Registerkarte Schema SQL.

Seit 4.1.0 gibt es neun weitere Token:

• treeBackground, treeRowHover, treeRowCurrent, treeMuted und treeMatch färben den Baum, den sich der Explorer und die Diff-Ansicht teilen: seinen Hintergrund, der auch die Felder Find und Replace des Explorers füllt; eine Zeile unter dem Zeiger, die Zeile mit dem Tastaturfokus, solange der Baum den Fokus hat, und eine Schaltfläche unter dem Zeiger im Kopf und in der Suche des Explorers; die Zeile des aktuellen Suchtreffers; abgeschwächten Text wie Anzahlen, Datentypen und die Pfeile zum Einklappen; und die Markierung hinter dem Text, den eine Suche gefunden hat.
• explorerBackground und explorerBorder färben den Bereich des Explorers und seine Linien: seinen Rand neben der Zeichenfläche, die Linie unter seiner Suche und die Ränder seiner Felder und der Schaltflächen, die Search In ausklappt. explorerBorder zeichnet außerdem den Rand des Baums der Diff-Ansicht, die Linie unter seinem Feld Filter by name und den Rand dieses Felds. Die Schlüsselsymbole des Explorers verwenden keyPK, keyFK und keyPFK.
• diffModifyForeground und diffRenameForeground färben, was die Diff-Ansicht als geändert und umbenannt markiert, in ihrem Baum und in beiden Dokumenten. diffModifyForeground umrandet außerdem eine Tabelle, Notiz oder Tabellengruppe, die verschoben, in der Größe geändert, umgefärbt oder einer anderen Gruppe zugeordnet wurde, egal was sich sonst daran geändert hat, und zeichnet die Verbindungslinie eines geänderten Fremdschlüssels.

diffInsertForeground und diffDeleteForeground färben jetzt, was die Diff-Ansicht als hinzugefügt und entfernt markiert, in ihrem Baum und in dem Dokument, das es enthält, gleichermaßen in Text, Umrissen und Verbindungslinien. diffInsertBackground, diffDeleteBackground, diffCrossBackground und diffCrossForeground wurden in 4.1.0 entfernt, da die Diff-Ansicht keine Zellen mehr füllt. setTheme verwirft sie wie jeden anderen Namen, der nicht in Theme steht, und ihre Hooks --erd-editor-diff-insert-background, --erd-editor-diff-delete-background, --erd-editor-diff-cross-background und --erd-editor-diff-cross-foreground werden nicht mehr gelesen.

CSS-Variablen

Jedes Token in Theme hat einen passenden CSS-Hook, dessen Name --erd-editor- plus der Schlüssel in Kebab-Case ist: grayColor10 ist --erd-editor-gray-color-10, keyPK ist --erd-editor-key-pk, und keyPFK ist --erd-editor-key-pfk.
Die Hooks werden in den Editor vererbt, setzen Sie sie also dort, wo sie wirken sollen. Auf :root gestalten sie jeden Editor auf der Seite; auf dem Element selbst nur genau diesen.

erd-editor {
  --erd-editor-canvas-background: #1b1b1f;
}

Seit 3.4.0 werden die falsch geschriebenen Token dargSelect als dragSelect geschrieben, und ihre Hooks wurden von --erd-editor-darg-select-background und --erd-editor-darg-select-border in --erd-editor-drag-select-background und --erd-editor-drag-select-border geändert. Ein Stylesheet, das noch die alten Namen verwendet, wird ignoriert.

Standardwerte des Designs

:root {
  --erd-editor-gray-color-1: #111113;
  --erd-editor-gray-color-2: #18191b;
  --erd-editor-gray-color-3: #212225;
  --erd-editor-gray-color-4: #272a2d;
  --erd-editor-gray-color-5: #2e3135;
  --erd-editor-gray-color-6: #363a3f;
  --erd-editor-gray-color-7: #43484e;
  --erd-editor-gray-color-8: #5a6169;
  --erd-editor-gray-color-9: #696e77;
  --erd-editor-gray-color-10: #777b84;
  --erd-editor-gray-color-11: #b0b4ba;
  --erd-editor-gray-color-12: #edeef0;
  --erd-editor-accent-color-1: #11131f;
  --erd-editor-accent-color-2: #141726;
  --erd-editor-accent-color-3: #182449;
  --erd-editor-accent-color-4: #1d2e62;
  --erd-editor-accent-color-5: #253974;
  --erd-editor-accent-color-6: #304384;
  --erd-editor-accent-color-7: #3a4f97;
  --erd-editor-accent-color-8: #435db1;
  --erd-editor-accent-color-9: #3e63dd;
  --erd-editor-accent-color-10: #5472e4;
  --erd-editor-accent-color-11: #9eb1ff;
  --erd-editor-accent-color-12: #d6e1ff;
  --erd-editor-canvas-background: #212225;
  --erd-editor-canvas-boundary-background: #111113;
  --erd-editor-table-background: #18191b;
  --erd-editor-table-header-background: #2e3135;
  --erd-editor-table-select: #435db1;
  --erd-editor-table-border: #363a3f;
  --erd-editor-table-shadow: transparent;
  --erd-editor-table-group-header-background: #43484e;
  --erd-editor-table-group-background: #d3edf81d;
  --erd-editor-table-group-border: #43484e;
  --erd-editor-memo-background: #18191b;
  --erd-editor-memo-select: #435db1;
  --erd-editor-memo-border: #363a3f;
  --erd-editor-memo-shadow: transparent;
  --erd-editor-column-select: #182449;
  --erd-editor-column-select-hover: #1d2e62;
  --erd-editor-column-hover: #272a2d;
  --erd-editor-relationship-hover: #435db1;
  --erd-editor-visualization-link: #43484e;
  --erd-editor-visualization-column: #5a6169;
  --erd-editor-visualization-relationship: #5a6169;
  --erd-editor-toolbar-background: #111113;
  --erd-editor-context-menu-background: #18191b;
  --erd-editor-context-menu-select: #272a2d;
  --erd-editor-context-menu-hover: #3a4f97;
  --erd-editor-context-menu-border: #363a3f;
  --erd-editor-minimap-border: black;
  --erd-editor-minimap-shadow: black;
  --erd-editor-minimap-viewport-border: #3a4f97;
  --erd-editor-minimap-viewport-border-hover: #435db1;
  --erd-editor-toast-background: #18191b;
  --erd-editor-toast-border: #363a3f;
  --erd-editor-toast-success: #3dd68c;
  --erd-editor-toast-error: #ff9592;
  --erd-editor-find-replace-error: #ff9592;
  --erd-editor-map-columns-error: #ff9592;
  --erd-editor-schema-sql-warning-background: #500f1c;
  --erd-editor-schema-sql-warning-foreground: #ff9592;
  --erd-editor-drag-select-background: #253974;
  --erd-editor-drag-select-border: #435db1;
  --erd-editor-scrollbar-track: #ddeaf814;
  --erd-editor-scrollbar-thumb: #696e77;
  --erd-editor-scrollbar-thumb-hover: #777b84;
  --erd-editor-foreground: #b0b4ba;
  --erd-editor-active: #edeef0;
  --erd-editor-placeholder: #e5edfd7b;
  --erd-editor-focus: #435db1;
  --erd-editor-input-active: #5472e4;
  --erd-editor-key-pk: #ffc53d;
  --erd-editor-key-fk: #e54666;
  --erd-editor-key-pfk: #00a2c7;
  --erd-editor-tree-background: #111113;
  --erd-editor-tree-row-hover: #212225;
  --erd-editor-tree-row-current: #1d2e62;
  --erd-editor-tree-muted: #b0b4ba;
  --erd-editor-tree-match: #253974;
  --erd-editor-explorer-background: #111113;
  --erd-editor-explorer-border: #363a3f;
  --erd-editor-diff-insert-foreground: #3dd68c;
  --erd-editor-diff-delete-foreground: #ff9592;
  --erd-editor-diff-modify-foreground: #ffca16;
  --erd-editor-diff-rename-foreground: #70b8ff;
}

Anzeigesprache

Seit 4.0.0 gibt es den eigenen Text des Editors – seine Menüs, Bereiche, Dialoge, die Schnellsuche, Meldungen und die Wörter, die er auf das Diagramm zeichnet, etwa unnamed, Bildexporte eingeschlossen – in 25 Sprachen. Tabellen- und Spaltennamen, SQL, Datentypen und generierter Code werden nie übersetzt. Siehe Sprache und Design.
Bevor setLocale aufgerufen oder eine Sprache ausgewählt wird, zeigt der Editor Englisch oder folgt 'system', solange enableLocalePicker eingeschaltet ist.
Der Editor setzt lang und dir an seiner eigenen Wurzel innerhalb des geschlossenen Shadow Roots, nie am Host-Element oder an der Seite, sodass eine Seite mit Schreibrichtung von rechts nach links den Editor nicht spiegelt und eine Sprache mit Schreibrichtung von rechts nach links die Seite nicht spiegelt. Hebräisch, Arabisch und Persisch ordnen die Oberfläche des Editors von rechts nach links an; das Diagramm selbst wird nie gespiegelt. Seit 4.1.0 bleibt der Explorer in jeder Sprache links von der Zeichenfläche, wobei seine eigenen Zeilen in diesen drei Sprachen von rechts nach links verlaufen.
Das Paket exportiert die Typen LocaleCode (einer der unten aufgeführten Codes) und LocaleOption.

type LocaleOption = LocaleCode | 'system';

Code	Angezeigt als	Sprache
id-ID	Bahasa Indonesia	Indonesisch
de-DE	Deutsch	Deutsch
en	English	Englisch
es-ES	Español	Spanisch
eu-ES	Euskara	Baskisch
fr-FR	Français	Französisch
it-IT	Italiano	Italienisch
nl-NL	Nederlands	Niederländisch
pl-PL	Polski	Polnisch
pt-PT	Português	Portugiesisch
pt-BR	Português Brasileiro	Brasilianisches Portugiesisch
ro-RO	Română	Rumänisch
sk-SK	Slovenčina	Slowakisch
sl-SI	Slovenščina	Slowenisch
sv-SE	Svenska	Schwedisch
tr-TR	Türkçe	Türkisch
ru-RU	Русский	Russisch
uk-UA	Українська	Ukrainisch
he-IL	עברית	Hebräisch
ar-SA	العربية	Arabisch
fa-IR	فارسی	Persisch
ja-JP	日本語	Japanisch
zh-CN	简体中文	Vereinfachtes Chinesisch
zh-TW	繁體中文	Traditionelles Chinesisch
ko-KR	한국어	Koreanisch

setLocale

Legt die Anzeigesprache fest: 'system' oder einen der oben aufgeführten Codes. Alles andere, etwa ein bloßes 'ko', ein unbekannter Code oder ein Wert, der keine Zeichenkette ist, wird ohne Fehler ignoriert.
Die Sprache wird angewendet, bevor die Methode zurückkehrt, sodass eine vor dem Einfügen des Elements gesetzte Sprache bereits in dessen erstem Frame erscheint.
Die Methode löst nichts aus, weder changeLocale noch change, und berührt weder value noch den Verlauf noch einen gemeinsamen Store.
Die Wahl bleibt bestehen, egal wie enableLocalePicker geschaltet ist, und setLocale('system') folgt dem System auch bei ausgeschalteter Sprachauswahl.
Der Editor speichert nichts. Um die Wahl eines Benutzers zu behalten, lauschen Sie auf changeLocale und übergeben Sie sie beim nächsten Laden wieder.

editor.enableLocalePicker = true;
editor.setLocale(localStorage.getItem('locale') ?? 'system');
editor.addEventListener('changeLocale', event => {
  localStorage.setItem('locale', event.detail.locale);
});

setSystemLocale

Gibt als BCP-47-Tag die Sprache an, für die 'system' steht, für einen Host mit eigener Anzeigesprache. Die Hosts für VS Code, JetBrains und Obsidian rufen die Methode mit ihrer eigenen Anzeigesprache auf.
Leerraum am Anfang und Ende des Tags wird entfernt. null, eine leere Zeichenkette oder ein Wert, der keine Zeichenkette ist, kehrt zu navigator.languages des Browsers zurück, dem der Editor bei jeder Änderung folgt.
Die Methode ist nur von Bedeutung, solange die geltende Option 'system' ist, und wirkt sofort. Die Zeile System der Sprachauswahl nennt die Sprache, zu der die Option aufgelöst wird.
Das Tag oder der Reihe nach jede Sprache des Browsers wird anhand des Sprach-Subtags zur ersten Sprache aufgelöst, die der Editor hat, wobei Groß-/Kleinschreibung und Unterstriche ignoriert werden: de-AT ergibt de-DE und en-GB ergibt en. Chinesisch richtet sich nach seiner Schrift, wobei Hant zh-TW und Hans zh-CN ergibt, und ohne Schrift nach der Region, wobei TW, HK und MO zh-TW und jede andere zh-CN ergeben. pt ergibt pt-BR, sofern keine andere Region als BR genannt ist. Wenn nichts passt, zeigt der Editor Englisch.

editor.setLocale('system');
editor.setSystemLocale('pt-PT'); // null follows the browser again

setSchemaSQL

Lädt eine Datei mit Schema SQL.
Standardmäßig ersetzt die Methode das aktuelle Dokument, statt die Datei mit ihm zusammenzuführen; siehe mode unten. Die bereits vorhandenen Einstellungen bleiben erhalten, einschließlich jeder Sperre und ihres gesperrten Werts, abgesehen von der Ansichtsposition und der Zoomstufe, und die Tabellen werden angeordnet, sobald die Datei gelesen ist, in Zeilen, sofern placement unten nichts anderes verlangt. Mit gesperrtem Viewport schreibt value dann die Ansicht, mit der der Import beginnt, Ursprung 0, 0 bei Zoomstufe 1. In einem Dokument, das in ein Element importiert wird, das nie einen Wert erhalten hat, sind daher alle Sperren eingeschaltet, wie in einem neuen Dokument.
Die Methode wird im Verlauf aufgezeichnet, sodass Undo, Redo möglich ist, und löst change aus. Eine leere Zeichenkette wird ignoriert, und der Aufruf bewirkt nichts, solange readonly gesetzt ist.
setSchemaGraphQL, setSchemaDBML und setSchemaAML verhalten sich genauso, und ihre Parser schlagen nie fehl: Text, den sie nicht lesen können, lädt ein leeres Dokument, statt einen Fehler auszulösen.
Seit 4.0.0 nehmen alle vier ein optionales zweites Argument { placement, mode } an:

• placement: 'grid', der Standardwert, setzt die Tabellen sofort in Zeilen, wie bisher, und der Aufruf gibt nichts zurück.
• placement: 'auto' ordnet die Tabellen zuerst nach ihren Beziehungen an, wie Import im Editor, und gibt ein Promise zurück, das aufgelöst wird, sobald der Import als ein Rückgängig-Schritt eingefügt ist. Weniger als zwei Tabellen, keine Beziehung, ein fehlschlagendes Layout, eine Seite ohne SharedWorker oder Cancel im Hinweis Placing tables setzen sie stattdessen in Zeilen. Ein Laden in der Zwischenzeit – ein weiterer ersetzender Import, das Zuweisen von value, setInitialValue(), clear(), das Laden durch einen Mitbearbeiter oder ein Rückgängigmachen oder Wiederholen eines Ladens oder von clear() – löst ihn ab, und das Promise wird aufgelöst, ohne dass etwas geladen wurde. Auf diese Weise angeordnete Importe werden in der Reihenfolge eingefügt, in der sie gestartet wurden.
• mode: 'replace', der Standardwert, ersetzt das Dokument. mode: 'append' fügt die Datei unterhalb des Diagramms hinzu, wie Importieren und hinzufügen, und lässt jede bereits vorhandene Tabelle unverändert, ebenso jede Einstellung außer der Registerkarte und der Ansichtsposition. Von einer anderen Registerkarte aus wird zuerst die Registerkarte ERD nach vorn geholt. Die neuen Tabellen und die Tabellengruppen, die eine DBML-Datei mitbringt, solange Tabellengruppen angezeigt werden, werden zur Auswahl, und die Ansicht scrollt zu ihnen, sofern sie nicht bereits gut sichtbar sind, nach der Regel, der seit 4.1.0 jeder Sprung folgt – siehe Wohin ein Sprung führt. Ein einziges Rückgängigmachen entfernt die gesamte Ergänzung. Text, der sich nicht lesen lässt, fügt nichts hinzu und lässt das Dokument unverändert.

Solange readonly gesetzt ist, wird ein Ersetzen ignoriert, ein Anhängen fügt nichts hinzu, und ein Aufruf mit placement: 'auto' wird sofort aufgelöst.
Seit 3.10.0 liest setSchemaSQL die Datei für die aktuelle Datenbank des Dokuments: Ist Databricks ausgewählt, folgen Zeichenketten in einfachen Anführungszeichen den Backslash-Escapes von Spark. Siehe Kommentare.
Seit 3.10.0 liest setSchemaSQL ein UNIQUE über zwei oder mehr Spalten als einen eindeutigen Index statt als Kennzeichen Eindeutig an jeder Spalte. Siehe Eindeutige Schlüssel und Indizes.
Seit 3.10.0 behalten Importe aus SQL, DBML und AML die Aktionen ON DELETE und ON UPDATE der gelesenen Fremdschlüssel bei.
Seit 4.0.0 behält setSchemaSQL den vollständigen Ausdruck DEFAULT einer Spalte bei, liest ADD DEFAULT … FOR und die Kommentare MS_Description von SQL Server, macht aus Serial- und Identity-Spalten von PostgreSQL Spalten mit Autoinkrement, behält UNSIGNED und ZEROFILL in einem Datentyp bei und liest einen Primärschlüssel, den ALTER TABLE … ADD PRIMARY KEY als CLUSTERED, NONCLUSTERED oder USING BTREE kennzeichnet. Siehe Schema SQL.
Zur Syntax, die jeder Parser akzeptiert, siehe Dateien importieren oder exportieren.

type SetSchema = {
  (
    value: string,
    options: { placement: 'auto'; mode?: 'replace' | 'append' }
  ): Promise<void>;
  (
    value: string,
    options?: { placement?: 'grid'; mode?: 'replace' | 'append' }
  ): void;
};

// example
editor.setSchemaSQL('Schema SQL...');
// or
await editor.setSchemaSQL('Schema SQL...', { placement: 'auto' });
// or
editor.setSchemaSQL('Schema SQL...', { mode: 'append' });

setSchemaGraphQL

Lädt ein GraphQL-SDL-Dokument.
Definitionen von Objekttypen werden zu Tabellen, und ein Feld, dessen Typ eine andere Tabelle ist, wird zu einer Beziehung.

editor.setSchemaGraphQL('GraphQL SDL...');

setSchemaDBML

Lädt eine DBML-Datei, das Format, das dbdiagram.io und dbdocs verwenden.
Seit 4.0.0 wird jede TableGroup zu einer Tabellengruppe, und das headercolor einer Tabelle wird zu ihrer Farbe. Siehe DBML.

editor.setSchemaDBML('DBML...');

setSchemaAML

Lädt eine AML-Datei (Azimutt Markup Language). Sowohl die aktuelle Schreibweise als auch die alte Schreibweise von v1 werden akzeptiert.
Seit 4.0.0 wird die Farbe einer Entität, einer der Farbnamen von Azimutt oder ein Hexwert in Anführungszeichen, zur Farbe ihrer Tabelle. Siehe AML.

editor.setSchemaAML('AML...');

setSchemaJSON

Lädt seit 4.0.0 ein Dokument .erd.json, etwa den Text, den value liefert.
Im Standardmodus mode: 'replace' lädt die Methode das Dokument wie das Zuweisen von value: Das Laden wird im Verlauf aufgezeichnet, löst change aus und übernimmt die Sperren des Dokuments auf dieselbe Weise. Anders als bei value wird eine leere Zeichenkette oder ein Wert, der keine Zeichenkette ist, ignoriert, statt ein neues Dokument zu beginnen. Text, der kein JSON ist, leert das Dokument, wie bei value.
mode: 'append' fügt die Tabellen, Beziehungen, Indizes, Notizen und Tabellengruppen des Dokuments unterhalb des Diagramms unter neuen IDs hinzu, behält ihre Lage zueinander bei und lässt die Einstellungen des Dokuments weg, wie Importieren und hinzufügen bei einer Datei im Format json. Text, der sich nicht lesen lässt, oder ein Dokument ohne Tabelle und ohne Notiz fügt nichts hinzu. Andernfalls wird es wie ein Anhängen mit setSchemaSQL eingefügt, wobei seine neuen Notizen und Tabellengruppen zusammen mit seinen Tabellen ausgewählt werden, jede Art, solange sie angezeigt wird.
Die Methode kehrt zurück, sobald das Dokument geladen ist, und wird ignoriert, solange readonly gesetzt ist.

editor.setSchemaJSON('json...');
// or
editor.setSchemaJSON('json...', { mode: 'append' });

getSchemaSQL

Exportiert den aktuellen Zustand des Editors als Schema SQL.
Ist databaseVendor nicht angegeben, arbeitet die Methode mit dem aktuell eingestellten Datenbanksystem. Ein Name, der nicht in der Liste unten steht, wird ebenso behandelt, ohne einen Fehler auszulösen.
Namen werden mit dem Begrenzertyp eingefasst, den der Editor anzeigt. Solange Bracket Type gesperrt ist, kann dieser von dem abweichen, den value speichert und mit dem erd_read eines Coding-Agenten Namen einfasst.
Seit 4.0.0 wählt ein optionales Argument options die Anweisungen und den Vorspann, wie die Optionen der Registerkarte Schema SQL. SchemaSQLOptions wird als Typ exportiert.

• statements: 'create', der Standardwert; 'ifNotExists', das bei MySQL, MariaDB, PostgreSQL, SQLite und Databricks IF NOT EXISTS schreibt und sonst auf 'create' zurückfällt; oder 'recreate', das die Tabellen vor dem Erstellen löscht, wobei Snowflake stattdessen CREATE OR REPLACE TABLE schreibt.
• header: 'none', der Standardwert; 'use', das zur Datenbank oder zum Schema des Dokuments wechselt; oder 'createAndUse', das sie zuerst erstellt, falls sie nicht existiert, und dann zu ihr wechselt. Eine Datenbank, der die angeforderte Variante fehlt, fällt wie die Registerkarte zurück: Oracle schreibt 'use' für 'createAndUse', PostgreSQL schreibt für 'use' keinen Vorspann, und SQLite schreibt keinen. Ein Vorspann wird nur geschrieben, solange der Datenbankname des Dokuments ein einfacher Bezeichner ist – ASCII-Buchstaben, Ziffern und _, nicht mit einer Ziffer beginnend.

Eine weggelassene Option oder eine mit unbekanntem Wert gilt als ihr Standardwert, sodass ein Aufruf ohne Optionen wie bisher einfache Anweisungen CREATE ohne Vorspann schreibt.
Seit 4.0.0 enthält die Ausgabe immer die Skripte Before tables und After tables des Dokuments, in der Reihenfolge Vorspann, Skript vor den Tabellen, DROP-Anweisungen, Tabellen, Skript nach den Tabellen. Die eigenen Auswahlen Statements, Header und Tables der Registerkarte Schema SQL wirken sich nie auf diesen Aufruf aus, der immer das gesamte Dokument schreibt.
Seit 3.10.0 trägt jeder Fremdschlüssel die Klauseln ON DELETE und ON UPDATE der Beziehung. Eine Klausel wird nur geschrieben, wenn ihre Aktion gesetzt ist und das Datenbanksystem sie akzeptiert, sodass eine Aktion, die dieses Datenbanksystem nicht annimmt, entfällt und ihr Standardverhalten gilt. Seit 4.0.0 akzeptiert Snowflake nur NO ACTION. Was jede Datenbank schreibt, zeigt ON DELETE und ON UPDATE.
Seit 3.10.0 wird ein einfaches Anführungszeichen in einem Tabellen- oder Spaltenkommentar maskiert, sodass ein Kommentar wie it's die Anweisung nicht mehr ungültig macht. Jedes Datenbanksystem, das Kommentare als Zeichenkettenliterale schreibt, verdoppelt es, außer Databricks, das vor jedes Anführungszeichen und jeden Backslash einen Backslash setzt. SQLite schreibt Kommentare weiterhin als Zeilen mit --.
Seit 4.0.0 schreiben mehrere Datenbanken außerdem Schlüsselnamen, Standardwerte und Autoinkrement anders. Siehe Was die DDL schreibt.

type DatabaseVendor =
  | 'Databricks'
  | 'MariaDB'
  | 'MSSQL'
  | 'MySQL'
  | 'Oracle'
  | 'PostgreSQL'
  | 'Snowflake'
  | 'SQLite';

type SchemaSQLOptions = {
  statements?: 'create' | 'ifNotExists' | 'recreate';
  header?: 'none' | 'use' | 'createAndUse';
};

const schemaSQL = editor.getSchemaSQL();
// or
const postgresSQL = editor.getSchemaSQL('PostgreSQL');
// or
const mysqlSQL = editor.getSchemaSQL('MySQL', {
  statements: 'ifNotExists',
  header: 'createAndUse',
});

getSharedStore

Gibt einen Store für die gemeinsame Bearbeitung in Echtzeit zurück.
config ist { getNickname?, mouseTracker?, focusTracker? }. Beide Tracker haben den Standardwert true: mouseTracker überträgt den Mauszeiger dieses Editors an die anderen, und focusTracker überträgt seine fokussierte Zelle, seine Auswahl und seinen Auswahlrahmen.
Siehe Gemeinsame Bearbeitung.

const sharedStore = editor.getSharedStore({
  mouseTracker: false,
  focusTracker: false,
});

setDiffValue

Öffnet die Diff-Ansicht und vergleicht das aktuell geöffnete Dokument mit dem, das Sie übergeben.
Die Methode gibt nichts zurück und verändert das Dokument nicht, sodass das Schließen der Ansicht den Editor genau so lässt, wie er war.
Ein leerer Wert oder alles, was keine Zeichenkette ist, wird mit einem leeren Dokument verglichen.
Dies ist dieselbe Überlagerung wie Diff-Ansicht im Kontextmenü der Zeichenfläche.
Seit 4.1.0 ordnet die Diff-Ansicht den Inhalt der beiden Dokumente zuerst nach ID einander zu und erst dann nach dem, was jedes enthält, etwa dem Namen einer Tabelle oder dem Text einer Notiz – siehe Was verglichen wird. Gegenüber einer früheren Version desselben Dokuments, etwa einer Git-Revision seiner Datei, erscheint eine Umbenennung daher als ein umbenanntes Element; gegenüber einem Dokument mit abweichenden IDs erscheint sie als eine Entfernung und eine Hinzufügung. Die Ansicht listet die Änderungen in einem Baum neben den beiden Dokumenten auf und markiert sie farbig, statt Zellen zu füllen.

editor.setDiffValue('prev json...');