fix
This commit is contained in:
X1627315083
@@ -1,9 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
import { ref, onMounted, onUnmounted, reactive, nextTick } from "vue";
|
||||
import type { Node, Edge } from '@vue-flow/core'
|
||||
import { VueFlow } from '@vue-flow/core'
|
||||
import { VueFlow, useVueFlow } from '@vue-flow/core'
|
||||
import SpecialEdge from './speciaiEdge.vue'
|
||||
import SpecialNode from './speciaiNode.vue'
|
||||
import PrimaryNode from './primaryNode.vue'//主
|
||||
import SecondaryNode from './secondaryNode.vue'//分支
|
||||
import { useLayout } from './tools/tools'
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
@@ -12,36 +14,76 @@ const props = defineProps({
|
||||
})
|
||||
//const emit = defineEmits([
|
||||
//])
|
||||
let data = reactive({
|
||||
})
|
||||
|
||||
let selectId = ref(2)
|
||||
|
||||
// 节点类型：input、output、default、custom
|
||||
// input:开始点，output：结尾点，default：普通节点，custom：自定义节点
|
||||
const position = { x: 0, y: 0 }
|
||||
const nodes = ref<Node[]>([
|
||||
{ id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 0 } },
|
||||
{ id: '2', type: 'output', label: 'Node 2', position: { x: 100, y: 100 } },
|
||||
{ id: '3', type: 'custom', label: 'Node 3', position: { x: 400, y: 100 } },
|
||||
{ id: '4', type: 'custom', label: 'Node 3', position: { x: 400, y: 200 } },
|
||||
{ id: '1', type: 'input', label: 'Node 1', class: 'custom-node start', position, sourcePosition: 'bottom' },
|
||||
{ id: '2', type: 'PrimaryNode', class: 'custom-node', data: { id: '主 1' }, position },
|
||||
{ id: '2-1', type: 'SecondaryNode', class: 'custom-node', data: { id: '分 1-1' }, position },
|
||||
{ id: '3', type: 'PrimaryNode', class: 'custom-node', data: { id: '主 2' }, position },
|
||||
])
|
||||
|
||||
// 边类型：custom、default
|
||||
// custom：自定义边，default：普通边，step：直角边，smoothstep：平滑边
|
||||
const edges = ref<Edge[]>([
|
||||
{ id: 'e1-2', source: '1', target: '2', type: 'custom' },
|
||||
{ id: 'e1-3', source: '1', target: '3', animated: true },
|
||||
{ id: 'e1-4', source: '1', target: '4', },
|
||||
{ id: 'e1-2', source: '1', target: '2', type: 'smoothstep' },
|
||||
{ id: 'e1-3', source: '2', target: '2-1', type: 'smoothstep', sourceHandle:'right',},
|
||||
{ id: 'e1-4', source: '2', target: '3', type: 'smoothstep',sourceHandle:'bottom', animated: true },
|
||||
])
|
||||
const { fitView } = useVueFlow()
|
||||
const { layout } = useLayout()
|
||||
async function layoutGraph(direction) {
|
||||
setTimeout(() => {
|
||||
nodes.value = layout(nodes.value, edges.value, direction)
|
||||
console.log(nodes.value)
|
||||
nextTick(() => {
|
||||
fitView()
|
||||
})
|
||||
}, 0)
|
||||
}
|
||||
|
||||
let elIndex = 1
|
||||
const push = (item)=>{
|
||||
if(nodes.value.length == 0){
|
||||
nodes.value.push({ id: '0', type: 'input', label: 'Node 1', class: 'custom-node start', position, sourcePosition: 'bottom' })
|
||||
}
|
||||
let id = item.id.split('-')[0]
|
||||
nodes.value.push(item)
|
||||
}
|
||||
|
||||
//是否可拖动节点
|
||||
const nodesDraggable = ref(false)
|
||||
const toggleNodesDraggable = () => {
|
||||
nodesDraggable.value = !nodesDraggable.value
|
||||
}
|
||||
|
||||
const handleVueFlowNodeClick = (node: Node) => {
|
||||
console.log(node)
|
||||
}
|
||||
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
defineExpose({})
|
||||
const {} = toRefs(data);
|
||||
defineExpose({push})
|
||||
// const {} = toRefs(data);
|
||||
</script>
|
||||
<template>
|
||||
<div class="view2">
|
||||
<VueFlow :nodes="nodes" :edges="edges">
|
||||
<!-- bind your custom node type to a c omponent by using slots, slot names are always `node-<type>` -->
|
||||
<template #node-custom="nodeProps">
|
||||
<SpecialNode v-bind="nodeProps" />
|
||||
<div @click="toggleNodesDraggable">拖拽节点</div>
|
||||
<VueFlow :nodes="nodes" @nodes-initialized="layoutGraph('LR')" :edges="edges" @node-click="handleVueFlowNodeClick" :nodes-draggable="nodesDraggable">
|
||||
<template #node-PrimaryNode="nodeProps">
|
||||
<PrimaryNode v-bind="nodeProps" />
|
||||
</template>
|
||||
<template #node-SecondaryNode="nodeProps">
|
||||
<SecondaryNode
|
||||
v-bind="nodeProps"
|
||||
:selectId="selectId"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- <template #edge-custom="edgeProps">
|
||||
@@ -59,5 +101,44 @@ const {} = toRefs(data);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
:deep(.custom-node){
|
||||
--vf-handle: #000;
|
||||
--vf-node-color: #000;
|
||||
--vf-box-shadow: #000;
|
||||
font-size: 1.2rem;
|
||||
width: var(--treeItem-width);
|
||||
height: var(--treeItem-height);
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--treeItem-raduis);
|
||||
border: var(--treeItem-border);
|
||||
color: #000;
|
||||
cursor: pointer;
|
||||
background-color: var(--treeItem-background);
|
||||
box-sizing: border-box;
|
||||
.vue-flow__handle-right{
|
||||
transform: translate(calc(50% + 2px), -50%);
|
||||
}
|
||||
.vue-flow__handle-left{
|
||||
transform: translate(calc(-50% - 2px), -50%);
|
||||
}
|
||||
.vue-flow__handle-top{
|
||||
transform: translate(-50%, calc(-50% - 2px));
|
||||
}
|
||||
.vue-flow__handle-bottom{
|
||||
transform: translate(-50%, calc(50% + 2px));
|
||||
}
|
||||
&.active{
|
||||
background-color: var(--treeItem-active-background);
|
||||
}
|
||||
&.start{
|
||||
background-color: #7A7A7A;
|
||||
color: #FFF;
|
||||
border: 2px solid #7A7A7A;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user