Blockdiagramm-Editor - über die Freundschaft zwischen Vue.js und MxGraph

Wie hat alles angefangen?

Ich bin ein Front-End-Entwickler, aber ich strebe nach Entwicklung. Ich habe beschlossen, eine Fullstack-Anwendung zu schreiben und Millionär zu werden, um wertvolle Erfahrungen zu sammeln.

Also begann ich mit der Planung des Backends, entschied mich für MongoDB zur Datenspeicherung und war bereit, die Struktur und die Feldbeziehungen zu planen.

Es fehlte mir jedoch ein einfacher und ausreichend funktionierender Schema-Editor ohne Schnickschnack für NoSQL-Datenbanken.

- Nein? Also mache ich Geschäfte, finde eine Bibliothek und fülle die Benutzeroberfläche!
Die Fullstack-Idee wurde in den Hintergrund gerückt und ich begann, den einfachsten Editor für Datenbankschemata zu studieren.
- Naiv ... - aber das habe ich etwas später gemerkt.

Suchen

Erstens werden Bibliotheken dieser Art meistens bezahlt und erfordern viele davon!
Zweitens glänzen diejenigen, die kostenlos sind, nicht mit Funktionalität oder sind voller Fehler!

Im dritten wird MxGraph nicht gefunden. Es wird im Internet praktisch nicht erwähnt, obwohl der ausgezeichnete draw.io-Service darauf geschrieben ist und an sich ein sehr praktisches Werkzeug zum Visualisieren und Bearbeiten von Daten ist.

Einreichung

Ich denke, jeder hat von Vue.js gehört , aber nur für den Fall - dies ist JavaScript - ein Framework zum Erstellen reaktiver Benutzeroberflächen.

MxGraph ist eine Bibliothek zur Visualisierung und Bearbeitung verschiedener Prozesse, Workflows und BPM, Datenbankvisualisierung, Kartierungsnetzwerke und Telekommunikation, Kartierungsanwendungen und GIS, UML-Diagramme, elektronische Schaltkreise, VLSI, CAD, finanzielle und soziale Netzwerke, Organigramme und vieles mehr.

Kompatibilität

MxGraph ist ein ziemlich altes (aber nicht veraltetes) Tool, daher bietet eine einfache npm-Installation in einem Vue-Projekt hier keine vollständige Kompatibilität. Deshalb musste ich das Netzwerk ausgraben und die Produktion von Fahrrädern eröffnen.

Leidende Lösungen gefunden

Das Importieren und Einbetten in eine Vue-Komponente sieht folgendermaßen aus:

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

Warum haben Sie die Variablen erstellt und dann auch im Fenster registriert ?!

Tatsache ist, dass Webpack die Variablen während der Assemblierung umbenennt und mxgraph sie anschließend nicht finden kann. Deshalb habe ich sie speziell für mxgraph in ein globales Objekt eingefügt.

Vergessen Sie auch nicht die Konfiguration - insbesondere bei Verwendung der integrierten mxEditor-Schnittstellen, da sonst Probleme mit dem Bibliotheksinhalt auftreten.

Und warum ist die Editorvariable aus dem Ruder gelaufen ?!

Während des Betriebs können wir aufgrund des Kontexts der mxgraph-Methoden nicht immer auf die vue-Variable zugreifen. Und wenn Sie sie in globale Variablen einbeziehen, sparen Sie ernsthaft Zeit und ein paar Handvoll Nerven.

Benutzerdefinierte Datenobjekte warum wieder im Fenster ?!

Mxgraph verwendet Prototypen, um neue Datenobjekte zu erstellen. Sie müssen auch in das Fenster geschrieben werden - andernfalls treten Probleme beim integrierten Import / Export von Schemata auf.

Die Weiterentwicklung war einfacher und ich hatte keine Probleme mehr mit dem Zugriff auf Objekte.
Ich halte diesen Ansatz nicht für ideal, und ich würde mich freuen, wenn jemand eine Alternative zu dieser Kompatibilitätslösung anbietet.

Und was ist passiert?

Eine kleine Anwendung zum Modellieren von Datenbankschemata: nosqldbm.ru
Dies hilft mir, ein ungefähres Datenbankschema für zukünftige Projekte zu visualisieren.

Vielen Dank für das Lesen meiner ersten Veröffentlichung. Ich hoffe, Sie waren interessiert.

Vollständiges Git-Beispiel

Repository

MxGraph Auswahl

Repository
Kleine Anleitung
API-Dokumente
Beispiele