ErdEditorElement

O editor é um HTMLElement comum.
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 em um shadow root fechado, então editor.shadowRoot é null e os estilos da página não entram nem saem dele.
Nada dentro dele pode ser alcançado com um seletor — em vez disso, estilize-o por meio 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 todos os cinco têm false como padrão. Os dois últimos são novos na 4.0.0. Cada um lê seu valor como readonly descreve.

A partir da 4.1.0, a aba ERD tem um explorador, uma árvore do diagrama encaixada à esquerda do canvas com Localizar e substituir no topo. Nenhum atributo, propriedade, método ou evento o abre, fecha ou informa seu estado: ele se abre pelo botão Explorer da barra de ferramentas, por Toggle Explorer na pesquisa rápida ou no menu de contexto do canvas, ou com a vinculação findReplace.
Todo elemento começa com ele fechado. Seu estado aberto ou fechado, sua largura, o que está recolhido nele e sua pesquisa duram enquanto o elemento existir, atravessando trocas de aba e todo carregamento, setInitialValue incluído, e nunca entram em value, runtimeValue, no histórico de desfazer nem em um armazenamento compartilhado.

readonly

Define a capacidade de edição do editor.
Enquanto ele está definido, atribuir value, clear(), setSchemaSQL(), setSchemaGraphQL(), setSchemaDBML(), setSchemaAML(), setSchemaJSON(), desfazer e refazer são todos ignorados, e o evento change nunca é emitido. Em vez disso, carregue um documento com setInitialValue.
A exibição continua funcionando: o zoom, o deslocamento da área visível, a ferramenta mão, o modo zen, a aba do canvas, a aba Visualização em seus dois modos, incluindo focar em tabelas, o fornecedor de banco de dados e as configurações de saída do SQL e do Gerador de código continuam valendo, então um visualizador somente leitura ainda pode exportar SQL para outro fornecedor ou ler o código gerado.
A partir da 4.1.0, o explorador também se abre, e escolher uma de suas linhas leva ao que a linha representa, como em um editor editável. O Localizar e substituir no topo dele apenas localiza, sem a seta Toggle Replace e sem a linha Substituir, e ir para uma correspondência ainda a traz para a área visível e a seleciona. O painel tem o título Explorer, e a dica de ferramenta do botão da barra de ferramentas é Explorer (Ctrl + F) (Windows/Linux) ou Explorer (⌘ + F) (Mac) em todo editor. Da 3.10.0 à 4.0.0, o Localizar e substituir se abria como um painel flutuante só de localização com o título Find.
O painel Propriedades da tabela continua se abrindo e, a partir da 3.10.0, mostra um selo Read only ao lado do título, e sua aba Indexes não oferece edições — consulte Propriedades da tabela.
A partir da 4.0.0, um editor somente leitura não oferece Import and Add, New Table Group, Group selected tables, Remove from group (consulte Grupos de tabelas) nem Map Columns, e não mostra a tela de boas-vindas. Os botões de bloqueio da aba Configurações não mudam nada, e os scripts Before tables e After tables da aba Esquema SQL não podem ser editados.
A partir da 4.1.0, ele também não mostra os botões New Table, New Memo nem New Table Group na barra de ferramentas do canvas, e as vinculações addTableGroup e groupSelectedTables não fazem nada.
As escolhas This window only da aba Esquema SQL, Statements, Header e Tables, nunca são salvas e continuam valendo, e o mesmo vale para a caixa de diálogo Export image, o construtor de temas e o seletor de idioma. Uma escolha no construtor de temas ou no seletor de idioma ainda emite changePresetTheme ou changeLocale.
Um atributo sem valor, ="" e ="true" são todos lidos como true. ="false" é lido como false, assim como qualquer outra string — incluindo a convenção do 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', como faz setPresetTheme({ appearance: 'system' }). O editor passa então a mostrar o claro ou o escuro que o sistema operacional informa, ou o que setSystemAppearance indicar, e alterna quando isso muda.
Um setPresetTheme posterior com 'light' ou 'dark', ou uma escolha de Light ou Dark no construtor de temas ou na pesquisa rápida, substitui 'system' e permanece: a próxima mudança do sistema operacional não o sobrescreve mais, mesmo que systemDarkMode continue true. Antes da 4.0.0, a próxima mudança do sistema operacional o sobrescrevia.
Desativá-lo enquanto a aparência é 'system' mantém o claro ou o escuro mostrado naquele momento. Desativá-lo depois que a aparência deixou de ser 'system' a mantém 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 é oferecida uma interface para definir temas predefinidos com facilidade.
Ele mostra o botão Theme da barra de ferramentas, que abre o construtor de temas com Accent color, Gray color e Appearance. A partir da 4.0.0, Appearance oferece System ao lado de Light e Dark e, enquanto ele estiver ativado, a pesquisa rápida lista 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>

Alterar o tema predefinido neste painel, ou na pesquisa rápida, emite o evento changePresetTheme.

enableLocalePicker

A partir da 4.0.0, determina se é oferecida uma interface para escolher o idioma de exibição do editor.
Ele mostra o botão Display Language da barra de ferramentas, depois de Theme quando ambos são mostrados. O botão abre o seletor de idioma, e a pesquisa rápida lista Display Language. Ambos oferecem System e os 25 idiomas — consulte Idioma e tema.
Ele 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, de modo que um elemento que não configura nada mantém o inglês que sempre mostrou. Ativá-lo ou desativá-lo alterna entre os dois imediatamente. Depois que um idioma é definido ou escolhido, essa escolha permanece, esteja ele ativado ou desativado.
Defina-o antes de o elemento ser anexado para que o primeiro quadro 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 usuário com a tela de boas-vindas.
Ela fica sobre a aba ERD enquanto o documento não tem nenhuma tabela, nenhuma nota exibida e nenhum grupo de tabelas exibido. Ela não é mostrada enquanto readonly está definido, no modo zen, nem enquanto o painel Propriedades da tabela, o visualizador de diferenças, a viagem no tempo ou a pré-visualização do layout automático está aberto. A primeira tabela, nota exibida ou grupo de tabelas exibido a remove, e um desfazer que volta a um diagrama vazio a traz de volta.
Seus itens New Table, New Memo e Command Palette mostram a primeira combinação de addTable, addMemo e search como setKeyBindingMap as deixou, e nenhuma para um nome deixado vazio. Suas setas apontam para os botões Theme e Display Language somente onde enableThemeBuilder e enableLocalePicker os mostram.
Em seu menu, ↑, ↓, Home e End navegam entre os itens e têm a ação padrão impedida e a propagação interrompida. Enter e Space têm a propagação interrompida, mas não a ação padrão impedida, para que o item em foco os receba, e Escape entre os formatos de Import volta, com a ação padrão impedida e a propagação interrompida. Todas as outras teclas chegam ao editor e à página como de costume.
Ela não altera nada no documento, então deixa value como estava e não emite change.
Ative-o depois que setInitialValue tiver carregado o documento, como fazem os hosts oficiais, para que a tela nunca pisque sobre um arquivo que ainda está sendo carregado.

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 string JSON, no esquema que o editor define.
A partir da 4.0.0, ele é a forma de armazenamento, o documento tal como um arquivo o guarda, que também é o que a exportação json escreve e o que os hosts oficiais salvam. Ele contém apenas as entidades ativas, sem as removidas, sem a ordem de empilhamento e sem o que o editor calcula por conta própria, como larguras medidas, marcas de chave e âncoras de relacionamento. As chaves de suas entidades seguem uma ordem fixa, ele é indentado com dois espaços e termina com uma quebra de linha, então o mesmo documento sempre gera os mesmos bytes.
Cada configuração cujo bloqueio está ativado é escrita com o valor em que está bloqueada, não como a tela a mostra. O bloqueio Viewport guarda originX, originY e zoomLevel, e Canvas Type, Language, Table Name Case, Column Name Case e Bracket Type guardam cada um sua própria configuração. Todas as outras configurações são escritas como estão, e lockSettings é sempre escrito. Consulte Settings para ver os bits.
Um documento novo tem todos os bloqueios ativados, seja o que um elemento mostra antes de receber um valor, seja um carregado a partir de um valor em branco. Seu value mantém a origem em 0, 0, o nível de zoom em 1, a aba ERD e a linguagem do Gerador de código, os estilos de nome e o tipo de delimitador padrão até que o bloqueio correspondente seja desativado.
Antes da 4.0.0, ele retornava o documento inteiro como o editor o mantinha, com ignoreSaveSettings aplicado. O documento tal como o editor o mantém agora é runtimeValue, e ignoreSaveSettings não é mais lido nem escrito.

const data = editor.value;

setter

Carrega um estado do editor salvo anteriormente. Ele substitui o documento inteiro — o atual é limpo primeiro.
Assim como clear(), setInitialValue() e os métodos setSchema* em seu mode: 'replace' padrão, ele também descarta a exibição Flow da aba Visualização: seu layout, as tabelas às quais ela está restrita, sua exibição de linhas, o zoom e o deslocamento. Um acréscimo (mode: 'append') não a descarta.
Ele é registrado na lista do histórico, o que habilita Undo, Redo, e emite change.
Ele aceita a forma de armazenamento, um runtimeValue ou um arquivo salvo por uma versão anterior.
Uma string em branco, ou qualquer coisa que não seja uma string, carrega um documento novo em vez de lançar um erro, então verifique o valor antes de atribuí-lo.
Esse documento novo é o mesmo que setInitialValue('') inicia: vazio, com as configurações padrão e, a partir da 4.0.0, com todos os bloqueios ativados. Na 3.10.x, ele não salvava nem a posição de rolagem nem o nível de zoom e, antes disso, salvava ambos.
Um armazenamento compartilhado retransmite esse carregamento aos colaboradores com o JSON completo do documento novo, então todo par, mesmo um de uma versão mais antiga, carrega 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 área visível fica onde o texto a coloca, ou sobre o diagrama quando nenhuma parte dele é desenhada ali. Para cada uma das outras configurações que o texto bloqueia — a aba, a linguagem do Gerador de código, os estilos de nome e o tipo de delimitador — o editor continua mostrando o que mostrava antes do carregamento. Uma configuração que o texto deixa desbloqueada assume o valor do texto. Já setInitialValue assume todos os valores que o texto contém; consulte-o também para um texto que não indica nenhum bloqueio.
Um texto que não é JSON, como um arquivo que ficou com marcadores de conflito de merge, também não lança erro: o documento é esvaziado, suas configurações ficam como estavam e o erro de análise é registrado no console.
Ele é ignorado enquanto readonly está definido; use setInitialValue para carregar em um editor somente leitura.

editor.value = 'json...';

runtimeValue

A partir da 4.0.0, obtém o documento como este editor o mantém, como uma string JSON. Ele não tem setter, então atribuí-lo lança um erro em código no modo estrito.
Ele traz o que value deixa de fora: as entidades removidas e sua ordem, a ordem de empilhamento, as larguras medidas, as marcas de chave, as âncoras de relacionamento e as sequências. As configurações bloqueadas também são escritas aqui com seus valores bloqueados.
Use-o para inicializar, por meio do setInitialValue dele, outro editor que entra em uma sessão já em andamento, como um colaborador ou uma segunda exibição do mesmo documento. Um desfazer de uma remoção que a sessão envie depois restaura então a entidade inteira ali, enquanto um editor inicializado a partir de value não contém nenhuma entidade removida e, em vez disso, restaura uma tabela vazia e sem nome. Consulte Edição colaborativa.
As entidades removidas não são mais coletadas, então elas permanecem nele até a próxima vez que o documento for aberto a partir de seu arquivo.
Nunca o escreva em um arquivo: salve value, que o JSON Schema aceita, ao contrário deste.

otherEditor.setInitialValue(editor.runtimeValue);

setInitialValue

Carrega um estado do editor salvo anteriormente. O carregamento em si não é registrado na lista do histórico, então não pode ser desfeito, e nenhum evento change é emitido.
Ele também limpa o histórico de desfazer, então nada feito antes do carregamento pode ser desfeito ou refeito sobre o documento carregado.
Ele aceita a forma de armazenamento, um runtimeValue ou um arquivo salvo por uma versão anterior e, ao contrário de atribuir value, assume todas as configurações que o texto contém, incluindo a aba e as configurações de código.
Uma string em branco, ou qualquer coisa que não seja uma string, carrega um documento novo em vez de lançar um erro, então 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 receber qualquer valor, tem todos os bloqueios ativados. Rolar, aplicar zoom, trocar de aba e alterar a linguagem do Gerador de código, os estilos de nome ou o tipo de delimitador deixam value como estava e não emitem change. Na 3.10.x, ele não salvava nem a posição de rolagem nem o nível de zoom e, antes disso, salvava ambos.
Um documento carregado a partir de texto mantém os bloqueios que indica. Um que não indica nenhum — qualquer arquivo salvo antes da 4.0.0, seja qual for o valor de seu ignoreSaveSettings, e um arquivo .vuerd v2 — abre com todos os bloqueios ativados, seu Viewport bloqueado na origem 0, 0 e no nível de zoom 1, na aba ERD, com sua linguagem, seus estilos de nome e seu tipo de delimitador como os salvou.
De qualquer forma, a área visível abre na área visível do documento — a que o texto salvou quando indica seus bloqueios, a origem 0, 0 no nível de zoom 1 quando não indica nenhum — ou sobre o diagrama quando nenhuma parte dele é desenhada ali. Um Viewport bloqueado ainda mantém seus valores bloqueados em value.
A partir da 4.0.0, ele também descarta o estado de colaboração do documento mantido antes, e um armazenamento compartilhado deste editor que já tenha assinado pede de novo o estado dos outros editores, para que um editor recarregado em uma sessão em andamento se atualize. Inicialize esse editor com o runtimeValue de outro editor.
Um texto que não é JSON também não lança erro: o documento é esvaziado, suas configurações ficam como estavam e o erro de análise é registrado no console.
Ao contrário de atribuir value, ele não é bloqueado por readonly, então é assim que se carrega um documento em um visualizador somente leitura.

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

Carregue ao iniciar, salve 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 mesmo eventos internos @dineug/erd-editor/internal-* para seu próprio funcionamento interno; eles não fazem parte da API.

change

Quando há alterações no editor, ele emite um evento.
O evento tem debounce de 200 ms e não é emitido enquanto readonly é true.
Ele é disparado por qualquer alteração no documento — uma edição na interface, atribuir value, clear(), cada um dos métodos setSchema* e, a partir da 4.0.0, setSchemaJSON() e Import and Add. setInitialValue não o emite.
Nada do que se faz no modo Flow da aba Visualização o emite — zoom, deslocamento da área visível, mover cartões, Tidy Up, a exibição de linhas ou restringir a exibição a partir de um cartão — porque nada disso é uma alteração no documento.
A partir da 4.0.0, uma alteração em uma configuração cujo bloqueio está ativado também não o emite, porque ela muda apenas a tela e nunca value: uma rolagem ou um zoom do canvas ERD enquanto Viewport está bloqueado, uma troca de aba enquanto Canvas Type está bloqueado e uma alteração da linguagem do Gerador de código, do estilo do nome da tabela, do estilo do nome da coluna ou do tipo de delimitador enquanto seu próprio bloqueio está ativado. Somente essas alterações ficam de fora, então um lote que também edita o documento ainda o emite. Bloquear ou desbloquear uma configuração o emite.
Todos os bloqueios estão ativados em um documento novo e em qualquer arquivo salvo antes da 4.0.0, então, por padrão, rolar, aplicar zoom e trocar de aba não emitem nada. Isso inclui focar em tabelas a partir da aba ERD, o botão de link externo do cartão que leva do Flow de volta à aba 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 outra aba. Cada uma dessas ações emite um change somente enquanto um bloqueio que a abrange está desativado: Canvas Type para a troca de aba e Viewport para a rolagem 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 faz. A partir da 4.1.0, cada uma dessas rolagens segue uma única regra, Onde um salto termina, então um resultado de tabela da pesquisa rápida não rola mais toda vez, e um salto que a regra deixa no lugar não faz nenhuma rolagem que o emita. Abrir, fechar ou redimensionar o explorador estreita ou alarga o canvas sem mover sua origem e também não emite nada. Antes da 4.0.0, rolar, aplicar zoom e trocar de aba sempre o emitiam, mesmo quando editor.value saía igual.
Para evitar gravações que não mudam nada, compare editor.value com o último valor que você armazenou, não com o arquivo que carregou: um arquivo escrito por uma versão anterior, um arquivo v2 ou um editado à mão pode sair diferente em value assim que é carregado, porque value o escreve na forma de armazenamento. O mesmo pode acontecer com um arquivo cujo bloqueio Viewport está desativado e cuja origem não desenha nenhuma parte do diagrama nesta tela: o carregamento move a área visível para o diagrama, e value escreve onde ela fica. A partir da 4.0.0, as larguras medidas não causam mais isso, porque value não contém nenhuma. Em vez disso, um host que escreve arquivos pode distinguir uma edição de uma mudança da área visível com o changed de um armazenamento de replicação — consulte on@change.
O evento não traz detail, não se propaga e não atravessa a fronteira do shadow root, então escute 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 pelo construtor de temas integrado ou, a partir da 4.0.0, por Theme na pesquisa rápida. Toda escolha o emite, incluindo a escolha da opção já em vigor.
Chamar você mesmo 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 solicitado. A partir da 4.0.0, seu appearance é 'system' enquanto System está escolhido, e não o claro ou o escuro que ele mostra, então armazene-o como está e devolva-o a setPresetTheme.

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

changeLocale

A partir da 4.0.0, emitido quando um idioma é escolhido no editor, pelo seletor de idioma ou por Display Language na pesquisa rápida, ambos ativados por enableLocalePicker.
Ele é disparado depois que o idioma é aplicado, a cada escolha, incluindo a escolha da opção já em vigor. setLocale e setSystemLocale nunca o emitem, nem uma mudança dos idiomas do navegador. Uma troca de idioma não emite change.
event.detail é { locale }, um LocaleOption: 'system' quando System foi escolhido e, caso contrário, o código do idioma. O elemento não memoriza a escolha, então armazene-a e passe-a a setLocale no próximo carregamento.
Assim como change, ele não se propaga, então escute no próprio elemento.

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

focus

Coloca o foco no editor.

editor.focus();

blur

Remove o foco do editor.

editor.blur();

clear

Esvazia o documento, removendo todas as tabelas, colunas, relacionamentos, índices e notas e, a partir da 4.0.0, todos os grupos de tabelas.
Todas as configurações permanecem, incluindo o banco de dados, a posição da área visível, o nível de zoom, as opções de exibição da tabela, cada bloqueio com o valor que guarda e os scripts Before tables e After tables da aba Esquema SQL, então um arquivo limpo continua salvando o que salvava. Para iniciar um documento novo em vez disso, atribua '' a value ou chame setInitialValue('').
Ele é registrado na lista do histórico, então pode ser desfeito, e emite change. Um desfazer traz o documento de volta como o editor o mantinha, cada configuração bloqueada com seu valor bloqueado. Ele é ignorado enquanto readonly está definido.

editor.clear();

destroy

Destrói completamente a instância do editor, de modo que ela não possa mais ser reutilizada.
Libera os listeners e as assinaturas do editor e destrói todos os armazenamentos compartilhados retornados por getSharedStore.
Um lote de fluxo que um armazenamento compartilhado ainda esteja retendo é descartado junto; chame antes o flushStreamBuffers desse armazenamento para enviá-lo.

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.
Somente os vinte e um nomes abaixo são escritos; qualquer outra coisa no objeto é ignorada, 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 vinculação deve ser um ShortcutOption[]. Uma string simples é ignorada, então escreva { addTable: [{ shortcut: 'Alt+KeyN' }] } em vez de { addTable: 'Alt+KeyN' }.
Um array vazio é aceito e não vincula 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 ainda abre a pesquisa rápida, o botão Explorer da barra de ferramentas ainda abre e fecha o explorador, e Toggle Explorer na pesquisa rápida e no menu de contexto do canvas ainda abre a pesquisa dele ou o fecha; nenhum deles mostra um atalho para um nome deixado vazio. { removeSelection: [] } deixa Delete e Backspace para a página, e os itens de exclusão dos menus de tabela, de nota e de grupo de tabelas (Delete, Delete selected, Delete column, Delete columns) passam a não mostrar 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. New Table Group na barra de ferramentas do canvas, no menu de contexto do canvas e na pesquisa rápida, Group selected tables no menu da tabela e Group Selected Tables na pesquisa rápida continuam funcionando, sem mostrar atalho. As dicas de ferramenta dos botões New Table, New Memo e New Table Group da barra de ferramentas do canvas indicam a primeira combinação de addTable, addMemo e addTableGroup, ou apenas o botão para uma vinculação deixada vazia.
A chamada é uma mesclagem parcial: os nomes que você omitir mantêm seus padrões, e chamar o método duas vezes mantém as alterações anteriores. Não há getter para as vinculações atuais: createKeyBindingMap retorna os padrõ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 ao cursor de texto: enquanto o foco está em um input, um textarea ou um contenteditable, $mod + A seleciona o texto, Space digita um espaço, Delete e Backspace apagam texto e T e depois G digitam as duas letras, em vez de chegar ao canvas. Nenhum desses pressionamentos tem a ação padrão impedida. Qualquer tecla a que você as reatribuir se comporta da mesma forma.

A partir da 4.0.0, removeSelection (Delete ou Backspace) remove a seleção na aba ERD como uma única etapa de desfazer, sem perguntar. Quando a tabela em foco é a única coisa selecionada, uma ou mais de suas colunas estão selecionadas e o zoom desenha 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 Exclusão de tabelas e notas.
Uma tecla mantida pressionada remove uma única 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 vinculações (consulte createKeyBindingMap), o pressionamento tem a ação padrão impedida em todas as abas enquanto o editor tem o foco, também em um botão da barra de ferramentas em foco, e em um editor somente leitura, onde não remove nada.

A partir da 4.1.0, addTableGroup (Alt+KeyG) prepara o desenho de New Table Group na aba ERD, cujo próximo pressionamento do botão principal no canvas desenha o grupo, e pressionar de novo cancela o desenho, como faz o botão New Table Group da barra de ferramentas do canvas. groupSelectedTables (KeyT KeyG, T e depois G) coloca as tabelas selecionadas em um novo grupo e abre o editor de nome dele, como faz 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 tabelas selecionadas.
Ambas só agem onde os menus oferecem um grupo: não enquanto readonly está definido, enquanto a opção de exibição 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. Assim como as outras vinculações do canvas, elas só agem na aba 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 do layout automático, Export image ou Map Columns está aberto. Onde não fazem nada, o pressionamento ainda tem a ação padrão impedida, a menos que groupSelectedTables ceda a vez ao cursor de texto. addTableGroup também tem a propagação interrompida, assim como focusView e zenMode, então o listener de keydown da página na fase de propagação nunca o recebe.

A partir da 3.10.0, findReplace ($mod+KeyF) abre o Localizar e substituir. A partir da 4.1.0, ela alterna o explorador que o contém, e a aba Atalhos a lista como Toggle Explorer.
Enquanto o botão Explorer da barra de ferramentas aparece pressionado (o explorador aberto na aba ERD e não oculto pelo modo zen), ela fecha o explorador, a menos que a pesquisa rápida, o painel Propriedades da tabela, o construtor de temas, o seletor de idioma, a caixa de diálogo Export image ou Map Columns esteja aberto. Caso contrário, ela fecha o que estiver aberto entre esses, traz a aba ERD a partir de qualquer outra aba e abre o explorador com o cursor de texto no campo Find e o termo de pesquisa selecionado. Um editor estreito demais para mostrar o explorador ao lado do canvas o mantém aberto, mas oculto, e mostra a notificação Widen the window to show the Explorer. Antes da 4.1.0, ela abria o painel flutuante Localizar e substituir, ou devolvia o teclado ao campo dele, e nunca o fechava.
Ela não cede a vez ao cursor de texto: enquanto o editor está em foco, ela é tratada em todas as abas, a partir do canvas ou de um input dentro do editor. O pressionamento tem a ação padrão impedida, então o navegador não abre nenhuma barra de localização, e a propagação interrompida, então nenhum listener de keydown da página na fase de propagação o 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, ela ainda tem a ação padrão impedida 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 do layout automático está aberto, em qualquer aba, ou enquanto um IME ainda está compondo, ela não tem a ação padrão impedida nem a propagação interrompida, então a localização do próprio navegador ou do host a recebe. Dentro do explorador, um pressionamento ainda em composição tem a propagação interrompida ali, embora não a ação padrão impedida. Qualquer tecla a que você reatribuir findReplace se comporta da mesma forma.

focusView age somente na aba ERD. Com pelo menos uma tabela selecionada, ela abre a aba Visualização no modo Flow, restrita a essas tabelas e a todas as tabelas a um relacionamento de distância; uma nota ou um grupo de tabelas selecionado não conta e, sem nenhuma tabela selecionada, ela não faz nada. Consulte Focar em tabelas.

stop (Escape) na aba ERD encerra um editor de célula ou de nota aberto, ou um relacionamento sendo desenhado, e deixa a seleção como está. A partir da 4.0.0, também encerra um editor de nome de grupo de tabelas, sem escrever nenhum nome, e um desenho de New Table Group. O editor chama preventDefault() nesse pressionamento.
Quando nenhum deles está aberto, Escape limpa a seleção e a célula em foco, e não tem a ação padrão impedida. Portanto, sair de uma edição e limpar a seleção exige dois pressionamentos.
Exceto no explorador, nos formatos de Import da tela de boas-vindas e nos seletores e caixas de diálogo abaixo, o editor nunca impede a propagação de Escape, então uma página que o escuta por conta própria, para fechar uma caixa de diálogo própria, por exemplo, recebe ambos os pressionamentos 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 do layout automático ou a viagem no tempo está aberto, Escape, em vez disso, fecha o que estiver aberto e deixa a seleção como está. Esse pressionamento também não tem a ação padrão impedida.
A partir da 4.0.0, uma caixa de diálogo Export image ou Map Columns aberta também recebe Escape, fechando-se e deixando a seleção como está. Cada uma toma o teclado quando se abre, e esse Escape tem tanto a ação padrão impedida quanto a propagação interrompida.
A partir da 4.1.0, um Escape pressionado com o foco dentro do explorador, em sua árvore, em seus campos ou em seus botões, devolve o teclado ao canvas e deixa o explorador aberto e a seleção como está. O editor chama tanto preventDefault() quanto stopPropagation() nele, então ele nunca chega ao listener de keydown da página na fase de propagação.
Um Escape no canvas nunca fecha o explorador. Antes da 4.1.0, um Escape dentro do painel Localizar e substituir o fechava, e um no canvas o fechava no mesmo pressionamento que limpava a seleção.
A partir da 4.0.0, o seletor de idioma e o seletor de cores se fecham com Escape: dentro deles, ele tem a ação padrão impedida e a propagação interrompida e, no canvas, ele os fecha no mesmo pressionamento que limpa a seleção, sem ter a ação padrão impedida nem a propagação interrompida.
Um Escape pressionado enquanto um IME ainda está compondo pertence à composição. Ele deixa um editor aberto como está e não tem a ação padrão impedida, então uma página também pode ignorar um pressionamento cujo isComposing é true, ou cujo keyCode é 229. Dentro do explorador, esse pressionamento, como qualquer tecla pressionada ali no meio de uma composição, também tem a propagação interrompida, e o teclado permanece no campo.
Antes da 3.9.2, um único Escape tanto encerrava uma edição ou um desenho quanto limpava a seleção, e o editor nunca impedia sua ação padrão.

createKeyBindingMap

A partir da 3.9.2, o pacote exporta createKeyBindingMap() e, com ela, os tipos KeyBindingMap, KeyBindingName e ShortcutOption.
Ela retorna as combinações de teclas padrão, todos os 28 nomes, incluindo os fixos, como um novo mapa a cada chamada, então alterar o mapa que ela retorna não altera mais nada.
É desse mapa que todo editor parte, e uma chamada a setKeyBindingMap não se reflete nele.
Somente 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 nomeia sua tecla pelo KeyboardEvent.code, em que $mod é ⌘ no macOS e Control nos demais sistemas.
A partir da 4.0.0, o próprio editor lê essas combinações, em vez de usar o tinykeys, na mesma sintaxe. Uma tecla corresponde pelo seu code, ou pelo seu key em maiúsculas ou minúsculas, e um pressionamento só corresponde quando estão pressionadas exatamente as teclas modificadoras que a combinação nomeia. AltGraph conta como Control e Alt no Windows e como Alt no macOS. Pressionamentos separados por um espaço formam uma sequência, que recomeça após um segundo sem keydown.
A partir da 4.1.0, um dos padrões é uma sequência: groupSelectedTables é KeyT KeyG, T e depois G. Uma sequência é executada no pressionamento que a completa, e somente esse pressionamento recebe seus preventDefault e stopPropagation, então, com os padrões, T chega à página e somente G tem a ação padrão impedida. Os menus, a pesquisa rápida e a aba Atalhos mostram uma sequência como uma tecla por pressionamento.
Os nomes fixos estão vinculados 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 demais são os padrões acima, entre eles search e findReplace.

O editor escuta essas combinações em seu próprio elemento, então um host que captura teclas antes do editor, com atalhos globais ou um listener de keydown na fase de captura, precisa deixá-las passar enquanto o editor está em foco.
Monte a lista do que deixar passar a partir de createKeyBindingMap(), com as vinculações que você passou a setKeyBindingMap no lugar dos padrõ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 sua própria localização nessa combinação passa setKeyBindingMap({ findReplace: [] }).
A partir da 4.0.0, ela também inclui Delete e Backspace sem modificadores. Um host que queira manter essas teclas passa setKeyBindingMap({ removeSelection: [] }).
A partir da 4.1.0, ela também inclui Alt+KeyG e a sequência KeyT KeyG, que vem como uma única string: divida-a no espaço e deixe passar cada pressionamento, incluindo T e G sem modificadores, já que uma sequência à qual falta um pressionamento nunca se completa. Um host que queira manter essas teclas passa setKeyBindingMap({ addTableGroup: [] }) ou setKeyBindingMap({ groupSelectedTables: [] }).

Enquanto o foco está dentro do explorador, em sua árvore, em seus campos Find e Replace ou em seus botões, findReplace, search, undo, redo, zoomIn, zoomOut e zoomReset passam para o editor, então findReplace age ali como no canvas. Todas as outras vinculações, como estão definidas no momento, param no explorador, uma sequência pelo seu último pressionamento (um G sem modificadores com os padrões), e o mesmo acontece com as teclas de seta, Tab, Enter, Space, Home, End e qualquer tecla pressionada enquanto um IME ainda está compondo. Exceto Escape, que devolve o teclado ao canvas, elas têm a propagação interrompida sem ter a ação padrão impedida, então agem como teclas comuns nos campos, nos botões e na árvore do explorador e não chegam nem ao canvas nem ao listener de keydown da página na fase de propagação: ali, 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 padrão impedida.
Qualquer outra tecla, como a combinação de salvar ou da paleta de comandos de um host, segue para a página como de costume. Consulte Teclas no explorador. Antes da 4.1.0, o painel flutuante Localizar e substituir retinha as teclas da mesma forma, exceto Home, End, o último pressionamento de uma sequência e Space enquanto handTool estava vinculada a outra tecla.
A partir da 4.0.0, o seletor de idioma retém as teclas da mesma forma: as mesmas sete vinculações passam, e todas as outras vinculações (a partir da 4.1.0, uma sequência pelo seu último pressionamento), as teclas de seta e Tab têm a propagação interrompida ali sem ter a ação padrão impedida, assim como qualquer tecla pressionada enquanto um IME ainda está compondo. ↑, ↓, Home, End, Enter e Space em uma de suas linhas percorrem as linhas ou escolhem uma e também têm a ação padrão impedida.

$mod

Troca a tecla Control conforme o ambiente.

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

Tabela de atalhos

Usa as propriedades key, code do evento de teclado.
Use code para posições absolutas e key para valores de entrada.

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

Tema

setPresetTheme

Define um tema predefinido.
Os padrões são appearance: 'dark', grayColor: 'slate' e accentColor: 'indigo'.
Cada campo é aplicado separadamente, então 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 lança erro.
A partir da 4.0.0, appearance também aceita 'system', o System do construtor de temas. Ele mostra o claro ou o escuro que o sistema operacional informa, ou o que setSystemAppearance indicar, e alterna quando isso 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 a aparência 'system' mostra, para um host com claro e escuro próprios, como o tema de uma IDE. Enquanto um deles está indicado, as mudanças do sistema operacional são ignoradas.
null, ou qualquer valor diferente de 'dark' ou 'light', volta a seguir o sistema operacional.
Enquanto a aparência é 'light' ou 'dark', ele não altera nada na tela, mas o valor é guardado e se aplica assim que a aparência passa a ser 'system'. Caso contrário, aplica-se imediatamente. Ele não emite nada, e changePresetTheme continua informando 'system'.
Os hosts do VS Code, da JetBrains e do Obsidian o chamam com seu próprio claro ou escuro, e de novo sempre que isso muda.

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

setTheme

Permite personalizar o tema.
Cada chamada substitui toda a camada sobreposta personalizada, então passe o objeto completo de novo para alterar um token sobre uma substituição existente, e passe {} para voltar ao tema predefinido.
Somente os nomes de token abaixo, com valores do tipo string, são mantidos; todo o resto é descartado sem erro.
A camada sobreposta fica sobre o tema predefinido, então um setPresetTheme posterior troca o tema predefinido por baixo enquanto suas substituições permanecem.

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 tabelas e notas projetam no canvas ERD. O tema predefinido escuro os deixa como transparent, o que não projeta sombra, assim como passar none ou uma string vazia a setTheme; o tema predefinido claro usa rgba(0, 0, 0, 0.18).

A partir da 4.0.0, há mais nove tokens:

• tableGroupHeaderBackground, tableGroupBackground e tableGroupBorder colorem a barra de título, o corpo e o contorno de um grupo de tabelas que não tem cor própria.
• toastSuccess e toastError colorem a marca de uma notificação que informa como algo terminou.
• findReplaceError e mapColumnsError colorem os erros que o Localizar e substituir e a caixa de diálogo Mapear colunas mostram. Antes, o Localizar e substituir usava diffDeleteForeground, então substituir esse token não muda mais a cor dele.
• schemaSqlWarningBackground e schemaSqlWarningForeground colorem os avisos nas opções da aba Esquema SQL.

A partir da 4.1.0, há mais nove tokens:

• treeBackground, treeRowHover, treeRowCurrent, treeMuted e treeMatch colorem a árvore que o explorador e o visualizador de diferenças compartilham: seu fundo, que também preenche os campos Find e Replace do explorador; uma linha sob o ponteiro, a linha 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 esmaecido, como contadores, tipos de dados e as setas de recolher e expandir; e a marca atrás do texto que uma pesquisa encontrou.
• explorerBackground e explorerBorder colorem o painel do explorador e suas linhas: sua borda ao lado do canvas, a linha sob a pesquisa e as bordas de seus campos e dos botões que Search In expande. explorerBorder também desenha a borda da árvore do visualizador de diferenças, a linha sob seu campo Filter by name e a borda desse campo. Os ícones de chave do explorador usam keyPK, keyFK e keyPFK.
• diffModifyForeground e diffRenameForeground colorem o que o visualizador de diferenças marca como alterado e renomeado, em sua árvore e nos dois documentos. diffModifyForeground também contorna uma tabela, nota ou grupo de tabelas que foi movido, redimensionado, teve a cor mudada ou mudou de grupo, independentemente do que mais tenha mudado nele, e desenha o conector de uma chave estrangeira que mudou.

diffInsertForeground e diffDeleteForeground agora colorem o que o visualizador de diferenças marca como adicionado e removido, em sua árvore e no documento que o contém, tanto em textos quanto em contornos e conectores. diffInsertBackground, diffDeleteBackground, diffCrossBackground e diffCrossForeground foram removidos na 4.1.0, pois o visualizador de diferenças não preenche mais células. setTheme os descarta como qualquer outro nome que não está em Theme, e seus hooks, --erd-editor-diff-insert-background, --erd-editor-diff-delete-background, --erd-editor-diff-cross-background e --erd-editor-diff-cross-foreground, não são mais lidos.

Variáveis CSS

Todo token em Theme tem um hook CSS correspondente chamado --erd-editor- mais a 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 pelo editor, então defina-os onde quiser que se apliquem. Em :root, eles aplicam o tema a todos os editores da página; no próprio elemento, aplicam o tema apenas a ele.

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

A partir da 3.4.0, os tokens dargSelect, com erro de grafia, passaram a se chamar dragSelect, e seus 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 use os nomes antigos é ignorada.

Valores padrão 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 exibição

A partir da 4.0.0, o próprio texto do editor — seus menus, painéis, caixas de diálogo, a pesquisa rápida, as notificações e as palavras que ele desenha no diagrama, como unnamed, incluindo as exportações de imagem — está disponível em 25 idiomas. Nomes de tabelas e colunas, SQL, tipos de dados e código gerado nunca são traduzidos. Consulte Idioma e tema.
Antes de setLocale ser chamado ou de um idioma ser escolhido, o editor mostra o inglês, ou segue 'system' enquanto enableLocalePicker está ativado.
O editor define lang e dir em sua própria raiz dentro do shadow root fechado, nunca no elemento host nem na página, então 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 diagrama em si nunca é espelhado. A partir da 4.1.0, o explorador fica à esquerda do canvas em todos os idiomas, com suas próprias linhas lidas 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	Exibido 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	Holandês
pl-PL	Polski	Polonês
pt-PT	Português	Português
pt-BR	Português Brasileiro	Português brasileiro
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 exibição: 'system' ou um dos códigos acima. Qualquer outra coisa, como um 'ko' isolado, um código desconhecido ou um valor que não seja uma string, é ignorada sem erro.
Ele se aplica antes de retornar, então um idioma definido antes de o elemento ser anexado já aparece em seu primeiro quadro.
Ele não emite nada, nem changeLocale nem change, e não toca em value, no histórico de desfazer nem em um armazenamento compartilhado.
A escolha permanece, esteja enableLocalePicker ativado ou desativado, e setLocale('system') segue o sistema também com o seletor desativado.
O editor não armazena nada. Para manter a escolha de um usuário, escute changeLocale e passe-a de volta no próximo carregamento.

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 tag BCP 47, para um host com idioma de exibição próprio. Os hosts do VS Code, da JetBrains e do Obsidian o chamam com seu próprio idioma de exibição.
A tag tem os espaços das extremidades removidos. null, uma string em branco ou um valor que não seja uma string volta ao navigator.languages do navegador, que o editor acompanha conforme ele muda.
Ele só importa enquanto a opção em vigor é 'system', e se aplica imediatamente. A linha System do seletor indica o idioma para o qual a opção é resolvida.
A tag, ou cada um dos idiomas do navegador em ordem, é resolvida para o primeiro idioma que o editor tem, pela sua subtag de idioma, ignorando maiúsculas e minúsculas e sublinhados: de-AT resulta em de-DE e en-GB resulta em en. O chinês é resolvido pela escrita, com Hant resultando em zh-TW e Hans em zh-CN, e, sem escrita, pela região, com TW, HK e MO resultando em zh-TW e qualquer outra em zh-CN. pt resulta em pt-BR, a menos que seja indicada uma região diferente de BR. Quando nada corresponde, o editor mostra o inglês.

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

setSchemaSQL

Carrega um arquivo de Esquema SQL.
Por padrão, ele substitui o documento atual em vez de mesclar com ele; consulte mode abaixo. As configurações que você já tem são mantidas, incluindo cada bloqueio e seu valor bloqueado, exceto a posição da área visível e o nível de zoom, e as tabelas são posicionadas depois que o arquivo é lido, em linhas, a menos que placement abaixo peça outra coisa. Com Viewport bloqueado, value passa a escrever a área visível em que a importação começa, a origem 0, 0 no nível de zoom 1. Portanto, um documento importado em um elemento que nunca recebeu um valor tem todos os bloqueios ativados, como um documento novo.
Ele é registrado na lista do histórico, o que habilita Undo, Redo, e emite change. Uma string vazia é ignorada, e a chamada não faz nada enquanto readonly está definido.
setSchemaGraphQL, setSchemaDBML e setSchemaAML se comportam da mesma forma, e seus parsers nunca falham: um texto que eles não conseguem ler carrega um documento vazio em vez de lançar um erro.
A partir da 4.0.0, os quatro aceitam um segundo argumento opcional, { placement, mode }:

• placement: 'grid', o padrão, coloca as tabelas em linhas imediatamente, como antes, e a chamada não retorna nada.
• placement: 'auto' primeiro organiza as tabelas pelos seus relacionamentos, como faz Import no editor, e retorna uma Promise que é resolvida quando a importação tiver sido aplicada como uma única etapa de desfazer. Menos de duas tabelas, nenhum relacionamento, um layout que falha, uma página sem SharedWorker ou Cancel na notificação Placing tables fazem com que, em vez disso, elas sejam colocadas em linhas. Um carregamento nesse meio-tempo — outra importação que substitui, atribuir value, setInitialValue(), clear(), o carregamento de um colaborador, ou um desfazer ou refazer de um carregamento ou de clear() — a anula, e a Promise é resolvida sem nada carregado. As importações posicionadas dessa forma são aplicadas na ordem em que começaram.
• mode: 'replace', o padrão, substitui o documento. mode: 'append' adiciona o arquivo abaixo do diagrama, como faz Importar e adicionar, deixando como estão todas as tabelas que já existem e todas as configurações, exceto a aba e a posição da área visível. A partir de outra aba, a aba ERD aparece primeiro. As novas tabelas, e os grupos de tabelas que um arquivo DBML traz enquanto os grupos de tabelas são exibidos, passam a ser a seleção, e a área visível rola até eles, a menos que já estejam bem visíveis, pela regra que todo salto segue a partir da 4.1.0 — consulte Onde um salto termina. Um único desfazer remove toda a adição. Um texto que ele não consegue ler não adiciona nada e deixa o documento como está.

Enquanto readonly está definido, uma substituição é ignorada, um acréscimo não adiciona nada e uma chamada com placement: 'auto' é resolvida imediatamente.
A partir da 3.10.0, setSchemaSQL lê o arquivo de acordo com o banco de dados atual do documento: com Databricks selecionado, strings entre aspas simples seguem os escapes 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 único índice único, em vez de 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 estrangeiras que leem.
A partir da 4.0.0, setSchemaSQL mantém a expressão DEFAULT inteira de uma coluna, lê o ADD DEFAULT … FOR do SQL Server e seus comentários MS_Description, transforma colunas serial e identity do PostgreSQL em Incremento automático, mantém UNSIGNED e ZEROFILL em um 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 arquivos para ver a sintaxe que cada parser 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 tipo de objeto se tornam tabelas, e um campo cujo tipo é outra tabela se torna um relacionamento.

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

setSchemaDBML

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

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

setSchemaAML

Carrega um arquivo AML (Azimutt Markup Language). Tanto a grafia atual quanto a grafia legada da v1 são aceitas.
A partir da 4.0.0, a cor de uma entidade, um dos nomes de cor do Azimutt ou um valor hexadecimal entre aspas, se torna a cor de sua tabela. Consulte AML.

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

setSchemaJSON

A partir da 4.0.0, carrega um documento .erd.json, como o texto que value retorna.
Em seu mode: 'replace' padrão, ele carrega o documento como faz a atribuição de value: é registrado na lista do histórico, emite change e assume os bloqueios do documento da mesma forma. Ao contrário de value, uma string vazia ou um valor que não seja uma string é ignorado em vez de iniciar um documento novo. Um texto que não é JSON esvazia o documento, como acontece com value.
mode: 'append' adiciona as tabelas, os relacionamentos, os índices, as notas e os grupos de tabelas do documento abaixo do diagrama com novos ids, mantendo suas posições relativas entre si e deixando de fora as configurações do documento, como faz Importar e adicionar com um arquivo json. Um texto que ele não consegue ler, ou um documento sem nenhuma tabela e nenhuma nota, não adiciona nada. Caso contrário, é aplicado como um acréscimo de setSchemaSQL, com suas novas notas e seus novos grupos de tabelas selecionados junto com as tabelas, cada tipo enquanto estiver exibido.
Ele retorna depois que o documento é aplicado 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, ele opera com base no fornecedor definido no momento. Um nome que não está na lista abaixo é tratado da mesma forma, sem lançar erro.
Os nomes são delimitados com o tipo de delimitador que o editor mostra. Enquanto Bracket Type está bloqueado, ele pode ser diferente do que value salva, que é o tipo com que o erd_read de um agente de codificação delimita os nomes.
A partir da 4.0.0, um argumento opcional options escolhe as instruções e o cabeçalho, como fazem as opções da aba Esquema SQL. SchemaSQLOptions é exportado como tipo.

• statements: 'create', o padrão; 'ifNotExists', que escreve IF NOT EXISTS no MySQL, MariaDB, PostgreSQL, SQLite e Databricks e recorre a 'create' nos demais; ou 'recreate', que exclui as tabelas antes de criá-las, sendo que o Snowflake escreve CREATE OR REPLACE TABLE em vez disso.
• header: 'none', o padrão; 'use', que muda para o banco de dados ou esquema do documento; ou 'createAndUse', que primeiro o cria, se não existir, e depois muda para ele. Um banco de dados que não oferece o cabeçalho pedido recorre a uma alternativa como a aba faz: o Oracle escreve 'use' para 'createAndUse', o PostgreSQL não escreve cabeçalho para 'use' e o SQLite não escreve nenhum. Um cabeçalho só é escrito enquanto o nome do banco de dados do documento é um identificador simples — letras ASCII, dígitos e _, sem começar com um dígito.

Uma opção omitida, ou com um valor desconhecido, é lida como seu padrão, então uma chamada sem opções escreve instruções CREATE simples sem cabeçalho, como antes.
A partir da 4.0.0, a saída sempre inclui os scripts Before tables e After tables do documento, na ordem: cabeçalho, script antes das tabelas, instruções DROP, tabelas, script depois das tabelas. As escolhas Statements, Header e Tables da própria aba Esquema SQL nunca afetam esta chamada, que sempre escreve o documento inteiro.
A partir da 3.10.0, cada chave estrangeira traz as cláusulas ON DELETE e ON UPDATE do relacionamento. Uma cláusula só é escrita quando sua ação está definida e o fornecedor a aceita, então uma ação que esse fornecedor não aceita fica de fora e se aplica o padrão. A partir da 4.0.0, o Snowflake aceita apenas NO ACTION. Consulte ON DELETE e ON UPDATE para ver o que cada banco de dados escreve.
A partir da 3.10.0, uma aspa simples dentro de um comentário de tabela ou de coluna é escapada, então um comentário como it's não quebra mais a instrução. Todo fornecedor que escreve comentários como literais de string a duplica, exceto o Databricks, que coloca uma barra invertida antes de cada aspa e de cada barra invertida. O SQLite continua escrevendo os comentários como linhas --.
A partir da 4.0.0, vários bancos de dados também escrevem nomes de chave, valores padrão e incremento automático de forma diferente. 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

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

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

setDiffValue

Abre o visualizador de diferenças, comparando o documento aberto no momento com o que você passar.
Ele não retorna nada e não modifica o documento, então fechar o visualizador deixa o editor exatamente como estava.
Um valor em branco, ou qualquer coisa que não seja uma string, é comparado com um documento vazio.
É a mesma camada sobreposta que o item Visualizador de diferenças do menu de contexto do canvas.
A partir da 4.1.0, ele emparelha o conteúdo dos dois documentos primeiro pelo id e só depois pelo que cada item 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 de seu arquivo, uma renomeação aparece, portanto, como um único item renomeado; em comparação com um documento cujos ids são diferentes, aparece como uma remoção e uma adição. O visualizador lista o que mudou em uma árvore ao lado dos dois documentos e marca as alterações em cores em vez de preencher células.

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