[Feature][UI] Add a method for adding a single node to the dag. (#12628)
This commit is contained in:
songjianet
GitHub
parent
0391d40315
commit
883c754951
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 }
|
||||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
@ -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: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue