diff --git a/src/views/dashboard/related/topology/components/Graph.vue b/src/views/dashboard/related/topology/components/Graph.vue index 29320266..6137a51f 100644 --- a/src/views/dashboard/related/topology/components/Graph.vue +++ b/src/views/dashboard/related/topology/components/Graph.vue @@ -162,7 +162,7 @@ limitations under the License. --> anchor.value = graph.value.append("g").selectAll(".topo-line-anchor"); arrow.value = graph.value.append("g").selectAll(".topo-line-arrow"); svg.value.call(zoom(d3, graph.value, [-100, -100])); - svg.value.on("click", (event: any) => { + svg.value.on("click", (event: PointerEvent) => { event.stopPropagation(); event.preventDefault(); topologyStore.setNode(null); @@ -218,11 +218,11 @@ limitations under the License. --> simulation.value.alphaTarget(0); } } - function handleNodeClick(d: Node & { x: number; y: number }) { + function handleNodeClick(event: PointerEvent, d: Node & { x: number; y: number }) { topologyStore.setNode(d); topologyStore.setLink(null); - operationsPos.x = d.x - 100; - operationsPos.y = d.y - 70; + operationsPos.x = event.offsetX; + operationsPos.y = event.offsetY; if (d.layer === String(dashboardStore.layerId)) { return; } @@ -231,7 +231,7 @@ limitations under the License. --> { id: "alarm", title: "Alarm", func: handleGoAlarm }, ]; } - function handleLinkClick(event: any, d: Call) { + function handleLinkClick(event: PointerEvent, d: Call) { if (d.source.layer !== dashboardStore.layerId || d.target.layer !== dashboardStore.layerId) { return; } diff --git a/src/views/dashboard/related/topology/components/utils/nodeElement.ts b/src/views/dashboard/related/topology/components/utils/nodeElement.ts index e75d5850..6aefc1e9 100644 --- a/src/views/dashboard/related/topology/components/utils/nodeElement.ts +++ b/src/views/dashboard/related/topology/components/utils/nodeElement.ts @@ -22,16 +22,16 @@ export default (d3: any, graph: any, funcs: any, tip: any, legend?: any) => { const nodeEnter = graph .append("g") .call(d3.drag().on("start", funcs.dragstart).on("drag", funcs.dragged).on("end", funcs.dragended)) - .on("mouseover", function (event: any, d: Node) { + .on("mouseover", function (event: PointerEvent, d: Node) { tip.html(funcs.tipHtml).show(d, this); }) .on("mouseout", function () { tip.hide(this); }) - .on("click", (event: any, d: Node | any) => { + .on("click", (event: PointerEvent, d: Node | any) => { event.stopPropagation(); event.preventDefault(); - funcs.handleNodeClick(d); + funcs.handleNodeClick(event, d); }); nodeEnter .append("image")