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 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؛
• متن سندی نیست که تجزیه‌گر بتواند بخواند: خطای تجزیه‌گر، و برای متنی که JSON نیست یک SyntaxError.

کادر گفت‌وگوی Export image

کادر گفت‌وگو و toImage() از طریق همان صادر کردن رسم می‌کنند، بنابراین با گزینه‌های یکسان همان تصویر را می‌نویسند، اما از جاهای متفاوتی شروع می‌کنند:

	کادر گفت‌وگوی Export image	toImage()
سند	نمودار آن‌طور که هنگام باز شدن کادر بود	متنی که می‌دهید
حالت تیره	با ظاهر ویرایشگر شروع می‌شود و تا وقتی با آن هماهنگ است رنگ‌های خود صفحه را رسم می‌کند	خاموش مگر اینکه darkMode برابر true باشد، و همیشه پیش‌تنظیم
نمایش نام‌ها	همان که ویرایشگر نشان می‌دهد	همان که سند ثبت کرده است
زبان واژه‌های خود نمودار	زبان نمایش ویرایشگر	انگلیسی
نتیجه	از طریق مرورگر یا callback صادر کردن ذخیره می‌شود، یا در کلیپ‌بورد کپی می‌شود	به شما برگردانده می‌شود؛ هیچ‌یک از دو callback فایل فراخوانی نمی‌شود

Copy to clipboard معادلی ندارد. صفحه‌ای که یکی بخواهد Blob از نوع PNG را خودش در کلیپ‌بورد می‌نویسد.