ErdEditorElement
L’éditeur est un simple HTMLElement, la balise <erd-editor> que définit l’importation de @dineug/erd-editor/erd-editor.js.
Depuis la version 5.0.0, importer la racine du paquet ne définit aucune balise. La racine exporte ErdEditorElement à la fois comme type et comme classe de l’élément, ainsi que defineErdEditor(), qui définit la balise là où vous l’appelez (voir Enregistrer les éléments).
Pour une page qui se contente d’afficher un diagramme, <erd-viewer> est un élément en lecture seule à part entière.
import '@dineug/erd-editor/erd-editor.js';
const editor = document.createElement('erd-editor');
Sa définition de type est la suivante.
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;
}
L’éditeur s’affiche dans une racine fantôme fermée, si bien que editor.shadowRoot vaut null et que les styles de la page ne pénètrent pas dans l’éditeur et n’en sortent pas.
Aucun élément intérieur n’est accessible par un sélecteur : stylisez plutôt l’éditeur avec setTheme et les propriétés personnalisées CSS --erd-editor-*.
readonly, system-dark-mode, enable-theme-builder, enable-locale-picker et enable-welcome-screen sont les seuls attributs, et tous les cinq valent false par défaut. Les deux derniers sont apparus dans la version 4.0.0. Chacun lit sa valeur comme le décrit readonly.
Depuis la version 4.1.0, l’onglet ERD dispose d’un explorateur, une arborescence du diagramme ancrée à gauche du canevas, avec Rechercher et remplacer en haut. Aucun attribut, aucune propriété, aucune méthode ni aucun événement ne l’ouvre, ne le ferme ni ne signale son état : il s’ouvre depuis le bouton Explorer de la barre d’outils, depuis Toggle Explorer dans la recherche rapide ou le menu contextuel du canevas, ou avec le raccourci clavier findReplace.
Chaque élément démarre avec l’explorateur fermé. Son état ouvert ou fermé, sa largeur, son repli et sa recherche durent aussi longtemps que l’élément, à travers les changements d’onglet et tous les chargements, setInitialValue compris, et ne figurent jamais dans value, runtimeValue, l’historique d’annulation ni un store partagé.
Depuis la version 4.2.0, les tables et les colonnes peuvent avoir des noms logiques à côté de leurs noms, et l’affichage des noms, un paramètre du document comme l’onglet, décide si le canevas dessine leurs noms, leurs noms logiques ou les deux.
La barre d’outils comporte aussi un onglet Dictionnaire, entre Code Generator et Settings, qui contient les mots, les termes et les domaines du document ainsi qu’une feuille Checks. C’est un onglet comme les autres : son canvasType, '@dineug/erd-editor/builtin-dictionary', est conservé par le verrou Canvas Type, si bien qu’un texte enregistré sur cet onglet s’ouvre sur lui par setInitialValue, et qu’un passage à cet onglet n’est écrit dans value et n’émet change que tant que ce verrou est désactivé. Aucun attribut, aucune propriété, aucune méthode ni aucun événement qui lui soit propre ne l’ouvre ni ne signale son état. Ses modifications sont des modifications du document : elles figurent dans value, émettent change et atteignent les collaborateurs, mais leur annulation et leur rétablissement s’exécutent sur l’historique propre de chaque feuille, et non sur celui du document.
L’état propre de l’onglet (la feuille affichée, Domains au départ, ainsi que la recherche, la sélection, le défilement et les largeurs de colonne de chaque feuille) dure aussi longtemps que l’élément, à travers les changements d’onglet et tous les chargements, et ne figure jamais dans value, runtimeValue, un historique d’annulation ni un store partagé.
L’interface ErdEditorElement ne gagne aucun membre. Ce que l’API ajoute, ce sont logicalNameAsComment dans les options de getSchemaSQL, douze jetons de thème et l’export dictionaryRowChords.
readonly
Définit la capacité de modification de l’éditeur.
Tant qu’il est défini, l’affectation de value, clear(), setSchemaSQL(), setSchemaGraphQL(), setSchemaDBML(), setSchemaAML(), setSchemaJSON(), l’annulation et le rétablissement, depuis la version 4.2.0 ceux d’une feuille du dictionnaire compris, sont tous ignorés, et l’événement change n’est jamais émis. Chargez plutôt un document avec setInitialValue.
Depuis la version 5.0.0, un éditeur en lecture seule est un lecteur plutôt qu’un éditeur dont les commandes seraient désactivées. Il conserve ses six onglets, l’explorateur, la minicarte, la recherche rapide, les propriétés de la table, la visionneuse de différences, Export, le mode zen, ainsi que les curseurs, les focus et les sélections des collaborateurs, et chaque commande qui modifierait le diagramme est omise au lieu d’être affichée désactivée. Avant la version 5.0.0, beaucoup de ses commandes de modification étaient encore affichées, et l’éditeur écartait ce qu’elles envoyaient.
Sur l’onglet ERD, un glissement déplace la vue où qu’il commence, sur une table aussi, et un appui ne sélectionne, ne déplace et n’ouvre rien. Le pointeur posé sur une table éclaire ses relations, un clic immobile sur une table ou sur une relation conserve cet éclairage, et un clic immobile ailleurs l’éteint, comme dans <erd-viewer>. La seule sélection est le contour que laisse un saut : aller à une ligne de l’explorateur, à l’une de ses correspondances de recherche, ou à un résultat de la recherche rapide après #, @ ou : sélectionne ce qu’il atteint, et le clic immobile suivant l’efface. La copie copie ce que contient cette sélection.
La barre d’outils du canevas conserve Zoom out, le niveau de zoom (Reset zoom), Zoom in, la liste de l’affichage des noms, Zen Mode et la boussole, sans Hand ni Select, sans New Table, New Memo ni New Table Group, et sans boutons de relation. Le menu du canevas conserve View Option, Name View, Export et Diff Viewer, le menu de la table conserve Table Properties, et ni un mémo, ni une relation, ni un groupe de tables ne fait apparaître de menu. La recherche rapide de l’onglet ERD ne liste aucune ligne qui écrit dans le diagramme : elle conserve Tab, Name View, Database, Export, Toggle Explorer, les lignes Theme et Display Language qu’activent enableThemeBuilder et enableLocalePicker, et les recherches #, @ et :. Sur les autres onglets, elle liste ce qu’elle liste dans un éditeur modifiable. La barre d’outils affiche le nom du SGBD sous forme de texte et n’a aucun bouton Undo, Redo ni Time Travel.
Rien ne propose Import, Import and Add, Auto Layout, une ligne de groupe de tables (voir Groupes de tables) ni Map Columns, et aucun écran d’accueil ne s’affiche.
Les raccourcis clavier qui ajoutent, suppriment ou modifient sont sans effet : edit, addTable, addColumn, addMemo, addTableGroup, groupSelectedTables, removeTable, removeColumn, removeSelection, primaryKey, selectAllTable, selectAllColumn, les quatre raccourcis de relation et handTool, chacun étant toujours empêché comme l’indique son option. Un collage et Tab ne font rien non plus et parviennent à la page sans être empêchés. Les raccourcis de zoom, zenMode, focusView, tableProperties sur la table qu’un saut a sélectionnée, search, findReplace, la copie, Escape et les flèches continuent de fonctionner. Aucun éditeur de cellule, de mémo ou de nom de groupe de tables ne s’ouvre, et aucune relation n’est tracée.
Rechercher et remplacer, en haut de l’explorateur, ne fait que rechercher, sans flèche Toggle Replace ni ligne Remplacer. Le panneau s’intitule Explorer, et l’info-bulle du bouton de la barre d’outils est Explorer (Ctrl + F) (Windows/Linux) ou Explorer (⌘ + F) (Mac) dans tous les éditeurs. L’explorateur s’ouvre dans un éditeur en lecture seule depuis la version 4.1.0 ; de la version 3.10.0 à la version 4.0.0, Rechercher et remplacer s’y ouvrait sous la forme d’un panneau flottant de recherche seule intitulé Find.
Les propriétés de la table s’ouvrent depuis le menu de la table ou avec le raccourci clavier tableProperties et, depuis la version 3.10.0, elles affichent un badge Read only à côté de leur titre et leur onglet Indexes ne propose aucune modification (voir Propriétés de la table).
L’onglet Paramètres porte le même badge Read only et présente chaque paramètre dans une commande qui n’accepte aucun appui : ses deux interrupteurs, le champ Maximum comment width et les sept boutons Lock sont désactivés, et les lignes de Column Order ne se font pas glisser. Les scripts Before tables et After tables de l’onglet Schéma SQL n’acceptent aucune saisie. L’onglet Visualisation fonctionne comme dans un éditeur modifiable, puisque rien n’y modifie le document ; Previous table et Next table du mode Flux reviennent toujours en arrière et avancent, par leurs boutons ou par les touches d’annulation et de rétablissement.
L’onglet Dictionnaire s’ouvre toujours : le changement de feuille, la recherche, la sélection, le défilement et la copie y fonctionnent, et une ligne de la feuille Checks mène toujours à ce qu’elle nomme. Aucune cellule n’accepte de modification, de collage ni d’effacement, l’onglet n’affiche ni les outils Add Row, Delete Rows, Import CSV et Export CSV, ni le menu de la grille, et ses combinaisons de lignes n’insèrent et ne suppriment rien. Le menu de la table, le menu du canevas et la recherche rapide ne proposent ni Derive Physical Names Again ni Derive Physical Name Again.
Depuis la version 5.0.0, les paramètres qu’un lecteur peut encore modifier restent sur l’écran de cet éditeur : le défilement et le zoom, l’onglet, le SGBD, le langage du générateur de code, les deux casses des noms, le type de délimiteur, les lignes de View Option, et l’affichage des noms depuis chacun de ses sélecteurs, qui reste sur l’écran depuis la version 4.2.0. Quels que soient leurs verrous, aucun d’eux n’atteint value, runtimeValue, l’exportation json, l’historique d’annulation, l’événement change ni un store partagé, si bien que value conserve les paramètres du document, quelle que soit la façon dont le lecteur regarde. Les panneaux d’options du Schéma SQL et du générateur de code légendent ces paramètres This window only tant que readonly est défini, là où ceux d’un éditeur modifiable indiquent Saved in the document. Ce que les deux onglets affichent, copient et enregistrent suit l’écran, et getSchemaSQL appelé sans SGBD aussi.
Avant la version 5.0.0, le défilement, le zoom, le changement d’onglet, le SGBD et les paramètres de code d’un lecteur allaient dans value tant qu’aucun verrou ne les retenait, ce que le SGBD n’a jamais, et un store partagé les envoyait aux autres éditeurs.
Les choix This window only de l’onglet Schéma SQL, Statements, Header, depuis la version 4.2.0 Write logical names into empty comments, et Tables, ne sont jamais enregistrés, dans aucun éditeur, et s’appliquent toujours, tout comme la boîte de dialogue Export image, le configurateur de thème et le sélecteur de langue d’affichage. Un choix dans le configurateur de thème ou le sélecteur de langue d’affichage émet toujours changePresetTheme ou changeLocale.
Tant qu’il est défini, rien n’entre dans l’historique d’annulation, défilement et zoom compris, et un store partagé de l’éditeur n’envoie aucun changement : seulement ce que ses suiveurs envoient du curseur, du focus, de la sélection et du cadre de glissement du lecteur, et les registres que demande un autre éditeur quand il rejoint la session (voir Édition collaborative). Il applique toujours tous les changements envoyés par les autres. Un changement de SGBD, un paramètre du générateur de code ou une ligne de View Option atteint le document, et l’écran aussi sauf si le lecteur a modifié ce paramètre à cet endroit ; un changement partagé de l’affichage des noms s’affiche de toute façon sur l’écran. Depuis la version 5.1.0, un langage, une casse des noms ou un type de délimiteur du générateur de code modifié tant que le verrou de ce paramètre est activé reste sur l’écran de l’éditeur qui l’a modifié et n’est jamais envoyé : il n’atteint donc ni le document du lecteur ni son écran. Un changement fait avec le verrou désactivé, et la valeur qu’emporte un déverrouillage, l’atteignent toujours comme ci-dessus.
L’activer met fin à ce qui était ouvert : un éditeur de cellule, de mémo ou de nom de groupe de tables, une relation en cours de tracé, un glissement de table, de mémo, de groupe de tables ou de colonne, les copies d’un glissement avec Alt, un redimensionnement de mémo ou de groupe de tables, un aperçu ou un placement de disposition automatique encore en cours, Map Columns, le voyage dans le temps et le sélecteur de couleur. Il efface la sélection, repose l’outil Main et envoie d’abord ce que chaque store partagé retient encore d’un glissement ou d’un défilement, comme le fait flushStreamBuffers. Les propriétés de la table, désormais en lecture seule, la visionneuse de différences et la boîte de dialogue Export image restent ouvertes, et le défilement, le zoom, l’onglet et l’affichage des noms restent tels qu’ils étaient. Un élément déjà en lecture seule à son premier montage démarre de la même façon, et un élément qu’un hôte déplace dans la page conserve le contour qu’un saut a laissé.
Le désactiver rend les commandes de modification, sans rien de sélectionné ni d’ouvert. Le SGBD, le langage du générateur de code, les deux casses des noms, le type de délimiteur et les lignes de View Option que le lecteur a modifiés reviennent chacun à ce que l’écran affichait avant la première modification du lecteur : la valeur du document, avec tout changement envoyé entre-temps par les autres, ou une valeur que cet éditeur affichait en propre sous le verrou du paramètre, que value n’a jamais contenue. Le défilement, le zoom, l’onglet et l’affichage des noms restent là où le lecteur les a laissés, et value conserve les paramètres du document jusqu’à ce qu’ils soient modifiés de nouveau. Aucun des deux changements n’émet change.
Un attribut sans valeur, ="" et ="true" sont tous lus comme true. ="false" est lu comme false, de même que toute autre chaîne, y compris l’idiome HTML readonly="readonly".
editor.readonly = true;
// or
editor.setAttribute('readonly', 'true');
<erd-editor readonly></erd-editor>
systemDarkMode
Détermine s’il faut se synchroniser automatiquement avec le mode sombre ou clair du système.
Depuis la version 4.0.0, l’activer règle l’appearance du thème sur 'system', comme le fait setPresetTheme({ appearance: 'system' }). L’éditeur affiche alors l’apparence claire ou sombre que signale le système d’exploitation, ou celle que nomme setSystemAppearance, et bascule lorsqu’elle change.
Un appel ultérieur à setPresetTheme avec 'light' ou 'dark', ou un choix de Light ou Dark dans le configurateur de thème ou la recherche rapide, remplace 'system' et reste en place : le changement suivant de l’OS ne l’écrase plus, même si systemDarkMode vaut toujours true. Avant la version 4.0.0, le changement suivant de l’OS l’écrasait.
Le désactiver alors que l’apparence est 'system' conserve l’apparence claire ou sombre affichée à ce moment-là. Le désactiver après que l’apparence a quitté 'system' la laisse telle quelle.
Le modifier n’émet aucun événement.
editor.systemDarkMode = true;
// or
editor.setAttribute('system-dark-mode', 'true');
<erd-editor system-dark-mode></erd-editor>
enableThemeBuilder
Détermine si une interface permettant de définir facilement des thèmes prédéfinis est fournie.
Il affiche le bouton Theme de la barre d’outils, qui ouvre le configurateur de thème avec Accent color, Gray color et Appearance. Depuis la version 4.0.0, Appearance propose System à côté de Light et Dark, et tant que cette option est activée, la recherche rapide liste Theme avec System, Light et Dark. Voir Langue et thème.
editor.enableThemeBuilder = true;
// or
editor.setAttribute('enable-theme-builder', 'true');
<erd-editor enable-theme-builder></erd-editor>
Changer le thème prédéfini depuis ce panneau ou depuis la recherche rapide émet l’événement changePresetTheme.
enableLocalePicker
Depuis la version 4.0.0, détermine si une interface permettant de choisir la langue d’affichage de l’éditeur est fournie.
Il affiche le bouton Display Language de la barre d’outils, après Theme quand les deux sont affichés. Le bouton ouvre le sélecteur de langue d’affichage, et la recherche rapide liste Display Language. Tous deux proposent System et les 25 langues (voir Langue et thème).
Il décide aussi de ce qu’affiche un éditeur avant l’appel de setLocale ou le choix d’une langue : 'system' lorsqu’il est activé, l’anglais lorsqu’il est désactivé, si bien qu’un élément qui ne configure rien garde l’anglais qu’il a toujours affiché. L’activer ou le désactiver bascule immédiatement entre les deux. Une fois qu’une langue a été définie ou choisie, ce choix reste, que l’option soit activée ou désactivée.
Définissez-le avant que l’élément soit ajouté pour que la première image suive 'system'.
Un choix émet changeLocale.
editor.enableLocalePicker = true;
// or
editor.setAttribute('enable-locale-picker', 'true');
<erd-editor enable-locale-picker></erd-editor>
enableWelcomeScreen
Depuis la version 4.0.0, détermine si un diagramme vide accueille le lecteur avec l’écran d’accueil.
Il recouvre l’onglet ERD tant que le document ne contient aucune table, aucun mémo affiché et aucun groupe de tables affiché. Il n’est pas affiché lorsque readonly est défini, en mode zen, ni lorsque la boîte de dialogue Propriétés de la table, la visionneuse de différences, le voyage dans le temps ou l’aperçu de la disposition automatique est ouvert. La première table, le premier mémo affiché ou le premier groupe de tables affiché le fait disparaître, et une annulation qui ramène à un diagramme vide le fait revenir.
Ses lignes New Table, New Memo et Command Palette affichent la première combinaison de addTable, addMemo et search telle que setKeyBindingMap l’a laissée, et aucune pour un nom laissé vide. Ses flèches pointent vers les boutons Theme et Display Language seulement là où enableThemeBuilder et enableLocalePicker les affichent.
Dans son menu, ↑, ↓, Home et End permettent de passer d’une ligne à l’autre et sont empêchées et arrêtées. Enter et Space sont arrêtées, mais pas empêchées, si bien que la ligne qui a le focus les reçoit, et Escape parmi les formats Import revient en arrière, empêchée et arrêtée. Toutes les autres touches atteignent l’éditeur et la page comme d’habitude.
Il ne change rien au document : il laisse donc value tel quel et n’émet aucun change.
Activez-le une fois que setInitialValue a chargé le document, comme le font les hôtes officiels, pour que l’écran n’apparaisse jamais furtivement sur un fichier encore en cours de chargement.
editor.enableWelcomeScreen = true;
// or
editor.setAttribute('enable-welcome-screen', 'true');
<erd-editor enable-welcome-screen></erd-editor>
value
getter
Récupère le document actuel sous forme de chaîne JSON, dans le schéma que définit l’éditeur.
Depuis la version 4.0.0, il s’agit de la forme de stockage, le document tel qu’un fichier le contient, qui est aussi ce qu’écrit l’exportation json et ce qu’enregistrent les hôtes officiels. Elle ne contient que les entités actives, sans les entités supprimées, l’ordre d’empilement ni ce que l’éditeur calcule lui-même, comme les largeurs mesurées, les marques de clé et les points d’ancrage des relations. Les clés de ses entités suivent un ordre fixe, elle est indentée de deux espaces et se termine par un saut de ligne, si bien que le même document donne toujours les mêmes octets.
Depuis la version 4.2.0, elle omet aussi ce qui est vide : une liste doc vide, une collection vide, une ligne de dictionnaire qui ne contient rien et un champ de texte vide d’une entité, comme un nom, un commentaire, un type de données, une valeur par défaut ou une couleur. Une liste à l’intérieur d’une entité, comme les columnIds d’une table, est toujours écrite lorsqu’elle est vide. Le doc d’un nouveau document vaut {}, et il n’a pas de collections : lisez donc un champ, une liste ou une collection absents comme vides. Elle contient les noms logiques et les indicateurs de nom dérivé des tables et des colonnes, les liens de domaine des colonnes, ainsi que les mots, les termes et les domaines, chaque dictionnaire étant écrit sous la forme d’un en-tête de noms de champ suivi de ses lignes, à raison d’une par ligne du fichier, dans l’ordre de la feuille. Voir Forme de stockage.
Chaque paramètre dont le verrou est activé est écrit avec sa valeur verrouillée, et non tel que l’écran l’affiche. Le verrou Viewport conserve originX, originY et zoomLevel, et Canvas Type, Language, Table Name Case, Column Name Case, Bracket Type et, depuis la version 4.2.0, Name View conservent chacun leur propre paramètre. L’affichage des noms est écrit sous la forme nameViewMode, et seulement tant qu’il ne vaut pas 'physical'. Tous les autres paramètres sont écrits tels qu’ils sont, et lockSettings est toujours écrit. Voir Settings pour les bits ; le bit du verrou Name View se lit à l’inverse.
Depuis la version 5.0.0, les paramètres que modifie le lecteur d’un éditeur en lecture seule sont eux aussi écrits aux valeurs du document, verrouillés ou non, puisqu’ils restent sur cet écran.
Un nouveau document a tous ses verrous activés, qu’il s’agisse de celui qu’affiche un élément avant de recevoir une valeur ou d’un document chargé à partir d’une valeur vide. Son value conserve l’origine à 0, 0, le niveau de zoom à 1, l’onglet ERD, le langage du générateur de code, les casses des noms et le type de délimiteur par défaut et, depuis la version 4.2.0, la vue Physical Names, jusqu’à ce que le verrou correspondant soit désactivé.
Avant la version 4.0.0, il renvoyait le document entier tel que l’éditeur le détenait, avec ignoreSaveSettings appliqué. Le document tel que l’éditeur le détient est désormais runtimeValue, et ignoreSaveSettings n’est plus ni lu ni écrit.
const data = editor.value;
setter
Charge un état de l’éditeur enregistré précédemment. Il remplace le document entier : le document actuel est d’abord effacé. Depuis la version 4.2.0, cela inclut les mots, les termes et les domaines : le document prend ceux que contient le texte, ou aucun, et l’historique d’annulation propre de chaque feuille du dictionnaire est vidé.
Comme clear(), setInitialValue() et les méthodes setSchema* dans leur mode: 'replace' par défaut, il abandonne aussi la vue Flux de l’onglet Visualisation : sa disposition, les tables auxquelles elle est restreinte, son affichage des lignes, son zoom et sa position et, depuis la version 4.2.0, les tables que parcourent ses Previous table et Next table. Un ajout (mode: 'append') ne l’abandonne pas.
Depuis la version 5.1.0, il met fin à une relation en cours de tracé, que seul son type soit activé ou que sa table parente soit déjà choisie. Il en va de même pour clear(), les méthodes setSchema* en mode: 'replace', l’Import de l’éditeur, l’annulation ou le rétablissement de n’importe lequel d’entre eux sauf l’annulation de clear(), et chacun d’eux reçu par l’intermédiaire d’un store partagé, de la part d’un collaborateur ou d’un agent de codage. Avant la version 5.1.0, le tracé restait activé après le chargement, et lorsque le texte chargé, comme la valeur d’exécution qu’emporte une annulation, contenait la table d’où il partait comme une entité supprimée, un appui pouvait alors ajouter une relation à partir de cette table supprimée. Un ajout laisse un tracé activé.
Comme auparavant, un éditeur de mémo, de nom de groupe de tables ou de cellule reste ouvert tant que le document chargé contient encore, et affiche, ce qu’il modifie, et se ferme sinon ; la saisie dans un éditeur laissé ouvert se poursuit dans le document chargé. Depuis la version 5.1.0, un éditeur que n’importe quel chargement ferme laisse le clavier à la page au lieu de le rendre à l’éditeur, si bien qu’un Delete ou un Backspace destiné au texte fermé ne supprime rien de la sélection. Une cellule de nom logique laissée ouverte pendant un tel chargement dérive le nom physique à sa fermeture seulement à partir d’un nom logique que l’utilisateur a saisi, jamais, depuis la version 5.1.0, à partir d’un nom que le chargement a apporté.
Il est enregistré dans l’historique, ce qui permet Undo, Redo, et il émet change.
Il accepte la forme de stockage, un runtimeValue ou un fichier enregistré par une version antérieure.
Une chaîne vide, ou tout ce qui n’est pas une chaîne, charge un nouveau document au lieu de lever une erreur : vérifiez donc la valeur avant de l’affecter.
Ce nouveau document est celui que crée setInitialValue('') : vide, avec les paramètres par défaut et, depuis la version 4.0.0, tous les verrous activés. Dans la version 3.10.x, il n’enregistrait ni la position de défilement ni le niveau de zoom, et auparavant il enregistrait les deux.
Un store partagé relaie ce chargement aux collaborateurs avec le JSON complet du nouveau document, si bien que chaque pair, y compris un pair d’une version plus ancienne, le charge, bien qu’un éditeur antérieur à la version 4.2.0 abandonne ce qu’il ne connaît pas, comme les noms logiques, les liens de domaine et les dictionnaires (voir Combiner des versions).
Depuis la version 4.0.0, les verrous du document chargé, et les valeurs verrouillées qu’écrit ensuite value, proviennent du texte, et la vue se place là où le texte la met, ou sur le diagramme lorsque rien de celui-ci n’y est dessiné. Pour chacun des autres paramètres que le texte verrouille (l’onglet, le langage du générateur de code, les casses des noms, le type de délimiteur et, depuis la version 4.2.0, l’affichage des noms), l’éditeur continue d’afficher ce qu’il affichait avant le chargement. Un paramètre que le texte laisse déverrouillé prend la valeur du texte. Un fichier enregistré avant la version 4.2.0 ne nomme aucun verrou Name View, sauf si un éditeur 4.2.0 y a désactivé ce verrou : il se charge donc avec l’affichage des noms verrouillé sur la vue Physical Names, et l’éditeur conserve l’affichage des noms qu’il montrait. setInitialValue, lui, prend toutes les valeurs que contient le texte ; voir aussi cette méthode pour un texte qui ne nomme aucun verrou.
Un texte qui n’est pas du JSON, comme un fichier où sont restés des marqueurs de conflit de fusion, ne lève pas d’erreur non plus : le document est vidé, ses paramètres restent tels quels et l’erreur d’analyse est consignée dans la console.
Il est ignoré tant que readonly est défini ; utilisez setInitialValue pour charger un document dans un éditeur en lecture seule.
editor.value = 'json...';
runtimeValue
Depuis la version 4.0.0, récupère le document tel que cet éditeur le détient, sous forme de chaîne JSON. Il n’a pas de setter : l’affecter lève donc une exception en mode strict.
Il contient ce que value omet : les entités supprimées et leur ordre, l’ordre d’empilement, les largeurs mesurées, les marques de clé, les indicateurs de chaque relation (si elle est identifiante, et comment son extrémité parente est tracée) et ses points d’ancrage, et les séquences.
Depuis la version 4.2.0, il conserve aussi les éléments vides que value omet : le texte vide d’une entité, comme un nom, un commentaire, un type de données, une valeur par défaut, une couleur ou le texte d’un mémo ; les listes doc tableIds, relationshipIds, indexIds et memoIds et les collections tableEntities à memoEntities, écrites même vides ; la liste et la collection des groupes de tables tant que le document contient un groupe ou un groupe supprimé ; et chaque dictionnaire avec sa liste doc tant que l’une des deux contient une entrée. Il conserve un nom logique composé uniquement d’espaces, un lien vers un domaine supprimé, les lignes supprimées d’une feuille du dictionnaire et celles qui ne contiennent rien. Comme dans value, un nom logique, un lien de domaine ou le groupe d’une table qui vaut '', et un indicateur de nom dérivé d’une table qui est désactivé, sont omis.
Chaque dictionnaire est un en-tête suivi de lignes, comme dans un fichier, mais son en-tête nomme "order", la clé d’ordre de chaque ligne, juste après "name", et ses lignes se suivent dans l’ordre où l’éditeur les détient, lignes supprimées comprises, et non dans celui de la feuille. Pour obtenir l’ordre de la feuille, prenez les lignes que nomme sa liste doc et triez-les selon order, comparé dans l’ordre des unités de code, puis, pour les lignes qui partagent une clé, selon id.
Ses paramètres sont écrits comme les écrit value, chaque paramètre verrouillé à sa valeur verrouillée. Il est indenté de deux espaces, chaque ligne de dictionnaire sur sa propre ligne, et, contrairement à value, il ne se termine par aucun saut de ligne.
Utilisez-le pour initialiser, par son setInitialValue, un autre éditeur qui rejoint une session déjà en cours, comme un collaborateur ou une seconde vue du même document. Une annulation de suppression que la session envoie plus tard y restaure alors l’entité entière, tandis qu’un éditeur initialisé à partir de value ne contient aucune entité supprimée et restaure à la place une table vide et sans nom ou, depuis la version 4.2.0, une ligne de dictionnaire vide. Voir Édition collaborative.
Plus aucun ramasse-miettes n’élimine les entités supprimées : elles y restent donc jusqu’à la prochaine ouverture du document depuis son fichier.
Ne l’écrivez jamais dans un fichier : enregistrez value, que le JSON Schema accepte, contrairement à celui-ci.
otherEditor.setInitialValue(editor.runtimeValue);
setInitialValue
Charge un état de l’éditeur enregistré précédemment. Le chargement lui-même n’est pas enregistré dans l’historique : il ne peut donc pas être annulé, et aucun événement change n’est émis.
Il efface aussi l’historique d’annulation, si bien que rien de ce qui a été fait avant le chargement ne peut être annulé ou rétabli sur le document chargé, et, depuis la version 4.2.0, il efface également l’historique propre de chaque feuille du dictionnaire.
Il accepte la forme de stockage, un runtimeValue ou un fichier enregistré par une version antérieure et, contrairement à l’affectation de value, il prend tous les paramètres que contient le texte, y compris l’onglet et les paramètres de code.
Une chaîne vide, ou tout ce qui n’est pas une chaîne, charge un nouveau document au lieu de lever une erreur : setInitialValue('') crée donc un diagramme vierge.
Depuis la version 4.0.0, ce nouveau document, qui est aussi ce qu’affiche un élément avant de recevoir une valeur, a tous ses verrous activés. Le défilement, le zoom, le changement d’onglet et la modification du langage du générateur de code, des casses des noms, du type de délimiteur ou, depuis la version 4.2.0, de l’affichage des noms laissent value tel quel et n’émettent aucun change. Dans la version 3.10.x, il n’enregistrait ni la position de défilement ni le niveau de zoom, et auparavant il enregistrait les deux.
Un document chargé à partir d’un texte conserve les verrous qu’il nomme. Un document qui n’en nomme aucun (tout fichier enregistré avant la version 4.0.0, quelle que soit la valeur de son ignoreSaveSettings, ainsi qu’un fichier .vuerd v2) s’ouvre avec tous ses verrous activés, son Viewport verrouillé à l’origine 0, 0 et au niveau de zoom 1, sur l’onglet ERD, avec son langage, ses casses des noms et son type de délimiteur tels qu’il les a enregistrés.
Depuis la version 4.2.0, un texte qui nomme ses verrous mais pas le verrou Name View s’ouvre également avec ce verrou activé, même lorsque tous les autres verrous sont désactivés. Un fichier enregistré avant la version 4.2.0 est un tel texte, sauf si un éditeur 4.2.0 y a désactivé ce verrou (voir Settings). Il s’ouvre dans la vue Physical Names, comme un texte qui ne nomme aucun verrou.
Dans les deux cas, la vue s’ouvre sur la vue du document (celle que le texte a enregistrée lorsqu’il nomme ses verrous, l’origine 0, 0 au niveau de zoom 1 lorsqu’il n’en nomme aucun), ou sur le diagramme lorsque rien de celui-ci n’y est dessiné. Un Viewport verrouillé conserve toujours ses valeurs verrouillées dans value.
Depuis la version 4.0.0, il abandonne aussi l’état de collaboration du document précédent, et un store partagé de cet éditeur déjà abonné redemande le leur aux autres éditeurs, si bien qu’un éditeur rechargé dans une session en cours se met à jour. Initialisez un tel éditeur avec le runtimeValue d’un autre éditeur.
Depuis la version 5.1.0, les registres de collaboration peuvent plutôt accompagner l’initialisation, ce dont a besoin un instantané stocké quand aucun éditeur en cours d’exécution n’est là pour répondre.
Après cet appel, jamais avant, passez getLWW() et getVersion() d’un autre store à mergeLWW sur le store partagé de cet éditeur. Ou chargez par le reseed de ce store, qui charge et prend ces registres en un seul appel et abandonne aussi la sélection et le focus. Voir Initialiser un collaborateur.
Un texte qui n’est pas du JSON ne lève pas d’erreur non plus : le document est vidé, ses paramètres restent tels quels et l’erreur d’analyse est consignée dans la console.
Contrairement à l’affectation de value, il n’est pas bloqué par readonly : c’est donc ainsi que vous chargez un document dans un éditeur en lecture seule. Un éditeur en lecture seule affiche alors les paramètres que contient le texte chargé, en abandonnant ceux que son lecteur avait modifiés à l’écran.
Depuis la version 5.1.0, il met fin à une relation en cours de tracé et ferme un éditeur de mémo, de nom de groupe de tables ou de cellule ouvert, même lorsque le document chargé contient encore ce que cet éditeur modifie. Avant la version 5.1.0, le tracé restait activé, et chaque éditeur restait ouvert tant que le document chargé contenait encore son mémo, son groupe, ou sa table et sa colonne.
Les fermer n’écrit ni n’envoie rien : le texte d’un mémo et la valeur d’une cellule étaient déjà écrits au fil de la saisie, dans le document détenu auparavant, tandis que la recherche d’une cellule Domaine, qui n’écrit rien tant qu’un domaine n’est pas choisi, et un nom de groupe de tables saisi mais pas encore validé sont abandonnés.
La seule exception est une cellule de nom logique dans laquelle l’utilisateur a saisi du texte : lorsque le document chargé contient le dernier nom logique saisi à cet endroit, la fermeture en dérive le nom physique, comme toute fermeture de cette cellule. Cette dérivation est une modification comme une autre : un store partagé l’envoie, elle crée une entrée d’annulation et elle émet change.
La sélection et la cellule active restent, et le clavier est laissé à la page, comme le décrit le setter pour tout chargement. Le reseed d’un store partagé ferme les mêmes éléments.
editor.setInitialValue('json...');
Chargez au démarrage, enregistrez à chaque modification.
editor.setInitialValue(localStorage.getItem('my-diagram') ?? '');
editor.addEventListener('change', () => {
localStorage.setItem('my-diagram', editor.value);
});
Événements
change, changePresetTheme et changeLocale sont les trois seuls événements publics ; changeLocale est apparu dans la version 4.0.0.
L’élément déclenche aussi sur lui-même des événements internes @dineug/erd-editor/internal-* pour son propre fonctionnement ; ils ne font pas partie de l’API.
change
Lorsque des modifications ont lieu dans l’éditeur, il émet un événement.
L’événement passe par un anti-rebond de 200 ms, et il n’est pas émis tant que readonly vaut true.
Il se déclenche pour toute modification du document : une modification dans l’interface, l’affectation de value, clear(), chacune des méthodes setSchema* et, depuis la version 4.0.0, setSchemaJSON() et Import and Add. setInitialValue ne l’émet pas, et depuis la version 5.1.0 le reseed d’un store partagé non plus, hormis pour le nom physique que l’un ou l’autre dérive en fermant une cellule de nom logique dans laquelle l’utilisateur a saisi du texte (voir setInitialValue).
Depuis la version 4.2.0, cela comprend chaque modification dans l’onglet Dictionnaire et chaque annulation ou rétablissement de l’une d’elles, une modification d’un nom logique ou d’un lien de domaine, Derive Physical Names Again, ainsi qu’un changement de vue de l’affichage des noms tant que le verrou Name View est désactivé.
Rien de ce qui est fait dans le mode Flux de l’onglet Visualisation ne l’émet (zoom, déplacement de la vue, déplacement des cartes, Tidy Up, affichage des lignes, restriction de la vue depuis une carte ou, depuis la version 4.2.0, passage d’une table à l’autre avec Previous table et Next table ou les touches d’annulation et de rétablissement), car rien de tout cela n’est une modification du document. Sa liste Name View fait exception : un changement de vue y émet l’événement tant que le verrou Name View est désactivé, comme dans l’onglet ERD.
Depuis la version 4.0.0, une modification d’un paramètre dont le verrou est activé ne l’émet pas non plus, car elle ne change que l’écran et jamais value : un défilement ou un zoom du canevas ERD tant que Viewport est verrouillé, un changement d’onglet tant que Canvas Type est verrouillé, une modification du langage du générateur de code, de la casse des noms de table, de la casse des noms de colonne ou du type de délimiteur tant que son propre verrou est activé et, depuis la version 4.2.0, un changement de vue de l’affichage des noms tant que Name View est verrouillé. Seules ces modifications sont exclues : un lot qui modifie aussi le document l’émet donc toujours. Verrouiller ou déverrouiller un paramètre l’émet.
Tous les verrous sont activés dans un nouveau document et dans tout fichier enregistré avant la version 4.0.0, et le verrou Name View est activé dans tout fichier enregistré avant la version 4.2.0, sauf si un éditeur 4.2.0 l’y a désactivé : par défaut, le défilement, le zoom, le changement d’onglet et le changement de vue de l’affichage des noms n’émettent donc rien. Cela couvre la concentration sur des tables depuis l’onglet ERD, le bouton de lien externe d’une carte qui ramène du mode Flux à l’onglet ERD, l’accès à une ligne de l’explorateur ou à une correspondance de recherche, l’ouverture de l’explorateur ou l’accès à un résultat de la recherche rapide depuis un autre onglet et, depuis la version 4.2.0, l’accès à une table ou à une colonne depuis une ligne de la feuille Checks de l’onglet Dictionnaire. Chacun d’eux n’émet un change que lorsqu’un verrou qui le couvre est désactivé : Canvas Type pour le changement d’onglet, et Viewport pour le défilement que provoque aussi un bouton de carte, un résultat de la recherche rapide, une ligne de l’explorateur, une correspondance de recherche ou une ligne de la feuille Checks. Depuis la version 4.1.0, chacun de ces défilements suit une même règle, Où aboutit un saut, si bien qu’un résultat de table de la recherche rapide ne fait plus défiler la vue à chaque fois, et qu’un saut que la règle laisse en place ne produit aucun défilement à émettre. Ouvrir, fermer ou redimensionner l’explorateur rétrécit ou élargit le canevas sans déplacer son origine, et n’émet rien non plus. Avant la version 4.0.0, le défilement, le zoom et le changement d’onglet l’émettaient toujours, même lorsque editor.value restait identique.
Pour éviter les écritures qui ne changent rien, comparez editor.value à la dernière valeur que vous avez stockée, et non au fichier que vous avez chargé : un fichier écrit par une version antérieure, un fichier v2 ou un fichier modifié à la main peut ressortir différent dans value dès son chargement, car value l’écrit dans la forme de stockage. Il en va de même d’un fichier dont le verrou Viewport est désactivé et dont l’origine ne montre aucune partie du diagramme sur cet écran : le chargement déplace la vue sur le diagramme, et value écrit l’endroit où elle aboutit. Depuis la version 4.0.0, les largeurs mesurées n’en sont plus la cause, car value n’en contient aucune. Depuis la version 4.2.0, un fichier enregistré par la version 4.0.0 ou 4.1.0 peut lui aussi ressortir différent, car value omet désormais ses champs de texte, listes et collections vides : un tel fichier est donc réécrit une fois, à son prochain enregistrement. Un hôte qui écrit des fichiers peut plutôt distinguer une modification d’un changement de vue grâce au changed d’un store de réplication (voir on@change).
L’événement ne porte aucun detail, ne remonte pas et ne franchit pas la limite de la racine fantôme : écoutez-le donc sur l’élément lui-même et lisez editor.value dans le gestionnaire.
editor.addEventListener('change', event => {
const data = event.target.value;
});
changePresetTheme
Émis lorsque le thème prédéfini est modifié depuis le configurateur de thème intégré ou, depuis la version 4.0.0, depuis Theme dans la recherche rapide. Chaque choix l’émet, y compris le choix de l’option déjà en vigueur.
Appeler vous-même setPresetTheme ou setSystemAppearance, ou activer ou désactiver systemDarkMode, ne l’émet pas.
event.detail est le ThemeOptions complet après le choix ({ appearance, grayColor, accentColor }), et non l’objet partiel demandé. Depuis la version 4.0.0, son appearance vaut 'system' lorsque System est choisi, et non l’apparence claire ou sombre affichée : stockez-le donc tel quel et redonnez-le à setPresetTheme.
editor.addEventListener('changePresetTheme', event => {
const themeOptions = event.detail;
});
changeLocale
Depuis la version 4.0.0, émis lorsqu’une langue est choisie dans l’éditeur, depuis le sélecteur de langue d’affichage ou depuis Display Language dans la recherche rapide, tous deux activés par enableLocalePicker.
Il se déclenche après l’application de la langue, à chaque choix, y compris le choix de l’option déjà en vigueur. setLocale et setSystemLocale ne l’émettent jamais, pas plus qu’un changement des langues du navigateur. Un changement de langue n’émet aucun change.
event.detail vaut { locale }, un LocaleOption : 'system' lorsque System a été choisi, sinon le code de la langue. L’élément ne mémorise pas le choix : stockez-le donc et passez-le à setLocale au chargement suivant.
Comme change, il ne remonte pas : écoutez-le donc sur l’élément lui-même.
editor.addEventListener('changeLocale', event => {
const { locale } = event.detail; // 'system' | 'ko-KR' | ...
});
focus
Donne le focus à l’éditeur.
editor.focus();
blur
Retire le focus de l’éditeur.
editor.blur();
clear
Vide le document en supprimant toutes les tables, colonnes, relations, index et mémos, depuis la version 4.0.0 tous les groupes de tables et, depuis la version 4.2.0, les mots, les termes et les domaines de l’onglet Dictionnaire, en vidant aussi l’historique d’annulation propre de chaque feuille.
Tous les paramètres restent, y compris la base de données, la position de la vue, le niveau de zoom, les options d’affichage des tables, chaque verrou avec la valeur qu’il conserve, et les scripts Before tables et After tables de l’onglet Schéma SQL, si bien qu’un fichier vidé continue d’enregistrer ce qu’il enregistrait. Pour créer plutôt un nouveau document, affectez '' à value ou appelez setInitialValue('').
Il est enregistré dans l’historique, si bien qu’il peut être annulé, et il émet change. Une annulation restaure le document tel que l’éditeur le détenait, ses mots, ses termes et ses domaines compris, chaque paramètre verrouillé à sa valeur verrouillée. Il est ignoré tant que readonly est défini.
Depuis la version 5.1.0, il met fin à une relation en cours de tracé, comme le décrit le setter de value, et son rétablissement aussi ; son annulation non.
Comme auparavant, un éditeur de mémo, de nom de groupe de tables ou de cellule laissé ouvert se ferme, puisque le document vidé ne contient rien à modifier. Depuis la version 5.1.0, l’éditeur fermé laisse le clavier à la page, comme après un chargement.
editor.clear();
destroy
Détruit complètement l’instance de l’éditeur, qui ne peut alors plus être réutilisée.
Il libère les écouteurs et les abonnements de l’éditeur, et détruit tous les stores partagés renvoyés par getSharedStore.
Un lot de flux qu’un store partagé retient encore est abandonné avec lui ; appelez d’abord le flushStreamBuffers de ce store pour l’envoyer.
editor.destroy();
setKeyBindingMap
Redéfinit les raccourcis clavier.
edit, stop, undo, redo, zoomIn, zoomOut et zoomReset sont fixes et ne peuvent pas être redéfinis.
Seuls les vingt et un noms ci-dessous sont écrits ; tout le reste de l’objet est ignoré, y compris les noms fixes.
Depuis la version 3.10.0, search peut être redéfini, et findReplace est nouveau. Auparavant, search était fixe. Depuis la version 4.0.0, removeSelection est nouveau. Depuis la version 4.1.0, addTableGroup et groupSelectedTables sont nouveaux.
La valeur d’un raccourci clavier doit être un ShortcutOption[]. Une simple chaîne est ignorée : écrivez donc { addTable: [{ shortcut: 'Alt+KeyN' }] } plutôt que { addTable: 'Alt+KeyN' }.
Un tableau vide est accepté et n’associe rien : setKeyBindingMap({ findReplace: [] }) laisse Ctrl + F (Windows/Linux) ou ⌘ + F (Mac) à la page, et { search: [] } fait de même pour Ctrl + K (Windows/Linux) ou ⌘ + K (Mac). Le bouton Search de la barre d’outils ouvre toujours la recherche rapide, le bouton Explorer de la barre d’outils ouvre et ferme toujours l’explorateur, et Toggle Explorer dans la recherche rapide et dans le menu contextuel du canevas ouvre toujours sa recherche ou le ferme ; aucun d’eux n’affiche de raccourci pour un nom laissé vide. { removeSelection: [] } laisse Delete et Backspace à la page, et les entrées de suppression des menus des tables, des mémos et des groupes de tables (Delete, Delete selected, Delete column, Delete columns) n’affichent alors aucun raccourci.
Depuis la version 4.1.0, { addTableGroup: [] } laisse Alt + G (Windows/Linux) ou ⌥ + G (Mac) à la page, et { groupSelectedTables: [] } laisse T puis G. New Table Group dans la barre d’outils du canevas, dans le menu contextuel du canevas et dans la recherche rapide, Group selected tables dans le menu de la table et Group Selected Tables dans la recherche rapide fonctionnent toujours, sans raccourci affiché. Les info-bulles des boutons New Table, New Memo et New Table Group de la barre d’outils du canevas indiquent la première combinaison de addTable, addMemo et addTableGroup, ou seulement le nom du bouton pour un raccourci clavier laissé vide.
Depuis la version 4.2.0, addColumn et removeColumn donnent aussi à la grille de l’onglet Dictionnaire ses combinaisons de lignes, comme décrit ci-dessous : réaffecter l’un ou l’autre déplace donc ces combinaisons avec lui. { addColumn: [] } ne laisse à la grille aucune combinaison pour insérer des lignes, et les deux entrées d’insertion du menu de la grille n’affichent alors aucun raccourci ; { removeColumn: [] } ne lui en laisse aucune pour les supprimer, et l’entrée de suppression du menu et l’info-bulle Delete Rows n’en affichent alors aucun.
L’appel est une fusion partielle : les noms que vous omettez gardent leur valeur par défaut, et l’appeler deux fois conserve les modifications antérieures. Il n’existe pas de getter pour les raccourcis clavier actuels : createKeyBindingMap renvoie les valeurs par défaut, et non ce que setKeyBindingMap a modifié.
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 et, depuis la version 4.1.0, groupSelectedTables cèdent la place au point d’insertion : tant que le focus est dans un input, un textarea ou un contenteditable, $mod + A sélectionne le texte, Space saisit un espace, Delete et Backspace effacent du texte, et T puis G saisit les deux lettres, au lieu d’atteindre le canevas. Aucun de ces appuis n’est empêché. Toute touche à laquelle vous les réaffectez se comporte de la même façon.
Depuis la version 4.0.0, removeSelection (Delete ou Backspace) supprime la sélection dans l’onglet ERD en une seule étape d’annulation, sans demander de confirmation. Lorsque la table qui a le focus est la seule chose sélectionnée, qu’une ou plusieurs de ses colonnes sont sélectionnées et que le zoom dessine ses lignes, il supprime ces colonnes ; sinon, il supprime toutes les tables, tous les mémos et tous les groupes de tables sélectionnés, les tables d’un groupe étant conservées. Voir Suppression de tables et de mémos.
Une touche maintenue ne supprime qu’une fois, et rien n’est supprimé tant qu’un éditeur de cellule, de mémo ou de nom de groupe de tables est ouvert. En dehors d’un champ de texte et des panneaux et onglets qui retiennent les raccourcis clavier (voir createKeyBindingMap), l’appui est empêché dans tous les onglets tant que l’éditeur a le focus, y compris sur un bouton de la barre d’outils qui a le focus, et dans un éditeur en lecture seule, où il ne supprime rien.
Depuis la version 4.1.0, addTableGroup (Alt+KeyG) active le tracé New Table Group dans l’onglet ERD, le prochain appui du bouton principal sur le canevas traçant alors le groupe, et un nouvel appui sur la touche désactive le tracé, comme le fait le bouton New Table Group de la barre d’outils du canevas. groupSelectedTables (KeyT KeyG, T puis G) place les tables sélectionnées dans un nouveau groupe et ouvre son éditeur de nom, comme le fait Group selected tables dans le menu contextuel d’une table. Sans table sélectionnée, il n’ajoute rien ; un mémo ou un groupe de tables sélectionné ne compte pas. Voir Tracer un groupe et Grouper les tables sélectionnées.
Tous deux n’agissent que là où les menus proposent un groupe : pas tant que readonly est défini, que l’option d’affichage Table Groups masque les groupes ou qu’un éditeur de cellule, de mémo ou de nom de groupe de tables est ouvert. Comme les autres raccourcis clavier du canevas, ils n’agissent que dans l’onglet ERD, et pas tant que la recherche rapide, la boîte de dialogue Propriétés de la table, la visionneuse de différences, le voyage dans le temps, l’aperçu de la disposition automatique, Export image ou Map Columns est ouvert. Là où ils ne font rien, l’appui est tout de même empêché, sauf si groupSelectedTables cède la place au point d’insertion. addTableGroup est aussi arrêté, comme focusView et zenMode, si bien qu’un écouteur keydown de la page en phase de remontée ne le reçoit jamais.
Depuis la version 4.2.0, dans l’onglet Dictionnaire, chaque combinaison à un seul appui de addColumn insère sous la sélection autant de lignes que la sélection en couvre, la même combinaison avec Shift maintenu en plus les insère au-dessus, et chaque combinaison à un seul appui de removeColumn supprime les lignes que couvre la sélection : Alt+Enter, Alt+Shift+Enter, et Alt+Backspace ou Alt+Delete avec les valeurs par défaut. Elles agissent dans la grille des feuilles Domains, Words et Terms tant qu’aucune cellule n’est en cours de modification. Une combinaison de addColumn qui contient déjà Shift ne donne aucune combinaison pour insérer au-dessus, et une séquence associée à l’un ou l’autre nom ne donne rien à la grille.
Chacun de ces appuis est empêché comme l’indique son option et toujours arrêté, si bien qu’il n’ajoute ni ne supprime aucune colonne dans l’onglet ERD. Dans la feuille Checks et dans un éditeur en lecture seule, il ne fait rien, mais il est tout de même empêché et arrêté. Dans une cellule en cours de modification ou dans le champ de recherche de l’onglet, les combinaisons sont laissées au texte : elles y sont arrêtées mais pas empêchées, si bien que le champ les traite comme il le ferait n’importe où (sur Mac, ⌥ + Backspace supprime un mot). dictionaryRowChords les liste.
Depuis la version 3.10.0, findReplace ($mod+KeyF) ouvre Rechercher et remplacer. Depuis la version 4.1.0, il affiche ou masque l’explorateur qui contient cette fonction, et l’onglet Raccourcis le liste sous le nom Toggle Explorer.
Tant que le bouton Explorer de la barre d’outils apparaît enfoncé (l’explorateur ouvert dans l’onglet ERD et non masqué par le mode zen), il ferme l’explorateur, sauf si la recherche rapide, la boîte de dialogue Propriétés de la table, le configurateur de thème, le sélecteur de langue d’affichage, la boîte de dialogue Export image ou Map Columns est ouvert. Sinon, il ferme celui de ces éléments qui est ouvert, affiche l’onglet ERD depuis tout autre onglet et ouvre l’explorateur avec le point d’insertion dans son champ Find et la requête sélectionnée. Un éditeur trop étroit pour afficher l’explorateur à côté du canevas le garde ouvert mais effacé, et affiche la notification Widen the window to show the Explorer. Avant la version 4.1.0, il ouvrait le panneau flottant Rechercher et remplacer, ou rendait le clavier à son champ, et ne le fermait jamais.
Il ne cède pas la place au point d’insertion : tant que l’éditeur a le focus, il est pris en charge dans tous les onglets, depuis le canevas comme depuis un input de l’éditeur. L’appui est empêché, si bien que le navigateur n’ouvre pas de barre de recherche, et arrêté, si bien qu’aucun écouteur keydown de la page en phase de remontée ne le reçoit. Avec un éditeur de cellule ou de mémo ouvert, depuis la version 4.0.0 un éditeur de nom de groupe de tables ou, depuis la version 4.2.0, une cellule en cours de modification dans la grille de l’onglet Dictionnaire, il est toujours empêché et arrêté, mais ne fait rien. Dans ce dernier cas, search ne fait rien non plus, si bien que le texte saisi jusque-là reste.
Tant que la visionneuse de différences, le voyage dans le temps ou l’aperçu de la disposition automatique est ouvert, quel que soit l’onglet, ou tant qu’une méthode de saisie est encore en cours de composition, il n’est ni empêché ni arrêté, si bien que la recherche propre du navigateur ou de l’hôte le reçoit. Dans l’explorateur, un appui encore en cours de composition est arrêté, mais pas empêché. Toute touche à laquelle vous réaffectez findReplace se comporte de la même façon.
focusView n’agit que dans l’onglet ERD. Avec au moins une table sélectionnée, il ouvre l’onglet Visualisation en mode Flux, restreint à ces tables et à toutes les tables situées à une relation de distance ; un mémo ou un groupe de tables sélectionné ne compte pas, et sans table sélectionnée il ne fait rien. Voir Se concentrer sur des tables.
undo et redo agissent selon l’onglet. Dans l’onglet ERD, ils annulent et rétablissent les étapes de l’historique du document. Depuis la version 4.2.0, dans l’onglet Dictionnaire, ils annulent et rétablissent les étapes de l’historique propre de la feuille affichée, et aucune dans la feuille Checks (voir Feuilles du dictionnaire). Dans le mode Flux de l’onglet Visualisation, ils reviennent en arrière et avancent comme le font Previous table et Next table, sans toucher à l’historique du document. Dans les autres onglets, et en mode Graphe, ils n’annulent rien.
stop (Escape) dans l’onglet ERD ferme un éditeur de cellule ou de mémo ouvert, ou met fin au tracé d’une relation, et laisse la sélection telle quelle. Depuis la version 4.0.0, il ferme aussi un éditeur de nom de groupe de tables, sans écrire de nom, et met fin à un tracé New Table Group. L’éditeur appelle preventDefault() sur cet appui.
Lorsque rien de tout cela n’est ouvert, Escape efface la sélection et la cellule active, et n’est pas empêché. Quitter une modification et effacer la sélection demande donc deux appuis.
Depuis la version 4.2.0, tant que la liste des termes d’une cellule du nom logique est affichée (voir Saisie semi-automatique des termes), le premier Escape ferme seulement la liste et laisse l’éditeur ouvert. Cet appui est empêché et arrêté au niveau de la cellule, si bien que ni stop ni un écouteur keydown de la page en phase de remontée ne le reçoit.
À part l’explorateur, les formats Import de l’écran d’accueil, la liste des termes d’une cellule du nom logique, l’onglet Dictionnaire, et les sélecteurs et boîtes de dialogue ci-dessous, l’éditeur n’arrête jamais la propagation d’Escape, si bien qu’une page qui l’écoute elle-même, pour fermer sa propre boîte de dialogue par exemple, reçoit les deux appuis et peut ignorer celui dont defaultPrevented vaut true.
Tant que la recherche rapide, la boîte de dialogue Propriétés de la table, la visionneuse de différences, l’aperçu de la disposition automatique ou le voyage dans le temps est ouvert, Escape ferme plutôt cet élément et laisse la sélection telle quelle. Cet appui n’est pas empêché non plus.
Depuis la version 4.0.0, une boîte de dialogue Export image ou Map Columns ouverte prend aussi Escape : elle se ferme et laisse la sélection telle quelle. Chacune prend le clavier à son ouverture, et cet Escape est à la fois empêché et arrêté.
Depuis la version 4.1.0, un appui sur Escape avec le focus dans l’explorateur, dans son arborescence, ses champs ou ses boutons, rend le clavier au canevas et laisse l’explorateur ouvert et la sélection telle quelle. L’éditeur appelle à la fois preventDefault() et stopPropagation() sur cet appui, si bien qu’il n’atteint jamais un écouteur keydown de la page en phase de remontée.
Un appui sur Escape sur le canevas ne ferme jamais l’explorateur. Avant la version 4.1.0, un appui sur Escape dans le panneau Rechercher et remplacer le fermait, et un appui sur le canevas le fermait en même temps qu’il effaçait la sélection.
Depuis la version 4.0.0, le sélecteur de langue d’affichage et le sélecteur de couleur se ferment avec Escape : à l’intérieur, l’appui est empêché et arrêté, et sur le canevas il les ferme en même temps qu’il efface la sélection, sans être ni empêché ni arrêté.
Un appui sur Escape alors qu’une méthode de saisie est encore en cours de composition appartient à la composition. Il laisse un éditeur ouvert tel quel et n’est pas empêché : une page peut donc, elle aussi, ignorer un appui dont isComposing vaut true ou dont keyCode vaut 229. Dans l’explorateur, un tel appui, comme toute touche enfoncée en cours de composition, est aussi arrêté, et le clavier reste dans le champ.
Avant la version 3.9.2, un seul appui sur Escape mettait fin à une modification ou à un tracé et effaçait la sélection, et l’éditeur ne l’empêchait jamais.
createKeyBindingMap
Depuis la version 3.9.2, le paquet exporte createKeyBindingMap(), et avec lui les types KeyBindingMap, KeyBindingName et ShortcutOption.
Il renvoie les raccourcis clavier par défaut, les 28 noms, y compris les noms fixes, sous forme d’un nouvel objet à chaque appel, si bien que modifier l’objet renvoyé ne change rien d’autre.
C’est ce dont part chaque éditeur, et un appel à setKeyBindingMap ne s’y reflète pas.
De ces quatre, seul createKeyBindingMap existe à l’exécution ; les trois autres sont des types. Depuis la version 4.2.0, dictionaryRowChords est exporté à côté de lui.
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', ...
Chaque shortcut est une combinaison dans la syntaxe de tinykeys, qui désigne sa touche par KeyboardEvent.code et où $mod vaut ⌘ sous macOS et Control ailleurs.
Depuis la version 4.0.0, l’éditeur lit lui-même ces combinaisons, dans la même syntaxe, au lieu de passer par tinykeys. Une touche correspond par son code, ou par son key quelle que soit la casse, et un appui ne correspond que si exactement les touches de modification que nomme la combinaison sont maintenues. AltGraph compte comme Control et Alt sous Windows et comme Alt sous macOS. Des appuis séparés par un espace forment une séquence, qui recommence après une seconde sans keydown.
Depuis la version 4.1.0, l’une des valeurs par défaut est une séquence : groupSelectedTables vaut KeyT KeyG, T puis G. Une séquence s’exécute à l’appui qui la complète, et seul cet appui reçoit ses preventDefault et stopPropagation : avec les valeurs par défaut, T atteint donc la page et seul G est empêché. Les menus, la recherche rapide et l’onglet Raccourcis affichent une séquence avec une touche par appui.
Les noms fixes sont associés à Enter (edit), Escape (stop), $mod+KeyZ (undo), $mod+Shift+KeyZ (redo), $mod+Equal (zoomIn), $mod+Minus (zoomOut) et $mod+Digit0 (zoomReset). edit et stop ne portent aucun indicateur ; les cinq autres portent preventDefault et stopPropagation. Les autres sont les valeurs par défaut ci-dessus, dont search et findReplace.
L’éditeur les écoute sur son propre élément : un hôte qui capte les touches avant l’éditeur, avec des raccourcis globaux ou un écouteur keydown en phase de capture, doit donc les laisser passer tant que l’éditeur a le focus.
Construisez la liste des touches à laisser passer à partir de createKeyBindingMap(), en remplaçant les valeurs par défaut par les raccourcis clavier que vous avez passés à setKeyBindingMap.
Depuis la version 3.10.0, cette liste inclut $mod+KeyF, la combinaison de recherche du navigateur lui-même. Un hôte qui veut garder sa propre recherche sur cette combinaison passe setKeyBindingMap({ findReplace: [] }).
Depuis la version 4.0.0, elle inclut aussi Delete et Backspace seuls. Un hôte qui veut garder ces touches passe setKeyBindingMap({ removeSelection: [] }).
Depuis la version 4.1.0, elle inclut aussi Alt+KeyG et la séquence KeyT KeyG, qui se présente sous forme d’une seule chaîne : découpez-la à l’espace et laissez passer chaque appui, T et G seuls compris, car une séquence à laquelle il manque un appui ne se complète jamais. Un hôte qui veut garder ces touches passe setKeyBindingMap({ addTableGroup: [] }) ou setKeyBindingMap({ groupSelectedTables: [] }).
Depuis la version 4.2.0, ajoutez-y les combinaisons que renvoie dictionaryRowChords pour le même objet, dont Alt+Shift+Enter. Un hôte qui veut garder ces touches passe setKeyBindingMap({ addColumn: [] }) ou setKeyBindingMap({ removeColumn: [] }), ce qui les retire aussi de l’ajout et de la suppression de colonnes dans l’onglet ERD.
Tant que le focus est dans l’explorateur, dans son arborescence, ses champs Find et Replace ou ses boutons, findReplace, search, undo, redo, zoomIn, zoomOut et zoomReset passent jusqu’à l’éditeur, si bien que findReplace y agit comme sur le canevas. Tous les autres raccourcis clavier, tels qu’ils sont actuellement définis, s’arrêtent à l’explorateur, une séquence par son dernier appui (un G seul avec les valeurs par défaut), de même que les touches fléchées, Tab, Enter, Space, Home, End et toute touche enfoncée alors qu’une méthode de saisie est encore en cours de composition. À part Escape, qui rend le clavier au canevas, ils sont arrêtés sans être empêchés, si bien qu’ils agissent comme des touches ordinaires dans les champs, les boutons et l’arborescence de l’explorateur, et n’atteignent ni le canevas ni un écouteur keydown de la page en phase de remontée : Alt + N n’y ajoute aucune table, et Delete n’y supprime rien. Les touches qui servent à se déplacer, à réduire ou à aller à une ligne de l’arborescence, ainsi que Enter dans le champ Find ou Replace, qui parcourt les correspondances ou remplace, sont en outre empêchées.
Toute autre touche, comme la combinaison d’enregistrement ou de palette de commandes d’un hôte, continue jusqu’à la page comme d’habitude. Voir Touches dans l’explorateur. Avant la version 4.1.0, le panneau flottant Rechercher et remplacer retenait les touches de la même façon, à part Home, End, le dernier appui d’une séquence et Space lorsque handTool était associé à une autre touche.
Depuis la version 4.0.0, le sélecteur de langue d’affichage retient les touches de la même façon : les sept mêmes raccourcis clavier passent, et tous les autres raccourcis clavier (depuis la version 4.1.0, une séquence par son dernier appui), les touches fléchées et Tab y sont arrêtés sans être empêchés, de même que toute touche enfoncée alors qu’une méthode de saisie est encore en cours de composition. ↑, ↓, Home, End, Enter et Space sur l’une de ses lignes parcourent les lignes ou en choisissent une, et sont en outre empêchées.
Depuis la version 4.2.0, l’onglet Dictionnaire retient lui aussi les touches, seuls search, findReplace, undo et redo passant jusqu’à l’éditeur. undo et redo agissent sur l’historique propre de la feuille affichée et, avec une cellule en cours de modification ou le focus dans le champ de recherche de l’onglet, ils sont laissés au texte, arrêtés mais pas empêchés. search et findReplace ne font rien tant qu’une cellule est en cours de modification, comme indiqué plus haut. Les combinaisons de lignes agissent dans la grille, comme décrit plus haut pour addColumn et removeColumn.
Tous les autres raccourcis clavier, tels qu’ils sont actuellement définis, s’arrêtent à l’onglet, une séquence par son dernier appui, de même que les touches fléchées, Tab, Enter, Space, Home, End et toute touche enfoncée alors qu’une méthode de saisie est encore en cours de composition. Aucun d’eux n’atteint le canevas ni un écouteur keydown de la page en phase de remontée : Alt + N n’y ajoute aucune table, et Delete ne supprime rien du diagramme. Les événements copier, couper et coller de l’onglet s’y arrêtent aussi, si bien que le diagramme ne les lit jamais comme les siens. Toute autre touche continue jusqu’à la page comme d’habitude.
dictionaryRowChords
Depuis la version 4.2.0, le paquet exporte dictionaryRowChords(). Il renvoie, sous forme d’un nouveau ShortcutOption[] à chaque appel, toutes les combinaisons avec lesquelles la grille de l’onglet Dictionnaire insère ou supprime des lignes selon l’objet de raccourcis clavier que vous passez.
Dans l’ordre, ce sont les combinaisons à un seul appui de addColumn, qui insèrent des lignes sous la sélection ; chacune d’elles avec Shift maintenu en plus, qui insèrent des lignes au-dessus, aucune pour une combinaison qui contient déjà Shift ; et les combinaisons à un seul appui de removeColumn, qui suppriment des lignes. Chacune garde les preventDefault et stopPropagation du raccourci clavier dont elle provient, et une séquence est omise. Voir Ajouter et supprimer des lignes.
La combinaison qui insère des lignes au-dessus, Alt+Shift+Enter avec les valeurs par défaut, ne figure dans aucun raccourci clavier : un hôte qui compare exactement les touches de modification et construit sa liste des touches à laisser passer à partir de createKeyBindingMap seul ne la laisse donc jamais passer. Laissez passer les deux listes, comme le fait le plugin Obsidian.
Il ne lit que l’objet qui lui est passé, et non les raccourcis clavier de l’élément : passez-lui donc l’objet à partir duquel vous avez construit votre liste de touches.
declare function dictionaryRowChords(
keyBindingMap: KeyBindingMap
): ShortcutOption[];
// example
import { createKeyBindingMap, dictionaryRowChords } from '@dineug/erd-editor';
const map = createKeyBindingMap();
const shortcuts = [
...Object.values(map).flat(),
...dictionaryRowChords(map),
].map(({ shortcut }) => shortcut);
// dictionaryRowChords(map): 'Alt+Enter', 'Alt+Shift+Enter', 'Alt+Backspace', 'Alt+Delete'
$mod
Change la touche Control selon l’environnement.
- Mac : $mod = Meta (⌘)
- Windows/Linux : $mod = Control
Tableau des touches de raccourci
Utilise les propriétés key, code des événements clavier.
Utilisez code pour les positions absolues et key pour les valeurs saisies.
| Windows | macOS | key | code |
|---|---|---|---|
| N/A | Command / ⌘ | Meta | MetaLeft / MetaRight |
Alt | Option / ⌥ | Alt | AltLeft / AltRight |
Control | Control / ^ | Control | ControlLeft / ControlRight |
Shift | Shift | Shift | ShiftLeft / ShiftRight |
Space | Space | N/A | Space |
Enter | Return | Enter | Enter |
Esc | Esc | Escape | Escape |
Backspace | Delete / ⌫ | Backspace | Backspace |
Delete | fn + Delete | Delete | Delete |
1, 2, etc. | 1, 2, etc. | 1, 2, etc. | Digit1, Digit2, etc. |
a, b, etc. | a, b, etc. | a, b, etc. | KeyA, KeyB, etc. |
- | - | - | Minus |
= | = | = | Equal |
+ | + | + | Equal |
Thème
setPresetTheme
Définit un thème prédéfini.
Les valeurs par défaut sont appearance: 'dark', grayColor: 'slate' et accentColor: 'indigo'.
Chaque champ s’applique séparément : un appel partiel laisse donc les deux autres tels quels. Une valeur qui ne fait pas partie des noms ci-dessous est ignorée, et l’appel ne lève jamais d’exception.
Depuis la version 4.0.0, appearance accepte aussi 'system', le System du configurateur de thème. Il affiche l’apparence claire ou sombre que signale le système d’exploitation, ou celle que nomme setSystemAppearance, et bascule lorsqu’elle change.
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
Depuis la version 4.0.0, nomme l’apparence claire ou sombre qu’affiche l’apparence 'system', pour un hôte qui a ses propres apparences claire et sombre, comme un thème d’IDE. Tant qu’une apparence est nommée, les changements du système d’exploitation sont ignorés.
null, ou toute valeur autre que 'dark' ou 'light', revient au suivi du système d’exploitation.
Tant que l’apparence est 'light' ou 'dark', il ne change rien à l’écran, mais la valeur est conservée et s’applique dès que l’apparence devient 'system'. Sinon, elle s’applique immédiatement. Il n’émet rien, et changePresetTheme continue de signaler 'system'.
Les hôtes VS Code, JetBrains et Obsidian l’appellent avec leur propre apparence claire ou sombre, puis de nouveau chaque fois qu’elle change.
editor.setPresetTheme({ appearance: 'system' });
editor.setSystemAppearance('light'); // null follows the OS again
setTheme
Permet de personnaliser le thème.
Chaque appel remplace toute la surcouche personnalisée : repassez donc l’objet complet pour modifier un jeton par-dessus une surcharge existante, et passez {} pour revenir au thème prédéfini.
Seuls les noms de jeton ci-dessous, avec des valeurs de type chaîne, sont conservés ; tout le reste est abandonné sans erreur.
La surcouche se place au-dessus du thème prédéfini : un appel ultérieur à setPresetTheme remplace donc le thème prédéfini en dessous, tandis que vos surcharges restent.
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;
columnHandleBackground: string;
columnHandleBorder: string;
columnHandleHoverBackground: string;
columnHandleHoverBorder: 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;
dictionaryErrorForeground: string;
dictionaryErrorBackground: string;
dictionaryWarningForeground: string;
dictionaryWarningBackground: string;
dictionaryBackground: string;
dictionaryHeaderBackground: string;
dictionaryGridLine: string;
dictionaryHeaderSelect: string;
diffInsertForeground: string;
diffDeleteForeground: string;
diffModifyForeground: string;
diffRenameForeground: string;
};
// example
editor.setTheme({
canvasBackground: '#1b1b1f',
tableBackground: '#242429',
keyPK: '#ffc53d',
});
tableShadow et memoShadow sont la couleur de l’ombre que projettent les tables et les mémos sur le canevas ERD. Le thème prédéfini sombre les laisse à transparent, qui ne projette aucune ombre, comme le fait le passage de none ou d’une chaîne vide à setTheme ; le thème prédéfini clair utilise rgba(0, 0, 0, 0.18).
Depuis la version 4.0.0, il existe neuf jetons de plus :
tableGroupHeaderBackground,tableGroupBackgroundettableGroupBordercolorent la barre de titre, le corps et le contour d’un groupe de tables qui n’a pas de couleur propre.toastSuccessettoastErrorcolorent la marque d’une notification qui indique comment une opération s’est terminée.findReplaceErroretmapColumnsErrorcolorent les erreurs qu’affichent la fonction Rechercher et remplacer et la boîte de dialogue Associer les colonnes. Rechercher et remplacer utilisait auparavantdiffDeleteForeground: surcharger ce jeton ne le recolore donc plus.schemaSqlWarningBackgroundetschemaSqlWarningForegroundcolorent les avertissements dans les options de l’onglet Schéma SQL.
Depuis la version 4.1.0, il existe neuf jetons de plus :
treeBackground,treeRowHover,treeRowCurrent,treeMutedettreeMatchcolorent l’arborescence que partagent l’explorateur et la visionneuse de différences : son arrière-plan, qui remplit aussi les champsFindetReplacede l’explorateur ; une ligne sous le pointeur, la ligne active au clavier lorsque l’arborescence a le focus, et un bouton sous le pointeur dans l’en-tête et la recherche de l’explorateur ; la ligne de la correspondance de recherche actuelle ; le texte atténué comme les décomptes, les types de données et les flèches de repli ; et la marque derrière le texte trouvé par une recherche.explorerBackgroundetexplorerBordercolorent le panneau de l’explorateur et ses traits : son bord à côté du canevas, le trait sous sa recherche, et les bordures de ses champs et des boutons que déploieSearch In.explorerBorderdessine aussi le bord de l’arborescence de la visionneuse de différences, le trait sous son champFilter by nameet la bordure de ce champ. Les icônes de clé de l’explorateur prennentkeyPK,keyFKetkeyPFK.diffModifyForegroundetdiffRenameForegroundcolorent ce que la visionneuse de différences marque comme modifié et renommé, dans son arborescence et sur les deux documents.diffModifyForegroundentoure aussi une table, un mémo ou un groupe de tables qui a été déplacé, redimensionné, recoloré ou regroupé, quelles que soient ses autres modifications, et dessine le connecteur d’une clé étrangère modifiée.
diffInsertForeground et diffDeleteForeground colorent désormais ce que la visionneuse de différences marque comme ajouté et supprimé, dans son arborescence et sur le document qui le contient, aussi bien dans le texte que dans les contours et les connecteurs. diffInsertBackground, diffDeleteBackground, diffCrossBackground et diffCrossForeground ont été supprimés dans la version 4.1.0, car la visionneuse de différences ne remplit plus les cellules. setTheme les abandonne comme tout autre nom absent de Theme, et leurs variables CSS, --erd-editor-diff-insert-background, --erd-editor-diff-delete-background, --erd-editor-diff-cross-background et --erd-editor-diff-cross-foreground, ne sont plus lues.
Depuis la version 4.2.0, il existe douze jetons de plus :
columnHandleBackgroundetcolumnHandleBorderremplissent et entourent la poignée de déplacement des colonnes, dessinée juste à l’extérieur du bord gauche d’une table, à côté d’une ligne de colonne qui a le focus, etcolumnHandleHoverBackgroundetcolumnHandleHoverBorderprennent le relais tant que le pointeur la survole. Son icône de poignée prendforeground, etactivesous le pointeur.dictionaryErrorForegroundetdictionaryWarningForegroundcolorent ce que trouvent les vérifications du dictionnaire, une erreur ou un avertissement : un nom signalé sur le canevas ERD (voir Marques sur le canevas), le texte d’une cellule signalée dans les feuillesDomains,WordsetTerms, et le décompte deChecks.dictionaryErrorBackgroundetdictionaryWarningBackgroundremplissent une telle cellule.dictionaryErrorForegroundcolore aussi l’outilDelete Rowssous le pointeur.dictionaryBackground,dictionaryHeaderBackground,dictionaryGridLineetdictionaryHeaderSelectcolorent la feuille de l’onglet Dictionnaire : ses cellules, dont la couleur remplit aussi le champ de recherche de l’onglet et la liste des domaines d’un terme ; ses en-têtes de colonne et ses numéros de ligne ; les traits entre les cellules, qui dessinent aussi la barre de l’onglet et les bordures de ses champs ; et un en-tête dont la ligne ou la colonne croise la sélection. Le reste de la feuille prend des jetons partagés :foregroundpour les libellés des en-têtes,activepour le texte des cellules,grayColor7pour le trait qui sépare les en-têtes de colonne et les numéros de ligne des cellules,focuspour le bord de la cellule active,accentColor9pour le bord d’une plage sélectionnée et, à 20 % d’opacité, son remplissage,accentColor6pour l’en-tête d’une ligne ou d’une colonne entièrement sélectionnée,grayColor3pour les cellules en lecture seule, ainsi que les jetons de la barre de défilement. UnaccentColor9qui n’est pas écrit sous la forme#rgbou#rrggbblaisse une plage sélectionnée sans remplissage.
Variables CSS
Chaque jeton de Theme a une variable CSS correspondante, nommée --erd-editor- suivi de la clé en kebab-case : grayColor10 devient --erd-editor-gray-color-10, keyPK devient --erd-editor-key-pk et keyPFK devient --erd-editor-key-pfk.
Les variables sont héritées dans l’éditeur : définissez-les donc là où vous voulez qu’elles s’appliquent. Sur :root, elles définissent le thème de tous les éditeurs de la page ; sur l’élément lui-même, celui de cet éditeur seulement.
erd-editor {
--erd-editor-canvas-background: #1b1b1f;
}
Depuis la version 3.4.0, les jetons mal orthographiés dargSelect s’écrivent dragSelect, et leurs variables CSS sont passées de --erd-editor-darg-select-background et --erd-editor-darg-select-border à --erd-editor-drag-select-background et --erd-editor-drag-select-border. Une feuille de style qui utilise encore les anciens noms est ignorée.
Valeurs par défaut du thème
: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-column-handle-background: #18191b;
--erd-editor-column-handle-border: #363a3f;
--erd-editor-column-handle-hover-background: #2e3135;
--erd-editor-column-handle-hover-border: #43484e;
--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-dictionary-error-foreground: #ff9592;
--erd-editor-dictionary-error-background: #500f1c;
--erd-editor-dictionary-warning-foreground: #ffca16;
--erd-editor-dictionary-warning-background: #3f2700;
--erd-editor-dictionary-background: #18191b;
--erd-editor-dictionary-header-background: #2e3135;
--erd-editor-dictionary-grid-line: #363a3f;
--erd-editor-dictionary-header-select: #182449;
--erd-editor-diff-insert-foreground: #3dd68c;
--erd-editor-diff-delete-foreground: #ff9592;
--erd-editor-diff-modify-foreground: #ffca16;
--erd-editor-diff-rename-foreground: #70b8ff;
}
Langue d’affichage
Depuis la version 4.0.0, le texte propre de l’éditeur (ses menus, panneaux, boîtes de dialogue, sa recherche rapide, ses notifications et les mots qu’il dessine sur le diagramme comme unnamed, exportations d’images comprises) existe en 25 langues. Les noms de tables et de colonnes, le SQL, les types de données et le code généré ne sont jamais traduits. Voir Langue et thème.
Avant l’appel de setLocale ou le choix d’une langue, l’éditeur affiche l’anglais, ou suit 'system' tant que enableLocalePicker est activé.
L’éditeur définit lang et dir sur sa propre racine à l’intérieur de la racine fantôme fermée, jamais sur l’élément hôte ni sur la page, si bien qu’une page de droite à gauche n’inverse pas l’éditeur et qu’une langue de droite à gauche n’inverse pas la page. L’hébreu, l’arabe et le persan disposent l’interface de l’éditeur de droite à gauche ; le diagramme lui-même n’est jamais mis en miroir. Depuis la version 4.1.0, l’explorateur reste à gauche du canevas dans toutes les langues, ses propres lignes se lisant de droite à gauche dans ces trois langues.
Le paquet exporte les types LocaleCode (l’un des codes ci-dessous) et LocaleOption.
type LocaleOption = LocaleCode | 'system';
| Code | Nom affiché | Langue |
|---|---|---|
id-ID | Bahasa Indonesia | Indonésien |
de-DE | Deutsch | Allemand |
en | English | Anglais |
es-ES | Español | Espagnol |
eu-ES | Euskara | Basque |
fr-FR | Français | Français |
it-IT | Italiano | Italien |
nl-NL | Nederlands | Néerlandais |
pl-PL | Polski | Polonais |
pt-PT | Português | Portugais |
pt-BR | Português Brasileiro | Portugais du Brésil |
ro-RO | Română | Roumain |
sk-SK | Slovenčina | Slovaque |
sl-SI | Slovenščina | Slovène |
sv-SE | Svenska | Suédois |
tr-TR | Türkçe | Turc |
ru-RU | Русский | Russe |
uk-UA | Українська | Ukrainien |
he-IL | עברית | Hébreu |
ar-SA | العربية | Arabe |
fa-IR | فارسی | Persan |
ja-JP | 日本語 | Japonais |
zh-CN | 简体中文 | Chinois simplifié |
zh-TW | 繁體中文 | Chinois traditionnel |
ko-KR | 한국어 | Coréen |
setLocale
Définit la langue d’affichage : 'system' ou l’un des codes ci-dessus. Tout le reste, comme un simple 'ko', un code inconnu ou une valeur qui n’est pas une chaîne, est ignoré sans erreur.
Il s’applique avant de rendre la main, si bien qu’une langue définie avant que l’élément soit ajouté figure dès sa première image.
Il n’émet rien, ni changeLocale ni change, et ne touche ni à value, ni à l’historique d’annulation, ni à un store partagé.
Le choix reste, que enableLocalePicker soit activé ou désactivé, et setLocale('system') suit aussi le système lorsque le sélecteur est désactivé.
L’éditeur ne stocke rien. Pour conserver le choix d’un lecteur, écoutez changeLocale et repassez ce choix au chargement suivant.
editor.enableLocalePicker = true;
editor.setLocale(localStorage.getItem('locale') ?? 'system');
editor.addEventListener('changeLocale', event => {
localStorage.setItem('locale', event.detail.locale);
});
setSystemLocale
Nomme la langue que représente 'system', sous forme d’étiquette BCP 47, pour un hôte qui a sa propre langue d’affichage. Les hôtes VS Code, JetBrains et Obsidian l’appellent avec leur propre langue d’affichage.
Les espaces de début et de fin de l’étiquette sont supprimés. null, une chaîne vide ou une valeur qui n’est pas une chaîne revient au navigator.languages du navigateur, que l’éditeur suit au fil de ses changements.
Il ne compte que tant que l’option en vigueur est 'system', et il s’applique immédiatement. La ligne System du sélecteur nomme la langue obtenue.
L’étiquette, ou chacune des langues du navigateur dans l’ordre, se résout en la première langue que propose l’éditeur, d’après sa sous-étiquette de langue, sans tenir compte de la casse ni des traits de soulignement : de-AT donne de-DE et en-GB donne en. Le chinois se résout d’après son écriture, Hant donnant zh-TW et Hans donnant zh-CN, et, sans écriture, d’après la région, TW, HK et MO donnant zh-TW et toute autre région zh-CN. pt donne pt-BR sauf si une région autre que BR est indiquée. Lorsque rien ne correspond, l’éditeur affiche l’anglais.
editor.setLocale('system');
editor.setSystemLocale('pt-PT'); // null follows the browser again
setSchemaSQL
Charge un fichier Schéma SQL.
Par défaut, il remplace le document actuel au lieu d’y fusionner le fichier ; voir mode ci-dessous. Les paramètres que vous avez déjà sont conservés, y compris chaque verrou et sa valeur verrouillée, à l’exception de la position de la vue et du niveau de zoom, et les tables sont placées une fois le fichier lu, en lignes sauf si placement ci-dessous demande autre chose. Avec Viewport verrouillé, value écrit alors la vue sur laquelle démarre l’importation, l’origine 0, 0 au niveau de zoom 1. Un document importé dans un élément qui n’a jamais reçu de valeur a donc tous ses verrous activés, comme un nouveau document.
Depuis la version 4.2.0, un remplacement conserve aussi les mots, les termes et les domaines du document, que le texte ne peut pas contenir, avec l’historique d’annulation de chaque feuille du dictionnaire, et une annulation ou un rétablissement de l’importation les conserve aussi. Un setSchemaJSON qui remplace et l’affectation de value prennent plutôt ceux que contient leur document.
Il est enregistré dans l’historique, ce qui permet Undo, Redo, et il émet change. Une chaîne vide est ignorée, et l’appel ne fait rien tant que readonly est défini.
setSchemaGraphQL, setSchemaDBML et setSchemaAML se comportent de la même façon, et leurs analyseurs n’échouent jamais : un texte qu’ils ne peuvent pas lire charge un document vide au lieu de lever une erreur.
Depuis la version 4.0.0, les quatre acceptent un second argument facultatif, { placement, mode } :
placement: 'grid', la valeur par défaut, place immédiatement les tables en lignes, comme auparavant, et l’appel ne renvoie rien.placement: 'auto'dispose d’abord les tables selon leurs relations, comme le faitImportdans l’éditeur, et renvoie unePromisequi se résout une fois l’importation appliquée en une seule étape d’annulation. Moins de deux tables, aucune relation, une disposition qui échoue, une page sansSharedWorkerouCancelsur la notificationPlacing tablesles place plutôt en lignes. Un chargement entre-temps (une autre importation qui remplace, l’affectation devalue,setInitialValue(), depuis la version5.1.0le reseed d’un store partagé,clear(), le chargement d’un collaborateur, ou l’annulation ou le rétablissement d’un chargement ou declear()) prend le pas sur elle, et laPromisese résout sans que rien n’ait été chargé. Les importations placées de cette façon s’appliquent dans l’ordre où elles ont commencé.mode: 'replace', la valeur par défaut, remplace le document.mode: 'append'ajoute le fichier sous le diagramme comme le fait Importer et ajouter, en laissant telles quelles toutes les tables déjà présentes, ainsi que tous les paramètres à l’exception de l’onglet et de la position de la vue. Depuis un autre onglet, l’onglet ERD s’affiche d’abord. Les nouvelles tables, et les groupes de tables qu’apporte un fichier DBML lorsque les groupes de tables sont affichés, deviennent la sélection, et la vue défile jusqu’à eux, sauf s’ils sont déjà bien visibles, selon la règle que suit chaque saut depuis la version4.1.0(voir Où aboutit un saut). Une seule annulation supprime tout l’ajout. Un texte qu’il ne peut pas lire n’ajoute rien et laisse le document tel quel.
Tant que readonly est défini, un remplacement est ignoré, un ajout n’ajoute rien et un appel avec placement: 'auto' se résout immédiatement.
Depuis la version 3.10.0, setSchemaSQL lit le fichier selon la base de données actuelle du document : avec Databricks sélectionné, les chaînes entre apostrophes suivent les échappements par barre oblique inverse de Spark. Voir Commentaires.
Depuis la version 3.10.0, setSchemaSQL lit un UNIQUE portant sur deux colonnes ou plus comme un seul index unique plutôt que comme un indicateur Unique sur chaque colonne. Voir Clés uniques et index.
Depuis la version 3.10.0, les importations SQL, DBML et AML conservent les actions ON DELETE et ON UPDATE des clés étrangères qu’elles lisent.
Depuis la version 4.0.0, setSchemaSQL conserve l’expression DEFAULT complète d’une colonne, lit les ADD DEFAULT … FOR de SQL Server et ses commentaires MS_Description, transforme les colonnes serial et identity de PostgreSQL en auto-incrément, conserve UNSIGNED et ZEROFILL dans un type de données, et lit une clé primaire qu’ALTER TABLE … ADD PRIMARY KEY marque CLUSTERED, NONCLUSTERED ou USING BTREE. Voir Schéma SQL.
Pour la syntaxe qu’accepte chaque analyseur, voir Importer ou exporter des fichiers.
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
Charge un document GraphQL SDL.
Les définitions de types objet deviennent des tables, et un champ dont le type est une autre table devient une relation.
editor.setSchemaGraphQL('GraphQL SDL...');
setSchemaDBML
Charge un fichier DBML, le format utilisé par dbdiagram.io et dbdocs.
Depuis la version 4.0.0, chaque TableGroup devient un groupe de tables, et le headercolor d’une table devient sa couleur. Voir DBML.
editor.setSchemaDBML('DBML...');
setSchemaAML
Charge un fichier AML (Azimutt Markup Language). La syntaxe actuelle comme l’ancienne syntaxe v1 sont acceptées.
Depuis la version 4.0.0, la couleur d’une entité, l’un des noms de couleur d’Azimutt ou une valeur hexadécimale entre guillemets, devient la couleur de sa table. Voir AML.
editor.setSchemaAML('AML...');
setSchemaJSON
Depuis la version 4.0.0, charge un document .erd.json, comme le texte que renvoie value.
Dans son mode: 'replace' par défaut, il charge le document comme le fait l’affectation de value : il est enregistré dans l’historique, émet change et prend les verrous du document de la même façon et, depuis la version 4.2.0, les mots, les termes et les domaines du document remplacent ceux de l’éditeur. Contrairement à value, une chaîne vide ou une valeur qui n’est pas une chaîne est ignorée au lieu de créer un nouveau document. Un texte qui n’est pas du JSON vide le document, comme avec value.
mode: 'append' ajoute les tables, relations, index, mémos et groupes de tables du document sous le diagramme avec de nouveaux identifiants, en conservant leurs positions les uns par rapport aux autres et en laissant de côté les paramètres du document, comme le fait Importer et ajouter avec un fichier json. Depuis la version 4.2.0, il conserve les noms logiques et les indicateurs de nom dérivé des tables et des colonnes, mais laisse de côté les mots, les termes et les domaines du document, si bien qu’aucune de ses colonnes n’est liée à un domaine. Un texte qu’il ne peut pas lire, ou un document sans table ni mémo, n’ajoute rien. Sinon, il s’applique comme un ajout de setSchemaSQL, ses nouveaux mémos et groupes de tables étant sélectionnés avec ses tables, chaque type tant qu’il est affiché.
Il rend la main une fois le document appliqué, et il est ignoré tant que readonly est défini.
editor.setSchemaJSON('json...');
// or
editor.setSchemaJSON('json...', { mode: 'append' });
getSchemaSQL
Exporte l’état actuel de l’éditeur en Schéma SQL.
Si databaseVendor n’est pas indiqué, il écrit pour le SGBD qu’affiche l’éditeur : celui du document, sauf si le lecteur d’un éditeur en lecture seule en a choisi un autre, ce qui reste depuis la version 5.0.0 sur cet écran et est ce qu’affiche son onglet Schéma SQL. Un nom qui ne figure pas dans la liste ci-dessous est traité de la même façon, sans lever d’erreur.
Les noms sont délimités avec le type de délimiteur qu’affiche l’éditeur. Tant que Bracket Type est verrouillé, ou, depuis la version 5.0.0, dans un éditeur en lecture seule dont le lecteur en a choisi un autre, il peut différer de celui qu’enregistre value, qui est celui avec lequel délimite le erd_read d’un agent de codage. Les noms écrits sont toujours les noms physiques, quel que soit l’affichage des noms.
Depuis la version 4.0.0, un argument facultatif options choisit les instructions et l’en-tête, comme le font les options de l’onglet Schéma SQL, et, depuis la version 4.2.0, si les noms logiques remplissent les commentaires vides. SchemaSQLOptions est exporté en tant que type.
statements:'create', la valeur par défaut ;'ifNotExists', qui écritIF NOT EXISTSsur MySQL, MariaDB, PostgreSQL, SQLite et Databricks et se rabat sur'create'ailleurs ; ou'recreate', qui supprime les tables avant de les créer, Snowflake écrivant plutôtCREATE OR REPLACE TABLE.header:'none', la valeur par défaut ;'use', qui bascule vers la base de données ou le schéma du document ; ou'createAndUse', qui crée d’abord la base de données ou le schéma s’il n’existe pas, puis bascule vers celui-ci. Une base de données dépourvue de l’option demandée se rabat comme le fait l’onglet : Oracle écrit'use'pour'createAndUse', PostgreSQL n’écrit aucun en-tête pour'use', et SQLite n’en écrit aucun. Un en-tête n’est écrit que si le nom de base de données du document est un identifiant simple : lettres ASCII, chiffres et_, sans commencer par un chiffre.logicalNameAsComment, depuis la version4.2.0:trueécrit le nom logique d’une table ou d’une colonne comme son commentaire là où son propre commentaire est vide ou ne contient que des espaces et où le nom logique ne l’est pas, sous la forme dans laquelle cette base de données écrit un commentaire. Un commentaire qui contient du texte est écrit comme auparavant. Seultruel’active : omis,falseou toute autre valeur, comme'true'ou1, n’écrit aucun nom logique. Il fait ce que fait l’interrupteurWrite logical names into empty commentsde l’onglet.
Une option omise, ou dont la valeur est inconnue, est lue comme sa valeur par défaut : un appel sans options écrit donc de simples instructions CREATE sans en-tête, comme auparavant.
Depuis la version 4.0.0, la sortie inclut toujours les scripts Before tables et After tables du document, dans l’ordre suivant : en-tête, script avant les tables, instructions de suppression, tables, script après les tables. Les choix Statements, Header, Write logical names into empty comments et Tables propres à l’onglet Schéma SQL n’affectent jamais cet appel, qui écrit toujours le document entier.
Depuis la version 3.10.0, chaque clé étrangère porte les clauses ON DELETE et ON UPDATE de la relation. Une clause n’est écrite que si son action est définie et que le SGBD l’accepte : une action que ce SGBD ne prend pas en charge est donc omise, et sa valeur par défaut s’applique. Depuis la version 4.0.0, Snowflake n’accepte que NO ACTION. Pour ce qu’écrit chaque base de données, voir ON DELETE et ON UPDATE.
Depuis la version 3.10.0, une apostrophe dans un commentaire de table ou de colonne est échappée, si bien qu’un commentaire comme it's ne casse plus l’instruction. Chaque SGBD qui écrit les commentaires sous forme de littéraux de chaîne la double, sauf Databricks, qui place une barre oblique inverse avant chaque apostrophe et chaque barre oblique inverse. SQLite écrit toujours les commentaires sous forme de lignes --.
Depuis la version 4.2.0, SQL Server écrit chaque commentaire sous forme de littéral national, N'…', si bien qu’un texte hors de la page de codes de la base de données, comme du coréen, est conservé. Oracle écrit chaque suite de lignes vides d’un commentaire sous la forme d’un seul saut de ligne, et SQLite écrit les sauts de ligne d’un commentaire sous forme d’espaces, si bien que celui-ci reste sur sa ligne --. Voir Commentaires.
Depuis la version 4.0.0, plusieurs bases de données écrivent aussi différemment les noms de clés, les valeurs par défaut et l’auto-incrément. Voir Ce qu’écrit le DDL.
type DatabaseVendor =
| 'Databricks'
| 'MariaDB'
| 'MSSQL'
| 'MySQL'
| 'Oracle'
| 'PostgreSQL'
| 'Snowflake'
| 'SQLite';
type SchemaSQLOptions = {
statements?: 'create' | 'ifNotExists' | 'recreate';
header?: 'none' | 'use' | 'createAndUse';
logicalNameAsComment?: boolean;
};
const schemaSQL = editor.getSchemaSQL();
// or
const postgresSQL = editor.getSchemaSQL('PostgreSQL');
// or
const mysqlSQL = editor.getSchemaSQL('MySQL', {
statements: 'ifNotExists',
header: 'createAndUse',
});
// or
const commentedSQL = editor.getSchemaSQL('PostgreSQL', {
logicalNameAsComment: true,
});
getSharedStore
Renvoie un store pour l’édition collaborative en temps réel.
config vaut { getNickname?, mouseTracker?, focusTracker? }. Les deux options de suivi valent true par défaut : mouseTracker diffuse le curseur de cet éditeur aux autres, et focusTracker diffuse sa cellule active, sa sélection et son rectangle de sélection.
Depuis la version 5.0.0, le store n’envoie aucun changement tant que readonly est défini, seulement ce que ses suiveurs envoient et les registres que demande un éditeur qui rejoint la session, et il applique toujours ce que les autres envoient.
Depuis la version 5.1.0, il fournit aussi les registres de collaboration de l’éditeur et la version de son horloge (getLWW, getVersion), prend en compte ceux d’un autre store (mergeLWW), oublie le curseur, le focus, la sélection et le cadre de glissement d’un collaborateur parti (forgetPeer) et rouvre le document de la session avec les registres conservés à côté (reseed). @dineug/erd-editor-yjs s’appuie sur ces méthodes pour maintenir l’élément synchronisé avec un document Yjs.
Depuis la version 5.1.0, deux utilisateurs qui modifient un même nom ou champ, déplacent une même table, ou déplacent ou redimensionnent un même mémo ou groupe de tables au même moment aboutissent au même résultat sur chaque éditeur et chaque réplique en version 5.1.0 ou ultérieure, et un glissement, un déplacement de la vue ou un zoom est envoyé sous la forme de l’endroit où il se termine.
Une couleur, une colonne déplacée dans sa table ou son index, et quelques paramètres comme le SGBD font exception : chaque éditeur et chaque réplique les prend encore dans l’ordre où il les reçoit. Voir Modifications concurrentes.
Voir Édition collaborative.
const sharedStore = editor.getSharedStore({
mouseTracker: false,
focusTracker: false,
});
setDiffValue
Ouvre la visionneuse de différences, qui compare le document actuellement ouvert à celui que vous passez.
Il ne renvoie rien et ne modifie pas le document : fermer la visionneuse laisse donc l’éditeur exactement tel qu’il était.
Une valeur vide, ou tout ce qui n’est pas une chaîne, est comparée à un document vide.
Il s’agit de la même vue superposée que Visionneuse de différences dans le menu contextuel du canevas.
Depuis la version 4.1.0, il apparie le contenu des deux documents d’abord par identifiant, et seulement ensuite par ce que chaque élément contient, comme le nom d’une table ou le texte d’un mémo (voir Ce qui est comparé). Face à une version antérieure du même document, comme une révision Git de son fichier, un renommage apparaît donc comme un seul élément renommé ; face à un document dont les identifiants diffèrent, il apparaît comme une suppression et un ajout. La visionneuse liste les modifications dans une arborescence à côté des deux documents et marque les changements en couleur au lieu de remplir les cellules.
Depuis la version 4.2.0, les deux documents s’ouvrent dans l’affichage des noms que montre cet éditeur, quel que soit celui qu’a enregistré le document passé, et l’arborescence nomme aussi les tables et les colonnes selon cet affichage (voir Au-delà du canevas). Les noms logiques, les liens de domaine et les dictionnaires ne sont pas comparés : une modification qui ne porte que sur eux n’apparaît donc pas comme une modification.
editor.setDiffValue('prev json...');