{"id":24755149,"url":"https://github.com/gravity-ui/graph","last_synced_at":"2025-10-11T01:31:23.620Z","repository":{"id":257807201,"uuid":"826234730","full_name":"gravity-ui/graph","owner":"gravity-ui","description":null,"archived":false,"fork":false,"pushed_at":"2025-01-23T11:49:55.000Z","size":1997,"stargazers_count":17,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-01-23T12:29:07.001Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gravity-ui.png","metadata":{"files":{"readme":"README-ru.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-09T10:14:56.000Z","updated_at":"2025-01-23T11:50:00.000Z","dependencies_parsed_at":"2024-10-02T13:36:09.458Z","dependency_job_id":"c56d917c-625e-44ea-9fb1-0362f5cce85b","html_url":"https://github.com/gravity-ui/graph","commit_stats":null,"previous_names":["gravity-ui/graph"],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gravity-ui%2Fgraph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gravity-ui%2Fgraph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gravity-ui%2Fgraph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gravity-ui%2Fgraph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gravity-ui","download_url":"https://codeload.github.com/gravity-ui/graph/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":236017790,"owners_count":19081980,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-28T12:36:34.502Z","updated_at":"2025-10-11T01:31:23.615Z","avatar_url":"https://github.com/gravity-ui.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @gravity-ui/graph \u0026middot; [![npm package](https://img.shields.io/npm/v/@gravity-ui/graph)](https://www.npmjs.com/package/@gravity-ui/graph) [![Release](https://img.shields.io/github/actions/workflow/status/gravity-ui/graph/release.yml?branch=main\u0026label=Release)](https://github.com/gravity-ui/graph/actions/workflows/release.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://preview.gravity-ui.com/graph/)\n\n\u003e [Migration Guide from 0.x to 1.x →](docs/migration-guides/v0-to-v1.md)\n\nБиблиотека для визуализации графов, объединяющая преимущества двух подходов:\n- Canvas для быстрой отрисовки всего графа\n- HTML/React для удобного взаимодействия при приближении\n\nБольше не нужно выбирать между производительностью и интерактивностью. Идеально подходит для больших графов, блок-схем и редакторов на основе узлов.\n\n## Мотивация\n\nСовременные веб-приложения часто требуют сложной визуализации и интерактивности, но существующие решения обычно используют только одну технологию отрисовки:\n\n- **Canvas** обеспечивает высокую производительность для сложной графики, но ограничен в работе с текстом и взаимодействием с пользователем.\n- **HTML DOM** удобен для интерфейсов, но теряет производительность при сложной графике или большом количестве элементов.\n\n@gravity-ui/graph решает эту проблему, автоматически переключаясь между Canvas и HTML в зависимости от масштаба:\n- **При отдалении**: Использует Canvas для быстрой отрисовки всего графа\n- **Среднее приближение**: Показывает упрощенное представление с базовым взаимодействием\n- **При приближении**: Переключается на HTML/React компоненты для полноценного взаимодействия\n\n## Как это работает\n\nБиблиотека использует умную систему отрисовки, которая автоматически управляет переключением между Canvas и React компонентами:\n\n1. На низких уровнях масштаба всё отрисовывается на Canvas для производительности\n2. При приближении к детальному виду, компонент `BlocksList`:\n   - Следит за изменениями области просмотра и масштаба\n   - Определяет видимые блоки в текущей области (с запасом для плавного скролла)\n   - Создает React компоненты только для видимых блоков\n   - Обновляет список при скролле или изменении масштаба\n   - Удаляет React компоненты при отдалении\n\n```typescript\n// Пример использования React компонентов\nconst MyGraph = () =\u003e {\n  return (\n    \u003cGraphCanvas\n      graph={graph}\n      renderBlock={(graph, block) =\u003e (\n        \u003cMyCustomBlockComponent \n          graph={graph} \n          block={block}\n        /\u003e\n      )}\n    /\u003e\n  );\n};\n```\n\n[Storybook](https://preview.gravity-ui.com/graph/)\n\n## Установка\n\n```bash\nnpm install @gravity-ui/graph\n```\n\n## Примеры\n\n### Пример на React\n\n[Подробная документация по React компонентам](docs/react/usage.md)\n\n```typescript\nimport { Graph } from \"@gravity-ui/graph\";\nimport { GraphCanvas, GraphState, GraphBlock, useGraph } from \"@gravity-ui/graph/react\";\nimport React from \"react\";\n\nconst config = {};\n\nexport function GraphEditor() {\n  const { graph, setEntities, start } = useGraph(config);\n\n  useEffect(() =\u003e {\n    setEntities({\n      blocks: [\n        {\n          is: \"block-action\",\n          id: \"action_1\",\n          x: -100,\n          y: -450,\n          width: 126,\n          height: 126,\n          selected: true,\n          name: \"Блок #1\",\n          anchors: [],\n        },\n        {\n          id: \"action_2\",\n          is: \"block-action\",\n          x: 253,\n          y: 176,\n          width: 126,\n          height: 126,\n          selected: false,\n          name: \"Блок #2\",\n          anchors: [],\n        }\n      ],\n      connections: [\n        {\n          sourceBlockId: \"action_1\",\n          targetBlockId: \"action_2\",\n        }\n      ]\n    });\n  }, [setEntities]);\n\n  const renderBlockFn = (graph, block) =\u003e {\n    return \u003cGraphBlock graph={graph} block={block}\u003e{block.id}\u003c/GraphBlock\u003e;\n  };\n\n  return (\n    \u003cGraphCanvas\n      graph={graph}\n      renderBlock={renderBlockFn}\n      onStateChanged={({ state }) =\u003e {\n        if (state === GraphState.ATTACHED) {\n          start();\n          graph.zoomTo(\"center\", { padding: 300 });\n        }\n      }}\n    /\u003e\n  );\n}\n```\n\n### Пример на JavaScript\n\n```javascript\nimport { Graph } from \"@gravity-ui/graph\";\n\n// Создаем контейнер\nconst container = document.createElement('div');\ncontainer.style.width = '100vw';\ncontainer.style.height = '100vh';\ncontainer.style.overflow = 'hidden';\ndocument.body.appendChild(container);\n\n// Инициализируем граф с конфигурацией\nconst graph = new Graph({\n    configurationName: \"example\",\n    blocks: [],\n    connections: [],\n    settings: {\n        canDragCamera: true,\n        canZoomCamera: true,\n        useBezierConnections: true,\n        showConnectionArrows: true\n    }\n}, container);\n\n// Добавляем блоки и связи\ngraph.setEntities({\n    blocks: [\n        {\n            is: \"block-action\",\n            id: \"block1\",\n            x: 100,\n            y: 100,\n            width: 120,\n            height: 120,\n            name: \"Блок #1\"\n        },\n        {\n            is: \"block-action\",\n            id: \"block2\",\n            x: 300,\n            y: 300,\n            width: 120,\n            height: 120,\n            name: \"Блок #2\"\n        }\n    ],\n    connections: [\n        {\n            sourceBlockId: \"block1\",\n            targetBlockId: \"block2\"\n        }\n    ]\n});\n\n// Запускаем отрисовку\ngraph.start();\n\n// Центрируем вид\ngraph.zoomTo(\"center\", { padding: 100 });\n```\n\n## Демо\n\n- [Базовый пример](https://preview.gravity-ui.com/graph/?path=/story/stories-main-grapheditor--hundred-blocks)\n- [Пример с большим количеством элементов](https://preview.gravity-ui.com/graph/?path=/story/stories-main-grapheditor--five-thousands-blocks)\n- [Кастомизация блоков](https://preview.gravity-ui.com/graph/?path=/story/stories-main-grapheditor--custom-schematic-block)\n- [Кривые Безье](https://preview.gravity-ui.com/graph/?path=/story/stories-main-grapheditor--one-bezier-connection)\n- [Настройка связей](https://preview.gravity-ui.com/graph/?path=/story/api-updateconnection--default)\n\n## Документация\n\n### Основные концепции\n\n| Раздел | Описание | Документация |\n|--------|-----------|--------------|\n| Жизненный цикл компонентов | Инициализация, обновление, отрисовка и удаление компонентов | [Подробнее](docs/system/component-lifecycle.md) |\n| Механизм отрисовки | Процесс отрисовки и оптимизации | [Подробнее](docs/rendering/rendering-mechanism.md) |\n| Система событий | Обработка и распространение событий | [Подробнее](docs/system/events.md) |\n\n### Основные компоненты\n\n| Компонент | Описание | Документация |\n|-----------|-----------|--------------|\n| Canvas Graph | Основа для визуальных элементов с системой обнаружения | [Подробнее](docs/components/canvas-graph-component.md) |\n| Block Component | Базовые блоки для узлов графа | [Подробнее](docs/components/block-component.md) |\n| Connections | Создание и стилизация связей | [Подробнее](docs/connections/canvas-connection-system.md) |\n\n### Дополнительные возможности\n\n| Возможность | Описание | Документация |\n|-------------|-----------|--------------|\n| Система слоев | Управление z-index и отрисовка по слоям | [Подробнее](docs/rendering/layers.md) |\n| Группы блоков | Автоматическая и ручная группировка | [Подробнее](docs/blocks/groups.md) |\n| Планировщик | Управление кадрами и приоритетами обновлений | [Подробнее](docs/system/scheduler-system.md) |\n\n### Конфигурация\n\n| Тема | Описание | Документация |\n|------|-----------|--------------|\n| Настройки графа | Параметры конфигурации | [Подробнее](docs/system/graph-settings.md) |\n| API | Методы для управления графом | [Подробнее](docs/system/public_api.md) |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgravity-ui%2Fgraph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgravity-ui%2Fgraph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgravity-ui%2Fgraph/lists"}