From 631cc6ea1fbc95e55597982f3c5a23d1f3751327 Mon Sep 17 00:00:00 2001
From: satcblue <40662353+satcblue@users.noreply.github.com>
Date: Thu, 2 Jul 2020 14:19:04 +0800
Subject: [PATCH] fix dag zoom (#3103)

Co-authored-by: linhaojie <linhaojie@lizhi.fm>
Co-authored-by: dailidong <dailidong66@gmail.com>
Co-authored-by: bao liang <29528966+lenboo@users.noreply.github.com>
---
 .../home/pages/dag/_source/plugIn/dragZoom.js    |  2 +-
 .../pages/dag/_source/plugIn/jsPlumbHandle.js    | 16 +++++++++-------
 .../conf/home/pages/dag/_source/plugIn/util.js   | 16 +++++++++++++++-
 3 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/dragZoom.js b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/dragZoom.js
index 2027f8e1e..009c82bba 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/dragZoom.js
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/dragZoom.js
@@ -29,7 +29,7 @@ DragZoom.prototype.init = function () {
     .scaleExtent([0.5, 2])
     .on('zoom', () => {
       this.scale = d3.event.scale
-      $canvas.css('transform', 'translate(' + d3.event.translate[0] + 'px,' + d3.event.translate[1] + 'px) scale(' + this.scale + ')')
+      $canvas.css('transform', 'scale(' + this.scale + ')')
       $canvas.css('transform-origin', '0 0')
     })
   this.element.call(this.zoom).on('dblclick.zoom', null)
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js
index 690497f02..ef4519ec7 100755
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js
@@ -31,7 +31,8 @@ import {
   rtTasksTpl,
   setSvgColor,
   saveTargetarr,
-  rtTargetarrArr
+  rtTargetarrArr,
+  computeScale
 } from './util'
 import mStart from '@/conf/home/pages/projects/pages/definition/pages/list/_source/start'
 import multiDrag from './multiDrag'
@@ -148,12 +149,13 @@ JSP.prototype.draggable = function () {
       scope: 'plant',
       drop: function (ev, ui) {
         let id = 'tasks-' + Math.ceil(Math.random() * 100000) // eslint-disable-line
-        // Get mouse coordinates
-        const left = parseInt(ui.offset.left - $(this).offset().left)
-        let top = parseInt(ui.offset.top - $(this).offset().top) - 10
-        if (top < 25) {
-          top = 25
-        }
+
+        let scale = computeScale($(this))
+        scale = scale || 1
+
+        // Get mouse coordinates and after scale coordinate
+        const left = parseInt(ui.offset.left - $(this).offset().left) / scale
+        const top = parseInt(ui.offset.top - $(this).offset().top) / scale
         // Generate template node
         $('#canvas').append(rtTasksTpl({
           id: id,
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/util.js b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/util.js
index 84b01a524..0b472b6c1 100755
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/util.js
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/util.js
@@ -130,6 +130,19 @@ const allNodesId = () => {
   })
   return idArr
 }
+/**
+ * compute scale，because it cant get from jquery directly
+ * @param el element
+ * @returns {boolean|number}
+ */
+const computeScale = function (el) {
+  const matrix = el.css('transform')
+  if (!matrix || matrix === 'none') {
+    return false
+  }
+  const values = matrix.split('(')[1].split(')')[0].split(',')
+  return Math.sqrt(values[0] * values[0] + values[1] * values[1])
+}
 
 export {
   rtTargetarrArr,
@@ -139,5 +152,6 @@ export {
   isNameExDag,
   setSvgColor,
   allNodesId,
-  rtBantpl
+  rtBantpl,
+  computeScale
 }
-- 
GitLab