[Feature][UI] Add a method for adding a single node to the dag. (#12628)

dolphinscheduler-ui/package.json

@@ -11,7 +11,6 @@
   "dependencies": {
     "@antv/layout": "0.1.31",
     "@antv/x6": "^1.34.1",
-    "@antv/x6-vue-shape": "^1.5.3",
     "@vueuse/core": "^9.2.0",
     "axios": "^0.27.2",
     "date-fns": "^2.29.3",

dolphinscheduler-ui/pnpm-lock.yaml

@@ -20,7 +20,6 @@ lockfileVersion: 5.4
 specifiers:
   '@antv/layout': 0.1.31
   '@antv/x6': ^1.34.1
-  '@antv/x6-vue-shape': ^1.5.3
   '@types/js-cookie': ^3.0.2
   '@types/lodash': ^4.14.185
   '@types/node': ^18.7.18
@@ -66,7 +65,6 @@ specifiers:
 dependencies:
   '@antv/layout': 0.1.31
   '@antv/x6': 1.34.1
-  '@antv/x6-vue-shape': 1.5.3_@antv+x6@1.34.1+vue@3.2.39
   '@vueuse/core': 9.2.0_vue@3.2.39
   axios: 0.27.2
   date-fns: 2.29.3
@@ -173,21 +171,6 @@ packages:
       ml-matrix: 6.10.2
     dev: false
 
-  /@antv/x6-vue-shape/1.5.3_@antv+x6@1.34.1+vue@3.2.39:
-    resolution: {integrity: sha512-VnuXd8gE6bONYp4U51n3PxjM1UTuotca51f+hjaMqOy1X+HQf/nAN69oD+Y2wsPDRFZnZcipVol/dLxHS3Fd9w==}
-    peerDependencies:
-      '@antv/x6': '>=1.0.0'
-      '@vue/composition-api': ^1.0.0-rc.6
-      vue: ^2.6.12 || ^3.0.0
-    peerDependenciesMeta:
-      '@vue/composition-api':
-        optional: true
-    dependencies:
-      '@antv/x6': 1.34.1
-      vue: 3.2.39
-      vue-demi: 0.13.11_vue@3.2.39
-    dev: false
-
   /@antv/x6/1.34.1:
     resolution: {integrity: sha512-4dNE9h//SY5ID8W+9YU5dE58d0+V9lCXlg0CiI6+4jFCud3RfLkPjni1dpmUo+HDWtrQ0wB80o42HLat9+FYZA==}
     dependencies:

dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-canvas.tsx

@@ -15,14 +15,14 @@
  * limitations under the License.
  */
 
-import { defineComponent, ref, onMounted } from 'vue'
+import { defineComponent, ref, onMounted, watch } from 'vue'
 import { Graph } from '@antv/x6'
 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 { useAddDagShape } from './use-add-dag-shape'
+import { useDagStore } from '@/store/project/dynamic/dag'
+import { DagNodeName } from './dag-setting'
 import styles from './dag-canvas.module.scss'
 
 const DagCanvas = defineComponent({
@@ -33,6 +33,7 @@ const DagCanvas = defineComponent({
     const dagContainer = ref()
     const minimapContainer = ref()
     const graph = ref<Graph>()
+    const dagTasks = useDagStore().getDagTasks
 
     if (graph.value) {
       useDagResize(dagContainer.value, graph.value)
@@ -47,15 +48,6 @@ const DagCanvas = defineComponent({
       Graph.registerNode(DagNodeName, useDagNode())
     }
 
-    const registerEdge = () => {
-      Graph.unregisterEdge(DagEdgeName)
-      Graph.registerEdge(
-        DagEdgeName,
-        useDagEdge(),
-        true
-      )
-    }
-
     const handlePreventDefault = (e: DragEvent) => {
       e.preventDefault()
     }
@@ -67,8 +59,10 @@ const DagCanvas = defineComponent({
     onMounted(() => {
       initGraph()
       registerNode()
-      registerEdge()
-      //useAddDagShape((graph.value as Graph))
+    })
+
+    watch(dagTasks, () => {
+      useAddDagShape((graph.value as Graph))
     })
 
     return {

dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-node.tsx

@@ -1,33 +0,0 @@
-/*
- * 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 { defineComponent } from 'vue'
-import styles from './dag-node.module.scss'
-
-const DagNode = defineComponent({
-  name: 'DagNode',
-  setup() {
-
-  },
-  render() {
-    return (
-      <div class={styles['dag-node']}>1111</div>
-    )
-  }
-})
-
-export { DagNode }

dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-setting.ts

@@ -19,3 +19,4 @@ export const DagNodeName = 'dag-node'
 export const DagEdgeName = 'dag-edge'
 export const NodeWidth = '200'
 export const NodeHeight = '50'
+export const NodeShape = 'rect'

dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-sidebar.tsx

@@ -25,8 +25,8 @@ const DagSidebar = defineComponent({
   setup(props, context) {
     const { variables, getTaskList } = useSidebar()
 
-    const handleDragstart = (e: DragEvent, task: string) => {
-      context.emit('Dragstart', e, task)
+    const handleDragstart = (task: string) => {
+      context.emit('Dragstart', task)
     }
 
     onMounted(() => {
@@ -44,7 +44,7 @@ const DagSidebar = defineComponent({
         {
           this.taskList.map(task => {
             return (
-              <div class={styles['task-item']} draggable='true' onDragstart={(e: DragEvent) => this.handleDragstart(e, task)}>
+              <div class={styles['task-item']} draggable='true' onDragstart={() => this.handleDragstart(task)}>
                 {task}
               </div>
             )

dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/index.tsx

@@ -15,38 +15,42 @@
  * limitations under the License.
  */
 
-import { defineComponent, reactive } from 'vue'
+import { defineComponent, ref } from 'vue'
 import { DagSidebar } from './dag-sidebar'
 import { DagCanvas } from './dag-canvas'
 import { useDagStore } from '@/store/project/dynamic/dag'
+import { NodeShape, NodeHeight, NodeWidth } from './dag-setting'
 import styles from './index.module.scss'
 
 const DynamicDag = defineComponent({
   name: 'DynamicDag',
   setup() {
-    const dragged = reactive({
-      x: 0,
-      y: 0,
-      task: ''
-    })
+    const draggedTask = ref('')
 
-    const handelDragstart = (e: DragEvent, task: string) => {
-      dragged.x = e.offsetX
-      dragged.y = e.offsetY
-      dragged.task = task
+    const handelDragstart = (task: string) => {
+      draggedTask.value = task
     }
 
     const handelDrop = (e: DragEvent) => {
-      if (!dragged.task) return
-
-      dragged.x = e.offsetX
-      dragged.y = e.offsetY
+      if (!draggedTask) return
 
       const shapes = useDagStore().getDagTasks
-      if (shapes) {
-        shapes.push(dragged)
-      }
+
+      shapes.push({
+        id: String(shapes.length + 1),
+        x: e.offsetX,
+        y: e.offsetY,
+        width: NodeWidth,
+        height: NodeHeight,
+        shape: NodeShape,
+        label: draggedTask.value + String(shapes.length + 1),
+        zIndex: 1,
+        task: draggedTask.value
+      })
+
       useDagStore().setDagTasks(shapes)
+
+
     }
 
     return {

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

@@ -21,13 +21,5 @@ 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)
+  ;(graph as Graph).addNode(cells.at(-1) as any)
 }

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

@@ -15,17 +15,10 @@
  * limitations under the License.
  */
 
-import { createVNode } from 'vue'
-import { DagNode } from './dag-node'
-import '@antv/x6-vue-shape'
+import { NodeShape } from './dag-setting'
 
 export function useDagNode() {
   return {
-    inherit: 'vue-shape',
-    component: {
-      render: () => {
-        return createVNode(DagNode)
-      }
-    }
+    inherit: NodeShape
   }
 }

dolphinscheduler-ui/vite.config.ts

@@ -37,11 +37,8 @@ export default defineConfig({
   ],
   resolve: {
     alias: {
-      '@': path.resolve(__dirname, 'src'),
+      '@': 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',
-      '@antv/x6': '@antv/x6/dist/x6.js',
-      '@antv/x6-vue-shape': '@antv/x6-vue-shape/lib'
     }
   },
   server: {