react design editor

React Design Editor

React Designeditor ist ein Modul für React, das in JavaScript/TypeScript geschrieben wurde und zwei primäre Funktionen bietet:

• Bildeditor - Erstellen Sie Bilder in React, zeichnen Sie Diagramme und ordnen Sie Kompositionen mithilfe des Bildeditors an und speichern Sie das Ergebnis in einem von mehreren Exportformaten, bietet Funktionen ähnlich wie PowerPoint.
• Business Process Modeling (BPM) - Konstruktionsflussdiagramme und Prozess -Workflows in React und Exportieren des Modells in JSON, das in das Tool importiert werden kann (Laden/Speichern).

Das Modul verwendet in erster Linie die Bibliotheken mit dem ANT -Design, Fabric.js und React -Bibliotheken. Im Folgenden finden Sie jedoch eine vollständige Liste der erforderlichen Abhängigkeiten.

Probieren Sie es noch heute aus - das Projekt wird kontinuierlich entwickelt, um eine Vielzahl verschiedener Funktionen zu unterstützen.

Demo anzeigen

Feature -Liste

• Fügen Sie Elemente hinzu, ziehen Sie/Drop/Drop -Elemente hinzufügen, ändern, neu ordnen, klonen, kopieren/einfügen und ziehen/ab Drop/Drop
• Zeichnungsfähigkeit mit Polygon, Linie, Pfeilen und Linkunterstützung
• Vorschau -Modus, Tooltips, Gruppen-/Ungruppen- und Zoomfunktionalität
• Hochladen (mit Drag/Drop), importieren und in JSON oder Bild exportieren
• Bildfutter, Bildfilter, Ausrichtung, Ausrichtungsleitfäden
• SNAP TO GRID, Kontextmenü, Animation und Videoelement
• Verschiedene Symbole in Icon Picker und Schriftarten von Google Fonts (20)
• HTML/CSS/JS -Element, Iframe -Element
• Animationsunterstützung mit Fade / Bounce / Shake / Skaling / Rotation / Flash -Effekten
• Code -Editor mit HTML / CSS / JS / Preview
• Verschiedene Interaktionsmodi, einschließlich Griff, Auswahl, Strg + Drag Grab
• Mehrere Layouts mit festen, reaktionsschnellen, Vollbild- und Netzmodi
• SVG-, Diagramm- und GIF -Elemente
• Unterstützung/Wiederholung
• Wireframes - in der Entwicklung
• Multiple Map - in der Entwicklung
• Herrscher - in der Entwicklung

Installation

Führen Sie npm install react-design-editor oder yarn add react-design-editor

Erste Schritte

1. Klonen Sie dieses Projekt mit git clone https://github.com/salgum1114/react-design-editor.git
2. Installieren Sie Abhängigkeiten mit npm install oder yarn
3. Führen Sie die App mit npm start oder yarn start aus
4. Öffnen Sie Ihren Webbrowser für http://localhost:4000

Fragen Sie Ai

React Design Editor AI hilft Ihnen dabei, dieses Repository besser zu verstehen.

Screenshots

Bildkarte Editor

1. Layout -Modus festgelegt

2. Responsive Layout -Modus

3. Layout -Modus Vollbildmodus

4. Vorschau -Modus

Workflow Editor

❤️ Sponsoren und Unterstützer

Abhängigkeiten

Abhängigkeit	Lizenz (en)
Reagieren	MIT
Ameisendesign	MIT
Fabric.js	MIT
Medienelement.js	MIT
React-Ace	MIT
interagieren.js	MIT
Anime.js	MIT
Webpack 4	MIT
Babel	MIT
fontAwesome5	Symbole (CC von 4.0), Schriftarten (SIL OFL 1.1), Code (MIT)