ErdEditorElement

L’editor è un semplice HTMLElement.
La sua definizione di tipo è la seguente.

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’editor esegue il rendering in uno shadow root chiuso, quindi editor.shadowRoot è null e gli stili della pagina non entrano né escono.
Nessun elemento interno è raggiungibile con un selettore — per applicare gli stili usare invece setTheme e le proprietà personalizzate --erd-editor-*.

readonly, system-dark-mode, enable-theme-builder, enable-locale-picker ed enable-welcome-screen sono gli unici attributi, e tutti e cinque valgono false per impostazione predefinita. Gli ultimi due sono stati introdotti nella versione 4.0.0. Ciascuno legge il proprio valore come descritto in readonly.

Dalla versione 4.1.0 la scheda ERD dispone del pannello Esplora, un albero del diagramma ancorato a sinistra dell’area di disegno con Trova e sostituisci in alto. Nessun attributo, proprietà, metodo o evento lo apre, lo chiude o ne segnala lo stato: si apre dal pulsante Explorer della barra degli strumenti, dalla voce Toggle Explorer della Ricerca rapida o del menu contestuale dell’area di disegno, oppure con l’associazione findReplace.
Ogni elemento parte con il pannello chiuso. Lo stato di apertura, la larghezza, lo stato di compressione e la ricerca durano quanto l’elemento, attraverso i cambi di scheda e ogni caricamento, setInitialValue compreso, e non compaiono mai in value, in runtimeValue, nella cronologia delle modifiche o in uno store condiviso.

readonly

Imposta la capacità di modifica dell’editor.
Mentre è impostato, l’assegnazione di value, clear(), setSchemaSQL(), setSchemaGraphQL(), setSchemaDBML(), setSchemaAML(), setSchemaJSON(), Annulla e Ripeti vengono tutti ignorati, e l’evento change non viene mai emesso. Per caricare un documento, usare invece setInitialValue.
La visualizzazione continua a funzionare: lo zoom, lo spostamento della vista, lo strumento Mano, la modalità Zen, la scheda dell’area di disegno, la scheda Visualizzazione in entrambe le modalità, focalizzazione delle tabelle compresa, il fornitore di database e le impostazioni di output SQL e del Generatore di codice restano tutti attivi, quindi un visualizzatore di sola lettura può comunque esportare SQL per un altro fornitore o leggere il codice generato.
Dalla versione 4.1.0 si apre anche il pannello Esplora, e scegliere una delle sue righe porta all’elemento che la riga rappresenta, come in un editor modificabile. Trova e sostituisci, in alto, si limita a cercare, senza la freccia Toggle Replace e senza la riga Sostituisci, e andare a una corrispondenza la rende comunque visibile e la seleziona. Il pannello è intitolato Explorer e il tooltip del pulsante della barra degli strumenti è Explorer (Ctrl + F) (Windows/Linux) o Explorer (⌘ + F) (Mac) in ogni editor. Dalla 3.10.0 alla 4.0.0 Trova e sostituisci si apriva come pannello mobile di sola ricerca intitolato Find.
Proprietà tabella si apre comunque e, dalla versione 3.10.0, mostra l’etichetta Read only accanto al titolo, mentre la sua scheda Indexes non consente modifiche — vedere Proprietà tabella.
Dalla versione 4.0.0 un editor di sola lettura non offre Import and Add, New Table Group, Group selected tables, Remove from group (vedere Gruppi di tabelle) né Map Columns, e non mostra la schermata di benvenuto. I pulsanti di blocco della scheda Impostazioni non cambiano nulla, e gli script Before tables e After tables della scheda Schema SQL non sono modificabili.
Dalla versione 4.1.0 non mostra neppure i pulsanti New Table, New Memo e New Table Group nella barra degli strumenti dell’area di disegno, e le associazioni addTableGroup e groupSelectedTables non hanno alcun effetto.
Le scelte This window only della scheda Schema SQL, Statements, Header e Tables, non vengono mai salvate e continuano ad applicarsi, e lo stesso vale per la finestra di dialogo Export image, il generatore di temi e il selettore della lingua di visualizzazione. Una scelta nel generatore di temi o nel selettore della lingua di visualizzazione emette comunque changePresetTheme o changeLocale.
Un attributo senza valore, ="" e ="true" vengono tutti letti come true. ="false" viene letto come false, e così qualsiasi altra stringa — compresa la forma idiomatica HTML readonly="readonly".

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

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

systemDarkMode

Determina se sincronizzarsi automaticamente con la modalità scura/chiara del sistema.
Dalla versione 4.0.0 attivarlo imposta la proprietà appearance del tema su 'system', come fa setPresetTheme({ appearance: 'system' }). L’editor mostra quindi l’aspetto chiaro o scuro indicato dal sistema operativo, o quello specificato da setSystemAppearance, e cambia quando questo cambia.
Una successiva chiamata a setPresetTheme con 'light' o 'dark', o la scelta di Light o Dark nel generatore di temi o nella Ricerca rapida, sostituisce 'system' e rimane: il successivo cambiamento del sistema operativo non la sovrascrive più, anche se systemDarkMode è ancora true. Prima della versione 4.0.0 il successivo cambiamento del sistema operativo la sovrascriveva.
Disattivarlo mentre l’aspetto è 'system' mantiene l’aspetto chiaro o scuro mostrato in quel momento. Disattivarlo dopo che l’aspetto è stato cambiato da 'system' a un altro valore lo lascia invariato.
Modificarlo non emette alcun evento.

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

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

enableThemeBuilder

Determina se viene fornita un’interfaccia per impostare facilmente i temi preimpostati.
Mostra il pulsante Theme della barra degli strumenti, che apre il generatore di temi con Accent color, Gray color e Appearance. Dalla versione 4.0.0 l’opzione Appearance offre System accanto a Light e Dark e, mentre questa opzione è attiva, la Ricerca rapida elenca Theme con System, Light e Dark. Vedere Lingua e tema.

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

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

Modificare il tema preimpostato da questo pannello, o dalla Ricerca rapida, emette l’evento changePresetTheme.

enableLocalePicker

Dalla versione 4.0.0, determina se viene fornita un’interfaccia per scegliere la lingua di visualizzazione dell’editor.
Mostra il pulsante Display Language della barra degli strumenti, dopo Theme quando sono mostrati entrambi. Il pulsante apre il selettore della lingua di visualizzazione, e la Ricerca rapida elenca Display Language. Entrambi offrono System e le 25 lingue — vedere Lingua e tema.
Determina anche cosa mostra un editor prima che venga chiamato setLocale o scelta una lingua: 'system' quando è attivo, l’inglese quando è disattivato, quindi un elemento che non configura nulla mantiene l’inglese che ha sempre mostrato. Attivarlo o disattivarlo passa immediatamente dall’uno all’altro. Una volta impostata o scelta una lingua, quella scelta rimane, che l’opzione sia attiva o disattivata.
Impostarlo prima di aggiungere l’elemento perché già il primo frame segua 'system'.
Una scelta emette changeLocale.

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

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

enableWelcomeScreen

Dalla versione 4.0.0, determina se un diagramma vuoto accoglie l’utente con la schermata di benvenuto.
Si sovrappone alla scheda ERD mentre il documento non contiene tabelle, memo visibili né gruppi di tabelle visibili. Non viene mostrata mentre readonly è impostato, in modalità Zen, o mentre sono aperti Proprietà tabella, il Visualizzatore differenze, il Viaggio nel tempo o l’anteprima del Layout automatico. La prima tabella, il primo memo visibile o il primo gruppo di tabelle visibile la fa sparire, e un annullamento che riporta a un diagramma vuoto la fa ricomparire.
Le sue voci New Table, New Memo e Command Palette mostrano la prima combinazione di tasti di addTable, addMemo e search così come le ha lasciate setKeyBindingMap, e nessuna per un nome lasciato vuoto. Le sue frecce indicano i pulsanti Theme e Display Language solo dove enableThemeBuilder ed enableLocalePicker li mostrano.
Nel suo menu, ↑, ↓, Home ed End spostano il focus tra le voci, con l’azione predefinita impedita e la propagazione interrotta. Per Enter e Space la propagazione viene interrotta, ma l’azione predefinita non viene impedita, così li riceve la voce con il focus, e Escape tra i formati di Import torna indietro, con l’azione predefinita impedita e la propagazione interrotta. Ogni altro tasto raggiunge l’editor e la pagina come di consueto.
Non modifica nulla nel documento, quindi lascia value invariato e non emette alcun change.
Attivarlo dopo che setInitialValue ha caricato il documento, come fanno gli host ufficiali, in modo che la schermata non lampeggi mai sopra un file ancora in caricamento.

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

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

value

getter

Restituisce il documento corrente come stringa JSON, nello schema definito dall’editor.
Dalla versione 4.0.0 è la forma di archiviazione, il documento così come lo contiene un file, che è anche ciò che scrive l’esportazione json e che salvano gli host ufficiali. Contiene solo le entità presenti, senza quelle rimosse, l’ordine di sovrapposizione o ciò che l’editor calcola da sé, come le larghezze misurate, gli indicatori delle chiavi e i punti di ancoraggio delle relazioni. Le chiavi delle sue entità seguono un ordine fisso, il testo è indentato di due spazi e termina con un a capo, quindi lo stesso documento produce sempre gli stessi byte.
Ogni impostazione con il blocco attivo viene scritta con il valore a cui è bloccata, non come la mostra lo schermo. Il blocco Viewport contiene originX, originY e zoomLevel, mentre Canvas Type, Language, Table Name Case, Column Name Case e Bracket Type contengono ciascuno la propria impostazione. Ogni altra impostazione viene scritta così com’è, e lockSettings viene sempre scritto. Per i bit, vedere Settings.
Un nuovo documento ha tutti i blocchi attivi, sia quello che un elemento mostra prima di ricevere un valore, sia uno caricato da un valore vuoto. Il suo value mantiene l’origine a 0, 0, il livello di zoom a 1, la scheda ERD, il linguaggio predefinito del Generatore di codice, gli stili dei nomi e il tipo di delimitatore predefiniti finché il blocco corrispondente non viene disattivato.
Prima della versione 4.0.0 restituiva l’intero documento così come lo conteneva l’editor, con ignoreSaveSettings applicato. Il documento così come lo contiene l’editor è ora runtimeValue, e ignoreSaveSettings non viene più letto né scritto.

const data = editor.value;

setter

Carica uno stato dell’editor salvato in precedenza. Sostituisce l’intero documento — quello corrente viene prima svuotato.
Come clear(), setInitialValue() e i metodi setSchema* nella loro modalità predefinita mode: 'replace', scarta anche la vista in modalità Flusso della scheda Visualizzazione: il suo layout, le tabelle a cui è ristretta, la visualizzazione righe, lo zoom e lo spostamento della vista. Un’aggiunta (mode: 'append') non la scarta.
Viene registrato nella cronologia, abilitando Undo, Redo, ed emette change.
Accetta la forma di archiviazione, un runtimeValue o un file salvato da una versione precedente.
Una stringa vuota, o qualsiasi valore che non sia una stringa, carica un nuovo documento anziché generare un errore, quindi verificare il valore prima di assegnarlo.
Quel nuovo documento è lo stesso con cui inizia setInitialValue(''): vuoto, con le impostazioni predefinite e, dalla versione 4.0.0, con tutti i blocchi attivi. Nella 3.10.x non salvava né la posizione di scorrimento né il livello di zoom, e prima di allora li salvava entrambi.
Uno store condiviso inoltra quel caricamento ai collaboratori con il JSON completo del nuovo documento, così che ogni peer, anche di una versione precedente, carichi lo stesso documento.
Dalla versione 4.0.0 i blocchi del documento caricato, e i valori bloccati che value scrive poi, provengono dal testo, e la vista si posiziona dove la colloca il testo, oppure sul diagramma quando lì non ne è disegnata alcuna parte. Per ogni altra impostazione che il testo blocca — la scheda, il linguaggio del Generatore di codice, gli stili dei nomi e il tipo di delimitatore — l’editor continua a mostrare ciò che mostrava prima del caricamento. Un’impostazione che il testo lascia sbloccata assume il valore del testo. setInitialValue invece assume ogni valore contenuto nel testo; consultarlo anche per il caso di un testo che non indica alcun blocco.
Neppure un testo che non è JSON, come un file rimasto con i marcatori di conflitto di merge, genera un errore: il documento viene svuotato, le sue impostazioni restano com’erano e l’errore di analisi viene registrato nella console.
Viene ignorato mentre readonly è impostato; per caricare in un editor di sola lettura, usare setInitialValue.

editor.value = 'json...';

runtimeValue

Dalla versione 4.0.0, restituisce il documento così come lo contiene questo editor, come stringa JSON. Non ha un setter, quindi assegnarlo genera un’eccezione nel codice in modalità strict.
Contiene ciò che value tralascia: le entità rimosse e il loro ordine, l’ordine di sovrapposizione, le larghezze misurate, gli indicatori delle chiavi, i punti di ancoraggio delle relazioni e le sequenze. Anche qui le impostazioni bloccate vengono scritte con i loro valori bloccati.
Usarlo per inizializzare, tramite il suo setInitialValue, un altro editor che si unisce a una sessione già in corso, come un collaboratore o una seconda vista dello stesso documento. L’annullamento di una rimozione che la sessione invia in seguito ripristina allora l’entità per intero in quell’editor, mentre un editor inizializzato da value non contiene alcuna entità rimossa e ripristina invece una tabella vuota e senza nome. Vedere Modifica collaborativa.
Nulla raccoglie più le entità rimosse, quindi vi restano finché il documento non viene riaperto dal suo file.
Non scriverlo mai in un file: salvare value, che il JSON Schema accetta, a differenza di questo.

otherEditor.setInitialValue(editor.runtimeValue);

setInitialValue

Carica uno stato dell’editor salvato in precedenza. Il caricamento in sé non viene registrato nella cronologia, quindi non può essere annullato, e non viene emesso alcun evento change.
Svuota anche la cronologia delle modifiche, quindi nulla di ciò che è stato fatto prima del caricamento può essere annullato o ripetuto sul documento caricato.
Accetta la forma di archiviazione, un runtimeValue o un file salvato da una versione precedente e, a differenza dell’assegnazione di value, assume ogni impostazione contenuta nel testo, comprese la scheda e le impostazioni del codice.
Una stringa vuota, o qualsiasi valore che non sia una stringa, carica un nuovo documento anziché generare un errore, quindi setInitialValue('') avvia un diagramma vuoto.
Dalla versione 4.0.0 quel nuovo documento, che è anche ciò che un elemento mostra prima di ricevere qualsiasi valore, ha tutti i blocchi attivi. Lo scorrimento, lo zoom, il cambio di scheda e la modifica del linguaggio del Generatore di codice, degli stili dei nomi o del tipo di delimitatore lasciano value invariato e non emettono alcun change. Nella 3.10.x non salvava né la posizione di scorrimento né il livello di zoom, e prima di allora li salvava entrambi.
Un documento caricato da testo mantiene i blocchi che indica. Uno che non ne indica alcuno — qualsiasi file salvato prima della versione 4.0.0, qualunque cosa dicesse il suo ignoreSaveSettings, e un file .vuerd v2 — si apre con tutti i blocchi attivi, con Viewport bloccato all’origine 0, 0 e al livello di zoom 1, sulla scheda ERD, con il linguaggio, gli stili dei nomi e il tipo di delimitatore così come li ha salvati.
In entrambi i casi la vista si apre su quella del documento — quella salvata nel testo quando indica i propri blocchi, l’origine 0, 0 al livello di zoom 1 quando non ne indica alcuno — oppure sul diagramma quando lì non ne è disegnata alcuna parte. Un Viewport bloccato mantiene comunque i suoi valori bloccati in value.
Dalla versione 4.0.0 scarta anche lo stato di collaborazione del documento contenuto in precedenza, e uno store condiviso di questo editor già sottoscritto chiede di nuovo il loro stato agli altri editor, così che un editor ricaricato in una sessione in corso si rimetta in pari. Inizializzare un editor di questo tipo con il runtimeValue di un altro editor.
Neppure un testo che non è JSON genera un errore: il documento viene svuotato, le sue impostazioni restano com’erano e l’errore di analisi viene registrato nella console.
A differenza dell’assegnazione di value, non è bloccato da readonly, quindi è il modo per caricare un documento in un visualizzatore di sola lettura.

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

Caricare all’avvio, salvare a ogni modifica.

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

Eventi

change, changePresetTheme e changeLocale sono gli unici tre eventi pubblici; changeLocale è stato introdotto nella versione 4.0.0.
L’elemento emette anche su se stesso eventi interni @dineug/erd-editor/internal-* per i propri collegamenti interni; questi non fanno parte dell’API.

change

Quando ci sono modifiche nell’editor, emette un evento.
L’evento ha un debounce di 200 ms e non viene emesso mentre readonly è true.
Viene emesso per qualsiasi modifica del documento — una modifica nell’interfaccia, l’assegnazione di value, clear(), ciascuno dei metodi setSchema* e, dalla versione 4.0.0, setSchemaJSON() e Import and Add. setInitialValue non lo emette.
Nulla di ciò che si fa nella modalità Flusso della scheda Visualizzazione lo emette — zoom, spostamento della vista, spostamento delle card, Tidy Up, visualizzazione righe o restringimento della vista da una card — poiché nessuna di queste azioni è una modifica del documento.
Dalla versione 4.0.0 non lo emette neppure la modifica di un’impostazione con il blocco attivo, perché sposta solo lo schermo e mai value: uno scorrimento o uno zoom dell’area di disegno ERD mentre Viewport è bloccato, un cambio di scheda mentre Canvas Type è bloccato e una modifica del linguaggio del Generatore di codice, dello stile dei nomi delle tabelle, dello stile dei nomi delle colonne o del tipo di delimitatore mentre il relativo blocco è attivo. Sono escluse solo queste modifiche, quindi un batch che modifica anche il documento lo emette comunque. Bloccare o sbloccare un’impostazione lo emette.
In un nuovo documento e in qualsiasi file salvato prima della versione 4.0.0 tutti i blocchi sono attivi, quindi per impostazione predefinita lo scorrimento, lo zoom e il cambio di scheda non emettono nulla. Ciò comprende la focalizzazione delle tabelle dalla scheda ERD, il pulsante della card con il link esterno che riporta dalla modalità Flusso alla scheda ERD, il passaggio a una riga di Esplora o a una corrispondenza della ricerca, e l’apertura di Esplora o il passaggio a un risultato della Ricerca rapida da un’altra scheda. Ciascuna di queste azioni emette un change solo mentre è disattivato un blocco che la riguarda: Canvas Type per il cambio di scheda e Viewport per lo scorrimento prodotto anche da un pulsante della card, da un risultato della Ricerca rapida, da una riga di Esplora o da una corrispondenza della ricerca. Dalla versione 4.1.0 ognuno di questi scorrimenti segue un’unica regola, Dove porta un salto, quindi un risultato di tipo tabella della Ricerca rapida non provoca più uno scorrimento ogni volta, e un salto che la regola lascia sul posto non produce alcuno scorrimento da emettere. Aprire, chiudere o ridimensionare Esplora restringe o allarga l’area di disegno senza spostarne l’origine, e anche questo non emette nulla. Prima della versione 4.0.0 lo scorrimento, lo zoom e il cambio di scheda lo emettevano sempre, anche quando editor.value risultava identico.
Per evitare scritture che non cambiano nulla, confrontare editor.value con l’ultimo valore memorizzato, non con il file caricato: un file scritto da una versione precedente, un file v2 o uno modificato a mano possono risultare diversi in value non appena vengono caricati, perché value li scrive nella forma di archiviazione. Lo stesso vale per un file il cui blocco Viewport è disattivato e la cui origine non mostra alcuna parte del diagramma su questo schermo: il caricamento sposta la vista sul diagramma, e value scrive il punto in cui si posiziona. Dalla versione 4.0.0 le larghezze misurate non ne sono più la causa, perché value non ne contiene. Un host che scrive file può invece distinguere una modifica da un cambiamento della vista con il valore changed di uno store di replica — vedere on@change.
L’evento non trasporta alcun detail e non si propaga né attraversa il confine dello shadow DOM, quindi restare in ascolto sull’elemento stesso e leggere editor.value nel gestore.

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

changePresetTheme

Viene emesso quando il tema preimpostato viene modificato dal generatore di temi integrato o, dalla versione 4.0.0, da Theme nella Ricerca rapida. Ogni scelta lo emette, compresa quella dell’opzione già in vigore.
Chiamare direttamente setPresetTheme o setSystemAppearance, o attivare o disattivare systemDarkMode, non lo emette.
event.detail è l’oggetto ThemeOptions completo dopo la scelta — { appearance, grayColor, accentColor } — non l’oggetto parziale richiesto. Dalla versione 4.0.0 la sua proprietà appearance è 'system' mentre è scelto System, non l’aspetto chiaro o scuro mostrato, quindi memorizzarlo così com’è e ripassarlo a setPresetTheme.

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

changeLocale

Dalla versione 4.0.0, viene emesso quando si sceglie una lingua nell’editor, dal selettore della lingua di visualizzazione o da Display Language nella Ricerca rapida, entrambi attivati da enableLocalePicker.
Viene emesso dopo che la lingua è stata applicata, a ogni scelta, compresa quella dell’opzione già in vigore. setLocale e setSystemLocale non lo emettono mai, né lo emette un cambiamento delle lingue del browser. Un cambio di lingua non emette alcun change.
event.detail è { locale }, un LocaleOption: 'system' quando è stato scelto System, altrimenti il codice della lingua. L’elemento non ricorda la scelta, quindi memorizzarla e passarla a setLocale al caricamento successivo.
Come change, non si propaga, quindi restare in ascolto sull’elemento stesso.

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

focus

Assegna il focus all’editor.

editor.focus();

blur

Rimuove il focus dall’editor.

editor.blur();

clear

Svuota il documento, rimuovendo ogni tabella, colonna, relazione, indice e memo e, dalla versione 4.0.0, ogni gruppo di tabelle.
Tutte le impostazioni restano, compresi il database, la posizione della vista, il livello di zoom, le opzioni di visualizzazione delle tabelle, ogni blocco con il valore che contiene e gli script Before tables e After tables della scheda Schema SQL, quindi un file svuotato continua a salvare ciò che salvava. Per iniziare invece un nuovo documento, assegnare '' a value o chiamare setInitialValue('').
Viene registrato nella cronologia, quindi può essere annullato, ed emette change. Un annullamento riporta il documento a com’era nell’editor, con ogni impostazione bloccata al suo valore bloccato. Viene ignorato mentre readonly è impostato.

editor.clear();

destroy

Distrugge completamente l’istanza dell’editor, che non può più essere riutilizzata.
Rilascia i listener e le sottoscrizioni dell’editor, e distrugge ogni store condiviso restituito da getSharedStore.
Un batch di stream che uno store condiviso sta ancora trattenendo viene scartato insieme a esso; per inviarlo, chiamare prima flushStreamBuffers di quello store.

editor.destroy();

setKeyBindingMap

Ridefinisce i tasti di scelta rapida.
edit, stop, undo, redo, zoomIn, zoomOut e zoomReset sono fissi e non possono essere ridefiniti.
Vengono scritti solo i ventuno nomi seguenti; qualsiasi altra cosa nell’oggetto viene ignorata, compresi i nomi fissi.
Dalla versione 3.10.0, search può essere ridefinito e findReplace è nuovo. In precedenza, search era fisso. Dalla versione 4.0.0, removeSelection è nuovo. Dalla versione 4.1.0, addTableGroup e groupSelectedTables sono nuovi.
Il valore di un’associazione deve essere un ShortcutOption[]. Una semplice stringa viene ignorata, quindi scrivere { addTable: [{ shortcut: 'Alt+KeyN' }] } anziché { addTable: 'Alt+KeyN' }.
Un array vuoto viene accettato e non associa nulla: setKeyBindingMap({ findReplace: [] }) lascia Ctrl + F (Windows/Linux) o ⌘ + F (Mac) alla pagina, e { search: [] } fa lo stesso per Ctrl + K (Windows/Linux) o ⌘ + K (Mac). Il pulsante Search della barra degli strumenti apre comunque la Ricerca rapida, il pulsante Explorer della barra degli strumenti apre e chiude comunque il pannello Esplora, e la voce Toggle Explorer nella Ricerca rapida e nel menu contestuale dell’area di disegno apre comunque la ricerca del pannello Esplora o lo chiude; nessuno di questi mostra un tasto di scelta rapida per un nome lasciato vuoto. { removeSelection: [] } lascia Delete e Backspace alla pagina, e le voci di eliminazione dei menu della tabella, del memo e del gruppo di tabelle (Delete, Delete selected, Delete column, Delete columns) in quel caso non mostrano alcun tasto di scelta rapida.
Dalla versione 4.1.0, { addTableGroup: [] } lascia Alt + G (Windows/Linux) o ⌥ + G (Mac) alla pagina, e { groupSelectedTables: [] } lascia T e poi G. New Table Group nella barra degli strumenti dell’area di disegno, nel menu contestuale dell’area di disegno e nella Ricerca rapida, Group selected tables nel menu della tabella e Group Selected Tables nella Ricerca rapida continuano a funzionare, senza mostrare alcun tasto di scelta rapida. I tooltip dei pulsanti New Table, New Memo e New Table Group della barra degli strumenti dell’area di disegno indicano la prima combinazione di tasti di addTable, addMemo e addTableGroup, oppure solo il pulsante per un’associazione lasciata vuota.
La chiamata è un’unione parziale: i nomi omessi mantengono i valori predefiniti, e chiamarla due volte mantiene le modifiche precedenti. Non esiste un getter per le associazioni correnti: createKeyBindingMap restituisce i valori predefiniti, non ciò che setKeyBindingMap ha modificato.

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 e, dalla versione 4.1.0, groupSelectedTables cedono il passo al punto di inserimento: mentre il focus è in un input, in una textarea o in un elemento contenteditable, $mod + A seleziona il testo, Space digita uno spazio, Delete e Backspace cancellano il testo, e T e poi G digitano le due lettere, anziché raggiungere l’area di disegno. Per nessuna di queste pressioni viene impedita l’azione predefinita. Qualunque nuova associazione assegnata loro si comporta allo stesso modo.

Dalla versione 4.0.0, removeSelection (Delete o Backspace) rimuove la selezione nella scheda ERD in un solo passo di annullamento, senza chiedere conferma. Quando la tabella con il focus è l’unico elemento selezionato, una o più delle sue colonne sono selezionate e lo zoom ne disegna le righe, rimuove quelle colonne; altrimenti rimuove ogni tabella, memo e gruppo di tabelle selezionato, mantenendo le tabelle di un gruppo. Vedere Eliminazione di tabelle e memo.
Un tasto tenuto premuto rimuove una sola volta, e nulla viene rimosso mentre è aperto un editor di cella, di memo o del nome di un gruppo di tabelle. Al di fuori di un campo di testo e dei pannelli che trattengono le associazioni (vedere createKeyBindingMap), l’azione predefinita della pressione viene impedita in ogni scheda mentre l’editor ha il focus, anche su un pulsante della barra degli strumenti con il focus, e in un editor di sola lettura, dove non rimuove nulla.

Dalla versione 4.1.0, addTableGroup (Alt+KeyG) attiva il disegno New Table Group nella scheda ERD, per cui la successiva pressione del pulsante principale sull’area di disegno disegna il gruppo, e premerlo di nuovo disattiva il disegno, come fa il pulsante New Table Group della barra degli strumenti dell’area di disegno. groupSelectedTables (KeyT KeyG, T e poi G) inserisce le tabelle selezionate in un nuovo gruppo e ne apre l’editor del nome, come fa Group selected tables nel menu contestuale di una tabella. Senza tabelle selezionate non aggiunge nulla; un memo o un gruppo di tabelle selezionato non conta. Vedere Disegnare un gruppo e Raggruppare le tabelle selezionate.
Entrambi agiscono solo dove i menu offrono un gruppo: non mentre readonly è impostato, mentre l’opzione di visualizzazione Table Groups nasconde i gruppi o mentre è aperto un editor di cella, di memo o del nome di un gruppo di tabelle. Come le altre associazioni dell’area di disegno, agiscono solo nella scheda ERD, e non mentre sono aperti la Ricerca rapida, Proprietà tabella, il Visualizzatore differenze, il Viaggio nel tempo, l’anteprima del Layout automatico, Export image o Map Columns. Dove non hanno effetto, l’azione predefinita della pressione viene comunque impedita, a meno che groupSelectedTables non ceda il passo al punto di inserimento. Per addTableGroup viene inoltre interrotta la propagazione, come per focusView e zenMode, quindi un listener keydown della pagina in fase di bubbling non lo riceve mai.

Dalla versione 3.10.0, findReplace ($mod+KeyF) apre Trova e sostituisci. Dalla versione 4.1.0 apre o chiude il pannello Esplora che lo contiene, e la scheda Tasti di scelta rapida lo elenca come Toggle Explorer.
Mentre il pulsante Explorer della barra degli strumenti appare premuto (pannello Esplora aperto nella scheda ERD e non nascosto dalla modalità Zen), chiude il pannello Esplora, a meno che non siano aperti la Ricerca rapida, Proprietà tabella, il generatore di temi, il selettore della lingua di visualizzazione, la finestra di dialogo Export image o Map Columns. Altrimenti chiude quello tra questi che è aperto, passa alla scheda ERD da qualsiasi altra scheda e apre il pannello Esplora con il punto di inserimento nel campo Find e il testo di ricerca selezionato. Un editor troppo stretto per mostrare il pannello Esplora accanto all’area di disegno lo mantiene aperto ma messo da parte, e mostra la notifica Widen the window to show the Explorer. Prima della versione 4.1.0 apriva il pannello mobile Trova e sostituisci, o restituiva il focus al suo campo, e non lo chiudeva mai.
Non cede il passo al punto di inserimento: mentre l’editor ha il focus viene intercettato in ogni scheda, dall’area di disegno o da un input all’interno dell’editor. L’azione predefinita della pressione viene impedita, quindi il browser non apre alcuna barra di ricerca, e la propagazione viene interrotta, quindi nessun listener keydown della pagina in fase di bubbling la riceve. Con un editor di cella o di memo aperto o, dalla versione 4.0.0, un editor del nome di un gruppo di tabelle, l’azione predefinita viene comunque impedita e la propagazione interrotta, ma l’associazione non fa nulla.
Mentre sono aperti il Visualizzatore differenze, il Viaggio nel tempo o l’anteprima del Layout automatico, in qualunque scheda, o mentre un IME sta ancora componendo, non ne viene impedita l’azione predefinita né interrotta la propagazione, quindi la pressione arriva alla ricerca del browser o dell’host. All’interno del pannello Esplora, per una pressione ancora in composizione la propagazione viene interrotta lì, ma l’azione predefinita non viene impedita. Qualunque nuova associazione assegnata a findReplace si comporta allo stesso modo.

focusView agisce solo nella scheda ERD. Con almeno una tabella selezionata, apre la scheda Visualizzazione in modalità Flusso, ristretta a quelle tabelle e a ogni tabella distante una relazione; un memo o un gruppo di tabelle selezionato non conta, e senza tabelle selezionate non fa nulla. Vedere Focalizzare le tabelle.

stop (Escape) nella scheda ERD termina un editor di cella o di memo aperto, o il disegno di una relazione in corso, e lascia la selezione invariata. Dalla versione 4.0.0 termina anche un editor del nome di un gruppo di tabelle, senza scrivere alcun nome, e un disegno New Table Group. L’editor chiama preventDefault() su quella pressione.
Se nessuno di questi è aperto, Escape annulla la selezione e rimuove il focus dalla cella, e la sua azione predefinita non viene impedita. Uscire da una modifica e annullare la selezione richiede quindi due pressioni.
A parte il pannello Esplora, i formati di Import della schermata di benvenuto e i selettori e le finestre di dialogo descritti sotto, l’editor non interrompe mai la propagazione di Escape, quindi una pagina che resta in ascolto di questo tasto, ad esempio per chiudere una propria finestra di dialogo, riceve entrambe le pressioni e può ignorare quella il cui defaultPrevented è true.
Mentre sono aperti la Ricerca rapida, Proprietà tabella, il Visualizzatore differenze, l’anteprima del Layout automatico o il Viaggio nel tempo, Escape chiude invece quello e lascia la selezione invariata. Neppure per quella pressione viene impedita l’azione predefinita.
Dalla versione 4.0.0 anche una finestra di dialogo Export image o Map Columns aperta riceve Escape, chiudendosi e lasciando la selezione invariata. Ciascuna prende il focus quando si apre, e per quel tasto Escape l’azione predefinita viene impedita e la propagazione interrotta.
Dalla versione 4.1.0 un Escape premuto con il focus all’interno del pannello Esplora, nel suo albero, nei suoi campi o nei suoi pulsanti, restituisce il focus all’area di disegno e lascia aperto il pannello Esplora e invariata la selezione. L’editor chiama su di esso sia preventDefault() sia stopPropagation(), quindi non raggiunge mai un listener keydown della pagina in fase di bubbling.
Un Escape sull’area di disegno non chiude mai il pannello Esplora. Prima della versione 4.1.0 un Escape all’interno del pannello Trova e sostituisci lo chiudeva, e uno sull’area di disegno lo chiudeva con la stessa pressione che annullava la selezione.
Dalla versione 4.0.0 il selettore della lingua di visualizzazione e il selettore colori si chiudono con Escape: al loro interno l’azione predefinita viene impedita e la propagazione interrotta, e sull’area di disegno li chiude con la stessa pressione che annulla la selezione, senza che l’azione predefinita venga impedita né la propagazione interrotta.
Un Escape premuto mentre un IME sta ancora componendo appartiene alla composizione. Lascia invariato un editor aperto e la sua azione predefinita non viene impedita, quindi anche una pagina può ignorare una pressione il cui isComposing è true, o il cui keyCode è 229. All’interno del pannello Esplora, per una pressione di questo tipo, come per qualsiasi tasto premuto lì durante la composizione, viene anche interrotta la propagazione, e il focus resta nel campo.
Prima della versione 3.9.2 un solo Escape terminava una modifica o un disegno e insieme annullava la selezione, e l’editor non ne impediva mai l’azione predefinita.

createKeyBindingMap

Dalla versione 3.9.2 il pacchetto esporta createKeyBindingMap() e, insieme a essa, i tipi KeyBindingMap, KeyBindingName e ShortcutOption.
Restituisce le associazioni di tasti predefinite, tutti i 28 nomi compresi quelli fissi, come una nuova mappa a ogni chiamata, quindi modificare la mappa restituita non modifica nient’altro.
È il punto di partenza di ogni editor, e una chiamata a setKeyBindingMap non vi si riflette.
Solo createKeyBindingMap è un’esportazione di runtime; gli altri tre sono tipi.

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', ...

Ogni shortcut è una combinazione di tasti nella sintassi di tinykeys che indica il proprio tasto tramite KeyboardEvent.code, dove $mod è ⌘ su macOS e Control altrove.
Dalla versione 4.0.0 l’editor legge queste combinazioni da sé anziché tramite tinykeys, con la stessa sintassi. Un tasto corrisponde tramite il suo code, o tramite il suo key in maiuscolo o minuscolo, e una pressione corrisponde solo se sono tenuti premuti esattamente i modificatori che indica. AltGraph vale come Control e Alt su Windows e come Alt su macOS. Le pressioni separate da uno spazio formano una sequenza, che ricomincia dopo un secondo senza un keydown.
Dalla versione 4.1.0 un valore predefinito è una sequenza: groupSelectedTables è KeyT KeyG, T e poi G. Una sequenza viene eseguita alla pressione che la completa, e solo quella pressione riceve i suoi preventDefault e stopPropagation, quindi con i valori predefiniti T raggiunge la pagina e solo per G viene impedita l’azione predefinita. I menu, la Ricerca rapida e la scheda Tasti di scelta rapida mostrano una sequenza come un tasto per pressione.
I nomi fissi sono associati a Enter (edit), Escape (stop), $mod+KeyZ (undo), $mod+Shift+KeyZ (redo), $mod+Equal (zoomIn), $mod+Minus (zoomOut) e $mod+Digit0 (zoomReset). edit e stop non hanno flag; gli altri cinque hanno preventDefault e stopPropagation. I restanti nomi hanno i valori predefiniti riportati sopra, tra cui search e findReplace.

L’editor resta in ascolto di queste combinazioni sul proprio elemento, quindi un host che intercetta i tasti prima dell’editor, con tasti di scelta rapida globali o con un listener keydown in fase di cattura, deve lasciarle passare mentre l’editor ha il focus.
Costruire l’elenco di quelle da lasciar passare a partire da createKeyBindingMap(), con le associazioni passate a setKeyBindingMap al posto di quelle predefinite.
Dalla versione 3.10.0 l’elenco include $mod+KeyF, la combinazione di ricerca del browser stesso. Un host che vuole mantenere la propria ricerca su quella combinazione passa setKeyBindingMap({ findReplace: [] }).
Dalla versione 4.0.0 include anche Delete e Backspace senza modificatori. Un host che vuole mantenere quei tasti passa setKeyBindingMap({ removeSelection: [] }).
Dalla versione 4.1.0 include anche Alt+KeyG e la sequenza KeyT KeyG, che arriva come un’unica stringa: dividerla in corrispondenza dello spazio e lasciar passare ogni pressione, compresi T e G senza modificatori, poiché una sequenza a cui manca una pressione non si completa mai. Un host che vuole mantenere quei tasti passa setKeyBindingMap({ addTableGroup: [] }) o setKeyBindingMap({ groupSelectedTables: [] }).

Mentre il focus è all’interno del pannello Esplora, nel suo albero, nei campi Find e Replace o nei suoi pulsanti, findReplace, search, undo, redo, zoomIn, zoomOut e zoomReset passano all’editor, quindi findReplace agisce lì come sull’area di disegno. Ogni altra associazione, così come è impostata al momento, si ferma al pannello Esplora, una sequenza alla sua ultima pressione (un G senza modificatori con i valori predefiniti), e lo stesso vale per i tasti freccia, Tab, Enter, Space, Home, End e qualsiasi tasto premuto mentre un IME sta ancora componendo. A parte Escape, che restituisce il focus all’area di disegno, per questi tasti la propagazione viene interrotta senza che l’azione predefinita venga impedita, quindi agiscono come tasti normali nei campi, nei pulsanti e nell’albero del pannello Esplora e non raggiungono né l’area di disegno né un listener keydown della pagina in fase di bubbling: lì Alt + N non aggiunge alcuna tabella e Delete non rimuove nulla. Per i tasti che spostano il focus, comprimono o portano a una riga dell’albero, e per Enter nel campo Find o Replace, che scorre le corrispondenze o sostituisce, viene impedita anche l’azione predefinita.
Qualsiasi altro tasto, come la combinazione di salvataggio o del riquadro comandi di un host, prosegue verso la pagina come di consueto. Vedere Tasti nel pannello Esplora. Prima della versione 4.1.0 il pannello mobile Trova e sostituisci tratteneva i tasti allo stesso modo, a parte Home, End, l’ultima pressione di una sequenza e Space mentre handTool era associato a un altro tasto.
Dalla versione 4.0.0 il selettore della lingua di visualizzazione trattiene i tasti allo stesso modo: le stesse sette associazioni passano, mentre per ogni altra associazione (dalla versione 4.1.0 una sequenza alla sua ultima pressione), per i tasti freccia e per Tab la propagazione viene interrotta lì senza che l’azione predefinita venga impedita, come per qualsiasi tasto premuto mentre un IME sta ancora componendo. ↑, ↓, Home, End, Enter e Space su una delle sue voci spostano il focus tra le voci o ne scelgono una, e per questi viene impedita anche l’azione predefinita.

$mod

Cambia il tasto Control a seconda dell’ambiente.

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

Tabella dei tasti

Usa le proprietà key, code dell’evento della tastiera.
Usare code per le posizioni assolute e key per i valori di input.

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

Tema

setPresetTheme

Imposta un tema preimpostato.
I valori predefiniti sono appearance: 'dark', grayColor: 'slate' e accentColor: 'indigo'.
Ogni campo viene applicato singolarmente, quindi una chiamata parziale lascia invariati gli altri due. Un valore che non è uno dei nomi seguenti viene ignorato, e la chiamata non genera mai eccezioni.
Dalla versione 4.0.0 la proprietà appearance accetta anche 'system', l’opzione System del generatore di temi. Mostra l’aspetto chiaro o scuro indicato dal sistema operativo, o quello specificato da setSystemAppearance, e cambia quando questo cambia.

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

Dalla versione 4.0.0, specifica se l’aspetto 'system' mostra la variante chiara o quella scura, per un host con proprie varianti chiara e scura, come il tema di un IDE. Finché ne è specificata una, i cambiamenti del sistema operativo vengono ignorati.
null, o qualsiasi valore diverso da 'dark' o 'light', torna a seguire il sistema operativo.
Mentre l’aspetto è 'light' o 'dark' non cambia nulla sullo schermo, ma il valore viene conservato e si applica non appena l’aspetto diventa 'system'. Altrimenti si applica immediatamente. Non emette nulla, e changePresetTheme continua a riportare 'system'.
Gli host VS Code, JetBrains e Obsidian lo chiamano con la propria variante chiara o scura, e di nuovo ogni volta che questa cambia.

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

setTheme

Consente di personalizzare il tema.
Ogni chiamata sostituisce l’intero livello personalizzato, quindi per cambiare un token in aggiunta a una personalizzazione esistente ripassare l’oggetto completo, e passare {} per tornare al tema preimpostato.
Vengono conservati solo i nomi di token seguenti, con valori stringa; tutto il resto viene scartato senza errori.
Il livello personalizzato si sovrappone al tema preimpostato, quindi una successiva chiamata a setPresetTheme sostituisce il tema preimpostato sottostante mentre le personalizzazioni restano.

JavaScript

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

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

  canvasBackground: string;
  canvasBoundaryBackground: string;

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

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

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

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

  relationshipHover: string;

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

  toolbarBackground: string;

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

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

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

  findReplaceError: string;

  mapColumnsError: string;

  schemaSqlWarningBackground: string;
  schemaSqlWarningForeground: string;

  dragSelectBackground: string;
  dragSelectBorder: string;

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

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

  focus: string;
  inputActive: string;

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

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

  explorerBackground: string;
  explorerBorder: string;

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

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

tableShadow e memoShadow sono il colore dell’ombra che tabelle e memo proiettano sull’area di disegno ERD. Il tema preimpostato scuro li lascia transparent, che non proietta alcuna ombra, come accade passando none o una stringa vuota a setTheme; il tema preimpostato chiaro usa rgba(0, 0, 0, 0.18).

Dalla versione 4.0.0 ci sono altri nove token:

• tableGroupHeaderBackground, tableGroupBackground e tableGroupBorder colorano la barra del titolo, il corpo e il contorno di un gruppo di tabelle privo di un colore proprio.
• toastSuccess e toastError colorano l’indicatore di una notifica che riporta l’esito di un’operazione.
• findReplaceError e mapColumnsError colorano gli errori mostrati da Trova e sostituisci e dalla finestra di dialogo Associa colonne. In precedenza Trova e sostituisci usava diffDeleteForeground, quindi personalizzare quel token non lo ricolora più.
• schemaSqlWarningBackground e schemaSqlWarningForeground colorano gli avvisi nelle opzioni della scheda Schema SQL.

Dalla versione 4.1.0 ci sono altri nove token:

• treeBackground, treeRowHover, treeRowCurrent, treeMuted e treeMatch colorano l’albero condiviso dal pannello Esplora e dal Visualizzatore differenze: il suo sfondo, che riempie anche i campi Find e Replace del pannello Esplora; una riga sotto il puntatore, la riga raggiunta con la tastiera mentre l’albero ha il focus e un pulsante sotto il puntatore nell’intestazione e nella ricerca del pannello Esplora; la riga della corrispondenza corrente della ricerca; il testo attenuato come conteggi, tipi di dati e frecce di compressione; e l’evidenziazione dietro il testo trovato da una ricerca.
• explorerBackground ed explorerBorder colorano il pannello Esplora e le sue linee: il bordo accanto all’area di disegno, la linea sotto la ricerca e i bordi dei suoi campi e dei pulsanti che Search In espande. explorerBorder disegna anche il bordo dell’albero del Visualizzatore differenze, la linea sotto il suo campo Filter by name e il bordo di quel campo. Le icone delle chiavi del pannello Esplora usano keyPK, keyFK e keyPFK.
• diffModifyForeground e diffRenameForeground colorano ciò che il Visualizzatore differenze contrassegna come modificato e rinominato, nel suo albero e su entrambi i documenti. diffModifyForeground contorna anche una tabella, un memo o un gruppo di tabelle che è stato spostato, ridimensionato, ricolorato o raggruppato diversamente, qualunque altra cosa sia cambiata al suo interno, e disegna il connettore di una chiave esterna modificata.

diffInsertForeground e diffDeleteForeground ora colorano ciò che il Visualizzatore differenze contrassegna come aggiunto e rimosso, nel suo albero e sul documento che lo contiene, allo stesso modo in testo, contorni e connettori. diffInsertBackground, diffDeleteBackground, diffCrossBackground e diffCrossForeground sono stati rimossi nella versione 4.1.0, poiché il Visualizzatore differenze non riempie più le celle. setTheme li scarta come qualsiasi altro nome assente da Theme, e i loro hook, --erd-editor-diff-insert-background, --erd-editor-diff-delete-background, --erd-editor-diff-cross-background e --erd-editor-diff-cross-foreground, non vengono più letti.

Variabili CSS

Ogni token di Theme ha un hook CSS corrispondente, chiamato --erd-editor- seguito dalla chiave in kebab-case: grayColor10 è --erd-editor-gray-color-10, keyPK è --erd-editor-key-pk e keyPFK è --erd-editor-key-pfk.
Gli hook vengono ereditati all’interno dell’editor, quindi impostarli dove si desidera che si applichino. Su :root applicano il tema a ogni editor della pagina; sull’elemento stesso lo applicano solo a quello.

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

Dalla versione 3.4.0 i token con l’errore di ortografia dargSelect si scrivono dragSelect, e i loro hook sono passati da --erd-editor-darg-select-background e --erd-editor-darg-select-border a --erd-editor-drag-select-background e --erd-editor-drag-select-border. Un foglio di stile che usa ancora i vecchi nomi viene ignorato.

Valori predefiniti del tema

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

Lingua di visualizzazione

Dalla versione 4.0.0 il testo dell’editor stesso — menu, pannelli, finestre di dialogo, Ricerca rapida, notifiche e le parole che disegna sul diagramma come unnamed, esportazioni di immagini comprese — è disponibile in 25 lingue. I nomi di tabelle e colonne, l’SQL, i tipi di dati e il codice generato non vengono mai tradotti. Vedere Lingua e tema.
Prima che venga chiamato setLocale o scelta una lingua, l’editor mostra l’inglese, oppure segue 'system' mentre enableLocalePicker è attivo.
L’editor imposta lang e dir sulla propria radice all’interno dello shadow root chiuso, mai sull’elemento host o sulla pagina, quindi una pagina da destra a sinistra non capovolge l’editor e una lingua da destra a sinistra non capovolge la pagina. Ebraico, arabo e persiano dispongono l’interfaccia dell’editor da destra a sinistra; il diagramma in sé non viene mai specchiato. Dalla versione 4.1.0 il pannello Esplora resta a sinistra dell’area di disegno in ogni lingua, con le sue righe che si leggono da destra a sinistra in queste tre.
Il pacchetto esporta i tipi LocaleCode (uno dei codici seguenti) e LocaleOption.

type LocaleOption = LocaleCode | 'system';

Codice	Visualizzato come	Lingua
id-ID	Bahasa Indonesia	indonesiano
de-DE	Deutsch	tedesco
en	English	inglese
es-ES	Español	spagnolo
eu-ES	Euskara	basco
fr-FR	Français	francese
it-IT	Italiano	italiano
nl-NL	Nederlands	olandese
pl-PL	Polski	polacco
pt-PT	Português	portoghese
pt-BR	Português Brasileiro	portoghese brasiliano
ro-RO	Română	rumeno
sk-SK	Slovenčina	slovacco
sl-SI	Slovenščina	sloveno
sv-SE	Svenska	svedese
tr-TR	Türkçe	turco
ru-RU	Русский	russo
uk-UA	Українська	ucraino
he-IL	עברית	ebraico
ar-SA	العربية	arabo
fa-IR	فارسی	persiano
ja-JP	日本語	giapponese
zh-CN	简体中文	cinese semplificato
zh-TW	繁體中文	cinese tradizionale
ko-KR	한국어	coreano

setLocale

Imposta la lingua di visualizzazione: 'system' o uno dei codici riportati sopra. Qualsiasi altro valore, come un semplice 'ko', un codice sconosciuto o un valore che non è una stringa, viene ignorato senza errori.
Si applica prima di restituire il controllo, quindi una lingua impostata prima che l’elemento venga aggiunto è presente già nel suo primo frame.
Non emette nulla, né changeLocale né change, e non tocca né value, né la cronologia delle modifiche, né uno store condiviso.
La scelta rimane, che enableLocalePicker sia attivo o disattivato, e setLocale('system') segue il sistema anche con il selettore disattivato.
L’editor non memorizza nulla. Per conservare la scelta di un utente, restare in ascolto di changeLocale e ripassarla al caricamento successivo.

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

setSystemLocale

Specifica la lingua rappresentata da 'system', come tag BCP 47, per un host con una propria lingua di visualizzazione. Gli host VS Code, JetBrains e Obsidian lo chiamano con la propria lingua di visualizzazione.
Il tag viene ripulito dagli spazi iniziali e finali. null, una stringa vuota o un valore che non è una stringa torna a navigator.languages del browser, che l’editor segue man mano che cambia.
Conta solo mentre l’opzione in vigore è 'system', e si applica immediatamente. La voce System del selettore indica la lingua in cui si risolve.
Il tag, o ciascuna delle lingue del browser in ordine, si risolve nella prima lingua disponibile nell’editor in base al sottotag della lingua, ignorando maiuscole/minuscole e trattini bassi: de-AT dà de-DE ed en-GB dà en. Il cinese si risolve in base alla scrittura, con Hant che dà zh-TW e Hans che dà zh-CN, e in mancanza di questa in base alla regione, con TW, HK e MO che danno zh-TW e qualsiasi altra zh-CN. pt dà pt-BR a meno che non sia indicata una regione diversa da BR. Quando non c’è alcuna corrispondenza, l’editor mostra l’inglese.

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

setSchemaSQL

Carica un file Schema SQL.
Per impostazione predefinita sostituisce il documento corrente anziché unirsi a esso; vedere mode più avanti. Le impostazioni esistenti vengono mantenute, compresi ogni blocco e il relativo valore bloccato, tranne la posizione della vista e il livello di zoom, e le tabelle vengono disposte una volta letto il file, in righe a meno che placement, più avanti, non richieda diversamente. Con Viewport bloccato, value scrive poi la vista da cui parte l’importazione, l’origine 0, 0 al livello di zoom 1. Un documento importato in un elemento a cui non è mai stato assegnato un valore ha quindi tutti i blocchi attivi, come un nuovo documento.
Viene registrato nella cronologia, abilitando Undo, Redo, ed emette change. Una stringa vuota viene ignorata, e la chiamata non fa nulla mentre readonly è impostato.
setSchemaGraphQL, setSchemaDBML e setSchemaAML si comportano allo stesso modo, e i loro parser non falliscono mai: un testo che non riescono a leggere carica un documento vuoto anziché generare un errore.
Dalla versione 4.0.0 tutti e quattro accettano un secondo argomento facoltativo, { placement, mode }:

• placement: 'grid', il valore predefinito, dispone subito le tabelle in righe, come in precedenza, e la chiamata non restituisce nulla.
• placement: 'auto' dispone prima le tabelle in base alle loro relazioni, come fa Import nell’editor, e restituisce una Promise che si risolve una volta che l’importazione è stata applicata come un solo passo di annullamento. Meno di due tabelle, nessuna relazione, un layout che non riesce, una pagina senza SharedWorker o Cancel sulla notifica Placing tables le dispongono invece in righe. Un caricamento nel frattempo — un’altra importazione che sostituisce il documento, l’assegnazione di value, setInitialValue(), clear(), il caricamento di un collaboratore, o l’annullamento o la ripetizione di un caricamento o di clear() — prevale su di essa, e la Promise si risolve senza che sia stato caricato nulla. Le importazioni disposte in questo modo vengono applicate nell’ordine in cui sono iniziate.
• mode: 'replace', il valore predefinito, sostituisce il documento. mode: 'append' aggiunge il file sotto il diagramma come fa Importa e aggiungi, lasciando invariata ogni tabella già presente e ogni impostazione tranne la scheda e la posizione della vista. Da un’altra scheda viene prima mostrata la scheda ERD. Le nuove tabelle, e i gruppi di tabelle portati da un file DBML mentre i gruppi di tabelle sono visibili, diventano la selezione, e la vista scorre fino a loro a meno che non siano già ben visibili, secondo la regola che ogni salto segue dalla versione 4.1.0 — vedere Dove porta un salto. Un solo annullamento rimuove l’intera aggiunta. Un testo che non riesce a leggere non aggiunge nulla e lascia il documento invariato.

Mentre readonly è impostato, una sostituzione viene ignorata, un’aggiunta non aggiunge nulla e una chiamata con placement: 'auto' si risolve immediatamente.
Dalla versione 3.10.0, setSchemaSQL legge il file in base al database corrente del documento: con Databricks selezionato, le stringhe tra apici singoli seguono gli escape con barra rovesciata di Spark. Vedere Commenti.
Dalla versione 3.10.0, setSchemaSQL legge un UNIQUE su due o più colonne come un unico indice univoco anziché come un flag Univoco su ciascuna colonna. Vedere Chiavi univoche e indici.
Dalla versione 3.10.0 le importazioni SQL, DBML e AML mantengono le azioni ON DELETE e ON UPDATE delle chiavi esterne che leggono.
Dalla versione 4.0.0, setSchemaSQL mantiene l’intera espressione DEFAULT di una colonna, legge ADD DEFAULT … FOR di SQL Server e i suoi commenti MS_Description, trasforma le colonne serial e identity di PostgreSQL in Incremento automatico, mantiene UNSIGNED e ZEROFILL in un tipo di dati e legge una chiave primaria che ALTER TABLE … ADD PRIMARY KEY contrassegna come CLUSTERED, NONCLUSTERED o USING BTREE. Vedere Schema SQL.
Per la sintassi accettata da ciascun parser, vedere Importare o esportare file.

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

Carica un documento GraphQL SDL.
Le definizioni dei tipi oggetto diventano tabelle, e un campo il cui tipo è un’altra tabella diventa una relazione.

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

setSchemaDBML

Carica un file DBML, il formato usato da dbdiagram.io e dbdocs.
Dalla versione 4.0.0 ogni TableGroup diventa un gruppo di tabelle, e l’impostazione headercolor di una tabella ne diventa il colore. Vedere DBML.

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

setSchemaAML

Carica un file AML (Azimutt Markup Language). Sono accettate sia la sintassi attuale sia la vecchia sintassi v1.
Dalla versione 4.0.0 il colore di un’entità, uno dei nomi di colore di Azimutt o un valore esadecimale tra virgolette, diventa il colore della sua tabella. Vedere AML.

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

setSchemaJSON

Dalla versione 4.0.0, carica un documento .erd.json, come il testo restituito da value.
Nella modalità predefinita mode: 'replace' carica il documento come fa l’assegnazione di value: viene registrato nella cronologia, emette change e assume i blocchi del documento allo stesso modo. A differenza di value, una stringa vuota o un valore che non è una stringa viene ignorato anziché avviare un nuovo documento. Un testo che non è JSON svuota il documento, come accade con value.
mode: 'append' aggiunge le tabelle, le relazioni, gli indici, i memo e i gruppi di tabelle del documento sotto il diagramma con nuovi id, mantenendo le loro posizioni reciproche e tralasciando le impostazioni del documento, come fa Importa e aggiungi con un file json. Un testo che non riesce a leggere, o un documento senza tabelle né memo, non aggiunge nulla. Altrimenti viene applicato come un’aggiunta di setSchemaSQL, con i nuovi memo e gruppi di tabelle selezionati insieme alle tabelle, ciascun tipo mentre è visibile.
Restituisce il controllo una volta applicato il documento, e viene ignorato mentre readonly è impostato.

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

getSchemaSQL

Esporta lo stato corrente dell’editor come Schema SQL.
Se databaseVendor non è specificato, opera in base al fornitore attualmente impostato. Un nome non presente nell’elenco seguente viene trattato allo stesso modo, senza generare errori.
I nomi vengono delimitati con il tipo di delimitatore mostrato dall’editor. Mentre Bracket Type è bloccato, può differire da quello salvato da value, che è quello con cui delimita i nomi erd_read di un agente di programmazione.
Dalla versione 4.0.0 un argomento facoltativo options sceglie le istruzioni e l’intestazione, come fanno le opzioni della scheda Schema SQL. SchemaSQLOptions viene esportato come tipo.

• statements: 'create', il valore predefinito; 'ifNotExists', che scrive IF NOT EXISTS su MySQL, MariaDB, PostgreSQL, SQLite e Databricks e ripiega su 'create' altrove; oppure 'recreate', che elimina le tabelle prima di crearle, mentre Snowflake scrive invece CREATE OR REPLACE TABLE.
• header: 'none', il valore predefinito; 'use', che passa al database o allo schema del documento; oppure 'createAndUse', che prima lo crea se non esiste e poi vi passa. Un database privo di quello richiesto ripiega come fa la scheda: Oracle scrive 'use' per 'createAndUse', PostgreSQL non scrive alcuna intestazione per 'use' e SQLite non ne scrive nessuna. Un’intestazione viene scritta solo se il nome del database del documento è un identificatore semplice — lettere ASCII, cifre e _, senza iniziare con una cifra.

Un’opzione omessa, o con un valore sconosciuto, viene letta come il suo valore predefinito, quindi una chiamata senza opzioni scrive semplici istruzioni CREATE senza intestazione, come in precedenza.
Dalla versione 4.0.0 l’output include sempre gli script Before tables e After tables del documento, nell’ordine intestazione, script prima delle tabelle, istruzioni di eliminazione, tabelle, script dopo le tabelle. Le scelte Statements, Header e Tables della scheda Schema SQL non influiscono mai su questa chiamata, che scrive sempre l’intero documento.
Dalla versione 3.10.0 ogni chiave esterna riporta le clausole ON DELETE e ON UPDATE della relazione. Una clausola viene scritta solo quando la sua azione è impostata e il fornitore la accetta, quindi un’azione che quel fornitore non supporta viene omessa e si applica il suo valore predefinito. Dalla versione 4.0.0 Snowflake accetta solo NO ACTION. Per ciò che scrive ciascun database, vedere ON DELETE e ON UPDATE.
Dalla versione 3.10.0 un apice singolo all’interno del commento di una tabella o di una colonna viene sottoposto a escape, quindi un commento come it's non interrompe più l’istruzione. Ogni fornitore che scrive i commenti come stringhe letterali lo raddoppia, tranne Databricks, che antepone una barra rovesciata a ogni apice e a ogni barra rovesciata. SQLite continua a scrivere i commenti come righe --.
Dalla versione 4.0.0 diversi database scrivono inoltre in modo diverso i nomi delle chiavi, i valori predefiniti e l’incremento automatico. Vedere Cosa scrive il DDL.

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

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

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

getSharedStore

Restituisce uno store per la modifica collaborativa in tempo reale.
config è { getNickname?, mouseTracker?, focusTracker? }. Entrambi i tracker valgono true per impostazione predefinita: mouseTracker trasmette agli altri il cursore di questo editor, e focusTracker trasmette la sua cella con il focus, la selezione e il riquadro di trascinamento.
Vedere Modifica collaborativa.

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

setDiffValue

Apre il Visualizzatore differenze, confrontando il documento attualmente aperto con quello passato.
Non restituisce nulla e non modifica il documento, quindi chiudere il visualizzatore lascia l’editor esattamente com’era.
Un valore vuoto, o qualsiasi valore che non sia una stringa, viene confrontato con un documento vuoto.
È la stessa vista sovrapposta che apre la voce Visualizzatore differenze del menu contestuale dell’area di disegno.
Dalla versione 4.1.0 abbina il contenuto dei due documenti prima in base all’id e solo dopo in base a ciò che ciascun elemento conserva, come il nome di una tabella o il testo di un memo — vedere Cosa viene confrontato. Rispetto a una versione precedente dello stesso documento, come una revisione Git del suo file, una ridenominazione appare quindi come un unico elemento rinominato; rispetto a un documento con id diversi, appare come una rimozione e un’aggiunta. Il visualizzatore elenca le modifiche in un albero accanto ai due documenti e le contrassegna a colori anziché riempire le celle.

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