react design editor

Редактор дизайна React

React Design Editor - это модуль для React, написанный в JavaScript/TypeScript, который предоставляет две основные функции:

• Редактор изображений - Создайте изображения в React, нарисуйте диаграммы и распорядите композиции с использованием редактора изображений и сохраните результат в одном из нескольких форматов экспорта, предоставляет функциональность, аналогичную PowerPoint.
• Моделирование бизнес -процессов (BPM) - проектирование блок -схем и рабочие процессы процесса в React и экспортировать модель в JSON, которые могут быть импортированы в инструмент (Load/Save).

Модуль в первую очередь использует дизайн муравья, Fabric.js и реагирование библиотек, но можно найти полный список необходимых зависимостей.

Попробуйте сегодня - проект постоянно разрабатывается для поддержки различных различных функций.

Посмотреть демо

Список функций

• Добавить, удалить, изменить размер, переупорядочить, клонировать, копировать/вставить и перетаскивать элементы
• Возможность рисования, с полигоном, линией, стрелами и поддержкой ссылок
• Режим предварительного просмотра, подсказки инструментов, групповая/негруппа и функциональность масштабирования
• Загрузить (с перетаскиванием), импорт и экспорт в JSON или изображение
• Обращение с изображением, фильтры изображений, выравнивание, руководства по выравниванию
• SNACK TO GRID, Контекстное меню, анимацию и видео -элемент
• Различные значки в сборщике значков и шрифтов от шрифтов Google (20)
• Html/css/js -элемент, элемент iframe
• Поддержка анимации, с эффектами FADE / BOUNCE / SHAKE / SCASING / RETATION / FLASH
• Редактор кода с HTML / CSS / JS / Preview
• Различные режимы взаимодействия, включая захват, выбор, Ctrl + Grab Grab
• Несколько макетов с фиксированными, отзывчивыми, полноэкранными режимами и режимами сетки
• SVG, диаграмма и GIF -элементы
• Отмен/повторная поддержка
• Каркасы - в разработке
• Несколько карт - в разработке
• Правитель - в разработке

Установка

Запустить npm install react-design-editor или yarn add react-design-editor

Начиная

1. Клонировать этот проект с git clone https://github.com/salgum1114/react-design-editor.git
2. Установите зависимости с установкой или yarn npm install
3. Запустите приложение с помощью npm start или yarn start
4. Откройте свой веб -браузер на http://localhost:4000

Спросите AI

React Design Editor AI поможет вам лучше понять этот репозиторий.

Скриншоты

Редактор карт изображений

1. Фиксированный режим макета

2. Режим отзывчивого макета

3. Режим макета полного экрана

4. Режим предварительного просмотра

Редактор рабочего процесса

❤ спонсоры и спонсоры

Зависимости

Зависимость	Лицензия (ы)
Реагировать	Грань
Муравей дизайн	Грань
Fabric.js	Грань
MediaElement.js	Грань
Реагировать	Грань
Interact.js	Грань
Anime.js	Грань
WebPack 4	Грань
Вавилон	Грань
Fontawesome5	Значки (CC по 4,0), шрифты (sil Ofl 1.1), код (MIT)