cysp-react

本组件是基于 cytoscapejs 的 react 版本，集成了 navigator、panzoom 插件

Installation

$ npm i cysp-react

Usage

import { Cytoscape } from 'cysp-react'

render() {
    const { title } = this.state
    return (
        <Cytoscape
            elements={elements} // 要渲染的数据
            layout={layoutConfig} // 布局
            layoutSelected={false} // true-仅对选中的元素应用布局，false-对所有的元素应用布局
            zoom={zoom} // 画布的缩放
            pan={pan} // 中心点位置
            stylesheet={graphStyle} // 画布上的样式定义
            minZoom={0.1} // 最小缩放率
            maxZoom={1.5} // 最大缩放率
            panzoom={false} // 是否显示缩放栏
            navigator // 是否显示导航器
            onReady={this.handleAfterRender} // 画布初始化
            onCxtTap={this.handleCxtTap} // 右键回调
            onRender={this.handleChangeDisplay} // 画布渲染/重新渲染时回调
            onClick={this.handleClick} // 点击时的回调
            onDblClick={this.onDblClick} // 双击时的回调
            events={{ // 其他事件参考https://js.cytoscape.org/#events
                    resize: this.handleResize,
                }}
            extensions={[ // 插件配置。name为插件名，extension为插件
                        { name: 'nodeHtmlLabel', extension: nodeHtmlLabel },
                        { name: 'euler', extension: euler }
                    ]}
        />
    )
}

API 说明

| Property | Type | Default value | Description | | :--------------- | :-------------------- | :-------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | elements | object | | 画布中的数据 | | layout | object | {name:'random'} | 布局，支持以下几种类型的布局方式："auto"-自动布局、"grid":-网格布局、"circle"-环形布局、"breadthfirst"-层次布局、"concentric"-同心轴布局 | | pan | object | | 中心点位置 | | panzoom | object | boolean | true | 是否显示缩放栏 false:不显示缩放栏 {// icon class namessliderHandleIcon: 'ml-cytoscape-panzoom-slider', zoomInIcon: 'ml-cytoscape-panzoom-plus', zoomOutIcon: 'ml-cytoscape-panzoom-minus', resetIcon: 'ml-cytoscape-panzoom-full', size: 'small', // mode: 'horizontal' 水平布局 mode: 'vertical' 垂直布局} | | navigator | boolean | false | 是否显示导航器 | | zoom | number | 1 | 画布的缩放系数 | | minZoom | number | | 画布支持的最小缩放级别 | | maxZoom | number | | 画布支持的最大缩放级别 | | stylesheet | object | {} | 画布上的样式定义 | | layoutSelected | boolean | true | true-仅对选中的元素应用布局，false-对所有的元素应用布局 | | onCxtTap | func | | 点击右键时的回调函数 | | onClick | func | | 点击时的回调函数 | | onDblClick | func | | 点击双击时的回调函数 | | onDestroy | func | | 销毁图析组件的回调函数 | | onReady | func | | 画布初始化 | | onRender | func | | 画布渲染/重新渲染时回调 |

onRender

参数

• data -- cytoscape 的 json 方法返回的数据

onCxtTap | onClick | onDblClick | onCxtTap

参数

• const {event,eventFrom,target} = args eventFrom = 'empty' 点击画布空白处 eventFrom = 'entity' 点击画布中节点 eventFrom = 'relation' 点击画布中的边

onReady

参数 *event 事件对象 https://js.cytoscape.org/#events/event-object

{
    cy : 对相应核心实例的引用
    target : 表示最先引发事件的元素或核心
    type：事件类型字符串（例如"tap"）
    namespace：事件命名空间字符串（例如"foo"for "tap.foo"）
    timeStamp ：事件的 Unix 纪元时间（以毫秒为单位）
}

图析画布样式定义

const stylesheet = {
    /*---------- 实体 ----------*/
    core: {
        'selection-box-color': graphColorConfig.selectionBoxColor,
    },
    /*----------  点 ----------*/
    'node.entity': {
        width: '33px',
        height: '33px',
        padding: '16px',
        shape: 'ellipse', // 形状
        'border-width': '3px',
        'border-opacity': 1,
        'border-color': 'data(bgColor)',
        'background-color': 'data(bgColor)',
        'background-opacity': 1,
        'background-repeat': 'no-repeat',
        // 'background-image': function (ele) { return ele.data('bgImage') ? ele.data('bgImage') : 'none' },
        'background-position-x': function (ele) { return ele.data('bgPositionX') ? ele.data('bgPositionX') : '50%' },
        'background-position-y': function (ele) { return ele.data('bgPositionY') ? ele.data('bgPositionY') : '50%' },
        'background-fit': function (ele) { return ele.data('fit') ? ele.data('fit') : 'contain' },
        'background-clip': function (ele) { return ele.data('clip') ? ele.data('clip') : 'none' },
        'background-width-relative-to': 'inner',
        'background-height-relative-to': 'inner',
        content(ele) {
            const text = ele.data('name').toString()
            return textDeal(text)
        },
        color: graphColorConfig.nodeTextColor,
        'font-family': '"siyuan", "Microsoft YaHei", "SimSun", "Roboto-Regular", "Helvetica Neue", helvetica, arial, sans-serif',
        'font-size': '12px',
        'text-halign': 'center',
        'text-valign': 'bottom',
        'background-image-crossorigin': 'anonymous',
        'text-margin-y': '8px',
        'overlay-color': '#000000',
        'text-wrap': 'wrap',
        'line-height': 1.5,
    },
    'node.important': {
        width: '58px',
        height: '58px',
    },
    'node.entity:selected, node.important:selected': {
        'border-color': graphColorConfig.nodeSelectedBorderColor,
        'text-background-color': graphColorConfig.nodeSelectedTextBgColor,
        'text-background-opacity': '0.2',
        'text-background-shape': 'rectangle',
        'text-background-padding': '2px',
    },
    // 分组的点
    'node.node-group': {
        width: '176px',
        height: '176px',
        'border-width': '1px',
        'border-color': '#D8D8D8',
        'background-color': '#FFFFFF',
        'text-valign': 'center',
        'text-margin-y': '0',
    },
    'node.node-group:selected': {
        'border-color': '#226EDA',
        'background-color': '#E5F0FF'
    },
    'node.dot': {
        width: '16px',
        height: '16px',
        // 'background-image': null,
        padding: 0,
        'border-width': 0
    },
    'node.path-node': {
        'border-color': '#666666',
    },
    'node.path-node:selected': {
        'border-color': graphColorConfig.nodeSelectedBorderColor,
    },
    'node.general-node': {
        width: '16px',
        height: '16px',
        // 'background-image': null,
        'background-color': '#cccccc',
        padding: 0,
        'border-width': 0
    },
    'node.center-entity': {
        'text-margin-y': 0,
        // width(ele){ return ele.data('name').length * 12 },
        color: '#ffffff',
        'text-halign': 'center',
        'text-valign': 'center',
        shape: 'round-rectangle',
        'line-height': 1,
        padding: '2px',
        width: 'label',
        height: 'label',
    },
    /*----------  关系 ----------*/
    edge: {
        width(ele) { return ele.data('edgeWeight') ? ele.data('edgeWeight') : '2px' },
        // width: 'data(edgeWeight)',
        'line-color': 'data(color)',
        content(ele) {
            const text = ele.data('name').toString()
            return textDeal(text)
        },
        color: '#111111',
        'font-family': '"siyuan", "Microsoft YaHei", "SimSun", "Roboto-Regular", "Helvetica Neue", helvetica, arial, sans-serif',
        'font-size': '12px',
        'min-zoomed-font-size': '12px',
        'edge-text-rotation': 'autorotate',
        'curve-style': 'bezier',
        'text-background-color': '#f4f5f6',
        'text-background-opacity': '1',
        'text-background-shape': 'roundrectangle',
        'text-background-padding': '3px',
        'target-arrow-color': 'data(color)',
        'line-style': 'solid'
    },
    'edge.edge-group': {
        width(ele) {
            const { edges } = ele.data('children')
            return edges[0].data.edgeWeight || '2px'
        },
        // color(ele) {
        //     const { edges } = ele.data('children')
        //     return edges[0].data.color
        // },
        'line-color': function (ele) {
            const { edges } = ele.data('children')
            return edges[0].data.color
        },
        'target-arrow-color': function (ele) {
            const { edges } = ele.data('children')
            return edges[0].data.color
        },
    },
    'edge.directed': {
        'target-arrow-shape': 'triangle',
    },
    'edge.extended': {
        'line-style': 'dashed',
    },
    'edge:selected': {
        'line-color': graphColorConfig.edgeSelectedColor,
        'target-arrow-color': graphColorConfig.edgeSelectedColor
    },
}

Keywords

react, cytoscapejs