joint

JointJS — библиотека диаграмм JavaScript, обеспечивающая исключительные пользовательские интерфейсы.

JointJS — это протестированная и проверенная библиотека диаграмм JavaScript / Typescript , которая помогает разработчикам и компаниям любого размера быстрее и увереннее создавать визуальные приложения, а также приложения с малым количеством кода и без кода. Это гибкий инструмент, с помощью которого можно создать широкий спектр пользовательских интерфейсов (приложения для интерактивного построения диаграмм, инструменты рисования, визуализации данных, пользовательские интерфейсы для систем мониторинга и многое другое). Он может стать основополагающим слоем вашего следующего приложения и помочь вам вывести свою идею на рынок за несколько дней, а не месяцев или лет.

Дополнительную информацию , примеры и документацию можно найти на сайте Jointjs.com.

? Начните с учебных пособий.

Чтобы задать вопрос, поделиться отзывом или принять участие в обсуждении с другими членами сообщества, посетите наши обсуждения на GitHub.

Дополнительные примеры доступны на CodePen.

Ознакомьтесь с нашей документацией по интеллект-картам.

Функции

• основные элементы диаграммы (прямоугольник, круг, эллипс, текст, изображение, путь)
• готовые к использованию элементы известных диаграмм (ERD, оргструктура, FSA, UML, PN, DEVS, ...)
• пользовательские элементы диаграммы на основе SVG или программной визуализации
• соединение элементов диаграммы ссылками или ссылки со ссылками
• настраиваемые ссылки, их стрелки и метки
• настраиваемые формы ссылок (якоря, точки подключения, вершины, маршрутизаторы, соединители)
• свойства и данные пользовательского элемента
• импорт/экспорт из/в формат JSON
• настраиваемые порты элементов (внешний вид и положение, распределенные по фигурам или позиционированные вручную)
• богатый графический API (обход, dfs, bfs, поиск соседей, предшественников, элементов в точке,...)
• детальная интерактивность
• иерархические диаграммы (контейнеры, встроенные элементы, дочерние и родительские отношения)
• инструменты для элементов и ссылок (кнопки, значки состояния, инструменты для изменения формы ссылок, ...)
• маркеры (обеспечивают визуальный акцент на ваших элементах)
• автоматические макеты (автоматическое расположение элементов и ссылок)
• сильно управляемый событиями (реагировать на любое событие, происходящее внутри диаграммы)
• увеличить/уменьшить масштаб
• сенсорная поддержка
• MVC-архитектура
• на основе SVG
• ... многое другое

Поддерживаемые браузеры

• Последняя версия Google Chrome (включая мобильные устройства)
• Последняя версия Firefox
• Последняя версия Safari (включая мобильные устройства)
• Последняя версия Microsoft Edge
• Последняя опера

Среда разработки

Если вы хотите работать над JointJS локально, для начала используйте следующие рекомендации.

Зависимости

Убедитесь, что в вашей системе установлены следующие зависимости:

• Node.js
• grunt-cli
• мерзавец
• пряжа

Убедитесь, что вы используете версию Yarn >= 2.0.0, чтобы у вас был доступ к функциональности диапазонов рабочей области Yarn. Если вы используете Volta, оно автоматически прочитает это ограничение из package.json .

Настраивать

Клонируйте этот репозиторий git:

git clone https://github.com/clientIO/joint.git

Перейдите в joint каталог:

 cd joint

Установите все зависимости:

yarn install

Сгенерируйте файлы дистрибутива из исходного кода:

yarn run dist

Теперь вы готовы просмотреть наши примеры приложений, которые сочетают в себе функциональность нескольких пакетов JointJS:

 cd examples

Дополнительные инструкции см. в файле README.md каждого приложения.

Вы также можете просмотреть демонстрационные приложения нашего пакета JointJS Core:

 cd packages/joint-core/demo

Большинство демонстраций можно запустить, просто открыв файл index.html в браузере. Некоторые демо-версии содержат дополнительные инструкции, которые вы можете найти в соответствующих файлах README.md .

Тесты

Чтобы запустить все тесты:

yarn run test

Чтобы запустить только тесты на стороне сервера:

yarn run test-server

Чтобы запустить только тесты на стороне клиента:

yarn run test-client

Чтобы запустить только тесты TypeScript:

yarn run test-ts

Ворс

Чтобы проверить наличие ошибок линтинга в каталогах src и types :

yarn run lint

Чтобы автоматически исправить ошибки, запустите eslint для каталогов src и types :

yarn run lint-fix

Отчеты о покрытии кода

Чтобы вывести отчет о покрытии кода в формате HTML:

yarn run test-coverage

Чтобы вывести отчет о покрытии кода в формате lcov:

yarn run test-coverage-lcov

Результаты всех модульных тестов будут сохранены в каталоге packages/joint-core/coverage .

Авторы

Лицензия

Библиотека JointJS распространяется под лицензией Mozilla Public License 2.0.

Copyright © 2013-2024 клиент IO