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

add dragging boundary

Browse Source
This commit is contained in:
Fine 2022-09-15 16:40:18 +08:00
parent 5a343d6eef
commit 6222c109d4
1 changed files with 32 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/views/dashboard/related/network-profiling/components/ProcessTopology.vue
View File

@ -167,6 +167,7 @@ const radius = 210;
const dates = ref<Nullable<{ start: number; end: number }>>(null); const dates = ref<Nullable<{ start: number; end: number }>>(null);
const nodeList = ref<ProcessNode[]>([]); const nodeList = ref<ProcessNode[]>([]);
const currentNode = ref<Nullable<ProcessNode>>(null); const currentNode = ref<Nullable<ProcessNode>>(null);
const origin = [0, 0];
onMounted(() => { onMounted(() => {
init(); init();
@ -189,10 +190,10 @@ async function init() {
function drawGraph() { function drawGraph() {
const dom = chart.value?.getBoundingClientRect() || { const dom = chart.value?.getBoundingClientRect() || {
height: 20, height: 30,
width: 0, width: 0,
}; };
height.value = (dom.height || 40) - 20; height.value = (dom.height || 40) - 30;
width.value = dom.width; width.value = dom.width;
diff.value[0] = (dom.width - radius * 2) / 2 + radius; diff.value[0] = (dom.width - radius * 2) / 2 + radius;
svg.value.call(zoom(d3, graph.value, diff.value)); svg.value.call(zoom(d3, graph.value, diff.value));
@ -235,7 +236,6 @@ function createPolygon(radius: number, sides = 6, offset = 0) {
} }
function getCirclePoint(radius: number, p = 1) { function getCirclePoint(radius: number, p = 1) {
const data = []; const data = [];
const origin = [0, 0];
for (let index = 0; index < 360; index = index + p) { for (let index = 0; index < 360; index = index + p) {
if (index < 230 || index > 310) { if (index < 230 || index > 310) {
let x = radius * Math.cos((Math.PI * 2 * index) / 360); let x = radius * Math.cos((Math.PI * 2 * index) / 360);
@ -252,7 +252,6 @@ function getHexPolygonVertices() {
radius, // layout hexagons radius 300 radius, // layout hexagons radius 300
}; };
const polygon = createPolygon(p.radius, 6, 0); const polygon = createPolygon(p.radius, 6, 0);
const origin = [0, 0];
const vertices: any = []; // a hexagon vertices const vertices: any = []; // a hexagon vertices
for (let v = 0; v < polygon.length; v++) { for (let v = 0; v < polygon.length; v++) {
vertices.push([origin[0] + polygon[v][0], origin[1] + polygon[v][1]]); vertices.push([origin[0] + polygon[v][0], origin[1] + polygon[v][1]]);
@ -273,7 +272,6 @@ function createLayout() {
count: 1, count: 1,
radius, // layout hexagons radius 300 radius, // layout hexagons radius 300
}; };
const origin = [0, 0];
const nodeArr = networkProfilingStore.nodes.filter( const nodeArr = networkProfilingStore.nodes.filter(
(d: ProcessNode) => d.isReal || d.name === "UNKNOWN_LOCAL" (d: ProcessNode) => d.isReal || d.name === "UNKNOWN_LOCAL"
); );
@ -451,6 +449,22 @@ function stopMoveNode(event: MouseEvent) {
currentNode.value = null; currentNode.value = null;
} }
function moveNode(d: ProcessNode) { function moveNode(d: ProcessNode) {
if (!currentNode.value) {
return;
}
const inNode =
currentNode.value.isReal || currentNode.value.name === "UNKNOWN_LOCAL";
const diff = inNode ? -20 : 20;
const inside = posInHex(d.x || 0, d.y || 0, diff);
if (inNode) {
if (!inside) {
return;
}
} else {
if (inside) {
return;
}
}
nodeList.value = nodeList.value.map((node: ProcessNode) => { nodeList.value = nodeList.value.map((node: ProcessNode) => {
if (currentNode.value && node.id === currentNode.value.id) { if (currentNode.value && node.id === currentNode.value.id) {
node.x = d.x; node.x = d.x;
@ -459,6 +473,19 @@ function moveNode(d: ProcessNode) {
return node; return node;
}); });
} }
function posInHex(posX: number, posY: number, diff: number) {
const halfSideLen = (radius + diff) / 2;
const mathSqrt3 = Math.sqrt(3);
const dx = Math.abs(origin[0] - posX);
const dy = Math.abs(origin[1] - posY);
if (dx < halfSideLen) {
return dy <= halfSideLen * mathSqrt3;
} else {
const maxY = -mathSqrt3 * (dx - halfSideLen) + halfSideLen * mathSqrt3;
return dy < maxY;
}
}
function showNodeTip(d: ProcessNode, event: MouseEvent) { function showNodeTip(d: ProcessNode, event: MouseEvent) {
const tipHtml = ` <div class="mb-5"><span class="grey">name: </span>${d.name}</div>`; const tipHtml = ` <div class="mb-5"><span class="grey">name: </span>${d.name}</div>`;