ब्लॉक आरेख संपादक - Vue.js और MxGraph के बीच दोस्ती के बारे में

यह सब कैसे शुरू हुआ?

मैं एक फ्रंट-एंड डेवलपर हूं, लेकिन मैं विकास के लिए प्रयास करता हूं, मैंने एक फुलस्टैक एप्लिकेशन लिखने और अमूल्य अनुभव प्राप्त करने के लिए करोड़पति बनने का फैसला किया।

इसलिए, मैंने बैकएंड की योजना बनाना शुरू कर दिया, डेटा भंडारण के लिए MongoDB को चुना, और संरचना और क्षेत्र संबंधों की योजना के लिए तैयार था।

लेकिन मैं NoSQL डेटाबेस के लिए कोई तामझाम के साथ एक सरल और पर्याप्त रूप से कार्यात्मक स्कीमा संपादक की कमी में भाग गया।

- नहीं? इसलिए मैं व्यापार करूँगा, एक पुस्तकालय ढूंढूँगा और इंटरफ़ेस को आबाद करूँगा!
फुलस्टैक विचार को पृष्ठभूमि में धकेल दिया गया और मैंने डेटाबेस स्कीमा के सबसे सरल संपादक का अध्ययन करना शुरू कर दिया।
- Naive ... - लेकिन मुझे इसका एहसास थोड़ी देर बाद हुआ।

खोज

सबसे पहले, इस तरह के पुस्तकालयों को ज्यादातर भुगतान किया जाता है और उनमें से बहुत कुछ की आवश्यकता होती है!
दूसरे, जो स्वतंत्र हैं वे कार्यक्षमता से नहीं चमकते हैं या बग से भरे हुए हैं!

तीसरे में MxGraph पाया नहीं जाएगा। यह व्यावहारिक रूप से इंटरनेट पर उल्लेख नहीं किया गया है, हालांकि इस पर उत्कृष्ट draw.io सेवा लिखी गई है और अपने आप में यह डेटा को विज़ुअलाइज़ करने और संपादित करने के लिए एक बहुत ही सुविधाजनक उपकरण है।

विचार

मुझे लगता है कि सभी ने Vue.js के बारे में सुना है, लेकिन सिर्फ मामले में - यह जावास्क्रिप्ट है - प्रतिक्रियाशील-शैली उपयोगकर्ता इंटरफेस बनाने के लिए एक रूपरेखा।

MxGraph विभिन्न प्रक्रियाओं, वर्कफ़्लो और BPM, डेटाबेस विज़ुअलाइज़ेशन, मैपिंग नेटवर्क और दूरसंचार, मैपिंग एप्लिकेशन और GIS, UML आरेख, इलेक्ट्रॉनिक सर्किट, VLSI, CAD, वित्तीय और सामाजिक नेटवर्क, संगठनात्मक चार्ट और बहुत कुछ दृश्य और संपादन के लिए एक पुस्तकालय है।

अनुकूलता

MxGraph एक काफी पुराना (लेकिन अप्रचलित नहीं) उपकरण है, इसलिए यहाँ Vue प्रोजेक्ट में स्थापित एक साधारण npm पूर्ण अनुकूलता नहीं देगा। इसलिए, मुझे नेटवर्क खोदना और साइकिल का उत्पादन खोलना था।

पीड़ित समाधान मिला

Vue घटक में आयात और एम्बेडिंग इस तरह दिखता है:

<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> 

आपने चर क्यों बनाए, और फिर उन्हें खिड़की में भी पंजीकृत किया!

तथ्य यह है कि वेबपैक असेंबली के दौरान वेरिएबल्स का नाम बदल देता है और mxgraph बाद में उन्हें नहीं ढूंढ सकता है। इसलिए, विशेष रूप से mxgraph के लिए, मैंने उन्हें एक वैश्विक वस्तु में डाल दिया।

इसके अलावा कॉन्फ़िगरेशन के बारे में मत भूलना - विशेष रूप से जब अंतर्निहित mxEditor इंटरफेस का उपयोग करते हैं, अन्यथा लाइब्रेरी सामग्री के साथ समस्या होगी।

और क्यों संपादक चर प्रतिज्ञा से बाहर हो गया!

ऑपरेशन के दौरान, हम हमेशा mxgraph के संदर्भ के कारण vue वैरिएबल तक नहीं पहुँच पाएंगे। और उन्हें वैश्विक चर में ले जाना गंभीरता से समय और मुट्ठी भर नसों को बचाएगा।

कस्टम डेटा ऑब्जेक्ट विंडो में फिर से क्यों?!

Mxgraph नए डेटा ऑब्जेक्ट बनाने के लिए प्रोटोटाइप का उपयोग करता है। उन्हें खिड़की पर भी लिखने की आवश्यकता है - अन्यथा योजनाओं के अंतर्निहित आयात / निर्यात के साथ समस्याएं होंगी।

आगे का विकास आसान हो गया और मुझे वस्तुओं के उपयोग में कोई समस्या नहीं हुई।
मुझे नहीं लगता कि यह दृष्टिकोण आदर्श है, और मुझे खुशी होगी अगर कोई इस संगतता समाधान का विकल्प प्रदान करता है।

और क्या हुआ?

मॉडलिंग डेटाबेस स्कीमा के लिए एक छोटा अनुप्रयोग: nosqldbm.ru
जो मुझे भविष्य की परियोजनाओं के लिए अनुमानित डेटाबेस स्कीमा की कल्पना करने में मदद करता है।

मेरा पहला प्रकाशन पढ़ने के लिए धन्यवाद, मुझे आशा है कि आप रुचि रखते थे।

फुल गिट उदाहरण

कोष

MxGraph चयन

कोष
छोटा गाइड
एपीआई डॉक्स
उदाहरण