Éditeur de diagramme - sur l'amitié entre Vue.js et MxGraph

Comment tout a commencé?

Je suis développeur front-end, mais je recherche le développement, j'ai décidé d'écrire une application fullstack et de devenir millionnaire pour acquérir une expérience inestimable.

J'ai donc commencé à planifier le backend, choisi MongoDB pour le stockage des données et j'étais prêt à planifier la structure et les relations sur le terrain.

Mais je suis tombé sur l'absence d'un éditeur de schéma simple et suffisamment fonctionnel sans fioritures pour les bases de données NoSQL.

- Non? Je vais donc faire des affaires, trouver une bibliothèque et remplir l'interface!
L'idée de Fullstack a été poussée à l'arrière-plan et j'ai commencé à étudier l'éditeur le plus simple de schémas de base de données.
- Naive ... - mais je m'en suis rendu compte un peu plus tard.

Recherches

Premièrement, les bibliothèques de ce type sont pour la plupart payantes et en nécessitent beaucoup!
Deuxièmement, ceux qui sont gratuits ne brillent pas par leurs fonctionnalités ou sont pleins de bugs!

Dans le troisième ne sera pas trouvé MxGraph. Il n'est pratiquement pas mentionné sur Internet, bien que l'excellent service draw.io y soit écrit et constitue en soi un outil très pratique pour visualiser et éditer des données.

Soumission

Je pense que tout le monde a entendu parler de Vue.js , mais juste au cas où - c'est JavaScript - un cadre pour créer des interfaces utilisateur de style réactif.

MxGraph est une bibliothèque pour visualiser et éditer divers processus, workflow et BPM, visualisation de base de données, cartographie des réseaux et télécommunications, cartographie des applications et SIG, diagrammes UML, circuits électroniques, VLSI, CAD, réseaux financiers et sociaux, organigrammes et bien plus encore.

La compatibilité

MxGraph est un outil assez ancien (mais pas obsolète), donc une simple installation de npm dans un projet Vue ici ne nous donnera pas une compatibilité totale. J'ai donc dû creuser le réseau et ouvrir la production de vélos.

Solutions éprouvées trouvées

L'importation et l'intégration dans un composant Vue ressemble à ceci:

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

Pourquoi avez-vous créé les variables, puis les avez-vous également enregistrées dans la fenêtre?!

Le fait est que webpack renomme les variables lors de l'assemblage et que mxgraph ne peut plus les trouver par la suite. Par conséquent, en particulier pour mxgraph, je les ai mis dans un objet global.

N'oubliez pas non plus la configuration - en particulier lorsque vous utilisez les interfaces mxEditor intégrées, sinon il y aura des problèmes avec le contenu de la bibliothèque.

Et pourquoi la variable éditeur est-elle sortie de vue?!

Pendant le fonctionnement, nous ne pourrons pas toujours accéder à la variable vue en raison du contexte des méthodes mxgraph. Et les intégrer dans des variables globales permettra de gagner sérieusement du temps et quelques poignées de nerfs.

Objets de données personnalisés pourquoi à nouveau dans la fenêtre?!

Mxgraph utilise des prototypes pour créer de nouveaux objets de données. Ils doivent également être écrits dans la fenêtre - sinon il y aura des problèmes avec l'importation / exportation intégrée des schémas.

Le développement est devenu plus facile et je n'ai plus rencontré de problèmes d'accès aux objets.
Je ne pense pas que cette approche soit idéale, et je serai heureux si quelqu'un propose une alternative à cette solution de compatibilité.

Et que s'est-il passé?

Une petite application pour modéliser les schémas de bases de données: nosqldbm.ru
Ce qui m'aide à visualiser un schéma de base de données approximatif pour de futurs projets.

Merci d'avoir lu ma première publication, j'espère que cela vous a intéressé.

Exemple complet de git

Dépôt

Sélection MxGraph

Dépôt
Petit guide
Documents API
Des exemples