You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dolphinscheduler.apache.org by so...@apache.org on 2022/10/29 10:08:21 UTC
[dolphinscheduler] branch dev updated: [Feature][UI] Added logic to drag and drop nodes to DAG canvas. (#12598)
This is an automated email from the ASF dual-hosted git repository.
songjian 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 f39e5853f3 [Feature][UI] Added logic to drag and drop nodes to DAG canvas. (#12598)
f39e5853f3 is described below
commit f39e5853f318885b63f41a8f933e5c9f4e97bfef
Author: songjianet <17...@qq.com>
AuthorDate: Sat Oct 29 18:08:11 2022 +0800
[Feature][UI] Added logic to drag and drop nodes to DAG canvas. (#12598)
* [Feature][UI] Added logic to drag and drop nodes to DAG canvas.
* [Feature][UI] Added logic to drag and drop nodes to DAG canvas.
---
.../project/dynamic/dag.ts} | 23 +++++++++--
.../project/dynamic/types.ts} | 10 ++---
.../workflow/components/dynamic-dag/dag-canvas.tsx | 2 +
.../components/dynamic-dag/dag-sidebar.tsx | 10 ++---
.../workflow/components/dynamic-dag/index.tsx | 44 ++++++++++++++--------
.../{use-dag-node.ts => use-add-dag-shape.ts} | 19 ++++++++--
.../components/dynamic-dag/use-dag-node.ts | 11 +++++-
dolphinscheduler-ui/vite.config.ts | 4 +-
8 files changed, 88 insertions(+), 35 deletions(-)
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-dag-node.ts b/dolphinscheduler-ui/src/store/project/dynamic/dag.ts
similarity index 68%
copy from dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-dag-node.ts
copy to dolphinscheduler-ui/src/store/project/dynamic/dag.ts
index d8b06a5805..348a0e7f46 100644
--- a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-dag-node.ts
+++ b/dolphinscheduler-ui/src/store/project/dynamic/dag.ts
@@ -15,8 +15,23 @@
* limitations under the License.
*/
-export function useDagNode() {
- return {
- inherit: 'rect'
+import { defineStore } from 'pinia'
+import { DagStore } from './types'
+
+export const useDagStore = defineStore({
+ id: 'dag-store',
+ state: (): DagStore => ({
+ tasks: []
+ }),
+ persist: true,
+ getters: {
+ getDagTasks(): Array<any> {
+ return this.tasks
+ }
+ },
+ actions: {
+ setDagTasks(tasks: Array<any>): void {
+ this.tasks = tasks
+ }
}
-}
\ No newline at end of file
+})
\ No newline at end of file
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-dag-node.ts b/dolphinscheduler-ui/src/store/project/dynamic/types.ts
similarity index 92%
copy from dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-dag-node.ts
copy to dolphinscheduler-ui/src/store/project/dynamic/types.ts
index d8b06a5805..d3560b1484 100644
--- a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-dag-node.ts
+++ b/dolphinscheduler-ui/src/store/project/dynamic/types.ts
@@ -15,8 +15,8 @@
* limitations under the License.
*/
-export function useDagNode() {
- return {
- inherit: 'rect'
- }
-}
\ No newline at end of file
+interface DagStore {
+ tasks: Array<any>
+}
+
+export { DagStore }
\ No newline at end of file
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-canvas.tsx b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-canvas.tsx
index c3f43a1bbb..20339c0c99 100644
--- a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-canvas.tsx
+++ b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-canvas.tsx
@@ -21,6 +21,7 @@ import { useDagResize } from './use-dag-resize'
import { useDagGraph } from './use-dag-graph'
import { useDagNode } from './use-dag-node'
import { useDagEdge } from './use-dag-edge'
+//import { useAddDagShape } from './use-add-dag-shape'
import { DagNodeName, DagEdgeName } from './dag-setting'
import styles from './dag-canvas.module.scss'
@@ -67,6 +68,7 @@ const DagCanvas = defineComponent({
initGraph()
registerNode()
registerEdge()
+ //useAddDagShape((graph.value as Graph))
})
return {
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-sidebar.tsx b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-sidebar.tsx
index b35b69d02e..83edb09fd9 100644
--- a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-sidebar.tsx
+++ b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-sidebar.tsx
@@ -21,12 +21,12 @@ import styles from './dag-sidebar.module.scss'
const DagSidebar = defineComponent({
name: 'DagSidebar',
- emits: ['Dragend'],
+ emits: ['Dragstart'],
setup(props, context) {
const { variables, getTaskList } = useSidebar()
- const handleDragend = (e: DragEvent, task: any) => {
- context.emit('Dragend', e, task)
+ const handleDragstart = (e: DragEvent, task: string) => {
+ context.emit('Dragstart', e, task)
}
onMounted(() => {
@@ -35,7 +35,7 @@ const DagSidebar = defineComponent({
return {
...toRefs(variables),
- handleDragend
+ handleDragstart
}
},
render() {
@@ -44,7 +44,7 @@ const DagSidebar = defineComponent({
{
this.taskList.map(task => {
return (
- <div class={styles['task-item']} draggable='true' onDragend={(e: DragEvent) => this.handleDragend(e, task)}>
+ <div class={styles['task-item']} draggable='true' onDragstart={(e: DragEvent) => this.handleDragstart(e, task)}>
{task}
</div>
)
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/index.tsx b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/index.tsx
index 38312ff29c..6784126617 100644
--- a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/index.tsx
+++ b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/index.tsx
@@ -15,36 +15,50 @@
* limitations under the License.
*/
-import { defineComponent } from 'vue'
+import { defineComponent, reactive } from 'vue'
import { DagSidebar } from './dag-sidebar'
import { DagCanvas } from './dag-canvas'
+import { useDagStore } from '@/store/project/dynamic/dag'
import styles from './index.module.scss'
const DynamicDag = defineComponent({
name: 'DynamicDag',
setup() {
- const handelDragend = () => {
- //console.log(e, task)
- //if (readonly.value) {
- // e.preventDefault()
- // return
- //}
- //dragged.value = {
- // x: e.offsetX,
- // y: e.offsetY,
- // type: task
- //}
+ const dragged = reactive({
+ x: 0,
+ y: 0,
+ task: ''
+ })
+
+ const handelDragstart = (e: DragEvent, task: string) => {
+ dragged.x = e.offsetX
+ dragged.y = e.offsetY
+ dragged.task = task
+ }
+
+ const handelDrop = (e: DragEvent) => {
+ if (!dragged.task) return
+
+ dragged.x = e.offsetX
+ dragged.y = e.offsetY
+
+ const shapes = useDagStore().getDagTasks
+ if (shapes) {
+ shapes.push(dragged)
+ }
+ useDagStore().setDagTasks(shapes)
}
return {
- handelDragend
+ handelDragstart,
+ handelDrop
}
},
render() {
return (
<div class={styles['workflow-dag']}>
- <DagSidebar onDragend={this.handelDragend} />
- <DagCanvas />
+ <DagSidebar onDragstart={this.handelDragstart} />
+ <DagCanvas onDrop={this.handelDrop} />
</div>
)
}
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-dag-node.ts b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-add-dag-shape.ts
similarity index 64%
copy from dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-dag-node.ts
copy to dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-add-dag-shape.ts
index d8b06a5805..80aab60a52 100644
--- a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-dag-node.ts
+++ b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-add-dag-shape.ts
@@ -15,8 +15,19 @@
* limitations under the License.
*/
-export function useDagNode() {
- return {
- inherit: 'rect'
- }
+import { Graph, Cell } from '@antv/x6'
+import { useDagStore } from '@/store/project/dynamic/dag'
+
+export function useAddDagShape(graph: Graph) {
+ const cells: Array<Cell> = useDagStore().getDagTasks
+
+ cells.forEach(item => {
+ if (item.shape === 'dag-edge') {
+ cells.push((graph as Graph).addEdge(item))
+ } else {
+ cells.push((graph as Graph).addNode(item as any))
+ }
+ })
+
+ ;(graph as Graph).resetCells(cells)
}
\ No newline at end of file
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-dag-node.ts b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-dag-node.ts
index d8b06a5805..cfd03df8e8 100644
--- a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-dag-node.ts
+++ b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-dag-node.ts
@@ -15,8 +15,17 @@
* limitations under the License.
*/
+import { createVNode } from 'vue'
+import { DagNode } from './dag-node'
+import '@antv/x6-vue-shape'
+
export function useDagNode() {
return {
- inherit: 'rect'
+ inherit: 'vue-shape',
+ component: {
+ render: () => {
+ return createVNode(DagNode)
+ }
+ }
}
}
\ No newline at end of file
diff --git a/dolphinscheduler-ui/vite.config.ts b/dolphinscheduler-ui/vite.config.ts
index bad7b707f5..8af6eefc7d 100644
--- a/dolphinscheduler-ui/vite.config.ts
+++ b/dolphinscheduler-ui/vite.config.ts
@@ -39,7 +39,9 @@ export default defineConfig({
alias: {
'@': path.resolve(__dirname, 'src'),
// resolve vue-i18n warning: You are running the esm-bundler build of vue-i18n.
- 'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js'
+ 'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js',
+ '@antv/x6': '@antv/x6/dist/x6.js',
+ '@antv/x6-vue-shape': '@antv/x6-vue-shape/lib'
}
},
server: {