דילוג לתוכן הראשי

ErdViewerElement

החל מגרסה 5.0.0, החבילה מפיצה גם את <erd-viewer>, תצוגה של מסמך לקריאה בלבד: קורא מזיז את התצוגה, מתקרב, מחפש ומאיר קשרים, ודבר בו אינו עורך. הוא מצייר את בד הציור של ERD בלבד, עם פסי הגלילה שלו, מפת מיני, סרגל פקדים ולוח פקודות שמחפש במסמך, ואין בו סרגל כלים, כרטיסיות, סייר או תפריט הקשר.

import '@dineug/erd-editor/erd-viewer.js';
<erd-viewer src="/diagrams/shop.erd.json" style="display: block; height: 480px"></erd-viewer>

המסגרת שלמעלה היא האלמנט הזה כפי ש-erd-editor.io/embed מציג אותו, כאן עם דוגמת חנות הספרים: יש ללחוץ עליה כדי להעביר אליה פוקוס, ואז להתקרב ולחפש באמצעות המקשים שבפוקוס ומקשים, וראו הטמעה כדי למסגר מסמך משלכם בלי קוד.

המציג הוא HTMLElement רגיל.
הגדרת הטיפוס שלו היא כדלקמן.

interface ErdViewerElement extends HTMLElement {
  src: string;
  nameView: 'physical' | 'logical' | 'both' | null;
  minimap: boolean;
  controls: boolean;
  value: string;
  setPresetTheme: (themeOptions: Partial<ThemeOptions>) => void;
  setSystemAppearance: (appearance: 'dark' | 'light' | null) => void;
  setTheme: (theme: Partial<Theme>) => void;
  setLocale: (locale: LocaleOption) => Promise<void>;
  setSystemLocale: (locale: string | null) => Promise<void>;
  destroy: () => void;
}

ייבוא של @dineug/erd-editor/erd-viewer.js מגדיר את <erd-viewer> ומשאיר את <erd-editor> לא מוגדר. ייבוא שורש החבילה אינו מגדיר אף אחד מהם: הוא מייצא את המחלקה ErdViewerElement ואת defineErdViewer(), שמגדירה את התגית במקום שבו קוראים לה, כך שדף יכול גם להגדיר את המחלקה תחת תגית משלו – ראו רישום האלמנטים.
כל נקודת כניסה מלבד engine.js ו-peer.js צריכה DOM, גם זו, ולכן דף שמרונדר בצד השרת מייבא אותה בצד הלקוח – ראו רינדור בצד השרת.
ייבוא נקודת הכניסה מוסיף את erd-viewer ל-HTMLElementTagNameMap, ולכן document.createElement('erd-viewer') ו-document.querySelector('erd-viewer') מוגדרים כ-ErdViewerElement בלי המרת טיפוס.

כמו העורך, המציג מרנדר לתוך shadow root סגור, ולכן viewer.shadowRoot הוא null וסגנונות הדף אינם דולפים פנימה או החוצה; מעצבים אותו באמצעות setTheme ומשתני ה-CSS --erd-editor-*. כמה מציגים בדף אחד שומרים כל אחד מסמך, תצוגה, ערכת נושא ושפה משלו.
ל-<erd-viewer> אין גודל מובנה. אלמנט מותאם אישית הוא inline, ולכן יש לתת לו display: block וגובה, כמו למעלה. התצוגה ממלאת את התיבה של האלמנט ועוקבת אחרי שינוי הגודל שלה, ושומרת על הזום שלה.

src, name-view, minimap ו-controls הן התכונות היחידות שלו, ולכל אחת מהן יש מאפיין באותו שם, nameView עבור name-view. value הוא מאפיין בלבד.
value, src, nameView, minimap או controls שהוגדרו על האלמנט לפני שהתגית שלו הוגדרה, למשל על ידי מסגרת עבודה שמרנדרת את האלמנט לפני שנקודת הכניסה נטענה, נקלטים ברגע שהתגית מוגדרת, ועוקפים את התכונות שהסימון נתן לו. הם נקלטים בסדר שבו הדף כתב כל אחד מהם לראשונה, ולכן המאוחר מבין value ו-src גובר. value שאינו מכיל מסמך אין אז קורא שאפשר לזרוק אליו: הוא מדווח כשגיאה שלא נתפסה, והמציג נשאר ריק.

ה-build של תגית script, dist/erd-viewer.umd.js, מכיל את המציג בלבד עם כל התלויות. הוא מגדיר את <erd-viewer> ומציב את ErdViewerElement ואת defineErdViewer על window.ErdViewer. כתובת CDN בלי נתיב מגישה במקום זאת את ה-build של העורך, ולכן יש לציין את הקובץ – ראו תגית script.

<erd-viewer src="diagram.erd.json" style="display: block; height: 480px"></erd-viewer>
<script src="https://cdn.jsdelivr.net/npm/@dineug/erd-editor@5.0.0/dist/erd-viewer.umd.js"></script>

src​

כתובת ה-URL של מסמך שהמציג יביא ויציג. ברירת המחדל היא '', כלומר אין.
ההבאה היא fetch() רגילה, GET בלי אפשרויות משלה, ולכן כללי ה-CORS של הדפדפן חלים עליה: מסמך במקור אחר צריך שרת שמתיר את המקור של הדף, ועוגיות נשלחות רק למקור של הדף עצמו. כתובת יחסית נפתרת ביחס לדף.
התשובה צריכה להכיל מסמך כפי שקובץ .erd.json מכיל, צורת האחסון ש-value של העורך וכל הסביבות המארחות הרשמיות כותבים. פורמט אחר אינו נקרא: קובץ SQL, GraphQL, DBML או AML נכשל כטקסט שאינו מנותח.
מסמך שמנותח נוחת מותאם לתצוגה ומשגר load. בקשה שהרשת או CORS דחו, תשובה שאינה ok או טקסט שאינו מנותח משגרים error ומשאירים תרשים ריק – ראו טעינה.

רק הבקשה האחרונה נחשבת. src חדש מבטל את ההבאה שעדיין רצה, כך שתשובה איטית לעולם אינה נוחתת מעל מסמך מאוחר יותר. השמה ל-value מבטלת אותה גם כן, וכך גם הסרת src או הגדרתו ל-'', שמפסיקה לעקוב אחריו ומשאירה את המסמך המוצג כפי שהיה.
מה מבין value ו-src שהוגדר אחרון גובר, דרך המאפיין או דרך התכונה כאחד. src שנכתב אחרי value מובא גם כשהוא מציין את הכתובת שהובאה קודם. אם הוא נכתב שוב מעל המסמך שהוא כבר מציג, דבר אינו מובא.
המציג מביא רק כל עוד הוא בדף. הוצאתו מבטלת הבאה שעדיין רצה, והחזרתו מביאה src שעוד לא הוצג, כולל כזה שנכשל, ולעולם לא כזה שהוא כבר מציג.
src הוא ה-fetch() היחיד שהחבילה מבצעת, ולכן מדיניות אבטחת תוכן מחמירה מונה את המקור של המסמך ב-connect-src.

viewer.src = 'https://example.com/diagrams/shop.erd.json';
// or
viewer.setAttribute('src', 'https://example.com/diagrams/shop.erd.json');
<erd-viewer src="https://example.com/diagrams/shop.erd.json"></erd-viewer>

value​

getter​

מאחזר את המסמך המוצג, בין אם בא מ-src ובין אם מ-value, כמחרוזת JSON בצורת האחסון ש-value של העורך כותב. לפני שמוצג דבר הוא מסמך חדש וריק, ששדה ה-doc שלו הוא {}.
כל עוד נעילת Viewport של המסמך מופעלת, כמו במסמך חדש, הוא כותב את הזום והגלילה שהמסמך נעול עליהם, לכל מקום שהקורא הזיז את התצוגה. רק כשהנעילה הזו כבויה הוא כותב היכן התצוגה עומדת, כולל ההתאמה שנחיתה עושה.
הוא כותב את תצוגת השמות שהמסמך מחזיק, לעולם לא את זו ש-nameView או סרגל הפקדים מציגים מעליה, גם במסמך שהנעילה Name View שלו כבויה.
הוא עדיין מחזיר את המסמך אחרי destroy.

const data = viewer.value;

setter​

מציג מסמך מהטקסט שלו, מחליף את המוצג, ומתאים אותו לתצוגה – ראו טעינה. הוא מקבל את הטקסט שקובץ או value של העורך מכילים.
טקסט שאינו מנותח זורק לפני שמשתנה דבר, והמסמך המוצג נשאר: SyntaxError עבור טקסט שאינו JSON, TypeError עבור JSON שאינו מכיל מסמך, כמו 7. מחרוזת ריקה, או כל דבר שאינו מחרוזת, מציגים תרשים ריק.
השמה אליו מבטלת הבאה של src שעדיין רצה, ואינה משגרת לא load ולא error.

viewer.value = localStorage.getItem('my-diagram') ?? '';

nameView​

מציג את התרשים בתצוגת שמות מעל זו שהמסמך מחזיק: 'physical' עבור Physical Names, 'logical' עבור Logical Names או 'both' עבור Both Names. null, ברירת המחדל, מציג את זו של המסמך עצמו, וערך תכונה שאינו אחד משלושת נקרא כ-null.
הוא נשאר בתוקף מעל כל מסמך שנטען אחריו, ו-value לעולם אינו כותב אותו. הסרת התכונה חוזרת לתצוגה של המסמך עצמו.
הרשימה Name View בסרגל הפקדים מחליפה גם היא את התצוגה, עד שהמסמך הבא נוחת או עד ש-nameView משתנה שוב. החלפה שם אינה נכתבת גם היא ל-value.

viewer.nameView = 'both';
// or
viewer.setAttribute('name-view', 'both');
<erd-viewer name-view="logical"></erd-viewer>

minimap​

מציג את מפת המיני בפינה הימנית העליונה, כל עוד המסמך מכיל טבלה, פתק מוצג או קבוצת טבלאות מוצגת. היא מופעלת כברירת מחדל.
היא פועלת כמו זו של העורך: לחיצה עליה מזיזה את התצוגה לשם, וגרירה של מלבן אזור התצוגה שלה מזיזה את התצוגה – ראו ניווט בבד הציור. אצבע עליה שייכת לדף עד שלמציג יש פוקוס.
רק minimap="false" מכבה אותה. תכונה ללא ערך, כל ערך אחר ותכונה חסרה משאירים אותה מופעלת.

viewer.minimap = false;
// or
viewer.setAttribute('minimap', 'false');
<erd-viewer minimap="false"></erd-viewer>

controls​

מציג את סרגל הפקדים מעל אמצע הקצה התחתון של בד הציור. הוא מופעל כברירת מחדל, ומכיל, משמאל לימין:

  • הזום: Zoom out, רמת הזום הנוכחית באחוזים, ו-Zoom in. שני הלחצנים משנים את הזום בצעדים כמו מקשי הזום, ולחיצה על האחוז, Reset zoom, מחזירה אותו ל-100%. כל אחד מציין את המקש שלו בתיאור הכלי.
  • Fit, שמקרב וגולל כך שכל התרשים מופיע בתצוגה, ממורכז.
  • Name View, לחצן שמציג את התצוגה הנוכחית ופותח מעל הסרגל רשימה של Physical Names, Logical Names ו-Both Names – ראו nameView.
  • המצפן Go to content, שמצטרף לסוף הסרגל רק כל עוד אף חלק מהתרשים אינו על המסך, ומוביל את התצוגה אל החלק הקרוב ביותר שלו.

הסרגל עומד משמאל לימין בכל שפה.
רק controls="false" מכבה אותו, ואיתו את המצפן ואת הרשימה Name View שלו. תכונה ללא ערך, כל ערך אחר ותכונה חסרה משאירים אותו מופעל. בלי הסרגל, הגלגלת, צביטה והמקשים עדיין מקרבים ברגע שלמציג יש פוקוס.

viewer.controls = false;
// or
viewer.setAttribute('controls', 'false');
<erd-viewer controls="false"></erd-viewer>

אירועים​

load ו-error הם שני האירועים היחידים, ושניהם מדווחים על src. אף אחד מהם אינו מבעבע, ולכן יש להאזין על האלמנט עצמו.

load​

משוגר ברגע שהמסמך ש-src מציין הובא והוצג. event.detail הוא null.
השמה ל-value אינה משגרת אחד כזה, וכך גם הבאה ש-src מאוחר יותר, value, הוצאת האלמנט מהדף או destroy ביטלו.

viewer.addEventListener('load', () => {
  console.log('shown', viewer.src);
});

error​

משוגר כשהבאת src נכשלת: הרשת או CORS דחו את הבקשה, התשובה לא הייתה ok, או שהטקסט שלה לא נותח. המציג מציג אז תרשים ריק ואת ההודעה Couldn't load the diagram – ראו טעינה.
event.detail הוא הסיבה: ה-TypeError ש-fetch() נדחית איתו, Error שמציין את הסטטוס, כמו GET /missing.erd.json answered 404 Not Found, או ה-SyntaxError או ה-TypeError של המנתח.
הבאה שמשהו ביטל אינה משגרת דבר.

viewer.addEventListener('error', event => {
  console.warn('could not show', viewer.src, event.detail);
});

setPresetTheme​

קובע ערכת נושא מוכנה, ומקבל את ThemeOptions של העורך – ראו setPresetTheme.
המציג מתחיל עם appearance: 'system', grayColor: 'slate' ו-accentColor: 'indigo', ולכן מהפריים הראשון שלו הוא מציג את המצב הבהיר או הכהה שמערכת ההפעלה מדווחת עליו, ומחליף כשהוא משתנה. העורך מתחיל במקום זאת כהה.
כל שדה מוחל בנפרד, ולכן קריאה חלקית משאירה את שני האחרים כפי שהם. ערך שאינו אחד מהשמות מתעלמים ממנו, והקריאה לעולם אינה זורקת.
למציג אין בונה ערכת נושא ואין systemDarkMode, והוא אינו משגר אירוע עבור ערכת נושא.

viewer.setPresetTheme({ appearance: 'light', accentColor: 'teal' });

setSystemAppearance​

קובע את המצב הבהיר או הכהה שהמראה 'system' מציג, עבור דף שיש לו מצב בהיר וכהה משלו. כל עוד אחד נקבע, שינויים של מערכת ההפעלה מתעלמים.
null, או כל ערך מלבד 'dark' או 'light', חוזר לעקוב אחרי מערכת ההפעלה.
כל עוד המראה הוא 'light' או 'dark' הוא אינו משנה דבר על המסך, אבל הערך נשמר וחל ברגע שהמראה הופך ל-'system'. הוא אינו משגר דבר.

viewer.setSystemAppearance('dark'); // null follows the OS again

setTheme​

עוקף טוקנים של ערכת הנושא מעל ערכת הנושא המוכנה, ומקבל את הטוקנים Theme של העורך – ראו setTheme.
כל קריאה מחליפה את כל שכבת העקיפות, ולכן יש להעביר {} כדי לחזור לערכה המוכנה. רק שמות הטוקנים, עם ערכי מחרוזת, נשמרים, ו-setPresetTheme מאוחר יותר מחליפה את הערכה המוכנה שמתחת בעוד העקיפות נשארות.
משתני ה-CSS --erd-editor-* מגיעים גם הם אל המציג, כשהם מוגדרים על האלמנט או בכל מקום מעליו – ראו משתני CSS. בד הציור, ששום גיליון סגנון אינו מגיע אליו, קורא אותם שוב כשגיליון סגנון ב-head של הדף משתנה, או כשהתכונה class או style של האלמנט או של אלמנט מעליו משתנה. כלל שנוסף באמצעות insertRule() אינו משנה אף אחד מאלה, ולכן בד הציור קולט אותו בשינוי הבא כזה.

erd-viewer {
  --erd-editor-canvas-background: #ffffff;
}

setLocale​

קובע את שפת התצוגה: 'system', ברירת המחדל, או אחד מ-25 הקודים ששפת התצוגה של העורך מונה. כל דבר אחר, כמו 'ko' חשוף או ערך שאינו מחרוזת, מתעלמים ממנו.
השפה משנה את תיאורי הכלים של סרגל הפקדים, את הרשימה Name View, את לוח הפקודות, את הודעות הטעינה ואת המילים שהתרשים מצייר בעצמו, כמו unnamed. שמות, הערות ושאר המסמך לעולם אינם מתורגמים.

אנגלית היא חלק מנקודת הכניסה של המציג וחלה לפני שהקריאה חוזרת. כל שפה אחרת היא מודול משלה, שה-bundler שלכם מוציא כ-chunk לצד המציג והמציג מביא מהחבילה שלכם בפעם הראשונה שדף מבקש אותה, פעם אחת לכל המציגים בדף. עד שהיא נוחתת, המציג ממשיך להציג את השפה שהציג, אנגלית בפריים הראשון. אם היא נכשלת להיטען, המציג מציג אנגלית, ובקשה חוזרת לאותה שפה מנסה שוב.
ה-build של תגית script מכיל את כל 25 השפות, ולכן אינו מביא אף אחת. חבילה שמכילה גם את העורך טוענת כל שפה עם ה-chunk של העורך – ראו רישום האלמנטים.
ה-Promise שהיא מחזירה נפתר ברגע שהשפה הזו נחתה או נכשלה, ואינו נדחה לעולם. השפה הזו, או אנגלית אחרי כישלון, בתוקף אז, אלא אם קריאה מאוחרת יותר ביקשה אחרת: הקריאה המאוחרת גוברת, בכל סדר שבו השפות נוחתות.

עברית, ערבית ופרסית מסדרות את לוח הפקודות ואת הודעות הטעינה מימין לשמאל. בד הציור, מפת המיני, פסי הגלילה וסרגל הפקדים עם המצפן שלו נשארים משמאל לימין, כפי שבד הציור של העורך נשאר – ראו שפות מימין לשמאל.
המציג קובע lang ו-dir על השורש שלו בתוך ה-shadow root הסגור, לעולם לא על אלמנט המארח או על הדף.
הוא אינו משגר דבר, ואין למציג בורר שפה והוא אינו שומר דבר.

await viewer.setLocale('ko-KR');

setSystemLocale​

קובע את השפה ש-'system' מייצג, כתג BCP 47, עבור דף שיש לו הגדרת שפה משלו.
התג עובר חיתוך רווחים. null, מחרוזת ריקה או ערך שאינו מחרוזת חוזרים לשפות הדף.
אלה <html lang> של הדף, ואחריו navigator.languages של הדפדפן, שנקראות פעם אחת, כשהמציג מתחבר לראשונה. 'system' לוקח את הראשונה מהן שיש למציג שפה עבורה, לפי הכלל של העורך ב-setSystemLocale, ואנגלית כשאין לו אף אחת מהן. לכן דף ש-<html lang> שלו נותן שם לשפה שיש למציג מציג את השפה הזו בלי קשר למה שהדפדפן מעדיף, ושינוי מאוחר יותר של lang או של שפות הדפדפן אינו מזיז אף מציג.
הוא חשוב רק כל עוד האפשרות בתוקף היא 'system', וה-Promise שלו נפתר כמו זה של setLocale.

viewer.setSystemLocale('ja-JP'); // null goes back to the page's languages

destroy​

מסיים את המציג לתמיד. הוא מוריד את התצוגה לפני שהוא חוזר, בין אם האלמנט עדיין בדף ובין אם הוצא קודם, מבטל הבאה של src שעדיין רצה, ומפסיק לעקוב אחרי סכמת הצבעים של מערכת ההפעלה ואחרי הסגנונות של הדף.
מציג שהושמד אינו מצייר דבר יותר, אינו מביא דבר ואינו מבקש שפה, גם כשהוא נוסף שוב לדף. קריאת value עדיין מחזירה את המסמך שהחזיק.
הוצאת האלמנט מהדף אינה משמידה אותו: כשהוא מוחזר הוא ממשיך, ומביא src שעוד לא הוצג – ראו טעינה.

viewer.destroy();

פוקוס ומקשים​

מציג אינו לוקח פוקוס כשהוא נטען, כשמסמך נוחת או כשלוח הפקודות שלו נסגר, ולכן הוא לעולם אינו גולל את הדף אל עצמו או לוקח את המקשים של הדף.
לחיצה או הקשה על בד הציור שלו מעבירה אליו פוקוס בלי לגלול את הדף, והוא תחנה אחת של המקש Tab. בניגוד לעורך, אין לו איברים focus() או blur() משלו. לחיצה בכל מקום אחר בדף לוקחת שוב את הפוקוס.

עד שלמציג יש פוקוס, הדף שומר את הגלגלת, שגוללת את הדף, ואת צביטת משטח המגע. אצבע על בד הציור גוללת את הדף ואינה מזיזה דבר, וכל מקש מגיע אל הדף בלי שנמנעה ברירת המחדל שלו.
כשיש לו פוקוס:

  • הגלגלת מזיזה את התצוגה, ו-Shift + Wheel מזיז אותה הצידה. מעל פתק שהטקסט שלו גולש, הגלגלת גוללת את הפתק.
  • Ctrl + Wheel (Windows/Linux) או ⌘ + Wheel (Mac), צביטה במשטח מגע, או שתי אצבעות במסך מגע מקרבים.
  • אצבע מזיזה את התצוגה.
  • Ctrl + Plus ו-Ctrl + Minus (Windows/Linux) או ⌘ + Plus ו-⌘ + Minus (Mac) משנים את הזום בצעדים כמו הלחצנים Zoom in ו-Zoom out, ו-Ctrl + 0 (Windows/Linux) או ⌘ + 0 (Mac) חוזר ישר ל-100%, ושומר את אמצע המסך במקומו.
  • Ctrl + K (Windows/Linux) או ⌘ + K (Mac) פותח את לוח הפקודות, ו-Esc סוגר אותו.

אלה המקשים היחידים שלו, ואי אפשר לשייך אותם מחדש. כל מקש אחר מגיע אל הדף בלי שנמנעה ברירת המחדל שלו, עם פוקוס או בלעדיו: Delete, Backspace, Space, Enter, Tab, Ctrl + A, Ctrl + F וכל צירוף שעורך בעורך.

לוח הפקודות מחפש במסמך בלבד ואינו מציג אף פקודה. הקלט הריק שלו מציג את הקידומות: # מחפש בטבלאות, @ בעמודות, : בהערות ובפתקים, ו-? מציג את הקידומות, כמו בעורך – ראו חיפוש בתרשים. מילה בלי קידומת מציגה No commands match מעל השורות שמחפשות אותה בתרשים.
בחירה בשורה מזיזה את התצוגה לפי הכלל של העורך, היכן נוחתת קפיצה, משאירה את הזום כפי שהוא, ומסמנת במתאר את מה שהיא הגיעה אליו, מובא לחזית: הטבלה, הטבלה שמכילה את העמודה או את ההערה, או הפתק.
בחירה בשורה או הקשה על Esc סוגרות את לוח הפקודות ומשאירות את הפוקוס בלי אלמנט, ולכן הסיבוב הבא של הגלגלת גולל את הדף; יש ללחוץ על התצוגה כדי לתת לה שוב את הגלגלת והמקשים. כל עוד לוח הפקודות פתוח, הגלגלת גוללת את הרשימה שלו, ומקשי הזום אינם עושים דבר.

עם פוקוס או בלעדיו, גרירה בלחצן הראשי של העכבר מזיזה את התצוגה מכל מקום בבד הציור, גם מעל טבלה. לחיצה או הקשה ללא תנועה מאירות קשרים: בטבלה, הקשרים של אותה טבלה; בקו קשר, אותו קו; בכל מקום אחר, כולל פתק, היא מכבה את ההארה. לחיצה כזו מנקה גם את המתאר שקפיצה מלוח הפקודות השאירה. המצביע שנח על טבלה מאיר את הקשרים שלה כל עוד הוא שם.
שום לחיצה אינה בוחרת, מזיזה או עורכת דבר. אין בחירה מלבד המתאר של קפיצה, אין תיבת בחירה, ואין לחיצה כפולה או Enter שפותחים תא.

טעינה​

כל עוד src נטען, הודעה מעל אמצע בד הציור מציגה Loading diagram לצד טוען מסתובב. ברגע שטעינה נכשלת, היא מציגה Couldn't load the diagram לצד סימן אזהרה, עד ש-src חדש או value תופסים את מקומה או ש-src מוסר. לחיצות עוברות דרך ההודעה אל בד הציור, והיא נקראת בשפת התצוגה, מימין לשמאל בשפה מימין לשמאל.

כל מסמך שנוחת, מ-src או מ-value, מותאם לתיבה של המציג: מקורב וגלול כך שכל התרשים מופיע, ממורכז, כמו ש-Fit עושה, והזום והגלילה ששמר הקובץ מושארים בצד. מסמך שנמסר לפני שיש למציג גודל, כשהוא הוגדר לפני שהוא בדף או כשהתיבה שלו ריקה, מותאם ברגע שיש לו כזה. שינוי גודל מאוחר יותר שומר על הזום; Fit מתאים שוב.

המציג מביא src רק כל עוד הוא בדף. הוצאתו מבטלת הבאה שעדיין רצה, והחזרתו מביאה src שעוד לא הוצג, כולל כזה שנכשל, ולעולם לא כזה שהוא כבר מציג. מציג שאין בו עוד צורך מסיימים באמצעות destroy.

מה הוא מוסיף לדף​

  • אין worker. הוא אינו מפעיל אף אחד, ולכן מדיניות אבטחת תוכן אינה צריכה בשבילו worker-src.
  • אין אחסון. הוא אינו כותב עוגיות, localStorage, sessionStorage או IndexedDB.
  • שני סוגי בקשות: הבאת src, שמדיניות מחמירה מונה את המקור שלה ב-connect-src, והמודול של שפת תצוגה מלבד אנגלית, מהחבילה שלכם – ראו setLocale.
  • סגנונות בגיליונות סגנון שנבנו בקוד, ש-style-src מחמיר מתיר. דפדפן בלי גיליונות סגנון שנבנו בקוד, כמו Firefox לפני גרסה 101, מקבל במקומם אלמנטי <style>, שדורשים style-src 'unsafe-inline'.
  • מאזינים על window. ייבוא נקודת הכניסה מוסיף שלושה למשך חיי הדף, עבור mousedown, touchstart והאירוע @dineug/erd-editor/internal-forward-move-start של החבילה עצמה. Konva, שמצייר את בד הציור, קובע את window.Konva ועם הבמה הראשונה שלו מוסיף מאזיני עכבר ומגע ל-window ומאזין visibilitychange ל-document, שאינו מסיר לעולם. נקודת הכניסה של העורך מוסיפה אותם דברים.
  • עד destroy, כל מציג עוקב אחרי סכמת הצבעים של מערכת ההפעלה ומשגיח על הסגנונות של הדף בשביל משתני ה-CSS ש-setTheme מתאר.