# React图析组件(ReactCytoscape)

## 使用说明
## 安装
```bash
npm install cytoscape-react-fe-ml --save
```
## 引用
```js
import ReactCytoscape from 'cytoscape-react-fe-ml'
```
## Demo
[http://fe.mlamp.cn:3356/cytoscape](http://fe.mlamp.cn:3356/cytoscape)

## API说明
Property | Type | Default value | Description
:--- | :--- | :--- | :---
`width`|string||
`height`|string||
`layout`|object | string||布局，支持以下几种类型的布局方式："auto"-自动布局、"grid":-网格布局、"circle"-环形布局、"breadthfirst"-层次布局、"concentric"-同心轴布局
`pan`|shape||
`zoom`|number|1|画布的缩放系数
`boxSelect`|bool|false|是否开启区块选择，true-开启；false-不开启
`background`|string||背景
`hasNavigator`|bool|true|是否显示导航
`hasPanzoom`|bool|true|是否显示缩放控制条
`minZoom`|number|0.1|画布支持的最小缩放级别
`maxZoom`|number|6|画布支持的最大缩放级别
`zoomBig`|number|1|画布缩放等级分为四级，大、正常、小、微小。针对不同的等级可以配置不同的显示效果。zoomBig指定缩放等级为“大”的缩放级别的下限，超过此设置的缩放级别即为大
`zoomNormal`|number|0.5|zoomNormal指定缩放等级为“正常”的缩放级别的下限，超过此设置的缩放级别即为正常
`zoomSmall`|number|0.2|zoomSmall指定缩放等级为“小”的缩放级别的下限，超过此设置的缩放级别即为小，小于此设置的缩放级别为微小
`graphStyle`|object|null|图析画布的样式配置，可以通过selector来设置显示样式，请参考demo
`elements`|object||画布中的数据
`floatingLayer`|object|null|浮框
`floatingLayerConfig`|object|null|浮框的模板
`onChangeDisplay`|func||画布中的状态改变时的回调函数（例：布局变化、选中改变、位置改变等），参数chartData
`onLayoutStop`|func||布局结束时的回调函数
`onCxtTap`|func||点击右键时的回调函数
`onClick`|func||点击时的回调函数
`onDblClick`|func||点击双击时的回调函数
`afterRender`|func|null|图析组件渲染完成后的回调
`className`|string|null|样式名
`wheelSensitivity`|number|0.1|
`autoFit`|bool|false|
`fitMaxZoom`|number|1|
`onChangeZoom`|func||
`onNavigatorMouseUp`|func||

### elements 画布中的数据 可参考[Cytoscape.js的API文档](http://js.cytoscape.org/#core/initialisation)

```
    { //画布中的元素
        nodes:[{            //点
            data: {         //数据
                id: "n0",               //id
                name:'男性实体人',      //name属性，默认的style中配置了此属性作为显示名
                bgImages:{              //背景图片
                    image:'../../../../images/graphicon/entity-graphicon-human.svg',   //背景图片，支持数组，可参考
                    positionX:'50%',               //背景图片的x轴位置，多个用空格分隔
                    positionY:'50%'                //背景图片的y轴位置，多个用空格分隔
                }
            },
            position: { x: 100, y: 100 },       //位置
            classes:"blue"                      //类
        }, {
            data: { id: "n1",name:'女性重点人', bgImages:{image:'../../../../images/graphicon/entity-graphicon-human.svg',positionX:'50%',positionY:'50%'}}, position: { x: 200, y: 200 },classes:'shape-hexagon red'
        }],
        edges:[{                //边
            data: {             //数据
                id: "e0",       //id
                source: "n0",   //源点的id
                target: "n1"    //目标点的id
            },
            classes:"directed"  //类
        }]
    }
```

### graphStyle 画布样式  可参考[Cytoscape.js的API文档-Style](http://js.cytoscape.org/#style)
```
const defaultStyle = {
    /*---------- 实体 ----------*/
    'core': {
        'selection-box-color': 'rgba(72, 133, 184, 0.2)'
    },
    /*----------- 点 -------------*/
    'node': {
        'width': '73px',
        'height': '73px',
        'shape': 'ellipse',
        'border-width':'3px',
        'border-opacity':1,
        'border-color':'#3a9caa',
        'background-width': function(ele){return ele.data('bgImages').width ? ele.data('bgImages').width : 'auto' },
        'background-height': function(ele){return ele.data('bgImages').height ? ele.data('bgImages').height : 'auto' },
        'background-color': '#3a9caa',
        'background-opacity': 1,
        'background-repeat': 'no-repeat',
        'background-fit': function(ele){return ele.data('bgImages').fit ? ele.data('bgImages').fit : 'none' },
        'background-image':'data(bgImages.image)',
        'background-position-x': 'data(bgImages.positionX)',
        'background-position-y': 'data(bgImages.positionY)',
        'content': 'data(name)',
        'color': '#707070',
        'font-family': 'Microsoft Yahei',
        'font-size': '12px',
        'text-halign': 'center',
        'text-valign': 'bottom',
        'text-wrap': 'wrap',
        'padding-bottom': '4px',
        'padding-left': '4px',
        'background-image-crossorigin':'anonymous',
        'text-margin-y':'8px'
    },
    'node:locked': {            //锁定
        'border-color': "#666666"
    },
    'node:selected': {          //选中
        "border-color": "#fbba0a",
    },
    'node.shape-hexagon': {     //六边形
        'shape': 'polygon',
        'shape-polygon-points': '0 1, 0.8660254037844386 0.5, 0.8660254037844386 -0.5, 0 -1, -0.8660254037844386 -0.5, -0.8660254037844386 0.5'
    },
    'node.shape-rectangle': {   //正方形
        'shape': 'roundrectangle',
        'width': '50px',
        'height': '50px',
    },
    'node.shape-rectangle:selected': {
        'width':'53px',
        'height':'53px',
    },
    /*---------- 关系 ----------*/
    'edge': {
        'width': '2px',
        'line-color': '#9bb7f0',
        'content': 'data(event)',
        'color': '#707070',
        'font-family': 'Microsoft Yahei',
        'font-size': '12px',
        'min-zoomed-font-size': '12px',
        'edge-text-rotation': 'autorotate',
        'curve-style': 'bezier',
        'text-background-color': '#f6f7f9',
        'text-background-opacity': '1',
        'text-background-shape': 'roundrectangle'
    },
    'edge:selected': {
        'line-color': '#fbba0a'
    },

    /*---------- zoom变化 ----------*/
    '.hidtxt': {
        'content': ''
    },
    '.showbigger': {
        'content': function(ele){return ele.data('showbigger') || ele.data('name')}
    },
    '.showsmall':{
        'content': ''
    },
    'node.showtiny:selected':{
        'border-width':'10px',
    },
    //有向边
    'edge.directed': {
        'line-color': '#9bb7f0',
        'target-arrow-shape': 'triangle',
        'target-arrow-color': '#9bb7f0'
    },
    'edge.directed:selected': {
        'line-color': '#fbba0a',
        'target-arrow-shape': 'triangle',
        'target-arrow-color': '#fbba0a'
    },
    '.hide': {
        'opacity': '0'
    }
};
```

### onChangeDisplay
参数
* chartData -- cytoscape的json方法返回的数据，排除掉style和boxSelectionEnabled
* operate -- 传入的graphData的operate

### onCxtTap
参数
* eventPosition - 事件的原始位置，相对于浏览器窗口
* position - 事件在画布中的位置
* eventFrom - 右键点击的对象。entity--点  relation--边  empty--空白处


## 开发说明

```bash
npm install
```

## 启动调试环境
windows操作系统使用git bash

```bash
npm run storybook
```