github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-13 08:17:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: update line positions

Browse Source
This commit is contained in:
Fine 2023-03-20 21:54:49 +08:00
parent 16ae4fe81b
commit 01feb349be
2 changed files with 17 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/dashboard/related/topology/components/Graph.vue
View File

@ -45,8 +45,8 @@ limitations under the License. -->
<g v-for="(l, index) in topologyLayout.calls" :key="index"> <g v-for="(l, index) in topologyLayout.calls" :key="index">
<path <path
class="topo-line" class="topo-line"
:d="`M${l.sourceObj.x} ${l.sourceObj.y} :d="`M${l.sourceX} ${l.sourceY}
L${l.targetObj.x} ${l.targetObj.y}`" L${l.targetX} ${l.targetY}`"
stroke="#aaa" stroke="#aaa"
stroke-width="1" stroke-width="1"
marker-end="url(#arrow)" marker-end="url(#arrow)"

36
src/views/dashboard/related/topology/components/utils/layout.ts
View File

@ -17,7 +17,7 @@
import * as d3 from "d3"; import * as d3 from "d3";
import type { Node, Call } from "@/types/topology"; import type { Node, Call } from "@/types/topology";
export function layout(levels: Node[][], calls: Call[]) { export function layout(levels: Node[][], calls: any[]) {
// precompute level depth // precompute level depth
levels.forEach((l: any, i: any) => l.forEach((n: any) => (n.level = i))); levels.forEach((l: any, i: any) => l.forEach((n: any) => (n.level = i)));
@ -54,10 +54,10 @@ export function layout(levels: Node[][], calls: Call[]) {
} }
for (const call of calls) { for (const call of calls) {
const pos: any = circleIntersection(call.sourceObj.x, call.sourceObj.y, 18, call.targetObj.x, call.targetObj.y, 18); const pos: any = circleIntersection(call.sourceObj.x, call.sourceObj.y, 18, call.targetObj.x, call.targetObj.y, 18);
// call.sourceObj.ax = pos[0].x; call.sourceX = pos[0].x;
// call.sourceObj.ay = pos[0].y; call.sourceY = pos[0].y;
// call.targetObj.ax = pos[1].x; call.targetX = pos[1].x;
// call.targetObj.ay = pos[1].y; call.targetY = pos[1].y;
} }
const layout = { const layout = {
width: d3.max(nodes, (n: { x: number }) => n.x) || 0 + node_width + 2 * padding, width: d3.max(nodes, (n: { x: number }) => n.x) || 0 + node_width + 2 * padding,
@ -68,23 +68,17 @@ export function layout(levels: Node[][], calls: Call[]) {
} }
function circleIntersection(ax: number, ay: number, ar: number, bx: number, by: number, br: number) { function circleIntersection(ax: number, ay: number, ar: number, bx: number, by: number, br: number) {
const distance = Math.sqrt(Math.pow(bx - ax, 2) + Math.pow(by - ay, 2)); const dab = Math.sqrt(Math.pow(ax - bx, 2) + Math.pow(ay - by, 2));
const dx = (bx - ax) / distance;
const dy = (by - ay) / distance;
const t = dx * (bx - ax) + dy * (by - ay);
const ex = t * dx + ax;
const ey = t * dy + ay;
const d1 = Math.sqrt(Math.pow(ex - ax, 2) + Math.pow(ey - ay, 2));
const d2 = Math.sqrt(Math.pow(ex - bx, 2) + Math.pow(ey - by, 2));
if (d1 > ar || d2 > br) {
return null;
}
const dt = Math.sqrt(Math.pow(ar, 2) - Math.pow(d1, 2)); const dfx = (ar * Math.abs(ax - bx)) / dab;
const fx = ex + (dt * (by - ay)) / distance; const dfy = (ar * Math.abs(ay - by)) / dab;
const fy = ey - (dt * (bx - ax)) / distance; const fx = bx > ax ? ax + dfx : ax - dfx;
const gx = ex - (dt * (by - ay)) / distance; const fy = ay > by ? ay - dfy : ay + dfy;
const gy = ey + (dt * (bx - ax)) / distance;
const dgx = (br * Math.abs(ax - bx)) / dab;
const dgy = (br * Math.abs(ay - by)) / dab;
const gx = bx > ax ? bx - dgx : bx + dgx;
const gy = ay > by ? by + dgy : by - dgy;
return [ return [
{ x: fx, y: fy }, { x: fx, y: fy },