From 048572c481ddac1c851dcc6c63714676802cb312 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Wed, 9 Feb 2022 20:47:01 +0800
Subject: [PATCH] fix: update zoom and drag

---
 src/views/dashboard/related/topology/Graph.vue  | 17 +++++++++--------
 .../dashboard/related/topology/utils/zoom.ts    | 12 +++++++-----
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/views/dashboard/related/topology/Graph.vue b/src/views/dashboard/related/topology/Graph.vue
index 1826ec48..e4a35340 100644
--- a/src/views/dashboard/related/topology/Graph.vue
+++ b/src/views/dashboard/related/topology/Graph.vue
@@ -77,6 +77,7 @@ onMounted(async () => {
   node.value = graph.value.append("g").selectAll(".topo-node");
   link.value = graph.value.append("g").selectAll(".topo-line");
   anchor.value = graph.value.append("g").selectAll(".topo-line-anchor");
+  svg.value.call(zoom(d3, graph.value));
   // tools.value = tool(graph.value, [
   //   { icon: "API", click: handleGoEndpoint },
   //   { icon: "INSTANCE", click: handleGoInstance },
@@ -133,19 +134,19 @@ function dragstart(d: any) {
     g.__data__.fx = g.__data__.x;
     g.__data__.fy = g.__data__.y;
   });
-  if (!(d3 as any).event.active) {
+  if (!d.active) {
     simulation.value.alphaTarget(0.1).restart();
   }
-  (d3 as any).event.sourceEvent.stopPropagation();
+  d.subject.fx = d.subject.x;
+  d.subject.fy = d.subject.y;
+  d.sourceEvent.stopPropagation();
 }
 function dragged(d: any) {
-  d.fx = (d3 as any).event.x;
-  d.fy = (d3 as any).event.y;
-  d.x = d.fx;
-  d.y = d.fy;
+  d.subject.fx = d.x;
+  d.subject.fy = d.y;
 }
-function dragended() {
-  if (!(d3 as any).event.active) {
+function dragended(d: any) {
+  if (!d.active) {
     simulation.value.alphaTarget(0);
   }
 }
diff --git a/src/views/dashboard/related/topology/utils/zoom.ts b/src/views/dashboard/related/topology/utils/zoom.ts
index 8a41d294..70576dda 100644
--- a/src/views/dashboard/related/topology/utils/zoom.ts
+++ b/src/views/dashboard/related/topology/utils/zoom.ts
@@ -14,13 +14,15 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 export default (d3: any, graph: any) =>
   d3
     .zoom()
     .scaleExtent([0.3, 10])
-    .on("zoom", () => {
-      graph.attr(
-        "transform",
-        `translate(${d3.event.transform.x},${d3.event.transform.y})scale(${d3.event.transform.k})`
-      );
+    .on("zoom", (d: any) => {
+      graph
+        .attr("transform", d3.zoomTransform(graph.node()))
+        .attr(
+          `translate(${d.transform.x},${d.transform.y})scale(${d.transform.k})`
+        );
     });