@vosdux/react-visual-modeling-ts

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

✨ 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

menu

Название	Описание	Тип
title	Наименование	string
key	Ключ	string
render	Рендер метод	(key) => void
onClick	Клик	(key, data) => 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'); }