123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <div id="mountNode"></div>
- </head>
- <body>
- <script src="../build/g6.js"></script>
- <script src="../build/minimap.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: "edge-label",
- 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 pixelRatio = canvas.get("pixelRatio");
- 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 / pixelRatio,
- y: point.y / pixelRatio
- });
- } 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",
- { type: "tooltip",
- formatText: data => {
- return `<div>${data.name}</div>`
- }
- },
- {
- 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"
- },
- edgeStyle: {
- default: {
- stroke: "#A3B1BF"
- }
- },
- layout: {
- type: 'compactBox',
- direction: "LR",
- getId: function getId(d) {
- return d.id;
- },
- getWidth: () => {
- return 243;
- },
- getVGap: function getVGap() {
- return 24;
- },
- getHGap: function getHGap() {
- return 50;
- }
- }
- });
- 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) => {
- 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>
|