[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.

dolphinscheduler-ui/src/store/project/dynamic/dag.ts

@@ -0,0 +1,37 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+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
+    }
+  }
+})

dolphinscheduler-ui/src/store/project/dynamic/types.ts

@@ -0,0 +1,22 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+interface DagStore {
+  tasks: Array<any>
+}
+
+export { DagStore }

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 {

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>
             )

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>
     )
   }

dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-add-dag-shape.ts

@@ -0,0 +1,33 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+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)
+}

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)
+      }
+    }
   }
 }

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: {