vue jsplumb editor

VUE-JSPLUMB-EDOR

Online -Vorschau

Funktionspunkte

Menüknotenbereich

• Ziehen Sie einen Knoten aus dem Menü zum Hauptdesignbereich, um den Knoten zu platzieren
• Organisieren Sie Knoten nach Knotentyp

Hauptdesignbereich

• Der Betrieb kann widerrufen werden
• Pfanne und Zoom des Hintergrunds
• Kann Knoten empfangen, die aus dem Menü hineingezogen sind
• Der gezogene Knoten generiert den entsprechenden Endpunkt basierend auf den aktuellen Knoteninformationen (zum Ausziehen der Verbindung)
• Die generierten Endpunkte sind in zwei Typen unterteilt: Quellendpunkt und Zielendpunkt, die im Stil unterschieden werden sollten.
• Der Quellendpunkt befindet sich in der unteren Position des Knotens, und der Zielknoten verhindert, dass der Knoten in der oberen Position liegt (um das Ziehen der Verbindungslinie von oben nach unten zu erleichtern).
• Alle Knoten können durch Ziehen und Bewegen bewegt werden
• Alle Knoten und Verbindungsleitungen können gelöscht werden
• Alle Knoten und Endpunkte müssen über ein Tooltip -Box verfügen, um den Knoten- oder Endpunktinformationen in der Maus fordern
• Alle Knoten, Endpunkte und Verbindungsleitungen müssen beim Schweben der Maus unterschiedliche Stile einstellen
• Alle Knoten und Verbindungsleitungen können ausgewählt werden
• Der Betrieb spart Daten in Echtzeit
• Datenerzeugungs -Flussdiagramm importieren

Knotenkonfigurationsbereich

• Bei der Auswahl eines Knotens im Konstruktionsbereich zeigt der Knotenkonfigurationsbereich ein entsprechendes Knotenkonfigurationsfeld an
• Unterschiedliche Knoten sollten entsprechende Knotenkonfigurationsplatten aufweisen
• Das Knotenfeld wird zum Anzeigen und Konfigurieren von Knoteneigenschaften verwendet

Klicken Sie mit der rechten Maustaste

• Knoten:
  • Kopie
  • löschen
  • Daten anzeigen
  • Umbenennen
• Anschlusskabel:
  • löschen
• Hintergrund:
  • Paste

Installationsabhängigkeiten

 npm install

Entwicklungsmodell

 npm run serve

Produktionscode kompilieren

 npm run build