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) | |