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/11/01 01:07:34 UTC
[dolphinscheduler] branch dev updated: [Feature][UI] Add a method for adding a single node to the dag. (#12628)
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 883c754951 [Feature][UI] Add a method for adding a single node to the dag. (#12628)
883c754951 is described below
commit 883c754951a5b64620e2a4230a46654b31d76c33
Author: songjianet <17...@qq.com>
AuthorDate: Tue Nov 1 09:07:28 2022 +0800
[Feature][UI] Add a method for adding a single node to the dag. (#12628)
---
dolphinscheduler-ui/package.json | 1 -
dolphinscheduler-ui/pnpm-lock.yaml | 17 ----------
.../workflow/components/dynamic-dag/dag-canvas.tsx | 24 +++++---------
.../workflow/components/dynamic-dag/dag-node.tsx | 33 -------------------
.../workflow/components/dynamic-dag/dag-setting.ts | 1 +
.../components/dynamic-dag/dag-sidebar.tsx | 6 ++--
.../workflow/components/dynamic-dag/index.tsx | 38 ++++++++++++----------
.../components/dynamic-dag/use-add-dag-shape.ts | 10 +-----
.../components/dynamic-dag/use-dag-node.ts | 11 ++-----
dolphinscheduler-ui/vite.config.ts | 5 +--
10 files changed, 38 insertions(+), 108 deletions(-)
diff --git a/dolphinscheduler-ui/package.json b/dolphinscheduler-ui/package.json
index 4a9f650cc1..f41ea1fff7 100644
--- a/dolphinscheduler-ui/package.json
+++ b/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",
diff --git a/dolphinscheduler-ui/pnpm-lock.yaml b/dolphinscheduler-ui/pnpm-lock.yaml
index 758f917302..67abc01cf1 100644
--- a/dolphinscheduler-ui/pnpm-lock.yaml
+++ b/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:
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 20339c0c99..d501929fab 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
@@ -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 {
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-node.tsx b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-node.tsx
deleted file mode 100644
index cbd6e8d261..0000000000
--- a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-node.tsx
+++ /dev/null
@@ -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 }
\ No newline at end of file
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-setting.ts b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-setting.ts
index 7f9cdc66e7..a6fc88526a 100644
--- a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-setting.ts
+++ b/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'
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 83edb09fd9..cf933a1bd8 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
@@ -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>
)
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 6784126617..156956f73d 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,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 {
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-add-dag-shape.ts b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-add-dag-shape.ts
index 80aab60a52..a19b3d5ad1 100644
--- a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-add-dag-shape.ts
+++ b/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)
}
\ 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 cfd03df8e8..175798fdc2 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,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
}
}
\ No newline at end of file
diff --git a/dolphinscheduler-ui/vite.config.ts b/dolphinscheduler-ui/vite.config.ts
index 8af6eefc7d..373d247e63 100644
--- a/dolphinscheduler-ui/vite.config.ts
+++ b/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: {