react design editor

Editor de diseño react

React Design Editor es un módulo para React, escrito en JavaScript/TypeScript que proporciona dos características principales:

• Editor de imágenes: cree imágenes en React, dibuje diagramas y organice composiciones utilizando el editor de imágenes y guarde el resultado en uno de varios formatos de exportación, proporciona una funcionalidad similar a PowerPoint.
• Modelado de procesos de negocios (BPM): diseñe diagramas de flujo y procese flujos de trabajo en React y exporte el modelo a JSON, que puede importarse a la herramienta (carga/guardar).

El módulo utiliza principalmente las bibliotecas de diseño, fabric.js y react, pero a continuación se puede encontrar una lista completa de dependencias requeridas.

Pruébelo hoy: el proyecto se está desarrollando continuamente para apoyar una variedad de funciones diferentes.

Ver demostración

Lista de funciones

• Agregar, eliminar, cambiar el tamaño, reordenar, clonar, copiar/pegar y arrastrar/soltar elementos
• Capacidad de dibujo, con polígono, línea, flechas y soporte de enlaces
• Modo de vista previa, información sobre herramientas, funcionalidad de grupo/desagrado y zoom
• Cargar (con arrastrar/soltar), importar y exportar a JSON o imagen
• Recorte de imágenes, filtros de imagen, alineación, guías de alineación
• Snap to Grid, menú contextual, animación y elemento de video
• Varios íconos en iconos seleccionadores y fuentes de Google Fonts (20)
• Elemento html/css/js, elemento iframe
• Soporte de animación, con Fade / Bounce / Shake / Scaling / Rotation / Flash Effects
• Editor de código con HTML / CSS / JS / Vista previa
• Varios modos de interacción, que incluyen agarre, selección, ctrl + arrastre
• Múltiples diseños, con modos fijos, receptivos, de pantalla completa y cuadrícula
• SVG, gráfico y elementos GIF
• Soporte de deshacer/rehacer
• Wireframes - en desarrollo
• Mapa múltiple: en desarrollo
• Regla - En el desarrollo

Instalación

Ejecutar npm install react-design-editor o yarn add react-design-editor

Empezando

1. Clone Este proyecto con git clone https://github.com/salgum1114/react-design-editor.git
2. Instalar dependencias con npm install o yarn
3. Ejecute la aplicación con npm start o yarn start
4. Abra su navegador web a http://localhost:4000

Pregúntale a AI

React Design Editor AI lo ayudará a comprender mejor este repositorio.

Capturas de pantalla

Editor de mapas de imágenes

1. Modo de diseño fijo

2. Modo de diseño receptivo

3. Modo de diseño de pantalla completa

4. Modo de vista previa

Editor de flujo de trabajo

❤️ Patrocinadores y patrocinadores

Dependencias

Dependencia	(S) licencia (s)
Reaccionar	MIT
Diseño de hormigas	MIT
Tela	MIT
MediaElement.js	MIT
Reaccionar	MIT
interact.js	MIT
anime.js	MIT
Webpack 4	MIT
Babel	MIT
fontawesher5	Iconos (CC por 4.0), fuentes (SIL OFL 1.1), Código (MIT)