Editor diagram blok - tentang persahabatan antara Vue.js dan MxGraph

Bagaimana semuanya dimulai?

Saya seorang pengembang front-end, tetapi saya berusaha keras untuk pengembangan, saya memutuskan untuk menulis aplikasi fullstack dan menjadi jutawan untuk mendapatkan pengalaman yang tak ternilai.

Jadi, saya mulai merencanakan backend, memilih MongoDB untuk penyimpanan data, dan siap untuk merencanakan struktur dan hubungan lapangan.

Tapi saya mengalami kurangnya editor skema sederhana dan cukup fungsional tanpa embel-embel untuk database NoSQL.

- Tidak? Jadi saya akan melakukan bisnis, menemukan perpustakaan dan mengisi antarmuka!
Gagasan Fullstack didorong ke latar belakang dan saya mulai mempelajari editor skema database paling sederhana.
- Naif ... - tapi saya menyadari ini sedikit kemudian.

Pencarian

Pertama, perpustakaan semacam ini sebagian besar dibayar dan membutuhkan banyak dari mereka!
Kedua, yang gratis tidak bersinar dengan fungsionalitas atau penuh bug!

Di ketiga tidak akan ditemukan MxGraph. Secara praktis tidak disebutkan di Internet, meskipun layanan draw.io yang luar biasa ditulis di dalamnya dan itu sendiri merupakan alat yang sangat nyaman untuk memvisualisasikan dan mengedit data.

Kiriman

Saya pikir semua orang telah mendengar Vue.js , tetapi untuk berjaga-jaga - ini JavaScript - kerangka kerja untuk membuat antarmuka pengguna gaya reaktif.

MxGraph adalah perpustakaan untuk memvisualisasikan dan mengedit berbagai proses, alur kerja dan BPM, visualisasi basis data, pemetaan jaringan dan telekomunikasi, aplikasi pemetaan dan GIS, diagram UML, sirkuit elektronik, VLSI, CAD, jaringan keuangan dan sosial, bagan organisasi dan banyak lagi.

Kompatibilitas

MxGraph adalah alat yang cukup lama (tetapi tidak usang), jadi instalasi npm sederhana dalam proyek Vue di sini tidak akan memberi kita kompatibilitas penuh. Karena itu, saya harus menggali jaringan dan membuka produksi sepeda.

Solusi Menderita Ditemukan

Mengimpor dan menyematkan komponen Vue terlihat seperti ini:

<script> import mxgraph from 'mxgraph'; //            const graphConfig = { mxBasePath: '/mx/', //the path in mxClient.basePath. mxImageBasePath: '/mx/images', // the path in mxClient.imageBasePath. mxLanguage: 'en', // the language for resources in mxClient.language. mxDefaultLanguage: 'en', // the default language in mxClient.defaultLanguage. mxLoadResources: false, // if any resources should be loaded. Default is true. mxLoadStylesheets: false, // if any stylesheets should be loaded. Default is true }; const { mxClient, mxUtils, mxEvent, mxEditor, mxRectangle, mxGraph, mxGeometry, mxCell, mxImage, mxDivResizer, mxObjectCodec, mxCodecRegistry, mxConnectionHandler } = mxgraph(graphConfig); window.mxClient = mxClient; window.mxUtils = mxUtils; window.mxRectangle = mxRectangle; window.mxGraph = mxGraph; window.mxEvent = mxEvent; window.mxGeometry = mxGeometry; window.mxCell = mxCell; window.mxImage = mxImage; window.mxEditor = mxEditor; window.mxDivResizer = mxDivResizer; window.mxObjectCodec = mxObjectCodec; window.mxCodecRegistry = mxCodecRegistry; window.mxConnectionHandler = mxConnectionHandler; var editor; // CustomUserObject window.CustomUserObject = function (name, type) { this.name = name || 'New Name'; this.type = type || 'New Type'; this.clone = function () { return mxUtils.clone(this); }; }; export default { // vue logic } </script> 

Mengapa Anda membuat variabel, dan kemudian juga mendaftarkannya di jendela ?!

Faktanya adalah bahwa webpack mengubah nama variabel selama assembly dan mxgraph selanjutnya tidak dapat menemukannya. Karena itu, terutama untuk mxgraph, saya menempatkan mereka ke objek global.

Juga jangan lupa tentang konfigurasi - terutama saat menggunakan antarmuka mxEditor bawaan, jika tidak akan ada masalah dengan konten pustaka.

Dan mengapa variabel editor keluar dari vue ?!

Selama operasi, kita tidak akan selalu dapat mengakses variabel vue karena konteks metode mxgraph. Dan membawa mereka ke dalam variabel global akan secara serius menghemat waktu dan beberapa saraf.

Objek data kustom mengapa lagi di jendela ?!

Mxgraph menggunakan prototipe untuk membuat objek data baru. Mereka juga perlu dituliskan ke jendela - jika tidak akan ada masalah dengan impor / ekspor skema yang terintegrasi.

Pengembangan lebih lanjut berjalan lebih mudah dan saya tidak lagi mengalami masalah dengan akses ke objek.
Saya tidak berpikir pendekatan ini ideal, dan saya akan senang jika seseorang menawarkan alternatif untuk solusi kompatibilitas ini.

Dan apa yang terjadi?

Aplikasi kecil untuk pemodelan skema basis data: nosqldbm.ru
Yang membantu saya untuk memvisualisasikan skema database perkiraan untuk proyek masa depan.

Terima kasih telah membaca publikasi pertama saya, saya harap Anda tertarik.

Contoh lengkap git

Repositori

Pilihan MxGraph

Repositori
Panduan kecil
API Documents
Contohnya