mirror of
https://gitee.com/antv/g6.git
synced 2024-12-05 05:09:07 +08:00
946 lines
28 KiB
HTML
946 lines
28 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Cloud Atlas Graph</title>
|
||
<div id="mountNode"></div>
|
||
</head>
|
||
|
||
<body>
|
||
<script src="../build/g6.js"></script>
|
||
<script src="../build/minimap.js"></script>
|
||
<script src="assets/hierarchy.js"></script>
|
||
<script src="./assets/jquery-3.2.1.min.js"></script>
|
||
<script>
|
||
const ERROR_COLOR = "#F5222D";
|
||
|
||
const SIMPLE_TREE_NODE = "simple-tree-node";
|
||
const TREE_NODE = "tree-node";
|
||
|
||
const SOFAROUTER_TEXT_CLASS = "sofarouter-text-class";
|
||
const SOFAROUTER_RECT_CLASS = "sofarouter-rect-class";
|
||
|
||
const CANVAS_WIDTH = 1000;
|
||
const CANVAS_HEIGHT = 600;
|
||
|
||
const LIMIT_OVERFLOW_WIDTH = CANVAS_WIDTH - 100;
|
||
const LIMIT_OVERFLOW_HEIGHT = CANVAS_HEIGHT - 100;
|
||
|
||
const TIP_HEIGHT = 28;
|
||
const getNodeConfig = node => {
|
||
if (node.nodeError) {
|
||
return {
|
||
basicColor: ERROR_COLOR,
|
||
fontColor: "#FFF",
|
||
borderColor: ERROR_COLOR,
|
||
bgColor: "#E66A6C"
|
||
};
|
||
}
|
||
let config = {
|
||
basicColor: "#722ED1",
|
||
fontColor: "#722ED1",
|
||
borderColor: "#722ED1",
|
||
bgColor: "#F6EDFC"
|
||
};
|
||
switch (node.type) {
|
||
case "root":
|
||
{
|
||
config = {
|
||
basicColor: "#E3E6E8",
|
||
fontColor: "rgba(0,0,0,0.85)",
|
||
borderColor: "#E3E6E8",
|
||
bgColor: "#F7F9FA"
|
||
};
|
||
break;
|
||
}
|
||
case "httpclient":
|
||
case "rest":
|
||
case "mvc":
|
||
case "rpc":
|
||
case "rpc2jvm":
|
||
config = {
|
||
basicColor: "#2F54EB",
|
||
fontColor: "#2F54EB",
|
||
borderColor: "#2F54EB",
|
||
bgColor: "#F3F6FD"
|
||
};
|
||
break;
|
||
case "db":
|
||
config = {
|
||
basicColor: "#52C41A",
|
||
fontColor: "#52C41A",
|
||
borderColor: "#52C41A",
|
||
bgColor: "#F4FCEB"
|
||
};
|
||
break;
|
||
case "msgPub":
|
||
case "msgSub":
|
||
case "zqmsgSend":
|
||
case "zqmsgRecv":
|
||
case "antqPub":
|
||
case "antqSub":
|
||
config = {
|
||
basicColor: "#FA8C16",
|
||
fontColor: "#FA8C16",
|
||
borderColor: "#FA8C16",
|
||
bgColor: "#FCF4E3"
|
||
};
|
||
break;
|
||
case "zdalTair":
|
||
case "zdalOcs":
|
||
case "zdalOss":
|
||
default:
|
||
break;
|
||
}
|
||
return config;
|
||
};
|
||
|
||
const COLLAPSE_ICON = function COLLAPSE_ICON(x, y, r) {
|
||
return [["M", x - r, y], ["a", r, r, 0, 1, 0, r * 2, 0], ["a", r, r, 0, 1, 0, -r * 2, 0], ["M", x - r + 4, y], ["L", x - r + 2 * r - 4, y]];
|
||
};
|
||
const EXPAND_ICON = function EXPAND_ICON(x, y, r) {
|
||
return [["M", x - r, y], ["a", r, r, 0, 1, 0, r * 2, 0], ["a", r, r, 0, 1, 0, -r * 2, 0], ["M", x - r + 4, y], ["L", x - r + 2 * r - 4, y], ["M", x - r + r, y - r + 4], ["L", x, y + r - 4]];
|
||
};
|
||
/* 精简节点和复杂节点共用的一些方法 */
|
||
const nodeBasicMethod = {
|
||
createNodeBox: (group, config, width, height, isRoot) => {
|
||
/* 最外面的大矩形 */
|
||
const container = group.addShape("rect", {
|
||
attrs: {
|
||
x: 0,
|
||
y: 0,
|
||
width,
|
||
height
|
||
// fill: '#FFF',
|
||
// stroke: '#000',
|
||
}
|
||
});
|
||
if (!isRoot) {
|
||
/* 左边的小圆点 */
|
||
group.addShape("circle", {
|
||
attrs: {
|
||
x: 3,
|
||
y: height / 2,
|
||
r: 6,
|
||
fill: config.basicColor
|
||
}
|
||
});
|
||
}
|
||
/* 矩形 */
|
||
group.addShape("rect", {
|
||
attrs: {
|
||
x: 3,
|
||
y: 0,
|
||
width: width - 19,
|
||
height,
|
||
fill: config.bgColor,
|
||
stroke: config.borderColor,
|
||
radius: 2,
|
||
cursor: "pointer"
|
||
}
|
||
});
|
||
|
||
/* 左边的粗线 */
|
||
group.addShape("rect", {
|
||
attrs: {
|
||
x: 3,
|
||
y: 0,
|
||
width: 3,
|
||
height,
|
||
fill: config.basicColor,
|
||
radius: 1.5
|
||
}
|
||
});
|
||
return container;
|
||
},
|
||
/* 生成树上的 marker */
|
||
createNodeMarker: (group, collapsed, x, y) => {
|
||
group.addShape("circle", {
|
||
attrs: {
|
||
x,
|
||
y,
|
||
r: 13,
|
||
fill: "rgba(47, 84, 235, 0.05)",
|
||
opacity: 0,
|
||
zIndex: -2
|
||
},
|
||
className: "collapse-icon-bg"
|
||
});
|
||
group.addShape("marker", {
|
||
attrs: {
|
||
x,
|
||
y,
|
||
radius: 7,
|
||
symbol: collapsed ? EXPAND_ICON: COLLAPSE_ICON,
|
||
stroke: "rgba(0,0,0,0.25)",
|
||
fill: "rgba(0,0,0,0)",
|
||
lineWidth: 1,
|
||
cursor: "pointer"
|
||
},
|
||
className: "collapse-icon"
|
||
});
|
||
},
|
||
afterDraw: (cfg, group) => {
|
||
/* 操作 marker 的背景色显示隐藏 */
|
||
const icon = group.findByClassName("collapse-icon");
|
||
if (icon) {
|
||
const bg = group.findByClassName("collapse-icon-bg");
|
||
icon.on("mouseenter", () => {
|
||
bg.attr("opacity", 1);
|
||
graph.get("canvas").draw();
|
||
});
|
||
icon.on("mouseleave", () => {
|
||
bg.attr("opacity", 0);
|
||
graph.get("canvas").draw();
|
||
});
|
||
}
|
||
/* ip 显示 */
|
||
const ipBox = group.findByClassName("ip-box");
|
||
if (ipBox) {
|
||
/* ip 复制的几个元素 */
|
||
const ipLine = group.findByClassName("ip-cp-line");
|
||
const ipBG = group.findByClassName("ip-cp-bg");
|
||
const ipIcon = group.findByClassName("ip-cp-icon");
|
||
const ipCPBox = group.findByClassName("ip-cp-box");
|
||
|
||
const onMouseEnter = () => {
|
||
this.ipHideTimer && clearTimeout(this.ipHideTimer);
|
||
ipLine.attr("opacity", 1);
|
||
ipBG.attr("opacity", 1);
|
||
ipIcon.attr("opacity", 1);
|
||
graph.get("canvas").draw();
|
||
};
|
||
const onMouseLeave = () => {
|
||
this.ipHideTimer = setTimeout(() => {
|
||
ipLine.attr("opacity", 0);
|
||
ipBG.attr("opacity", 0);
|
||
ipIcon.attr("opacity", 0);
|
||
graph.get("canvas").draw();
|
||
},
|
||
100);
|
||
};
|
||
ipBox.on("mouseenter", () => {
|
||
onMouseEnter();
|
||
});
|
||
ipBox.on("mouseleave", () => {
|
||
onMouseLeave();
|
||
});
|
||
ipCPBox.on("mouseenter", () => {
|
||
onMouseEnter();
|
||
});
|
||
ipCPBox.on("mouseleave", () => {
|
||
onMouseLeave();
|
||
});
|
||
ipCPBox.on("click", () => {});
|
||
}
|
||
},
|
||
setState: (name, value, item) => {
|
||
const hasOpacityClass = ["ip-cp-line", "ip-cp-bg", "ip-cp-icon", "ip-cp-box", "ip-box", "collapse-icon-bg"];
|
||
const group = item.getContainer();
|
||
const childrens = group.get("children");
|
||
graph.setAutoPaint(false);
|
||
if (name === "emptiness") {
|
||
if (value) {
|
||
childrens.forEach(shape => {
|
||
if (hasOpacityClass.indexOf(shape.get("className")) > -1) {
|
||
return;
|
||
}
|
||
shape.attr("opacity", 0.4);
|
||
});
|
||
} else {
|
||
childrens.forEach(shape => {
|
||
if (hasOpacityClass.indexOf(shape.get("className")) > -1) {
|
||
return;
|
||
}
|
||
shape.attr("opacity", 1);
|
||
});
|
||
}
|
||
}
|
||
graph.setAutoPaint(true);
|
||
}
|
||
};
|
||
|
||
/* 精简节点 */
|
||
G6.registerNode(SIMPLE_TREE_NODE, {
|
||
drawShape: (cfg, group) => {
|
||
const config = getNodeConfig(cfg);
|
||
const isRoot = cfg.type === "root";
|
||
const nodeError = cfg.nodeError;
|
||
|
||
const container = nodeBasicMethod.createNodeBox(group, config, 171, 38, isRoot);
|
||
|
||
/* name */
|
||
const nameText = group.addShape("text", {
|
||
attrs: {
|
||
text: cfg.name,
|
||
x: 19,
|
||
y: 19,
|
||
fontSize: 14,
|
||
fontWeight: 700,
|
||
textAlign: "left",
|
||
textBaseline: "middle",
|
||
fill: config.fontColor,
|
||
cursor: "pointer"
|
||
}
|
||
});
|
||
|
||
/* 修复 nameText 超长 */
|
||
fittingString(nameText, cfg.name, 133);
|
||
|
||
if (nodeError) {
|
||
group.addShape("image", {
|
||
attrs: {
|
||
x: 119,
|
||
y: 5,
|
||
height: 35,
|
||
width: 35,
|
||
img: "/static/images/warning-circle.svg"
|
||
}
|
||
});
|
||
}
|
||
|
||
const hasChildren = cfg.children && cfg.children.length > 0;
|
||
if (hasChildren) {
|
||
nodeBasicMethod.createNodeMarker(group, cfg.collapsed, 164, 19);
|
||
}
|
||
return container;
|
||
},
|
||
afterDraw: nodeBasicMethod.afterDraw,
|
||
setState: nodeBasicMethod.setState
|
||
},
|
||
"single-shape");
|
||
|
||
/* 复杂节点 */
|
||
G6.registerNode(TREE_NODE, {
|
||
drawShape: (cfg, group) => {
|
||
const config = getNodeConfig(cfg);
|
||
const isRoot = cfg.type === "root";
|
||
const nodeError = cfg.nodeError;
|
||
/* 最外面的大矩形 */
|
||
const container = nodeBasicMethod.createNodeBox(group, config, 243, 64, isRoot);
|
||
|
||
if (cfg.type !== "root") {
|
||
/* 上边的 type */
|
||
group.addShape("text", {
|
||
attrs: {
|
||
text: cfg.type,
|
||
x: 3,
|
||
y: -10,
|
||
fontSize: 12,
|
||
textAlign: "left",
|
||
textBaseline: "middle",
|
||
fill: "rgba(0,0,0,0.65)"
|
||
}
|
||
});
|
||
}
|
||
|
||
let ipWidth = 0;
|
||
if (cfg.ip) {
|
||
/* ip start */
|
||
/* ipBox */
|
||
const ipRect = group.addShape("rect", {
|
||
attrs: {
|
||
fill: nodeError ? null: "#FFF",
|
||
stroke: nodeError ? "rgba(255,255,255,0.65)": null,
|
||
radius: 2,
|
||
cursor: "pointer"
|
||
}
|
||
});
|
||
|
||
/* ip */
|
||
const ipText = group.addShape("text", {
|
||
attrs: {
|
||
text: cfg.ip,
|
||
x: 0,
|
||
y: 19,
|
||
fontSize: 12,
|
||
textAlign: "left",
|
||
textBaseline: "middle",
|
||
fill: nodeError ? "rgba(255,255,255,0.85)": "rgba(0,0,0,0.65)",
|
||
cursor: "pointer"
|
||
}
|
||
});
|
||
|
||
const ipBBox = ipText.getBBox();
|
||
/* ip 的文字总是距离右边 12px */
|
||
ipText.attr({
|
||
x: 224 - 12 - ipBBox.width
|
||
});
|
||
/* ipBox */
|
||
ipRect.attr({
|
||
x: 224 - 12 - ipBBox.width - 4,
|
||
y: ipBBox.minY - 5,
|
||
width: ipBBox.width + 8,
|
||
height: ipBBox.height + 10
|
||
});
|
||
|
||
/* 在 IP 元素上面覆盖一层透明层，方便监听 hover 事件 */
|
||
group.addShape("rect", {
|
||
attrs: {
|
||
stroke: "",
|
||
cursor: "pointer",
|
||
x: 224 - 12 - ipBBox.width - 4,
|
||
y: ipBBox.minY - 5,
|
||
width: ipBBox.width + 8,
|
||
height: ipBBox.height + 10,
|
||
fill: "#fff",
|
||
opacity: 0
|
||
},
|
||
className: "ip-box"
|
||
});
|
||
|
||
/* copyIpLine */
|
||
group.addShape("rect", {
|
||
attrs: {
|
||
x: 194,
|
||
y: 7,
|
||
width: 1,
|
||
height: 24,
|
||
fill: "#E3E6E8",
|
||
opacity: 0
|
||
},
|
||
className: "ip-cp-line"
|
||
});
|
||
/* copyIpBG */
|
||
group.addShape("rect", {
|
||
attrs: {
|
||
x: 195,
|
||
y: 8,
|
||
width: 22,
|
||
height: 22,
|
||
fill: "#FFF",
|
||
cursor: "pointer",
|
||
opacity: 0
|
||
},
|
||
className: "ip-cp-bg"
|
||
});
|
||
/* copyIpIcon */
|
||
group.addShape("image", {
|
||
attrs: {
|
||
x: 200,
|
||
y: 13,
|
||
height: 12,
|
||
width: 10,
|
||
img: "https://os.alipayobjects.com/rmsportal/DFhnQEhHyPjSGYW.png",
|
||
cursor: "pointer",
|
||
opacity: 0
|
||
},
|
||
className: "ip-cp-icon"
|
||
});
|
||
/* 放一个透明的矩形在 icon 区域上，方便监听点击 */
|
||
group.addShape("rect", {
|
||
attrs: {
|
||
x: 195,
|
||
y: 8,
|
||
width: 22,
|
||
height: 22,
|
||
fill: "#FFF",
|
||
cursor: "pointer",
|
||
opacity: 0
|
||
},
|
||
className: "ip-cp-box",
|
||
tooltip: "复制IP"
|
||
});
|
||
|
||
const ipRectBBox = ipRect.getBBox();
|
||
ipWidth = ipRectBBox.width;
|
||
/* ip end */
|
||
}
|
||
|
||
/* name */
|
||
const nameText = group.addShape("text", {
|
||
attrs: {
|
||
text: cfg.name,
|
||
x: 19,
|
||
y: 19,
|
||
fontSize: 14,
|
||
fontWeight: 700,
|
||
textAlign: "left",
|
||
textBaseline: "middle",
|
||
fill: config.fontColor,
|
||
cursor: "pointer"
|
||
}
|
||
// tooltip: cfg.name,
|
||
});
|
||
|
||
/* 根据 IP 的长度计算出 剩下的 留给 name 的长度！ */
|
||
/* 修复 nameText 超长 */
|
||
fittingString(nameText, cfg.name, 224 - ipWidth - 20);
|
||
|
||
/* 下面的文字 */
|
||
const remarkText = group.addShape("text", {
|
||
attrs: {
|
||
text: cfg.keyInfo,
|
||
x: 19,
|
||
y: 45,
|
||
fontSize: 14,
|
||
textAlign: "left",
|
||
textBaseline: "middle",
|
||
fill: config.fontColor,
|
||
cursor: "pointer"
|
||
}
|
||
// className: 'keyInfo',
|
||
// tooltip: cfg.keyInfo,
|
||
});
|
||
fittingString(remarkText, cfg.keyInfo, 204);
|
||
|
||
if (nodeError) {
|
||
group.addShape("image", {
|
||
attrs: {
|
||
x: 191,
|
||
y: 32,
|
||
height: 35,
|
||
width: 35,
|
||
img: "/static/images/warning-circle.svg"
|
||
}
|
||
});
|
||
}
|
||
|
||
const hasChildren = cfg.children && cfg.children.length > 0;
|
||
if (hasChildren) {
|
||
nodeBasicMethod.createNodeMarker(group, cfg.collapsed, 236, 32);
|
||
}
|
||
return container;
|
||
},
|
||
afterDraw: nodeBasicMethod.afterDraw,
|
||
setState: nodeBasicMethod.setState
|
||
},
|
||
"single-shape");
|
||
/* 是否显示 sofarouter，通过透明度来控制 */
|
||
G6.registerEdge("tree-edge", {
|
||
draw(cfg, group) {
|
||
const targetNode = cfg.targetNode.getModel();
|
||
const edgeError = !!targetNode.edgeError;
|
||
|
||
const startPoint = cfg.startPoint;
|
||
const endPoint = cfg.endPoint;
|
||
const controlPoints = this.getControlPoints(cfg);
|
||
let points = [startPoint]; // 添加起始点
|
||
// 添加控制点
|
||
if (controlPoints) {
|
||
points = points.concat(controlPoints);
|
||
}
|
||
// 添加结束点
|
||
points.push(endPoint);
|
||
const path = this.getPath(points);
|
||
|
||
group.addShape("path", {
|
||
attrs: {
|
||
path,
|
||
lineWidth: 12,
|
||
stroke: edgeError ? "rgba(245,34,45,0.05)": "rgba(47,84,235,0.05)",
|
||
opacity: 0,
|
||
zIndex: 0
|
||
},
|
||
className: "line-bg"
|
||
});
|
||
const keyShape = group.addShape("path", {
|
||
attrs: {
|
||
path,
|
||
lineWidth: 1,
|
||
stroke: edgeError ? "#FF7875": "rgba(0,0,0,0.25)",
|
||
zIndex: 1,
|
||
lineAppendWidth: 12
|
||
},
|
||
edgeError: !!edgeError
|
||
});
|
||
|
||
/* 连接线的中间点 */
|
||
const centerPoint = {
|
||
x: startPoint.x + (endPoint.x - startPoint.x) / 2,
|
||
y: startPoint.y + (endPoint.y - startPoint.y) / 2
|
||
};
|
||
const textRect = group.addShape("rect", {
|
||
attrs: {
|
||
fill: "#FFF1F0",
|
||
radius: 2,
|
||
cursor: "pointer",
|
||
opacity: 1
|
||
},
|
||
/* sofarouter 需要 class，以便控制 显示隐藏*/
|
||
className: SOFAROUTER_RECT_CLASS
|
||
});
|
||
const text = group.addShape("text", {
|
||
attrs: {
|
||
text: "Sofarouter",
|
||
x: 0,
|
||
y: 0,
|
||
fontSize: 12,
|
||
textAlign: "left",
|
||
textBaseline: "middle",
|
||
fill: "#F5222D",
|
||
opacity: 1
|
||
},
|
||
/* sofarouter 需要 class，以便控制 显示隐藏*/
|
||
className: SOFAROUTER_TEXT_CLASS
|
||
});
|
||
const textBBox = text.getBBox();
|
||
/* text 的位置 */
|
||
text.attr({
|
||
x: centerPoint.x - textBBox.width / 2,
|
||
y: centerPoint.y
|
||
});
|
||
/* text 的框框 */
|
||
textRect.attr({
|
||
x: centerPoint.x - textBBox.width / 2 - 4,
|
||
y: centerPoint.y - textBBox.height / 2 - 5,
|
||
width: textBBox.width + 8,
|
||
height: textBBox.height + 10
|
||
});
|
||
|
||
return keyShape;
|
||
},
|
||
/* 操作 线 的背景色显示隐藏 */
|
||
afterDraw: (cfg, group) => {
|
||
/* 背景色 */
|
||
const lineBG = group.get("children")[0]; // 顺序根据 draw 时确定
|
||
/* 线条 */
|
||
const line = group.get("children")[1];
|
||
line.on("mouseenter", () => {
|
||
lineBG.attr("opacity", "1");
|
||
/* 线条如果在没有错误的情况下，在 hover 时候，是需要变成蓝色的 */
|
||
if (!line.get("edgeError")) {
|
||
line.attr("stroke", "#2F54EB");
|
||
}
|
||
graph.get("canvas").draw();
|
||
});
|
||
line.on("mouseleave", () => {
|
||
lineBG.attr("opacity", "0");
|
||
if (!line.get("edgeError")) {
|
||
line.attr("stroke", "rgba(0,0,0,0.25)");
|
||
}
|
||
graph.get("canvas").draw();
|
||
});
|
||
},
|
||
setState: (name, value, item) => {
|
||
const group = item.getContainer();
|
||
const childrens = group.get("children");
|
||
graph.setAutoPaint(true);
|
||
if (name === "emptiness") {
|
||
if (value) {
|
||
childrens.forEach(shape => {
|
||
if (shape.get("className") === "line-bg") {
|
||
return;
|
||
}
|
||
shape.attr("opacity", 0.4);
|
||
});
|
||
} else {
|
||
childrens.forEach(shape => {
|
||
if (shape.get("className") === "line-bg") {
|
||
return;
|
||
}
|
||
shape.attr("opacity", 1);
|
||
});
|
||
}
|
||
}
|
||
graph.setAutoPaint(true);
|
||
},
|
||
update: null
|
||
},
|
||
"cubic-horizontal");
|
||
G6.registerBehavior("three-finger-drag-canvas", {
|
||
getEvents() {
|
||
return {
|
||
"canvas:dragstart": "onDragStart",
|
||
"canvas:drag": "onDrag",
|
||
"canvas:dragend": "onDragEnd"
|
||
};
|
||
},
|
||
onDragStart: ev => {
|
||
ev.preventDefault();
|
||
this.dragDx = ev.x;
|
||
this.dragDy = ev.y;
|
||
},
|
||
onDrag: ev => {
|
||
ev.preventDefault();
|
||
translate(this.dragDx - ev.x, this.dragDy - ev.y);
|
||
},
|
||
onDragEnd: ev => {
|
||
ev.preventDefault();
|
||
}
|
||
});
|
||
G6.registerBehavior("double-finger-drag-canvas", {
|
||
getEvents() {
|
||
return {
|
||
wheel: "onWheel"
|
||
};
|
||
},
|
||
onWheel: ev => {
|
||
if (ev.ctrlKey) {
|
||
const canvas = graph.get("canvas");
|
||
const point = canvas.getPointByClient(ev.clientX, ev.clientY);
|
||
let ratio = graph.getZoom();
|
||
if (ev.wheelDelta > 0) {
|
||
ratio = ratio + ratio * 0.05;
|
||
} else {
|
||
ratio = ratio - ratio * 0.05;
|
||
}
|
||
graph.zoomTo(ratio, {
|
||
x: point.x,
|
||
y: point.y
|
||
});
|
||
} else {
|
||
const x = ev.deltaX || ev.movementX;
|
||
const y = ev.deltaY || ev.movementY;
|
||
translate(x, y);
|
||
}
|
||
ev.preventDefault();
|
||
}
|
||
});
|
||
/*G6.registerBehavior("tooltip", {
|
||
getEvents() {
|
||
return {
|
||
"node:mousemove": "onMouseMove",
|
||
"node:mouseeleave": "onMouseLeave"
|
||
};
|
||
},
|
||
onMouseMove: ev => {
|
||
const {
|
||
tooltip: { visible }
|
||
} = this.state;
|
||
const tooltip = ev.target.get("tooltip");
|
||
const group = ev.item.get("group");
|
||
if (tooltip && !visible) {
|
||
const bbox = ev.target.getBBox();
|
||
const matrix = group.getMatrix();
|
||
const zoom = graph.getZoom();
|
||
this.showTooltip(
|
||
tooltip,
|
||
matrix[6] + bbox.x + bbox.width / 2,
|
||
matrix[7] + bbox.y - TIP_HEIGHT / zoom
|
||
);
|
||
}
|
||
if (!tooltip && visible) {
|
||
this.closeTooptip();
|
||
}
|
||
},
|
||
onMouseLeave: () => {
|
||
const {
|
||
tooltip: { visible }
|
||
} = this.state;
|
||
if (visible) {
|
||
this.closeTooptip();
|
||
}
|
||
}
|
||
});*/
|
||
const minimap = new Minimap({
|
||
size: [184, 124],
|
||
className: "minimap",
|
||
type: 'delegate'
|
||
});
|
||
let selectedItem;
|
||
graph = new G6.TreeGraph({
|
||
container: "mountNode",
|
||
width: CANVAS_WIDTH,
|
||
height: CANVAS_HEIGHT,
|
||
plugins: [minimap],
|
||
modes: {
|
||
default: [{
|
||
type:
|
||
"collapse-expand",
|
||
shouldUpdate: function shouldUpdate(e) {
|
||
/* 点击 node 禁止展开收缩 */
|
||
if (e.target.get("className") !== "collapse-icon") {
|
||
return false;
|
||
}
|
||
return true;
|
||
},
|
||
onChange: function onChange(item, collapsed) {
|
||
selectedItem = item;
|
||
const icon = item.get("group").findByClassName("collapse-icon");
|
||
if (collapsed) {
|
||
icon.attr("symbol", EXPAND_ICON);
|
||
} else {
|
||
icon.attr("symbol", COLLAPSE_ICON);
|
||
}
|
||
},
|
||
animate: {
|
||
callback: () => {
|
||
debugger;
|
||
graph.focusItem(selectedItem);
|
||
}
|
||
}
|
||
},
|
||
"double-finger-drag-canvas", "three-finger-drag-canvas", "tooltip", {
|
||
type: "drag-canvas",
|
||
shouldUpdate: function shouldUpdate() {
|
||
return false;
|
||
},
|
||
shouldEnd: function shouldUpdate() {
|
||
return false;
|
||
}
|
||
}]
|
||
},
|
||
defaultNode: {
|
||
shape: TREE_NODE,
|
||
anchorPoints: [[0, 0.5], [1, 0.5]]
|
||
},
|
||
defaultEdge: {
|
||
shape: "tree-edge",
|
||
style: {
|
||
stroke:
|
||
"#A3B1BF"
|
||
}
|
||
},
|
||
layout: data => {
|
||
const result = Hierarchy.compactBox(data, {
|
||
direction: "LR",
|
||
getId: function getId(d) {
|
||
return d.id;
|
||
},
|
||
getWidth: () => {
|
||
return 243;
|
||
},
|
||
getVGap: function getVGap() {
|
||
return 24;
|
||
},
|
||
getHGap: function getHGap() {
|
||
return 50;
|
||
}
|
||
});
|
||
return result;
|
||
}
|
||
});
|
||
function strLen(str) {
|
||
var len = 0;
|
||
for (var i = 0; i < str.length; i++) {
|
||
if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128) {
|
||
len++;
|
||
} else {
|
||
len += 2;
|
||
}
|
||
}
|
||
return len;
|
||
}
|
||
function fittingString(c, str, maxWidth) {
|
||
const width = strLen(str) * 8;
|
||
const ellipsis = "…";
|
||
if (width > maxWidth) {
|
||
const actualLen = Math.floor((maxWidth - 10) / 8);
|
||
c.attr('text', str.substring(0, actualLen) + ellipsis);
|
||
c._cfg.tooltip = str;
|
||
}
|
||
};
|
||
function translate(x, y) {
|
||
// graph.translate(-x, -y);
|
||
let moveX = x;
|
||
let moveY = y;
|
||
|
||
const containerWidth = graph.get("width");
|
||
const containerHeight = graph.get("height");
|
||
|
||
/* 获得当前偏移量*/
|
||
const group = graph.get("group");
|
||
const bbox = group.getBBox();
|
||
const leftTopPoint = graph.getCanvasByPoint(bbox.minX, bbox.minY);
|
||
const rightBottomPoint = graph.getCanvasByPoint(bbox.maxX, bbox.maxY);
|
||
/* 如果 x 轴在区域内，不允许左右超过100 */
|
||
if (x < 0 && leftTopPoint.x - x > LIMIT_OVERFLOW_WIDTH) {
|
||
moveX = 0;
|
||
}
|
||
if (x > 0 && rightBottomPoint.x - x < containerWidth - LIMIT_OVERFLOW_WIDTH) {
|
||
moveX = 0;
|
||
}
|
||
|
||
if (y < 0 && leftTopPoint.y - y > LIMIT_OVERFLOW_HEIGHT) {
|
||
moveY = 0;
|
||
}
|
||
if (y > 0 && rightBottomPoint.y - y < containerHeight - LIMIT_OVERFLOW_HEIGHT) {
|
||
moveY = 0;
|
||
}
|
||
graph.translate( - moveX, -moveY);
|
||
};
|
||
function fitView() {
|
||
const group = graph.get("group");
|
||
const width = graph.get("width"); // 视窗的宽度
|
||
const height = graph.get("height"); // 视窗的高度
|
||
group.resetMatrix();
|
||
// 内容
|
||
const bbox = group.getBBox();
|
||
// 视窗中间
|
||
const viewCenter = {
|
||
x: width / 2,
|
||
y: height / 2
|
||
};
|
||
/* 内容的中点 */
|
||
const groupCenter = {
|
||
x: bbox.x + bbox.width / 2,
|
||
y: bbox.y + bbox.height / 2
|
||
};
|
||
graph.translate( - bbox.x + 16, viewCenter.y - groupCenter.y);
|
||
};
|
||
function zoomTo(ratio, center) {
|
||
const width = graph.get("width"); // 视窗的宽度
|
||
const height = graph.get("height"); // 视窗的高度
|
||
const viewCenter = {
|
||
x: width / 2,
|
||
y: height / 2
|
||
};
|
||
graph.zoomTo(ratio, center || viewCenter);
|
||
};
|
||
function formatData(data) {
|
||
const recursiveTraverse = (node, level = 0) => {
|
||
// TODO 贤月 目前 keyInfo 没有
|
||
const appName = "testappName";
|
||
const keyInfo = "testkeyinfo";
|
||
const ip = "111.22.33.44";
|
||
|
||
const targetNode = {
|
||
id: node.key + "",
|
||
rpcId: node.rpcId,
|
||
level,
|
||
type: node.appName === "USER" ? "root": node.type,
|
||
name: appName,
|
||
keyInfo: keyInfo || "-",
|
||
ip,
|
||
nodeError: false,
|
||
edgeError: false,
|
||
sofarouter: true,
|
||
sofarouterError: true,
|
||
asyn: false,
|
||
origin: node
|
||
};
|
||
if (node.children) {
|
||
targetNode.children = [];
|
||
node.children.forEach(item => {
|
||
targetNode.children.push(recursiveTraverse(item, level + 1));
|
||
});
|
||
}
|
||
return targetNode;
|
||
};
|
||
const result = recursiveTraverse(data);
|
||
return result;
|
||
}
|
||
graph.on('beforepaint', () => {
|
||
const topLeft = graph.getPointByCanvas(0, 0);
|
||
const bottomRight = graph.getPointByCanvas(1000, 600);
|
||
graph.getNodes().forEach(node => {
|
||
const model = node.getModel();
|
||
if (model.x < topLeft.x - 200 || model.x > bottomRight.x || model.y < topLeft.y || model.y > bottomRight.y) {
|
||
node.getContainer().hide();
|
||
} else {
|
||
node.getContainer().show();
|
||
}
|
||
});
|
||
const edges = graph.getEdges();
|
||
edges.forEach(edge => {
|
||
const sourceNode = edge.get('sourceNode');
|
||
const targetNode = edge.get('targetNode');
|
||
if (!sourceNode.get('visible') && !targetNode.get('visible')) {
|
||
edge.hide();
|
||
} else {
|
||
edge.show();
|
||
}
|
||
})
|
||
});
|
||
$.getJSON('./assets/sourceData.json', data => {
|
||
data = formatData(data);
|
||
graph.data(data);
|
||
graph.render();
|
||
graph.fitView();
|
||
});
|
||
</script>
|
||
</body>
|
||
|
||
</html> |