fix dag zoom (#3103)

Co-authored-by: Nlinhaojie <linhaojie@lizhi.fm>
Co-authored-by: Ndailidong <dailidong66@gmail.com>
Co-authored-by: Nbao liang <29528966+lenboo@users.noreply.github.com>

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)

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,

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
 }