react design editor

React Design Editor

O React Design Editor é um módulo de reação, escrito em JavaScript/Typencript, que fornece dois recursos principais:

• Editor de imagem - Crie imagens no React, desenhe diagramas e organize composições usando o editor de imagens e salve o resultado em um dos vários formatos de exportação, fornece funcionalidade semelhante ao PowerPoint.
• Modelagem de Processos de Negócios (BPM) - Design Flowharts e Process Work Flows para reagir e exportar o modelo para o JSON, que pode ser importado para a ferramenta (Carregar/Salvar).

O módulo usa principalmente as bibliotecas Fabric.Js e React, mas uma lista completa das dependências necessárias pode ser encontrada abaixo.

Experimente hoje - o projeto está sendo desenvolvido continuamente para suportar uma variedade de funções diferentes.

Ver demo

Lista de recursos

• Adicione, remova, redimensione, reordenar, clone, copiar/colar e arrastar/soltar elementos
• Capacidade de desenho, com polígono, linha, setas e suporte de link
• Modo de visualização, dicas de ferramentas, funcionalidade em grupo/ungrupo e zoom
• Upload (com arrastar/soltar), importar e exportar para JSON ou imagem
• Corte de imagens, filtros de imagem, alinhamento, guias de alinhamento
• Snap to grid, menu de contexto, animação e elemento de vídeo
• Vários ícones em Picker e fontes de ícones do Google Fontes (20)
• Elemento HTML/CSS/JS, elemento iframe
• Suporte de animação, com efeitos de desbotamento / bounce / shake / scaling / rotação / flash
• Editor de código com html / css / js / visualização
• Vários modos de interação, incluindo GRASP, Seleção, Ctrl + Drag Grab
• Vários layouts, com modos fixos, responsivos, de tela cheia e grade
• SVG, elementos de gráfico e GIF
• Desfazer/refazer o suporte
• Wireframes - em desenvolvimento
• MAPO MULHER
• Governante - em desenvolvimento

Instalação

Execute npm install react-design-editor ou yarn add react-design-editor

Começando

1. Clone este projeto com git clone https://github.com/salgum1114/react-design-editor.git
2. Instale dependências com instalação ou yarn npm install
3. Execute o aplicativo com npm start ou yarn start
4. Abra seu navegador da web para http://localhost:4000

Pergunte ai

O React Design Editor AI ajudará você a entender melhor esse repositório.

Capturas de tela

Editor de mapas de imagem

1. Modo de layout fixo

2. Modo de layout responsivo

3. Modo de layout de tela inteira

4. Modo de visualização

Editor de fluxo de trabalho

❤️ Patrocinadores e apoiadores

Dependências

Dependência	Licença (s)
Reagir	Mit
Projeto de formiga	Mit
Fabric.js	Mit
MediaElement.js	Mit
React-aca	Mit
interact.js	Mit
anime.js	Mit
Webpack 4	Mit
Babel	Mit
Fontawesome5	Ícones (CC por 4.0), fontes (SIL OFL 1.1), Código (MIT)