From fd71440db47f3205cccab84ddd77026cf1df579a Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期日, 20 十一月 2022 22:35:17 +0800
Subject: [PATCH] 2022-11-20
---
src/menu/components/chart/antv-G6/index.jsx | 784 ++++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 541 insertions(+), 243 deletions(-)
diff --git a/src/menu/components/chart/antv-G6/index.jsx b/src/menu/components/chart/antv-G6/index.jsx
index f8a8e47..2900881 100644
--- a/src/menu/components/chart/antv-G6/index.jsx
+++ b/src/menu/components/chart/antv-G6/index.jsx
@@ -9,7 +9,6 @@
import asyncComponent from '@/utils/asyncComponent'
import asyncIconComponent from '@/utils/asyncIconComponent'
import { resetStyle, getTables, getHeight } from '@/utils/utils-custom.js'
-// import Utils from '@/utils/utils.js'
import './index.scss'
const { Util } = G6
@@ -69,11 +68,13 @@
let type = window.GLOB.style.replace(/bg_black_style_|bg_white_style_/, '')
systemColor = styles[type] || '#1890ff'
}
+const COLORS = ['#5B8FF9', '#F6BD16', '#5AD8A6', '#945FB9', '#E86452', '#6DC8EC', '#FF99C3', '#1E9493', '#FF9845', '#5D7092']
+// 鎬濈淮瀵煎浘
G6.registerNode(
'dice-mind-map-root', {
jsx: (cfg) => {
- const width = Util.getTextSize(cfg.label, 16)[0] + 24;
+ const width = Util.getTextSize(cfg.label, 16)[0] + 24
return `
<group>
@@ -81,21 +82,21 @@
<text style={{ fontSize: 16, marginLeft: 6, marginTop: 12 }}>${cfg.label}</text>
</rect>
</group>
- `;
+ `
},
getAnchorPoints() {
return [
[0, 0.5],
- [1, 0.5],
- ];
- },
+ [1, 0.5]
+ ]
+ }
},
'single-node',
-);
+)
G6.registerNode(
'dice-mind-map-sub', {
jsx: (cfg) => {
- const width = Util.getTextSize(cfg.label, 14)[0] + 24;
+ const width = Util.getTextSize(cfg.label, 14)[0] + 24
return `
<group>
@@ -104,21 +105,21 @@
</rect>
<rect style={{ fill: ${cfg.color}, width: ${width}, height: 2, x: 0, y: 22, cursor: pointer }} />
</group>
- `;
+ `
},
getAnchorPoints() {
return [
[0, 0.965],
- [1, 0.965],
- ];
- },
+ [1, 0.965]
+ ]
+ }
},
'single-node',
-);
+)
G6.registerNode(
'dice-mind-map-leaf', {
jsx: (cfg) => {
- const width = Util.getTextSize(cfg.label, 12)[0] + 24;
+ const width = Util.getTextSize(cfg.label, 12)[0] + 24
return `
<group>
@@ -127,23 +128,23 @@
</rect>
<rect style={{ fill: ${cfg.color}, width: ${width}, height: 2, x: 0, y: 32, cursor: pointer }} />
</group>
- `;
+ `
},
getAnchorPoints() {
return [
[0, 0.965],
- [1, 0.965],
- ];
- },
+ [1, 0.965]
+ ]
+ }
},
'single-node',
-);
+)
G6.registerBehavior('dice-mindmap', {
getEvents() {
return {
'node:click': 'editNode',
'canvas:click': 'onCanvasClick'
- };
+ }
},
editNode(evt) {
const item = evt.item
@@ -173,34 +174,34 @@
G6.registerBehavior('scroll-canvas', {
getEvents: function getEvents() {
return {
- wheel: 'onWheel',
- };
+ wheel: 'onWheel'
+ }
},
onWheel: function onWheel(ev) {
- const { graph } = this;
+ const { graph } = this
if (!graph) {
- return;
+ return
}
if (ev.ctrlKey) {
- const canvas = graph.get('canvas');
- const point = canvas.getPointByClient(ev.clientX, ev.clientY);
- let ratio = graph.getZoom();
+ const canvas = graph.get('canvas')
+ const point = canvas.getPointByClient(ev.clientX, ev.clientY)
+ let ratio = graph.getZoom()
if (ev.wheelDelta > 0) {
- ratio += ratio * 0.05;
+ ratio += ratio * 0.05
} else {
- ratio *= ratio * 0.05;
+ ratio *= ratio * 0.05
}
graph.zoomTo(ratio, {
x: point.x,
- y: point.y,
- });
+ y: point.y
+ })
} else {
- const x = ev.deltaX || ev.movementX;
- const y = ev.deltaY || ev.movementY || (-ev.wheelDelta * 125) / 3;
- graph.translate(-x, -y);
+ const x = ev.deltaX || ev.movementX
+ const y = ev.deltaY || ev.movementY || (-ev.wheelDelta * 125) / 3
+ graph.translate(-x, -y)
}
- ev.preventDefault();
- },
+ ev.preventDefault()
+ }
})
const dataMapTransform = (data) => {
@@ -209,18 +210,18 @@
switch (level) {
case 0:
- data.type = 'dice-mind-map-root';
- break;
+ data.type = 'dice-mind-map-root'
+ break
case 1:
- data.type = 'dice-mind-map-sub';
- break;
+ data.type = 'dice-mind-map-sub'
+ break
default:
- data.type = 'dice-mind-map-leaf';
- break;
+ data.type = 'dice-mind-map-leaf'
+ break
}
if (color) {
- data.color = color;
+ data.color = color
}
if (level === 1 && !d.direction) {
@@ -228,13 +229,14 @@
}
if (d.children) {
- data.children = d.children.map((child) => changeData(child, level + 1, data.color));
+ data.children = d.children.map((child) => changeData(child, level + 1, data.color))
}
- return data;
+ return data
}
- return changeData(data);
+ return changeData(data)
}
+// 缂╄繘鏂囦欢鏍�
G6.registerNode('indentedRoot', {
draw(model, group) {
const keyShape = group.addShape('rect', {
@@ -262,10 +264,10 @@
textBaseline: 'middle'
},
name: 'root-text-shape'
- });
- const textBBox = text.getBBox();
- const width = textBBox.width + 24;
- const height = textBBox.height + 12;
+ })
+ const textBBox = text.getBBox()
+ const width = textBBox.width + 24
+ const height = textBBox.height + 12
keyShape.attr({
x: -width / 2,
y: -height / 2,
@@ -273,27 +275,27 @@
height
})
- return keyShape;
+ return keyShape
},
getAnchorPoints() {
return [
- [0.5, 1],
- ];
+ [0.5, 1]
+ ]
},
update: undefined
-});
+})
G6.registerNode('indentedNode', {
addChildCount(group, tag, props) {
- const { collapsed, branchColor, count } = props;
- let clickCircleY = 10;
+ const { collapsed, branchColor, count } = props
+ let clickCircleY = 10
// 瀛愮被鏁伴噺 icon锛岀粯鍒跺渾鐐瑰湪鑺傜偣姝ｄ笅鏂�
if (tag) {
const childCountGroup = group.addGroup({
name: 'child-count-group'
- });
+ })
childCountGroup.setMatrix([1, 0, 0, 0, 1, 0, 0, clickCircleY, 1])
- const countBackWidth = collapsed ? 26 : 12;
+ const countBackWidth = collapsed ? 26 : 12
childCountGroup.addShape('rect', {
attrs: {
width: countBackWidth,
@@ -306,8 +308,8 @@
y: -6,
cursor: 'pointer',
},
- name: 'child-count-rect-shape',
- });
+ name: 'child-count-rect-shape'
+ })
const childCountText = childCountGroup.addShape('text', {
attrs: {
text: count,
@@ -319,8 +321,8 @@
textBaseline: 'middle',
cursor: 'pointer',
},
- name: 'child-count-text-shape',
- });
+ name: 'child-count-text-shape'
+ })
const childHoverIcon = childCountGroup.addShape('path', {
attrs: {
stroke: '#fff',
@@ -330,8 +332,8 @@
},
name: 'child-count-expand-icon',
capture: false
- });
- childHoverIcon.hide();
+ })
+ childHoverIcon.hide()
// 杩炴帴 count 鐨勭嚎娈�
const countLink = group.addShape('path', {
@@ -341,25 +343,25 @@
lineWidth: 2,
},
name: 'count-link'
- });
- countLink.toBack();
+ })
+ countLink.toBack()
if (collapsed) {
- childCountGroup.show();
- childCountText.show();
- countLink.show();
+ childCountGroup.show()
+ childCountText.show()
+ countLink.show()
}
else {
- childCountGroup.hide();
- childCountText.hide();
- countLink.hide();
+ childCountGroup.hide()
+ childCountText.hide()
+ countLink.hide()
}
- clickCircleY += 16;
+ clickCircleY += 16
}
},
addBottomLine(group, props) {
- const { x, width, stroke, lineWidth } = props;
+ const { x, width, stroke, lineWidth } = props
return group.addShape('path', {
attrs: {
path: [
@@ -369,11 +371,11 @@
stroke,
lineWidth,
},
- name: 'node-path-shape',
- });
+ name: 'node-path-shape'
+ })
},
addName(group, props) {
- const { label, x = 0, y, fill } = props;
+ const { label, x = 0, y, fill } = props
return group.addShape('text', {
attrs: {
text: label,
@@ -387,25 +389,25 @@
cursor: 'pointer',
},
name: 'not-root-text-shape'
- });
+ })
},
draw(model, group) {
- const { collapsed, depth, label, children, selected } = model;
+ const { collapsed, depth, label, children, selected } = model
// 鏄惁涓烘牴鑺傜偣
- const rootNode = depth === 0;
+ const rootNode = depth === 0
// 瀛愯妭鐐规暟閲�
- const childCount = children ? children.length : 0;
+ const childCount = children ? children.length : 0
- let width = 0;
- const height = 24;
- const x = 0;
- const y = -height / 2;
- const borderRadius = 4;
+ let width = 0
+ const height = 24
+ const x = 0
+ const y = -height / 2
+ const borderRadius = 4
// 鍚嶇О鏂囨湰
- const text = this.addName(group, { label, x, y });
+ const text = this.addName(group, { label, x, y })
- let textWidth = text.getBBox().width;
- width = textWidth + 20;
+ let textWidth = text.getBBox().width
+ width = textWidth + 20
const keyShapeAttrs = {
x,
@@ -415,12 +417,12 @@
radius: borderRadius,
fill: undefined,
stroke: undefined,
- };
+ }
const keyShape = group.addShape('rect', {
attrs: keyShapeAttrs,
- name: 'root-key-shape-rect-shape',
- });
+ name: 'root-key-shape-rect-shape'
+ })
// 搴曢儴妯嚎
const bottomLine = this.addBottomLine(group, {
@@ -428,9 +430,9 @@
lineWidth: 3,
x,
width
- });
+ })
- let nameColor = 'rgba(0, 0, 0, 0.65)';
+ let nameColor = 'rgba(0, 0, 0, 0.85)'
if (selected) {
nameColor = systemColor
@@ -440,19 +442,19 @@
text.attr({
y: y - 12,
fill: nameColor
- });
- text.toFront();
- textWidth = text.getBBox().width;
+ })
+ text.toFront()
+ textWidth = text.getBBox().width
- if (bottomLine) bottomLine.toFront();
+ if (bottomLine) bottomLine.toFront()
this.addChildCount(group, childCount && !rootNode, {
collapsed,
branchColor: model.branchColor,
- count: childCount ? `${childCount}` : undefined,
- });
+ count: childCount ? `${childCount}` : undefined
+ })
- const bbox = group.getBBox();
+ const bbox = group.getBBox()
const backContainer = group.addShape('path', {
attrs: {
path: childCount ? [
@@ -474,38 +476,38 @@
opacity: 0
}
})
- backContainer.toBack();
- return keyShape;
+ backContainer.toBack()
+ return keyShape
}
-});
+})
G6.registerEdge('indentedEdge', {
afterDraw: (cfg, group) => {
- const sourceNode = cfg.sourceNode && cfg.sourceNode.getModel();
- const targetNode = cfg.targetNode && cfg.targetNode.getModel();
- const color = sourceNode.branchColor || targetNode.branchColor || cfg.color || '#000';
+ const sourceNode = cfg.sourceNode && cfg.sourceNode.getModel()
+ const targetNode = cfg.targetNode && cfg.targetNode.getModel()
+ const color = sourceNode.branchColor || targetNode.branchColor || cfg.color || '#000'
- const keyShape = group.get('children')[0];
+ const keyShape = group.get('children')[0]
keyShape.attr({
stroke: color,
lineWidth: 3 // branchThick
- });
- group.toBack();
+ })
+ group.toBack()
},
getControlPoints: (cfg) => {
- const startPoint = cfg.startPoint;
- const endPoint = cfg.endPoint;
+ const startPoint = cfg.startPoint
+ const endPoint = cfg.endPoint
return [
startPoint,
{
x: startPoint.x,
y: endPoint.y,
},
- endPoint,
- ];
+ endPoint
+ ]
},
update: undefined
-}, 'polyline');
+}, 'polyline')
G6.registerBehavior('wheel-scroll', {
getDefaultCfg() {
@@ -513,51 +515,51 @@
direction: 'y',
zoomKey: 'ctrl',
sensitivity: 3,
- scalableRange: -64,
- };
+ scalableRange: -64
+ }
},
getEvents() {
return {
- wheel: 'onWheel',
- };
+ wheel: 'onWheel'
+ }
},
onWheel(ev) {
- const graph = this.graph;
- let keyDown = ev[`${this.zoomKey}Key`];
- if (this.zoomKey === 'control') keyDown = ev.ctrlKey;
+ const graph = this.graph
+ let keyDown = ev[`${this.zoomKey}Key`]
+ if (this.zoomKey === 'control') keyDown = ev.ctrlKey
if (keyDown) {
- const sensitivity = this.get('sensitivity');
- const canvas = graph.get('canvas');
- const point = canvas.getPointByClient(ev.clientX, ev.clientY);
- let ratio = graph.getZoom();
+ const sensitivity = this.get('sensitivity')
+ const canvas = graph.get('canvas')
+ const point = canvas.getPointByClient(ev.clientX, ev.clientY)
+ let ratio = graph.getZoom()
if (ev.wheelDelta > 0) {
- ratio *= (1 + 0.01 * sensitivity);
+ ratio *= (1 + 0.01 * sensitivity)
} else {
- ratio *= (1 - 0.01 * sensitivity);
+ ratio *= (1 - 0.01 * sensitivity)
}
graph.zoomTo(ratio, {
x: point.x,
- y: point.y,
- });
- graph.emit('wheelzoom', ev);
+ y: point.y
+ })
+ graph.emit('wheelzoom', ev)
} else {
- let dx = ev.deltaX || ev.movementX;
- let dy = ev.deltaY || ev.movementY;
+ let dx = ev.deltaX || ev.movementX
+ let dy = ev.deltaY || ev.movementY
if (!dy && navigator.userAgent.indexOf('Firefox') > -1) dy = (-ev.wheelDelta * 125) / 3
- const width = this.graph.get('width');
- const height = this.graph.get('height');
- const graphCanvasBBox = this.graph.get('group').getCanvasBBox();
+ const width = this.graph.get('width')
+ const height = this.graph.get('height')
+ const graphCanvasBBox = this.graph.get('group').getCanvasBBox()
- let expandWidth = this.scalableRange;
- let expandHeight = this.scalableRange;
+ let expandWidth = this.scalableRange
+ let expandHeight = this.scalableRange
// 鑻� scalableRange 鏄� 0~1 鐨勫皬鏁帮紝鍒欎綔涓烘瘮渚嬭�冭檻
if (expandWidth < 1 && expandWidth > -1) {
- expandWidth = width * expandWidth;
- expandHeight = height * expandHeight;
+ expandWidth = width * expandWidth
+ expandHeight = height * expandHeight
}
- const { minX, maxX, minY, maxY } = graphCanvasBBox;
+ const { minX, maxX, minY, maxY } = graphCanvasBBox
if (dx > 0) {
if (maxX < -expandWidth) {
@@ -588,119 +590,119 @@
}
if (this.get('direction') === 'x') {
- dy = 0;
+ dy = 0
} else if (this.get('direction') === 'y') {
- dx = 0;
+ dx = 0
}
- graph.translate(-dx, -dy);
+ graph.translate(-dx, -dy)
}
- ev.preventDefault();
- },
-});
+ ev.preventDefault()
+ }
+})
G6.registerBehavior('hover-node', {
getEvents() {
return {
'node:mouseover': 'onNodeMouseOver',
'node:mouseleave': 'onNodeMouseLeave',
'node:mouseenter': 'onNodeMouseEnter'
- };
+ }
},
onNodeMouseEnter(ev) {
- const { item } = ev;
- if (!item || item.get('destroyed')) return;
- item.toFront();
- const model = item.getModel();
- const { collapsed, depth } = model;
- const rootNode = depth === 0 || model.isRoot;
- const group = item.getContainer();
+ const { item } = ev
+ if (!item || item.get('destroyed')) return
+ item.toFront()
+ const model = item.getModel()
+ const { collapsed, depth } = model
+ const rootNode = depth === 0 || model.isRoot
+ const group = item.getContainer()
- if (rootNode) return;
+ if (rootNode) return
// 鎺у埗瀛愯妭鐐逛釜鏁版爣璁�
if (!collapsed) {
- const childCountGroup = group.find(e => e.get('name') === 'child-count-group');
+ const childCountGroup = group.find(e => e.get('name') === 'child-count-group')
if (childCountGroup) {
- childCountGroup.show();
+ childCountGroup.show()
}
}
},
onNodeMouseOver(ev) {
- const shape = ev.target;
+ const shape = ev.target
// tooltip鏄剧ず銆侀殣钘�
- this.graph.emit('tooltip: show', ev);
+ this.graph.emit('tooltip: show', ev)
// expand 鐘舵�佷笅锛岃嫢 hover 鍒板瓙鑺傜偣涓暟鏍囪锛屽～鍏呰儗鏅�+鏄剧ず鏀惰捣 icon
- const { item } = ev;
- const group = item.getContainer();
- const model = item.getModel();
+ const { item } = ev
+ const group = item.getContainer()
+ const model = item.getModel()
if (!model.collapsed) {
- const childCountGroup = group.find(e => e.get('name') === 'child-count-group');
+ const childCountGroup = group.find(e => e.get('name') === 'child-count-group')
if (childCountGroup) {
- childCountGroup.show();
- const back = childCountGroup.find(e => e.get('name') === 'child-count-rect-shape');
- const expandIcon = childCountGroup.find(e => e.get('name') === 'child-count-expand-icon');
- const rootNode = model.depth === 0 || model.isRoot;
- const branchColor = rootNode ? '#576286' : model.branchColor;
+ childCountGroup.show()
+ const back = childCountGroup.find(e => e.get('name') === 'child-count-rect-shape')
+ const expandIcon = childCountGroup.find(e => e.get('name') === 'child-count-expand-icon')
+ const rootNode = model.depth === 0 || model.isRoot
+ const branchColor = rootNode ? '#576286' : model.branchColor
if (shape.get('parent').get('name') === 'child-count-group') {
if (back) {
- back.attr('fill', branchColor || '#fff');
+ back.attr('fill', branchColor || '#fff')
}
if (expandIcon) {
- expandIcon.show();
+ expandIcon.show()
}
} else {
if (back) {
- back.attr('fill', '#fff');
+ back.attr('fill', '#fff')
}
if (expandIcon) {
- expandIcon.hide();
+ expandIcon.hide()
}
}
}
}
},
onNodeMouseLeave(ev) {
- const { item } = ev;
- const model = item.getModel();
- const group = item.getContainer();
- const { collapsed } = model;
+ const { item } = ev
+ const model = item.getModel()
+ const group = item.getContainer()
+ const { collapsed } = model
if (!collapsed) {
- const childCountGroup = group.find(e => e.get('name') === 'child-count-group');
+ const childCountGroup = group.find(e => e.get('name') === 'child-count-group')
if (childCountGroup) {
- childCountGroup.hide();
+ childCountGroup.hide()
}
- const iconsLinkPath = group.find(e => e.get('name') === 'icons-link-path');
+ const iconsLinkPath = group.find(e => e.get('name') === 'icons-link-path')
if (iconsLinkPath) {
- iconsLinkPath.hide();
+ iconsLinkPath.hide()
}
}
- this.graph.emit('tooltip: hide', ev);
- },
-});
+ this.graph.emit('tooltip: hide', ev)
+ }
+})
G6.registerBehavior('click-node', {
getEvents() {
return {
'node:click': 'onNodeClick',
'canvas:click': 'onCanvasClick'
- };
+ }
},
onNodeClick(e) {
- const { item, target } = e;
- const shape = target;
- const shapeName = shape.cfg.name;
- let model = item.getModel();
+ const { item, target } = e
+ const shape = target
+ const shapeName = shape.cfg.name
+ let model = item.getModel()
// 鐐瑰嚮鏀惰捣/灞曞紑 icon
if (shapeName === 'child-count-rect-shape' || shapeName === 'child-count-text-shape') {
- const updatedCollapsed = !model.collapsed;
- this.graph.updateItem(item, { collapsed: updatedCollapsed });
- this.graph.layout();
- return;
+ const updatedCollapsed = !model.collapsed
+ this.graph.updateItem(item, { collapsed: updatedCollapsed })
+ this.graph.layout()
+ return
}
// 閫変腑鑺傜偣
@@ -715,7 +717,7 @@
model.selected = true
this.graph.updateItem(item, model, false)
- return;
+ return
},
onCanvasClick(e) {
this.graph.getNodes().forEach(node => {
@@ -727,49 +729,270 @@
})
}
})
-const COLORS = ['#5B8FF9', '#F6BD16', '#5AD8A6', '#945FB9', '#E86452', '#6DC8EC', '#FF99C3', '#1E9493', '#FF9845', '#5D7092']
const dataIndTransform = (data) => {
const changeData = (d) => {
- let data = { ...d };
+ let data = { ...d }
- data.type = data.isRoot ? 'indentedRoot' : 'indentedNode';
+ data.type = data.isRoot ? 'indentedRoot' : 'indentedNode'
if (d.children) {
- data.children = d.children.map((child) => changeData(child));
+ data.children = d.children.map((child) => changeData(child))
}
// 缁欏畾 branchColor 鍜� 0-2 灞傝妭鐐� depth
if (data.children && data.children.length) {
- data.depth = 0;
+ data.depth = 0
data.children.forEach((subtree, i) => {
- subtree.branchColor = COLORS[i % COLORS.length];
+ subtree.branchColor = COLORS[i % COLORS.length]
// dfs
- let currentDepth = 1;
- subtree.depth = currentDepth;
+ let currentDepth = 1
+ subtree.depth = currentDepth
Util.traverseTree(subtree, child => {
- child.branchColor = COLORS[i % COLORS.length];
+ child.branchColor = COLORS[i % COLORS.length]
if (!child.depth) {
- child.depth = currentDepth + 1;
+ child.depth = currentDepth + 1
}
- else currentDepth = subtree.depth;
+ else currentDepth = subtree.depth
if (child.children) {
child.children.forEach(subChild => {
- subChild.depth = child.depth + 1;
+ subChild.depth = child.depth + 1
})
}
if (!data.isRoot) {
child.collapsed = data.collapsed || false
}
- return true;
+ return true
})
- });
+ })
}
- return data;
- };
- return changeData(data);
+ return data
+ }
+ return changeData(data)
}
+
+// 鐭ヨ瘑鍥捐氨鏍�
+G6.registerNode('treeNode', {
+ draw: (cfg, group) => {
+ const { label, selected, children, isRoot } = cfg
+ const rootNode = !!isRoot
+ const hasChildren = children && children.length !== 0
+
+ let width = 0
+ const height = 28
+ const x = 0
+ const y = -height / 2
+
+ // 鍚嶇О鏂囨湰
+ const text = group.addShape('text', {
+ attrs: {
+ text: label,
+ x: x * 2,
+ y,
+ textAlign: 'left',
+ textBaseline: 'top',
+ fontFamily: 'PingFangSC-Regular',
+ },
+ cursor: 'pointer',
+ name: 'name-text-shape',
+ })
+ const textWidth = text.getBBox().width
+ width = textWidth + 20
+
+ width = width < 60 ? 60 : width
+
+ if (!rootNode && hasChildren) {
+ width += 22
+ }
+
+ const keyShapeAttrs = {
+ x,
+ y,
+ width,
+ height,
+ radius: 4
+ }
+
+ const keyShape = group.addShape('rect', {
+ attrs: keyShapeAttrs,
+ name: 'root-key-shape-rect-shape'
+ })
+
+ if (!rootNode) {
+ // 搴曢儴妯嚎
+ group.addShape('path', {
+ attrs: {
+ path: [
+ ['M', x - 1, 0],
+ ['L', width, 0],
+ ],
+ stroke: '#AAB7C4',
+ lineWidth: 1,
+ },
+ name: 'node-path-shape'
+ })
+ }
+
+ const mainX = x - 10
+ const mainY = -height + 15
+
+ if (rootNode) {
+ group.addShape('rect', {
+ attrs: {
+ x: mainX,
+ y: mainY,
+ width: width + 12,
+ height,
+ radius: 14,
+ fill: systemColor,
+ cursor: 'pointer',
+ },
+ name: 'main-shape'
+ })
+ }
+
+ let nameColor = 'rgba(0, 0, 0, 0.85)'
+ if (selected) {
+ nameColor = systemColor
+ }
+
+ // 鍚嶇О
+ if (rootNode) {
+ group.addShape('text', {
+ attrs: {
+ text: label,
+ x: mainX + 18,
+ y: 1,
+ textAlign: 'left',
+ textBaseline: 'middle',
+ fill: '#ffffff',
+ fontSize: 12,
+ fontFamily: 'PingFangSC-Regular',
+ cursor: 'pointer',
+ },
+ name: 'root-text-shape'
+ })
+ } else {
+ group.addShape('text', {
+ attrs: {
+ text: label,
+ x: mainX + 6,
+ y: y - 5,
+ textAlign: 'start',
+ textBaseline: 'top',
+ fill: nameColor,
+ fontSize: 12,
+ fontFamily: 'PingFangSC-Regular',
+ cursor: 'pointer',
+ },
+ name: 'not-root-text-shape'
+ })
+ }
+
+ // 瀛愮被鏁伴噺
+ if (hasChildren && !rootNode) {
+ const childCountHeight = 12
+ const childCountX = width - 22
+ const childCountY = -childCountHeight / 2
+
+ group.addShape('rect', {
+ attrs: {
+ width: 22,
+ height: 12,
+ stroke: systemColor,
+ fill: '#fff',
+ x: childCountX,
+ y: childCountY,
+ radius: 6,
+ cursor: 'pointer',
+ },
+ name: 'child-count-rect-shape',
+ })
+ group.addShape('text', {
+ attrs: {
+ text: `${children.length}`,
+ fill: 'rgba(0, 0, 0, .65)',
+ x: childCountX + 11,
+ y: childCountY + 12,
+ fontSize: 10,
+ width: 22,
+ textAlign: 'center',
+ cursor: 'pointer',
+ },
+ name: 'child-count-text-shape'
+ })
+ }
+
+ return keyShape
+ }
+})
+
+G6.registerEdge('smooth', {
+ draw(cfg, group) {
+ const { startPoint, endPoint } = cfg
+ const hgap = Math.abs(endPoint.x - startPoint.x)
+
+ const path = [
+ ['M', startPoint.x, startPoint.y],
+ [
+ 'C',
+ startPoint.x + hgap / 4,
+ startPoint.y,
+ endPoint.x - hgap / 2,
+ endPoint.y,
+ endPoint.x,
+ endPoint.y,
+ ],
+ ]
+
+ const shape = group.addShape('path', {
+ attrs: {
+ stroke: '#AAB7C4',
+ path,
+ },
+ name: 'smooth-path-shape',
+ })
+ return shape
+ },
+})
+
+G6.registerBehavior('click-item', {
+ getEvents() {
+ return {
+ 'node:click': 'onNodeClick',
+ 'canvas:click': 'onCanvasClick'
+ }
+ },
+ onNodeClick(e) {
+ const { item } = e
+ let model = item.getModel()
+
+ if (model.children) return
+ // 閫変腑鑺傜偣
+ this.graph.getNodes().forEach(node => {
+ let _model = node.get('model')
+ if (_model.selected) {
+ _model.selected = false
+ this.graph.updateItem(node, _model, false)
+ }
+ })
+
+ model.selected = true
+ this.graph.updateItem(item, model, false)
+
+ return
+ },
+ onCanvasClick(e) {
+ this.graph.getNodes().forEach(node => {
+ let _model = node.get('model')
+ if (_model.selected) {
+ _model.selected = false
+ this.graph.updateItem(node, _model, false)
+ }
+ })
+ }
+})
class antvG6Chart extends Component {
static propTpyes = {
@@ -799,7 +1022,7 @@
type: card.type,
format: 'array', // 缁勪欢灞炴�� - 鏁版嵁鏍煎紡
pageable: false, // 缁勪欢灞炴�� - 鏄惁鍙垎椤�
- switchable: false, // 缁勪欢灞炴�� - 鏁版嵁鏄惁鍙垏鎹�
+ switchable: true, // 缁勪欢灞炴�� - 鏁版嵁鏄惁鍙垏鎹�
width: _plot.width,
name: _plot.name,
subtype: card.subtype,
@@ -903,8 +1126,6 @@
}
let data = setData(MindData)
- data.isRoot = true
- data.collapsed = false
if (card.plot.subtype === 'mindmap') {
if (card.plot.dirField) {
@@ -920,9 +1141,28 @@
}
})
} else if (card.plot.subtype === 'indentTree') {
+ data.isRoot = true
+ data.collapsed = false
+
data.children.forEach(item => {
item.collapsed = card.plot.collapsed === 'true'
})
+ } else if (card.plot.subtype === 'kapmap') {
+ data.isRoot = true
+ data.collapsed = false
+
+ if (card.plot.collapsed === 'true') {
+ const collapse = (item) => {
+ if (!item.children) return
+
+ item.children.forEach(cell => {
+ cell.collapsed = true
+ collapse(cell)
+ })
+ }
+
+ collapse(data)
+ }
}
return data
@@ -935,8 +1175,66 @@
this.ponitrender()
} else if (card.plot.subtype === 'indentTree') {
this.indentrender()
+ } else if (card.plot.subtype === 'kapmap') {
+ this.kapmaprender()
}
+ }
+ kapmaprender = () => {
+ const { card } = this.state
+ const plot = card.plot
+ const data = this.getdata()
+
+ const graph = new G6.TreeGraph({
+ container: card.uuid + 'canvas',
+ width: this.wrap.scrollWidth - 30,
+ height: getHeight(plot.height),
+ modes: {
+ default: [
+ {
+ type: 'collapse-expand',
+ },
+ 'drag-canvas',
+ 'zoom-canvas',
+ 'click-item'
+ ],
+ },
+ defaultNode: {
+ type: 'treeNode',
+ anchorPoints: [
+ [0, 0.5],
+ [1, 0.5],
+ ],
+ },
+ defaultEdge: {
+ type: 'smooth',
+ },
+ layout: {
+ type: 'compactBox',
+ direction: 'LR',
+ getId: function getId(d) {
+ return d.id
+ },
+ getHeight: function getHeight() {
+ return 16
+ },
+ getWidth: function getWidth(d) {
+ const labelWidth = G6.Util.getTextSize(d.label, 12)[0]
+ const width = 60 + labelWidth
+ return width
+ },
+ getVGap: function getVGap() {
+ return 15
+ },
+ getHGap: function getHGap() {
+ return 30
+ }
+ }
+ })
+
+ graph.data(data)
+ graph.render()
+ graph.fitView()
}
indentrender = () => {
@@ -955,23 +1253,23 @@
indent: 40,
getHeight: (d) => {
if (d.isRoot) {
- return 30;
+ return 30
}
if (d.collapsed && d.children && d.children.length) {
- return 36;
+ return 36
}
- return 22;
+ return 22
},
getVGap: () => {
- return 10;
+ return 10
},
},
defaultEdge: {
type: 'indentedEdge',
style: {
lineWidth: 2,
- radius: 16,
- },
+ radius: 16
+ }
},
minZoom: 0.5,
modes: {
@@ -980,23 +1278,23 @@
'wheel-scroll',
'hover-node',
'click-node'
- ],
- },
- });
+ ]
+ }
+ })
tree.on('afterrender', e => {
tree.getEdges().forEach(edge => {
- const targetNode = edge.getTarget().getModel();
- const color = targetNode.branchColor;
- tree.updateItem(edge, { color });
- });
+ const targetNode = edge.getTarget().getModel()
+ const color = targetNode.branchColor
+ tree.updateItem(edge, { color })
+ })
setTimeout(() => {
- tree.moveTo(32, 32);
+ tree.moveTo(32, 32)
tree.zoomTo(0.7)
- }, 16);
- });
+ }, 16)
+ })
- tree.data(dataIndTransform(data));
+ tree.data(dataIndTransform(data))
tree.render()
}
@@ -1018,36 +1316,36 @@
type: 'mindmap',
direction: 'H',
getHeight: () => {
- return 16;
+ return 16
},
getWidth: (node) => {
return node.level === 0 ?
Util.getTextSize(node.label, 16)[0] + 12 :
- Util.getTextSize(node.label, 12)[0];
+ Util.getTextSize(node.label, 12)[0]
},
getVGap: () => {
- return 10;
+ return 10
},
getHGap: () => {
- return 60;
+ return 60
},
getSide: (node) => {
- return node.data.direction;
- },
+ return node.data.direction
+ }
},
defaultEdge: {
type: 'cubic-horizontal',
style: {
- lineWidth: 2,
- },
+ lineWidth: 2
+ }
},
minZoom: 0.5,
modes: {
- default: ['drag-canvas', 'zoom-canvas', 'dice-mindmap'],
- },
- });
+ default: ['drag-canvas', 'zoom-canvas', 'dice-mindmap']
+ }
+ })
- tree.data(dataMapTransform(data));
+ tree.data(dataMapTransform(data))
tree.render()
}
--
Gitblit v1.8.0