ErdEditorElement

O editor é um simples HTMLElement.
A sua definição de tipo é a seguinte.

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;
}

O editor é renderizado num shadow root fechado, pelo que editor.shadowRoot é null e os estilos da página não entram nem saem.
Nada no seu interior pode ser alcançado com um seletor — em vez disso, aplique estilos através de setTheme e das propriedades personalizadas --erd-editor-*.

readonly, system-dark-mode, enable-theme-builder, enable-locale-picker e enable-welcome-screen são os únicos atributos, e os cinco têm false como predefinição. Os dois últimos são novos na 4.0.0. Cada um lê o seu valor como descrito em readonly.

A partir da 4.1.0, o separador ERD tem um explorador, uma árvore do diagrama ancorada à esquerda da tela, com Localizar e substituir no topo. Nenhum atributo, propriedade, método ou evento o abre, o fecha ou indica o seu estado: abre-se a partir do botão Explorer da barra de ferramentas, da entrada Toggle Explorer na pesquisa rápida ou no menu de contexto da tela, ou com a associação findReplace.
Todos os elementos começam com o explorador fechado. O seu estado aberto ou fechado, a sua largura, o que tem recolhido e a sua pesquisa duram tanto como o elemento, ao longo das mudanças de separador e de todos os carregamentos, setInitialValue incluído, e nunca ficam em value, em runtimeValue, no histórico de anulação nem num armazenamento partilhado.

readonly

Define a capacidade de edição do editor.
Enquanto estiver definido, a atribuição de value, clear(), setSchemaSQL(), setSchemaGraphQL(), setSchemaDBML(), setSchemaAML(), setSchemaJSON(), anular e refazer são todos ignorados, e o evento change nunca é emitido. Em vez disso, carregue um documento com setInitialValue.
A visualização continua a funcionar: o zoom, a deslocação da vista, a ferramenta mão, o modo zen, o separador da tela, o separador Visualização nos seus dois modos, incluindo focar em tabelas, a base de dados e as definições de saída do SQL e do Gerador de código continuam todos a aplicar-se, pelo que um visualizador só de leitura pode continuar a exportar SQL para outra base de dados ou a ler o código gerado.
A partir da 4.1.0, o explorador também se abre, e escolher uma das suas linhas leva ao que essa linha representa, tal como num editor editável. Localizar e substituir, no seu topo, apenas localiza, sem a seta Toggle Replace nem a linha Substituir, e ir para uma correspondência continua a trazê-la para a vista e a selecioná-la. O painel tem o título Explorer, e a dica do botão da barra de ferramentas é Explorer (Ctrl + F) (Windows/Linux) ou Explorer (⌘ + F) (Mac) em todos os editores. Da 3.10.0 à 4.0.0, Localizar e substituir abria-se como um painel flutuante só de localização com o título Find.
O painel Propriedades da tabela continua a abrir-se e, a partir da 3.10.0, mostra um distintivo Read only ao lado do título, e o seu separador Indexes não permite edições — consulte Propriedades da tabela.
A partir da 4.0.0, um editor só de leitura não oferece as opções Import and Add, New Table Group, Group selected tables, Remove from group (consulte Grupos de tabelas) nem Map Columns, e não mostra o ecrã de boas-vindas. Os botões de bloqueio do separador Definições não alteram nada, e os scripts Before tables e After tables do separador Esquema SQL não podem ser editados.
A partir da 4.1.0, também não mostra os botões New Table, New Memo nem New Table Group na barra de ferramentas da tela, e as associações addTableGroup e groupSelectedTables não fazem nada.
As escolhas This window only do separador Esquema SQL, Statements, Header e Tables, nunca são guardadas e continuam a aplicar-se, e o mesmo acontece com a caixa de diálogo Export image, o criador de temas e o seletor de idioma. Uma escolha no criador de temas ou no seletor de idioma continua a emitir changePresetTheme ou changeLocale.
Um atributo sem valor, ="" e ="true" são todos lidos como true. ="false" é lido como false, tal como qualquer outra cadeia — incluindo a expressão idiomática HTML readonly="readonly".

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

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

systemDarkMode

Determina se o editor se sincroniza automaticamente com o modo escuro/claro do sistema.
A partir da 4.0.0, ativá-lo define o appearance do tema como 'system', tal como setPresetTheme({ appearance: 'system' }). O editor passa então a mostrar o claro ou o escuro que o sistema operativo indica, ou o que setSystemAppearance indicar, e muda quando esse valor muda.
Uma chamada posterior a setPresetTheme com 'light' ou 'dark', ou a escolha de Light ou Dark no criador de temas ou na pesquisa rápida, substitui 'system' e mantém-se: a mudança seguinte do sistema operativo já não a substitui, embora systemDarkMode continue a ser true. Antes da 4.0.0, a mudança seguinte do sistema operativo substituía-a.
Desativá-lo enquanto o aspeto é 'system' mantém o claro ou o escuro mostrado nesse momento. Desativá-lo depois de o aspeto ter deixado de ser 'system' deixa-o como está.
Alterá-lo não emite nenhum evento.

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

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

enableThemeBuilder

Determina se é fornecida uma interface para definir facilmente temas predefinidos.
Mostra o botão Theme da barra de ferramentas, que abre o criador de temas com os campos Accent color, Gray color e Appearance. A partir da 4.0.0, a opção Appearance oferece System além de Light e Dark e, enquanto esta propriedade está ativada, a pesquisa rápida apresenta a entrada Theme com System, Light e Dark. Consulte Idioma e tema.

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

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

Mudar o tema predefinido a partir deste painel, ou da pesquisa rápida, emite o evento changePresetTheme.

enableLocalePicker

A partir da 4.0.0, determina se é fornecida uma interface para escolher o idioma de apresentação do editor.
Mostra o botão Display Language da barra de ferramentas, a seguir ao botão Theme quando ambos são mostrados. O botão abre o seletor de idioma, e a pesquisa rápida apresenta a entrada Display Language. Ambos oferecem System e os 25 idiomas — consulte Idioma e tema.
Também decide o que um editor mostra antes de setLocale ser chamado ou de um idioma ser escolhido: 'system' enquanto está ativado, inglês enquanto está desativado, pelo que um elemento que não configura nada mantém o inglês que sempre mostrou. Ativá-lo ou desativá-lo alterna de imediato entre os dois. Depois de um idioma ter sido definido ou escolhido, essa escolha mantém-se, esteja ele ativado ou desativado.
Defina-o antes de o elemento ser anexado para que o primeiro fotograma siga 'system'.
Uma escolha emite changeLocale.

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

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

enableWelcomeScreen

A partir da 4.0.0, determina se um diagrama vazio recebe o leitor com o ecrã de boas-vindas.
Fica sobre o separador ERD enquanto o documento não tem nenhuma tabela, nenhuma nota visível e nenhum grupo de tabelas visível. Não é mostrado enquanto readonly está definido, no modo zen ou enquanto o painel Propriedades da tabela, o visualizador de diferenças, a viagem no tempo ou a pré-visualização da disposição automática estão abertos. A primeira tabela, nota visível ou grupo de tabelas visível fá-lo desaparecer, e uma anulação que regresse a um diagrama vazio volta a mostrá-lo.
As suas linhas New Table, New Memo e Command Palette mostram a primeira combinação de addTable, addMemo e search tal como setKeyBindingMap as deixou, e nenhuma para um nome deixado vazio. As suas setas apontam para os botões Theme e Display Language apenas onde enableThemeBuilder e enableLocalePicker os mostram.
No seu menu, ↑, ↓, Home e End percorrem as linhas, com a ação predefinida cancelada e a propagação interrompida. Enter e Space têm a propagação interrompida, mas não a ação predefinida cancelada, pelo que a linha com o foco os recebe, e Escape nos formatos de Import volta atrás, com a ação predefinida cancelada e a propagação interrompida. Todas as outras teclas chegam ao editor e à página como habitualmente.
Não altera nada no documento, pelo que deixa value como estava e não emite nenhum change.
Ative-o depois de setInitialValue ter carregado o documento, como fazem os hosts oficiais, para que o ecrã nunca apareça momentaneamente sobre um ficheiro que ainda está a carregar.

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

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

value

getter

Obtém o documento atual como uma cadeia JSON, no esquema que o editor define.
A partir da 4.0.0, é a forma de armazenamento, o documento tal como um ficheiro o guarda, que é também o que a exportação json escreve e o que os hosts oficiais guardam. Contém apenas as entidades existentes, sem as removidas, sem a ordem de sobreposição e sem o que o editor calcula por si, como as larguras medidas, as marcas de chave e as âncoras das relações. As chaves das suas entidades seguem uma ordem fixa, está indentado com dois espaços e termina com uma quebra de linha, pelo que o mesmo documento dá sempre os mesmos bytes.
Cada definição cujo bloqueio está ativado é escrita com o valor em que está bloqueada, e não como o ecrã a mostra. O bloqueio Viewport abrange originX, originY e zoomLevel, e os bloqueios Canvas Type, Language, Table Name Case, Column Name Case e Bracket Type abrangem cada um a sua própria definição. Todas as outras definições são escritas tal como estão, e lockSettings é sempre escrito. Consulte Definições para conhecer os bits.
Um documento novo tem todos os bloqueios ativados, quer seja o que um elemento mostra antes de lhe ser atribuído um valor, quer seja um carregado a partir de um valor em branco. O seu value mantém a origem em 0, 0, o nível de zoom em 1, o separador ERD e a linguagem do Gerador de código, os formatos dos nomes e o tipo de delimitador predefinidos até que o bloqueio correspondente seja desativado.
Antes da 4.0.0, devolvia o documento inteiro tal como o editor o tinha, com ignoreSaveSettings aplicado. O documento tal como o editor o tem é agora runtimeValue, e ignoreSaveSettings já não é lido nem escrito.

const data = editor.value;

setter

Carrega um estado do editor guardado anteriormente. Substitui o documento inteiro — o atual é limpo primeiro.
Tal como clear(), setInitialValue() e os métodos setSchema* no seu mode: 'replace' predefinido, também descarta a vista Flow do separador Visualização: a sua disposição, as tabelas a que está restrita, a apresentação das linhas, o zoom e a deslocação da vista. Uma adição (mode: 'append') não a descarta.
Fica registado na lista do histórico, o que permite Undo, Redo, e emite change.
Aceita a forma de armazenamento, um runtimeValue ou um ficheiro guardado por uma versão anterior.
Uma cadeia em branco, ou qualquer valor que não seja uma cadeia, carrega um documento novo em vez de gerar um erro, por isso valide o valor antes de o atribuir.
Esse documento novo é o mesmo que setInitialValue('') inicia: vazio, com as definições predefinidas e, a partir da 4.0.0, com todos os bloqueios ativados. Na 3.10.x, não guardava nem a posição de deslocamento nem o nível de zoom, e antes disso guardava ambos.
Um armazenamento partilhado retransmite esse carregamento aos colaboradores com o JSON completo do documento novo, pelo que todos os pares, incluindo um de uma versão mais antiga, carregam o mesmo documento.
A partir da 4.0.0, os bloqueios do documento carregado, e os valores bloqueados que value passa a escrever, vêm do texto, e a vista fica onde o texto a coloca, ou sobre o diagrama quando nenhuma parte dele está aí desenhada. Para cada uma das outras definições que o texto bloqueia — o separador, a linguagem do Gerador de código, os formatos dos nomes e o tipo de delimitador — o editor continua a mostrar o que mostrava antes do carregamento. Uma definição que o texto deixa desbloqueada assume o valor do texto. Pelo contrário, setInitialValue assume todos os valores que o texto contém; consulte também essa secção no caso de um texto que não indique nenhum bloqueio.
Um texto que não seja JSON, como um ficheiro que ficou com marcadores de conflito de fusão, também não gera um erro: o documento é esvaziado, as suas definições ficam como estavam e o erro de análise é registado na consola.
É ignorado enquanto readonly está definido; utilize setInitialValue para carregar num editor só de leitura.

editor.value = 'json...';

runtimeValue

A partir da 4.0.0, obtém o documento tal como este editor o tem, como uma cadeia JSON. Não tem setter, pelo que atribuir-lhe um valor gera uma exceção em código no modo estrito.
Inclui o que value deixa de fora: as entidades removidas e a respetiva ordem, a ordem de sobreposição, as larguras medidas, as marcas de chave, as âncoras das relações e as sequências. Também aqui as definições bloqueadas são escritas com os seus valores bloqueados.
Utilize-o para inicializar, através do respetivo setInitialValue, outro editor que se junta a uma sessão já em curso, como um colaborador ou uma segunda vista do mesmo documento. Uma anulação de uma remoção que a sessão envie mais tarde restaura então aí a entidade completa, enquanto um editor inicializado a partir de value não tem nenhuma entidade removida e restaura em vez disso uma tabela vazia e sem nome. Consulte Edição colaborativa.
Já nada recolhe as entidades removidas, pelo que permanecem nele até o documento voltar a ser aberto a partir do seu ficheiro.
Nunca o escreva num ficheiro: guarde value, que o JSON Schema aceita, ao contrário deste.

otherEditor.setInitialValue(editor.runtimeValue);

setInitialValue

Carrega um estado do editor guardado anteriormente. O carregamento em si não fica registado na lista do histórico, pelo que não pode ser anulado, e não é emitido nenhum evento change.
Também limpa o histórico de anulação, pelo que nada do que foi feito antes do carregamento pode ser anulado ou refeito sobre o documento carregado.
Aceita a forma de armazenamento, um runtimeValue ou um ficheiro guardado por uma versão anterior e, ao contrário da atribuição de value, assume todas as definições que o texto contém, incluindo o separador e as definições de código.
Uma cadeia em branco, ou qualquer valor que não seja uma cadeia, carrega um documento novo em vez de gerar um erro, pelo que setInitialValue('') inicia um diagrama em branco.
A partir da 4.0.0, esse documento novo, que é também o que um elemento mostra antes de lhe ser atribuído qualquer valor, tem todos os bloqueios ativados. Deslocar, fazer zoom, mudar de separador e alterar a linguagem do Gerador de código, os formatos dos nomes ou o tipo de delimitador deixam value como estava e não emitem nenhum change. Na 3.10.x, não guardava nem a posição de deslocamento nem o nível de zoom, e antes disso guardava ambos.
Um documento carregado a partir de texto mantém os bloqueios que indica. Um que não indique nenhum — qualquer ficheiro guardado antes da 4.0.0, independentemente do que dizia o seu ignoreSaveSettings, e um ficheiro .vuerd v2 — abre-se com todos os bloqueios ativados, com a definição Viewport bloqueada na origem 0, 0 e no nível de zoom 1, no separador ERD, e com a linguagem, os formatos dos nomes e o tipo de delimitador tal como os guardou.
Em ambos os casos, a vista abre-se na vista do documento — a que o texto guardou quando indica os seus bloqueios, a origem 0, 0 com o nível de zoom 1 quando não indica nenhum — ou sobre o diagrama quando nenhuma parte dele está aí desenhada. Uma definição Viewport bloqueada continua a manter os seus valores bloqueados em value.
A partir da 4.0.0, também descarta o estado de colaboração do documento que tinha antes, e um armazenamento partilhado deste editor que já esteja subscrito volta a pedir o seu estado aos outros editores, pelo que um editor recarregado numa sessão em curso fica atualizado. Inicialize esse editor com o runtimeValue de outro editor.
Um texto que não seja JSON também não gera um erro: o documento é esvaziado, as suas definições ficam como estavam e o erro de análise é registado na consola.
Ao contrário da atribuição de value, não é bloqueado por readonly, pelo que é a forma de carregar um documento num visualizador só de leitura.

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

Carregar ao iniciar, guardar a cada alteração.

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

Eventos

change, changePresetTheme e changeLocale são os três únicos eventos públicos; changeLocale é novo na 4.0.0.
O elemento também despacha em si próprio eventos internos @dineug/erd-editor/internal-* para as suas próprias ligações internas; esses não fazem parte da API.

change

Quando há alterações no editor, é emitido um evento.
O evento tem um debounce de 200 ms e não é emitido enquanto readonly é true.
É disparado por qualquer alteração do documento — uma edição na interface, a atribuição de value, clear(), cada um dos métodos setSchema* e, a partir da 4.0.0, setSchemaJSON() e a opção Import and Add. setInitialValue não o emite.
Nada do que se faz no modo Flow do separador Visualização o emite — o zoom, a deslocação da vista, mover cartões, o botão Tidy Up, a apresentação das linhas ou restringir a vista a partir de um cartão — já que nada disso é uma alteração do documento.
A partir da 4.0.0, uma alteração de uma definição cujo bloqueio está ativado também não o emite, porque só altera o ecrã e nunca value: um deslocamento ou um zoom da tela ERD enquanto a definição Viewport está bloqueada, uma mudança de separador enquanto a definição Canvas Type está bloqueada e uma alteração da linguagem do Gerador de código, do formato do nome da tabela, do formato do nome da coluna ou do tipo de delimitador enquanto o respetivo bloqueio está ativado. Apenas essas alterações ficam de fora, pelo que um lote que também edita o documento continua a emiti-lo. Bloquear ou desbloquear uma definição emite-o.
Todos os bloqueios estão ativados num documento novo e em qualquer ficheiro guardado antes da 4.0.0, pelo que, por predefinição, deslocar, fazer zoom e mudar de separador não emitem nada. Isto abrange focar em tabelas a partir do separador ERD, o botão de ligação externa do cartão que leva do Flow de volta ao separador ERD, ir para uma linha do explorador ou para uma correspondência da pesquisa e abrir o explorador ou ir para um resultado da pesquisa rápida a partir de outro separador. Cada uma destas ações emite um change apenas enquanto o bloqueio que a abrange está desativado: Canvas Type para a mudança de separador e Viewport para o deslocamento que um botão do cartão, um resultado da pesquisa rápida, uma linha do explorador ou uma correspondência da pesquisa também provocam. A partir da 4.1.0, todos esses deslocamentos seguem uma única regra, Onde termina um salto, pelo que um resultado de tabela da pesquisa rápida já não desloca a vista de todas as vezes, e um salto que a regra deixa no lugar não provoca nenhum deslocamento que o emita. Abrir, fechar ou redimensionar o explorador estreita ou alarga a tela sem mover a sua origem, e também não emite nada. Antes da 4.0.0, deslocar, fazer zoom e mudar de separador emitiam-no sempre, mesmo quando editor.value ficava igual.
Para evitar escritas que não alteram nada, compare editor.value com o último valor que guardou, e não com o ficheiro que carregou: um ficheiro escrito por uma versão anterior, um ficheiro v2 ou um editado à mão pode sair diferente em value logo que é carregado, porque value o escreve na forma de armazenamento. O mesmo pode acontecer com um ficheiro cujo bloqueio Viewport está desativado e cuja origem não desenha nenhuma parte do diagrama neste ecrã: o carregamento move a vista para o diagrama, e value escreve onde ela fica. A partir da 4.0.0, as larguras medidas já não causam isto, porque value não contém nenhuma. Em alternativa, um host que escreve ficheiros pode distinguir uma edição de uma mudança de vista com o changed de um armazenamento de replicação — consulte on@change.
O evento não traz detail, não se propaga nem atravessa a fronteira do shadow root, por isso escute-o no próprio elemento e leia editor.value no listener.

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

changePresetTheme

É emitido quando o tema predefinido é alterado a partir do criador de temas incorporado ou, a partir da 4.0.0, da entrada Theme na pesquisa rápida. É emitido em todas as escolhas, incluindo a da opção que já está em vigor.
Chamar diretamente setPresetTheme ou setSystemAppearance, ou ativar ou desativar systemDarkMode, não o emite.
event.detail é o ThemeOptions completo após a escolha — { appearance, grayColor, accentColor } — e não o objeto parcial que foi pedido. A partir da 4.0.0, o seu appearance é 'system' enquanto System está escolhido, e não o claro ou o escuro que mostra, por isso guarde-o tal como está e devolva-o a setPresetTheme.

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

changeLocale

A partir da 4.0.0, é emitido quando se escolhe um idioma no editor, a partir do seletor de idioma ou da entrada Display Language na pesquisa rápida, ambos ativados por enableLocalePicker.
É disparado depois de o idioma ter sido aplicado, em todas as escolhas, incluindo a da opção que já está em vigor. setLocale e setSystemLocale nunca o emitem, nem uma alteração dos idiomas do navegador. Uma mudança de idioma não emite nenhum change.
event.detail é { locale }, um LocaleOption: 'system' quando foi escolhido System, caso contrário o código do idioma. O elemento não memoriza a escolha, por isso guarde-a e passe-a a setLocale no carregamento seguinte.
Tal como change, não se propaga, por isso escute-o no próprio elemento.

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

focus

Dá o foco ao editor.

editor.focus();

blur

Retira o foco do editor.

editor.blur();

clear

Esvazia o documento, removendo todas as tabelas, colunas, relações, índices e notas e, a partir da 4.0.0, todos os grupos de tabelas.
Todas as definições se mantêm, incluindo a base de dados, a posição da vista, o nível de zoom, as opções de vista das tabelas, cada bloqueio com o valor que guarda e os scripts Before tables e After tables do separador Esquema SQL, pelo que um ficheiro limpo continua a guardar o que guardava. Para iniciar, em vez disso, um documento novo, atribua '' a value ou chame setInitialValue('').
Fica registado na lista do histórico, pelo que pode ser anulado, e emite change. Uma anulação repõe o documento tal como o editor o tinha, cada definição bloqueada com o seu valor bloqueado. É ignorado enquanto readonly está definido.

editor.clear();

destroy

Destrói completamente a instância do editor, de modo que já não pode ser reutilizada.
Liberta os listeners e as subscrições do editor e destrói todos os armazenamentos partilhados devolvidos por getSharedStore.
Um lote do fluxo que um armazenamento partilhado ainda esteja a reter é descartado com ele; chame primeiro o flushStreamBuffers desse armazenamento para o enviar.

editor.destroy();

setKeyBindingMap

Redefine os atalhos de teclado.
edit, stop, undo, redo, zoomIn, zoomOut e zoomReset são fixos e não podem ser redefinidos.
Apenas os vinte e um nomes abaixo são escritos; tudo o resto no objeto é ignorado, incluindo os nomes fixos.
A partir da 3.10.0, search pode ser redefinido e findReplace é novo. Antes, search era fixo. A partir da 4.0.0, removeSelection é novo. A partir da 4.1.0, addTableGroup e groupSelectedTables são novos.
O valor de uma associação tem de ser um ShortcutOption[]. Uma cadeia simples é ignorada, por isso escreva { addTable: [{ shortcut: 'Alt+KeyN' }] } em vez de { addTable: 'Alt+KeyN' }.
Um array vazio é aceite e não associa nada: setKeyBindingMap({ findReplace: [] }) deixa Ctrl + F (Windows/Linux) ou ⌘ + F (Mac) para a página, e { search: [] } faz o mesmo com Ctrl + K (Windows/Linux) ou ⌘ + K (Mac). O botão Search da barra de ferramentas continua a abrir a pesquisa rápida, o botão Explorer da barra de ferramentas continua a abrir e a fechar o explorador, e a entrada Toggle Explorer na pesquisa rápida e no menu de contexto da tela continua a abrir a pesquisa do explorador ou a fechá-lo; nenhum destes mostra um atalho para um nome deixado vazio. { removeSelection: [] } deixa Delete e Backspace para a página, e as opções de eliminação dos menus da tabela, da nota e do grupo de tabelas (Delete, Delete selected, Delete column, Delete columns) deixam então de mostrar um atalho.
A partir da 4.1.0, { addTableGroup: [] } deixa Alt + G (Windows/Linux) ou ⌥ + G (Mac) para a página, e { groupSelectedTables: [] } deixa T e depois G. A opção New Table Group na barra de ferramentas da tela, no menu de contexto da tela e na pesquisa rápida, a opção Group selected tables no menu da tabela e a entrada Group Selected Tables na pesquisa rápida continuam a funcionar, sem mostrar nenhum atalho. As dicas dos botões New Table, New Memo e New Table Group da barra de ferramentas da tela indicam a primeira combinação de addTable, addMemo e addTableGroup, ou apenas o botão no caso de uma associação deixada vazia.
A chamada é uma fusão parcial: os nomes que omitir mantêm as suas predefinições, e chamá-la duas vezes mantém as alterações anteriores. Não existe nenhum getter para as associações atuais: createKeyBindingMap devolve as predefinições, e não o que setKeyBindingMap alterou.

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, a partir da 4.1.0, groupSelectedTables cedem a vez a um cursor de texto: enquanto o foco está num campo de entrada, numa área de texto ou num contenteditable, $mod + A seleciona o texto, Space escreve um espaço, Delete e Backspace apagam texto e T e depois G escrevem as duas letras, em vez de chegarem à tela. Nenhuma dessas teclas premidas tem a ação predefinida cancelada. Seja qual for a tecla a que as reatribua, o comportamento é o mesmo.

A partir da 4.0.0, removeSelection (Delete ou Backspace) remove a seleção no separador ERD como um único passo de anulação, sem perguntar. Quando a tabela com o foco é a única coisa selecionada, uma ou mais das suas colunas estão selecionadas e o zoom desenha as suas linhas, remove essas colunas; caso contrário, remove todas as tabelas, notas e grupos de tabelas selecionados, mantendo as tabelas de um grupo. Consulte Eliminação de tabelas e notas.
Uma tecla mantida premida remove apenas uma vez, e nada é removido enquanto o editor de uma célula, de uma nota ou do nome de um grupo de tabelas está aberto. Fora de um campo de texto e dos painéis que retêm as associações (consulte createKeyBindingMap), a ação predefinida da tecla é cancelada em todos os separadores enquanto o editor tem o foco, também num botão da barra de ferramentas com o foco e num editor só de leitura, onde não remove nada.

A partir da 4.1.0, addTableGroup (Alt+KeyG) prepara o desenho New Table Group no separador ERD, em que o premir seguinte do botão principal na tela desenha o grupo, e premir de novo a combinação cancela o desenho, tal como o botão New Table Group da barra de ferramentas da tela. groupSelectedTables (KeyT KeyG, T e depois G) coloca as tabelas selecionadas num novo grupo e abre o editor do seu nome, tal como a opção Group selected tables no menu de contexto de uma tabela. Sem nenhuma tabela selecionada, não adiciona nada; uma nota ou um grupo de tabelas selecionado não conta. Consulte Desenhar um grupo e Agrupar as tabelas selecionadas.
Ambas só atuam onde os menus oferecem um grupo: não enquanto readonly está definido, enquanto a opção de vista Table Groups oculta os grupos ou enquanto o editor de uma célula, de uma nota ou do nome de um grupo de tabelas está aberto. Tal como as outras associações da tela, só atuam no separador ERD, e não enquanto a pesquisa rápida, o painel Propriedades da tabela, o visualizador de diferenças, a viagem no tempo, a pré-visualização da disposição automática ou a caixa de diálogo Export image ou Map Columns estão abertos. Onde não fazem nada, a ação predefinida da tecla continua a ser cancelada, a menos que groupSelectedTables ceda a vez a um cursor de texto. A propagação de addTableGroup também é interrompida, tal como a de focusView e de zenMode, pelo que um listener de keydown da página na fase de propagação nunca o recebe.

A partir da 3.10.0, findReplace ($mod+KeyF) abre Localizar e substituir. A partir da 4.1.0, abre ou fecha o explorador que o contém, e o separador Atalhos apresenta-o como Toggle Explorer.
Enquanto o botão Explorer da barra de ferramentas aparece premido (o explorador aberto no separador ERD e não oculto pelo modo zen), fecha o explorador, a menos que a pesquisa rápida, o painel Propriedades da tabela, o criador de temas, o seletor de idioma, a caixa de diálogo Export image ou Map Columns estejam abertos. Caso contrário, fecha o que estiver aberto de entre estes, passa para o separador ERD a partir de qualquer outro separador e abre o explorador com o cursor de texto no campo Find e a consulta selecionada. Um editor demasiado estreito para mostrar o explorador ao lado da tela mantém-no aberto, mas afastado, e mostra a notificação Widen the window to show the Explorer. Antes da 4.1.0, abria o painel flutuante Localizar e substituir, ou devolvia o foco do teclado ao seu campo, e nunca o fechava.
Não cede a vez a um cursor de texto: enquanto o editor tem o foco, é captado em todos os separadores, a partir da tela ou de um campo de entrada dentro do editor. A ação predefinida da tecla é cancelada, pelo que o navegador não abre nenhuma barra de localização, e a sua propagação é interrompida, pelo que nenhum listener de keydown da página na fase de propagação a recebe. Com o editor de uma célula ou de uma nota aberto, ou, a partir da 4.0.0, o editor do nome de um grupo de tabelas, a ação predefinida continua a ser cancelada e a propagação interrompida, mas não faz nada.
Enquanto o visualizador de diferenças, a viagem no tempo ou a pré-visualização da disposição automática estão abertos, seja em que separador for, ou enquanto um IME ainda está a compor, nem a ação predefinida é cancelada nem a propagação é interrompida, pelo que a localização do próprio navegador ou do host a recebe. Dentro do explorador, a propagação de uma tecla premida ainda em composição é interrompida aí, embora a ação predefinida não seja cancelada. Seja qual for a tecla a que reatribua findReplace, o comportamento é o mesmo.

focusView só atua no separador ERD. Com pelo menos uma tabela selecionada, abre o separador Visualização no modo Flow, restrito a essas tabelas e a todas as tabelas à distância de uma relação; uma nota ou um grupo de tabelas selecionado não conta e, sem nenhuma tabela selecionada, não faz nada. Consulte Focar em tabelas.

stop (Escape) no separador ERD termina o editor de uma célula ou de uma nota que esteja aberto, ou uma relação que esteja a ser desenhada, e deixa a seleção como está. A partir da 4.0.0, também termina o editor do nome de um grupo de tabelas, sem escrever nenhum nome, e um desenho New Table Group. O editor chama preventDefault() quando essa tecla é premida.
Sem nenhum destes aberto, Escape limpa a seleção e retira o foco da célula, e a sua ação predefinida não é cancelada. Sair de uma edição e limpar a seleção requer, por isso, premir a tecla duas vezes.
À exceção do explorador, dos formatos de Import do ecrã de boas-vindas e dos seletores e caixas de diálogo abaixo, o editor nunca impede a propagação de Escape, pelo que uma página que esteja ela própria à escuta desta tecla, por exemplo para fechar uma caixa de diálogo sua, recebe os dois eventos de tecla e pode ignorar aquele cujo defaultPrevented é true.
Enquanto a pesquisa rápida, o painel Propriedades da tabela, o visualizador de diferenças, a pré-visualização da disposição automática ou a viagem no tempo estão abertos, Escape fecha o que estiver aberto, em vez disso, e deixa a seleção como está. A ação predefinida dessa tecla também não é cancelada.
A partir da 4.0.0, uma caixa de diálogo Export image ou Map Columns aberta também recebe Escape, que a fecha e deixa a seleção como está. Cada uma capta o foco do teclado quando se abre, e nesse Escape a ação predefinida é cancelada e a propagação é interrompida.
A partir da 4.1.0, um Escape premido com o foco dentro do explorador, na sua árvore, nos seus campos ou nos seus botões, devolve o foco do teclado à tela e deixa o explorador aberto e a seleção como está. O editor chama preventDefault() e stopPropagation() sobre ele, pelo que nunca chega a um listener de keydown da página na fase de propagação.
Um Escape na tela nunca fecha o explorador. Antes da 4.1.0, um Escape dentro do painel Localizar e substituir fechava-o, e um na tela fechava-o no mesmo premir que limpava a seleção.
A partir da 4.0.0, o seletor de idioma e o seletor de cores fecham-se com Escape: dentro deles, a ação predefinida é cancelada e a propagação é interrompida, e na tela fecha-os no mesmo premir que limpa a seleção, sem cancelar a ação predefinida nem interromper a propagação.
Um Escape premido enquanto um IME ainda está a compor pertence à composição. Deixa um editor aberto como está e a sua ação predefinida não é cancelada, pelo que uma página também pode ignorar uma tecla premida cujo isComposing é true, ou cujo keyCode é 229. Dentro do explorador, a propagação dessa tecla, como a de qualquer tecla aí premida a meio de uma composição, também é interrompida, e o foco do teclado fica no campo.
Antes da 3.9.2, um único Escape terminava uma edição ou um desenho e limpava a seleção, e o editor nunca cancelava a sua ação predefinida.

createKeyBindingMap

A partir da 3.9.2, o pacote exporta createKeyBindingMap() e, com ele, os tipos KeyBindingMap, KeyBindingName e ShortcutOption.
Devolve as combinações de teclas predefinidas, os 28 nomes incluindo os fixos, como um novo mapa em cada chamada, pelo que alterar o mapa que devolve não altera mais nada.
É o ponto de partida de todos os editores, e uma chamada a setKeyBindingMap não se reflete nele.
Apenas createKeyBindingMap é uma exportação em tempo de execução; os outros três são tipos.

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

Cada shortcut é uma combinação na sintaxe do tinykeys que designa a sua tecla por KeyboardEvent.code, em que $mod é ⌘ no macOS e Control nos restantes sistemas.
A partir da 4.0.0, o editor lê estas combinações por si próprio, em vez de através do tinykeys, com a mesma sintaxe. Uma tecla corresponde pelo seu code, ou pelo seu key sem distinguir maiúsculas de minúsculas, e uma tecla premida só corresponde se estiverem premidas exatamente as teclas modificadoras que a combinação indica. AltGraph conta como Control e Alt no Windows e como Alt no macOS. Teclas separadas por um espaço formam uma sequência, que recomeça após um segundo sem nenhum keydown.
A partir da 4.1.0, uma das predefinições é uma sequência: groupSelectedTables é KeyT KeyG, T e depois G. Uma sequência é executada na tecla premida que a completa, e só essa recebe o seu preventDefault e o seu stopPropagation, pelo que, com as predefinições, T chega à página e só G tem a ação predefinida cancelada. Os menus, a pesquisa rápida e o separador Atalhos mostram uma sequência como uma tecla por cada tecla premida.
Os nomes fixos estão associados 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 não têm sinalizadores; os outros cinco têm preventDefault e stopPropagation. Os restantes são as predefinições acima, entre elas search e findReplace.

O editor escuta-as no seu próprio elemento, pelo que um host que capta as teclas antes do editor, com atalhos globais ou um listener de keydown na fase de captura, tem de as deixar passar enquanto o editor tem o foco.
Construa a lista das teclas a deixar passar a partir de createKeyBindingMap(), com as associações que passou a setKeyBindingMap no lugar das predefinições.
A partir da 3.10.0, essa lista inclui $mod+KeyF, a combinação de localização do próprio navegador. Um host que queira manter a sua própria localização nessa combinação passa setKeyBindingMap({ findReplace: [] }).
A partir da 4.0.0, inclui também Delete e Backspace sem modificadores. Um host que queira manter essas teclas passa setKeyBindingMap({ removeSelection: [] }).
A partir da 4.1.0, inclui também Alt+KeyG e a sequência KeyT KeyG, que vem numa única cadeia: divida-a no espaço e deixe passar cada tecla premida, incluindo T e G sem modificadores, já que uma sequência a que falte uma tecla nunca se completa. Um host que queira manter essas teclas passa setKeyBindingMap({ addTableGroup: [] }) ou setKeyBindingMap({ groupSelectedTables: [] }).

Enquanto o foco está dentro do explorador, na sua árvore, nos seus campos Find e Replace ou nos seus botões, findReplace, search, undo, redo, zoomIn, zoomOut e zoomReset passam para o editor, pelo que findReplace atua aí como na tela. Todas as outras associações, tal como estão definidas, param no explorador, uma sequência pela sua última tecla premida (um G sem modificadores com as predefinições), e o mesmo acontece com as teclas de seta, Tab, Enter, Space, Home, End e qualquer tecla premida enquanto um IME ainda está a compor. À exceção de Escape, que devolve o foco do teclado à tela, a sua propagação é interrompida sem que a ação predefinida seja cancelada, pelo que funcionam como teclas normais nos campos, botões e árvore do explorador e não chegam nem à tela nem a um listener de keydown da página na fase de propagação: aí, Alt + N não adiciona nenhuma tabela e Delete não remove nada. As teclas que movem, recolhem ou vão para uma linha da árvore, e Enter no campo Find ou Replace, que percorre as correspondências ou substitui, também têm a ação predefinida cancelada.
Qualquer outra tecla, como a combinação para guardar ou para a paleta de comandos de um host, segue para a página como habitualmente. Consulte Teclas no explorador. Antes da 4.1.0, o painel flutuante Localizar e substituir retinha as teclas da mesma forma, à exceção de Home, End, da última tecla premida de uma sequência e de Space enquanto handTool estava associado a outra tecla.
A partir da 4.0.0, o seletor de idioma retém as teclas da mesma forma: as mesmas sete associações passam, e todas as outras associações (a partir da 4.1.0, uma sequência pela sua última tecla premida), as teclas de seta e Tab têm aí a propagação interrompida sem que a ação predefinida seja cancelada, tal como qualquer tecla premida enquanto um IME ainda está a compor. ↑, ↓, Home, End, Enter e Space numa das suas linhas percorrem as linhas ou escolhem uma, e também têm a ação predefinida cancelada.

$mod

Muda a tecla Control consoante o ambiente.

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

Tabela de atalhos

Utiliza as propriedades key, code dos eventos de teclado.
Utilize code para posições absolutas e key para valores introduzidos.

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

Tema

setPresetTheme

Define um tema predefinido.
As predefinições são appearance: 'dark', grayColor: 'slate' e accentColor: 'indigo'.
Cada campo é aplicado por si só, pelo que uma chamada parcial deixa os outros dois como estão. Um valor que não seja um dos nomes abaixo é ignorado, e a chamada nunca gera uma exceção.
A partir da 4.0.0, appearance também aceita 'system', a opção System do criador de temas. Mostra o claro ou o escuro que o sistema operativo indica, ou o que setSystemAppearance indicar, e muda quando esse valor muda.

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

A partir da 4.0.0, indica o claro ou o escuro que o aspeto 'system' mostra, para um host com um claro e um escuro próprios, como o tema de um IDE. Enquanto um deles estiver indicado, as alterações do sistema operativo são ignoradas.
null, ou qualquer valor diferente de 'dark' ou 'light', volta a seguir o sistema operativo.
Enquanto o aspeto é 'light' ou 'dark', não altera nada no ecrã, mas o valor é mantido e aplica-se logo que o aspeto passa a ser 'system'. Caso contrário, aplica-se de imediato. Não emite nada, e changePresetTheme continua a indicar 'system'.
Os hosts VS Code, JetBrains e Obsidian chamam-no com o seu próprio claro ou escuro, e novamente sempre que este muda.

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

setTheme

Permite personalizar o tema.
Cada chamada substitui toda a camada personalizada, por isso passe novamente o objeto completo para alterar um token sobre uma personalização existente, e passe {} para voltar ao tema predefinido.
Apenas os nomes de token abaixo, com valores de cadeia, são mantidos; tudo o resto é descartado sem erro.
A camada fica sobre o tema predefinido, pelo que um setPresetTheme posterior troca o tema predefinido por baixo, enquanto as suas personalizações se mantêm.

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 são a cor da sombra que as tabelas e as notas projetam na tela ERD. O tema predefinido escuro deixa-os como transparent, o que não projeta nenhuma sombra, tal como passar none ou uma cadeia vazia a setTheme; o tema predefinido claro utiliza rgba(0, 0, 0, 0.18).

A partir da 4.0.0, há mais nove tokens:

• tableGroupHeaderBackground, tableGroupBackground e tableGroupBorder dão cor à barra de título, ao corpo e ao contorno de um grupo de tabelas que não tem cor própria.
• toastSuccess e toastError dão cor à marca de uma notificação que indica como algo terminou.
• findReplaceError e mapColumnsError dão cor aos erros que Localizar e substituir e a caixa de diálogo Mapear colunas mostram. Antes, Localizar e substituir utilizava diffDeleteForeground, pelo que personalizar esse token já não lhe muda a cor.
• schemaSqlWarningBackground e schemaSqlWarningForeground dão cor aos avisos nas opções do separador Esquema SQL.

A partir da 4.1.0, há mais nove tokens:

• treeBackground, treeRowHover, treeRowCurrent, treeMuted e treeMatch dão cor à árvore que o explorador e o visualizador de diferenças partilham: o seu fundo, que também preenche os campos Find e Replace do explorador; uma linha sob o ponteiro, a linha do foco do teclado enquanto a árvore tem o foco e um botão sob o ponteiro no cabeçalho e na pesquisa do explorador; a linha da correspondência atual da pesquisa; o texto esbatido, como contagens, tipos de dados e as setas para recolher; e a marca por trás do texto que uma pesquisa encontrou.
• explorerBackground e explorerBorder dão cor ao painel do explorador e às suas linhas: o seu limite junto à tela, a linha por baixo da sua pesquisa e os contornos dos seus campos e dos botões que a opção Search In expande. explorerBorder também desenha o limite da árvore do visualizador de diferenças, a linha por baixo do seu campo Filter by name e o contorno desse campo. Os ícones de chave do explorador usam keyPK, keyFK e keyPFK.
• diffModifyForeground e diffRenameForeground dão cor ao que o visualizador de diferenças marca como modificado e com o nome alterado, na sua árvore e em ambos os documentos. diffModifyForeground também contorna uma tabela, nota ou grupo de tabelas que foi movido, redimensionado, mudado de cor ou de grupo, independentemente do que mais tenha mudado, e desenha o conector de uma chave externa que mudou.

diffInsertForeground e diffDeleteForeground dão agora cor ao que o visualizador de diferenças marca como adicionado e eliminado, na sua árvore e no documento que o contém, tanto no texto como nos contornos e nos conectores. diffInsertBackground, diffDeleteBackground, diffCrossBackground e diffCrossForeground foram removidos na 4.1.0, já que o visualizador de diferenças deixou de preencher células. setTheme descarta-os como qualquer outro nome que não esteja em Theme, e os respetivos hooks, --erd-editor-diff-insert-background, --erd-editor-diff-delete-background, --erd-editor-diff-cross-background e --erd-editor-diff-cross-foreground, já não são lidos.

Variáveis CSS

Cada token de Theme tem um hook CSS correspondente, cujo nome é --erd-editor- seguido da chave em kebab-case: grayColor10 é --erd-editor-gray-color-10, keyPK é --erd-editor-key-pk e keyPFK é --erd-editor-key-pfk.
Os hooks são herdados para dentro do editor, por isso defina-os onde quiser que se apliquem. Em :root, aplicam o tema a todos os editores da página; no próprio elemento, aplicam-no apenas a esse.

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

A partir da 3.4.0, os tokens dargSelect, com o erro ortográfico, escrevem-se dragSelect, e os respetivos hooks mudaram de --erd-editor-darg-select-background e --erd-editor-darg-select-border para --erd-editor-drag-select-background e --erd-editor-drag-select-border. Uma folha de estilos que ainda utilize os nomes antigos é ignorada.

Valores predefinidos do 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;
}

Idioma de apresentação

A partir da 4.0.0, o texto do próprio editor — os seus menus, painéis, caixas de diálogo, pesquisa rápida, notificações e as palavras que desenha no diagrama, como unnamed, incluindo nas exportações de imagem — está disponível em 25 idiomas. Os nomes das tabelas e das colunas, o SQL, os tipos de dados e o código gerado nunca são traduzidos. Consulte Idioma e tema.
Antes de setLocale ser chamado ou de um idioma ser escolhido, o editor apresenta-se em inglês, ou segue 'system' enquanto enableLocalePicker está ativado.
O editor define lang e dir na sua própria raiz dentro do shadow root fechado, nunca no elemento host nem na página, pelo que uma página da direita para a esquerda não inverte o editor e um idioma da direita para a esquerda não inverte a página. O hebraico, o árabe e o persa dispõem a interface do editor da direita para a esquerda; o próprio diagrama nunca é espelhado. A partir da 4.1.0, o explorador fica à esquerda da tela em todos os idiomas, com as suas próprias linhas a ler-se da direita para a esquerda nesses três.
O pacote exporta os tipos LocaleCode (um dos códigos abaixo) e LocaleOption.

type LocaleOption = LocaleCode | 'system';

Código	Apresentado como	Idioma
id-ID	Bahasa Indonesia	Indonésio
de-DE	Deutsch	Alemão
en	English	Inglês
es-ES	Español	Espanhol
eu-ES	Euskara	Basco
fr-FR	Français	Francês
it-IT	Italiano	Italiano
nl-NL	Nederlands	Neerlandês
pl-PL	Polski	Polaco
pt-PT	Português	Português
pt-BR	Português Brasileiro	Português do Brasil
ro-RO	Română	Romeno
sk-SK	Slovenčina	Eslovaco
sl-SI	Slovenščina	Esloveno
sv-SE	Svenska	Sueco
tr-TR	Türkçe	Turco
ru-RU	Русский	Russo
uk-UA	Українська	Ucraniano
he-IL	עברית	Hebraico
ar-SA	العربية	Árabe
fa-IR	فارسی	Persa
ja-JP	日本語	Japonês
zh-CN	简体中文	Chinês simplificado
zh-TW	繁體中文	Chinês tradicional
ko-KR	한국어	Coreano

setLocale

Define o idioma de apresentação: 'system' ou um dos códigos acima. Qualquer outro valor, como um simples 'ko', um código desconhecido ou um valor que não seja uma cadeia, é ignorado sem erro.
Aplica-se antes de a chamada terminar, pelo que um idioma definido antes de o elemento ser anexado já aparece no seu primeiro fotograma.
Não emite nada, nem changeLocale nem change, e não mexe em value, no histórico de anulação nem num armazenamento partilhado.
A escolha mantém-se, esteja enableLocalePicker ativado ou desativado, e setLocale('system') segue o sistema também com o seletor desativado.
O editor não guarda nada. Para manter a escolha de um leitor, escute changeLocale e volte a passá-la no carregamento seguinte.

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

setSystemLocale

Indica o idioma que 'system' representa, como uma etiqueta BCP 47, para um host com um idioma de apresentação próprio. Os hosts VS Code, JetBrains e Obsidian chamam-no com o seu próprio idioma de apresentação.
São removidos os espaços no início e no fim da etiqueta. null, uma cadeia em branco ou um valor que não seja uma cadeia volta a navigator.languages do navegador, que o editor acompanha à medida que muda.
Só tem efeito enquanto a opção em vigor é 'system', e aplica-se de imediato. A linha System do seletor indica o idioma para o qual se resolve.
A etiqueta, ou cada um dos idiomas do navegador por ordem, resolve-se para o primeiro idioma que o editor tem, pela sua subetiqueta de idioma, sem distinguir maiúsculas de minúsculas nem ter em conta os caracteres de sublinhado: de-AT dá de-DE e en-GB dá en. O chinês resolve-se pela escrita, com Hant a dar zh-TW e Hans a dar zh-CN, e, sem ela, pela região, com TW, HK e MO a dar zh-TW e qualquer outra a dar zh-CN. pt dá pt-BR, a menos que seja indicada uma região diferente de BR. Quando nada corresponde, o editor mostra inglês.

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

setSchemaSQL

Carrega um ficheiro de Esquema SQL.
Por predefinição, substitui o documento atual em vez de se fundir com ele; consulte mode abaixo. As definições que já tem são mantidas, incluindo cada bloqueio e o respetivo valor bloqueado, à exceção da posição da vista e do nível de zoom, e as tabelas são posicionadas depois de o ficheiro ser lido, em linhas, a menos que placement abaixo indique outra coisa. Com a definição Viewport bloqueada, value passa a escrever a vista em que a importação começa, a origem 0, 0 com o nível de zoom 1. Um documento importado para um elemento a que nunca foi atribuído um valor tem, por isso, todos os bloqueios ativados, tal como um documento novo.
Fica registado na lista do histórico, o que permite Undo, Redo, e emite change. Uma cadeia vazia é ignorada, e a chamada não faz nada enquanto readonly está definido.
setSchemaGraphQL, setSchemaDBML e setSchemaAML comportam-se da mesma forma, e os seus analisadores nunca falham: um texto que não consigam ler carrega um documento vazio em vez de gerar um erro.
A partir da 4.0.0, os quatro aceitam um segundo argumento opcional, { placement, mode }:

• placement: 'grid', a predefinição, coloca as tabelas em linhas de imediato, como antes, e a chamada não devolve nada.
• placement: 'auto' dispõe primeiro as tabelas de acordo com as suas relações, tal como a opção Import no editor, e devolve uma Promise que se resolve quando a importação tiver sido concluída como um único passo de anulação. Menos de duas tabelas, nenhuma relação, uma disposição que falhe, uma página sem SharedWorker ou o botão Cancel na notificação Placing tables levam a que as tabelas sejam colocadas em linhas, em vez disso. Um carregamento entretanto — outra importação que substitui, a atribuição de value, setInitialValue(), clear(), o carregamento de um colaborador ou a anulação ou o refazer de um carregamento ou de clear() — sobrepõe-se a ela, e a Promise resolve-se sem nada carregado. As importações posicionadas desta forma são concluídas pela ordem em que começaram.
• mode: 'replace', a predefinição, substitui o documento. mode: 'append' adiciona o ficheiro por baixo do diagrama, tal como Importar e adicionar, deixando como estão todas as tabelas que já lá existem e todas as definições, à exceção do separador e da posição da vista. A partir de outro separador, o separador ERD é mostrado primeiro. As novas tabelas, e os grupos de tabelas que um ficheiro DBML traz enquanto os grupos de tabelas estão visíveis, passam a ser a seleção, e a vista desloca-se até elas, a menos que já estejam bem visíveis, segundo a regra que todos os saltos seguem a partir da 4.1.0 — consulte Onde termina um salto. Uma única anulação remove toda a adição. Um texto que não consiga ler não adiciona nada e deixa o documento como está.

Enquanto readonly está definido, uma substituição é ignorada, uma adição não adiciona nada e uma chamada com placement: 'auto' resolve-se de imediato.
A partir da 3.10.0, setSchemaSQL lê o ficheiro de acordo com a base de dados atual do documento: com Databricks selecionado, as cadeias entre aspas simples seguem as sequências de escape com barra invertida do Spark. Consulte Comentários.
A partir da 3.10.0, setSchemaSQL lê um UNIQUE sobre duas ou mais colunas como um só índice único, e não como um sinalizador Único em cada coluna. Consulte Chaves únicas e índices.
A partir da 3.10.0, as importações de SQL, DBML e AML mantêm as ações ON DELETE e ON UPDATE das chaves externas que leem.
A partir da 4.0.0, setSchemaSQL mantém a expressão DEFAULT completa de uma coluna, lê o ADD DEFAULT … FOR do SQL Server e os seus comentários MS_Description, transforma as colunas serial e identity do PostgreSQL em Incremento automático, mantém UNSIGNED e ZEROFILL num tipo de dados e lê uma chave primária que ALTER TABLE … ADD PRIMARY KEY marca como CLUSTERED, NONCLUSTERED ou USING BTREE. Consulte Esquema SQL.
Consulte Importar ou exportar ficheiros para conhecer a sintaxe que cada analisador aceita.

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

Carrega um documento GraphQL SDL.
As definições de tipos de objeto tornam-se tabelas, e um campo cujo tipo é outra tabela torna-se uma relação.

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

setSchemaDBML

Carrega um ficheiro DBML, o formato utilizado pelo dbdiagram.io e pelo dbdocs.
A partir da 4.0.0, cada TableGroup torna-se um grupo de tabelas, e o headercolor de uma tabela torna-se a sua cor. Consulte DBML.

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

setSchemaAML

Carrega um ficheiro AML (Azimutt Markup Language). São aceites tanto a grafia atual como a antiga grafia v1.
A partir da 4.0.0, a cor de uma entidade, um dos nomes de cores do Azimutt ou um valor hexadecimal entre aspas, torna-se a cor da respetiva tabela. Consulte AML.

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

setSchemaJSON

A partir da 4.0.0, carrega um documento .erd.json, como o texto que value devolve.
No seu mode: 'replace' predefinido, carrega o documento tal como a atribuição de value: fica registado na lista do histórico, emite change e assume os bloqueios do documento da mesma forma. Ao contrário de value, uma cadeia vazia ou um valor que não seja uma cadeia é ignorado, em vez de iniciar um documento novo. Um texto que não seja JSON esvazia o documento, tal como acontece com value.
mode: 'append' adiciona as tabelas, relações, índices, notas e grupos de tabelas do documento por baixo do diagrama com novos ids, mantendo as suas posições relativas e deixando de fora as definições do documento, tal como Importar e adicionar faz com um ficheiro json. Um texto que não consiga ler, ou um documento sem nenhuma tabela e sem nenhuma nota, não adiciona nada. Caso contrário, é colocado tal como numa adição de setSchemaSQL, com as suas novas notas e grupos de tabelas selecionados juntamente com as suas tabelas, cada tipo enquanto estiver visível.
Termina depois de o documento ter sido colocado, e é ignorado enquanto readonly está definido.

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

getSchemaSQL

Exporta o estado atual do editor como Esquema SQL.
Se databaseVendor não for especificado, funciona de acordo com a base de dados definida atualmente. Um nome que não esteja na lista abaixo é tratado da mesma forma, sem gerar um erro.
Os nomes são delimitados com o tipo de delimitador que o editor mostra. Enquanto Bracket Type está bloqueado, este pode ser diferente do que value guarda, que é aquele com que o erd_read de um agente de programação delimita os nomes.
A partir da 4.0.0, um argumento opcional options escolhe as instruções e o cabeçalho, tal como as opções do separador Esquema SQL. SchemaSQLOptions é exportado como um tipo.

• statements: 'create', a predefinição; 'ifNotExists', que escreve IF NOT EXISTS em MySQL, MariaDB, PostgreSQL, SQLite e Databricks e recorre a 'create' nas restantes; ou 'recreate', que elimina as tabelas antes de as criar, ao passo que o Snowflake escreve, em vez disso, CREATE OR REPLACE TABLE.
• header: 'none', a predefinição; 'use', que muda para a base de dados ou o esquema do documento; ou 'createAndUse', que primeiro o cria, se não existir, e depois muda para ele. Uma base de dados que não suporte o cabeçalho pedido recorre a uma alternativa, tal como o separador: o Oracle escreve 'use' para 'createAndUse', o PostgreSQL não escreve nenhum cabeçalho para 'use' e o SQLite não escreve nenhum. Só é escrito um cabeçalho enquanto o nome da base de dados do documento for um identificador simples — letras ASCII, algarismos e _, sem começar por um algarismo.

Uma opção omitida, ou com um valor desconhecido, é lida como a sua predefinição, pelo que uma chamada sem opções escreve instruções CREATE simples sem cabeçalho, como antes.
A partir da 4.0.0, a saída inclui sempre os scripts Before tables e After tables do documento, pela ordem cabeçalho, script antes das tabelas, instruções DROP, tabelas, script depois das tabelas. As escolhas Statements, Header e Tables do próprio separador Esquema SQL nunca afetam esta chamada, que escreve sempre o documento inteiro.
A partir da 3.10.0, cada chave externa inclui as cláusulas ON DELETE e ON UPDATE da relação. Uma cláusula só é escrita quando a sua ação está definida e a base de dados a aceita, pelo que uma ação que essa base de dados não aceite é omitida e aplica-se a sua predefinição. A partir da 4.0.0, o Snowflake só aceita NO ACTION. Consulte ON DELETE e ON UPDATE para saber o que cada base de dados escreve.
A partir da 3.10.0, uma aspa simples dentro de um comentário de tabela ou de coluna é escapada, pelo que um comentário como it's já não quebra a instrução. Todas as bases de dados que escrevem os comentários como literais de cadeia duplicam-na, exceto o Databricks, que coloca uma barra invertida antes de cada aspa e de cada barra invertida. O SQLite continua a escrever os comentários como linhas --.
A partir da 4.0.0, várias bases de dados também escrevem de forma diferente os nomes das chaves, os valores predefinidos e o incremento automático. Consulte O que o DDL escreve.

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

Devolve um armazenamento para edição colaborativa em tempo real.
config é { getNickname?, mouseTracker?, focusTracker? }. Ambos os rastreadores têm true como predefinição: mouseTracker transmite o cursor deste editor aos outros, e focusTracker transmite a sua célula com o foco, a sua seleção e o seu retângulo de seleção.
Consulte Edição colaborativa.

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

setDiffValue

Abre o visualizador de diferenças, comparando o documento aberto atualmente com o que passar.
Não devolve nada e não modifica o documento, pelo que fechar o visualizador deixa o editor exatamente como estava.
Um valor em branco, ou qualquer valor que não seja uma cadeia, é comparado com um documento vazio.
É a mesma sobreposição que a opção Visualizador de diferenças do menu de contexto da tela.
A partir da 4.1.0, emparelha o que os dois documentos contêm primeiro pelo id e só depois pelo que cada um guarda, como o nome de uma tabela ou o texto de uma nota — consulte O que é comparado. Em comparação com uma versão anterior do mesmo documento, como uma revisão Git do seu ficheiro, uma mudança de nome aparece, por isso, como um único item com o nome alterado; em comparação com um documento cujos ids são diferentes, aparece como uma remoção e uma adição. O visualizador apresenta o que mudou numa árvore ao lado dos dois documentos e marca as alterações com cor em vez de preencher células.

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