@vosdux/react-visual-modeling-ts

v1.0.8

Published

8 months ago

Адаптация библиотеки react-visual-modeling под React 17.0.2 + typescript

Downloads

0High
0Medium
0Low

vosdux

✨ Feature

supports React 17.0.2
supports Typescript

📦 Install

npm install @vosdux/react-visual-modeling-ts

Подробнее здесь

Пример работы здесь

butterfly core

`Props`

node - таблица edge - связь

|Название|Описание|Тип| |----|----|----| |data| Данные для отрисовки | any | |width| Ширина canvas | number | string | |height| Высота canvas | number | string | |className| className | string | |columns| Описание колонокcolumns props | Array<columns> | |nodeMenu| Меню для node | Array<menu> | |edgeMenu| Меню для edge | Array<menu> | |actionMenu| Общее меню | action[] | |config| Конфигурацияconfig props | any | |emptyContent| Контент для пустой таблицы | string | JSX. Element| |emptyWidth| Ширина пустой таблицы | number | string| |beforeDeleteNode| Колбек удаления node |??? | |beforeDeleteEdge| Колбек удаления edge |??? | |onLoaded| Событие загрузки |(canvas) => void | |onChange| Событие изменения (например добавление связи)|(data) => void| |onFocusNode| Событие фокусировки на node |(node) => void| |onFocusEdge| Событие фокусировки на edge |(edge) => void| |onFocusCanvas| Событие фокусировки на canvas | () => void| |onDblClickNode| Событие двойного клика на node |(node) => void| |onDblClickEdge| Событие двойного клика на edge |(node) => void| |selectable| ??? | boolean | |onSelect| ??? | (nodes, edges) => void |

columns

|Название|Описание|Тип| |---|---|---| |title| Наименование | string | |key| Ключ | string | |width| Ширина | number | |primaryKey| Первичный ключ | boolean | |render| Рендер метод |(key) => void|

config

|Название|Описание|Тип| |---|---|---| | disableDeleting | Отключить возможность удаления node | boolean | | disableCollapse | Отключить возможность сворачивания node | boolean | | disableEdgeCreation | Отключить возможность создавать связи в ручную | boolean | | showActionIcon | Показать главное меню | boolean | | allowKeyboard | Разрешить события с клавиатуры | boolean | | titleRender | Рендер наменования node | (title) => JSX.Element | | titleExtIconRender | Рендер иконки в шапке node | (node) => JSX.Element | | labelRender | Рендер лейбла edge | (label) => JSX.Element | | minimap | Настройки миникарты | minimap prop { }| | autoLayout | Автоматическое позициониование | layout prop { }| | gridMode | Настройки холста | grid prop { }|

grid prop

|Название|Описание|Тип| |---|---|---| | isAdsorb | ??? | boolean | | theme | Настройки темы | theme prop { } |

grid theme

|Название|Описание|Тип| |---|---|---| | shapeType | Круги или линии | string | | gap | Отступы | number | | lineWidth | Ширина линии | boolean| | lineColor | Цвет линии | string | | circleRadiu | Радиус круга | number | | circleColor | Цвет круга | string |

layout prop

|Название|Описание|Тип| |---|---|---| | type | https://github.com/alibaba/butterfly/blob/master/docs/en-US/layout.md | string | | options | https://github.com/alibaba/butterfly/blob/master/docs/en-US/layout.md | any |

minimap

|Название|Описание|Тип| |---|---|---| | enable | Включить миникарту | boolean | | config | Кофигурация | minimap props |

minimap-config-prop

|Название|Описание|Тип| |---|---|---| |nodeColor |Цвет ноды |string| |activeNodeColor|Цвет активной ноды |string| |viewportStyle |css стили - не CssProperties|Record<string, string>|

Usage

import TableBuilding from "@vosdux/react-visual-modeling-ts";
import "@vosdux/react-visual-modeling-ts/dist/esm/index.css";

export const columns = [
  {
    key: "id",
    primaryKey: true,
  },
];

export const data = {
  nodes: [
    {
      id: "aaa",
      title: "aaa",
      top: 200,
      left: 200,
      fields: [
        {
          id: "field_1",
        },
      ],
    },
    {
      id: "bbb",
      title: "bbb",
      top: 400,
      left: 400,
      fields: [
        {
          id: "field_1",
        },
      ],
    },
  ],
  edges: [
    {
      id: 1,
      sourceNode: "aaa",
      targetNode: "bbb",
      source: "field_1",
      target: "field_1",
    },
  ],
};

<TableBuilding
  columns={columns}
  data={data}
/>

ICONS

В случае проблем с иконками, добавьте в свой файл стилей следующие шрифты

@font-face {font-family: "table-build-icon"; src: url('//at.alicdn.com/t/font_2369312_0qxuga95yni.eot?t=1613541691358'); /* IE9 / src: url('//at.alicdn.com/t/font_2369312_0qxuga95yni.eot?t=1613541691358#iefix') format('embedded-opentype'), / IE6-IE8 / url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAWYAAsAAAAACwgAAAVJAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDXgqHYIZwATYCJAMcCxAABCAFhU0HdRu9CcgekqRfBAooB8AVIgAgHv6b+7wvM0k+0O4WFKJDxxJRoaoDZCNqRDULu7bEx/9BNjU0TOnmTEyU/l5+nyu9iVB6E1lcy0dQ7yjCtAP5asw+f81h2h6gEhNyRu9qTW0QXSSueyHEbu4ng1QEktWdCkX+6oACqFPlKkx1jbM1Ea9eJrYj80ZpAi1TmUHWBzx9tUayOBBYcKzYw9aok5QXrKERqSbezeIJKDWKu6wLgMfFz8d3NiFKoUzisrYcvVats0/oy4+Q+E84kAhwZX/NMD8iYTEgE7cmW6+AVI0uBrX8v5nt0NLTUKg+5WeNZ91n056TL5/+/w90t8bXQ0+K1/Yvr1IqJKJCwQ6Ue8YqPqGJQPBJNGAYkgBbDmlCoOQzKVDw9WnIuyCv3+lhMhBLAIjXYsNSLyeVJMnydHk1FK3ElFEpRTZ7omrKeZByBq0J/7YCTgLDwMaNo2kbEc/nP08mnveM7yZ5nBwumPCK5jKahiPQkHwuQSeII1cp7hzQIjsxj2GGSR6CtNfmTWVKsXrHJVn9o2CiFTna2rrRLvxlF2U+pzni7Bfy4l1d/d04LtE7OEAlHbdZIEg84lME7XaELkcKjguQIZ0IYS0piMz/neUNpM6Tl2CYktps+Rviezi8WTy+WzGxl8TxbkI+rourUM48SxA8T+Q/jaeftOyDcXPOiqW3bnTeRzXhdoHiSjeG3e9F4NUexJ/EhbS+k3nWdCp++iL7uroATu6KSE+PK0DfvQ2J2wQMqQeq+RaHV+sA9SGFOdbYXq8ROKQRoOZXHEzkbD959gyl5q+m+hpBfKgyb6+WSUmyukNhjvWUjiqZnCScokQVeS4/ZymnLieVU7i0VreWKiwWuuL8ggCVS52hqlY5JTj9/+9MUc6Pqcd09IxfE3CdApCVVlbIwsPC/7cMXI98EpOebSFZe/dCUmJGaQBquXma1x562GonIqC2cMqs3bc7fffuNKbCO+PoDDqt5TQNgxfbViobLt+CiFp1GT34589B+FBcQQ82U10OwokbNybIB+kKnCD+eEe/sg7RNzcdG/c3qefSB+6oLNu9863BW4Acp4VUVFBaokapL6NZiC6bJRKxs3vR799R8u2jKXvhPvjtexVD96Loqd+2o2M6tO7oqA0QP6ggfrctg91tKWAFd+LPcyW7nd/nsx02keXrgJvPdbDO/6Yt8OVXmPo2GwRPg/BtwfTxZ/iau+IqW8dx8aJesbs6tDA8nfZDX9AivS0YYNiTvsN6ETuSpN8LjhXpB2wan0x3U/qf+3dceBn9OVPK7asolsF4zDVX9AxXZMBn/9AQX/wri8wjOfDGqTp7uyeM6aptMRgu0JJX+AN3jrq3v/BE9nzCAN5AoTYHkgEzaVa6QaltA1QGEqFlkcKP28asA0nkJhaaFhCmuwyFnt+QTPdXko2hDqVJ4e6vppSx0LIranNsmxtnW741hDkpyGmG4lxrXPVKPqnLPjCJnPqAlQjv+kFewZhaO3aHfijNAtwI1hZW4xO3ZCg9xgu1Dd5pXZ0LBTVWQ8A+yiNmC1U1NiQnl0V1eby3tCyYapDMrdStiXVSBOWIAnI0QDGHZbhZc26SLEcHjIhicyHAFMFa/oF4CmyeL2Xua2n6D5LKAg89HrBmwWoL6W3QbLXjtSyvVfKcqpPNLkjWpywNBJyLn7TZzAJV0/4Qsx05qWiL4diepTypgBuUxw3rz+UWtMSNqKOIFDnKqKKOhvpcpdWiuGJcXY8mDox3KjqorLI+7zcVI+MkN9uUmIncert6eWi02Xr4bswwPtpWCwAAAA==') format('woff2'), url('//at.alicdn.com/t/font_2369312_0qxuga95yni.woff?t=1613541691358') format('woff'), url('//at.alicdn.com/t/font_2369312_0qxuga95yni.ttf?t=1613541691358') format('truetype'), / chrome, firefox, opera, Safari, Android, iOS 4.2+ / url('//at.alicdn.com/t/font_2369312_0qxuga95yni.svg?t=1613541691358#table-build-icon') format('svg'); / iOS 4.1- / } @font-face { font-family: 'table-build-icon'; / project id 2369312 */ src: url('//at.alicdn.com/t/font_2369312_wsg9aeubvfs.eot'); src: url('//at.alicdn.com/t/font_2369312_wsg9aeubvfs.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_2369312_wsg9aeubvfs.woff2') format('woff2'), url('//at.alicdn.com/t/font_2369312_wsg9aeubvfs.woff') format('woff'), url('//at.alicdn.com/t/font_2369312_wsg9aeubvfs.ttf') format('truetype'), url('//at.alicdn.com/t/font_2369312_wsg9aeubvfs.svg#table-build-icon') format('svg'); }

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme