English | 简体中文

✨ Feature

• support custom field properties
• support custom title, title Icon
• support the shrinking / expanding state of nodes, and show the mapping relationship after shrinking
• support custom edge attributes and custom edge label
• support the node, field's status of hover, focus, linked and full chain highlight
• support the right-click menu of node and edge
• support minimap and highlight state of minimap
• support custom empty field content

📦 Install

npm install react-visual-modeling

API：

VisualModeling properties

| Property | Description | Type | Default | |:-------------:|:-------------------------------------------------------------------:|:----------------------------------------------------------------:|:-------:| | data | data | any | - | | width | component width | number | string | - | | height | component height | number | string  | - | | className | component className | string | - | | columns | property settings for each column of fieldscolumns Prop | Array< columns> | - | | nodeMenu | Node Right-click Menu Configuration | Array< menu> | [ ] | | edgeMenu | Edge Right-click Menu Configuration | Array< menu> | [ ] | | config | As configured aboveconfig Prop | any | - | | emptyContent | show content when table field is empty | string | JSX. Element | - | | emptyWidth | table container width when table field is empty | number | string | - | | onLoaded | canvas loaded event | (canvas) => void | - | | onChange | canvas data change event | (data) => void | - | | onFocusNode | focus node events | (node) => void | - | | onFocusEdge | focus edge events | (edge) => void | - | | onFocusCanvas | focus canvas blank events | () => void | - | | onDblClickNode| double click node events | () => void | - |

columns

property settings for each column of fields

| Property | Description | Type | Default | |:----------:|:----------------------------------------------------------------------------------:|:-----------------------------------------:|:-------:| | title | name of each column | string | - | | key | the unique mark of each column, corresponding to the key value on the data | string | - | | width | width of each column | number | - | | primaryKey | whether the value corresponding to the key in this column is used as a unique sign | boolean | - | | render | Customize the style of each column | (key) => void | - |

menu

right-click menu configuration for'Node/Edge'

| Property | Description | Type | Default | |:--------:|:---------------------------------------:|:-----------------------------------------------:|:-------:| | title | name of each column | string | - | | key | unique flag for each column menu | string | - | | render | Customize the style of each column menu | (key) => void | - | | onClick | Click Callback for Each Column | (key, data) => void | - |

config

the configuration of canvas

| Property | Description | Type | Default | |:------------------:|:------------------------------------------------------------------------------:|:---------------------------------------------------------------:|:-------:| | showActionIcon | whether show operation icon: zoom in, zoom out, focus | boolean | - | | allowKeyboard | allow keyboard to delete events. Todo: supports shift multiple selection later | boolean | - | | collapse | whether to allow node shrinkage | collapse Prop { } | - | | titleRender | rendering methods for node's title | (title) => void | - | | titleExtIconRender | rendering method of buttons on right side of node | (node) => void | - | | labelRender | rendering method of edge's label | (label) => void | - | | minimap | whether to show minimap | minimap Prop { } | - |

collapse

the configuration of node contraction

| Property | Description | Type | Default | |:-----------:|:-------------------------------:|:-----------------------------------:|:------------------------------------:| | enable | whether to allow node shrinkage | boolean | - | | defaultMode | default presentation form | string | show as 'expand/collapse' by default |

minimap

the configuration of minimap

| Property | Description | Type | Default | |:--------:|:-----------------------:|:---------------------------------------------------------------------------:|:-------:| | enable | whether to show minimap | boolean | - | | config | the config of minimap | minimap Config Prop { } | - |

minimap Config

the config of minimap

| Property | Description | Type | Default | |:---------------:|:-----------------:|:-------------------------------:|:-------:| | nodeColor | node color | any | - | | activeNodeColor | node active color | any | - |

🔗API

import VisualModeling from 'react-visual-modeling';
import 'react-visual-modeling/dist/index.css';
<VisualModeling
  data={data}
  column={column}
  nodeMenu={menu}
  edgeMenu={menu}
  config={config}
  onLoaded={() => {}}
  onChange={() => {}}
  onFocusNode={() => {}}
  onFocusEdge={() => {}}
  onFocusCanvas={() => {}}
  onDblClickNode={() => {}}
>
</VisualModeling>

🔗API

interface columns { // property settings for each column of fields
  title ? : string, // name of each column
  key: string, // the unique mark of each column, corresponding to the key value on the data
  width ? : number, // width of each column
  primaryKey: boolean, // whether the value corresponding to the key in this column is used as a unique sign
  render ? (value: any, rowData: any) : void // Customize the style of each column
}

interface config { // 
  showActionIcon ? : boolean, // whether show operation icon: zoom in, zoom out, focus
  allowKeyboard ? : boolean, // allow keyboard to delete events. Todo: supports shift multiple selection later
  collapse: {
    enable: boolean, // allow node shrinkage
    defaultMode: string // show as 'expand/collapse' by default
  },
  titleRender ? (title: JSX.Element) : void, // rendering methods for node's title
  titleExtIconRender ? (node: JSX.Element) : void, // rendering method of buttons on right side of node
  labelRender ? (label: JSX.Element) : void, // rendering method of edge's label
  minimap: { // whether to show minimap
    enable: boolean,
    config: {
      nodeColor: any, // node color
      activeNodeColor: any // active node color
    }
  }
}

interface menu { // right-click menu configuration for'Node/Edge'
  title ? : string, // name of each column
  key: string, // unique flag for each column menu
  render ? (key: string) : void, // Customize the style of each column menu
  onClick ? (key: string, data: any) : void, // Click Callback for Each Column
}

interface props {
  width ? : number | string, // component width
  height ? : number | string, // component height
  className ? : string, // component className
  columns: Array < columns > , // similar to antd's table column concept
  nodeMenu: Array < menu > , // Node Right-click Menu Configuration
  edgeMenu: Array < menu > , // Edge Right-click Menu Configuration
  config: config, // As configured above
  data: any, // data
  emptyContent ? : string | JSX.Element; // show content when table field is empty
  emptyWidth ? : number | string; // table container width when table field is empty
  onLoaded(canvas: any): void, // canvas loaded event
  onChange(data: any): void, // canvas data change event
  onFocusNode(node: any): void, // focus node events
  onFocusEdge(edge: any): void, // focus edge events
  onFocusCanvas(): void, // focus canvas blank events
};

If you need more customized requirements, you can refer to issue or butterfly to customize your needs