toImage

Начиная с версии 5.0.0 корень пакета экспортирует toImage(), которая рисует документ в виде PNG или SVG без редактора на странице.
Она записывает те файлы, которые записывают кнопки PNG и SVG окна Export image, с тремя параметрами окна — Background, Dark mode и Scale — и никакими другими.

function toImage(
  value: string,
  options: ToImageOptions & { format: 'png' }
): Promise<Blob>;
function toImage(
  value: string,
  options: ToImageOptions & { format: 'svg' }
): Promise<string>;

type ToImageOptions = {
  format: 'png' | 'svg';
  background?: boolean;
  darkMode?: boolean;
  scale?: 1 | 2 | 3;
};

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

const value = await (await fetch('/diagrams/shop.erd.json')).text();

const png = await toImage(value, { format: 'png', scale: 3 });
const svg = await toImage(value, { format: 'svg', darkMode: true, background: false });

ToImageOptions экспортируется рядом как тип — см. Точки входа.

value

Текст документа: то, что содержит файл .erd.json, value или runtimeValue редактора либо любой другой текст, который загружает setInitialValue.
Пустой текст или одни лишь пробельные символы рисуют пустую диаграмму, как и JSON, не содержащий ни одного поля документа, которые разбор заполняет значениями по умолчанию.

Параметры

Параметр	По умолчанию	Описание
format	Нет; обязателен	'png' разрешается в Blob типа image/png, 'svg' — в разметку SVG в виде строки.
background	true	Закрашивает цветом холста фон за диаграммой. false оставляет его прозрачным, в том числе прямоугольник под меткой ON DELETE или ON UPDATE.
darkMode	false	Рисует темное оформление вместо светлого.
scale	2	1, 2 или 3 пикселя изображения на единицу диаграммы при 100%. Он задает размер одного лишь PNG; SVG имеет размер диаграммы при любом scale.

toImage() не читает никаких других ключей, поэтому ключ, которого нет в таблице, ничего не меняет.

Что она рисует

Изображение — то же, которое рисует окно:

• Вся диаграмма, обрезанная до нарисованного плюс поле и всегда в масштабе 100%, при каком бы масштабе ни был сохранен документ, поэтому каждая таблица рисуется целиком. То, что View Option скрывает в документе, не рисуется и не получает места, группы таблиц рисуются позади всего остального, а цвета, которые проверки словаря дают именам, не рисуются.
• PNG имеет размер диаграммы при 100%, умноженный на scale. Слишком большой для холста браузера записывается с пониженным разрешением, а не завершается сбоем, и toImage() об этом не сообщает.
• SVG сохраняет текст как текст и называет шрифты, а не встраивает их, поэтому просмотрщик без шрифта редактора рисует другим. Тени опускаются.

Там, где окно берет экран редактора, toImage() берет один лишь документ, поэтому документ рисуется одинаково на любой странице:

• Его цвета — это предустановка серого и акцентного цвета элемента по умолчанию, slate и indigo, светлая, если только darkMode не равен true. До нее не доходит ни тема страницы, ни переопределение через setTheme, ни изменение в конструкторе темы.
• Его таблицы и столбцы названы в режиме отображения имен, который хранит документ, а для файла с включенной блокировкой Name View это заблокированный режим.
• Слова, которые диаграмма рисует сама, например заполнитель безымянной таблицы, на английском.

Где она работает

toImage() нужна страница браузера, поскольку она измеряет и рисует на холсте. Корню пакета, из которого она экспортируется, для загрузки нужен DOM, поэтому из Node или Web Worker до нее не добраться — см. Серверный рендеринг.
Она ждет, пока шрифты страницы закончат загружаться, прежде чем рисовать.

Она рисует в общем воркере экспорта изображения там, где хост его запускает, как это делает окно, поэтому страница все это время остается отзывчивой, а в основном потоке — там, где воркера нет или он не ответил вовремя, — см. Web Worker.
Бандл, который импортирует toImage и ни одного элемента, несет один лишь воркер экспорта изображения.
Ни одна из сборок для тега script ее не несет: в window.ErdEditor и window.ErdViewer нет toImage.

Отклонения

Возвращаемый ею Promise отклоняется до того, как что-либо нарисовано, когда:

• на странице нет document: Error, toImage needs a browser, since it draws on a canvas;
• value не является строкой, например документ, уже разобранный в объект: TypeError;
• параметр содержит значение, которого нет в таблице Параметры, в том числе отсутствует format, и так же scale, равный '2', переданный вместе с SVG: TypeError с названием параметра, например toImage: scale cannot be 4;
• текст не является документом, который может прочитать разбор: ошибка разбора, SyntaxError для текста, не являющегося JSON.

Окно Export Image

Окно и toImage() рисуют через один и тот же экспорт, поэтому с теми же параметрами записывают одно и то же изображение, но начинают с разных мест:

	Окно Export image	toImage()
Документ	Диаграмма в том виде, в каком она была при открытии окна	Переданный вами текст
Темный режим	Изначально совпадает с оформлением редактора и, пока совпадает, рисует цвета самого экрана	Выключен, если только darkMode не равен true, и всегда предустановка
Name View	Тот, что показывает редактор	Тот, что хранит документ
Язык собственных слов	Язык интерфейса редактора	Английский
Результат	Сохраняется через браузер или колбэк экспорта, либо копируется в буфер обмена	Возвращается вам; ни один из файловых колбэков не вызывается

У Copy to clipboard нет аналога. Странице, которой он нужен, нужно самой записать Blob с PNG в буфер обмена.