You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dolphinscheduler.apache.org by ji...@apache.org on 2022/02/11 12:24:12 UTC
[dolphinscheduler] branch dev updated: [Fix-8172][UI] Fix coordinate calculation error (#8346)
This is an automated email from the ASF dual-hosted git repository.
jinyleechina pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler.git
The following commit(s) were added to refs/heads/dev by this push:
new d9df831 [Fix-8172][UI] Fix coordinate calculation error (#8346)
d9df831 is described below
commit d9df8319a2bf4cb515d1598431a98cef2d80f8a2
Author: wangyizhi <wa...@cmss.chinamobile.com>
AuthorDate: Fri Feb 11 20:24:07 2022 +0800
[Fix-8172][UI] Fix coordinate calculation error (#8346)
* [Fix-8172][UI] Fix coordinate calculation error
* [Fix-8172][UI] Code format
---
.../conf/home/pages/dag/_source/canvas/canvas.vue | 40 ++++------------------
.../home/pages/dag/_source/canvas/contextMenu.scss | 2 +-
2 files changed, 7 insertions(+), 35 deletions(-)
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/canvas/canvas.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/canvas/canvas.vue
index 2316f07..38fb849 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/canvas/canvas.vue
+++ b/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,
@@ -697,41 +690,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
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/canvas/contextMenu.scss b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/canvas/contextMenu.scss
index 6ea9a3c..8872b62 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/canvas/contextMenu.scss
+++ b/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;