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

update

Browse Source
This commit is contained in:
Fine 2022-09-14 20:16:24 +08:00
parent 87ec4361b9
commit 5a343d6eef
1 changed files with 15 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -36,11 +36,10 @@ limitations under the License. -->
<g <g
v-for="(node, index) in nodeList" v-for="(node, index) in nodeList"
:key="index" :key="index"
class="topo-node" class="node"
@mouseover="showNodeTip(node, $event)" @mouseover="showNodeTip(node, $event)"
@mouseout="hideNodeTip" @mouseout="hideNodeTip"
@mousemove="moveNode(node, $event)" @mousedown="startMoveNode($event, node)"
@mousedown="startMoveNode($event)"
@mouseup="stopMoveNode($event)" @mouseup="stopMoveNode($event)"
> >
<image <image
@ -167,7 +166,7 @@ const diff = ref<number[]>([220, 200]);
const radius = 210; 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 isMoving = ref<boolean>(false); const currentNode = ref<Nullable<ProcessNode>>(null);
onMounted(() => { onMounted(() => {
init(); init();
@ -199,7 +198,7 @@ function drawGraph() {
svg.value.call(zoom(d3, graph.value, diff.value)); svg.value.call(zoom(d3, graph.value, diff.value));
} }
function clickTopology(event: any) { function clickTopology(event: MouseEvent) {
event.stopPropagation(); event.stopPropagation();
event.preventDefault(); event.preventDefault();
networkProfilingStore.setNode(null); networkProfilingStore.setNode(null);
@ -350,6 +349,10 @@ function createLayout() {
outNodes[v].y = pointArr[v][1]; outNodes[v].y = pointArr[v][1];
} }
nodeList.value = [...nodeArr, ...outNodes]; nodeList.value = [...nodeArr, ...outNodes];
const drag: any = d3.drag().on("drag", (d: ProcessNode) => {
moveNode(d);
});
d3.selectAll(".node").call(drag);
} }
function shuffleArray(array: number[][]) { function shuffleArray(array: number[][]) {
@ -439,23 +442,19 @@ async function freshNodes() {
drawGraph(); drawGraph();
createLayout(); createLayout();
} }
function startMoveNode(event: MouseEvent) { function startMoveNode(event: MouseEvent, d: ProcessNode) {
event.stopPropagation(); event.stopPropagation();
isMoving.value = true; currentNode.value = d;
} }
function stopMoveNode(event: MouseEvent) { function stopMoveNode(event: MouseEvent) {
event.stopPropagation(); event.stopPropagation();
isMoving.value = false; currentNode.value = null;
}
function moveNode(d: ProcessNode, event: MouseEvent) {
event.stopPropagation();
if (!isMoving.value) {
return;
} }
function moveNode(d: ProcessNode) {
nodeList.value = nodeList.value.map((node: ProcessNode) => { nodeList.value = nodeList.value.map((node: ProcessNode) => {
if (node.id === d.id) { if (currentNode.value && node.id === currentNode.value.id) {
node.x = event.offsetX - diff.value[0]; node.x = d.x;
node.y = event.offsetY - diff.value[1]; node.y = d.y;
} }
return node; return node;
}); });