389 lines
11 KiB
Vue
389 lines
11 KiB
Vue
<template>
|
|
<div :id="domId" class="mind-map"></div>
|
|
</template>
|
|
|
|
<script>
|
|
import G6 from '@antv/g6'
|
|
import insertCss from 'insert-css'
|
|
|
|
// 收起图标
|
|
const COLLAPSE_ICON = function COLLAPSE_ICON (x, y, r) {
|
|
return [['M', x, y], ['a', r, r, 0, 1, 0, r * 2, 0], ['a', r, r, 0, 1, 0, -r * 2, 0], ['M', x + 2, y], ['L', x + 2 * r - 2, y]]
|
|
}
|
|
// 展开图标
|
|
const EXPAND_ICON = function EXPAND_ICON (x, y, r) {
|
|
return [['M', x, y], ['a', r, r, 0, 1, 0, r * 2, 0], ['a', r, r, 0, 1, 0, -r * 2, 0], ['M', x + 2, y], ['L', x + 2 * r - 2, y], ['M', x + r, y - r + 2], ['L', x + r, y + r - 2]]
|
|
}
|
|
// 节点的颜色
|
|
const NODE_COLOR = [
|
|
{
|
|
bg: '#E9ECF0',
|
|
stroke: '#3D557B',
|
|
color: '#2F466B'
|
|
},
|
|
{
|
|
bg: '#EEF4F8',
|
|
stroke: '#739FC8',
|
|
color: '#227CCF'
|
|
},
|
|
{
|
|
bg: '#FEF1EA',
|
|
stroke: '#F9964F',
|
|
color: '#DF7426'
|
|
},
|
|
{
|
|
bg: '#E5F2F4',
|
|
stroke: '#2596A1',
|
|
color: '#2596A1'
|
|
}
|
|
]
|
|
// 节点和收起展开之间的间距
|
|
const NODE_ICON_MARGIN = 8
|
|
// 最长文本显示长度
|
|
const ELLIPSE_LENGTH = 30
|
|
// 处理图的tooltip样式
|
|
insertCss(`
|
|
.g6-tooltip {
|
|
border-radius: 6px;
|
|
font-size: 12px;
|
|
color: #fff;
|
|
background-color: #000;
|
|
padding: 2px 8px;
|
|
text-align: center;
|
|
}
|
|
`)
|
|
|
|
export default {
|
|
name: 'MindMap',
|
|
props: {
|
|
// 页面元素的id
|
|
domId: {
|
|
type: String,
|
|
required: false,
|
|
default: 'mountNode'
|
|
},
|
|
// 图表的数据
|
|
mapData: {
|
|
type: Object,
|
|
required: false,
|
|
default: () => {
|
|
return {}
|
|
}
|
|
},
|
|
// 图数据的key字段
|
|
mapDataKeyField: {
|
|
type: String,
|
|
required: false,
|
|
default: 'id'
|
|
},
|
|
// 回显文本取的字段
|
|
labelField: {
|
|
type: String,
|
|
required: false,
|
|
default: 'name'
|
|
},
|
|
// 节点的宽度
|
|
nodeWidth: {
|
|
type: Number,
|
|
required: false,
|
|
default: 400
|
|
},
|
|
// 节点高度
|
|
nodeHeight: {
|
|
type: Number,
|
|
required: false,
|
|
default: 46
|
|
},
|
|
// 收起展开节点图标的半径
|
|
expendCollapseIconR: {
|
|
type: Number,
|
|
required: false,
|
|
default: 8
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
data: {},
|
|
graph: null,
|
|
loadEnd: false,
|
|
selectedNodeId: null,
|
|
lastQueryId: null // 记录上次查询的节点id
|
|
}
|
|
},
|
|
watch: {
|
|
mapData: {
|
|
handler () {
|
|
this.data = JSON.parse(JSON.stringify(this.mapData))
|
|
if (this.loadEnd && this.data.id) {
|
|
this.initMindMap()
|
|
}
|
|
},
|
|
deep: true
|
|
},
|
|
loadEnd () {
|
|
if (this.loadEnd && this.data.id) {
|
|
this.initMindMap()
|
|
}
|
|
}
|
|
},
|
|
mounted () {
|
|
this.$nextTick(() => {
|
|
this.loadEnd = true
|
|
window.onresize = () => {
|
|
const width = document.getElementById(this.domId).clientWidth
|
|
const height = document.getElementById(this.domId).clientHeight
|
|
this.graph.changeSize(width, height)
|
|
this.graph.fitCenter()
|
|
}
|
|
})
|
|
},
|
|
methods: {
|
|
initMindMap () {
|
|
if (this.graph) {
|
|
this.graph.destroy()
|
|
this.graph = null
|
|
}
|
|
G6.registerNode('tree-node', {
|
|
drawShape: (cfg, group) => {
|
|
const nodeColorIndex = cfg.depth % NODE_COLOR.length
|
|
const nodeStyle = NODE_COLOR[nodeColorIndex]
|
|
// 节点整体的内容
|
|
const nodeContainer = group.addShape('rect', {
|
|
attrs: {
|
|
x: this.nodeHeight / 2,
|
|
y: this.nodeHeight / 2,
|
|
width: this.nodeWidth + NODE_ICON_MARGIN + this.expendCollapseIconR,
|
|
height: this.nodeHeight
|
|
},
|
|
name: 'rect-shape'
|
|
})
|
|
|
|
// 有边框和背景色的box
|
|
group.addShape('rect', {
|
|
attrs: {
|
|
x: 0,
|
|
y: 0,
|
|
width: this.nodeWidth,
|
|
height: this.nodeHeight,
|
|
radius: this.nodeHeight / 2,
|
|
fill: nodeStyle.bg,
|
|
stroke: nodeStyle.stroke
|
|
},
|
|
name: 'rect-content'
|
|
})
|
|
|
|
// 文本的部分
|
|
let textContent = (cfg.num || '') + ' ' + (cfg.name || '')
|
|
const text = textContent.length > ELLIPSE_LENGTH ? textContent.substring(0, ELLIPSE_LENGTH) + '...' : textContent
|
|
group.addShape('text', {
|
|
attrs: {
|
|
text: text,
|
|
x: this.nodeWidth / 2,
|
|
y: this.nodeHeight / 2,
|
|
textAlign: 'center',
|
|
textBaseline: 'middle',
|
|
fill: nodeStyle.color
|
|
},
|
|
name: 'rect-text'
|
|
})
|
|
|
|
// 处理展开收起图标
|
|
const hasChildren = cfg.children && cfg.children.length > 0
|
|
if (hasChildren) {
|
|
group.addShape('marker', {
|
|
attrs: {
|
|
x: this.nodeWidth + NODE_ICON_MARGIN,
|
|
y: this.nodeHeight / 2,
|
|
r: this.expendCollapseIconR,
|
|
symbol: COLLAPSE_ICON,
|
|
stroke: '#666',
|
|
lineWidth: 2
|
|
},
|
|
name: 'expend-collapse',
|
|
className: 'collapse-icon'
|
|
})
|
|
}
|
|
|
|
nodeContainer.attr({
|
|
x: 0,
|
|
y: 0,
|
|
width: this.nodeWidth + this.expendCollapseIconR + NODE_ICON_MARGIN + this.expendCollapseIconR,
|
|
height: this.nodeHeight
|
|
})
|
|
return nodeContainer
|
|
},
|
|
setState (name, value, item) {
|
|
const group = item.getContainer()
|
|
const nodeDom = group.get('children')
|
|
const nodeBox = nodeDom[1]
|
|
const nodeText = nodeDom[2]
|
|
if (name === 'selected') {
|
|
if (value) {
|
|
nodeBox.attr('fill', '#D52C26')
|
|
nodeBox.attr('stroke', '#D52C26')
|
|
nodeText.attr('fill', '#FFFFFF')
|
|
} else {
|
|
const nodeColorIndex = item._cfg.model.depth % NODE_COLOR.length
|
|
const nodeStyle = NODE_COLOR[nodeColorIndex]
|
|
nodeBox.attr('fill', nodeStyle.bg)
|
|
nodeBox.attr('stroke', nodeStyle.stroke)
|
|
nodeText.attr('fill', nodeStyle.color)
|
|
}
|
|
}
|
|
}
|
|
}, 'single-shape')
|
|
this.graph = new G6.TreeGraph({
|
|
container: this.domId,
|
|
width: document.getElementById(this.domId).clientWidth,
|
|
height: document.getElementById(this.domId).clientHeight,
|
|
modes: {
|
|
default: [
|
|
'drag-canvas',
|
|
'zoom-canvas',
|
|
{
|
|
type: 'tooltip',
|
|
formatText (model) {
|
|
return (model.num || '') + ' ' + (model.name || '')
|
|
},
|
|
offset: 10
|
|
}
|
|
]
|
|
},
|
|
defaultNode: {
|
|
type: 'tree-node',
|
|
anchorPoints: [[0, 0.5], [1, 0.5]]
|
|
},
|
|
defaultEdge: {
|
|
type: 'cubic-horizontal',
|
|
style: {
|
|
stroke: '#A3B1BF',
|
|
endArrow: {
|
|
path: G6.Arrow.circle(2),
|
|
d: 0,
|
|
fill: '#A3B1BF'
|
|
}
|
|
}
|
|
},
|
|
layout: {
|
|
type: 'compactBox',
|
|
direction: 'LR',
|
|
getId: (d) => {
|
|
return d.id
|
|
},
|
|
getVGap: () => {
|
|
return 20
|
|
},
|
|
getHGap: () => {
|
|
return 300
|
|
}
|
|
}
|
|
})
|
|
// G6.Util.traverseTree(this.data, (item) => {
|
|
// item.id = item[this.mapDataKeyField]
|
|
// })
|
|
this.graph.data(this.data)
|
|
this.graph.render()
|
|
this.graph.fitView()
|
|
// 展开收起事件
|
|
this.graph.on('expend-collapse:click', (event) => {
|
|
const { item } = event
|
|
item.getModel().collapsed = !item.getModel().collapsed
|
|
// this.graph.setItemState(item, 'collapsed', item.getModel().collapsed)
|
|
this.graph.refreshItem(item)
|
|
this.graph.layout()
|
|
})
|
|
// 点击选中
|
|
this.graph.on('rect-content:click', (event) => {
|
|
this.handleSelectedNode(event)
|
|
})
|
|
this.graph.on('rect-text:click', (event) => {
|
|
this.handleSelectedNode(event)
|
|
})
|
|
},
|
|
handleSelectedNode (event) {
|
|
const { item } = event
|
|
if (this.selectedNodeId && this.selectedNodeId !== item._cfg.id) {
|
|
this.graph.findById(this.selectedNodeId).getModel().selected = false
|
|
this.graph.setItemState(this.selectedNodeId, 'selected', false)
|
|
}
|
|
item.getModel().selected = !item.getModel().selected
|
|
this.graph.setItemState(item._cfg.id, 'selected', item.getModel().selected)
|
|
this.selectedNodeId = item._cfg.id
|
|
this.graph.refreshItem(item._cfg.id)
|
|
this.graph.layout()
|
|
// 选中抛出节点信息，取消选中抛出一个空对象
|
|
if (item.getModel().selected) {
|
|
this.$emit('select', item._cfg.model)
|
|
} else {
|
|
this.$emit('select', {})
|
|
}
|
|
},
|
|
/**
|
|
* 查询，定位高亮
|
|
* @param nodeId
|
|
*/
|
|
searchNode (nodeId) {
|
|
if (this.lastQueryId) {
|
|
this.graph.setItemState(this.lastQueryId, 'selected', false)
|
|
}
|
|
if (this.selectedNodeId) {
|
|
this.graph.setItemState(this.selectedNodeId, 'selected', false)
|
|
}
|
|
if (!nodeId) {
|
|
return
|
|
}
|
|
const item = this.graph.findById(nodeId)
|
|
this.graph.setItemState(nodeId, 'selected', true)
|
|
const node = this.graph.findById(nodeId)
|
|
this.selectedNodeId = nodeId
|
|
this.$emit('select', node._cfg.model)
|
|
this.lastQueryId = nodeId
|
|
const matrix = item.get('group').getMatrix()
|
|
const point = {
|
|
x: matrix[6],
|
|
y: matrix[7]
|
|
}
|
|
const width = this.graph.get('width')
|
|
const height = this.graph.get('height')
|
|
// 找到视口中心
|
|
const viewCenter = {
|
|
x: width / 2,
|
|
y: height / 2
|
|
}
|
|
const modelCenter = this.graph.getPointByCanvas(viewCenter.x, viewCenter.y)
|
|
const viewportMatrix = this.graph.get('group').getMatrix()
|
|
// 画布平移的目标位置，最终目标是graph.translate(dx, dy);
|
|
const dx = (modelCenter.x - point.x) * viewportMatrix[0]
|
|
const dy = (modelCenter.y - point.y) * viewportMatrix[4]
|
|
let lastX = 0
|
|
let lastY = 0
|
|
let newX = void 0
|
|
let newY = void 0
|
|
// 动画每次平移一点，直到目标位置
|
|
this.graph.get('canvas').animate({
|
|
onFrame: (ratio) => {
|
|
newX = dx * ratio
|
|
newY = dy * ratio
|
|
this.graph.translate(newX - lastX, newY - lastY)
|
|
lastX = newX
|
|
lastY = newY
|
|
}
|
|
}, 300, 'easeCubic')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.mind-map {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
/deep/ .g6-tooltip {
|
|
max-width: 200px;
|
|
padding: 8px 10px;
|
|
}
|
|
</style>
|