react design editor

React Design Editor

React Design Editor est un module pour React, écrit en JavaScript / TypeScript qui fournit deux fonctionnalités principales:

• Éditeur d'image - Créer des images dans React, dessiner des diagrammes et organiser des compositions à l'aide de l'éditeur d'image et enregistrer le résultat dans l'un des formats d'exportation, fournit des fonctionnalités similaires à PowerPoint.
• Modélisation des processus métier (BPM) - Concevoir des organigrammes et traiter les workflows dans React et exporter le modèle vers JSON, qui peut être importé dans l'outil (charge / enregistrement).

Le module utilise principalement les bibliothèques de conception de fourmi, tissu.js et react, mais une liste complète des dépendances requises peut être trouvée ci-dessous.

Essayez-le aujourd'hui - le projet est continuellement développé pour prendre en charge une variété de fonctions différentes.

Afficher la démo

Liste de fonctionnalités

• Ajouter, supprimer, redimensionner, réorganiser, cloner, copier / coller et glisser / déposer des éléments
• Capacité de dessin, avec polygone, ligne, flèches et support de lien
• Mode d'aperçu, fonctionnalités d'info-bulle, fonctionnalité de groupe / non group et de zoom
• Télécharger (avec glisser / drop), importer et exporter vers JSON ou Image
• Recadrage d'images, filtres d'image, alignement, guides d'alignement
• SNAP à la grille, menu contextuel, animation et élément vidéo
• Diverses icônes dans le cueilleur d'icônes et les polices de Google Fonts (20)
• Élément HTML / CSS / JS, élément iframe
• Prise en charge de l'animation, avec effets de fondu / rebond / shake / échelle / rotation / flash
• Éditeur de code avec HTML / CSS / JS / Aperçu
• Divers modes d'interaction, y compris la saisie, la sélection, le ctrl + glisser
• Multipliés, avec des modes fixes, réactifs, plein écran et de grille
• Éléments SVG, graphique et GIF
• Annuler / refaire
• Wireframes - en développement
• Carte multiple - en développement
• Règle - en développement

Installation

Exécuter npm install react-design-editor ou yarn add react-design-editor

Commencer

1. Clone ce projet avec git clone https://github.com/salgum1114/react-design-editor.git
2. Installez les dépendances avec l'installation ou yarn npm install
3. Exécutez l'application avec npm start ou yarn start
4. Ouvrez votre navigateur Web à http://localhost:4000

Demandez à l'AI

React Design Editor AI vous aidera à mieux comprendre ce référentiel.

Captures d'écran

Éditeur de carte d'image

1. Mode de mise en page fixe

2. Mode de mise en page réactif

3. Mode de mise en page plein écran

4. Mode d'aperçu

Éditeur de workflow

❤️ Sponsors et bailleurs de fonds

Dépendances

Dépendance	Licence (s)
Réagir	Mit
Conception de fourmi	Mit
Tissu.js	Mit
MediaElement.js	Mit
Réagir	Mit
interact.js	Mit
anime.js	Mit
Webpack 4	Mit
Babel	Mit
Fontawesome5	Icônes (CC par 4.0), polices (Sil ofL 1.1), code (MIT)