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 має розмір діаграми незалежно від масштабу.

toImage() не читає жодного іншого ключа, тож ключ, якого немає в таблиці, нічого не змінює.

Що він малює

Зображення — те саме, яке малює діалогове вікно:

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

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

• Його кольори — це готова тема з типовими для елемента сірим і акцентом, slate та indigo, світла, якщо darkMode не дорівнює true. Жодна тема сторінки, жодне перевизначення setTheme і жодна зміна в конструкторі теми до нього не доходять.
• Його таблиці й стовпці названо у відображенні назв, яке має документ, а для файлу з ввімкненим блокуванням Name View це заблоковане.
• Слова, які діаграма малює сама, як-от заповнювач назви безіменної таблиці, — англійською.

Де він працює

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

Він малює у спільному воркері експорту зображень, де хост його запускає, як і діалогове вікно, тож сторінка тим часом залишається чутливою, і в головному потоці, коли воркера немає або він не відповів вчасно, — див. Web Workers.
Збірка, що імпортує 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, і завжди готова тема
Відображення назв	Те, яке показує редактор	Те, яке має документ
Мова власних слів	Мова інтерфейсу редактора	Англійська
Результат	Зберігається через браузер або функцію зворотного виклику для експорту чи копіюється в буфер обміну	Повертається вам; жодна з функцій зворотного виклику для файлів не викликається

Copy to clipboard не має відповідника. Сторінка, якій він потрібен, сама записує PNG Blob у буфер обміну.