clientIO/joint
Joint
Joint est une bibliothèque JavaScript permettant de créer des diagrammes visuels interactifs et des organigrammes à l'aide de Scalable Vector Graphics (SVG). Elle fournit un environnement programmable pour créer un canevas SVG interactif avec une prise en charge intégrée du zoom, du panoramique et des gestes tactiles.
Le framework inclut un système de composants pour définir des formes personnalisées et des éléments programmatiques au sein d'un système de coordonnées vectorielles. Il dispose d'un sérialiseur de diagrammes basé sur JSON pour enregistrer et charger les états des diagrammes, ainsi que d'algorithmes de disposition automatisés et de mappage de relations pour rendre les nœuds et les liens.
La bibliothèque couvre un large éventail de capacités de diagrammation, notamment la gestion de structures hiérarchiques pour les éléments imbriqués, le routage de liens basé sur des chemins avec des pointes de flèche personnalisables, et un système d'interaction piloté par les événements. Elle inclut également des outils pour le parcours de données de graphes et l'agencement automatique des éléments afin d'optimiser la clarté visuelle.
Features
- Graph Visualization Frameworks - Serves as a comprehensive framework for rendering nodes and edges with automated layout algorithms and relationship mapping.
- SVG Data Visualization - Renders interactive visualizations and diagrams using SVG shapes, paths, and images for data presentation.
- Visual Workflow Modelers - Provides a programmable environment for designing tools to map out business processes and technical workflows using interactive SVG shapes.
- Element Connection Management - Establishes links between shapes using customizable arrowheads and routing points to define relationships.
- Graph Layout Algorithms - Implements algorithms for the automatic positioning of nodes and edges to resolve visual overlaps and optimize spacing.
- Interactive Canvases - Provides a programmable SVG canvas with integrated support for zooming, panning, and touch gesture controls.
- Programmatic Shape Renderers - Allows the programmatic definition and rendering of specialized SVG shapes and attributes without external assets.
- Link Routing Controls - Determines the geometric trajectory of connection lines using routing points and customizable arrowhead anchors.
- Interactive Diagramming Libraries - Provides a library for embedding interactive, browser-rendered diagrams and flowcharts using SVG.
- State Serialization - Transforms the complex graph of elements and their connections into a portable JSON string for state persistence.
- JSON Serialization - Serializes and deserializes complex diagram states to and from JSON format for storage and transfer.
- Element Relationship Mapping - Uses adjacency-list structures to map and traverse connections between diagram elements.
- SVG Component Definitions - Allows building specialized diagram components using SVG or programmatic rendering with support for custom properties.
- Diagram State Serializations - Converts complex visual graph layouts and connectivity states into storable JSON formats for persistence.
- Diagram Element Layout Positioning - Automatically arranges elements and connecting links to optimize the visual structure and clarity of the layout.
- Scene Graph State Synchronization - Maintains a hierarchy of SVG elements as a JavaScript object model to keep the browser DOM in sync with diagram state.
- Graph Visualizers - Represents complex relational data as a visual map where users can explore connections and traverse nodes.
- Flow Diagram Serializations - Implements a JSON-based serialization system to save and restore the entire state of a flow diagram.
- Graph Traversal - Provides search algorithms to traverse graph edges and discover neighboring elements within a diagram.
- SVG Component Systems - Ships a component system for defining custom shapes and programmatic elements within a vector-based coordinate system.
- Domain-Specific SVG Components - Enables the creation of specialized visual elements and nested containers to represent domain-specific data structures.
- Diagram Element Nesting - Organizes shapes into parent-child containers that manage relative positioning and coordinate transformations.
- Diagram Interaction Monitoring - Provides a system for tracking and reacting to granular user interactions like zooming and touch gestures within the diagram.
- Event-Driven User Interactions - Captures raw browser input and translates it into semantic diagram events to trigger custom application logic.
- Diagramming Tools - Library for building interactive diagrams and visual representations.
- Game Engines - Library for creating interactive diagramming tools.
