joint

JointJS – JavaScript-Diagrammbibliothek für außergewöhnliche Benutzeroberflächen

JointJS ist eine getestete und bewährte JavaScript- / Typescript -Diagrammbibliothek, die Entwicklern und Unternehmen jeder Größe hilft, visuelle und No-Code/Low-Code-Anwendungen schneller und sicherer zu erstellen. Es handelt sich um ein flexibles Tool, mit dem eine breite Palette von Benutzeroberflächen erstellt werden kann (interaktive Diagrammanwendungen, Zeichentools, Datenvisualisierungen, Benutzeroberflächen für Überwachungssysteme und vieles mehr). Es kann zur Grundlage Ihrer nächsten Anwendung werden und Ihnen dabei helfen, Ihre Idee innerhalb von Tagen, nicht Monaten oder Jahren, auf den Markt zu bringen.

Weitere Informationen , Beispiele und Dokumentation finden Sie unter jointjs.com.

? Beginnen Sie mit Tutorials.

Um eine Frage zu stellen, Feedback zu geben oder an einer Diskussion mit anderen Community-Mitgliedern teilzunehmen, besuchen Sie unsere GitHub-Diskussionen.

Weitere Beispiele finden Sie auf CodePen.

Schauen Sie sich unsere Mindmap-Dokumentation an.

Merkmale

• wesentliche Diagrammelemente (Rechteck, Kreis, Ellipse, Text, Bild, Pfad)
• gebrauchsfertige Diagrammelemente bekannter Diagramme (ERD, Organigramm, FSA, UML, PN, DEVS, ...)
• benutzerdefinierte Diagrammelemente, die auf SVG basieren oder programmgesteuert gerendert werden
• Diagrammelemente mit Links oder Links mit Links verbinden
• anpassbare Links, ihre Pfeilspitzen und Beschriftungen
• konfigurierbare Verbindungsformen (Anker, Verbindungspunkte, Eckpunkte, Router, Anschlüsse)
• benutzerdefinierte Elementeigenschaften und -daten
• Import/Export aus/in das JSON-Format
• Anpassbare Element-Ports (Aussehen und Position, um Formen herum verteilt oder manuell positioniert)
• Rich-Graph-API (Traversal, DFS, BFS, Nachbarn, Vorgänger, Elemente am Punkt finden, ...)
• granulare Interaktivität
• Hierarchische Diagramme (Container, eingebettete Elemente, Kind-Eltern-Beziehungen)
• Element- und Link-Tools (Schaltflächen, Statussymbole, Tools zum Ändern der Form von Links, ...)
• Textmarker (sorgt für eine visuelle Hervorhebung Ihrer Elemente)
• Automatische Layouts (Elemente und Links automatisch anordnen)
• stark ereignisgesteuert (reagieren Sie auf jedes Ereignis, das innerhalb des Diagramms auftritt)
• hinein-/herauszoomen
• Touch-Unterstützung
• MVC-Architektur
• SVG-basiert
• ... noch viel mehr

Unterstützte Browser

• Neuestes Google Chrome (einschließlich Mobilgeräte)
• Neuester Firefox
• Neueste Safari (einschließlich Mobilgeräte)
• Neuester Microsoft Edge
• Neueste Oper

Entwicklungsumgebung

Wenn Sie lokal an JointJS arbeiten möchten, verwenden Sie zunächst die folgenden Richtlinien.

Abhängigkeiten

Stellen Sie sicher, dass auf Ihrem System die folgenden Abhängigkeiten installiert sind:

• Node.js
• grunt-cli
• Idiot
• Garn

Stellen Sie sicher, dass Sie die Yarn-Version >= 2.0.0 verwenden, damit Sie Zugriff auf die Funktionalität der Yarn-Arbeitsbereichsbereiche haben. Wenn Sie Volta verwenden, wird diese Einschränkung automatisch aus package.json gelesen.

Aufstellen

Klonen Sie dieses Git-Repository:

git clone https://github.com/clientIO/joint.git

Navigieren Sie zum joint Verzeichnis:

 cd joint

Installieren Sie alle Abhängigkeiten:

yarn install

Generieren Sie Distributionsdateien aus dem Quellcode:

yarn run dist

Sie können jetzt unsere Beispielanwendungen durchsuchen, die Funktionen aus mehreren JointJS-Paketen kombinieren:

 cd examples

Weitere Anweisungen finden Sie in der README.md Datei jeder Anwendung.

Sie können auch die Demoanwendungen unseres JointJS Core-Pakets durchsuchen:

 cd packages/joint-core/demo

Die meisten Demos können ausgeführt werden, indem Sie einfach die Datei index.html in Ihrem Browser öffnen. Einige Demos verfügen über zusätzliche Anweisungen, die Sie in den jeweiligen README.md Dateien finden.

Tests

So führen Sie alle Tests aus:

yarn run test

Um nur die serverseitigen Tests auszuführen:

yarn run test-server

Um nur die clientseitigen Tests auszuführen:

yarn run test-client

Um nur TypeScript-Tests auszuführen:

yarn run test-ts

Fussel

So prüfen Sie, ob Linting-Fehler in den Verzeichnissen src und types vorliegen:

yarn run lint

Um Fehler automatisch zu beheben, führen Sie „eslint“ für die Verzeichnisse src und types aus:

yarn run lint-fix

Code-Coverage-Berichte

So geben Sie einen Codeabdeckungsbericht in HTML aus:

yarn run test-coverage

So geben Sie einen Codeabdeckungsbericht im LCOV-Format aus:

yarn run test-coverage-lcov

Die Ausgabe aller Komponententests wird im Verzeichnis packages/joint-core/coverage gespeichert.

Mitwirkende

Lizenz

Die JointJS -Bibliothek ist unter der Mozilla Public License 2.0 lizenziert.

Copyright © 2013-2024 client IO