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 – ראו רינדור בצד השרת.
היא ממתינה לסיום טעינת הגופנים של הדף לפני שהיא מציירת.

היא מציירת ב-worker המשותף של ייצוא התמונות היכן שהמארח מריץ כזה, כפי שהתיבה עושה, כך שהדף נשאר מגיב בינתיים, ובתהליכון הראשי היכן שאין כזה או שה-worker אינו עונה בזמן – ראו Web Workers.
חבילה שמייבאת את toImage וללא אלמנט נושאת את ה-worker של ייצוא התמונות בלבד.
אף אחד משני ה-builds של תגית 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()
מסמך	התרשים כפי שהיה כשהתיבה נפתחה	הטקסט שאתם מעבירים
Dark mode	מתחיל בהתאמה למראה של העורך, וכל עוד הוא תואם מצייר את הצבעים של המסך עצמו	כבוי אלא אם darkMode הוא true, ותמיד ערכת הנושא של ברירת המחדל
תצוגת השמות	זו שהעורך מציג	זו שהמסמך מחזיק
שפת המילים שלה עצמה	שפת התצוגה של העורך	אנגלית
תוצאה	נשמרת דרך הדפדפן או דרך פונקציית ה-callback של הייצוא, או מועתקת ללוח	מוחזרת לכם; אף אחת משתי פונקציות ה-callback של הקבצים אינה נקראת

ל-Copy to clipboard אין מקבילה. דף שרוצה כזו כותב את ה-Blob של ה-PNG ללוח בעצמו.