الانتقال إلى المحتوى الرئيسي

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 دون تحويل صريح للنوع.

وكالمحرر، يرسم العارض داخل جذر ظل مغلق، لذا فإن viewer.shadowRoot يساوي null ولا تتسرب أنماط الصفحة إليه ولا منه؛ نسّقه عبر setTheme وخصائص CSS المخصصة --erd-editor-*. وتحتفظ عدة عارضات في صفحة واحدة كلٌّ منها بمستندها وعرضها ونسقها ولغتها.
وليس للعنصر <erd-viewer> حجم ذاتي. والعنصر المخصص مضمّن بطبيعته، لذا امنحه display: block وارتفاعًا، كما في الأعلى. ويملأ العرض صندوق العنصر ويتبعه إذا تغيّر حجمه، محتفظًا بمستوى التكبير.

السمات الوحيدة له هي src وname-view وminimap وcontrols، ولكل منها خاصية بالاسم نفسه، وهي nameView للسمة name-view. أما value فخاصية فقط.
والقيمة value أو src أو nameView أو minimap أو controls التي تُضبط على العنصر قبل تعريف وسمه، كأن يعرض إطار عمل العنصر قبل أن تُحمَّل نقطة الدخول، تُؤخذ بعد تعريف الوسم، وتتقدم على السمات التي أعطاها لها الترميز. وتؤخذ بالترتيب الذي كتبت به الصفحة كلًّا منها أول مرة، لذا فإن الأخيرة من value وsrc هي التي تفوز. والقيمة value التي لا تحمل مستندًا لا يبقى حينئذ من يمكن إطلاق الاستثناء إليه: فيُبلَّغ عنها بوصفها خطأ غير معالَج، ويبقى العارض فارغًا.

نسخة الوسم script، dist/erd-viewer.umd.js، تضم العارض وحده مع كل تبعياته. وهي تعرّف <erd-viewer> وتضع ErdViewerElement وdefineErdViewer على window.ErdViewer. وعنوان CDN بلا مسار يقدّم نسخة المحرر بدلًا منها، لذا سمِّ الملف، راجع الوسم 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 يُجلب حتى لو سمّى عنوان URL الذي جُلب قبله. وإذا كُتب مجددًا فوق المستند الذي يعرضه بالفعل فلا يجلب شيئًا.
ولا يجلب العارض إلا وهو في صفحة. فإخراجه منها يلغي جلبًا جاريًا، وإعادته إليها تجلب 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'، وهي الافتراضية، أو أحد الرموز الخمسة والعشرين التي تسردها لغة العرض في المحرر. وأي شيء آخر، مثل 'ko' المجردة أو قيمة ليست سلسلة نصية، يُتجاهل.
وتغيّر اللغة تلميحات شريط عناصر التحكم وقائمة Name View واللوحة وإشعارات التحميل والكلمات التي يرسمها المخطط بنفسه، مثل unnamed. أما الأسماء والتعليقات وبقية المستند فلا تُترجم أبدًا.

الإنجليزية جزء من نقطة دخول العارض وتُطبَّق قبل أن يعود الاستدعاء. وكل لغة أخرى وحدة خاصة بها، تُخرجها أداة التجميع قطعةً بجوار العارض ويجلبها العارض من حزمتك أول مرة تطلب فيها صفحة تلك اللغة، مرة واحدة لكل عارضات الصفحة. وإلى أن تصل، يواصل العارض عرض اللغة التي كان يعرضها، أي الإنجليزية في أول إطار. وإذا أخفق تحميلها يعرض العارض الإنجليزية، وطلب تلك اللغة مرة أخرى يعيد المحاولة.
أما نسخة الوسم script فتضم اللغات الخمس والعشرين كلها، فلا تجلب شيئًا. والحزمة التي تضم المحرر أيضًا تحمّل كل لغة مع قطعة المحرر، راجع تسجيل العناصر.
والوعد Promise الذي يُرجعه يُحَلّ بعد أن تصل تلك اللغة أو تخفق، ولا يُرفض أبدًا. وتصبح تلك اللغة، أو الإنجليزية بعد الإخفاق، هي السارية، ما لم يطلب استدعاء لاحق لغة أخرى: فالاستدعاء الأحدث هو الذي يفوز، أيًّا كان ترتيب وصول اللغات.

وتضع العبرية والعربية والفارسية اللوحة وإشعارات التحميل من اليمين إلى اليسار. أما لوحة الرسم والخريطة المصغّرة وأشرطة التمرير وشريط عناصر التحكم مع بوصلته فتبقى من اليسار إلى اليمين، كما تفعل لوحة رسم المحرر، راجع اللغات المكتوبة من اليمين إلى اليسار.
ويضبط العارض lang وdir على جذره هو داخل جذر الظل المغلق، لا على العنصر المضيف ولا على الصفحة.
ولا يُطلق شيئًا، وليس للعارض منتقي لغة ولا يخزّن شيئًا.

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

setSystemLocale​

يسمّي اللغة التي يمثلها 'system'، بوصفها وسم BCP 47، لصفحة لها إعداد لغة خاص بها.
ويُقصّ الوسم. والقيمة null أو السلسلة الفارغة أو القيمة التي ليست سلسلة نصية تعود إلى لغات الصفحة.
ولغات الصفحة هي <html lang> فيها، ثم navigator.languages في المتصفح، تُقرآن مرة واحدة، حين يتصل العارض أول مرة. ويأخذ 'system' أولى هذه اللغات التي للعارض لغة لها، بقاعدة المحرر في setSystemLocale، والإنجليزية حين لا يملك أيًّا منها. فالصفحة التي يسمّي <html lang> فيها لغة يملكها العارض تعرض تلك اللغة أيًّا كان ما يفضّله المتصفح، وتغيّر لاحق في lang أو في لغات المتصفح لا يحرّك أي عارض.
ولا يهم إلا ما دام الخيار السائد 'system'، ويُحَلّ وعده كما يُحَلّ وعد 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-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.