[cherry-pick-2.0.4][Fix-8172][UI] Fix coordinate calculation error (#8350)

* [Fix-8172][UI] Fix coordinate calculation error

* [Fix-8172][UI] Code format

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/canvas/canvas.vue

@@ -75,11 +75,6 @@
     data () {
       return {
         graph: null,
-        // Used to calculate the context menu location
-        originalScrollPosition: {
-          left: 0,
-          top: 0
-        },
         editable: true,
         dragging: {
           // Distance from the mouse to the top-left corner of the dragging element
@@ -227,7 +222,6 @@
 
         this.registerX6Shape()
         this.bindGraphEvent()
-        this.originalScrollPosition = graph.getScrollbarPosition()
       },
       /**
        * Register custom shapes
@@ -248,10 +242,9 @@
           this.scale = sx
         })
         // right click
-        this.graph.on('node:contextmenu', ({ x, y, cell }) => {
-          const { left, top } = this.graph.getScrollbarPosition()
-          const o = this.originalScrollPosition
-          this.$refs.contextMenu.show(x + (o.left - left), y + (o.top - top))
+        this.graph.on('node:contextmenu', ({ x, y, cell, e }) => {
+          const { x: pageX, y: pageY } = this.graph.localToPage(x, y)
+          this.$refs.contextMenu.show(pageX, pageY)
           this.$refs.contextMenu.setCurrentTask({
             name: cell.data.taskName,
             type: cell.data.taskType,
@@ -649,41 +642,20 @@
         }
       },
       onDrop (e) {
-        const { type } = this.dragging
-        const { x, y } = this.calcGraphCoordinate(e.clientX, e.clientY)
+        const { type, x: eX, y: eY } = this.dragging
+        const { x, y } = this.graph.clientToLocal(e.clientX, e.clientY)
         this.genTaskCodeList({
           genNum: 1
         })
           .then((res) => {
             const [code] = res
-            this.addNode(code, type, { x, y })
+            this.addNode(code, type, { x: x - eX, y: y - eY })
             this.dagChart.openFormModel(code, type)
           })
           .catch((err) => {
             console.error(err)
           })
       },
-      calcGraphCoordinate (mClientX, mClientY) {
-        // Distance from the mouse to the top-left corner of the container;
-        const { left: cX, top: cY } =
-          this.$refs.container.getBoundingClientRect()
-        const mouseX = mClientX - cX
-        const mouseY = mClientY - cY
-
-        // The distance that paper has been scrolled
-        const { left: sLeft, top: sTop } = this.graph.getScrollbarPosition()
-        const { left: oLeft, top: oTop } = this.originalScrollPosition
-        const scrollX = sLeft - oLeft
-        const scrollY = sTop - oTop
-
-        // Distance from the mouse to the top-left corner of the dragging element;
-        const { x: eX, y: eY } = this.dragging
-
-        return {
-          x: mouseX + scrollX - eX,
-          y: mouseY + scrollY - eY
-        }
-      },
       /**
        * Get prev nodes by code
        * @param {number} code

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/canvas/contextMenu.scss

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 .dag-context-menu{
-  position: absolute;
+  position: fixed;
   left: 0;
   top: 0;
   width: 100px;