MrBlenny/react-flow-chart
1,553 stele·305 fork-uri·TypeScript·MIT·4 vizualizărimrblenny.github.io/react-flow-chart/index.html↗
React Flow Chart
Această bibliotecă este un toolkit declarativ de componente React pentru construirea de interfețe interactive bazate pe noduri și diagrame de flux. Oferă elementele UI fundamentale necesare pentru a randa noduri care pot fi glisate și căi grafice vectoriale scalabile într-un browser web, permițând crearea de editoare vizuale complexe și reprezentări ale fluxurilor de date.
Biblioteca se distinge printr-o arhitectură strict stateless care se bazează pe gestionarea externă a stării. Utilizând un tipar de input controlat și injectarea de componente, aceasta decuplează logica diagramei de stocarea datelor, permițând dezvoltatorilor să mențină sursa de adevăr în propria stare a aplicației. Această abordare asigură că fiecare element vizual, de la noduri și porturi până la canvas-ul în sine, poate fi complet personalizat pentru a îndeplini cerințe specifice de design.
Toolkit-ul suportă o gamă largă de capabilități de interacțiune, inclusiv navigare bazată pe gesturi pentru panoramare și zoom pe canvas. De asemenea, oferă funcționalitate pentru desenarea conexiunilor între noduri și include un mod read-only pentru scenariile în care modificările structurale trebuie restricționate. Biblioteca este distribuită ca o colecție de componente reutilizabile concepute pentru integrarea în proiecte React existente.
Features
- Node-Based Diagramming Frameworks - Provides a visual interface for connecting nodes with links to represent data flows and complex relationships.
- External State Stores - Decouples diagram logic from data storage by relying on external state management for all diagram data.
- Flow Diagram Libraries - Offers a declarative library for building interactive node-based diagrams and flow charts within React applications.
- Stateful and Stateless Component Separation - Utilizes a stateless architecture where all data and interaction handlers are passed down via properties from the parent.
- State-Driven UI Rendering - Ensures visual diagrams remain synchronized with business logic through external state-driven rendering.
- Canvas Coordinate Transformations - Handles canvas panning and zooming by applying CSS transform matrices to the container based on user input.
- SVG Path Rendering - Renders visual connections between nodes using scalable vector graphics paths that update dynamically.
- Interactive Diagramming Libraries - Enables the creation of complex, zoomable, and pannable diagrams for exploring structured information.
- Component Style Customizations - Allows overriding default visual styles for nodes, ports, and links to meet specific design requirements.
- Custom Component Injection - Provides a mechanism for injecting custom React components into the diagram structure to define node and link appearance.
- Gesture Navigation - Supports gesture-based navigation including panning and zooming via scroll and pinch interactions.
- Node-Based Logic Interfaces - Supports building interactive interfaces where users connect blocks to define logic and data processing pipelines.
- React UI Component Libraries - Ships a collection of reusable React components for rendering interactive canvas elements.
- React Component Canvas Editors - Facilitates the development of tailored visual editors by allowing full control over interface element styling.
- Controlled Input Management - Implements a controlled input pattern where user interactions trigger external callbacks to maintain the application's source of truth.
