@toystory/jessie

Jessie股权结构组件

基于G6框架二次封装

安装

yarn add @toystory/jessie -S

或

npm i @toystory/jessie -S

使用

注册

在main.js中引入

import Jessie, {
  registerExpModelRect,
  registerFundCubicVertical,
  registerGroupCombo,
  generateToolTip
} from '@toystory/jessie'

const tooltip = generateToolTip({
  locationX: 20,
  locationY: 0,
  triggerMode: [],
  contentName: 'company',
  showName: 'company-shape'
})


const expModelRect = registerExpModelRect() // 注册公司节点组件
const fundEdge = registerFundCubicVertical() // 注册连接线组件
const groupCombo = registerGroupCombo() // 注册分组组件

const defaultConfig = {
  modes: {
    default: ['drag-canvas', 'drag-node', 'zoom-canvas', 'drag-combo', {
      type: 'lasso-select',
      delegateStyle: {
        fill: '#f00',
        fillOpacity: 0.05,
        stroke: '#f00',
        lineWidth: 1
      },
      includeEdges: false
    }]
  },
  defaultNode: {
    type: `${expModelRect.type}`,
    labelCfg: {
      style: {
        fill: '#000000A6',
        fontSize: 10
      }
    },
    style: {
      stroke: '#72CC4A',
      width: 150
    }
  },
  defaultEdge: {
    type: `${fundEdge.type}`
  },
  defaultCombo: {
    type: groupCombo.type,
    fixCollapseSize: [220, 60],
    style: {
      radius: 8
    },
    labelCfg: {
      position: 'center',
      style: {
        fill: '#666',
        fontWeight: 'bold',
        lineHeight: 30,
        fontSize: 14
      }
    }
  }
}

const jessieGraph = new Jessie({
  container, // 绘图容器，传入id或者dom对象
  data, // 源数据
  graphOptions: defaultConfig, // graph配置，参考G6
  plugins: [tooltip] // graph插件，参考G6
})

方法

方法名	描述	参数	返回
on	绑定事件	（eventName: String，callback: (nodeModel, item) => {})
collapseAllCombos	折叠所有分组
refreshLayout	刷新布局
getZoom	获取当前缩放比例		缩放比例0-1
setZoom	设置缩放比例	缩放比例0-1
exportPicture	导出图片
exportData	导出数据		data数据
saveNode	更新保存节点	(item, nodeModel)