[skywalking-booster-ui] branch main updated: fix: operation pop-up window (#242)

[wu...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

wusheng pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/skywalking-booster-ui.git


The following commit(s) were added to refs/heads/main by this push:
     new 4e64b9a  fix: operation pop-up window (#242)
4e64b9a is described below

commit 4e64b9a4b1bb38b6680a74bc99f11c7632fdaefa
Author: Fine0830 <fa...@gmail.com>
AuthorDate: Tue Feb 28 16:26:33 2023 +0800

    fix: operation pop-up window (#242)
---
 src/views/dashboard/related/topology/components/Graph.vue      | 10 +++++-----
 .../dashboard/related/topology/components/utils/nodeElement.ts |  6 +++---
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/views/dashboard/related/topology/components/Graph.vue b/src/views/dashboard/related/topology/components/Graph.vue
index 2932026..6137a51 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 e75d585..6aefc1e 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")