ErdEditorElement

העורך הוא HTMLElement רגיל, התגית <erd-editor> שייבוא של @dineug/erd-editor/erd-editor.js מגדיר.
החל מגרסה 5.0.0, ייבוא שורש החבילה אינו מגדיר תגית. השורש מייצא את ErdEditorElement גם כטיפוס של האלמנט וגם כמחלקה שלו, ואת defineErdEditor(), שמגדירה את התגית במקום שבו קוראים לה – ראו רישום האלמנטים.
לדף שרק מציג תרשים, <erd-viewer> הוא אלמנט נפרד לקריאה בלבד.

import '@dineug/erd-editor/erd-editor.js';

const editor = document.createElement('erd-editor');

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

interface ErdEditorElement extends HTMLElement {
  readonly: boolean;
  systemDarkMode: boolean; // system dark/light auto
  enableThemeBuilder: boolean;
  enableLocalePicker: boolean;
  enableWelcomeScreen: boolean;
  value: string;
  readonly runtimeValue: string;
  focus: () => void;
  blur: () => void;
  clear: () => void;
  destroy: () => void;
  setInitialValue: (value: string) => void;
  setPresetTheme: (themeOptions: Partial<ThemeOptions>) => void;
  setSystemAppearance: (appearance: 'dark' | 'light' | null) => void;
  setTheme: (theme: Partial<Theme>) => void;
  setLocale: (locale: LocaleOption) => void;
  setSystemLocale: (locale: string | null) => void;
  setKeyBindingMap: (
    keyBindingMap: Partial<
      Omit<
        KeyBindingMap,
        | 'edit'
        | 'stop'
        | 'undo'
        | 'redo'
        | 'zoomIn'
        | 'zoomOut'
        | 'zoomReset'
      >
    >
  ) => void;
  setSchemaSQL: SetSchema;
  setSchemaGraphQL: SetSchema;
  setSchemaDBML: SetSchema;
  setSchemaAML: SetSchema;
  setSchemaJSON: (
    value: string,
    options?: { mode?: 'replace' | 'append' }
  ) => void;
  getSchemaSQL: (
    databaseVendor?: DatabaseVendor,
    options?: SchemaSQLOptions
  ) => string;
  getSharedStore: (
    config?: SharedStoreConfig & {
      mouseTracker?: boolean;
      focusTracker?: boolean;
    }
  ) => SharedStore;
  setDiffValue: (value: string) => void;
}

העורך מוצג בתוך shadow root סגור, ולכן editor.shadowRoot הוא null, וסגנונות הדף אינם דולפים פנימה או החוצה.
לא ניתן להגיע לשום דבר בפנים באמצעות סלקטור – במקום זאת, יש לעצב אותו באמצעות setTheme ובאמצעות המאפיינים המותאמים אישית --erd-editor-*.

readonly, system-dark-mode, enable-theme-builder, enable-locale-picker ו-enable-welcome-screen הן התכונות היחידות, וברירת המחדל של כל החמש היא false. שתי האחרונות חדשות בגרסה 4.0.0. כל אחת מהן מפרשת את הערך שלה כפי שמתואר ב-readonly.

החל מגרסה 4.1.0, בכרטיסיית ERD יש סייר, עץ של התרשים, המעוגן משמאל לבד הציור, ובראשו איתור והחלפה. אף תכונה, מאפיין, מתודה או אירוע אינם פותחים אותו, סוגרים אותו או מדווחים עליו: הוא נפתח מהלחצן Explorer בסרגל הכלים, מהפריט Toggle Explorer בחיפוש המהיר או בתפריט ההקשר של בד הציור, או באמצעות צירוף המקשים findReplace.
בכל אלמנט הסייר סגור בהתחלה. היותו פתוח, הרוחב שלו, מצב הכיווץ שלו והחיפוש שלו נשמרים כל עוד האלמנט קיים, גם במעברים בין כרטיסיות ובכל טעינה, כולל setInitialValue, ולעולם אינם נכללים ב-value, ב-runtimeValue, בהיסטוריית הפעולות או במאגר משותף.

החל מגרסה 4.2.0, לטבלאות ולעמודות יכולים להיות שמות לוגיים לצד השמות שלהן, ותצוגת השמות, הגדרה של המסמך כמו הכרטיסייה, קובעת אם בד הציור מציג את השמות שלהן, את השמות הלוגיים שלהן או את שניהם.
בסרגל הכלים יש גם כרטיסיית מילון, בין Code Generator ל-Settings, שמכילה את המילים, המונחים והתחומים של המסמך ואת הגיליון Checks. זוהי כרטיסייה כמו האחרות: ה-canvasType שלה, '@dineug/erd-editor/builtin-dictionary', מוחזק על ידי הנעילה Canvas Type, כך שטקסט שנשמר כשהיא פתוחה נפתח בה דרך setInitialValue, ומעבר אליה נכתב ל-value ומשגר את change רק כל עוד הנעילה הזאת כבויה. אין לה תכונה, מאפיין, מתודה או אירוע משלה שפותחים אותה או מדווחים עליה. העריכות בה הן שינויים במסמך: הן נכללות ב-value, משגרות את change ומגיעות לשותפים לעריכה, אבל ביטול הפעולה והביצוע החוזר שלהן פועלים על ההיסטוריה הנפרדת של כל גיליון, ולא על זו של המסמך.
המצב של הכרטיסייה עצמה – איזה גיליון מוצג, Domains בהתחלה, והחיפוש, הבחירה, הגלילה ורוחבי העמודות של כל גיליון – נשמר כל עוד האלמנט קיים, גם במעברים בין כרטיסיות ובכל טעינה, ולעולם אינו נכלל ב-value, ב-runtimeValue, בהיסטוריית פעולות כלשהי או במאגר משותף.
לממשק ErdEditorElement לא נוסף אף איבר. מה שה-API מוסיף הוא logicalNameAsComment באפשרויות של getSchemaSQL, שנים עשר טוקנים של ערכת הנושא והייצוא dictionaryRowChords.

readonly

קובע את יכולת העריכה של העורך.
כל עוד הוא מוגדר, העורך מתעלם מהשמה ל-value, מ-clear(), מ-setSchemaSQL(), מ-setSchemaGraphQL(), מ-setSchemaDBML(), מ-setSchemaAML(), מ-setSchemaJSON(), מביטול פעולה ומביצוע חוזר, החל מגרסה 4.2.0 כולל אלה של גיליון בכרטיסיית מילון, והאירוע change לעולם אינו משוגר. במקום זאת, יש לטעון מסמך באמצעות setInitialValue.
החל מגרסה 5.0.0, עורך לקריאה בלבד הוא קורא ולא עורך שהפקדים שלו מושבתים. הוא שומר על ששת הכרטיסיות שלו, על הסייר, על מפת המיני, על החיפוש המהיר, על מאפייני הטבלה, על מציג ההבדלים, על Export, על מצב זן ועל הסמנים, המיקודים והבחירות של שותפים לעריכה, וכל פקד שהיה עורך את התרשים מושמט במקום להיות מצויר כמושבת. לפני גרסה 5.0.0 רבים מפקדי העריכה שלו עדיין צוירו, והעורך השליך את מה שהם שלחו.

בכרטיסיית ERD גרירה מזיזה את התצוגה בכל מקום שבו היא מתחילה, גם על טבלה, ולחיצה אינה בוחרת, אינה מזיזה ואינה פותחת דבר. המצביע שנח על טבלה מדליק את הקשרים שלה, לחיצה ללא תנועה על טבלה או על קשר משאירה את ההדלקה הזו, ולחיצה ללא תנועה בכל מקום אחר מכבה אותה, כמו ב-<erd-viewer>. הבחירה היחידה היא המתאר שמעבר משאיר: מעבר אל שורה בסייר, אל אחת מההתאמות של האיתור בו או אל תוצאה של חיפוש מהיר אחרי #, @ או : בוחר את מה שהוא מגיע אליו, ולחיצה ללא תנועה הבאה מנקה אותו. העתקה מעתיקה את מה שהבחירה הזו מכילה.
סרגל הכלים של בד הציור שומר את Zoom out, את רמת הזום (Reset zoom), את Zoom in, את רשימת תצוגת השמות, את Zen Mode ואת המצפן, בלי Hand או Select, בלי New Table, New Memo או New Table Group, ובלי לחצני קשרים. תפריט בד הציור שומר את View Option, את Name View, את Export ואת Diff Viewer, תפריט הטבלה שומר את Table Properties, ופתק, קשר או קבוצת טבלאות אינם פותחים תפריט. החיפוש המהיר בכרטיסיית ERD אינו מציג שורה שכותבת לתרשים: הוא שומר את Tab, את Name View, את Database, את Export, את Toggle Explorer, את השורות Theme ו-Display Language ש-enableThemeBuilder ו-enableLocalePicker מפעילים, ואת החיפושים #, @ ו-:. בשאר הכרטיסיות הוא מציג מה שהוא מציג בעורך שמאפשר עריכה. סרגל הכלים מציג את שם מסד הנתונים כטקסט, בלי הלחצנים Undo, Redo או Time Travel.
דבר אינו מציע את Import, את Import and Add, את Auto Layout, שורת קבוצת טבלאות (ראו קבוצות טבלאות) או את Map Columns, ומסך פתיחה אינו מוצג.
צירופי המקשים שמוסיפים, מסירים או עורכים אינם עושים דבר: edit, addTable, addColumn, addMemo, addTableGroup, groupSelectedTables, removeTable, removeColumn, removeSelection, primaryKey, selectAllTable, selectAllColumn, ארבעת צירופי הקשרים ו-handTool, וכל אחד מהם עדיין מונע את ברירת המחדל כפי שהאפשרות שלו קובעת. הדבקה ו-Tab אינן עושות דבר גם הן ומגיעות אל הדף בלי שנמנעה ברירת המחדל שלהן. צירופי הזום, zenMode, focusView, tableProperties על הטבלה שמעבר בחר, search, findReplace, העתקה, Escape ומקשי החצים ממשיכים לעבוד. אף עורך של תא, של פתק או של שם קבוצת טבלאות אינו נפתח, ואף קשר אינו נשרטט.

איתור והחלפה שבראש הסייר מאתר בלבד, ללא החץ Toggle Replace וללא שורת ההחלפה. כותרת החלונית היא Explorer, ותיאור הכלי של הלחצן בסרגל הכלים הוא Explorer (Ctrl + F) (Windows/Linux) או Explorer (⌘ + F) (Mac) בכל עורך. הסייר נפתח בעורך לקריאה בלבד מגרסה 4.1.0; מגרסה 3.10.0 ועד גרסה 4.0.0 איתור והחלפה נפתח שם כחלונית צפה לאיתור בלבד שכותרתה Find.
מאפייני הטבלה נפתחים מתפריט הטבלה או מצירוף המקשים tableProperties, והחל מגרסה 3.10.0 הם מציגים את התג Read only לצד הכותרת, והכרטיסייה Indexes שלהם אינה מאפשרת עריכה – ראו מאפייני טבלה.
כרטיסיית הגדרות נושאת את אותו תג Read only ומציגה כל הגדרה בפקד שאינו מקבל לחיצה: שני המתגים שלה, השדה Maximum comment width ושבעת הלחצנים Lock מושבתים, ושורות Column Order אינן נגררות. הסקריפטים Before tables ו-After tables של כרטיסיית סכמת SQL אינם מקבלים הקלדה. כרטיסיית ויזואליזציה פועלת כמו בעורך שמאפשר עריכה, כי דבר שם אינו עורך את המסמך; Previous table ו-Next table של מצב הזרימה עדיין צועדים אחורה וקדימה, באמצעות הלחצנים שלהם או מקשי ביטול הפעולה והביצוע החוזר.
כרטיסיית מילון עדיין נפתחת: ניתן להחליף בין הגיליונות שלה, לחפש בהם, לבחור בהם, לגלול בהם ולהעתיק מהם, ושורה בגיליון Checks עדיין מובילה אל מה שהיא מציינת. אף תא אינו מקבל עריכה, הדבקה או ניקוי, הכרטיסייה אינה מציגה את הכלים Add Row, Delete Rows, Import CSV או Export CSV ואינה מציגה תפריט ברשת, וצירופי המקשים של השורות שלה אינם מוסיפים ואינם מוחקים דבר. תפריט הטבלה, תפריט בד הציור והחיפוש המהיר אינם מציעים את Derive Physical Names Again או את Derive Physical Name Again.

החל מגרסה 5.0.0, ההגדרות שקורא עדיין יכול לשנות נשארות על המסך של אותו עורך: הגלילה והזום, הכרטיסייה, מסד הנתונים, שפת מחולל הקוד, שני סגנונות השמות, סוג המירכאות, שורות View Option ותצוגת השמות מכל אחד מהבוררים שלה, שנשארת על המסך מאז גרסה 4.2.0. יהיו הנעילות שלהן אשר יהיו, אף אחת מהן אינה מגיעה אל value, אל runtimeValue, אל ייצוא ה-json, אל היסטוריית הביטולים, אל האירוע change או אל מאגר משותף, ולכן value שומר את הגדרות המסמך בכל אופן שבו הקורא מביט בו. לוחות האפשרויות של סכמת SQL ושל מחולל הקוד נותנים להגדרות האלה את הכותרת This window only כל עוד readonly מוגדר, במקום Saved in the document שבעורך שמאפשר עריכה. מה ששתי הכרטיסיות מציגות, מעתיקות ושומרות נגזר מהמסך, וכך גם getSchemaSQL הנקראת בלי מסד נתונים.
לפני גרסה 5.0.0, הגלילה, הזום, החלפת הכרטיסייה, מסד הנתונים והגדרות הקוד של קורא הגיעו אל value כל עוד אף נעילה לא החזיקה אותם, ומסד הנתונים אינו נעול לעולם, ומאגר משותף שלח אותם לעורכים האחרים.
הבחירות של This window only בכרטיסיית סכמת SQL, Statements, Header, החל מגרסה 4.2.0 Write logical names into empty comments, ו-Tables, לעולם אינן נשמרות באף עורך ועדיין חלות, וכך גם תיבת הדו-שיח Export image, בונה ערכת הנושא ובורר שפת התצוגה. בחירה בבונה ערכת הנושא או בבורר שפת התצוגה עדיין משגרת את changePresetTheme או את changeLocale.

כל עוד הוא מוגדר, דבר אינו נכנס להיסטוריית הפעולות, גם לא גלילה או זום, ומאגר משותף של העורך אינו שולח שינוי: רק את מה שהמעקבים שלו שולחים מהסמן, מהמיקוד, מהבחירה וממלבן הבחירה של הקורא, ואת האוגרים שעורך אחר מבקש כשהוא מצטרף (ראו עריכה שיתופית). הוא עדיין מחיל כל שינוי שהאחרים שולחים. שינוי של מסד הנתונים, של הגדרת מחולל קוד או של שורת View Option מגיע למסמך, ולמסך גם כן, אלא אם הקורא שינה את ההגדרה הזו שם, והחלפה משותפת של תצוגת השמות מוצגת על המסך בכל מקרה. החל מגרסה 5.1.0, שפת מחולל קוד, סגנון שמות או סוג מירכאות ששונו כשהנעילה של אותה הגדרה מופעלת נשארים על המסך של העורך ששינה אותם ואינם נשלחים לעולם, ולכן אינם מגיעים לא למסמך של הקורא ולא למסך שלו. שינוי שנעשה כשהנעילה כבויה, והערך שנושא ביטול הנעילה, עדיין מגיעים אליו כמתואר לעיל.

הפעלתו מסיימת את מה שעמד פתוח: עורך של תא, של פתק או של שם קבוצת טבלאות, קשר בשרטוט, גרירה של טבלה, של פתק, של קבוצת טבלאות או של עמודה, עותקים של גרירה עם Alt, שינוי גודל של פתק או של קבוצת טבלאות, תצוגה מקדימה של פריסה אוטומטית או הצבה שעדיין רצות, Map Columns, מסע בזמן ובורר הצבעים. היא מנקה את הבחירה, מניחה את כלי היד, ותחילה שולחת את מה שכל מאגר משותף עדיין מעכב מגרירה או מגלילה, כפי ש-flushStreamBuffers עושה. מאפייני הטבלה, שהפכו לקריאה בלבד, מציג ההבדלים ותיבת הדו-שיח Export image נשארים פתוחים, והגלילה, הזום, הכרטיסייה ותצוגת השמות נשארים כפי שהיו. אלמנט שהוא לקריאה בלבד כשהוא נטען לראשונה מתחיל באותו אופן, ואלמנט שהמארח מעביר בדף שומר על המתאר שמעבר השאיר.
כיבויו מחזיר את פקדי העריכה בלי שדבר נבחר או פתוח. כל אחד מאלה שהקורא שינה – מסד הנתונים, שפת מחולל הקוד, שני סגנונות השמות, סוג המירכאות ושורות View Option – חוזר למה שהמסך הציג לפני שהקורא שינה אותו לראשונה: הערך של המסמך, עם כל שינוי שהאחרים שלחו בינתיים, או ערך שהעורך הזה הציג בעצמו תחת הנעילה של ההגדרה, ש-value מעולם לא החזיק. הגלילה, הזום, הכרטיסייה ותצוגת השמות נשארים במקום שבו הקורא השאיר אותם, ו-value שומר את הגדרות המסמך עד שהן משתנות שוב. אף אחד מהמעברים אינו משגר change.
תכונה ללא ערך, ="" ו-="true" מתפרשים כולם כ-true. ="false" מתפרש כ-false, וכך גם כל מחרוזת אחרת – כולל הצורה readonly="readonly" המקובלת ב-HTML.

editor.readonly = true;
// or
editor.setAttribute('readonly', 'true');

<erd-editor readonly></erd-editor>

systemDarkMode

קובע אם לסנכרן אוטומטית עם המצב הכהה או הבהיר של המערכת.
החל מגרסה 4.0.0, הפעלתו מגדירה את appearance של ערכת הנושא ל-'system', כפי ש-setPresetTheme({ appearance: 'system' }) עושה. לאחר מכן העורך מציג את המראה הבהיר או הכהה שמערכת ההפעלה מדווחת עליו, או את המראה ש-setSystemAppearance מציינת, ומתחלף כשהוא משתנה.
קריאה מאוחרת יותר ל-setPresetTheme עם 'light' או 'dark', או בחירה ב-Light או ב-Dark בבונה ערכת הנושא או בחיפוש המהיר, מחליפה את 'system' ונשארת: השינוי הבא ב-OS כבר אינו דורס אותה, אף ש-systemDarkMode עדיין true. לפני גרסה 4.0.0, השינוי הבא ב-OS דרס אותה.
כיבויו כשהמראה הוא 'system' שומר על המראה הבהיר או הכהה שמוצג באותו רגע. כיבויו אחרי שהמראה שונה מ-'system' לערך אחר משאיר אותו כפי שהוא.
שינויו אינו משגר שום אירוע.

editor.systemDarkMode = true;
// or
editor.setAttribute('system-dark-mode', 'true');

<erd-editor system-dark-mode></erd-editor>

enableThemeBuilder

קובע אם מסופק ממשק להגדרה נוחה של ערכות נושא מוגדרות מראש.
הוא מציג את הלחצן Theme בסרגל הכלים, שפותח את בונה ערכת הנושא עם האפשרויות Accent color, Gray color ו-Appearance. החל מגרסה 4.0.0, האפשרות Appearance מציעה את System לצד Light ו-Dark, וכל עוד מאפיין זה מופעל, החיפוש המהיר מציג את הפקודה Theme עם System, Light ו-Dark. ראו שפה וערכת נושא.

editor.enableThemeBuilder = true;
// or
editor.setAttribute('enable-theme-builder', 'true');

<erd-editor enable-theme-builder></erd-editor>

שינוי ערכת הנושא המוגדרת מראש מחלונית זו, או מהחיפוש המהיר, משגר את האירוע changePresetTheme.

enableLocalePicker

החל מגרסה 4.0.0, קובע אם מסופק ממשק לבחירת שפת התצוגה של העורך.
הוא מציג את הלחצן Display Language בסרגל הכלים, אחרי Theme כששניהם מוצגים. הלחצן פותח את בורר שפת התצוגה, והחיפוש המהיר מציג את הפקודה Display Language. שניהם מציעים את System ואת 25 השפות – ראו שפה וערכת נושא.
הוא גם קובע מה העורך מציג לפני ש-setLocale נקראת או לפני שנבחרת שפה: 'system' כשהוא מופעל, ואנגלית כשהוא כבוי, כך שאלמנט שלא הוגדר בו דבר ממשיך להציג את האנגלית שהציג תמיד. הפעלתו או כיבויו מחליפים מיד בין השניים. לאחר שהוגדרה או נבחרה שפה, הבחירה הזאת נשארת בין שהוא מופעל ובין שהוא כבוי.
כדי שהפריים הראשון יפעל לפי 'system', יש להגדיר אותו לפני שהאלמנט מצורף לדף.
בחירה משגרת את changeLocale.

editor.enableLocalePicker = true;
// or
editor.setAttribute('enable-locale-picker', 'true');

<erd-editor enable-locale-picker></erd-editor>

enableWelcomeScreen

החל מגרסה 4.0.0, קובע אם תרשים ריק מקבל את פני המשתמש במסך הפתיחה.
הוא מוצג מעל כרטיסיית ERD כל עוד אין במסמך טבלה, פתק מוצג או קבוצת טבלאות מוצגת. הוא אינו מוצג כש-readonly מוגדר, במצב זן, או כשחלון מאפייני הטבלה, מציג ההבדלים, מסע בזמן או התצוגה המקדימה של הפריסה האוטומטית פתוחים. הטבלה הראשונה, הפתק המוצג הראשון או קבוצת הטבלאות המוצגת הראשונה מעלימים אותו, וביטול פעולה שמחזיר לתרשים ריק מחזיר אותו.
השורות New Table, New Memo ו-Command Palette שלו מציגות את הצירוף הראשון של addTable, addMemo ו-search כפי ש-setKeyBindingMap השאירה אותם, ואינן מציגות צירוף עבור שם שהושאר ריק. החצים שלו מצביעים על הלחצנים Theme ו-Display Language רק במקום ש-enableThemeBuilder ו-enableLocalePicker מציגים אותם.
בתפריט שלו, ↑, ↓, Home ו-End עוברים בין השורות, ונמנעים ונעצרים. Enter ו-Space נעצרים אך אינם נמנעים, כך שהשורה שבפוקוס מקבלת אותם, ו-Escape בין הפורמטים של Import חוזר אחורה, ונמנע ונעצר. כל מקש אחר מגיע לעורך ולדף כרגיל.
הוא אינו משנה דבר במסמך, ולכן משאיר את value כפי שהיה ואינו משגר change.
יש להפעיל אותו לאחר ש-setInitialValue סיימה לטעון את המסמך, כפי שהסביבות המארחות הרשמיות עושות, כדי שהמסך לעולם לא יהבהב מעל קובץ שעדיין נטען.

editor.enableWelcomeScreen = true;
// or
editor.setAttribute('enable-welcome-screen', 'true');

<erd-editor enable-welcome-screen></erd-editor>

value

getter

מאחזר את המסמך הנוכחי כמחרוזת JSON, לפי הסכמה שהעורך מגדיר.
החל מגרסה 4.0.0, זוהי צורת האחסון, המסמך כפי שהוא שמור בקובץ, שהיא גם מה שייצוא ה-json כותב ומה שהסביבות המארחות הרשמיות שומרות. היא מכילה את הישויות הקיימות בלבד, ללא אלה שהוסרו, ללא סדר השכבות וללא מה שהעורך מחשב בעצמו, כגון רוחבים מדודים, סימוני מפתחות ועוגני קשרים. המפתחות של הישויות שלה מסודרים בסדר קבוע, היא מוזחת בשני רווחים ומסתיימת בתו שורה חדשה, כך שאותו מסמך תמיד מפיק את אותם בתים.
החל מגרסה 4.2.0, היא גם משמיטה את מה שריק: רשימת doc ריקה, אוסף ריק, שורת מילון שאין בה דבר, ושדה טקסט ריק של ישות, כגון שם, הערה, סוג נתונים, ברירת מחדל או צבע. רשימה בתוך ישות, כגון columnIds של טבלה, עדיין נכתבת גם כשהיא ריקה. ה-doc של מסמך חדש הוא {}, ואין בו collections, ולכן יש להתייחס לשדה, לרשימה או לאוסף חסרים כאל ריקים. היא מכילה את השמות הלוגיים ואת דגלי השם הנגזר של טבלאות ועמודות, את הקישורים של העמודות לתחומים, ואת המילים, המונחים והתחומים, כשכל מילון נכתב כשורת כותרות אחת של שמות שדות ואחריה השורות שלו, כל שורה בשורה נפרדת, בסדר הגיליון. ראו צורת האחסון.
כל הגדרה שהנעילה שלה מופעלת נכתבת בערך שבו היא נעולה, ולא כפי שהמסך מציג אותה. הנעילה Viewport מחזיקה את originX, originY ו-zoomLevel, והנעילות Canvas Type, Language, Table Name Case, Column Name Case, Bracket Type, והחל מגרסה 4.2.0 גם Name View, מחזיקות כל אחת את ההגדרה שלה. תצוגת השמות נכתבת כ-nameViewMode, ורק כל עוד היא אינה 'physical'. כל הגדרה אחרת נכתבת כפי שהיא, ו-lockSettings נכתב תמיד. לגבי הסיביות, ראו Settings; הסיבית של הנעילה Name View מתפרשת הפוך.
החל מגרסה 5.0.0, גם ההגדרות שקורא של עורך לקריאה בלבד משנה נכתבות בערכים של המסמך, נעולות או לא, כי הן נשארות על אותו מסך.
במסמך חדש כל הנעילות מופעלות, בין שזה המסמך שאלמנט מציג לפני שניתן לו ערך ובין שזה מסמך שנטען מערך ריק. ה-value שלו שומר את נקודת הראשית על 0, 0, את רמת הזום על 1, את כרטיסיית ERD, את ברירות המחדל של שפת הקוד במחולל הקוד, של סגנונות השמות ושל סוג המירכאות, והחל מגרסה 4.2.0 את התצוגה Physical Names, עד שמבטלים את הנעילה המתאימה.
לפני גרסה 4.0.0, הוא החזיר את המסמך כולו כפי שהעורך החזיק אותו, לאחר החלת ignoreSaveSettings. המסמך כפי שהעורך מחזיק אותו הוא כעת runtimeValue, ו-ignoreSaveSettings כבר אינו נקרא ואינו נכתב.

const data = editor.value;

setter

טוען מצב עורך שנשמר קודם לכן. הוא מחליף את המסמך כולו – המסמך הנוכחי מתרוקן תחילה. החל מגרסה 4.2.0, זה כולל את המילים, המונחים והתחומים: המסמך מקבל את אלה שהטקסט מכיל, או אף אחד מהם, והיסטוריית ביטול הפעולות הנפרדת של כל גיליון בכרטיסיית מילון מתרוקנת.
כמו clear(), setInitialValue() והמתודות setSchema* במצב ברירת המחדל שלהן, mode: 'replace', הוא גם מאפס את תצוגת הזרימה של כרטיסיית ויזואליזציה: הפריסה שלה, הטבלאות שהיא ממוקדת בהן, תצוגת השורות שלה, הזום והזזת התצוגה, והחל מגרסה 4.2.0 גם הטבלאות שהלחצנים Previous table ו-Next table שלה עוברים ביניהן. הוספה (mode: 'append') אינה מאפסת אותה.
החל מגרסה 5.1.0, הוא מסיים ציור קשר שמתבצע, בין אם רק סוג הקשר הופעל ובין אם טבלת האב שלו כבר נבחרה. כך גם clear(), המתודות setSchema* ב-mode: 'replace', ה-Import של העורך עצמו, ביטול או ביצוע חוזר של כל אלה מלבד ביטול של clear(), וכל אחד מהם כשהוא מתקבל דרך מאגר משותף, מאת שותף לעריכה או מאת סוכן קוד. לפני גרסה 5.1.0, השרטוט נשאר פעיל לאורך הטעינה, ובמקום שבו הטקסט הנטען, כגון ערך זמן הריצה שביטול נושא, החזיק את הטבלה שממנה התחיל כישות שהוסרה, לחיצה יכלה להוסיף קשר מאותה טבלה שהוסרה. הוספה משאירה שרטוט פעיל.
כמו קודם, עורך של פתק, של שם קבוצת טבלאות או של תא נשאר פתוח כל עוד המסמך הנטען עדיין מחזיק ומציג את מה שהוא עורך, ונסגר אחרת; הקלדה בעורך שנשאר פתוח ממשיכה אל המסמך הנטען. החל מגרסה 5.1.0, עורך שטעינה כלשהי סוגרת משאיר את המקלדת לדף במקום להחזיר אותה לעורך, ולכן Delete או Backspace שנועדו לטקסט שנסגר אינם מסירים דבר מהבחירה. תא שם לוגי שנשאר פתוח לאורך טעינה כזו גוזר את השם הפיזי עם סגירתו רק משם לוגי שהמשתמש הקליד, ולעולם לא, החל מגרסה 5.1.0, משם שהטעינה הביאה.
הוא נרשם ברשימת ההיסטוריה, מה שמאפשר Undo, Redo, והוא משגר change.
הוא מקבל את צורת האחסון, runtimeValue, או קובץ שנשמר בגרסה קודמת.
מחרוזת ריקה, או כל דבר שאינו מחרוזת, טוענים מסמך חדש במקום לזרוק שגיאה, ולכן יש לבדוק את הערך לפני השמתו.
המסמך החדש הזה הוא זה ש-setInitialValue('') פותחת: ריק, עם הגדרות ברירת מחדל, והחל מגרסה 4.0.0 עם כל הנעילות מופעלות. בגרסה 3.10.x הוא לא שמר את מיקום הגלילה ולא את רמת הזום, ולפני כן שמר את שניהם.
מאגר משותף מעביר הלאה את הטעינה הזאת לשותפים לעריכה עם ה-JSON המלא של המסמך החדש, כך שכל עמית, כולל עמית בגרסה ישנה יותר, טוען אותו, אף שעורך בגרסה שקודמת ל-4.2.0 משמיט את מה שאינו מכיר, כגון השמות הלוגיים, הקישורים לתחומים והמילונים – ראו שילוב גרסאות שונות.
החל מגרסה 4.0.0, הנעילות של המסמך הנטען, והערכים הנעולים ש-value כותב לאחר מכן, נלקחים מהטקסט, והתצוגה נוחתת במקום שהטקסט קובע, או על התרשים כשאף חלק ממנו אינו מוצג שם. בכל הגדרה אחרת שהטקסט נועל – הכרטיסייה, שפת הקוד במחולל הקוד, סגנונות השמות, סוג המירכאות, והחל מגרסה 4.2.0 תצוגת השמות – העורך ממשיך להציג את מה שהציג לפני הטעינה. הגדרה שהטקסט משאיר לא נעולה מקבלת את הערך מהטקסט. קובץ שנשמר לפני גרסה 4.2.0 אינו מציין את הנעילה Name View, אלא אם עורך בגרסה 4.2.0 כיבה בו את הנעילה הזאת, ולכן הוא נטען כשתצוגת השמות נעולה על Physical Names, והעורך שומר על תצוגת השמות שהציג. setInitialValue, לעומת זאת, מקבלת כל ערך שהטקסט מכיל; ראו אותה גם לגבי טקסט שאינו מציין נעילות.
גם טקסט שאינו JSON, כגון קובץ שנותרו בו סימוני התנגשות מיזוג, אינו גורם לזריקת שגיאה: המסמך מתרוקן, ההגדרות שלו נשארות כפי שהיו, ושגיאת הניתוח נרשמת במסוף הדפדפן.
אין לו השפעה כל עוד readonly מוגדר; לטעינה לעורך לקריאה בלבד יש להשתמש ב-setInitialValue.

editor.value = 'json...';

runtimeValue

החל מגרסה 4.0.0, מאחזר את המסמך כפי שהעורך הזה מחזיק אותו, כמחרוזת JSON. אין לו setter, ולכן השמה אליו זורקת שגיאה בקוד ב-strict mode.
הוא כולל את מה ש-value משמיט: ישויות שהוסרו והסדר שלהן, סדר השכבות, רוחבים מדודים, סימוני מפתחות, הדגלים של כל קשר (אם הוא מזהה, ואיך קצה האב שלו מוצג) ועוגניו, ורצפים.
החל מגרסה 4.2.0, הוא שומר גם את הדברים הריקים ש-value משמיט: טקסט ריק של ישות, כגון שם, הערה, סוג נתונים, ברירת מחדל, צבע או טקסט של פתק; רשימות ה-doc tableIds, relationshipIds, indexIds ו-memoIds והאוספים tableEntities עד memoEntities, שנכתבים גם כשהם ריקים; רשימת קבוצות הטבלאות והאוסף שלהן כל עוד המסמך מחזיק קבוצה או קבוצה שהוסרה; וכל מילון עם רשימת ה-doc שלו כל עוד אחד מהם מחזיק שורה. הוא שומר שם לוגי שכולו רווחים, קישור לתחום שהוסר, השורות שהוסרו מגיליון בכרטיסיית מילון ואלה שאין בהן דבר. כמו ב-value, שם לוגי, קישור לתחום או קבוצת טבלאות של טבלה שהם '', ודגל שם נגזר של טבלה שכבוי, מושמטים.
כל מילון הוא שורת כותרות ושורות, כמו בקובץ, אבל שורת הכותרות שלו כוללת את "order", מפתח הסדר של כל שורה, מיד אחרי "name", והשורות שלו מופיעות בסדר שהעורך מחזיק אותן, כולל שורות שהוסרו, ולא בסדר הגיליון. לקבלת סדר הגיליון, יש לקחת את השורות שרשימת ה-doc שלו מציינת ולמיין אותן לפי order, בהשוואה לפי סדר יחידות קוד, ושורות שחולקות מפתח לפי id.
ההגדרות שלו נכתבות כפי ש-value כותב אותן, כל הגדרה נעולה בערך הנעול שלה. הוא מוזח בשני רווחים, כל שורת מילון בשורה משלה, ובניגוד ל-value הוא אינו מסתיים בשורה חדשה.
יש להשתמש בו כדי לאתחל עורך נוסף שמצטרף לסשן שכבר פועל, כגון שותף לעריכה או תצוגה שנייה של אותו מסמך, באמצעות ה-setInitialValue שלו. ביטול של הסרה שהסשן שולח מאוחר יותר משחזר אז שם את הישות במלואה, ואילו עורך שאותחל מ-value אינו מחזיק אף ישות שהוסרה, ובמקום זאת משחזר טבלה ריקה וללא שם, או, החל מגרסה 4.2.0, שורת מילון ריקה. ראו עריכה שיתופית.
ישויות שהוסרו כבר אינן נאספות, ולכן הן נשארות בו עד הפעם הבאה שבה המסמך נפתח מהקובץ שלו.
לעולם אין לכתוב אותו לקובץ: יש לשמור את value, שה-JSON Schema מקבל, בעוד שאת זה הוא אינו מקבל.

otherEditor.setInitialValue(editor.runtimeValue);

setInitialValue

טוענת מצב עורך שנשמר קודם לכן. הטעינה עצמה אינה נרשמת ברשימת ההיסטוריה, ולכן לא ניתן לבטל אותה, ואף אירוע change אינו משוגר.
היא גם מנקה את היסטוריית הפעולות, כך שלא ניתן לבטל או לבצע שוב על המסמך הנטען שום פעולה שבוצעה לפני הטעינה, והחל מגרסה 4.2.0 היא מנקה גם את ההיסטוריה הנפרדת של כל גיליון בכרטיסיית מילון.
היא מקבלת את צורת האחסון, runtimeValue, או קובץ שנשמר בגרסה קודמת, ובניגוד להשמה ל-value היא מקבלת כל הגדרה שהטקסט מכיל, כולל הכרטיסייה והגדרות הקוד.
מחרוזת ריקה, או כל דבר שאינו מחרוזת, טוענים מסמך חדש במקום לזרוק שגיאה, כך ש-setInitialValue('') פותחת תרשים ריק.
החל מגרסה 4.0.0, במסמך החדש הזה, שהוא גם מה שאלמנט מציג לפני שניתן לו ערך כלשהו, כל הנעילות מופעלות. גלילה, זום, מעבר בין כרטיסיות ושינוי של שפת הקוד במחולל הקוד, של סגנונות השמות, של סוג המירכאות או, החל מגרסה 4.2.0, של תצוגת השמות משאירים את value כפי שהיה ואינם משגרים change. בגרסה 3.10.x הוא לא שמר את מיקום הגלילה ולא את רמת הזום, ולפני כן שמר את שניהם.
מסמך שנטען מטקסט שומר על הנעילות שהוא מציין. מסמך שאינו מציין אף נעילה – כל קובץ שנשמר לפני גרסה 4.0.0, יהיה ערך ה-ignoreSaveSettings שלו אשר יהיה, וקובץ .vuerd של גרסה 2 – נפתח עם כל הנעילות מופעלות, כשההגדרה Viewport שלו נעולה על נקודת הראשית 0, 0 ועל רמת הזום 1, בכרטיסיית ERD, ועם שפת הקוד, סגנונות השמות וסוג המירכאות כפי שנשמרו בו.
החל מגרסה 4.2.0, טקסט שמציין את הנעילות שלו אך לא את הנעילה Name View נפתח כשגם הנעילה הזאת מופעלת, אפילו כשכל שאר הנעילות כבויות. קובץ שנשמר לפני גרסה 4.2.0 הוא טקסט כזה, אלא אם עורך בגרסה 4.2.0 כיבה בו את הנעילה הזאת (ראו Settings). הוא נפתח בתצוגה Physical Names, כמו טקסט שאינו מציין אף נעילה.
בכל מקרה, התצוגה נפתחת בתצוגה של המסמך – זו שהטקסט שמר כשהוא מציין את הנעילות שלו, ונקודת הראשית 0, 0 ברמת הזום 1 כשהוא אינו מציין אף נעילה – או על התרשים כשאף חלק ממנו אינו מוצג שם. הגדרת Viewport נעולה עדיין שומרת ב-value על הערכים הנעולים שלה.
החל מגרסה 4.0.0, היא גם משליכה את מצב שיתוף הפעולה של המסמך שהוחזק קודם לכן, ומאגר משותף של העורך הזה שכבר רשום מבקש שוב מהעורכים האחרים את המצב שלהם, כך שעורך שנטען מחדש בסשן פועל מתעדכן. יש לאתחל עורך כזה באמצעות ה-runtimeValue של עורך אחר.
החל מגרסה 5.1.0, אוגרי שיתוף הפעולה יכולים להגיע עם האתחול במקום זאת, מה שתמונת מצב שמורה צריכה כשאין עורך פועל שיענה.
לאחר הקריאה הזאת, ולעולם לא לפניה, יש להעביר את getLWW() ואת getVersion() של מאגר אחר אל mergeLWW במאגר המשותף של העורך הזה. או לטעון דרך reseed של אותו מאגר, שטוענת ומקבלת אותם בקריאה אחת וגם משליכה את הבחירה ואת המיקוד. ראו אתחול שותף לעריכה.
גם טקסט שאינו JSON אינו גורם לזריקת שגיאה: המסמך מתרוקן, ההגדרות שלו נשארות כפי שהיו, ושגיאת הניתוח נרשמת במסוף הדפדפן.
בניגוד להשמה ל-value, היא אינה נחסמת על ידי readonly, ולכן זו הדרך לטעון מסמך לעורך לקריאה בלבד. עורך לקריאה בלבד מציג אז את ההגדרות שהטקסט הנטען מכיל, ומשליך את אלה שהקורא שינה על המסך.

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

editor.setInitialValue('json...');

טעינה בהתחלה, שמירה בכל שינוי.

editor.setInitialValue(localStorage.getItem('my-diagram') ?? '');
editor.addEventListener('change', () => {
  localStorage.setItem('my-diagram', editor.value);
});

אירועים

change, changePresetTheme ו-changeLocale הם שלושת האירועים הציבוריים היחידים; changeLocale חדש בגרסה 4.0.0.
האלמנט גם משגר על עצמו אירועים פנימיים @dineug/erd-editor/internal-* לצורך החיווט הפנימי שלו; הם אינם חלק מה-API.

change

כשיש שינויים בעורך, העורך משגר אירוע.
האירוע מושהה (debounce) ב-200ms, והוא אינו משוגר כל עוד readonly הוא true.
הוא משוגר בכל שינוי במסמך – עריכה בממשק, השמה ל-value, clear(), כל אחת מהמתודות setSchema*, והחל מגרסה 4.0.0 גם setSchemaJSON() ו-Import and Add. setInitialValue אינה משגרת אותו, והחל מגרסה 5.1.0 גם reseed של מאגר משותף אינה משגרת אותו, מלבד השם הפיזי ששתיהן גוזרות עם סגירת תא שם לוגי שהמשתמש הקליד בו (ראו setInitialValue).
החל מגרסה 4.2.0, הדבר כולל כל עריכה בכרטיסיית מילון וכל ביטול או ביצוע חוזר של עריכה כזו, שינוי של שם לוגי או של קישור לתחום, את Derive Physical Names Again, והחלפה של תצוגת השמות כל עוד הנעילה Name View כבויה.
שום פעולה בתוך מצב הזרימה של כרטיסיית ויזואליזציה אינה משגרת אותו – זום, הזזת התצוגה, הזזת כרטיסים, Tidy Up, תצוגת השורות, מיקוד התצוגה מכרטיס או, החל מגרסה 4.2.0, צעדים באמצעות Previous table ו-Next table או באמצעות מקשי ביטול הפעולה והביצוע החוזר – מכיוון שאף אחת מהן אינה שינוי במסמך. הרשימה Name View שלו היא היוצא מן הכלל: החלפה שם משגרת אותו כל עוד הנעילה Name View כבויה, כמו החלפה בכרטיסיית ERD.
החל מגרסה 4.0.0, גם שינוי בהגדרה שהנעילה שלה מופעלת אינו משגר אותו, מכיוון שהוא משנה רק את המסך ולעולם לא את value: גלילה או זום של בד הציור של ERD כש-Viewport נעול, מעבר בין כרטיסיות כש-Canvas Type נעול, שינוי של שפת הקוד במחולל הקוד, של סגנון שמות הטבלאות, של סגנון שמות העמודות או של סוג המירכאות כשהנעילה של אותה הגדרה מופעלת, והחל מגרסה 4.2.0 החלפה של תצוגת השמות כש-Name View נעול. רק השינויים האלה אינם נכללים, כך שאצווה שגם עורכת את המסמך עדיין משגרת אותו. נעילה של הגדרה או ביטול הנעילה שלה משגרים אותו.
במסמך חדש ובכל קובץ שנשמר לפני גרסה 4.0.0 כל הנעילות מופעלות, והנעילה Name View מופעלת בכל קובץ שנשמר לפני גרסה 4.2.0, אלא אם עורך בגרסה 4.2.0 כיבה אותה שם, ולכן כברירת מחדל גלילה, זום, מעבר בין כרטיסיות והחלפת תצוגת השמות אינם משגרים דבר. הדבר חל על התמקדות בטבלאות מכרטיסיית ERD, על לחצן הקישור החיצוני בכרטיס שמחזיר ממצב זרימה לכרטיסיית ERD, על מעבר אל שורה בסייר או אל התאמת חיפוש, על פתיחת הסייר או מעבר אל תוצאה של החיפוש המהיר מכרטיסייה אחרת, והחל מגרסה 4.2.0 על מעבר אל טבלה או עמודה משורה בגיליון Checks של כרטיסיית מילון. כל אחת מהפעולות האלה משגרת change אחד רק כשנעילה שחלה עליה כבויה: Canvas Type למעבר בין הכרטיסיות, ו-Viewport לגלילה שגם לחצן בכרטיס, תוצאה של החיפוש המהיר, שורה בסייר, התאמת חיפוש או שורה בגיליון Checks מבצעים. החל מגרסה 4.1.0, כל הגלילות האלה פועלות לפי כלל אחד, היכן נוחתת קפיצה, כך שתוצאת טבלה בחיפוש המהיר כבר אינה גוללת בכל פעם, וקפיצה שהכלל משאיר במקומה אינה יוצרת גלילה שתגרום לשיגור. פתיחה, סגירה או שינוי גודל של הסייר מצרים או מרחיבים את בד הציור בלי להזיז את נקודת הראשית שלו, וגם הם אינם משגרים דבר. לפני גרסה 4.0.0, גלילה, זום ומעבר בין כרטיסיות תמיד שיגרו אותו, גם כש-editor.value יצא זהה.
כדי לדלג על כתיבות שאינן משנות דבר, יש להשוות את editor.value לערך שנשמר לאחרונה, ולא לקובץ שנטען: קובץ שגרסה קודמת כתבה, קובץ מגרסה 2 או קובץ שנערך ידנית עשויים לצאת שונים ב-value מיד עם טעינתם, מכיוון ש-value כותב אותם בצורת האחסון. כך גם קובץ שהנעילה Viewport שלו כבויה ושנקודת הראשית שלו אינה מציגה אף חלק מהתרשים במסך הזה: הטעינה מזיזה את התצוגה אל התרשים, ו-value כותב את המקום שבו היא נוחתת. החל מגרסה 4.0.0, רוחבים מדודים כבר אינם גורמים לכך, מכיוון ש-value אינו מכיל אותם. החל מגרסה 4.2.0, גם קובץ שנשמר בגרסה 4.0.0 או 4.1.0 עשוי לצאת שונה, מכיוון ש-value משמיט כעת את שדות הטקסט, הרשימות והאוספים הריקים שלו, ולכן קובץ כזה נכתב מחדש פעם אחת, בשמירה הבאה שלו. סביבה מארחת שכותבת קבצים יכולה, במקום זאת, להבחין בין עריכה לבין שינוי תצוגה באמצעות changed של מאגר שכפול – ראו on@change.
האירוע אינו נושא detail, אינו מבעבע ואינו חוצה את גבול ה-shadow, ולכן יש להאזין על האלמנט עצמו ולקרוא את editor.value בפונקציית הטיפול.

editor.addEventListener('change', event => {
  const data = event.target.value;
});

changePresetTheme

משוגר כשערכת הנושא המוגדרת מראש משתנה מבונה ערכת הנושא המובנה, או, החל מגרסה 4.0.0, מהפקודה Theme בחיפוש המהיר. כל בחירה משגרת אותו, כולל בחירה באפשרות שכבר בתוקף.
קריאה ישירה ל-setPresetTheme או ל-setSystemAppearance, או הפעלה או כיבוי של systemDarkMode, אינן משגרות אותו.
event.detail הוא ה-ThemeOptions המלא לאחר הבחירה – { appearance, grayColor, accentColor } – ולא האובייקט החלקי שהתבקש. החל מגרסה 4.0.0, ה-appearance שלו הוא 'system' כשנבחר System, ולא המראה הבהיר או הכהה שמוצג, ולכן יש לשמור אותו כמות שהוא ולהעביר אותו בחזרה ל-setPresetTheme.

editor.addEventListener('changePresetTheme', event => {
  const themeOptions = event.detail;
});

changeLocale

החל מגרסה 4.0.0, משוגר כשנבחרת שפה בעורך, מבורר שפת התצוגה או מהפקודה Display Language בחיפוש המהיר, ששניהם מופעלים על ידי enableLocalePicker.
הוא משוגר לאחר שהשפה הוחלה, בכל בחירה, כולל בחירה באפשרות שכבר בתוקף. setLocale ו-setSystemLocale לעולם אינן משגרות אותו, וגם לא שינוי בשפות הדפדפן. החלפת שפה אינה משגרת change.
event.detail הוא { locale }, מסוג LocaleOption: 'system' כשנבחר System, ואחרת הקוד של השפה. האלמנט אינו זוכר את הבחירה, ולכן יש לשמור אותה ולהעביר אותה ל-setLocale בטעינה הבאה.
כמו change, הוא אינו מבעבע, ולכן יש להאזין על האלמנט עצמו.

editor.addEventListener('changeLocale', event => {
  const { locale } = event.detail; // 'system' | 'ko-KR' | ...
});

focus

מעבירה את הפוקוס לעורך.

editor.focus();

blur

מסירה את הפוקוס מהעורך.

editor.blur();

clear

מרוקנת את המסמך ומסירה כל טבלה, עמודה, קשר, אינדקס ופתק, החל מגרסה 4.0.0 גם כל קבוצת טבלאות, והחל מגרסה 4.2.0 גם את המילים, המונחים והתחומים של כרטיסיית מילון, ומרוקנת גם את היסטוריית ביטול הפעולות הנפרדת של כל גיליון.
כל ההגדרות נשארות, כולל מסד הנתונים, מיקום התצוגה, רמת הזום, אפשרויות התצוגה של הטבלאות, כל נעילה עם הערך שהיא מחזיקה, והסקריפטים Before tables ו-After tables של כרטיסיית סכמת SQL, כך שקובץ שרוקן ממשיך לשמור את מה ששמר. כדי להתחיל מסמך חדש במקום זאת, יש להשים '' ל-value או לקרוא ל-setInitialValue('').
היא נרשמת ברשימת ההיסטוריה, כך שניתן לבטל אותה, והיא משגרת change. ביטול הפעולה מחזיר את המסמך כפי שהעורך החזיק אותו, כולל המילים, המונחים והתחומים שלו, כשכל הגדרה נעולה בערך הנעול שלה. אין לה השפעה כל עוד readonly מוגדר.
החל מגרסה 5.1.0, היא מסיימת ציור קשר שמתבצע, כפי שsetter מתאר, וכך גם הביצוע החוזר שלה; הביטול שלה אינו עושה זאת.
כמו קודם, עורך של פתק, של שם קבוצת טבלאות או של תא שנשאר פתוח נסגר, כי המסמך המרוקן אינו מחזיק דבר לערוך. החל מגרסה 5.1.0, העורך שנסגר משאיר את המקלדת לדף, כמו אחרי טעינה.

editor.clear();

destroy

משמידה לחלוטין את מופע העורך, כך שלא ניתן עוד לעשות בו שימוש חוזר.
היא משחררת את המאזינים ואת ההרשמות של העורך, ומשמידה כל מאגר משותף ש-getSharedStore החזירה.
אצוות זרם שמאגר משותף עדיין מעכב אובדת יחד איתו; כדי לשלוח אותה, יש לקרוא תחילה ל-flushStreamBuffers של אותו מאגר.

editor.destroy();

setKeyBindingMap

מגדירה מחדש את קיצורי המקשים.
edit, stop, undo, redo, zoomIn, zoomOut ו-zoomReset קבועים ולא ניתן להגדיר אותם מחדש.
רק עשרים ואחד השמות שלהלן נכתבים; כל דבר אחר באובייקט אינו נלקח בחשבון, כולל השמות הקבועים.
החל מגרסה 3.10.0, ניתן להגדיר מחדש את search, ו-findReplace חדש. לפני כן, search היה קבוע. החל מגרסה 4.0.0, removeSelection חדש. החל מגרסה 4.1.0, addTableGroup ו-groupSelectedTables חדשים.
ערך של צירוף מקשים חייב להיות ShortcutOption[]. מחרוזת בודדת אינה נלקחת בחשבון, ולכן יש לכתוב { addTable: [{ shortcut: 'Alt+KeyN' }] } ולא { addTable: 'Alt+KeyN' }.
מערך ריק מתקבל ואינו משייך דבר: setKeyBindingMap({ findReplace: [] }) משאיר את Ctrl + F (Windows/Linux) או ⌘ + F (Mac) לדף, ו-{ search: [] } עושה אותו דבר עבור Ctrl + K (Windows/Linux) או ⌘ + K (Mac). הלחצן Search בסרגל הכלים עדיין פותח את החיפוש המהיר, הלחצן Explorer בסרגל הכלים עדיין פותח וסוגר את הסייר, והפריט Toggle Explorer בחיפוש המהיר ובתפריט ההקשר של בד הציור עדיין פותח את החיפוש שלו או סוגר אותו; אף אחד מאלה אינו מציג קיצור מקשים עבור שם שהושאר ריק. { removeSelection: [] } משאיר את Delete ו-Backspace לדף, ושורות המחיקה בתפריטים של הטבלה, הפתק וקבוצת הטבלאות (Delete, Delete selected, Delete column, Delete columns) אינן מציגות אז קיצור מקשים.
החל מגרסה 4.1.0, { addTableGroup: [] } משאיר את Alt + G (Windows/Linux) או ⌥ + G (Mac) לדף, ו-{ groupSelectedTables: [] } משאיר את T ואז G. הפקודה New Table Group בסרגל הכלים של בד הציור, בתפריט ההקשר של בד הציור ובחיפוש המהיר, הפריט Group selected tables בתפריט הטבלה והפקודה Group Selected Tables בחיפוש המהיר ממשיכים לפעול, ללא הצגת קיצור מקשים. תיאורי הכלי של הלחצנים New Table, New Memo ו-New Table Group בסרגל הכלים של בד הציור מציינים את הצירוף הראשון של addTable, addMemo ו-addTableGroup, או רק את שם הלחצן עבור צירוף מקשים שהושאר ריק.
החל מגרסה 4.2.0, addColumn ו-removeColumn מספקים גם לרשת של כרטיסיית מילון את צירופי המקשים של השורות שלה, כמתואר בהמשך, כך ששיוך מחדש של אחד מהם מעביר איתו גם את הצירופים האלה. { addColumn: [] } אינו משאיר לרשת אף צירוף להוספת שורות, ושתי שורות ההוספה בתפריט הרשת אינן מציגות אז קיצור מקשים; { removeColumn: [] } אינו משאיר לה אף צירוף למחיקתן, ושורת המחיקה בתפריט ותיאור הכלי של Delete Rows אינם מציגים אז קיצור מקשים.
הקריאה היא מיזוג חלקי: שמות שאינם נכללים בה שומרים על ברירות המחדל שלהם, וקריאה כפולה שומרת על השינויים הקודמים. אין getter לצירופי המקשים הנוכחיים: createKeyBindingMap מחזירה את ברירות המחדל, ולא את מה ש-setKeyBindingMap שינתה.

type ShortcutOption = {
  shortcut: string;
  preventDefault?: boolean;
  stopPropagation?: boolean;
};

const defaultKeyBindingMap: Omit<
  KeyBindingMap,
  | 'edit'
  | 'stop'
  | 'undo'
  | 'redo'
  | 'zoomIn'
  | 'zoomOut'
  | 'zoomReset'
> = {
  search: [
    { shortcut: '$mod+KeyK', preventDefault: true, stopPropagation: true },
  ],
  findReplace: [
    { shortcut: '$mod+KeyF', preventDefault: true, stopPropagation: true },
  ],
  addTable: [{ shortcut: 'Alt+KeyN', preventDefault: true }],
  addColumn: [{ shortcut: 'Alt+Enter', preventDefault: true }],
  addMemo: [{ shortcut: 'Alt+KeyM', preventDefault: true }],
  addTableGroup: [
    { shortcut: 'Alt+KeyG', preventDefault: true, stopPropagation: true },
  ],
  groupSelectedTables: [{ shortcut: 'KeyT KeyG', preventDefault: true }],
  removeTable: [
    { shortcut: '$mod+Backspace', preventDefault: true },
    { shortcut: '$mod+Delete', preventDefault: true },
  ],
  removeColumn: [
    { shortcut: 'Alt+Backspace', preventDefault: true },
    { shortcut: 'Alt+Delete', preventDefault: true },
  ],
  removeSelection: [
    { shortcut: 'Delete', preventDefault: true },
    { shortcut: 'Backspace', preventDefault: true },
  ],
  primaryKey: [{ shortcut: 'Alt+KeyK', preventDefault: true }],
  selectAllTable: [
    { shortcut: '$mod+KeyA', preventDefault: true },
    { shortcut: '$mod+Alt+KeyA', preventDefault: true },
  ],
  selectAllColumn: [{ shortcut: 'Alt+KeyA', preventDefault: true }],
  relationshipZeroOne: [{ shortcut: '$mod+Alt+Digit1', preventDefault: true }],
  relationshipZeroN: [{ shortcut: '$mod+Alt+Digit2', preventDefault: true }],
  relationshipOneOnly: [{ shortcut: '$mod+Alt+Digit3', preventDefault: true }],
  relationshipOneN: [{ shortcut: '$mod+Alt+Digit4', preventDefault: true }],
  tableProperties: [{ shortcut: 'Alt+Space', preventDefault: true }],
  focusView: [
    { shortcut: 'Alt+KeyF', preventDefault: true, stopPropagation: true },
  ],
  handTool: [{ shortcut: 'Space', preventDefault: true }],
  zenMode: [
    { shortcut: 'Alt+KeyZ', preventDefault: true, stopPropagation: true },
  ],
};

// example
editor.setKeyBindingMap({
  addTable: [{ shortcut: '$mod+KeyN', preventDefault: true }],
});

selectAllTable, handTool, removeSelection, והחל מגרסה 4.1.0 גם groupSelectedTables, מפנים את מקומם לסמן הטקסט: כשהפוקוס נמצא בשדה קלט, ב-textarea או ב-contenteditable, $mod + A בוחר את הטקסט, Space מקליד רווח, Delete ו-Backspace מוחקים טקסט, ו-T ואז G מקלידים את שתי האותיות, במקום להגיע לבד הציור. אף אחת מההקשות האלה אינה נמנעת. כל צירוף שאליו משייכים אותם מחדש מתנהג באותו אופן.

החל מגרסה 4.0.0, removeSelection (Delete או Backspace) מסיר את הבחירה בכרטיסיית ERD כצעד ביטול אחד, בלי לבקש אישור. כשהטבלה שבפוקוס היא הדבר היחיד שנבחר, אחת או יותר מהעמודות שלה נבחרו, ורמת הזום מציגה את השורות שלה, הוא מסיר את העמודות האלה; אחרת הוא מסיר כל טבלה, פתק וקבוצת טבלאות שנבחרו, והטבלאות של קבוצה נשמרות. ראו מחיקת טבלאות ופתקים.
מקש לחוץ ממושכות מסיר פעם אחת, ושום דבר אינו מוסר כשעורך של תא, של פתק או של שם קבוצת טבלאות פתוח. מחוץ לשדה טקסט ולחלוניות ולכרטיסיות שמעכבות צירופי מקשים (ראו createKeyBindingMap), ההקשה נמנעת בכל כרטיסייה כל עוד לעורך יש פוקוס, גם על לחצן בסרגל הכלים שבפוקוס, וגם בעורך לקריאה בלבד, שבו היא אינה מסירה דבר.

החל מגרסה 4.1.0, addTableGroup (Alt+KeyG) מפעיל את השרטוט New Table Group בכרטיסיית ERD, שבו הלחיצה הבאה בלחצן הראשי על בד הציור משרטטת את הקבוצה, והקשה נוספת מסיימת את השרטוט, כפי שעושה הלחצן New Table Group בסרגל הכלים של בד הציור. groupSelectedTables (KeyT KeyG, T ואז G) מכניס את הטבלאות שנבחרו לקבוצה חדשה ופותח את עורך השם שלה, כפי שעושה הפריט Group selected tables בתפריט ההקשר של טבלה. כשלא נבחרה אף טבלה הוא אינו מוסיף דבר; פתק או קבוצת טבלאות שנבחרו אינם נספרים. ראו שרטוט קבוצה וקיבוץ הטבלאות שנבחרו.
שניהם פועלים רק במקום שבו התפריטים מציעים קבוצה: לא כש-readonly מוגדר, לא כשאפשרות התצוגה Table Groups מסתירה את הקבוצות, ולא כשעורך של תא, של פתק או של שם קבוצת טבלאות פתוח. כמו שאר צירופי המקשים של בד הציור, הם פועלים רק בכרטיסיית ERD, ולא כשהחיפוש המהיר, חלון מאפייני הטבלה, מציג ההבדלים, מסע בזמן, התצוגה המקדימה של הפריסה האוטומטית, תיבת הדו-שיח Export image או Map Columns פתוחים. במקום שבו הם אינם עושים דבר, ההקשה עדיין נמנעת, אלא אם groupSelectedTables מפנה את מקומו לסמן הטקסט. addTableGroup גם נעצר, כמו focusView ו-zenMode, כך שמאזין keydown של הדף בשלב הבעבוע לעולם אינו קולט אותו.

החל מגרסה 4.2.0, בכרטיסיית מילון, כל צירוף של הקשה אחת של addColumn מוסיף מתחת לבחירה מספר שורות כמספר השורות שהבחירה מכסה, אותו צירוף כשגם Shift מוחזק מוסיף אותן מעליה, וכל צירוף של הקשה אחת של removeColumn מוחק את השורות שהבחירה מכסה: Alt+Enter, Alt+Shift+Enter, ו-Alt+Backspace או Alt+Delete עם ברירות המחדל. הם פועלים ברשת של הגיליונות Domains, Words ו-Terms כל עוד אין עריכת תא פתוחה. צירוף של addColumn שכבר כולל את Shift אינו מספק צירוף להוספה מעל, ורצף שמשויך לאחד משני השמות אינו מספק לרשת דבר.
כל הקשה כזו נמנעת כפי שהאפשרות שלה קובעת ותמיד נעצרת, כך שהיא אינה מוסיפה ואינה מסירה עמודה בכרטיסיית ERD. בגיליון Checks ובעורך לקריאה בלבד היא אינה עושה דבר, אף שהיא עדיין נמנעת ונעצרת. בעריכת תא פתוחה או בשדה החיפוש של הכרטיסייה, הצירופים נשארים לטקסט: הם נעצרים שם אך אינם נמנעים, כך שהשדה מגיב להם כפי שהיה מגיב בכל מקום אחר (ב-Mac, ⌥ + Backspace מוחק מילה). dictionaryRowChords מפרטת אותם.

החל מגרסה 3.10.0, findReplace ($mod+KeyF) פותח את איתור והחלפה. החל מגרסה 4.1.0, הוא מציג או מסתיר את הסייר שמכיל אותו, וכרטיסיית קיצורי מקשים מציגה אותו בשם Toggle Explorer.
כל עוד הלחצן Explorer בסרגל הכלים נראה לחוץ (הסייר פתוח בכרטיסיית ERD ואינו מוסתר על ידי מצב זן), הוא סוגר את הסייר, אלא אם החיפוש המהיר, חלון מאפייני הטבלה, בונה ערכת הנושא, בורר שפת התצוגה, תיבת הדו-שיח Export image או Map Columns פתוחים. אחרת הוא סוגר את מה שפתוח מביניהם, עובר לכרטיסיית ERD מכל כרטיסייה אחרת, ופותח את הסייר עם סמן הטקסט בשדה Find שלו, כשמחרוזת החיפוש נבחרת. עורך צר מכדי להציג את הסייר לצד בד הציור משאיר אותו פתוח אך מפנה אותו הצידה, ומציג את ההודעה הקופצת Widen the window to show the Explorer. לפני גרסה 4.1.0, הוא פתח את חלונית איתור והחלפה הצפה, או החזיר את המקלדת לשדה שלה, ולעולם לא סגר אותה.
הוא אינו מפנה את מקומו לסמן הטקסט: כל עוד העורך בפוקוס, הוא נקלט בכל כרטיסייה, מבד הציור או משדה קלט בתוך העורך. ההקשה נמנעת, כך שהדפדפן אינו פותח את סרגל האיתור שלו, ונעצרת, כך ששום מאזין keydown של הדף בשלב הבעבוע אינו קולט אותה. כשעורך של תא או של פתק פתוח, החל מגרסה 4.0.0 עורך של שם קבוצת טבלאות, או, החל מגרסה 4.2.0, עריכת תא ברשת של כרטיסיית מילון, הוא עדיין נמנע ונעצר, אך אינו עושה דבר. במקרה האחרון גם search אינו עושה דבר, כך שהטקסט שהוקלד עד כה נשאר.
כשמציג ההבדלים, מסע בזמן או התצוגה המקדימה של הפריסה האוטומטית פתוחים, בכל כרטיסייה שהיא, או כשההרכבה בשיטת הקלט (IME) עדיין מתבצעת, הוא אינו נמנע ואינו נעצר, כך שהאיתור של הדפדפן או של הסביבה המארחת מקבל אותו. בתוך הסייר, הקשה במהלך הרכבה נעצרת שם, אך אינה נמנעת. כל צירוף שאליו משייכים מחדש את findReplace מתנהג באותו אופן.

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

undo ו-redo פועלים לפי הכרטיסייה. בכרטיסיית ERD הם מבטלים ומבצעים שוב פעולות מההיסטוריה של המסמך. החל מגרסה 4.2.0, בכרטיסיית מילון הם מבטלים ומבצעים שוב פעולות מההיסטוריה הנפרדת של הגיליון המוצג, ובגיליון Checks אינם עושים דבר – ראו גיליונות המילון. במצב הזרימה של כרטיסיית ויזואליזציה הם צועדים אחורה וקדימה כפי ש-Previous table ו-Next table עושים, ואינם נוגעים בהיסטוריה של המסמך. בכרטיסיות האחרות, ובמצב גרף, הם אינם מבטלים דבר.

stop (Escape) בכרטיסיית ERD מסיים עורך פתוח של תא או של פתק, או קשר שנמצא בשרטוט, ומשאיר את הבחירה כפי שהיא. החל מגרסה 4.0.0, הוא גם מסיים עורך של שם קבוצת טבלאות, בלי לכתוב שם, ושרטוט New Table Group. העורך קורא ל-preventDefault() על ההקשה הזאת.
כשאף אחד מאלה אינו פתוח, Escape מנקה את הבחירה ואת התא הפעיל, ואינו נמנע. לכן, יציאה מעריכה וניקוי הבחירה דורשים שתי הקשות.
החל מגרסה 4.2.0, כל עוד רשימת המונחים של תא שם לוגי מוצגת (ראו השלמת שמות מונחים), ה-Escape הראשון סוגר רק את הרשימה ומשאיר את העורך פתוח. הקשה זו נמנעת ונעצרת בתא, כך שלא stop ולא מאזין keydown של הדף בשלב הבעבוע קולטים אותה.
מלבד הסייר, הפורמטים של Import במסך הפתיחה, רשימת המונחים של תא שם לוגי, כרטיסיית מילון, והבוררים ותיבות הדו-שיח שלהלן, העורך לעולם אינו עוצר את ההתפשטות של Escape, כך שדף שמאזין לו בעצמו, לדוגמה כדי לסגור תיבת דו-שיח משלו, קולט את שתי ההקשות ויכול לדלג על זו שה-defaultPrevented שלה הוא true.
כשהחיפוש המהיר, חלון מאפייני הטבלה, מציג ההבדלים, התצוגה המקדימה של הפריסה האוטומטית או מסע בזמן פתוחים, Escape סוגר את מה שפתוח במקום זאת ומשאיר את הבחירה כפי שהיא. גם הקשה זו אינה נמנעת.
החל מגרסה 4.0.0, גם תיבת הדו-שיח Export image או Map Columns, כשהיא פתוחה, קולטת את Escape, נסגרת ומשאירה את הבחירה כפי שהיא. כל אחת מהן לוקחת את המקלדת כשהיא נפתחת, וה-Escape הזה גם נמנע וגם נעצר.
החל מגרסה 4.1.0, הקשה על Escape כשהפוקוס נמצא בתוך הסייר, בעץ שלו, בשדות שלו או בלחצנים שלו, מחזירה את המקלדת לבד הציור ומשאירה את הסייר פתוח ואת הבחירה כפי שהיא. העורך קורא עליה גם ל-preventDefault() וגם ל-stopPropagation(), כך שהיא לעולם אינה מגיעה למאזין keydown של הדף בשלב הבעבוע.
הקשה על Escape בבד הציור לעולם אינה סוגרת את הסייר. לפני גרסה 4.1.0, הקשה על Escape בתוך חלונית איתור והחלפה סגרה אותה, והקשה כזו בבד הציור סגרה אותה ובאותה הקשה גם ניקתה את הבחירה.
החל מגרסה 4.0.0, בורר שפת התצוגה ובורר הצבעים נסגרים בהקשה על Escape: בתוכם ההקשה נמנעת ונעצרת, ובבד הציור היא סוגרת אותם ובאותה הקשה גם מנקה את הבחירה, והיא אינה נמנעת ואינה נעצרת.
הקשה על Escape כשההרכבה בשיטת הקלט (IME) עדיין מתבצעת שייכת להרכבה. היא משאירה עורך פתוח כפי שהוא ואינה נמנעת, כך שגם דף יכול לדלג על הקשה שה-isComposing שלה הוא true, או שה-keyCode שלה הוא 229. בתוך הסייר, הקשה כזו, כמו כל מקש שמוקש שם באמצע הרכבה, גם נעצרת, והמקלדת נשארת בשדה.
לפני גרסה 3.9.2, הקשה אחת על Escape גם סיימה עריכה או שרטוט וגם ניקתה את הבחירה, והעורך לעולם לא מנע אותה.

createKeyBindingMap

החל מגרסה 3.9.2, החבילה מייצאת את createKeyBindingMap(), ויחד איתה את הטיפוסים KeyBindingMap, KeyBindingName ו-ShortcutOption.
היא מחזירה את צירופי המקשים של ברירת המחדל, כל 28 השמות כולל הקבועים, כמפה חדשה בכל קריאה, כך ששינוי המפה שהיא מחזירה אינו משנה שום דבר אחר.
ממנה מתחיל כל עורך, וקריאה ל-setKeyBindingMap אינה משתקפת בה.
מבין ארבעת אלה, רק createKeyBindingMap הוא ייצוא בזמן ריצה; שלושת האחרים הם טיפוסים. החל מגרסה 4.2.0, גם dictionaryRowChords מיוצאת לצידה.

type KeyBindingName =
  | 'edit'
  | 'stop'
  | 'search'
  | 'findReplace'
  | 'undo'
  | 'redo'
  | 'addTable'
  | 'addColumn'
  | 'addMemo'
  | 'addTableGroup'
  | 'groupSelectedTables'
  | 'removeTable'
  | 'removeColumn'
  | 'removeSelection'
  | 'primaryKey'
  | 'selectAllTable'
  | 'selectAllColumn'
  | 'relationshipZeroOne'
  | 'relationshipZeroN'
  | 'relationshipOneOnly'
  | 'relationshipOneN'
  | 'tableProperties'
  | 'focusView'
  | 'zoomIn'
  | 'zoomOut'
  | 'zoomReset'
  | 'handTool'
  | 'zenMode';

type KeyBindingMap = Record<KeyBindingName, ShortcutOption[]>;

declare function createKeyBindingMap(): KeyBindingMap;

// example
import { createKeyBindingMap } from '@dineug/erd-editor';

const shortcuts = Object.values(createKeyBindingMap())
  .flat()
  .map(({ shortcut }) => shortcut); // 'Enter', 'Escape', '$mod+KeyK', ...

כל shortcut הוא צירוף בתחביר של tinykeys שמציין את המקש שלו לפי KeyboardEvent.code, כאשר $mod הוא ⌘ ב-macOS ו-Control בכל מקום אחר.
החל מגרסה 4.0.0, העורך מפענח את הצירופים האלה בעצמו ולא באמצעות tinykeys, באותו תחביר. מקש מתאים לפי ה-code שלו, או לפי ה-key שלו בכל רישיות, והקשה מתאימה רק כשלחוצים בדיוק מקשי הצירוף שהיא מציינת. AltGraph נחשב ל-Control ול-Alt ב-Windows ול-Alt ב-macOS. הקשות המופרדות ברווח יוצרות רצף, שמתחיל מחדש אחרי שנייה ללא keydown.
החל מגרסה 4.1.0, אחת מברירות המחדל היא רצף: groupSelectedTables הוא KeyT KeyG, T ואז G. רצף מופעל בהקשה שמשלימה אותו, ורק הקשה זו מקבלת את ה-preventDefault וה-stopPropagation שלו, כך שעם ברירות המחדל T מגיע לדף ורק G נמנע. התפריטים, החיפוש המהיר וכרטיסיית קיצורי מקשים מציגים רצף כמקש אחד לכל הקשה.
השמות הקבועים משויכים ל-Enter (edit), Escape (stop), $mod+KeyZ (undo), $mod+Shift+KeyZ (redo), $mod+Equal (zoomIn), $mod+Minus (zoomOut) ו-$mod+Digit0 (zoomReset). edit ו-stop אינם נושאים דגלים; חמשת האחרים נושאים את preventDefault ואת stopPropagation. השאר הם ברירות המחדל שלמעלה, ובהם search ו-findReplace.

העורך מאזין להם על האלמנט שלו עצמו, ולכן סביבה מארחת שקולטת מקשים לפני העורך, באמצעות קיצורי מקשים גלובליים או מאזין keydown בשלב הלכידה, צריכה להעביר אותם הלאה כל עוד העורך בפוקוס.
את רשימת המקשים שיש להעביר הלאה יש לבנות מתוך createKeyBindingMap(), כשצירופי המקשים שהועברו ל-setKeyBindingMap באים במקום ברירות המחדל.
החל מגרסה 3.10.0, הרשימה הזאת כוללת את $mod+KeyF, צירוף האיתור של הדפדפן עצמו. סביבה מארחת שרוצה לשמור את האיתור שלה על הצירוף הזה קוראת ל-setKeyBindingMap({ findReplace: [] }).
החל מגרסה 4.0.0, היא כוללת גם את Delete ואת Backspace בלי מקשי צירוף. סביבה מארחת שרוצה לשמור את המקשים האלה קוראת ל-setKeyBindingMap({ removeSelection: [] }).
החל מגרסה 4.1.0, היא כוללת גם את Alt+KeyG ואת הרצף KeyT KeyG, שמגיע כמחרוזת אחת: יש לפצל אותה ברווח ולהעביר הלאה כל הקשה, כולל T ו-G בלי מקשי צירוף, מכיוון שרצף שחסרה בו הקשה לעולם אינו מושלם. סביבה מארחת שרוצה לשמור את המקשים האלה קוראת ל-setKeyBindingMap({ addTableGroup: [] }) או ל-setKeyBindingMap({ groupSelectedTables: [] }).
החל מגרסה 4.2.0, יש להוסיף לה את הצירופים ש-dictionaryRowChords מחזירה עבור אותה מפה, וביניהם Alt+Shift+Enter. סביבה מארחת שרוצה לשמור את המקשים האלה קוראת ל-setKeyBindingMap({ addColumn: [] }) או ל-setKeyBindingMap({ removeColumn: [] }), מה שגם מנתק אותם מהוספה ומהסרה של עמודות בכרטיסיית ERD.

כשהפוקוס נמצא בתוך הסייר, בעץ שלו, בשדות Find ו-Replace שלו או בלחצנים שלו, findReplace, search, undo, redo, zoomIn, zoomOut ו-zoomReset עוברים אל העורך, כך ש-findReplace פועל שם כפי שהוא פועל בבד הציור. כל צירוף מקשים אחר, כפי שהוא מוגדר כעת, נעצר בסייר, רצף נעצר בהקשה האחרונה שלו (G בלי מקשי צירוף, עם ברירות המחדל), וכך גם מקשי החיצים, Tab, Enter, Space, Home, End וכל מקש שמוקש כשההרכבה בשיטת הקלט (IME) עדיין מתבצעת. מלבד Escape, שמחזיר את המקלדת לבד הציור, הם נעצרים אך אינם נמנעים, כך שהם פועלים כמקשים רגילים בשדות, בלחצנים ובעץ של הסייר, ואינם מגיעים לא לבד הציור ולא למאזין keydown של הדף בשלב הבעבוע: בסייר, Alt + N אינו מוסיף טבלה, ו-Delete אינו מסיר דבר. המקשים שמשמשים לתנועה בין שורות העץ, לכיווץ שורה או למעבר אליה, ו-Enter בשדה Find או Replace, שעובר בין ההתאמות או מחליף, גם נמנעים.
כל מקש אחר, כגון צירוף השמירה או צירוף לוח הפקודות של הסביבה המארחת, ממשיך אל הדף כרגיל. ראו מקשים בסייר. לפני גרסה 4.1.0, חלונית איתור והחלפה הצפה עיכבה מקשים באותו אופן, מלבד Home, End, ההקשה האחרונה של רצף, ו-Space כש-handTool היה משויך למקש אחר.
החל מגרסה 4.0.0, בורר שפת התצוגה מעכב מקשים באותו אופן: אותם שבעה צירופי מקשים עוברים, וכל צירוף מקשים אחר (החל מגרסה 4.1.0, רצף לפי ההקשה האחרונה שלו), מקשי החיצים ו-Tab נעצרים שם אך אינם נמנעים, וכך גם כל מקש שמוקש כשההרכבה בשיטת הקלט (IME) עדיין מתבצעת. ↑, ↓, Home, End, Enter ו-Space על אחת מהשורות שלו עוברים בין השורות או בוחרים אחת מהן, וגם נמנעים.

החל מגרסה 4.2.0, גם כרטיסיית מילון מעכבת מקשים, ורק search, findReplace, undo ו-redo עוברים אל העורך. undo ו-redo פועלים על ההיסטוריה הנפרדת של הגיליון המוצג, וכשעריכת תא פתוחה או כשהפוקוס נמצא בשדה החיפוש של הכרטיסייה הם נשארים לטקסט, נעצרים שם אך אינם נמנעים. search ו-findReplace אינם עושים דבר כל עוד עריכת תא פתוחה, כמתואר למעלה. צירופי המקשים של השורות פועלים ברשת, כמתואר תחת addColumn ו-removeColumn למעלה.
כל צירוף מקשים אחר, כפי שהוא מוגדר כעת, נעצר בכרטיסייה, רצף נעצר בהקשה האחרונה שלו, וכך גם מקשי החיצים, Tab, Enter, Space, Home, End וכל מקש שמוקש כשההרכבה בשיטת הקלט (IME) עדיין מתבצעת. אף אחד מהם אינו מגיע לבד הציור או למאזין keydown של הדף בשלב הבעבוע: בכרטיסייה, Alt + N אינו מוסיף טבלה, ו-Delete אינו מסיר דבר מהתרשים. גם אירועי העתקה, גזירה והדבקה בכרטיסייה נעצרים שם, כך שהתרשים לעולם אינו מתייחס אליהם כאל אירועים שלו. כל מקש אחר ממשיך אל הדף כרגיל.

dictionaryRowChords

החל מגרסה 4.2.0, החבילה מייצאת את dictionaryRowChords(). היא מחזירה, כ-ShortcutOption[] חדש בכל קריאה, כל צירוף שבו הרשת של כרטיסיית מילון מוסיפה או מוחקת שורות לפי מפת צירופי המקשים שמועברת אליה.
לפי הסדר, אלה הם הצירופים של הקשה אחת של addColumn, שמוסיפים שורות מתחת לבחירה; כל אחד מהם כשגם Shift מוחזק, שמוסיפים שורות מעליה, ואין כזה עבור צירוף שכבר כולל את Shift; והצירופים של הקשה אחת של removeColumn, שמוחקים שורות. כל אחד מהם שומר על ה-preventDefault וה-stopPropagation של צירוף המקשים שממנו הוא נלקח, ורצף אינו נכלל. ראו הוספה ומחיקה של שורות.
הצירוף שמוסיף שורות מעל, Alt+Shift+Enter עם ברירות המחדל, אינו מופיע באף צירוף מקשים, ולכן סביבה מארחת שמתאימה מקשי צירוף במדויק ובונה את רשימת המקשים שהיא מעבירה הלאה מתוך createKeyBindingMap בלבד לעולם אינה מעבירה אותו. יש להעביר הלאה את שתי הרשימות, כפי שהתוסף של Obsidian עושה.
היא קוראת רק את המפה שמועברת אליה, ולא את צירופי המקשים של האלמנט, ולכן יש להעביר אליה את המפה שממנה נבנתה רשימת המקשים.

declare function dictionaryRowChords(
  keyBindingMap: KeyBindingMap
): ShortcutOption[];

// example
import { createKeyBindingMap, dictionaryRowChords } from '@dineug/erd-editor';

const map = createKeyBindingMap();
const shortcuts = [
  ...Object.values(map).flat(),
  ...dictionaryRowChords(map),
].map(({ shortcut }) => shortcut);
// dictionaryRowChords(map): 'Alt+Enter', 'Alt+Shift+Enter', 'Alt+Backspace', 'Alt+Delete'

$mod

מחליף את המקש Control בהתאם לסביבה.

• Mac: $mod = Meta (⌘)
• Windows/Linux: $mod = Control

טבלת מקשים

משתמש במאפיינים key, code של אירוע המקלדת.
יש להשתמש ב-code למיקומים מוחלטים וב-key לערכי קלט.

Windows	macOS	key	code
N/A	Command / ⌘	Meta	MetaLeft / MetaRight
Alt	Option / ⌥	Alt	AltLeft / AltRight
Control	Control / ^	Control	ControlLeft / ControlRight
Shift	Shift	Shift	ShiftLeft / ShiftRight
Space	Space	N/A	Space
Enter	Return	Enter	Enter
Esc	Esc	Escape	Escape
Backspace	Delete / ⌫	Backspace	Backspace
Delete	fn + Delete	Delete	Delete
1, 2 וכן הלאה	1, 2 וכן הלאה	1, 2 וכן הלאה	Digit1, Digit2 וכן הלאה
a, b וכן הלאה	a, b וכן הלאה	a, b וכן הלאה	KeyA, KeyB וכן הלאה
-	-	-	Minus
=	=	=	Equal
+	+	+	Equal

ערכת נושא

setPresetTheme

קובעת ערכת נושא מוגדרת מראש.
ברירות המחדל הן appearance: 'dark', grayColor: 'slate' ו-accentColor: 'indigo'.
כל שדה מוחל בנפרד, כך שקריאה חלקית משאירה את שני השדות האחרים כפי שהם. ערך שאינו אחד מהשמות שלהלן אינו נלקח בחשבון, והקריאה לעולם אינה זורקת שגיאה.
החל מגרסה 4.0.0, השדה appearance מקבל גם את 'system', האפשרות System של בונה ערכת הנושא. ערך זה מציג את המראה הבהיר או הכהה שמערכת ההפעלה מדווחת עליו, או את המראה ש-setSystemAppearance מציינת, ומתחלף כשהוא משתנה.

type ThemeOptions = {
  appearance: 'dark' | 'light' | 'system';
  grayColor: 'gray' | 'mauve' | 'slate' | 'sage' | 'olive' | 'sand';
  accentColor:
    | 'gray'
    | 'gold'
    | 'bronze'
    | 'brown'
    | 'yellow'
    | 'amber'
    | 'orange'
    | 'tomato'
    | 'red'
    | 'ruby'
    | 'crimson'
    | 'pink'
    | 'plum'
    | 'purple'
    | 'violet'
    | 'iris'
    | 'indigo'
    | 'blue'
    | 'cyan'
    | 'teal'
    | 'jade'
    | 'green'
    | 'grass'
    | 'lime'
    | 'mint'
    | 'sky';
};

// example
editor.setPresetTheme({ appearance: 'light' });

setSystemAppearance

החל מגרסה 4.0.0, מציינת את המראה הבהיר או הכהה שהמראה 'system' מציג, עבור סביבה מארחת שיש לה מראה בהיר וכהה משלה, כגון ערכת נושא של IDE. כל עוד צוין מראה כזה, שינויים במערכת ההפעלה אינם נלקחים בחשבון.
null, או כל ערך אחר מלבד 'dark' או 'light', מחזיר למעקב אחר מערכת ההפעלה.
כשהמראה הוא 'light' או 'dark', היא אינה משנה דבר על המסך, אבל הערך נשמר וחל ברגע שהמראה הופך ל-'system'. אחרת הוא חל מיד. היא אינה משגרת דבר, ו-changePresetTheme ממשיך לדווח על 'system'.
הסביבות המארחות VS Code, JetBrains ו-Obsidian קוראות לה עם המראה הבהיר או הכהה שלהן, ושוב בכל פעם שהוא משתנה.

editor.setPresetTheme({ appearance: 'system' });
editor.setSystemAppearance('light'); // null follows the OS again

setTheme

מאפשרת התאמה אישית של ערכת הנושא.
כל קריאה מחליפה את כל שכבת ההתאמה האישית, ולכן כדי לשנות טוקן אחד מעל דריסה קיימת יש להעביר שוב את האובייקט המלא, וכדי לחזור לערכת הנושא המוגדרת מראש יש להעביר {}.
רק שמות הטוקנים שלהלן, עם ערכי מחרוזת, נשמרים; כל דבר אחר מושמט ללא שגיאה.
השכבה יושבת מעל ערכת הנושא המוגדרת מראש, כך שקריאה מאוחרת יותר ל-setPresetTheme מחליפה את ערכת הנושא שמתחתיה, בעוד שהדריסות נשארות.

JavaScript

type Theme = {
  grayColor1: string;
  grayColor2: string;
  grayColor3: string;
  grayColor4: string;
  grayColor5: string;
  grayColor6: string;
  grayColor7: string;
  grayColor8: string;
  grayColor9: string;
  grayColor10: string;
  grayColor11: string;
  grayColor12: string;

  accentColor1: string;
  accentColor2: string;
  accentColor3: string;
  accentColor4: string;
  accentColor5: string;
  accentColor6: string;
  accentColor7: string;
  accentColor8: string;
  accentColor9: string;
  accentColor10: string;
  accentColor11: string;
  accentColor12: string;

  canvasBackground: string;
  canvasBoundaryBackground: string;

  tableBackground: string;
  tableHeaderBackground: string;
  tableSelect: string;
  tableBorder: string;
  tableShadow: string;

  tableGroupHeaderBackground: string;
  tableGroupBackground: string;
  tableGroupBorder: string;

  memoBackground: string;
  memoSelect: string;
  memoBorder: string;
  memoShadow: string;

  columnSelect: string;
  columnSelectHover: string;
  columnHover: string;

  columnHandleBackground: string;
  columnHandleBorder: string;
  columnHandleHoverBackground: string;
  columnHandleHoverBorder: string;

  relationshipHover: string;

  visualizationLink: string;
  visualizationColumn: string;
  visualizationRelationship: string;

  toolbarBackground: string;

  contextMenuBackground: string;
  contextMenuSelect: string;
  contextMenuHover: string;
  contextMenuBorder: string;

  minimapBorder: string;
  minimapShadow: string;
  minimapViewportBorder: string;
  minimapViewportBorderHover: string;

  toastBackground: string;
  toastBorder: string;
  toastSuccess: string;
  toastError: string;

  findReplaceError: string;

  mapColumnsError: string;

  schemaSqlWarningBackground: string;
  schemaSqlWarningForeground: string;

  dragSelectBackground: string;
  dragSelectBorder: string;

  scrollbarTrack: string;
  scrollbarThumb: string;
  scrollbarThumbHover: string;

  foreground: string;
  active: string;
  placeholder: string;

  focus: string;
  inputActive: string;

  keyPK: string;
  keyFK: string;
  keyPFK: string;

  treeBackground: string;
  treeRowHover: string;
  treeRowCurrent: string;
  treeMuted: string;
  treeMatch: string;

  explorerBackground: string;
  explorerBorder: string;

  dictionaryErrorForeground: string;
  dictionaryErrorBackground: string;
  dictionaryWarningForeground: string;
  dictionaryWarningBackground: string;
  dictionaryBackground: string;
  dictionaryHeaderBackground: string;
  dictionaryGridLine: string;
  dictionaryHeaderSelect: string;

  diffInsertForeground: string;
  diffDeleteForeground: string;
  diffModifyForeground: string;
  diffRenameForeground: string;
};

// example
editor.setTheme({
  canvasBackground: '#1b1b1f',
  tableBackground: '#242429',
  keyPK: '#ffc53d',
});

tableShadow ו-memoShadow הם צבע הצל שטבלאות ופתקים מטילים על בד הציור של ERD. ערכת הנושא הכהה המוגדרת מראש משאירה אותם transparent, שאינו מטיל צל, כמו העברת none או מחרוזת ריקה ל-setTheme; ערכת הנושא הבהירה המוגדרת מראש משתמשת ב-rgba(0, 0, 0, 0.18).

החל מגרסה 4.0.0, יש תשעה טוקנים נוספים:

• tableGroupHeaderBackground, tableGroupBackground ו-tableGroupBorder צובעים את שורת הכותרת, את הגוף ואת המסגרת של קבוצת טבלאות שאין לה צבע משלה.
• toastSuccess ו-toastError צובעים את הסימן של הודעה קופצת שמדווחת כיצד משהו הסתיים.
• findReplaceError ו-mapColumnsError צובעים את השגיאות שאיתור והחלפה ותיבת הדו-שיח של מיפוי עמודות מציגים. קודם לכן איתור והחלפה השתמש ב-diffDeleteForeground, ולכן דריסה של הטוקן הזה כבר אינה משנה את צבעו של איתור והחלפה.
• schemaSqlWarningBackground ו-schemaSqlWarningForeground צובעים את האזהרות באפשרויות של כרטיסיית סכמת SQL.

החל מגרסה 4.1.0, יש תשעה טוקנים נוספים:

• treeBackground, treeRowHover, treeRowCurrent, treeMuted ו-treeMatch צובעים את העץ המשותף לסייר ולמציג ההבדלים: את הרקע שלו, שממלא גם את השדות Find ו-Replace של הסייר; שורה שסמן העכבר נמצא מעליה, שורת המקלדת כשהפוקוס בעץ, ולחצן שסמן העכבר נמצא מעליו בשורת הכותרת ובחיפוש של הסייר; את השורה של התאמת החיפוש הנוכחית; טקסט עמום כגון מונים, סוגי נתונים וחיצי הכיווץ; ואת הסימון שמאחורי הטקסט שהחיפוש מצא.
• explorerBackground ו-explorerBorder צובעים את חלונית הסייר ואת הקווים שלה: הקצה שלה לצד בד הציור, הקו שמתחת לחיפוש שלה, והמסגרות של השדות שלה ושל הלחצנים שמוצגים בהרחבת Search In. explorerBorder צובע גם את הקצה של העץ במציג ההבדלים, את הקו שמתחת לשדה Filter by name שלו ואת המסגרת של השדה הזה. סמלי המפתחות של הסייר מקבלים את keyPK, keyFK ו-keyPFK.
• diffModifyForeground ו-diffRenameForeground צובעים את השינויים ואת שינויי השם שמציג ההבדלים מסמן, בעץ שלו ובשני המסמכים. diffModifyForeground גם מקיף במסגרת טבלה, פתק או קבוצת טבלאות שהוזזו, ששונה גודלם, ששונה צבעם או ששויכו מחדש לקבוצה, בלי קשר למה עוד השתנה בהם, ומציג את קו הקשר של מפתח זר שהשתנה.

diffInsertForeground ו-diffDeleteForeground צובעים כעת את התוספות ואת ההסרות שמציג ההבדלים מסמן, בעץ שלו ובמסמך שמכיל אותן, בטקסט, במסגרות ובקווי הקשר כאחד. diffInsertBackground, diffDeleteBackground, diffCrossBackground ו-diffCrossForeground הוסרו בגרסה 4.1.0, מכיוון שמציג ההבדלים כבר אינו ממלא תאים. setTheme משמיטה אותם כמו כל שם אחר שאינו ב-Theme, וה-hooks שלהם, --erd-editor-diff-insert-background, --erd-editor-diff-delete-background, --erd-editor-diff-cross-background ו---erd-editor-diff-cross-foreground, כבר אינם נקראים.

החל מגרסה 4.2.0, יש שנים עשר טוקנים נוספים:

• columnHandleBackground ו-columnHandleBorder ממלאים ומקיפים במסגרת את ידית הגרירה של העמודה, שמוצגת ממש מחוץ לקצה השמאלי של טבלה לצד שורת עמודה שבפוקוס, ו-columnHandleHoverBackground ו-columnHandleHoverBorder מחליפים אותם כשסמן העכבר נמצא מעליה. סמל האחיזה שלה מקבל את foreground, ואת active כשסמן העכבר נמצא מעליו.
• dictionaryErrorForeground ו-dictionaryWarningForeground צובעים את מה שבדיקות המילון מוצאות, שגיאה או אזהרה: שם מסומן בבד הציור של ERD (ראו סימונים בבד הציור), הטקסט של תא מסומן בגיליונות Domains, Words ו-Terms, והמונה של Checks. dictionaryErrorBackground ו-dictionaryWarningBackground ממלאים תא כזה. dictionaryErrorForeground צובע גם את הכלי Delete Rows כשסמן העכבר נמצא מעליו.
• dictionaryBackground, dictionaryHeaderBackground, dictionaryGridLine ו-dictionaryHeaderSelect צובעים את הגיליון של כרטיסיית מילון: את התאים שלו, שצבעם ממלא גם את שדה החיפוש של הכרטיסייה ואת רשימת התחומים של מונח; את כותרות העמודות ואת מספרי השורות שלו; את הקווים שבין התאים, שצבעם משמש גם לסרגל של הכרטיסייה ולמסגרות של השדות שלה; וכותרת שהשורה או העמודה שלה חופפת לבחירה. שאר הגיליון מקבל טוקנים משותפים: foreground לתוויות הכותרות, active לטקסט התאים, grayColor7 לקו שמפריד בין כותרות העמודות ומספרי השורות לבין התאים, focus לקצה של התא הפעיל, accentColor9 לקצה של טווח שנבחר, ובאטימות של 20% גם למילוי שלו, accentColor6 לכותרת של שורה או עמודה שנבחרו במלואן, grayColor3 לתאים לקריאה בלבד, וטוקני פס הגלילה. accentColor9 שאינו כתוב כ-#rgb או כ-#rrggbb משאיר טווח שנבחר ללא מילוי.

משתני CSS

לכל טוקן ב-Theme יש hook תואם של CSS ששמו --erd-editor- ואחריו המפתח בכתיב kebab-case: grayColor10 הוא --erd-editor-gray-color-10, keyPK הוא --erd-editor-key-pk, ו-keyPFK הוא --erd-editor-key-pfk.
ה-hooks עוברים בירושה אל תוך העורך, ולכן יש להגדיר אותם בכל מקום שבו הם אמורים לחול. ב-:root הם קובעים את ערכת הנושא של כל עורך בדף; על האלמנט עצמו הם קובעים את ערכת הנושא של אותו עורך בלבד.

erd-editor {
  --erd-editor-canvas-background: #1b1b1f;
}

החל מגרסה 3.4.0, הטוקנים dargSelect עם שגיאת הכתיב נכתבים dragSelect, וה-hooks שלהם השתנו מ---erd-editor-darg-select-background ו---erd-editor-darg-select-border ל---erd-editor-drag-select-background ו---erd-editor-drag-select-border. גיליון סגנונות שעדיין משתמש בשמות הישנים אינו נלקח בחשבון.

ערכי ברירת המחדל של ערכת הנושא

:root {
  --erd-editor-gray-color-1: #111113;
  --erd-editor-gray-color-2: #18191b;
  --erd-editor-gray-color-3: #212225;
  --erd-editor-gray-color-4: #272a2d;
  --erd-editor-gray-color-5: #2e3135;
  --erd-editor-gray-color-6: #363a3f;
  --erd-editor-gray-color-7: #43484e;
  --erd-editor-gray-color-8: #5a6169;
  --erd-editor-gray-color-9: #696e77;
  --erd-editor-gray-color-10: #777b84;
  --erd-editor-gray-color-11: #b0b4ba;
  --erd-editor-gray-color-12: #edeef0;
  --erd-editor-accent-color-1: #11131f;
  --erd-editor-accent-color-2: #141726;
  --erd-editor-accent-color-3: #182449;
  --erd-editor-accent-color-4: #1d2e62;
  --erd-editor-accent-color-5: #253974;
  --erd-editor-accent-color-6: #304384;
  --erd-editor-accent-color-7: #3a4f97;
  --erd-editor-accent-color-8: #435db1;
  --erd-editor-accent-color-9: #3e63dd;
  --erd-editor-accent-color-10: #5472e4;
  --erd-editor-accent-color-11: #9eb1ff;
  --erd-editor-accent-color-12: #d6e1ff;
  --erd-editor-canvas-background: #212225;
  --erd-editor-canvas-boundary-background: #111113;
  --erd-editor-table-background: #18191b;
  --erd-editor-table-header-background: #2e3135;
  --erd-editor-table-select: #435db1;
  --erd-editor-table-border: #363a3f;
  --erd-editor-table-shadow: transparent;
  --erd-editor-table-group-header-background: #43484e;
  --erd-editor-table-group-background: #d3edf81d;
  --erd-editor-table-group-border: #43484e;
  --erd-editor-memo-background: #18191b;
  --erd-editor-memo-select: #435db1;
  --erd-editor-memo-border: #363a3f;
  --erd-editor-memo-shadow: transparent;
  --erd-editor-column-select: #182449;
  --erd-editor-column-select-hover: #1d2e62;
  --erd-editor-column-hover: #272a2d;
  --erd-editor-column-handle-background: #18191b;
  --erd-editor-column-handle-border: #363a3f;
  --erd-editor-column-handle-hover-background: #2e3135;
  --erd-editor-column-handle-hover-border: #43484e;
  --erd-editor-relationship-hover: #435db1;
  --erd-editor-visualization-link: #43484e;
  --erd-editor-visualization-column: #5a6169;
  --erd-editor-visualization-relationship: #5a6169;
  --erd-editor-toolbar-background: #111113;
  --erd-editor-context-menu-background: #18191b;
  --erd-editor-context-menu-select: #272a2d;
  --erd-editor-context-menu-hover: #3a4f97;
  --erd-editor-context-menu-border: #363a3f;
  --erd-editor-minimap-border: black;
  --erd-editor-minimap-shadow: black;
  --erd-editor-minimap-viewport-border: #3a4f97;
  --erd-editor-minimap-viewport-border-hover: #435db1;
  --erd-editor-toast-background: #18191b;
  --erd-editor-toast-border: #363a3f;
  --erd-editor-toast-success: #3dd68c;
  --erd-editor-toast-error: #ff9592;
  --erd-editor-find-replace-error: #ff9592;
  --erd-editor-map-columns-error: #ff9592;
  --erd-editor-schema-sql-warning-background: #500f1c;
  --erd-editor-schema-sql-warning-foreground: #ff9592;
  --erd-editor-drag-select-background: #253974;
  --erd-editor-drag-select-border: #435db1;
  --erd-editor-scrollbar-track: #ddeaf814;
  --erd-editor-scrollbar-thumb: #696e77;
  --erd-editor-scrollbar-thumb-hover: #777b84;
  --erd-editor-foreground: #b0b4ba;
  --erd-editor-active: #edeef0;
  --erd-editor-placeholder: #e5edfd7b;
  --erd-editor-focus: #435db1;
  --erd-editor-input-active: #5472e4;
  --erd-editor-key-pk: #ffc53d;
  --erd-editor-key-fk: #e54666;
  --erd-editor-key-pfk: #00a2c7;
  --erd-editor-tree-background: #111113;
  --erd-editor-tree-row-hover: #212225;
  --erd-editor-tree-row-current: #1d2e62;
  --erd-editor-tree-muted: #b0b4ba;
  --erd-editor-tree-match: #253974;
  --erd-editor-explorer-background: #111113;
  --erd-editor-explorer-border: #363a3f;
  --erd-editor-dictionary-error-foreground: #ff9592;
  --erd-editor-dictionary-error-background: #500f1c;
  --erd-editor-dictionary-warning-foreground: #ffca16;
  --erd-editor-dictionary-warning-background: #3f2700;
  --erd-editor-dictionary-background: #18191b;
  --erd-editor-dictionary-header-background: #2e3135;
  --erd-editor-dictionary-grid-line: #363a3f;
  --erd-editor-dictionary-header-select: #182449;
  --erd-editor-diff-insert-foreground: #3dd68c;
  --erd-editor-diff-delete-foreground: #ff9592;
  --erd-editor-diff-modify-foreground: #ffca16;
  --erd-editor-diff-rename-foreground: #70b8ff;
}

שפת תצוגה

החל מגרסה 4.0.0, הטקסט של העורך עצמו – התפריטים, החלוניות, תיבות הדו-שיח, החיפוש המהיר, ההודעות הקופצות והמילים שהוא מציג בתרשים כגון unnamed, כולל בייצוא תמונות – זמין ב-25 שפות. שמות של טבלאות ועמודות, SQL, סוגי נתונים וקוד שנוצר לעולם אינם מתורגמים. ראו שפה וערכת נושא.
לפני ש-setLocale נקראת או שנבחרת שפה, העורך מציג אנגלית, או פועל לפי 'system' כל עוד enableLocalePicker מופעל.
העורך מגדיר את lang ואת dir על השורש שלו עצמו בתוך ה-shadow root הסגור, ולעולם לא על האלמנט המארח או על הדף, כך שדף מימין לשמאל אינו הופך את העורך, ושפה מימין לשמאל אינה הופכת את הדף. בעברית, בערבית ובפרסית ממשק העורך נפרס מימין לשמאל; התרשים עצמו לעולם אינו מוצג בהיפוך מראה. החל מגרסה 4.1.0, הסייר נשאר משמאל לבד הציור בכל שפה, והשורות שלו עצמו נקראות מימין לשמאל בשלוש השפות האלה.
החבילה מייצאת את הטיפוסים LocaleCode (אחד מהקודים שלהלן) ו-LocaleOption.

type LocaleOption = LocaleCode | 'system';

קוד	שם מוצג	שפה
id-ID	Bahasa Indonesia	אינדונזית
de-DE	Deutsch	גרמנית
en	English	אנגלית
es-ES	Español	ספרדית
eu-ES	Euskara	בסקית
fr-FR	Français	צרפתית
it-IT	Italiano	איטלקית
nl-NL	Nederlands	הולנדית
pl-PL	Polski	פולנית
pt-PT	Português	פורטוגזית
pt-BR	Português Brasileiro	פורטוגזית ברזילאית
ro-RO	Română	רומנית
sk-SK	Slovenčina	סלובקית
sl-SI	Slovenščina	סלובנית
sv-SE	Svenska	שוודית
tr-TR	Türkçe	טורקית
ru-RU	Русский	רוסית
uk-UA	Українська	אוקראינית
he-IL	עברית	עברית
ar-SA	العربية	ערבית
fa-IR	فارسی	פרסית
ja-JP	日本語	יפנית
zh-CN	简体中文	סינית פשוטה
zh-TW	繁體中文	סינית מסורתית
ko-KR	한국어	קוריאנית

setLocale

קובעת את שפת התצוגה: 'system', או אחד מהקודים שלמעלה. כל ערך אחר, כגון 'ko' לבדו, קוד לא מוכר או ערך שאינו מחרוזת, אינו נלקח בחשבון, ללא שגיאה.
היא חלה לפני שהיא חוזרת, כך ששפה שהוגדרה לפני שהאלמנט מצורף מופיעה כבר בפריים הראשון שלו.
היא אינה משגרת דבר, לא changeLocale ולא change, ואינה נוגעת ב-value, בהיסטוריית הפעולות או במאגר משותף.
הבחירה נשארת בין ש-enableLocalePicker מופעל ובין שהוא כבוי, ו-setLocale('system') פועלת לפי המערכת גם כשהבורר כבוי.
העורך אינו שומר דבר. כדי לשמור את הבחירה של המשתמש, יש להאזין ל-changeLocale ולהעביר אותה בחזרה בטעינה הבאה.

editor.enableLocalePicker = true;
editor.setLocale(localStorage.getItem('locale') ?? 'system');
editor.addEventListener('changeLocale', event => {
  localStorage.setItem('locale', event.detail.locale);
});

setSystemLocale

מציינת את השפה ש-'system' מייצג, כתג BCP 47, עבור סביבה מארחת שיש לה שפת תצוגה משלה. הסביבות המארחות VS Code, JetBrains ו-Obsidian קוראות לה עם שפת התצוגה שלהן.
הרווחים בקצות התג מוסרים. null, מחרוזת ריקה או ערך שאינו מחרוזת מחזירים ל-navigator.languages של הדפדפן, שהעורך עוקב אחריו כשהוא משתנה.
יש לה משמעות רק כל עוד האפשרות שבתוקף היא 'system', והיא חלה מיד. השורה System בבורר מציינת את השפה שאליה האפשרות הזאת מתפרשת.
התג, או כל אחת משפות הדפדפן לפי הסדר, מתפרשים לשפה הראשונה שיש בעורך, לפי תת-התג של השפה, תוך התעלמות מרישיות ומקווים תחתונים: de-AT נותן de-DE, ו-en-GB נותן en. סינית נקבעת לפי הכתב שלה, כאשר Hant נותן zh-TW ו-Hans נותן zh-CN, וכשאין כתב – לפי האזור, כאשר TW, HK ו-MO נותנים zh-TW וכל אזור אחר נותן zh-CN. pt נותן pt-BR, אלא אם צוין אזור שאינו BR. כשאין התאמה, העורך מציג אנגלית.

editor.setLocale('system');
editor.setSystemLocale('pt-PT'); // null follows the browser again

setSchemaSQL

טוענת קובץ סכמת SQL.
כברירת מחדל היא מחליפה את המסמך הנוכחי ואינה ממזגת לתוכו; ראו את mode בהמשך. ההגדרות הקיימות נשמרות, כולל כל נעילה והערך הנעול שלה, מלבד מיקום התצוגה ורמת הזום, והטבלאות ממוקמות לאחר קריאת הקובץ, בשורות, אלא אם placement שבהמשך מבקש אחרת. כש-Viewport נעול, value כותב לאחר מכן את התצוגה שבה הייבוא מתחיל, נקודת הראשית 0, 0 ברמת הזום 1. לכן, במסמך שיובא לאלמנט שמעולם לא ניתן לו ערך כל הנעילות מופעלות, כמו במסמך חדש.
החל מגרסה 4.2.0, החלפה שומרת גם על המילים, המונחים והתחומים של המסמך, שהטקסט אינו יכול להכיל, יחד עם היסטוריית ביטול הפעולות של כל גיליון בכרטיסיית מילון, וגם ביטול או ביצוע חוזר של הייבוא שומרים עליהם. setSchemaJSON במצב החלפה והשמה ל-value, לעומת זאת, מקבלים את אלה שהמסמך שלהם מכיל.
היא נרשמת ברשימת ההיסטוריה, מה שמאפשר Undo, Redo, והיא משגרת change. מחרוזת ריקה אינה נלקחת בחשבון, והקריאה אינה עושה דבר כל עוד readonly מוגדר.
setSchemaGraphQL, setSchemaDBML ו-setSchemaAML מתנהגות באותו אופן, והמנתחים שלהן לעולם אינם נכשלים: טקסט שהם אינם מצליחים לקרוא טוען מסמך ריק במקום לזרוק שגיאה.
החל מגרסה 4.0.0, כל הארבע מקבלות ארגומנט שני אופציונלי, { placement, mode }:

• placement: 'grid', ברירת המחדל, ממקם את הטבלאות בשורות מיד, כמו קודם, והקריאה אינה מחזירה דבר.
• placement: 'auto' פורס תחילה את הטבלאות לפי הקשרים שלהן, כפי ש-Import בעורך עושה, ומחזיר Promise שמתממש לאחר שהייבוא נחת כצעד ביטול אחד. פחות משתי טבלאות, היעדר קשרים, פריסה שנכשלת, דף ללא SharedWorker, או Cancel בהודעה הקופצת Placing tables ממקמים אותן בשורות במקום זאת. טעינה בינתיים – ייבוא מחליף אחר, השמה ל-value, setInitialValue(), החל מגרסה 5.1.0 reseed של מאגר משותף, clear(), טעינה של שותף לעריכה, או ביטול או ביצוע חוזר של טעינה או של clear() – גוברת עליו, וה-Promise מתממש בלי שדבר נטען. ייבואים שממוקמים כך נוחתים לפי הסדר שבו התחילו.
• mode: 'replace', ברירת המחדל, מחליף את המסמך. mode: 'append' מוסיף את הקובץ מתחת לתרשים כפי שייבוא והוספה עושה, ומשאיר כפי שהן כל טבלה שכבר קיימת וכל הגדרה מלבד הכרטיסייה ומיקום התצוגה. מכרטיסייה אחרת, כרטיסיית ERD מוצגת תחילה. הטבלאות החדשות, וקבוצות הטבלאות שקובץ DBML מביא כל עוד קבוצות טבלאות מוצגות, הופכות לבחירה, והתצוגה נגללת אליהן אלא אם הן כבר נראות היטב, לפי הכלל שכל קפיצה פועלת לפיו החל מגרסה 4.1.0 – ראו היכן נוחתת קפיצה. ביטול פעולה אחד מסיר את כל התוספת. טקסט שאינו ניתן לקריאה אינו מוסיף דבר ומשאיר את המסמך כפי שהוא.

כל עוד readonly מוגדר, להחלפה אין השפעה, הוספה אינה מוסיפה דבר, וקריאה עם placement: 'auto' מתממשת מיד.
החל מגרסה 3.10.0, setSchemaSQL קוראת את הקובץ בהתאם למסד הנתונים הנוכחי של המסמך: כש-Databricks נבחר, מחרוזות שתחומות בגרשים פועלות לפי כללי ה-escape בלוכסן הפוך של Spark. ראו הערות.
החל מגרסה 3.10.0, setSchemaSQL מפרשת UNIQUE על שתי עמודות או יותר כאינדקס ייחודי אחד ולא כדגל ייחודי בכל עמודה. ראו מפתחות ייחודיים ואינדקסים.
החל מגרסה 3.10.0, ייבוא של SQL, של DBML ושל AML שומר על פעולות ה-ON DELETE וה-ON UPDATE של המפתחות הזרים שהוא קורא.
החל מגרסה 4.0.0, setSchemaSQL שומרת את ביטוי ה-DEFAULT המלא של עמודה, קוראת את ADD DEFAULT … FOR ואת הערות ה-MS_Description של SQL Server, הופכת עמודות serial ו-identity של PostgreSQL למספור אוטומטי, שומרת UNSIGNED ו-ZEROFILL בסוג נתונים, וקוראת מפתח ראשי ש-ALTER TABLE … ADD PRIMARY KEY מסמן כ-CLUSTERED, NONCLUSTERED או USING BTREE. ראו סכמת SQL.
לגבי התחביר שכל מנתח מקבל, ראו ייבוא וייצוא של קבצים.

type SetSchema = {
  (
    value: string,
    options: { placement: 'auto'; mode?: 'replace' | 'append' }
  ): Promise<void>;
  (
    value: string,
    options?: { placement?: 'grid'; mode?: 'replace' | 'append' }
  ): void;
};

// example
editor.setSchemaSQL('Schema SQL...');
// or
await editor.setSchemaSQL('Schema SQL...', { placement: 'auto' });
// or
editor.setSchemaSQL('Schema SQL...', { mode: 'append' });

setSchemaGraphQL

טוענת מסמך GraphQL SDL.
הגדרות של טיפוסי אובייקט הופכות לטבלאות, ושדה שהטיפוס שלו הוא טבלה אחרת הופך לקשר.

editor.setSchemaGraphQL('GraphQL SDL...');

setSchemaDBML

טוענת קובץ DBML, הפורמט שבו משתמשים dbdiagram.io ו-dbdocs.
החל מגרסה 4.0.0, כל TableGroup הופך לקבוצת טבלאות, וה-headercolor של טבלה הופך לצבע שלה. ראו DBML.

editor.setSchemaDBML('DBML...');

setSchemaAML

טוענת קובץ AML (Azimutt Markup Language). גם הכתיב הנוכחי וגם הכתיב הישן של גרסה 1 מתקבלים.
החל מגרסה 4.0.0, הצבע של ישות, אחד משמות הצבעים של Azimutt או ערך הקסדצימלי בין מירכאות, הופך לצבע של הטבלה שלה. ראו AML.

editor.setSchemaAML('AML...');

setSchemaJSON

החל מגרסה 4.0.0, טוענת מסמך .erd.json, כגון הטקסט ש-value מחזיר.
במצב ברירת המחדל שלה, mode: 'replace', היא טוענת את המסמך כפי שהשמה ל-value עושה: היא נרשמת ברשימת ההיסטוריה, משגרת change, ומקבלת את הנעילות של המסמך באותו אופן, והחל מגרסה 4.2.0 המילים, המונחים והתחומים של המסמך מחליפים את אלה של העורך. בניגוד ל-value, מחרוזת ריקה או ערך שאינו מחרוזת אינם נלקחים בחשבון ואינם פותחים מסמך חדש. טקסט שאינו JSON מרוקן את המסמך, כמו ב-value.
mode: 'append' מוסיף את הטבלאות, הקשרים, האינדקסים, הפתקים וקבוצות הטבלאות של המסמך מתחת לתרשים עם מזהים חדשים, שומר על המיקומים היחסיים שלהם ומשמיט את ההגדרות של המסמך, כפי שייבוא והוספה עושה עם קובץ json. החל מגרסה 4.2.0, הוא שומר על השמות הלוגיים ועל דגלי השם הנגזר של הטבלאות והעמודות, אך משאיר מאחור את המילים, המונחים והתחומים של המסמך, כך שאף אחת מהעמודות שלו אינה מקושרת לתחום. טקסט שאינו ניתן לקריאה, או מסמך ללא טבלה וללא פתק, אינו מוסיף דבר. אחרת, הוא נוחת כפי שהוספה של setSchemaSQL נוחתת, והפתקים וקבוצות הטבלאות החדשים שלו נבחרים יחד עם הטבלאות שלו, כל סוג כל עוד הוא מוצג.
היא חוזרת לאחר שהמסמך נחת, ואין לה השפעה כל עוד readonly מוגדר.

editor.setSchemaJSON('json...');
// or
editor.setSchemaJSON('json...', { mode: 'append' });

getSchemaSQL

מייצאת את המצב הנוכחי של העורך כסכמת SQL.
אם databaseVendor לא צוין, היא כותבת עבור מסד הנתונים שהעורך מציג: זה של המסמך, אלא אם הקורא של עורך לקריאה בלבד בחר אחר, ומאז גרסה 5.0.0 הבחירה הזו נשארת על אותו מסך והיא מה שכרטיסיית סכמת SQL שלו מציגה. שם שאינו ברשימה שלהלן מטופל באותו אופן, בלי לזרוק שגיאה.
השמות נתחמים במירכאות לפי סוג המירכאות שהעורך מציג. כל עוד Bracket Type נעול, או בעורך לקריאה בלבד שהקורא שלו בחר אחר מאז גרסה 5.0.0, הוא עשוי להיות שונה מזה ש-value שומר, שהוא זה שבו erd_read של סוכן קוד תוחם במירכאות. השמות שנכתבים הם תמיד השמות הפיזיים, בכל תצוגת שמות.
החל מגרסה 4.0.0, ארגומנט options אופציונלי בוחר את המשפטים ואת הכותרת, כפי שעושות האפשרויות של כרטיסיית סכמת SQL, והחל מגרסה 4.2.0 גם אם שמות לוגיים ממלאים הערות ריקות. SchemaSQLOptions מיוצא כטיפוס.

• statements: 'create', ברירת המחדל; 'ifNotExists', שכותב IF NOT EXISTS ב-MySQL, ב-MariaDB, ב-PostgreSQL, ב-SQLite וב-Databricks, וחוזר ל-'create' בשאר מסדי הנתונים; או 'recreate', שמוחק את הטבלאות לפני יצירתן, כאשר ב-Snowflake נכתב במקום זאת CREATE OR REPLACE TABLE.
• header: 'none', ברירת המחדל; 'use', שעובר למסד הנתונים או לסכמה של המסמך; או 'createAndUse', שיוצר אותו תחילה אם אינו קיים ולאחר מכן עובר אליו. מסד נתונים שאין בו את האפשרות המבוקשת חוזר לחלופה כפי שהכרטיסייה עושה: Oracle כותב 'use' עבור 'createAndUse', PostgreSQL אינו כותב כותרת עבור 'use', ו-SQLite אינו כותב כותרת כלל. כותרת נכתבת רק כל עוד שם מסד הנתונים של המסמך הוא מזהה פשוט – אותיות ASCII, ספרות ו-_, שאינו מתחיל בספרה.
• logicalNameAsComment, החל מגרסה 4.2.0: true כותב את השם הלוגי של טבלה או של עמודה כהערה שלה במקום שבו ההערה שלה עצמה ריקה או מכילה תווי רווח בלבד והשם הלוגי אינו ריק, בצורה שבה מסד הנתונים הזה כותב הערה. הערה שיש בה טקסט נכתבת כמו קודם. רק true מפעיל אותה: אפשרות שהושמטה, false או כל ערך אחר, כגון 'true' או 1, אינם כותבים שם לוגי. היא עושה את מה שהמתג Write logical names into empty comments של הכרטיסייה עושה.

אפשרות שהושמטה, או אפשרות עם ערך לא מוכר, מתפרשת כברירת המחדל שלה, כך שקריאה ללא אפשרויות כותבת משפטי CREATE פשוטים ללא כותרת, כמו קודם.
החל מגרסה 4.0.0, הפלט כולל תמיד את הסקריפטים Before tables ו-After tables של המסמך, לפי הסדר: כותרת, הסקריפט שלפני הטבלאות, משפטי DROP, טבלאות, הסקריפט שאחרי הטבלאות. הבחירות Statements, Header, Write logical names into empty comments ו-Tables של כרטיסיית סכמת SQL עצמה לעולם אינן משפיעות על הקריאה הזאת, שתמיד כותבת את המסמך כולו.
החל מגרסה 3.10.0, כל מפתח זר נושא את פסוקיות ה-ON DELETE וה-ON UPDATE של הקשר. פסוקית נכתבת רק כשהפעולה שלה מוגדרת ומסד הנתונים מקבל אותה, כך שפעולה שמסד הנתונים הזה אינו מקבל מושמטת, וברירת המחדל שלה חלה. החל מגרסה 4.0.0, Snowflake מקבל רק NO ACTION. לגבי מה שכל מסד נתונים כותב, ראו ON DELETE ו-ON UPDATE.
החל מגרסה 3.10.0, גרש בתוך הערה של טבלה או של עמודה עובר escape, כך שהערה כגון it's כבר אינה שוברת את המשפט. כל מסד נתונים שכותב הערות כליטרלים של מחרוזת מכפיל אותו, מלבד Databricks, שמוסיף לוכסן הפוך לפני כל גרש ולפני כל לוכסן הפוך. SQLite עדיין כותב הערות כשורות --.
החל מגרסה 4.2.0, SQL Server כותב כל הערה כליטרל לאומי, N'…', כך שטקסט שנמצא מחוץ לדף הקוד של מסד הנתונים, כגון קוריאנית, נשמר. Oracle כותב כל רצף של שורות ריקות בהערה כמעבר שורה אחד, ו-SQLite כותב את מעברי השורה של הערה כרווחים, כך שהיא נשארת בשורת ה--- שלה. ראו הערות.
החל מגרסה 4.0.0, כמה מסדי נתונים גם כותבים שמות מפתחות, ערכי ברירת מחדל ומספור אוטומטי באופן שונה. ראו מה ה-DDL כותב.

type DatabaseVendor =
  | 'Databricks'
  | 'MariaDB'
  | 'MSSQL'
  | 'MySQL'
  | 'Oracle'
  | 'PostgreSQL'
  | 'Snowflake'
  | 'SQLite';

type SchemaSQLOptions = {
  statements?: 'create' | 'ifNotExists' | 'recreate';
  header?: 'none' | 'use' | 'createAndUse';
  logicalNameAsComment?: boolean;
};

const schemaSQL = editor.getSchemaSQL();
// or
const postgresSQL = editor.getSchemaSQL('PostgreSQL');
// or
const mysqlSQL = editor.getSchemaSQL('MySQL', {
  statements: 'ifNotExists',
  header: 'createAndUse',
});
// or
const commentedSQL = editor.getSchemaSQL('PostgreSQL', {
  logicalNameAsComment: true,
});

getSharedStore

מחזירה מאגר לעריכה שיתופית בזמן אמת.
config הוא { getNickname?, mouseTracker?, focusTracker? }. ברירת המחדל של שני מנגנוני המעקב היא true: mouseTracker משדר לאחרים את סמן העכבר של העורך הזה, ו-focusTracker משדר את התא הפעיל שלו, את הבחירה שלו ואת מלבן הבחירה שלו.
החל מגרסה 5.0.0, המאגר אינו שולח שום שינוי כל עוד readonly מוגדר, אלא רק את מה שהמעקבים שלו שולחים ואת האוגרים שעורך מצטרף מבקש, והוא עדיין מחיל את מה שהאחרים שולחים.
החל מגרסה 5.1.0, הוא מספק גם את אוגרי שיתוף הפעולה של העורך ואת גרסת השעון שלו (getLWW, getVersion), מקבל את אלה של מאגר אחר (mergeLWW), שוכח את הסמן, המיקוד, הבחירה ומלבן הבחירה של שותף לעריכה שעזב (forgetPeer), ופותח מחדש את מסמך הסשן עם האוגרים שמוחזקים לצדו (reseed). @dineug/erd-editor-yjs נשען על אלה כדי לשמור על האלמנט מסונכרן עם מסמך Yjs.
החל מגרסה 5.1.0, כששני משתמשים משנים שם או שדה אחד, מזיזים טבלה אחת, או מזיזים או משנים גודל של פתק אחד או של קבוצת טבלאות אחת באותו רגע, העריכות מסתיימות באותו אופן בכל עורך וברפליקה בגרסה 5.1.0 ומעלה, וגרירה, הזזת תצוגה או זום נשלחים כמקום שבו הם מסתיימים.
צבע, עמודה שהוזזה בתוך הטבלה או האינדקס שלה, וכמה הגדרות כגון מסד הנתונים הם החריגים, שכל עורך ורפליקה עדיין מקבלים לפי הסדר שבו הם שומעים אותם. ראו עריכות מקבילות.
ראו עריכה שיתופית.

const sharedStore = editor.getSharedStore({
  mouseTracker: false,
  focusTracker: false,
});

setDiffValue

פותחת את מציג ההבדלים ומשווה בין המסמך הפתוח כעת לבין המסמך שמועבר אליה.
היא אינה מחזירה דבר ואינה משנה את המסמך, כך שסגירת המציג משאירה את העורך בדיוק כפי שהיה.
ערך ריק, או כל דבר שאינו מחרוזת, מושווה למסמך ריק.
זוהי אותה שכבת תצוגה כמו מציג הבדלים בתפריט ההקשר של בד הציור.
החל מגרסה 4.1.0, היא מתאימה בין מה ששני המסמכים מכילים, תחילה לפי מזהה ורק לאחר מכן לפי מה שכל פריט מחזיק, כגון שם של טבלה או טקסט של פתק – ראו מה מושווה. לכן, מול גרסה קודמת של אותו מסמך, כגון גרסת Git של הקובץ שלו, שינוי שם מוצג כפריט אחד ששמו שונה; מול מסמך שהמזהים שלו שונים, הוא מוצג כהסרה וכהוספה. המציג מפרט את מה שהשתנה בעץ לצד שני המסמכים, ומסמן את השינויים בצבע במקום למלא תאים.
החל מגרסה 4.2.0, שני המסמכים נפתחים בתצוגת השמות שהעורך הזה מציג, בלי קשר למה שהמסמך שהועבר שמר, וגם העץ מציין טבלאות ועמודות לפיה – ראו מחוץ לבד הציור. שמות לוגיים, קישורים לתחומים והמילונים אינם מושווים, כך ששינוי שנוגע רק להם אינו מוצג כשינוי.

editor.setDiffValue('prev json...');