Einfache Javascript-Bibliothek zum Zeichnen eigener Komponentendiagramme/Schaltungen/Grafiken (mit Eingangs-/Ausgangsknoten) und deren Verbindungen

Ich hatte die Aufgabe, eine einfache HTML-Webanwendung in Javascript (Angular) zu erstellen, damit Besucher ihr eigenes Design von Komponentendiagrammen (Schaltkreis, Diagramm) und Verbindungen zwischen diesen Komponenten erstellen können . Also suche ich nach einer (einfachen) Javascript-Bibliothek, um das zu erreichen, anstatt alles von Grund auf neu zu schreiben.

Es ist wie das Entwerfen elektrischer Schaltungen, aber viel einfacher, weil ich keine Simulation des elektrischen Stroms oder des elektronischen Verhaltens der Komponenten benötige. also eher eine einfache Bibliothek, die hübsche Objekte und Verbindungen zeichnen kann.

Die Komponenten werden tatsächlich einige vordefinierte Geräte sein, die eine definierte Anzahl von Eingangs- und Ausgangsknoten haben. So kann der Benutzer eine beliebige Anzahl von Komponenten (Geräten) auf der Leinwand platzieren und die Ausgabe einer Komponente mit der Eingabe einer anderen Komponente auf der Leinwand verbinden und umgekehrt. Die Verbindung ist nur eine direkte Verbindung zwischen 2 Knoten (1 Eingang und 1 Ausgang) und jeder Knoten kann maximal 1 Verbindung haben. Aber einige Geschäftslogik kann von mir in Code geschrieben werden.

Die Anpassung von Komponenten ist erforderlich, da ich vordefinierte Komponenten haben werde, bei denen Ein-/Ausgangsports eine genaue Position haben sollten (aber ohne das leben können).

Auch die Verbindung (Drähte) zwischen Knoten (Eingangs-/Ausgangsports) könnte nicht nur eine einfache direkte Leitungsverbindung sein, sondern versuchen Sie, andere Leitungen nicht zu kreuzen - seien Sie schlau oder können Sie zumindest ihre Richtung bearbeiten .

Ich habe bisher 2 vielversprechende Bibliotheken gefunden:

  1. GoJS https://gojs.net/latest/samples/dynamicPorts.html
    https://gojs.net/latest/samples/dataFlow.html
    Beispiele sehen aus wie etwas, was ich verwenden könnte

    • + Vorteile gute Dokumentation
    • + Vorteile gute Anpassung
    • - Nachteile lizenzierte kommerzielle Nutzung
    • - Nachteile ziemlich robuste Bibliothek
  2. SimcirJS https://kazuhikoarase.github.io/simcirjs/

    • + Vorteile winzige Bibliothek
    • + Profis kostenlose kommerzielle Nutzung
    • - Nachteile kleine Dokumentation
    • - Nachteile schlechte Anpassung

Kennen Sie einige andere Javascript-Bibliotheken, um dieses Ziel zu erreichen? Winzige und einfach zu bedienende und gut dokumentierte Bibliotheken sind sehr willkommen.

Antworten (1)

Wenn jemand interessiert ist, habe ich endlich mxGraph https://github.com/jgraph/mxgraph gefunden und ausgewählt .

es ist:

  • Vorteile gut dokumentiert
  • Profis kostenlose Lizenz
  • Profis gut angepasst

Bibliothek für meine Zwecke