ErdEditorElement
Düzenleyici sıradan bir HTMLElement öğesidir; @dineug/erd-editor/erd-editor.js dosyasını içe aktarmanın tanımladığı <erd-editor> etiketidir.
5.0.0 sürümünden itibaren paketin kökünü içe aktarmak hiçbir etiket tanımlamaz. Kök, ErdEditorElement adını hem öğenin türü hem de sınıfı olarak ve etiketi çağırdığınız yerde tanımlayan defineErdEditor() işlevini dışa aktarır. Öğeleri kaydetme bölümüne bakın.
Yalnızca bir diyagram gösteren bir sayfa için <erd-viewer>, kendi başına salt okunur bir öğedir.
import '@dineug/erd-editor/erd-editor.js';
const editor = document.createElement('erd-editor');
Tür tanımı aşağıdaki gibidir.
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;
}
Düzenleyici kapalı bir gölge köke işlenir, bu nedenle editor.shadowRoot değeri null olur ve stiller ne sayfadan içeri ne de içeriden sayfaya sızar.
İçerideki hiçbir şeye seçiciyle ulaşılamaz – bunun yerine düzenleyiciyi setTheme yöntemi ve --erd-editor-* CSS özel özellikleriyle biçimlendirin.
Öznitelik olarak yalnızca readonly, system-dark-mode, enable-theme-builder, enable-locale-picker ve enable-welcome-screen vardır ve beşi de varsayılan olarak false değerini alır. Son ikisi 4.0.0 sürümünde eklendi. Her biri değerini readonly bölümünde anlatıldığı gibi okur.
4.1.0 sürümünden itibaren ERD sekmesinde, tuvalin soluna yerleşik ve en üstünde Bul ve değiştir yer alan bir diyagram ağacı olan Gezgin bulunur. Hiçbir öznitelik, özellik, yöntem veya olay onu açmaz, kapatmaz ya da durumunu bildirmez: Gezgin araç çubuğundaki Explorer düğmesiyle, Hızlı aramadaki veya tuvalin bağlam menüsündeki Toggle Explorer öğesiyle ya da findReplace bağlamasıyla açılır.
Her öğe Gezgin kapalı olarak başlar. Gezginin açık olup olmadığı, genişliği, daraltma durumu ve araması, sekme değişiklikleri ve setInitialValue dahil her yükleme boyunca öğe var olduğu sürece korunur ve hiçbir zaman value, runtimeValue, geri alma geçmişi ya da paylaşılan bir depo içinde yer almaz.
4.2.0 sürümünden itibaren tabloların ve sütunların adlarının yanında mantıksal adları da olabilir ve sekme gibi bir belge ayarı olan Ad görünümü, tuvalin bunların adlarını mı, mantıksal adlarını mı yoksa her ikisini mi göstereceğine karar verir.
Araç çubuğunda ayrıca Code Generator ile Settings arasında, belgenin sözcüklerini, terimlerini, değer alanlarını ve bir Checks sayfasını barındıran bir Sözlük sekmesi bulunur. Bu, diğerleri gibi bir sekmedir: '@dineug/erd-editor/builtin-dictionary' olan canvasType değerini Canvas Type kilidi tutar, bu nedenle bu sekmedeyken kaydedilen bir metin setInitialValue ile yine bu sekmede açılır, bu sekmeye geçiş ise yalnızca o kilit devre dışıyken value içine yazılır ve change olayını tetikler. Onu açan ya da durumunu bildiren kendine ait hiçbir öznitelik, özellik, yöntem veya olay yoktur. Sekmedeki düzenlemeler belge değişiklikleridir: value içinde yer alır, change olayını tetikler ve ortak çalışanlara ulaşır, ancak geri alınmaları ve yinelenmeleri belgenin geçmişinde değil, her sayfanın kendi geçmişinde yürür.
Sekmede kaldığınız yer – hangi sayfanın gösterildiği (ilk başta Domains) ve her sayfanın araması, seçimi, kaydırma konumu ve sütun genişlikleri – sekme değişiklikleri ve her yükleme boyunca öğe var olduğu sürece korunur ve hiçbir zaman value, runtimeValue, bir geri alma geçmişi ya da paylaşılan bir depo içinde yer almaz.
ErdEditorElement arayüzüne hiçbir üye eklenmez. API'ye eklenenler, getSchemaSQL yönteminin seçeneklerindeki logicalNameAsComment, on iki tema token'ı ve dışa aktarılan dictionaryRowChords işlevidir.
readonly
Düzenleyicinin düzenleme yeteneğini ayarlar.
Bu öznitelik ayarlıyken value değerine atama, clear(), setSchemaSQL(), setSchemaGraphQL(), setSchemaDBML(), setSchemaAML(), setSchemaJSON(), 4.2.0 sürümünden itibaren bir Sözlük sayfasınınki dahil geri alma ve yinelemenin tümü yok sayılır ve change olayı hiçbir zaman tetiklenmez. Belgeyi bunun yerine setInitialValue ile yükleyin.
5.0.0 sürümünden itibaren salt okunur bir düzenleyici, kontrolleri devre dışı bırakılmış bir düzenleyici değil, bir okuyucudur. Altı sekmesini, Gezgini, mini haritayı, Hızlı aramayı, Tablo özelliklerini, Fark görüntüleyicisini, Export öğesini, Zen modunu ve ortak çalışanların imleçlerini, odaklarını ve seçimlerini korur; diyagramı düzenleyecek her kontrol devre dışı çizilmek yerine bırakılır. 5.0.0 sürümünden önce düzenleme kontrollerinin çoğu yine çiziliyor ve düzenleyici onların gönderdiğini atıyordu.
ERD sekmesinde sürükleme, nerede başlarsa başlasın, bir tablonun üzerinde de olsa tuvali kaydırır; bir basış ise hiçbir şeyi seçmez, taşımaz ve açmaz. İmleç bir tablonun üzerinde durduğunda tablonun ilişkileri aydınlanır, bir tablo ya da ilişki üzerindeki hareketsiz bir tıklama bu ışığı korur, başka bir yerdeki hareketsiz bir tıklama ise söndürür; tıpkı <erd-viewer> öğesinde olduğu gibi. Tek seçim, bir atlamanın bıraktığı dış çizgidir: Gezgin satırına, Bul eşleşmelerinden birine ya da #, @ veya : sonrasındaki bir Hızlı arama sonucuna gitmek ulaştığı öğeyi seçer ve bir sonraki hareketsiz tıklama seçimi temizler. Kopyalama, bu seçimin tuttuğunu kopyalar.
Tuval araç çubuğu Zoom out, yakınlaştırma düzeyini (Reset zoom), Zoom in, Ad görünümü listesini, Zen Mode ve pusulayı korur; Hand veya Select, New Table, New Memo ya da New Table Group ve ilişki düğmeleri bulunmaz. Tuval menüsü View Option, Name View, Export ve Diff Viewer öğelerini, tablo menüsü Table Properties öğesini korur; bir not, bir ilişki veya bir tablo grubu hiçbir menü açmaz. ERD sekmesindeki Hızlı arama diyagrama yazan hiçbir satırı listelemez: Tab, Name View, Database, Export, Toggle Explorer, enableThemeBuilder ve enableLocalePicker seçeneklerinin açtığı Theme ve Display Language satırlarını ve #, @, : aramalarını korur. Diğer sekmelerde düzenlenebilir bir düzenleyicide listelediğini listeler. Araç çubuğu veritabanı adını metin olarak gösterir ve Undo, Redo veya Time Travel düğmesi içermez.
Hiçbir şey Import, Import and Add, Auto Layout, bir tablo grubu satırı (Tablo grupları bölümüne bakın) ya da Map Columns sunmaz ve karşılama ekranı gösterilmez.
Ekleyen, kaldıran veya düzenleyen bağlamalar hiçbir şey yapmaz: edit, addTable, addColumn, addMemo, addTableGroup, groupSelectedTables, removeTable, removeColumn, removeSelection, primaryKey, selectAllTable, selectAllColumn, dört ilişki bağlaması ve handTool; her biri seçeneğinin söylediği gibi yine engellenir. Yapıştırma ve Tab de hiçbir şey yapmaz ve sayfaya engellenmeden ulaşır. Yakınlaştırma bağlamaları, zenMode, focusView, bir atlamanın seçtiği tablodaki tableProperties, search, findReplace, kopyalama, Escape ve ok tuşları çalışmaya devam eder. Hiçbir hücre, not veya tablo grubu adı düzenleyicisi açılmaz ve hiçbir ilişki çizilmez.
Gezginin en üstündeki Bul ve değiştir yalnızca bulur, Toggle Replace oku ve Değiştir satırı bulunmaz. Panelin başlığı Explorer olur ve araç çubuğu düğmesinin araç ipucunda her düzenleyicide Explorer (Ctrl + F) (Windows/Linux) veya Explorer (⌘ + F) (Mac) yazar. Gezgin salt okunur bir düzenleyicide 4.1.0 sürümünden beri açılır; 3.10.0 sürümünden 4.0.0 sürümüne kadar Bul ve değiştir orada Find başlıklı, yalnızca bulma yapan kayan bir panel olarak açılıyordu.
Tablo özellikleri tablo menüsünden veya tableProperties bağlamasıyla açılır ve 3.10.0 sürümünden itibaren başlığının yanında bir Read only rozeti gösterir, Indexes sekmesi de hiçbir düzenleme sunmaz. Tablo özellikleri bölümüne bakın.
Ayarlar sekmesi aynı Read only rozetini taşır ve her ayarı basışı kabul etmeyen bir kontrolle gösterir: İki anahtarı, Maximum comment width alanı ve yedi Lock düğmesi devre dışıdır, Column Order satırları da sürüklenmez. Şema SQL sekmesinin Before tables ve After tables betikleri yazı kabul etmez. Görselleştirme sekmesi, orada belgeyi düzenleyen bir şey olmadığından düzenlenebilir bir düzenleyicideki gibi çalışır; Akış modunda Previous table ve Next table düğmeleriyle ya da geri alma ve yineleme tuşlarıyla yine birer adım ilerler.
Sözlük sekmesi yine açılır: Sayfaları değiştirilebilir, sayfalarda arama, seçim, kaydırma ve kopyalama yapılabilir ve Checks sayfasının bir satırı yine belirttiği öğeye gider. Hiçbir hücre düzenleme, yapıştırma veya temizleme kabul etmez, sekme hiçbir Add Row, Delete Rows, Import CSV veya Export CSV aracı ve ızgarada hiçbir menü göstermez, satır tuş kombinasyonları da hiçbir şey eklemez ya da silmez. Tablo menüsü, tuval menüsü ve Hızlı arama Derive Physical Names Again veya Derive Physical Name Again öğelerini sunmaz.
5.0.0 sürümünden itibaren bir okuyucunun hâlâ değiştirebildiği ayarlar o düzenleyicinin ekranında kalır: kaydırma ve yakınlaştırma, sekme, veritabanı, Kod oluşturucu dili, iki ad biçimi, tırnak türü, View Option satırları ve her seçicisinden Ad görünümü; Ad görünümü 4.2.0 sürümünden beri ekranda kalıyordu. Kilitleri ne derse desin hiçbiri value, runtimeValue, json dışa aktarma, geri alma geçmişi, change olayı ya da paylaşılan bir depoya ulaşmaz; böylece okuyucu diyagrama nasıl bakarsa baksın value belgenin ayarlarını korur. Şema SQL ve Kod oluşturucu seçenek panelleri, readonly ayarlıyken bu ayarların altına düzenlenebilir bir düzenleyicide Saved in the document yazan yere This window only yazar. İki sekmenin gösterdiği, kopyaladığı ve kaydettiği ekranı izler, getSchemaSQL işlevinin veritabanı sistemi verilmeden çağrılması da öyle.
5.0.0 sürümünden önce okuyucunun kaydırması, yakınlaştırması, sekme geçişi, veritabanı ve kod ayarları, onları hiçbir kilit tutmadığı sürece value değerine gidiyordu – veritabanını hiçbir kilit tutmaz – ve paylaşılan bir depo bunları diğer düzenleyicilere gönderiyordu.
Şema SQL sekmesinin kendi This window only seçimleri olan Statements, Header, 4.2.0 sürümünden itibaren Write logical names into empty comments ve Tables hiçbir düzenleyicide kaydedilmez ve yine uygulanır; Export image iletişim kutusu, tema oluşturucu ve görüntüleme dili seçicisi de öyle. Tema oluşturucuda veya görüntüleme dili seçicisinde yapılan bir seçim yine changePresetTheme veya changeLocale olayını tetikler.
Ayarlıyken hiçbir şey geri alma geçmişine girmez, kaydırma ve yakınlaştırma da dahil; düzenleyicinin paylaşılan deposu hiçbir değişiklik göndermez: yalnızca izleyicilerinin okuyucunun imleci, odağı, seçimi ve sürükleme kutusu hakkında gönderdiklerini ve başka bir düzenleyicinin katıldığında istediği kayıtları gönderir (Ortak düzenleme sayfasına bakın). Diğerlerinin gönderdiği her değişikliği yine uygular. Veritabanında, bir Kod oluşturucu ayarında veya bir View Option satırında yapılan değişiklik belgeye ulaşır, okuyucu o ayarı orada değiştirmediyse ekrana da ulaşır; paylaşılan bir Ad görünümü değişikliği ise her iki durumda da ekranda görünür. 5.1.0 sürümünden itibaren, bir Kod oluşturucu dili, ad biçimi veya tırnak türü o ayarın kilidi etkinken değiştirilirse, onu değiştiren düzenleyicinin ekranında kalır ve asla gönderilmez; bu nedenle ne okuyucunun belgesine ne de ekranına ulaşır. Kilit devre dışıyken yapılan bir değişiklik ve bir kilit açmanın taşıdığı değer yine yukarıdaki gibi ulaşır.
Ayarlamak, açık duranları sona erdirir: bir hücre, not veya tablo grubu adı düzenleyicisi, çizilmekte olan bir ilişki, bir tablo, not, tablo grubu veya sütun sürüklemesi, bir Alt sürüklemesinin kopyaları, bir not veya tablo grubu yeniden boyutlandırması, hâlâ süren bir Otomatik düzen önizlemesi veya yerleştirmesi, Map Columns, Time Travel ve renk seçici. Seçimi temizler, el aracını bırakır ve önce her paylaşılan deponun bir sürükleme veya kaydırmadan hâlâ elinde tuttuğunu, flushStreamBuffers işlevinin yaptığı gibi gönderir. Artık salt okunur olan Tablo özellikleri, Fark görüntüleyicisi ve Export image iletişim kutusu açık kalır; kaydırma, yakınlaştırma, sekme ve Ad görünümü olduğu gibi kalır. İlk bağlandığında salt okunur olan bir öğe aynı şekilde başlar, bir ana uygulamanın sayfa içinde taşıdığı öğe ise bir atlamanın bıraktığı dış çizgiyi korur.
Kapatmak, düzenleme kontrollerini hiçbir şey seçili ya da açık olmadan geri getirir. Okuyucunun değiştirdiği veritabanı, Kod oluşturucu dili, iki ad biçimi, tırnak türü ve View Option satırlarının her biri, okuyucu onu ilk kez değiştirmeden önce ekranın gösterdiği değere döner: belgenin değeri ve bu arada diğerlerinin gönderdiği değişiklikler ya da bu düzenleyicinin ayarın kilidi altında kendi başına gösterdiği ve value değerinin hiç tutmadığı bir değer. Kaydırma, yakınlaştırma, sekme ve Ad görünümü okuyucunun bıraktığı yerde kalır ve value belgenin ayarlarını onlar yeniden değiştirilene kadar korur. İki yön de change tetiklemez.
Değer verilmemiş bir öznitelik, ="" ve ="true" değerlerinin tümü true olarak okunur. ="false" değeri false olarak okunur, HTML'deki yaygın readonly="readonly" kalıbı dahil başka her dize de aynı şekilde okunur.
editor.readonly = true;
// or
editor.setAttribute('readonly', 'true');
<erd-editor readonly></erd-editor>
systemDarkMode
Sistemin koyu/açık moduyla otomatik olarak eşitlenip eşitlenmeyeceğini belirler.
4.0.0 sürümünden itibaren bunu açmak, setPresetTheme({ appearance: 'system' }) çağrısının yaptığı gibi temanın appearance değerini 'system' olarak ayarlar. Düzenleyici bundan sonra işletim sisteminin bildirdiği açık veya koyu görünüşü ya da setSystemAppearance yönteminin belirttiğini gösterir ve bu değiştiğinde geçiş yapar.
Sonradan 'light' veya 'dark' ile yapılan bir setPresetTheme çağrısı ya da tema oluşturucuda veya Hızlı aramada yapılan bir Light veya Dark seçimi 'system' değerinin yerini alır ve kalıcı olur: systemDarkMode hâlâ true olsa da işletim sistemindeki bir sonraki değişiklik artık onun üzerine yazmaz. 4.0.0 sürümünden önce işletim sistemindeki bir sonraki değişiklik onun üzerine yazıyordu.
Görünüş 'system' iken bunu kapatmak, o anda gösterilen açık veya koyu görünüşü korur. Görünüş 'system' dışında bir değere değiştirildikten sonra bunu kapatmak, görünüşü olduğu gibi bırakır.
Bunu değiştirmek hiçbir olay tetiklemez.
editor.systemDarkMode = true;
// or
editor.setAttribute('system-dark-mode', 'true');
<erd-editor system-dark-mode></erd-editor>
enableThemeBuilder
Hazır temaları kolayca ayarlamak için bir arayüz sağlanıp sağlanmayacağını belirler.
Araç çubuğundaki Theme düğmesini gösterir. Bu düğme Accent color, Gray color ve Appearance seçeneklerini içeren tema oluşturucuyu açar. 4.0.0 sürümünden itibaren Appearance, Light ve Dark seçeneklerinin yanında System seçeneğini de sunar ve bu ayar açıkken Hızlı arama Theme komutunu System, Light ve Dark ile birlikte listeler. Dil ve tema sayfasına bakın.

editor.enableThemeBuilder = true;
// or
editor.setAttribute('enable-theme-builder', 'true');
<erd-editor enable-theme-builder></erd-editor>
Hazır temayı bu panelden veya Hızlı aramadan değiştirmek changePresetTheme olayını tetikler.
enableLocalePicker
4.0.0 sürümünden itibaren, düzenleyicinin görüntüleme dilini seçmek için bir arayüz sağlanıp sağlanmayacağını belirler.
Araç çubuğundaki Display Language düğmesini, ikisi birden gösterildiğinde Theme düğmesinden sonra gösterir. Düğme görüntüleme dili seçicisini açar ve Hızlı arama Display Language komutunu listeler. İkisi de System seçeneğini ve 25 dili sunar. Dil ve tema sayfasına bakın.
Ayrıca setLocale çağrılmadan veya bir dil seçilmeden önce düzenleyicinin ne göstereceğine de karar verir: açıkken 'system', kapalıyken İngilizce, böylece hiçbir şey yapılandırmayan bir öğe her zaman gösterdiği İngilizceyi göstermeye devam eder. Bunu açmak veya kapatmak ikisi arasında hemen geçiş yapar. Bir dil ayarlandıktan veya seçildikten sonra, bu ayar açık da olsa kapalı da olsa o seçim korunur.
İlk karenin 'system' seçeneğini izlemesi için bunu öğe sayfaya eklenmeden önce ayarlayın.
Bir seçim changeLocale olayını tetikler.
editor.enableLocalePicker = true;
// or
editor.setAttribute('enable-locale-picker', 'true');
<erd-editor enable-locale-picker></erd-editor>
enableWelcomeScreen
4.0.0 sürümünden itibaren, boş bir diyagramın okuyucuyu karşılama ekranıyla karşılayıp karşılamayacağını belirler.
Belgede hiç tablo, gösterilen not ve gösterilen tablo grubu olmadığı sürece ERD sekmesinin üzerinde durur. readonly ayarlıyken, Zen modunda ya da Tablo özellikleri, Fark görüntüleyici, Zaman yolculuğu veya Otomatik düzenin önizlemesi açıkken gösterilmez. İlk tablo, gösterilen ilk not veya gösterilen ilk tablo grubu onu kaldırır, boş bir diyagrama geri götüren bir geri alma ise onu geri getirir.
New Table, New Memo ve Command Palette satırları, addTable, addMemo ve search bağlamalarının setKeyBindingMap yönteminin bıraktığı hâliyle ilk tuş kombinasyonunu gösterir, boş bırakılan bir ad için ise hiçbir kısayol göstermez. Ekranın okları Theme ve Display Language düğmelerini yalnızca enableThemeBuilder ve enableLocalePicker bu düğmeleri gösterdiğinde işaret eder.
Menüsünde ↑, ↓, Home ve End satırlar arasında geçiş yapar, engellenir ve durdurulur. Enter ve Space engellenmez ama durdurulur, böylece odaktaki satır onları alır. Import biçimleri arasında ise Escape geri döner, engellenir ve durdurulur. Diğer her tuş, her zamanki gibi düzenleyiciye ve sayfaya ulaşır.
Belgede hiçbir şeyi değiştirmez, bu nedenle value değerini olduğu gibi bırakır ve change olayını tetiklemez.
Resmî ana uygulamaların yaptığı gibi bunu setInitialValue belgeyi yükledikten sonra açın, böylece ekran hâlâ yüklenmekte olan bir dosyanın üzerinde bir anlığına bile belirmez.
editor.enableWelcomeScreen = true;
// or
editor.setAttribute('enable-welcome-screen', 'true');
<erd-editor enable-welcome-screen></erd-editor>
value
getter
Geçerli belgeyi, düzenleyicinin tanımladığı şemaya uygun bir JSON dizesi olarak alır.
4.0.0 sürümünden itibaren bu, depolama biçimi, yani belgenin bir dosyada tutulduğu hâlidir. json dışa aktarmanın yazdığı ve resmî ana uygulamaların kaydettiği de budur. Yalnızca canlı varlıkları tutar, kaldırılan varlıkları, katman sırasını ve düzenleyicinin kendi hesapladığı ölçülen genişlikler, anahtar işaretleri ve ilişki bağlantı noktaları gibi şeyleri içermez. Varlıkları sabit bir anahtar sırasıyla yazılır, metin iki boşlukla girintilenir ve bir yeni satır karakteriyle biter, böylece aynı belge her zaman aynı baytları verir.
4.2.0 sürümünden itibaren boş olanları da dışarıda bırakır: boş bir doc listesi, boş bir koleksiyon, hiçbir şey tutmayan bir sözlük satırı ve bir varlığın ad, açıklama, veri türü, varsayılan değer veya renk gibi boş bir metin alanı. Bir varlığın içindeki, tablonun columnIds listesi gibi bir liste ise boşken de yazılır. Yeni bir belgenin doc değeri {} olur ve belgede hiç collections bulunmaz, bu nedenle eksik bir alanı, listeyi veya koleksiyonu boş olarak okuyun. Tabloların ve sütunların mantıksal adlarını ve türetilmiş ad bayraklarını, sütunların değer alanı bağlantılarını ve sözcükleri, terimleri ve değer alanlarını da tutar. Her sözlük, alan adlarından oluşan tek bir başlıkla ve onu izleyen satırlarıyla, her satır ayrı bir satırda ve sayfadaki sırayla yazılır. Depolama biçimi bölümüne bakın.
Kilitli olan her ayar, ekranda göründüğü gibi değil, kilitlendiği değerle yazılır. Viewport kilidi originX, originY ve zoomLevel değerlerini tutar, Canvas Type, Language, Table Name Case, Column Name Case, Bracket Type ve 4.2.0 sürümünden itibaren Name View kilitlerinin her biri de kendi ayarını tutar. Ad görünümü nameViewMode olarak ve yalnızca 'physical' değilken yazılır. Diğer her ayar o anki hâliyle yazılır ve lockSettings her zaman yazılır. Bitler için Settings bölümüne bakın; Name View kilidinin biti ters yönde okunur.
5.0.0 sürümünden itibaren salt okunur bir düzenleyicinin okuyucusunun değiştirdiği ayarlar da, ekranda kaldıkları için, kilitli olsun ya da olmasın belgenin değerleriyle yazılır.
Yeni bir belgede, ister öğenin kendisine bir değer verilmeden önce gösterdiği belge ister boş bir değerden yüklenen belge olsun, tüm kilitler etkindir. Bu belgenin value değeri, ilgili kilit devre dışı bırakılana kadar başlangıç noktasını 0, 0 ve yakınlaştırma düzeyini 1 olarak tutar, ERD sekmesini, varsayılan Kod oluşturucu dilini, ad biçimlerini ve tırnak türünü ve 4.2.0 sürümünden itibaren Physical Names görünümünü de korur.
4.0.0 sürümünden önce, ignoreSaveSettings uygulanmış olarak belgenin tamamını düzenleyicinin tuttuğu hâliyle döndürüyordu. Belgenin düzenleyicideki hâlini artık runtimeValue verir ve ignoreSaveSettings artık okunmaz ya da yazılmaz.
const data = editor.value;
setter
Daha önce kaydedilmiş bir düzenleyici durumunu yükler. Belgenin tamamını değiştirir – geçerli belge önce temizlenir. 4.2.0 sürümünden itibaren buna sözcükler, terimler ve değer alanları da dahildir: Belge metnin tuttuklarını alır, metin hiç tutmuyorsa hiçbirini almaz ve her Sözlük sayfasının kendi geri alma geçmişi boşaltılır.
clear(), setInitialValue() ve varsayılan mode: 'replace' modundaki setSchema* yöntemleri gibi, Görselleştirme sekmesinin Akış modu görünümünü de sıfırlar: düzenini, daraltıldığı tabloları, satır görünümünü, yakınlaştırmasını ve kaydırma konumunu ve 4.2.0 sürümünden itibaren Previous table ve Next table ile adım adım gezilen tabloları. Bir ekleme (mode: 'append') onu sıfırlamaz.
5.1.0 sürümünden itibaren çizilmekte olan bir ilişkiyi, yalnızca türü hazırlanmış olsa da üst tablosu zaten seçilmiş olsa da bitirir. clear(), mode: 'replace' modundaki setSchema* yöntemleri, düzenleyicinin kendi Import öğesi, bunlardan herhangi birinin geri alınması veya yinelenmesi (clear() işleminin geri alınması hariç) ve bunların her biri bir paylaşılan depo üzerinden, bir ortak çalışandan veya bir kodlama ajanından alındığında da aynısını yapar. 5.1.0 sürümünden önce çizim yükleme boyunca hazır kalırdı ve yüklenen metin, örneğin bir geri almanın taşıdığı çalışma zamanı değeri, başladığı tabloyu kaldırılmış bir varlık olarak tutuyorsa, bir basış kaldırılmış o tablodan bir ilişki ekleyebilirdi. Bir ekleme çizimi hazır bırakır.
Eskisi gibi, bir not, tablo grubu adı veya hücre düzenleyicisi, yüklenen belge düzenlediği şeyi hâlâ tutuyor ve gösteriyorsa açık kalır, aksi halde kapanır; açık kalan birine yazılanlar yüklenen belgeye girmeye devam eder. 5.1.0 sürümünden itibaren bir yüklemenin kapattığı düzenleyici klavyeyi düzenleyiciye geri vermek yerine sayfaya bırakır; bu nedenle kapatılan metin için basılan bir Delete veya Backspace seçimden hiçbir şeyi kaldırmaz. Böyle bir yüklemeyle açık kalan bir mantıksal ad hücresi, kapanırken fiziksel adı yalnızca kullanıcının yazdığı bir mantıksal addan türetir; 5.1.0 sürümünden itibaren yüklemenin getirdiği bir addan asla türetmez.
Geçmiş listesine kaydedilir, böylece Undo, Redo kullanılabilir ve change olayını tetikler.
Depolama biçimini, bir runtimeValue değerini veya önceki bir sürümün kaydettiği bir dosyayı kabul eder.
Boş bir dize ya da dize olmayan herhangi bir şey hata vermek yerine yeni bir belge yükler, bu nedenle değeri atamadan önce denetleyin.
Bu yeni belge, setInitialValue('') çağrısının başlattığı belgedir: Boştur, varsayılan ayarlara sahiptir ve 4.0.0 sürümünden itibaren tüm kilitleri etkindir. 3.10.x sürümünde ne kaydırma konumunu ne de yakınlaştırma düzeyini kaydediyordu, ondan önce ise ikisini de kaydediyordu.
Paylaşılan bir depo bu yüklemeyi yeni belgenin JSON'unun tamamıyla ortak çalışanlara aktarır, böylece daha eski bir sürüm dahil her eş onu yükler, ancak 4.2.0 sürümünden önceki bir düzenleyici mantıksal adlar, değer alanı bağlantıları ve sözlükler gibi tanımadığı şeyleri atar. Sürümleri karıştırma bölümüne bakın.
4.0.0 sürümünden itibaren yüklenen belgenin kilitleri ve value değerinin ardından yazdığı kilitli değerler metinden gelir, görünüm de metnin belirttiği yere ya da diyagramın hiçbir kısmı orada çizilmiyorsa diyagramın üzerine yerleşir. Metnin kilitlediği diğer her ayar için – sekme, Kod oluşturucu dili, ad biçimleri, tırnak türü ve 4.2.0 sürümünden itibaren Ad görünümü – düzenleyici yüklemeden önce gösterdiğini göstermeye devam eder. Metnin kilitsiz bıraktığı bir ayar metindeki değeri alır. 4.2.0 sürümünden önce kaydedilmiş bir dosya, içinde o kilidi 4.2.0 sürümlü bir düzenleyici devre dışı bırakmadıkça hiçbir Name View kilidi belirtmez, bu nedenle Ad görünümü Physical Names değerinde kilitli olarak yüklenir ve düzenleyici gösterdiği Ad görünümünü korur. setInitialValue ise metnin tuttuğu her değeri alır; hiçbir kilit belirtmeyen bir metin için de o bölüme bakın.
Birleştirme çakışması işaretleri kalmış bir dosya gibi JSON olmayan bir metin de hata vermez: Belge boşaltılır, ayarları olduğu gibi kalır ve ayrıştırma hatası konsola yazılır.
readonly ayarlıyken yok sayılır; salt okunur bir düzenleyiciye yüklemek için setInitialValue kullanın.
editor.value = 'json...';
runtimeValue
4.0.0 sürümünden itibaren, belgeyi bu düzenleyicinin tuttuğu hâliyle bir JSON dizesi olarak alır. Setter'ı yoktur, bu nedenle ona atama yapmak katı moddaki (strict mode) kodda hata fırlatır.
value özelliğinin dışarıda bıraktıklarını taşır: kaldırılan varlıklar ve sıraları, katman sırası, ölçülen genişlikler, anahtar işaretleri, her ilişkinin bayrakları (tanımlayıcı olup olmadığı ve üst tablo ucunun nasıl çizildiği) ve bağlantı noktaları ve diziler.
4.2.0 sürümünden itibaren value özelliğinin dışarıda bıraktığı boş şeyleri de tutar: bir varlığın ad, açıklama, veri türü, varsayılan değer, renk veya not metni gibi boş metni; boşken bile yazılan tableIds, relationshipIds, indexIds ve memoIds doc listeleri ile tableEntities ile memoEntities arasındaki koleksiyonlar; belge bir grup veya kaldırılmış bir grup tuttuğu sürece tablo grubu listesi ve koleksiyonu; ve her sözlük, kendisi veya doc listesi bir kayıt tuttuğu sürece doc listesiyle birlikte. Yalnızca boşluklardan oluşan bir mantıksal adı, kaldırılmış bir değer alanına giden bağlantıyı, bir Sözlük sayfasından kaldırılan satırları ve hiçbir şey tutmayan satırları da tutar. value özelliğinde olduğu gibi, '' olan bir mantıksal ad, değer alanı bağlantısı veya tablonun grubu ve kapalı olan bir tablonun türetilmiş ad bayrağı dışarıda bırakılır.
Her sözlük, bir dosyadaki gibi bir başlık ve satırlardan oluşur; ancak başlığı "name" alanından hemen sonra "order" alanını, yani her satırın sıralama anahtarını adlandırır ve satırları sayfanın sırasıyla değil, düzenleyicinin tuttuğu sırayla, kaldırılmış satırlar dahil, dizilir. Sayfanın sırası için doc listesinin adlandırdığı satırları alın ve order değerine göre, kod birimi sırasıyla karşılaştırarak, aynı anahtarı paylaşan satırları ise id değerine göre sıralayın.
Ayarları value özelliğinin yazdığı gibi yazılır, kilitli her ayar kilitli değerinde. İki boşlukla girintilidir, her sözlük satırı ayrı bir satırdadır ve value özelliğinden farklı olarak yeni satırla bitmez.
Zaten süren bir oturuma katılan başka bir düzenleyiciyi, örneğin bir ortak çalışanı veya aynı belgenin ikinci bir görünümünü, onun setInitialValue yöntemiyle ilk içerikle başlatmak için kullanın. Oturumun sonradan gönderdiği bir kaldırmanın geri alınması varlığı orada eksiksiz geri getirir, value ile başlatılan bir düzenleyici ise hiçbir kaldırılmış varlık tutmadığından bunun yerine boş, adsız bir tablo ya da 4.2.0 sürümünden itibaren boş bir sözlük satırı geri getirir. Ortak düzenleme sayfasına bakın.
Kaldırılan varlıkları artık hiçbir şey toplamaz, bu nedenle belge dosyasından bir sonraki açılışına kadar bu değerde kalırlar.
Bunu asla bir dosyaya yazmayın: value değerini kaydedin, çünkü JSON Schema onu kabul eder, bunu ise etmez.
otherEditor.setInitialValue(editor.runtimeValue);
setInitialValue
Daha önce kaydedilmiş bir düzenleyici durumunu yükler. Yüklemenin kendisi geçmiş listesine kaydedilmez, bu nedenle geri alınamaz ve change olayı tetiklenmez.
Geri alma geçmişini de temizler, böylece yüklemeden önce yapılan hiçbir şey yüklenen belge üzerinde geri alınamaz veya yinelenemez. 4.2.0 sürümünden itibaren her Sözlük sayfasının kendi geçmişini de temizler.
Depolama biçimini, bir runtimeValue değerini veya önceki bir sürümün kaydettiği bir dosyayı kabul eder ve value değerine atamadan farklı olarak, sekme ve kod ayarları dahil metnin tuttuğu her ayarı alır.
Boş bir dize ya da dize olmayan herhangi bir şey hata vermek yerine yeni bir belge yükler, bu nedenle setInitialValue('') boş bir diyagram başlatır.
4.0.0 sürümünden itibaren, bir öğenin kendisine herhangi bir değer verilmeden önce gösterdiği belge de olan bu yeni belgede tüm kilitler etkindir. Kaydırma, yakınlaştırma, sekme değiştirme ve Kod oluşturucu dilini, ad biçimlerini, tırnak türünü ya da 4.2.0 sürümünden itibaren Ad görünümünü değiştirme value değerini olduğu gibi bırakır ve change olayını tetiklemez. 3.10.x sürümünde ne kaydırma konumunu ne de yakınlaştırma düzeyini kaydediyordu, ondan önce ise ikisini de kaydediyordu.
Metinden yüklenen bir belge, belirttiği kilitleri korur. Hiçbir kilit belirtmeyen bir belge – ignoreSaveSettings ne derse desin 4.0.0 sürümünden önce kaydedilmiş her dosya ve v2 .vuerd dosyası – tüm kilitleri etkin olarak açılır: Viewport başlangıç noktası 0, 0 ve yakınlaştırma düzeyi 1 değerlerinde kilitlidir, belge ERD sekmesinde açılır, dili, ad biçimleri ve tırnak türü de kaydedildiği gibidir.
4.2.0 sürümünden itibaren kilitlerini belirten ama Name View kilidini belirtmeyen bir metin, diğer tüm kilitler devre dışı olsa bile o kilit de etkin olacak şekilde açılır. 4.2.0 sürümünden önce kaydedilmiş bir dosya, içinde o kilidi 4.2.0 sürümlü bir düzenleyici devre dışı bırakmadıkça böyle bir metindir (Settings bölümüne bakın). Hiç kilit belirtmeyen bir metin gibi Physical Names görünümünde açılır.
Her iki durumda da görünüm belgenin görünümünde açılır – metin kilitlerini belirtiyorsa metnin kaydettiği görünümde, hiçbirini belirtmiyorsa 1 yakınlaştırma düzeyinde 0, 0 başlangıç noktasında – ya da diyagramın hiçbir kısmı orada çizilmiyorsa diyagramın üzerinde açılır. Kilitli bir Viewport kilitli değerlerini value içinde yine korur.
4.0.0 sürümünden itibaren önceden tutulan belgenin ortak çalışma durumunu da siler ve bu düzenleyicinin zaten abone olmuş bir paylaşılan deposu diğer düzenleyicilerden onların durumunu yeniden ister, böylece süren bir oturumda yeniden yüklenen bir düzenleyici güncel duruma yetişir. Böyle bir düzenleyiciyi başka bir düzenleyicinin runtimeValue değeriyle başlatın.
5.1.0 sürümünden itibaren ortak çalışma kayıtları ilk içerikle birlikte gelebilir; yanıt verecek çalışan bir düzenleyici yokken saklanmış bir anlık görüntünün buna ihtiyacı vardır.
Bu çağrıdan sonra, asla öncesinde değil, başka bir deponun getLWW() ve getVersion() çıktılarını bu düzenleyicinin paylaşılan deposunda mergeLWW yöntemine geçirin. Ya da yüklemeyi o deponun reseed yöntemiyle yapın; bu yöntem belgeyi yükler ve bunları tek çağrıda alır, ayrıca seçimi ve odağı da atar. Ortak çalışanı başlatma bölümüne bakın.
JSON olmayan bir metin de hata vermez: Belge boşaltılır, ayarları olduğu gibi kalır ve ayrıştırma hatası konsola yazılır.
value değerine atamadan farklı olarak readonly onu engellemez, bu nedenle salt okunur bir düzenleyiciye belge yüklemenin yolu budur. Salt okunur bir düzenleyici bu durumda yüklenen metnin tuttuğu ayarları gösterir ve okuyucusunun ekranda değiştirdiklerini bırakır.
5.1.0 sürümünden itibaren çizilmekte olan bir ilişkiyi bitirir ve açık bir not, tablo grubu adı veya hücre düzenleyicisini, yüklenen belge o düzenleyicinin düzenlediği şeyi hâlâ tutuyor olsa bile kapatır. 5.1.0 sürümünden önce çizim hazır kalırdı ve her düzenleyici, yüklenen belge notunu, grubunu veya tablosunu ve sütununu hâlâ tutuyorsa açık kalırdı.
Onları kapatmak hiçbir şey yazmaz ve göndermez: bir notun metni ve bir hücrenin değeri yazıldıkça, önceden tutulan belgeye zaten yazılmıştı; bir değer alanı hücresinin, bir değer alanı seçilene kadar hiçbir şey yazmayan araması ve yazılıp henüz girilmeyen bir tablo grubu adı ise atılır.
Tek istisna kullanıcının yazdığı bir mantıksal ad hücresidir: yüklenen belge orada en son yazılan mantıksal adı tutuyorsa, kapanış, o hücrenin her kapanışının yaptığı gibi fiziksel adı ondan türetir. Bu türetme diğerleri gibi bir düzenlemedir: paylaşılan bir depo onu gönderir, bir geri alma kaydı oluşturur ve change tetikler.
Seçim ve odaktaki hücre kalır ve klavye, herhangi bir yükleme için setter bölümünde anlatıldığı gibi sayfaya bırakılır. Paylaşılan bir deponun reseed yöntemi de aynı şekilde kapatır.
editor.setInitialValue('json...');
Başlangıçta yükleyin, değişiklikte kaydedin.
editor.setInitialValue(localStorage.getItem('my-diagram') ?? '');
editor.addEventListener('change', () => {
localStorage.setItem('my-diagram', editor.value);
});
Olaylar
Herkese açık yalnızca üç olay vardır: change, changePresetTheme ve changeLocale. changeLocale, 4.0.0 sürümünde eklendi.
Öğe kendi iç bağlantıları için kendi üzerinde dahili @dineug/erd-editor/internal-* olaylarını da gönderir; bunlar API'nin parçası değildir.
change
Düzenleyicide değişiklik olduğunda bir olay tetikler.
Olay 200 ms geciktirilir ve readonly değeri true iken tetiklenmez.
Her belge değişikliğinde tetiklenir – arayüzdeki bir düzenleme, value değerine atama, clear(), setSchema* yöntemlerinin her biri ve 4.0.0 sürümünden itibaren setSchemaJSON() ile Import and Add. setInitialValue onu tetiklemez ve 5.1.0 sürümünden itibaren paylaşılan bir deponun reseed yöntemi de tetiklemez; ikisinin de kullanıcının yazdığı bir mantıksal ad hücresini kapatırken türettiği fiziksel ad hariç (setInitialValue bölümüne bakın).
4.2.0 sürümünden itibaren buna Sözlük sekmesindeki her düzenleme ve bunların her geri alınması veya yinelenmesi, bir mantıksal adın veya değer alanı bağlantısının değişmesi, Derive Physical Names Again ve Name View kilidi devre dışıyken Ad görünümünün değiştirilmesi de dahildir.
Görselleştirme sekmesinin Akış modunda yapılan hiçbir şey – yakınlaştırma, kaydırma, kartları taşıma, Tidy Up, satır görünümü, görünümü bir karttan daraltma ya da 4.2.0 sürümünden itibaren Previous table ve Next table veya geri alma ve yineleme tuşlarıyla adım adım gezinme – onu tetiklemez, çünkü bunların hiçbiri bir belge değişikliği değildir. Akış modunun Name View listesi bunun istisnasıdır: Orada yapılan bir görünüm değişikliği, ERD sekmesindeki gibi, Name View kilidi devre dışıyken onu tetikler.
4.0.0 sürümünden itibaren kilitli bir ayardaki değişiklik de onu tetiklemez, çünkü bu değişiklik yalnızca ekranı değiştirir, value değerini asla değiştirmez: Viewport kilitliyken ERD tuvalinin kaydırılması veya yakınlaştırılması, Canvas Type kilitliyken sekme değiştirme, kendi kilidi etkinken Kod oluşturucu dilinin, tablo adı biçiminin, sütun adı biçiminin veya tırnak türünün değiştirilmesi ve 4.2.0 sürümünden itibaren Name View kilitliyken Ad görünümünün değiştirilmesi. Yalnızca bu değişiklikler dışarıda kalır, bu nedenle belgeyi de düzenleyen bir paket onu yine tetikler. Bir ayarı kilitlemek veya kilidini açmak onu tetikler.
Yeni bir belgede ve 4.0.0 sürümünden önce kaydedilmiş her dosyada tüm kilitler etkindir, 4.2.0 sürümünden önce kaydedilmiş her dosyada da 4.2.0 sürümlü bir düzenleyici orada devre dışı bırakmadıkça Name View kilidi etkindir, bu nedenle varsayılan olarak kaydırma, yakınlaştırma, sekme değiştirme ve Ad görünümünü değiştirme hiçbir olay tetiklemez. Buna ERD sekmesinden tablolara odaklanma, Akış modundan ERD sekmesine geri götüren dış bağlantı kart düğmesi, bir Gezgin satırına veya bir arama eşleşmesine gitme, başka bir sekmeden Gezgini açma veya bir Hızlı arama sonucuna gitme ve 4.2.0 sürümünden itibaren Sözlük sekmesindeki Checks sayfasının bir satırından bir tabloya veya sütuna gitme de dahildir. Bunların her biri, yalnızca onu kapsayan kilit devre dışıyken tek bir change tetikler: sekme değişikliği için Canvas Type, bir kart düğmesinin, bir Hızlı arama sonucunun, bir Gezgin satırının, bir arama eşleşmesinin veya bir Checks satırının da yaptığı kaydırma için Viewport. 4.1.0 sürümünden itibaren bu kaydırmaların her biri tek bir kurala, Atlamanın varış noktası kuralına uyar, böylece bir Hızlı arama tablo sonucu artık her seferinde kaydırma yapmaz ve kuralın görünümü yerinde bıraktığı bir atlama, olay tetikleyecek bir kaydırma yapmaz. Gezgini açmak, kapatmak veya yeniden boyutlandırmak, tuvalin başlangıç noktasını oynatmadan tuvali daraltır veya genişletir ve o da hiçbir olay tetiklemez. 4.0.0 sürümünden önce kaydırma, yakınlaştırma ve sekme değiştirme, editor.value aynı çıksa bile onu her zaman tetikliyordu.
Hiçbir şeyi değiştirmeyen yazma işlemlerini atlamak için editor.value değerini yüklediğiniz dosyayla değil, en son sakladığınız değerle karşılaştırın: Önceki bir sürümün yazdığı bir dosya, bir v2 dosyası veya elle düzenlenmiş bir dosya yüklenir yüklenmez value içinde farklı çıkabilir, çünkü value onu depolama biçiminde yazar. Viewport kilidi devre dışı olan ve başlangıç noktasında bu ekranda diyagramın hiçbir kısmı çizilmeyen bir dosya da öyle: Yükleme görünümü diyagramın üzerine taşır ve value görünümün vardığı yeri yazar. 4.0.0 sürümünden itibaren ölçülen genişlikler artık buna neden olmaz, çünkü value hiçbirini tutmaz. 4.2.0 sürümünden itibaren 4.0.0 veya 4.1.0 sürümünün kaydettiği bir dosya da farklı çıkabilir, çünkü value artık onun boş metin alanlarını, listelerini ve koleksiyonlarını dışarıda bırakır, bu nedenle böyle bir dosya bir sonraki kaydedilişinde bir kez yeniden yazılır. Dosya yazan bir ana uygulama bunun yerine bir replikasyon deposunun changed değeriyle bir düzenlemeyi görünüm değişikliğinden ayırt edebilir. on@change bölümüne bakın.
Olay hiçbir detail taşımaz, kabarcıklanmaz ve gölge DOM sınırını geçmez, bu nedenle doğrudan öğenin kendisini dinleyin ve işleyicide editor.value değerini okuyun.
editor.addEventListener('change', event => {
const data = event.target.value;
});
changePresetTheme
Hazır tema yerleşik tema oluşturucudan veya 4.0.0 sürümünden itibaren Hızlı aramadaki Theme komutundan değiştirildiğinde tetiklenir. Zaten geçerli olan seçeneğin seçilmesi dahil her seçim onu tetikler.
setPresetTheme veya setSystemAppearance yöntemini kendiniz çağırmak ya da systemDarkMode ayarını açıp kapatmak onu tetiklemez.
event.detail, istenen kısmi değer değil, seçimden sonraki eksiksiz ThemeOptions nesnesidir – { appearance, grayColor, accentColor }. 4.0.0 sürümünden itibaren System seçiliyken appearance değeri gösterilen açık veya koyu görünüş değil, 'system' olur, bu nedenle onu olduğu gibi saklayın ve setPresetTheme yöntemine geri verin.
editor.addEventListener('changePresetTheme', event => {
const themeOptions = event.detail;
});
changeLocale
4.0.0 sürümünden itibaren, düzenleyicide görüntüleme dili seçicisinden veya Hızlı aramadaki Display Language komutundan – ikisini de enableLocalePicker açar – bir dil seçildiğinde tetiklenir.
Dil uygulandıktan sonra, zaten geçerli olan seçeneğin seçilmesi dahil her seçimde tetiklenir. setLocale ve setSystemLocale onu asla tetiklemez, tarayıcının dillerindeki bir değişiklik de tetiklemez. Dil değişikliği change olayını tetiklemez.
event.detail, bir LocaleOption olan { locale } nesnesidir: System seçildiyse 'system', aksi hâlde dilin kodu. Öğe seçimi hatırlamaz, bu nedenle onu saklayın ve bir sonraki yüklemede setLocale yöntemine verin.
change gibi bu olay da kabarcıklanmaz, bu nedenle doğrudan öğenin kendisini dinleyin.
editor.addEventListener('changeLocale', event => {
const { locale } = event.detail; // 'system' | 'ko-KR' | ...
});
focus
Düzenleyiciye odaklanır.
editor.focus();
blur
Odağı düzenleyiciden kaldırır.
editor.blur();
clear
Her tabloyu, sütunu, ilişkiyi, dizini ve notu, 4.0.0 sürümünden itibaren her tablo grubunu ve 4.2.0 sürümünden itibaren Sözlük sekmesinin sözcüklerini, terimlerini ve değer alanlarını kaldırarak belgeyi boşaltır, her sayfanın kendi geri alma geçmişini de boşaltır.
Veritabanı, görünüm konumu, yakınlaştırma düzeyi, tablo görünüm seçenekleri, tuttuğu değerle birlikte her kilit ve Şema SQL sekmesinin Before tables ve After tables betikleri dahil her ayar korunur, böylece temizlenen bir dosya kaydettiklerini kaydetmeye devam eder. Bunun yerine yeni bir belge başlatmak için value değerine '' atayın veya setInitialValue('') çağırın.
Geçmiş listesine kaydedilir, bu nedenle geri alınabilir ve change olayını tetikler. Bir geri alma, belgeyi sözcükleri, terimleri ve değer alanları dahil, her kilitli ayar kilitli değerinde olacak şekilde düzenleyicinin tuttuğu hâliyle geri getirir. readonly ayarlıyken yok sayılır.
5.1.0 sürümünden itibaren çizilmekte olan bir ilişkiyi, value setter bölümünde anlatıldığı gibi bitirir; yinelemesi de bitirir, geri alması ise bitirmez.
Eskisi gibi, açık bırakılmış bir not, tablo grubu adı veya hücre düzenleyicisi, boşaltılan belge düzenlenecek hiçbir şey tutmadığından kapanır. 5.1.0 sürümünden itibaren kapatılan düzenleyici, bir yüklemeden sonra olduğu gibi klavyeyi sayfaya bırakır.
editor.clear();
destroy
Düzenleyici örneğini bir daha kullanılamayacak şekilde tamamen yok eder.
Düzenleyicinin dinleyicilerini ve aboneliklerini serbest bırakır ve getSharedStore yönteminin döndürdüğü her paylaşılan depoyu yok eder.
Paylaşılan bir deponun hâlâ beklettiği bir akış paketi de onunla birlikte kaybolur; göndermek için önce o deponun flushStreamBuffers yöntemini çağırın.
editor.destroy();
setKeyBindingMap
Klavye kısayollarını yeniden tanımlar.
edit, stop, undo, redo, zoomIn, zoomOut ve zoomReset sabittir ve yeniden tanımlanamaz.
Yalnızca aşağıdaki yirmi bir ad yazılır; sabit adlar dahil nesnedeki diğer her şey yok sayılır.
3.10.0 sürümünden itibaren search yeniden tanımlanabilir ve findReplace bu sürümde eklendi. Daha önce search sabitti. removeSelection, 4.0.0 sürümünde eklendi. addTableGroup ve groupSelectedTables, 4.1.0 sürümünde eklendi.
Bir bağlama değeri ShortcutOption[] olmalıdır. Yalın bir dize yok sayılır, bu nedenle { addTable: 'Alt+KeyN' } yerine { addTable: [{ shortcut: 'Alt+KeyN' }] } yazın.
Boş bir dizi kabul edilir ve hiçbir şey bağlamaz: setKeyBindingMap({ findReplace: [] }), Ctrl + F (Windows/Linux) veya ⌘ + F (Mac) tuşlarını sayfaya bırakır, { search: [] } de Ctrl + K (Windows/Linux) veya ⌘ + K (Mac) için aynısını yapar. Araç çubuğundaki Search düğmesi Hızlı aramayı yine açar, araç çubuğundaki Explorer düğmesi Gezgini yine açıp kapatır, Hızlı aramadaki ve tuvalin bağlam menüsündeki Toggle Explorer da Gezginin aramasını yine açar ya da Gezgini kapatır. Bunların hiçbiri boş bırakılan bir ad için kısayol göstermez. { removeSelection: [] }, Delete ve Backspace tuşlarını sayfaya bırakır ve tablo, not ve tablo grubu menülerindeki silme satırları (Delete, Delete selected, Delete column, Delete columns) bu durumda kısayol göstermez.
4.1.0 sürümünden itibaren { addTableGroup: [] }, Alt + G (Windows/Linux) veya ⌥ + G (Mac) tuşlarını, { groupSelectedTables: [] } ise T, ardından G tuşlarını sayfaya bırakır. Tuval araç çubuğundaki, tuvalin bağlam menüsündeki ve Hızlı aramadaki New Table Group, tablo menüsündeki Group selected tables ve Hızlı aramadaki Group Selected Tables kısayol gösterilmeden çalışmaya devam eder. Tuval araç çubuğundaki New Table, New Memo ve New Table Group düğmelerinin araç ipuçları addTable, addMemo ve addTableGroup bağlamalarının ilk tuş kombinasyonunu, boş bırakılan bir bağlama için ise yalnızca düğmenin adını gösterir.
4.2.0 sürümünden itibaren addColumn ve removeColumn, aşağıda anlatıldığı gibi Sözlük sekmesinin ızgarasına satır tuş kombinasyonlarını da verir, bu nedenle ikisinden birini yeniden bağlamak bu tuş kombinasyonlarını da onunla birlikte taşır. { addColumn: [] } ızgaraya satır eklemek için hiçbir tuş kombinasyonu bırakmaz ve ızgara menüsünün iki ekleme satırı bu durumda kısayol göstermez; { removeColumn: [] } satırları silmek için hiçbir tuş kombinasyonu bırakmaz ve menünün silme satırı ile Delete Rows araç ipucu bu durumda kısayol göstermez.
Çağrı kısmi bir birleştirmedir: Dışarıda bıraktığınız adlar varsayılanlarını korur ve iki kez çağırmak önceki değişiklikleri korur. Geçerli bağlamalar için bir getter yoktur: createKeyBindingMap, setKeyBindingMap yönteminin değiştirdiklerini değil, varsayılanları döndürür.
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 ve 4.1.0 sürümünden itibaren groupSelectedTables metin imlecine yol verir: Odak bir giriş alanı, textarea veya contenteditable öğesi içindeyken tuvale ulaşmak yerine $mod + A metni seçer, Space bir boşluk yazar, Delete ve Backspace metni siler, T, ardından G ise iki harfi yazar. Bu basışların hiçbiri engellenmez. Bunları hangi tuşlara yeniden bağlarsanız bağlayın, aynı şekilde davranır.
4.0.0 sürümünden itibaren removeSelection (Delete veya Backspace) ERD sekmesinde seçili öğeleri sormadan, tek bir geri alma adımı olarak kaldırır. Odaktaki tablo seçili tek öğeyse, sütunlarından biri veya birkaçı seçiliyse ve yakınlaştırma düzeyi satırlarını çiziyorsa o sütunları kaldırır; aksi hâlde seçili her tabloyu, notu ve tablo grubunu kaldırır, bir grubun tabloları ise korunur. Tablo ve not silme bölümüne bakın.
Basılı tutulan bir tuş yalnızca bir kez kaldırır ve bir hücre düzenleyicisi, not düzenleyicisi veya tablo grubu ad alanı açıkken hiçbir şey kaldırılmaz. Bir metin alanı ve bağlamaları geçirmeyen paneller ve sekmeler (createKeyBindingMap bölümüne bakın) dışında, düzenleyici odaktayken basış her sekmede, odaktaki bir araç çubuğu düğmesinde de ve hiçbir şey kaldırmadığı salt okunur bir düzenleyicide de engellenir.
4.1.0 sürümünden itibaren addTableGroup (Alt+KeyG), tuval araç çubuğundaki New Table Group düğmesinin yaptığı gibi ERD sekmesinde New Table Group çizimini hazırlar. Tuval üzerinde farenin ana düğmesine bir sonraki basış grubu çizer, tuşa yeniden basmak ise çizim hazırlığını iptal eder. groupSelectedTables (KeyT KeyG, T, ardından G), bir tablonun bağlam menüsündeki Group selected tables öğesinin yaptığı gibi seçili tabloları yeni bir gruba koyar ve grubun ad alanını açar. Hiçbir tablo seçili değilse hiçbir şey eklemez; seçili bir not veya tablo grubu sayılmaz. Grup çizme ve Seçili tabloları gruplama bölümlerine bakın.
İkisi de yalnızca menülerin grup sunduğu yerde çalışır: readonly ayarlıyken, Table Groups görünüm seçeneği grupları gizlerken veya bir hücre düzenleyicisi, not düzenleyicisi ya da tablo grubu ad alanı açıkken çalışmaz. Diğer tuval bağlamaları gibi yalnızca ERD sekmesinde çalışır ve Hızlı arama, Tablo özellikleri, Fark görüntüleyici, Zaman yolculuğu, Otomatik düzenin önizlemesi, Export image veya Map Columns açıkken çalışmaz. Hiçbir şey yapmadıkları yerde, groupSelectedTables metin imlecine yol vermedikçe basış yine engellenir. focusView ve zenMode gibi addTableGroup da durdurulur, bu nedenle sayfanın kabarcıklanma aşamasındaki keydown dinleyicisi onu asla duymaz.
4.2.0 sürümünden itibaren Sözlük sekmesinde addColumn bağlamasının tek basışlık her tuş kombinasyonu, seçimin kapsadığı kadar satırı seçimin altına ekler, aynı tuş kombinasyonu Shift de basılı tutularak kullanıldığında bu satırları seçimin üstüne ekler ve removeColumn bağlamasının tek basışlık her tuş kombinasyonu seçimin kapsadığı satırları siler: Varsayılanlarla bunlar Alt+Enter, Alt+Shift+Enter ve Alt+Backspace veya Alt+Delete olur. Bunlar, hiçbir hücre düzenlemesi açık değilken Domains, Words ve Terms sayfalarının ızgarasında çalışır. addColumn bağlamasının zaten Shift içeren bir tuş kombinasyonu üste ekleme için bir tuş kombinasyonu vermez, iki addan birine bağlanan bir tuş dizisi ise ızgaraya hiçbir şey vermez.
Bu tür her basış, seçeneğinin belirttiği gibi engellenir ve her zaman durdurulur, bu nedenle ERD sekmesinde hiçbir sütun eklemez veya kaldırmaz. Checks sayfasında ve salt okunur bir düzenleyicide hiçbir şey yapmaz, ancak yine engellenir ve durdurulur. Açık bir hücre düzenlemesinde veya sekmenin arama alanında tuş kombinasyonları metne bırakılır: Orada durdurulur ama engellenmez, böylece alan onlara başka her yerde olduğu gibi tepki verir (Mac'te ⌥ + Backspace bir sözcük siler). dictionaryRowChords bunları listeler.
3.10.0 sürümünden itibaren findReplace ($mod+KeyF) Bul ve değiştir panelini açar. 4.1.0 sürümünden itibaren onu barındıran Gezgini açıp kapatır ve Kısayollar sekmesi onu Toggle Explorer olarak listeler.
Araç çubuğundaki Explorer düğmesi basılı göründüğü sürece (Gezgin ERD sekmesinde açıkken ve Zen modunda gizli değilken), Hızlı arama, Tablo özellikleri, tema oluşturucu, görüntüleme dili seçicisi, Export image iletişim kutusu veya Map Columns açık değilse Gezgini kapatır. Aksi hâlde bunlardan hangisi açıksa onu kapatır, başka herhangi bir sekmeden ERD sekmesine geçer ve Gezgini, metin imleci Find alanında ve arama metni seçili olarak açar. Gezgini tuvalin yanında gösteremeyecek kadar dar bir düzenleyici onu açık tutar ama kenara çeker ve Widen the window to show the Explorer bildirimini gösterir. 4.1.0 sürümünden önce kayan Bul ve değiştir panelini açıyor ya da klavyeyi yeniden onun alanına veriyordu ve paneli hiçbir zaman kapatmıyordu.
Metin imlecine yol vermez: Düzenleyici odaktayken her sekmede, tuvalden veya düzenleyicinin içindeki bir giriş alanından alınır. Basış engellenir, böylece tarayıcı bulma çubuğunu açmaz; ayrıca durdurulur, böylece sayfadaki kabarcıklanma aşamasındaki hiçbir keydown dinleyicisi onu duymaz. Bir hücre veya not düzenleyicisi, 4.0.0 sürümünden itibaren bir tablo grubu ad alanı ya da 4.2.0 sürümünden itibaren Sözlük sekmesinin ızgarasında bir hücre düzenlemesi açıkken yine engellenir ve durdurulur, ancak hiçbir şey yapmaz. Bu son durumda search de hiçbir şey yapmaz, böylece o ana kadar yazılan metin korunur.
Hangi sekmede olursa olsun Fark görüntüleyici, Zaman yolculuğu veya Otomatik düzenin önizlemesi açıkken ya da bir IME'de birleştirme hâlâ sürerken ne engellenir ne de durdurulur, böylece onu tarayıcının veya ana uygulamanın kendi bulma özelliği alır. Gezginin içinde, birleştirme sürerken yapılan bir basış orada durdurulur ama engellenmez. findReplace bağlamasını hangi tuşa yeniden bağlarsanız bağlayın, aynı şekilde davranır.
focusView yalnızca ERD sekmesinde çalışır. En az bir tablo seçiliyken Görselleştirme sekmesini Akış modunda, o tablolara ve onlardan bir ilişki uzaklıktaki her tabloya daraltılmış olarak açar. Seçili bir not veya tablo grubu sayılmaz ve hiçbir tablo seçili değilse hiçbir şey yapmaz. Tablolara odaklanma bölümüne bakın.
undo ve redo sekmeye göre çalışır. ERD sekmesinde belgenin geçmişini geri alır ve yineler. 4.2.0 sürümünden itibaren Sözlük sekmesinde gösterilen sayfanın kendi geçmişini geri alır ve yineler, Checks sayfasında ise hiçbir şey yapmaz. Sözlük sayfaları bölümüne bakın. Görselleştirme sekmesinin Akış modunda, belgenin geçmişine dokunmadan Previous table ve Next table düğmelerinin yaptığı gibi bir adım geri ve ileri gider. Diğer sekmelerde ve Graf modunda hiçbir şeyi geri almaz.
ERD sekmesinde stop (Escape), açık bir hücre veya not düzenleyicisini ya da çizilmekte olan bir ilişkiyi sonlandırır ve seçimi olduğu gibi bırakır. 4.0.0 sürümünden itibaren bir tablo grubu ad alanını hiçbir ad yazmadan ve bir New Table Group çizimini de sonlandırır. Düzenleyici bu basışta preventDefault() çağırır.
Bunların hiçbiri açık değilken Escape seçimi ve odaktaki hücreyi temizler ve engellenmez. Bu nedenle bir düzenlemeden çıkıp seçimi temizlemek iki basış gerektirir.
4.2.0 sürümünden itibaren bir mantıksal ad hücresinin terim listesi görünürken (Terim adlarını tamamlama bölümüne bakın) ilk Escape yalnızca listeyi kapatır ve düzenleyiciyi açık bırakır. Bu basış hücrede engellenir ve durdurulur, bu nedenle onu ne stop ne de sayfanın kabarcıklanma aşamasındaki keydown dinleyicisi duyar.
Gezgin, karşılama ekranının Import biçimleri, bir mantıksal ad hücresinin terim listesi, Sözlük sekmesi ve aşağıdaki seçiciler ile iletişim kutuları hariç, düzenleyici Escape tuşunun yayılmasını asla durdurmaz, bu nedenle örneğin kendi iletişim kutusunu kapatmak için bu tuşu kendisi dinleyen bir sayfa iki basışı da duyar ve defaultPrevented değeri true olanı atlayabilir.
Hızlı arama, Tablo özellikleri, Fark görüntüleyici, Otomatik düzenin önizlemesi veya Zaman yolculuğu açıkken Escape bunun yerine onu kapatır ve seçimi olduğu gibi bırakır. Bu basış da engellenmez.
4.0.0 sürümünden itibaren açık bir Export image veya Map Columns iletişim kutusu da Escape tuşunu alır, kendini kapatır ve seçimi olduğu gibi bırakır. Her biri açıldığında klavyeyi alır ve bu Escape hem engellenir hem durdurulur.
4.1.0 sürümünden itibaren odak Gezginin içinde, ağacında, alanlarında veya düğmelerindeyken basılan Escape, klavyeyi tuvale geri verir, Gezgini açık, seçimi de olduğu gibi bırakır. Düzenleyici onun üzerinde hem preventDefault() hem stopPropagation() çağırır, bu nedenle sayfanın kabarcıklanma aşamasındaki keydown dinleyicisine asla ulaşmaz.
Tuvalde basılan Escape Gezgini asla kapatmaz. 4.1.0 sürümünden önce Bul ve değiştir panelinin içindeki bir Escape paneli kapatıyordu, tuvaldeki bir Escape ise seçimi temizleyen aynı basışta onu kapatıyordu.
4.0.0 sürümünden itibaren görüntüleme dili seçicisi ve renk seçici Escape ile kapanır: İçlerinde basıldığında engellenir ve durdurulur, tuvalde ise seçimi temizleyen aynı basışta onları kapatır ve ne engellenir ne de durdurulur.
Bir IME'de birleştirme hâlâ sürerken basılan Escape birleştirmeye aittir. Açık bir düzenleyiciyi olduğu gibi bırakır ve engellenmez, bu nedenle bir sayfa da isComposing değeri true ya da keyCode değeri 229 olan bir basışı atlayabilir. Gezginin içinde böyle bir basış, orada birleştirme sürerken basılan her tuş gibi ayrıca durdurulur ve klavye alanda kalır.
3.9.2 sürümünden önce tek bir Escape hem bir düzenlemeyi veya çizimi sonlandırıyor hem de seçimi temizliyordu ve düzenleyici onu hiçbir zaman engellemiyordu.
createKeyBindingMap
3.9.2 sürümünden itibaren paket createKeyBindingMap() işlevini ve onunla birlikte KeyBindingMap, KeyBindingName ve ShortcutOption türlerini dışa aktarır.
Varsayılan tuş bağlamalarını, sabit olanlar dahil 28 adın tamamını, her çağrıda yeni bir nesne olarak döndürür, bu nedenle döndürdüğü nesneyi değiştirmek başka hiçbir şeyi değiştirmez.
Her düzenleyici bununla başlar ve bir setKeyBindingMap çağrısının etkisi bunda görünmez.
Bu dördü arasında çalışma zamanında dışa aktarılan yalnızca createKeyBindingMap işlevidir; diğer üçü türdür. 4.2.0 sürümünden itibaren onun yanında dictionaryRowChords da dışa aktarılır.
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', ...
Her shortcut, tuşunu KeyboardEvent.code ile adlandıran, tinykeys söz dizimindeki bir tuş kombinasyonudur. Burada $mod, macOS'ta ⌘, diğer sistemlerde Control olur.
4.0.0 sürümünden itibaren düzenleyici bu tuş kombinasyonlarını tinykeys aracılığıyla değil, aynı söz dizimiyle kendisi okur. Bir tuş code değeriyle veya büyük/küçük harf ayrımı yapılmadan key değeriyle eşleşir ve bir basış yalnızca tam olarak belirttiği değiştirici tuşlar basılı tutulurken eşleşir. AltGraph, Windows'ta Control ve Alt, macOS'ta ise Alt sayılır. Boşlukla ayrılan basışlar bir tuş dizisi oluşturur ve bu dizi bir saniye boyunca hiçbir tuşa basılmazsa baştan başlar.
4.1.0 sürümünden itibaren varsayılanlardan biri bir tuş dizisidir: groupSelectedTables bağlaması KeyT KeyG, yani T, ardından G olur. Bir tuş dizisi onu tamamlayan basışta çalışır ve dizinin preventDefault ile stopPropagation ayarlarını yalnızca o basış alır, bu nedenle varsayılanlarla T sayfaya ulaşır ve yalnızca G engellenir. Menüler, Hızlı arama ve Kısayollar sekmesi bir tuş dizisini her basış için bir tuş olarak gösterir.
Sabit adlar Enter (edit), Escape (stop), $mod+KeyZ (undo), $mod+Shift+KeyZ (redo), $mod+Equal (zoomIn), $mod+Minus (zoomOut) ve $mod+Digit0 (zoomReset) tuşlarına bağlıdır. edit ve stop hiçbir bayrak taşımaz; diğer beşi preventDefault ve stopPropagation taşır. Geri kalanlar, search ve findReplace dahil, yukarıdaki varsayılanlardır.
Düzenleyici bunları kendi öğesi üzerinde dinler, bu nedenle genel kısayol tuşları veya yakalama aşamasındaki bir keydown dinleyicisiyle tuşları düzenleyiciden önce alan bir ana uygulama, düzenleyici odaktayken bu tuşları geçirmelidir.
Geçirilecek tuşların listesini, varsayılanların yerine setKeyBindingMap yöntemine verdiğiniz bağlamaları koyarak createKeyBindingMap() sonucundan oluşturun.
3.10.0 sürümünden itibaren bu liste, tarayıcının kendi bulma tuş kombinasyonu olan $mod+KeyF kombinasyonunu içerir. Bu tuş kombinasyonunda kendi bulma özelliğini korumak isteyen bir ana uygulama setKeyBindingMap({ findReplace: [] }) çağırır.
4.0.0 sürümünden itibaren tek başına Delete ve Backspace tuşlarını da içerir. Bu tuşları korumak isteyen bir ana uygulama setKeyBindingMap({ removeSelection: [] }) çağırır.
4.1.0 sürümünden itibaren Alt+KeyG kombinasyonunu ve tek bir dize olarak gelen KeyT KeyG tuş dizisini de içerir: Bu dizeyi boşluktan bölün ve tek başına T ve G dahil her basışı geçirin, çünkü bir basışı eksik olan tuş dizisi asla tamamlanmaz. Bu tuşları korumak isteyen bir ana uygulama setKeyBindingMap({ addTableGroup: [] }) veya setKeyBindingMap({ groupSelectedTables: [] }) çağırır.
4.2.0 sürümünden itibaren listeye, dictionaryRowChords işlevinin aynı nesne için döndürdüğü, aralarında Alt+Shift+Enter da bulunan tuş kombinasyonlarını ekleyin. Bu tuşları korumak isteyen bir ana uygulama setKeyBindingMap({ addColumn: [] }) veya setKeyBindingMap({ removeColumn: [] }) çağırır; bu, onları ERD sekmesindeki sütun ekleme ve kaldırma işlemlerinden de alır.
Odak Gezginin içinde, ağacında, Find ve Replace alanlarında veya düğmelerindeyken findReplace, search, undo, redo, zoomIn, zoomOut ve zoomReset düzenleyiciye geçer, böylece findReplace orada da tuvaldeki gibi çalışır. Geçerli ayarıyla diğer her bağlama Gezginde durur, bir tuş dizisi ise son basışında (varsayılanlarla tek başına bir G) durur. Ok tuşları, Tab, Enter, Space, Home, End ve bir IME'de birleştirme hâlâ sürerken basılan her tuş da öyle. Klavyeyi tuvale geri veren Escape dışında bunlar engellenmeden durdurulur, bu sayede Gezginin alanlarında, düğmelerinde ve ağacında sıradan tuşlar gibi davranır, ne tuvale ne de sayfanın kabarcıklanma aşamasındaki keydown dinleyicisine ulaşır: Orada Alt + N tablo eklemez, Delete de hiçbir şey kaldırmaz. Ağaçta satırlar arasında gezinen, bir satırı daraltan veya bir satıra giden tuşlar ve Find ya da Replace alanında eşleşmeler arasında gezinen veya değiştirme yapan Enter ayrıca engellenir.
Bir ana uygulamanın kaydetme veya komut paleti tuş kombinasyonu gibi diğer her tuş her zamanki gibi sayfaya geçer. Gezgindeki tuşlar bölümüne bakın. 4.1.0 sürümünden önce kayan Bul ve değiştir paneli, Home, End, bir tuş dizisinin son basışı ve handTool başka bir tuşa bağlıyken Space dışında tuşları aynı şekilde tutuyordu.
4.0.0 sürümünden itibaren görüntüleme dili seçicisi de tuşları aynı şekilde tutar: Aynı yedi bağlama geçer, diğer her bağlama (4.1.0 sürümünden itibaren bir tuş dizisi son basışında), ok tuşları ve Tab ise bir IME'de birleştirme hâlâ sürerken basılan her tuş gibi orada engellenmeden durdurulur. Satırlarından birindeyken ↑, ↓, Home, End, Enter ve Space satırlar arasında gezinir veya birini seçer ve ayrıca engellenir.
4.2.0 sürümünden itibaren Sözlük sekmesi de tuşları tutar ve düzenleyiciye yalnızca search, findReplace, undo ve redo geçer. undo ve redo gösterilen sayfanın kendi geçmişini çalıştırır, bir hücre düzenlemesi açıkken veya odak sekmenin arama alanındayken ise metne bırakılır: Orada durdurulur ama engellenmez. search ve findReplace, yukarıda anlatıldığı gibi, bir hücre düzenlemesi açıkken hiçbir şey yapmaz. Satır tuş kombinasyonları, yukarıda addColumn ve removeColumn altında anlatıldığı gibi ızgarada çalışır.
Geçerli ayarıyla diğer her bağlama sekmede durur, bir tuş dizisi ise son basışında durur. Ok tuşları, Tab, Enter, Space, Home, End ve bir IME'de birleştirme hâlâ sürerken basılan her tuş da öyle. Hiçbiri tuvale veya sayfanın kabarcıklanma aşamasındaki keydown dinleyicisine ulaşmaz: Orada Alt + N tablo eklemez, Delete de diyagramdan hiçbir şey kaldırmaz. Sekmedeki kopyalama, kesme ve yapıştırma olayları da orada durur, böylece diyagram onları asla kendi olayları olarak okumaz. Diğer her tuş her zamanki gibi sayfaya geçer.
dictionaryRowChords
4.2.0 sürümünden itibaren paket dictionaryRowChords() işlevini dışa aktarır. Bu işlev, verdiğiniz tuş bağlama nesnesine göre Sözlük sekmesinin ızgarasının satır eklediği veya sildiği her tuş kombinasyonunu, her çağrıda yeni bir ShortcutOption[] olarak döndürür.
Sırasıyla bunlar şunlardır: addColumn bağlamasının seçimin altına satır ekleyen tek basışlık tuş kombinasyonları; bunların her birinin Shift de basılı tutulan ve seçimin üstüne satır ekleyen hâli, zaten Shift içeren bir tuş kombinasyonu için ise hiçbiri; son olarak da removeColumn bağlamasının satır silen tek basışlık tuş kombinasyonları. Her biri geldiği bağlamanın preventDefault ve stopPropagation ayarlarını korur, tuş dizileri ise dışarıda bırakılır. Satır ekleme ve silme bölümüne bakın.
Satırları üste ekleyen tuş kombinasyonu, varsayılanlarla Alt+Shift+Enter, hiçbir bağlamada yer almaz, bu nedenle değiştirici tuşları tam olarak eşleştiren ve geçireceği tuşların listesini yalnızca createKeyBindingMap sonucundan oluşturan bir ana uygulama onu asla geçirmez. Obsidian eklentisinin yaptığı gibi iki listeyi de geçirin.
Yalnızca kendisine verilen nesneyi okur, öğenin bağlamalarını okumaz, bu nedenle ona tuş listenizi oluşturduğunuz nesneyi verin.
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 tuşunu ortama göre değiştirir.
- Mac: $mod = Meta (⌘)
- Windows/Linux: $mod = Control
Kısayol tablosu
Klavye olayının key, code özelliklerini kullanır.
Mutlak konumlar için code, girilen değerler için key kullanın.
| Windows | macOS | key | code |
|---|---|---|---|
| Yok | Command / ⌘ | Meta | MetaLeft / MetaRight |
Alt | Option / ⌥ | Alt | AltLeft / AltRight |
Control | Control / ^ | Control | ControlLeft / ControlRight |
Shift | Shift | Shift | ShiftLeft / ShiftRight |
Space | Space | Yok | Space |
Enter | Return | Enter | Enter |
Esc | Esc | Escape | Escape |
Backspace | Delete / ⌫ | Backspace | Backspace |
Delete | fn + Delete | Delete | Delete |
1, 2 vb. | 1, 2 vb. | 1, 2 vb. | Digit1, Digit2 vb. |
a, b vb. | a, b vb. | a, b vb. | KeyA, KeyB vb. |
- | - | - | Minus |
= | = | = | Equal |
+ | + | + | Equal |
Tema
setPresetTheme
Hazır bir tema ayarlar.
Varsayılanlar appearance: 'dark', grayColor: 'slate' ve accentColor: 'indigo' değerleridir.
Her alan ayrı ayrı uygulanır, bu nedenle kısmi bir çağrı diğer ikisini olduğu gibi bırakır. Aşağıdaki adlardan biri olmayan bir değer yok sayılır ve çağrı asla hata fırlatmaz.
4.0.0 sürümünden itibaren appearance, tema oluşturucudaki System seçeneğine karşılık gelen 'system' değerini de alır. Bu değer, işletim sisteminin bildirdiği açık veya koyu görünüşü ya da setSystemAppearance yönteminin belirttiğini gösterir ve bu değiştiğinde geçiş yapar.
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 sürümünden itibaren, bir IDE teması gibi kendi açık ve koyu görünüşü olan bir ana uygulama için 'system' görünüşünün göstereceği açık veya koyu görünüşü belirtir. Biri belirtilmişken işletim sisteminin değişiklikleri yok sayılır.
null ya da 'dark' veya 'light' dışındaki herhangi bir değer, yeniden işletim sistemini izlemeye döner.
Görünüş 'light' veya 'dark' iken ekranda hiçbir şeyi değiştirmez, ancak değer saklanır ve görünüş 'system' olur olmaz uygulanır. Aksi hâlde hemen uygulanır. Hiçbir olay tetiklemez ve changePresetTheme olayı 'system' bildirmeye devam eder.
VS Code, JetBrains ve Obsidian ana uygulamaları bunu kendi açık veya koyu görünüşleriyle çağırır ve bu her değiştiğinde yeniden çağırır.
editor.setPresetTheme({ appearance: 'system' });
editor.setSystemAppearance('light'); // null follows the OS again
setTheme
Temanın özelleştirilmesini sağlar.
Her çağrı özel katmanın tamamını değiştirir, bu nedenle mevcut bir geçersiz kılmanın üzerine tek bir token değiştirmek için nesnenin tamamını yeniden verin, hazır temaya geri dönmek için {} verin.
Yalnızca aşağıdaki token adları, dize değerleriyle birlikte korunur; diğer her şey hata vermeden yok sayılır.
Katman hazır temanın üzerinde durur, bu nedenle sonraki bir setPresetTheme çağrısı geçersiz kılmalarınız korunurken alttaki hazır temayı değiştirir.
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 ve memoShadow, tabloların ve notların ERD tuvaline düşürdüğü gölgenin rengidir. Koyu hazır tema bunları transparent olarak bırakır, bu da setTheme yöntemine none veya boş bir dize vermenin yaptığı gibi hiç gölge düşürmez. Açık hazır tema ise rgba(0, 0, 0, 0.18) kullanır.
4.0.0 sürümünden itibaren dokuz token daha vardır:
tableGroupHeaderBackground,tableGroupBackgroundvetableGroupBorder, kendine ait bir rengi olmayan bir tablo grubunun başlık çubuğunu, gövdesini ve dış çizgisini renklendirir.toastSuccessvetoastError, bir işin nasıl sonuçlandığını bildiren bir bildirimin işaretini renklendirir.findReplaceErrorvemapColumnsError, Bul ve değiştir ile “Sütunları eşle” iletişim kutusunun gösterdiği hataları renklendirir. Bul ve değiştir daha öncediffDeleteForegroundkullanıyordu, bu nedenle onu geçersiz kılmak artık Bul ve değiştir panelinin rengini değiştirmez.schemaSqlWarningBackgroundveschemaSqlWarningForeground, Şema SQL sekmesinin seçeneklerindeki uyarıları renklendirir.
4.1.0 sürümünden itibaren dokuz token daha vardır:
treeBackground,treeRowHover,treeRowCurrent,treeMutedvetreeMatch, Gezgin ile Fark görüntüleyicinin paylaştığı ağacı renklendirir: GezgininFindveReplacealanlarını da dolduran arka planını; işaretçinin altındaki satırı, ağaç odaktayken klavyenin bulunduğu satırı ve Gezginin başlığında ve aramasında işaretçinin altındaki düğmeyi; geçerli arama eşleşmesinin satırını; sayılar, veri türleri ve daraltma okları gibi soluk metni ve bir aramanın bulduğu metnin arkasındaki işareti.explorerBackgroundveexplorerBorder, Gezgin panelini ve çizgilerini renklendirir: tuvalin yanındaki kenarını, aramasının altındaki çizgiyi, alanlarının veSearch Inöğesinin açtığı düğmelerin kenarlıklarını.explorerBorderayrıca Fark görüntüleyici ağacının kenarını,Filter by namealanının altındaki çizgiyi ve bu alanın kenarlığını çizer. Gezginin anahtar simgelerikeyPK,keyFKvekeyPFKrenklerini alır.diffModifyForegroundvediffRenameForeground, Fark görüntüleyicinin ağacında ve iki belgede de değiştirildi ve yeniden adlandırıldı olarak işaretlediklerini renklendirir.diffModifyForegroundayrıca içinde başka ne değişmiş olursa olsun taşınan, yeniden boyutlandırılan, rengi değiştirilen veya grubu değiştirilen bir tablonun, notun ya da tablo grubunun dış çizgisini ve değişen bir yabancı anahtarın bağlantı çizgisini de çizer.
diffInsertForeground ve diffDeleteForeground artık Fark görüntüleyicinin eklendi ve kaldırıldı olarak işaretlediklerini ağacında ve bunları içeren belgede, metinde, dış çizgilerde ve bağlantı çizgilerinde aynı şekilde renklendirir. Fark görüntüleyici artık hücreleri doldurmadığı için diffInsertBackground, diffDeleteBackground, diffCrossBackground ve diffCrossForeground, 4.1.0 sürümünde kaldırıldı. setTheme bunları Theme içinde olmayan diğer her ad gibi yok sayar ve bunların CSS kancaları olan --erd-editor-diff-insert-background, --erd-editor-diff-delete-background, --erd-editor-diff-cross-background ve --erd-editor-diff-cross-foreground artık okunmaz.
4.2.0 sürümünden itibaren on iki token daha vardır:
columnHandleBackgroundvecolumnHandleBorder, bir tablonun sol kenarının hemen dışında, odaktaki sütun satırının yanında çizilen sütun sürükleme tutamacını doldurur ve dış çizgisini çizer, işaretçi tutamacın üzerindeyken bunların yerinicolumnHandleHoverBackgroundvecolumnHandleHoverBorderalır. Tutamacın kavrama işaretiforeground, işaretçinin altındayken iseactiverengini alır.dictionaryErrorForegroundvedictionaryWarningForeground, sözlük denetimlerinin bulduğu hatayı veya uyarıyı renklendirir: ERD tuvalinde denetimlerin sorun bulduğu bir adı (Tuvaldeki işaretler bölümüne bakın),Domains,WordsveTermssayfalarında sorun bulunan bir hücrenin metnini veCheckssayısını.dictionaryErrorBackgroundvedictionaryWarningBackgroundböyle bir hücreyi doldurur.dictionaryErrorForegroundayrıca işaretçinin altındakiDelete Rowsaracını da renklendirir.dictionaryBackground,dictionaryHeaderBackground,dictionaryGridLinevedictionaryHeaderSelect, Sözlük sekmesinin sayfasını renklendirir: sekmenin arama alanını ve bir terimin değer alanı listesini de dolduran hücrelerini; sütun başlıklarını ve satır numaralarını; sekmenin çubuğunu ve alanlarının kenarlıklarını da çizen hücreler arası çizgileri ve satırı veya sütunu seçimle kesişen bir başlığı. Sayfanın geri kalanı ortak token'ları alır: başlık etiketleri içinforeground, hücre metni içinactive, sütun başlıklarını ve satır numaralarını hücrelerden ayıran çizgi içingrayColor7, etkin hücrenin kenarı içinfocus, seçili bir aralığın kenarı ve %20 opaklıktaki dolgusu içinaccentColor9, tamamen seçili bir satırın veya sütunun başlığı içinaccentColor6, salt okunur hücreler içingrayColor3ve kaydırma çubuğu token'ları.#rgbveya#rrggbbolarak yazılmamış biraccentColor9, seçili bir aralığı dolgusuz bırakır.
CSS değişkenleri
Theme içindeki her token'ın, adı --erd-editor- ve kebab-case biçimindeki anahtardan oluşan eşleşen bir CSS kancası vardır: grayColor10 için --erd-editor-gray-color-10, keyPK için --erd-editor-key-pk ve keyPFK için --erd-editor-key-pfk.
Kancalar kalıtım yoluyla düzenleyicinin içine geçer, bu nedenle onları uygulanmasını istediğiniz yerde ayarlayın. :root üzerinde sayfadaki her düzenleyiciye, öğenin kendisi üzerinde ise yalnızca o düzenleyiciye tema uygularlar.
erd-editor {
--erd-editor-canvas-background: #1b1b1f;
}
3.4.0 sürümünden itibaren yanlış yazılmış dargSelect token'ları dragSelect olarak yazılır ve kancaları --erd-editor-darg-select-background ve --erd-editor-darg-select-border adlarından --erd-editor-drag-select-background ve --erd-editor-drag-select-border adlarına değişti. Hâlâ eski adları kullanan bir stil sayfası yok sayılır.
Varsayılan tema değerleri
: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;
}
Görüntüleme dili
4.0.0 sürümünden itibaren düzenleyicinin kendi metni – menüleri, panelleri, iletişim kutuları, Hızlı arama, bildirimleri ve görüntü dışa aktarmaları dahil diyagram üzerine çizdiği unnamed gibi sözcükler – 25 dilde sunulur. Tablo ve sütun adları, SQL, veri türleri ve oluşturulan kod asla çevrilmez. Dil ve tema sayfasına bakın.
setLocale çağrılmadan veya bir dil seçilmeden önce düzenleyici İngilizce gösterir ya da enableLocalePicker açıkken 'system' seçeneğini izler.
Düzenleyici lang ve dir özniteliklerini kapalı gölge kökün içindeki kendi kökünde ayarlar, ana öğede veya sayfada asla ayarlamaz, böylece sağdan sola bir sayfa düzenleyiciyi, sağdan sola yazılan bir dil de sayfayı ters çevirmez. İbranice, Arapça ve Farsça düzenleyicinin arayüzünü sağdan sola yerleştirir, diyagramın kendisi ise asla aynalanmaz. 4.1.0 sürümünden itibaren Gezgin her dilde tuvalin solunda kalır ve bu üç dilde kendi satırları sağdan sola okunur.
Paket LocaleCode (aşağıdaki kodlardan biri) ve LocaleOption türlerini dışa aktarır.
type LocaleOption = LocaleCode | 'system';
| Kod | Görünen ad | Dil |
|---|---|---|
id-ID | Bahasa Indonesia | Endonezce |
de-DE | Deutsch | Almanca |
en | English | İngilizce |
es-ES | Español | İspanyolca |
eu-ES | Euskara | Baskça |
fr-FR | Français | Fransızca |
it-IT | Italiano | İtalyanca |
nl-NL | Nederlands | Felemenkçe |
pl-PL | Polski | Lehçe |
pt-PT | Português | Portekizce |
pt-BR | Português Brasileiro | Brezilya Portekizcesi |
ro-RO | Română | Rumence |
sk-SK | Slovenčina | Slovakça |
sl-SI | Slovenščina | Slovence |
sv-SE | Svenska | İsveççe |
tr-TR | Türkçe | Türkçe |
ru-RU | Русский | Rusça |
uk-UA | Українська | Ukraynaca |
he-IL | עברית | İbranice |
ar-SA | العربية | Arapça |
fa-IR | فارسی | Farsça |
ja-JP | 日本語 | Japonca |
zh-CN | 简体中文 | Basitleştirilmiş Çince |
zh-TW | 繁體中文 | Geleneksel Çince |
ko-KR | 한국어 | Korece |
setLocale
Görüntüleme dilini ayarlar: 'system' ya da yukarıdaki kodlardan biri. Tek başına 'ko', bilinmeyen bir kod veya dize olmayan bir değer gibi başka her şey hata vermeden yok sayılır.
Çağrı dönmeden önce uygulanır, bu nedenle öğe sayfaya eklenmeden önce ayarlanan bir dil ilk karede görünür.
Hiçbir olay tetiklemez – ne changeLocale ne de change – ve value değerine, geri alma geçmişine ya da paylaşılan bir depoya dokunmaz.
enableLocalePicker açık da olsa kapalı da olsa seçim korunur ve setLocale('system') seçici kapalıyken de sistemi izler.
Düzenleyici hiçbir şey saklamaz. Bir okuyucunun seçimini korumak için changeLocale olayını dinleyin ve bir sonraki yüklemede seçimi geri verin.
editor.enableLocalePicker = true;
editor.setLocale(localStorage.getItem('locale') ?? 'system');
editor.addEventListener('changeLocale', event => {
localStorage.setItem('locale', event.detail.locale);
});
setSystemLocale
Kendi görüntüleme dili olan bir ana uygulama için 'system' seçeneğinin karşılık geldiği dili bir BCP 47 etiketi olarak belirtir. VS Code, JetBrains ve Obsidian ana uygulamaları bunu kendi görüntüleme dilleriyle çağırır.
Etiketin baştaki ve sondaki boşlukları kırpılır. null, boş bir dize veya dize olmayan bir değer, tarayıcının navigator.languages değerine geri döner ve düzenleyici bu değeri değiştikçe izler.
Yalnızca geçerli seçenek 'system' iken önemlidir ve hemen uygulanır. Seçicinin System satırı, bu seçeneğin çözümlendiği dili gösterir.
Etiket ya da sırayla tarayıcının dillerinin her biri, büyük/küçük harf ve alt çizgiler dikkate alınmadan, dil alt etiketine göre düzenleyicide bulunan ilk dile çözümlenir: de-AT için de-DE, en-GB için en elde edilir. Çince yazı sistemine göre belirlenir, Hant için zh-TW, Hans için zh-CN elde edilir. Yazı sistemi yoksa bölgeye göre belirlenir: TW, HK ve MO için zh-TW, diğer her durumda zh-CN. BR dışında bir bölge belirtilmedikçe pt için pt-BR elde edilir. Hiçbir şey eşleşmezse düzenleyici İngilizce gösterir.
editor.setLocale('system');
editor.setSystemLocale('pt-PT'); // null follows the browser again
setSchemaSQL
Bir Şema SQL dosyası yükler.
Varsayılan olarak geçerli belgeyle birleştirmek yerine onu değiştirir; aşağıdaki mode seçeneğine bakın. Görünüm konumu ve yakınlaştırma düzeyi dışında, her kilit ve kilitli değeri dahil mevcut ayarlarınız korunur ve tablolar dosya okunduktan sonra, aşağıdaki placement aksini istemedikçe satırlar hâlinde yerleştirilir. Viewport kilitliyken value bundan sonra içe aktarmanın başladığı görünümü, yani 1 yakınlaştırma düzeyinde 0, 0 başlangıç noktasını yazar. Bu nedenle hiç değer verilmemiş bir öğeye içe aktarılan bir belgede, yeni bir belgede olduğu gibi tüm kilitler etkindir.
4.2.0 sürümünden itibaren bir değiştirme, belgenin metinde tutulamayan sözcüklerini, terimlerini ve değer alanlarını her Sözlük sayfasının geri alma geçmişiyle birlikte korur ve içe aktarmanın geri alınması veya yinelenmesi de onları korur. Değiştirme modundaki bir setSchemaJSON çağrısı ve value değerine atama ise bunun yerine kendi belgelerinin tuttuklarını alır.
Geçmiş listesine kaydedilir, böylece Undo, Redo kullanılabilir ve change olayını tetikler. Boş bir dize yok sayılır ve readonly ayarlıyken çağrı hiçbir şey yapmaz.
setSchemaGraphQL, setSchemaDBML ve setSchemaAML de aynı şekilde davranır ve ayrıştırıcıları asla başarısız olmaz: Okuyamadıkları metin hata vermek yerine boş bir belge yükler.
4.0.0 sürümünden itibaren dördü de isteğe bağlı ikinci bir argüman olarak { placement, mode } alır:
- Varsayılan olan
placement: 'grid', eskisi gibi tabloları hemen satırlar hâlinde yerleştirir ve çağrı hiçbir şey döndürmez. placement: 'auto', düzenleyicidekiImportöğesinin yaptığı gibi tabloları önce ilişkilerine göre düzenler ve içe aktarma tek bir geri alma adımı olarak yerleştiğinde çözümlenen birPromisedöndürür. İkiden az tablo olması, hiç ilişki olmaması, düzenin başarısız olması, sayfadaSharedWorkerbulunmaması ya daPlacing tablesbildirimindekiCanceldüğmesine basılması durumunda tablolar bunun yerine satırlar hâlinde yerleştirilir. Bu arada gerçekleşen bir yükleme – değiştiren başka bir içe aktarma,valuedeğerine atama,setInitialValue(),5.1.0sürümünden itibaren paylaşılan bir deponun reseed yöntemi,clear(), bir ortak çalışanın yüklemesi ya da bir yüklemenin veyaclear()çağrısının geri alınması veya yinelenmesi – onun yerini alır vePromisehiçbir şey yüklenmeden çözümlenir. Bu şekilde yerleştirilen içe aktarmalar başladıkları sırayla yerleşir.- Varsayılan olan
mode: 'replace'belgeyi değiştirir.mode: 'append', İçe aktar ve ekle özelliğinin yaptığı gibi dosyayı diyagramın altına ekler, zaten orada olan her tabloyu ve sekme ile görünüm konumu dışındaki her ayarı olduğu gibi bırakır. Başka bir sekmedeyken önce ERD sekmesine geçilir. Yeni tablolar seçilir, tablo grupları gösteriliyorsa bir DBML dosyasının getirdiği tablo grupları da seçilir ve görünüm,4.1.0sürümünden itibaren her atlamanın uyduğu kurala göre, zaten düzgün biçimde görünür durumda değillerse onlara kaydırılır. Atlamanın varış noktası bölümüne bakın. Tek bir geri alma eklemenin tamamını kaldırır. Okuyamadığı metin hiçbir şey eklemez ve belgeyi olduğu gibi bırakır.
readonly ayarlıyken değiştirme yok sayılır, ekleme hiçbir şey eklemez ve placement: 'auto' çağrısı hemen çözümlenir.
3.10.0 sürümünden itibaren setSchemaSQL dosyayı belgenin geçerli veritabanına göre okur: Databricks seçiliyken tek tırnaklı dizeler Spark'ın ters eğik çizgi kaçış kurallarına uyar. Açıklamalar bölümüne bakın.
3.10.0 sürümünden itibaren setSchemaSQL, iki veya daha fazla sütunu kapsayan bir UNIQUE kısıtlamasını her sütunda bir Benzersiz bayrağı olarak değil, tek bir benzersiz dizin olarak okur. Benzersiz anahtarlar ve dizinler bölümüne bakın.
3.10.0 sürümünden itibaren SQL, DBML ve AML içe aktarmaları, okudukları yabancı anahtarların ON DELETE ve ON UPDATE eylemlerini korur.
4.0.0 sürümünden itibaren setSchemaSQL bir sütunun DEFAULT ifadesinin tamamını korur, SQL Server'ın ADD DEFAULT … FOR ifadesini ve MS_Description açıklamalarını okur, PostgreSQL serial ve identity sütunlarını Otomatik artırmaya dönüştürür, bir veri türündeki UNSIGNED ve ZEROFILL ifadelerini korur ve ALTER TABLE … ADD PRIMARY KEY ile CLUSTERED, NONCLUSTERED veya USING BTREE olarak işaretlenen bir birincil anahtarı okur. Şema SQL bölümüne bakın.
Her ayrıştırıcının kabul ettiği söz dizimi için Dosyaları içe veya dışa aktarma sayfasına bakın.
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
Bir GraphQL SDL belgesi yükler.
Nesne türü tanımları tablo olur, türü başka bir tablo olan bir alan da ilişki olur.
editor.setSchemaGraphQL('GraphQL SDL...');
setSchemaDBML
dbdiagram.io ve dbdocs'un kullandığı biçim olan bir DBML dosyası yükler.
4.0.0 sürümünden itibaren her TableGroup bir tablo grubu olur ve bir tablonun headercolor değeri o tablonun rengi olur. DBML bölümüne bakın.
editor.setSchemaDBML('DBML...');
setSchemaAML
Bir AML (Azimutt Markup Language) dosyası yükler. Hem güncel yazım hem de eski v1 yazımı kabul edilir.
4.0.0 sürümünden itibaren bir varlığın, Azimutt renk adlarından biri veya tırnak içinde onaltılık bir değer olan rengi, tablosunun rengi olur. AML bölümüne bakın.
editor.setSchemaAML('AML...');
setSchemaJSON
4.0.0 sürümünden itibaren, value özelliğinin döndürdüğü metin gibi bir .erd.json belgesi yükler.
Varsayılan mode: 'replace' modunda belgeyi value değerine atamanın yaptığı gibi yükler: Geçmiş listesine kaydedilir, change olayını tetikler ve belgenin kilitlerini aynı şekilde alır, 4.2.0 sürümünden itibaren de belgenin sözcükleri, terimleri ve değer alanları düzenleyicininkilerin yerini alır. value özelliğinden farklı olarak boş bir dize veya dize olmayan bir değer yeni bir belge başlatmak yerine yok sayılır. JSON olmayan bir metin, value ile olduğu gibi belgeyi boşaltır.
mode: 'append', İçe aktar ve ekle özelliğinin bir json dosyasıyla yaptığı gibi belgenin tablolarını, ilişkilerini, dizinlerini, notlarını ve tablo gruplarını birbirlerine göre konumlarını koruyarak yeni kimliklerle diyagramın altına ekler ve belgenin ayarlarını dışarıda bırakır. 4.2.0 sürümünden itibaren tabloların ve sütunların mantıksal adlarını ve türetilmiş ad bayraklarını korur, ancak belgenin sözcüklerini, terimlerini ve değer alanlarını geride bırakır, bu nedenle sütunlarından hiçbiri bir değer alanına bağlı olmaz. Okuyamadığı metin ya da hiç tablo ve not içermeyen bir belge hiçbir şey eklemez. Aksi hâlde bir setSchemaSQL eklemesinin yaptığı gibi yerleşir ve yeni notları ve tablo grupları, her tür gösterildiği sürece, tablolarıyla birlikte seçilir.
Belge yerleştiğinde döner ve readonly ayarlıyken yok sayılır.
editor.setSchemaJSON('json...');
// or
editor.setSchemaJSON('json...', { mode: 'append' });
getSchemaSQL
Geçerli düzenleyici durumunu Şema SQL olarak dışa aktarır.
databaseVendor belirtilmezse, düzenleyicinin gösterdiği veritabanı için yazar: belgenin veritabanı, ancak salt okunur bir düzenleyicinin okuyucusu başka birini seçtiyse (bu seçim 5.0.0 sürümünden itibaren o ekranda kalır) Şema SQL sekmesinin gösterdiği veritabanı. Aşağıdaki listede olmayan bir ad da hata vermeden aynı şekilde ele alınır.
Adlar, düzenleyicinin gösterdiği tırnak türüyle tırnak içine alınır. Bracket Type kilitliyken ya da 5.0.0 sürümünden itibaren okuyucusu başka bir tür seçmiş salt okunur bir düzenleyicide bu, value değerinin kaydettiği türden farklı olabilir. Bir kodlama ajanının erd_read aracı da adları bu kaydedilen türle tırnak içine alır. Yazılan adlar, Ad görünümü ne olursa olsun her zaman fiziksel adlardır.
4.0.0 sürümünden itibaren isteğe bağlı bir options argümanı, Şema SQL sekmesinin seçenekleri gibi ifadeleri ve başlığı, 4.2.0 sürümünden itibaren de mantıksal adların boş açıklamaları doldurup doldurmayacağını seçer. SchemaSQLOptions bir tür olarak dışa aktarılır.
statements: varsayılan olan'create'; MySQL, MariaDB, PostgreSQL, SQLite ve Databricks içinIF NOT EXISTSyazan, diğerlerinde'create'değerine geri dönen'ifNotExists'ya da tabloları oluşturmadan önce kaldıran'recreate', Snowflake ise bunun yerineCREATE OR REPLACE TABLEyazar.header: varsayılan olan'none'; belgenin veritabanına veya şemasına geçen'use'ya da önce yoksa onu oluşturan, ardından ona geçen'createAndUse'. İstenen seçeneği desteklemeyen bir veritabanı sekmenin yaptığı gibi geri döner: Oracle'createAndUse'için'use'yazar, PostgreSQL'use'için başlık yazmaz, SQLite ise hiç başlık yazmaz. Başlık yalnızca belgenin veritabanı adı yalın bir tanımlayıcıyken yazılır – ASCII harfler, rakamlar ve_karakterinden oluşan ve rakamla başlamayan bir ad.logicalNameAsComment,4.2.0sürümünden itibaren:true, bir tablonun veya sütunun kendi açıklaması boşsa ya da yalnızca boşluklardan oluşuyorsa ve mantıksal adı boş değilse, mantıksal adını o veritabanının açıklama yazdığı biçimde açıklaması olarak yazar. Metin içeren bir açıklama eskisi gibi yazılır. Bunu yalnızcatrueaçar: Dışarıda bırakılması,falseya da'true'veya1gibi başka herhangi bir değer hiçbir mantıksal ad yazmaz. SekmedekiWrite logical names into empty commentsanahtarının yaptığını yapar.
Dışarıda bırakılan ya da bilinmeyen bir değere sahip bir seçenek varsayılan değeriyle okunur, bu nedenle seçeneksiz bir çağrı eskisi gibi başlıksız, yalın CREATE ifadeleri yazar.
4.0.0 sürümünden itibaren çıktı her zaman belgenin Before tables ve After tables betiklerini şu sırayla içerir: başlık, önceki betik, kaldırma ifadeleri, tablolar, sonraki betik. Şema SQL sekmesinin kendi Statements, Header, Write logical names into empty comments ve Tables seçimleri, her zaman belgenin tamamını yazan bu çağrıyı asla etkilemez.
3.10.0 sürümünden itibaren her yabancı anahtar, ilişkinin ON DELETE ve ON UPDATE yan tümcelerini taşır. Bir yan tümce yalnızca eylemi ayarlıysa ve veritabanı sistemi onu kabul ediyorsa yazılır, bu nedenle o sistemin kabul etmediği bir eylem yer almaz ve varsayılanı geçerli olur. 4.0.0 sürümünden itibaren Snowflake yalnızca NO ACTION kabul eder. Her veritabanının ne yazdığı için ON DELETE ve ON UPDATE bölümüne bakın.
3.10.0 sürümünden itibaren bir tablo veya sütun açıklamasındaki tek tırnak kaçışlanır, bu nedenle it's gibi bir açıklama artık ifadeyi bozmaz. Açıklamaları dize sabiti olarak yazan her veritabanı sistemi tırnağı ikiler, tek istisna her tırnağın ve her ters eğik çizginin önüne bir ters eğik çizgi koyan Databricks'tir. SQLite açıklamaları hâlâ -- satırları olarak yazar.
4.2.0 sürümünden itibaren SQL Server her açıklamayı N'…' biçiminde bir ulusal dize sabiti olarak yazar, böylece Korece gibi veritabanının kod sayfası dışında kalan metinler korunur. Oracle bir açıklamadaki her ardışık boş satır dizisini tek bir satır sonu olarak yazar, SQLite ise bir açıklamanın satır sonlarını boşluk olarak yazar, böylece açıklama kendi -- satırında kalır. Açıklamalar bölümüne bakın.
4.0.0 sürümünden itibaren birkaç veritabanı anahtar adlarını, varsayılan değerleri ve otomatik artırmayı da farklı yazar. DDL'in yazdıkları bölümüne bakın.
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
Gerçek zamanlı ortak düzenleme için bir depo döndürür.
config, { getNickname?, mouseTracker?, focusTracker? } biçimindedir. İki izleyici de varsayılan olarak true olur: mouseTracker bu düzenleyicinin imlecini diğerlerine yayınlar, focusTracker ise odaktaki hücresini, seçimini ve sürükleme kutusunu yayınlar.
5.0.0 sürümünden itibaren readonly ayarlıyken depo hiçbir değişiklik göndermez; yalnızca izleyicilerinin gönderdiklerini ve katılan bir düzenleyicinin istediği kayıtları gönderir, diğerlerinin gönderdiğini ise yine uygular.
5.1.0 sürümünden itibaren ayrıca düzenleyicinin ortak çalışma kayıtlarını ve saatinin sürümünü verir (getLWW, getVersion), başka bir deponunkileri içeri alır (mergeLWW), ayrılmış bir ortak çalışanın imlecini, odağını, seçimini ve sürükleme kutusunu unutur (forgetPeer) ve oturumun belgesini yanında tutulan kayıtlarla yeniden açar (reseed). @dineug/erd-editor-yjs öğeyi bir Yjs belgesiyle eşzamanlı tutmak için bunlara dayanır.
5.1.0 sürümünden itibaren bir adı veya alanı değiştiren, bir tabloyu taşıyan ya da bir notu veya tablo grubunu taşıyan veya yeniden boyutlandıran iki kullanıcı bunu aynı anda yaptığında, 5.1.0 veya sonraki bir sürümün her düzenleyicisinde ve replikasında aynı sonuca varılır; bir sürükleme, bir kaydırma veya bir yakınlaştırma da bittiği yer olarak gönderilir.
Bir renk, bir tablo ya da dizin içinde taşınan bir sütun ve veritabanı gibi birkaç ayar istisnadır; bunları her düzenleyici ve replika hâlâ duydukları sırayla alır. Eşzamanlı düzenlemeler bölümüne bakın.
Ortak düzenleme sayfasına bakın.
const sharedStore = editor.getSharedStore({
mouseTracker: false,
focusTracker: false,
});
setDiffValue
O anda açık olan belgeyi verdiğiniz belgeyle karşılaştırarak Fark görüntüleyiciyi açar.
Hiçbir şey döndürmez ve belgeyi değiştirmez, bu nedenle görüntüleyiciyi kapatmak düzenleyiciyi tam olarak önceki hâlinde bırakır.
Boş bir değer ya da dize olmayan herhangi bir şey boş bir belgeyle karşılaştırılır.
Tuvalin bağlam menüsündeki Fark görüntüleyici ile aynı katmandır.
4.1.0 sürümünden itibaren iki belgenin içerdiklerini önce kimliğe göre, ancak ondan sonra bir tablonun adı veya bir notun metni gibi her birinin tuttuğu içeriğe göre eşleştirir. Neler karşılaştırılır bölümüne bakın. Bu nedenle aynı belgenin önceki bir sürümüne, örneğin dosyasının bir Git revizyonuna karşı bir yeniden adlandırma tek bir yeniden adlandırılmış öğe olarak görünür, kimlikleri farklı olan bir belgeye karşı ise bir kaldırma ve bir ekleme olarak görünür. Görüntüleyici değişenleri iki belgenin yanındaki bir ağaçta listeler ve değişiklikleri hücreleri doldurmak yerine renkle işaretler.
4.2.0 sürümünden itibaren, verilen belge ne kaydetmiş olursa olsun iki belge de bu düzenleyicinin gösterdiği Ad görünümünde açılır ve ağaç da tabloları ve sütunları bu görünüme göre adlandırır. Tuvalin ötesinde bölümüne bakın. Mantıksal adlar, değer alanı bağlantıları ve sözlükler karşılaştırılmaz, bu nedenle yalnızca bunlarda yapılan bir değişiklik hiçbir fark göstermez.
editor.setDiffValue('prev json...');