@toystory/jessie

1.3.3 • Public • Published

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)

Readme

Keywords

Package Sidebar

Install

npm i @toystory/jessie

Weekly Downloads

57

Version

1.3.3

License

MIT

Unpacked Size

4.84 MB

Total Files

4

Last publish

Collaborators

  • harry_zhl