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 است و استایل‌های صفحه نه به درون آن نفوذ می‌کنند و نه از آن به بیرون.
با هیچ انتخابگر CSS نمی‌توان به چیزی درون آن دسترسی داشت — به‌جای آن، برای استایل‌دهی از 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، تنظیم‌هایی که خواننده هنوز می‌تواند تغییر دهد روی صفحهٔ همان ویرایشگر می‌مانند: پیمایش و بزرگ‌نمایی، زبانه، پایگاه داده، زبان Code Generator، هر دو شیوهٔ نگارش نام، نوع علامت نقل‌قول، ردیف‌های View Option و نمایش نام‌ها از هر یک از انتخابگرهایش، که از نسخهٔ 4.2.0 روی صفحه مانده است. قفل‌هایشان هرچه بگوید، هیچ‌یک به value، runtimeValue، خروجی json، تاریخچهٔ واگرد، رویداد change یا مخزن مشترک نمی‌رسد، بنابراین value تنظیم‌های سند را نگه می‌دارد، هر طور که خواننده به آن نگاه کند. پنل‌های گزینهٔ طرح‌واره SQL و Code Generator تا وقتی readonly تنظیم شده است این تنظیم‌ها را با This window only توضیح می‌دهند، جایی که در ویرایشگر قابل ویرایش 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 را ارسال می‌کند.

تا وقتی تنظیم شده است، هیچ‌چیز وارد تاریخچهٔ واگرد نمی‌شود، پیمایش یا بزرگ‌نمایی هم نه، و مخزن مشترک ویرایشگر هیچ تغییری نمی‌فرستد: فقط آنچه ردیاب‌هایش از مکان‌نما، فوکوس، انتخاب و کادر کشیدن خواننده می‌فرستند، و ثبات‌هایی که ویرایشگر دیگر هنگام پیوستن می‌خواهد (به ویرایش مشارکتی نگاه کنید). همچنان هر تغییری را که دیگران می‌فرستند اعمال می‌کند. تغییر پایگاه داده، یک تنظیم Code Generator یا یک ردیف View Option به سند می‌رسد، و به صفحه هم می‌رسد مگر اینکه خواننده همان تنظیم را همان‌جا تغییر داده باشد، و تغییر مشترک نمایش نام‌ها در هر دو حالت روی صفحه دیده می‌شود. از نسخهٔ 5.1.0، زبان Code Generator، شیوهٔ نگارش نام یا نوع علامت نقل‌قولی که تا وقتی قفل همان تنظیم روشن است تغییر کند، روی صفحهٔ ویرایشگری که آن را تغییر داده می‌ماند و هرگز فرستاده نمی‌شود، بنابراین نه به سند خواننده می‌رسد و نه به صفحهٔ او. تغییری که با قفل خاموش انجام شود و مقداری که باز کردن قفل با خود می‌آورد، همچنان مانند بالا به آن می‌رسند.

روشن کردن آن آنچه را باز بود می‌بندد: ویرایشگر نام خانه، یادداشت یا گروه جدول، رابطه‌ای که کشیده می‌شد، کشیدن جدول، یادداشت، گروه جدول یا ستون، نسخه‌های کشیدن با Alt، تغییر اندازهٔ یادداشت یا گروه جدول، پیش‌نمایش یا جایگذاری چیدمان خودکار که هنوز در حال اجراست، Map Columns، سفر در زمان و انتخابگر رنگ. انتخاب را پاک می‌کند، ابزار دست را زمین می‌گذارد و ابتدا آنچه هر مخزن مشترک هنوز از یک کشیدن یا پیمایش نگه داشته است را ارسال می‌کند، همان‌طور که flushStreamBuffers انجام می‌دهد. ویژگی‌های جدول که اکنون فقط خواندنی است، نمایشگر تفاوت و کادر گفت‌وگوی Export image باز می‌مانند، و پیمایش، بزرگ‌نمایی، زبانه و نمایش نام‌ها همان‌طور که بودند می‌مانند. عنصری که هنگام اولین سوار شدن فقط خواندنی باشد به همین شکل شروع می‌کند، و عنصری که میزبان آن را در صفحه جابه‌جا کند خط دورنمایی‌ای را که یک پرش بر جا گذاشته نگه می‌دارد.
خاموش کردنش کنترل‌های ویرایش را بدون هیچ انتخاب یا چیز بازی برمی‌گرداند. هر یک از پایگاه داده، زبان Code Generator، هر دو شیوهٔ نگارش نام، نوع علامت نقل‌قول و ردیف‌های View Option که خواننده تغییر داده است، به آنچه صفحه پیش از نخستین تغییر خواننده نشان می‌داد برمی‌گردد: مقدار سند، همراه با هر تغییری که دیگران در این فاصله فرستاده‌اند، یا مقداری که این ویرایشگر خودش زیر قفل آن تنظیم نشان می‌داد و value هرگز آن را نگه نداشته بود. پیمایش، بزرگ‌نمایی، زبانه و نمایش نام‌ها همان‌جا می‌مانند که خواننده رها کرده بود، و value تنظیم‌های سند را نگه می‌دارد تا وقتی دوباره تغییر کنند. هیچ‌یک از این دو تغییر change را ارسال نمی‌کند.
صفت بدون مقدار، ="" و ="true" همگی به‌صورت true خوانده می‌شوند. ="false" به‌صورت false خوانده می‌شود و هر رشتهٔ دیگری هم همین‌طور — از جمله الگوی رایج HTML، یعنی readonly="readonly".

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' می‌شود و باقی می‌ماند: تغییر بعدی سیستم‌عامل دیگر آن را بازنویسی نمی‌کند، حتی با اینکه systemDarkMode هنوز true است. پیش از نسخهٔ 4.0.0، تغییر بعدی سیستم‌عامل آن را بازنویسی می‌کرد.
خاموش کردن آن وقتی ظاهر '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 علاوه بر Light و Dark گزینهٔ System را هم ارائه می‌دهد و تا وقتی این صفت روشن است، جست‌وجوی سریع 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 کشیدن رابطه در طول بارگذاری آماده می‌ماند، و آنجا که متن بارگذاری‌شده، مانند مقدار زمان اجرایی که یک واگرد با خود می‌آورد، جدولی را که کشیدن از آن آغاز شده بود به‌صورت موجودیت حذف‌شده نگه می‌داشت، یک فشار می‌توانست رابطه‌ای از همان جدول حذف‌شده اضافه کند. افزودن (append) کشیدن رابطه را آماده نگه می‌دارد.
مانند قبل، یادداشت، نام گروه جدول یا ویرایشگر خانه تا وقتی باز می‌ماند که سند بارگذاری‌شده همچنان آنچه را ویرایش می‌کند نگه دارد و نشان دهد، و در غیر این صورت بسته می‌شود؛ تایپ در ویرایشگری که باز مانده است در سند بارگذاری‌شده ادامه پیدا می‌کند. از نسخهٔ 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 خطا پرتاب می‌کند.
این مقدار چیزهایی را در بر دارد که value کنار می‌گذارد: موجودیت‌های حذف‌شده و ترتیب آن‌ها، ترتیب لایه‌ها، عرض‌های اندازه‌گیری‌شده، نشانه‌های کلید، پرچم‌های هر رابطه (شناسا بودن آن و شیوهٔ کشیده شدن انتهای والدش) و نقاط اتصال، و توالی‌ها.
از نسخهٔ 4.2.0، چیزهای خالی‌ای را هم نگه می‌دارد که value کنار می‌گذارد: متن خالی یک موجودیت، مانند نام، توضیح، نوع داده، مقدار پیش‌فرض، رنگ یا متن یادداشت؛ فهرست‌های doc یعنی tableIds، relationshipIds، indexIds و memoIds و مجموعه‌های tableEntities تا memoEntities، که حتی وقتی خالی‌اند نوشته می‌شوند؛ فهرست و مجموعهٔ گروه جدول تا وقتی سند یک گروه یا یک گروه حذف‌شده را نگه می‌دارد؛ و هر واژه‌نامه با فهرست doc آن تا وقتی یکی از این دو یک مورد دارد. نام منطقی‌ای که فقط فاصله است، پیوند به یک دامنهٔ حذف‌شده، ردیف‌هایی که از یک برگهٔ واژه‌نامه حذف شده‌اند و ردیف‌هایی که هیچ چیزی در خود ندارند را نگه می‌دارد. مانند value، نام منطقی، پیوند دامنه یا گروه یک جدول که '' است، و پرچم نام استخراج‌شدهٔ یک جدول که خاموش است، کنار گذاشته می‌شوند.
هر واژه‌نامه یک سرآیند و ردیف‌هاست، مانند یک فایل، اما سرآیندش "order"، یعنی کلید ترتیب هر ردیف، را درست پس از "name" نام می‌برد و ردیف‌هایش به ترتیبی قرار دارند که ویرایشگر نگه می‌دارد، از جمله ردیف‌های حذف‌شده، نه به ترتیب برگه. برای ترتیب برگه، ردیف‌هایی را که فهرست doc آن نام می‌برد بردارید و آن‌ها را بر اساس order مرتب کنید، که به ترتیب code unit مقایسه می‌شود، و ردیف‌هایی را که کلید یکسان دارند بر اساس 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 نسخهٔ v2 — با همهٔ قفل‌ها در حالت روشن، با 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

وقتی در ویرایشگر تغییری رخ دهد، یک رویداد ارسال می‌کند.
این رویداد با تأخیر تجمیعی 200 میلی‌ثانیه ارسال می‌شود و تا وقتی 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 را با مقداری که آخرین بار ذخیره کرده‌اید مقایسه کنید، نه با فایلی که بارگذاری کرده‌اید: فایلی که نسخه‌ای قدیمی‌تر نوشته است، فایل v2 یا فایلی که دستی ویرایش شده است، می‌تواند بلافاصله پس از بارگذاری در value متفاوت از آب درآید، زیرا value آن را به شکل ذخیره‌سازی می‌نویسد. فایلی که قفل Viewport آن خاموش است و مبدأ آن هیچ بخشی از نمودار را روی این صفحه‌نمایش رسم نمی‌کند هم همین‌طور است: بارگذاری، نما را روی نمودار می‌برد و value جایی را که نما در آن قرار می‌گیرد می‌نویسد. از نسخهٔ 4.0.0، عرض‌های اندازه‌گیری‌شده دیگر باعث این موضوع نمی‌شوند، زیرا value هیچ عرضی را نگه نمی‌دارد. از نسخهٔ 4.2.0، فایلی که نسخهٔ 4.0.0 یا 4.1.0 ذخیره کرده است هم می‌تواند متفاوت از آب درآید، چون value اکنون فیلدهای متنی، فهرست‌ها و مجموعه‌های خالی آن را کنار می‌گذارد، بنابراین چنین فایلی یک بار، در ذخیرهٔ بعدی‌اش، بازنویسی می‌شود. میزبانی که فایل می‌نویسد می‌تواند به‌جای آن، ویرایش را با مقدار changed در مخزن رونوشت از تغییر نما تشخیص دهد؛ on@change را ببینید.
این رویداد خاصیت detail ندارد و نه bubble می‌شود و نه از مرز shadow root عبور می‌کند، بنابراین روی خود عنصر به آن گوش دهید و 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، تا وقتی System انتخاب شده است، appearance آن '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، این رویداد bubble نمی‌شود، بنابراین روی خود عنصر به آن گوش دهید.

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، این متد کشیدن یک رابطه را پایان می‌دهد، همان‌طور که value 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 ثابت بود. removeSelection از نسخهٔ 4.0.0 اضافه شده است. addTableGroup و groupSelectedTables از نسخهٔ 4.1.0 اضافه شده‌اند.
مقدار هر کلید میان‌بر باید یک 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 جای خود را به مکان‌نما می‌دهند: تا وقتی فوکوس در یک فیلد ورودی، یک ناحیهٔ متنی یا یک 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 صفحه در فاز bubbling هرگز آن را دریافت نمی‌کند.

از نسخهٔ 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 صفحه در فاز bubbling آن را دریافت نمی‌کند. وقتی ویرایشگر خانه یا یادداشت، از نسخهٔ 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 صفحه در فاز bubbling.
جز در کاوشگر، قالب‌های Import در صفحهٔ خوش‌آمد، فهرست اصطلاحات خانهٔ نام منطقی، زبانهٔ واژه‌نامه و انتخابگرها و کادرهای گفت‌وگوی زیر، ویرایشگر هرگز جلوی انتشار Escape را نمی‌گیرد، بنابراین صفحه‌ای که خودش به آن گوش می‌دهد، برای نمونه برای بستن کادر گفت‌وگوی خودش، هر دو فشار کلید را دریافت می‌کند و می‌تواند از فشاری که defaultPrevented آن true است صرف‌نظر کند.
تا وقتی جست‌وجوی سریع، ویژگی‌های جدول، نمایشگر تفاوت‌ها، پیش‌نمایش چیدمان خودکار یا سفر در زمان باز است، Escape به‌جای آن، همان را می‌بندد و انتخاب را همان‌طور که هست باقی می‌گذارد. رفتار پیش‌فرض این فشار کلید هم لغو نمی‌شود.
از نسخهٔ 4.0.0، کادر گفت‌وگوی باز Export image یا Map Columns هم Escape را دریافت می‌کند، خودش را می‌بندد و انتخاب را همان‌طور که هست باقی می‌گذارد. هر یک از آن‌ها هنگام باز شدن صفحه‌کلید را در اختیار می‌گیرد و رفتار پیش‌فرض آن Escape لغو و انتشارش متوقف می‌شود.
از نسخهٔ 4.1.0، کلید Escape که با فوکوس درون کاوشگر، در درخت، فیلدها یا دکمه‌های آن، فشار داده شود، صفحه‌کلید را به بوم برمی‌گرداند و کاوشگر را باز و انتخاب را همان‌طور که هست باقی می‌گذارد. ویرایشگر روی آن هم preventDefault() و هم stopPropagation() را فراخوانی می‌کند، بنابراین هرگز به شنوندهٔ keydown صفحه در فاز bubbling نمی‌رسد.
کلید 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 در Windows به‌عنوان Control و Alt و در macOS به‌عنوان Alt حساب می‌شود. فشارهایی که با یک فاصله از هم جدا شده‌اند یک توالی کلید را تشکیل می‌دهند که پس از یک ثانیه بدون 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 در فاز capture، باید تا وقتی ویرایشگر فوکوس دارد اجازهٔ عبور آن‌ها را بدهد.
فهرست کلیدهایی را که باید عبور کنند از 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 صفحه در فاز bubbling: 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 صفحه در فاز bubbling: 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، برای میزبانی که حالت روشن و تیرهٔ خودش را دارد، مانند طرح زمینهٔ یک IDE، تعیین می‌کند که ظاهر 'system' حالت روشن را نشان دهد یا تیره. تا وقتی یکی از آن‌ها تعیین شده است، تغییرات سیستم‌عامل نادیده گرفته می‌شوند.
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 نیست کنار می‌گذارد و قلاب‌های آن‌ها، یعنی --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 یک قلاب CSS متناظر دارد که نامش --erd-editor- به‌اضافهٔ کلید به شیوهٔ kebab-case است: grayColor10 برابر --erd-editor-gray-color-10، keyPK برابر --erd-editor-key-pk و keyPFK برابر --erd-editor-key-pfk است.
این قلاب‌ها به درون ویرایشگر به ارث می‌رسند، بنابراین آن‌ها را هر جا که می‌خواهید اعمال شوند تنظیم کنید. روی :root طرح زمینهٔ همهٔ ویرایشگرهای صفحه را تعیین می‌کنند؛ روی خود عنصر فقط طرح زمینهٔ همان یکی را.

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

از نسخهٔ 3.4.0، توکن‌های dargSelect که املای نادرستی داشتند به‌صورت dragSelect نوشته می‌شوند و قلاب‌های آن‌ها از --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 یا انتخاب یک زبان، ویرایشگر انگلیسی را نشان می‌دهد، یا تا وقتی enableLocalePicker روشن است از 'system' پیروی می‌کند.
ویرایشگر 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 برمی‌گرداند که وقتی وارد کردن در یک گام واگرد انجام شد resolve می‌شود. کمتر از دو جدول، نبودن رابطه، چیدمانی که شکست بخورد، صفحه‌ای بدون SharedWorker یا Cancel روی اعلان Placing tables باعث می‌شود جدول‌ها به‌جای آن در ردیف‌ها قرار بگیرند. بارگذاری دیگری در این فاصله — وارد کردن جایگزین‌کنندهٔ دیگر، مقداردهی به value، setInitialValue()، از نسخهٔ 5.1.0 reseed یک مخزن مشترک، clear()، بارگذاری یک همکار، یا واگرد یا ازنو انجام دادن یک بارگذاری یا clear() — جای آن را می‌گیرد و Promise بدون اینکه چیزی بارگذاری شده باشد resolve می‌شود. واردسازی‌هایی که به این شکل چیده می‌شوند به ترتیبی که آغاز شده‌اند قرار می‌گیرند.
• mode: 'replace'، مقدار پیش‌فرض، سند را جایگزین می‌کند. mode: 'append' فایل را مانند وارد کردن و افزودن زیر نمودار اضافه می‌کند و همهٔ جدول‌هایی را که از قبل وجود دارند، و همهٔ تنظیمات جز زبانه و موقعیت نما را، همان‌طور که هستند باقی می‌گذارد. اگر در زبانهٔ دیگری باشید، ابتدا زبانهٔ ERD نمایش داده می‌شود. جدول‌های جدید، و تا وقتی گروه‌های جدول نمایش داده می‌شوند، گروه‌های جدولی که یک فایل DBML می‌آورد، انتخاب می‌شوند و نما به سمت آن‌ها پیمایش می‌کند، مگر اینکه از قبل به‌خوبی دیده شوند، طبق قاعده‌ای که از نسخهٔ 4.1.0 همهٔ پرش‌ها از آن پیروی می‌کنند؛ مقصد پرش را ببینید. یک بار واگرد، کل افزوده را حذف می‌کند. متنی که نتواند بخواند چیزی اضافه نمی‌کند و سند را همان‌طور که هست باقی می‌گذارد.

تا وقتی readonly تنظیم شده است، جایگزینی نادیده گرفته می‌شود، افزودن چیزی اضافه نمی‌کند و فراخوانی با placement: 'auto' بی‌درنگ resolve می‌شود.
از نسخهٔ 3.10.0، setSchemaSQL فایل را بر اساس پایگاه دادهٔ فعلی سند می‌خواند: وقتی Databricks انتخاب شده باشد، رشته‌های درون نقل‌قول تکی از نویسه‌های گریز با بک‌اسلش در 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) بارگذاری می‌کند. هم نگارش فعلی و هم نگارش قدیمی v1 پذیرفته می‌شوند.
از نسخهٔ 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' که در MySQL، MariaDB، PostgreSQL، SQLite و Databricks عبارت IF NOT EXISTS را می‌نویسد و در جاهای دیگر به 'create' برمی‌گردد؛ یا 'recreate' که جدول‌ها را پیش از ایجادشان حذف می‌کند و Snowflake به‌جای آن CREATE OR REPLACE TABLE را می‌نویسد.
• header: 'none'، مقدار پیش‌فرض؛ 'use' که به پایگاه داده یا طرح‌وارهٔ سند جابه‌جا می‌شود؛ یا 'createAndUse' که ابتدا اگر وجود نداشته باشد آن را ایجاد می‌کند و سپس به آن جابه‌جا می‌شود. سامانهٔ پایگاه داده‌ای که گزینهٔ درخواست‌شده را ندارد، مانند همان زبانه به گزینهٔ دیگری برمی‌گردد: Oracle برای 'createAndUse' همان 'use' را می‌نویسد، 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 سند را در بر دارد، به این ترتیب: سرآیند، اسکریپت پیش از جدول‌ها، دستورهای حذف، جدول‌ها، اسکریپت پس از جدول‌ها. گزینه‌های 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، نقل‌قول تکی درون توضیح جدول یا توضیح ستون گریز داده می‌شود، بنابراین توضیحی مانند 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...');