117 lines
2.9 KiB
Vue
117 lines
2.9 KiB
Vue
|
<template>
|
||
|
|
<div class="flow-canvas">
|
||
|
|
<VueFlow
|
||
|
|
ref="vueFlow"
|
||
|
|
:nodes="nodes"
|
||
|
|
:edges="edges"
|
||
|
|
:min-zoom="0.1"
|
||
|
|
:max-zoom="10"
|
||
|
|
:nodes-draggable="true"
|
||
|
|
@nodes-initialized="layoutGraph('LR')"
|
||
|
|
@node-drag-stop="(e) => eventManager.handleNodeDragStop(e)"
|
||
|
|
@viewport-change="(e) => eventManager.handleViewportChange(e)"
|
||
|
|
>
|
||
|
|
<template #node-InputNode="nodeProps">
|
||
|
|
<node type="InputNode">
|
||
|
|
<component :is="nodeProps.data.component" v-bind="nodeProps.data" />
|
||
|
|
</node>
|
||
|
|
</template>
|
||
|
|
<template #node-SecondaryNode="nodeProps">
|
||
|
|
<node type="SecondaryNode">
|
||
|
|
<component :is="nodeProps.data.component" v-bind="nodeProps.data" />
|
||
|
|
</node>
|
||
|
|
</template>
|
||
|
|
</VueFlow>
|
||
|
|
</div>
|
||
|
|
<header-tools />
|
||
|
|
<zoom
|
||
|
|
:zoom="stateManager.zoom.value"
|
||
|
|
:step="0.1"
|
||
|
|
@add="(e) => flowManager.setZoom(e)"
|
||
|
|
@sub="(e) => flowManager.setZoom(e)"
|
||
|
|
/>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { VueFlow, useVueFlow } from '@vue-flow/core'
|
||
|
|
import { useLayout } from '@/utils/treeDiagram'
|
||
|
|
// 组件
|
||
|
|
import headerTools from './components/header-tools.vue'
|
||
|
|
import zoom from '../components/zoom.vue'
|
||
|
|
import node from './components/node.vue'
|
||
|
|
import card from './components/cards/index.vue'
|
||
|
|
import { computed, ref, markRaw, onMounted, reactive, nextTick } from 'vue'
|
||
|
|
|
||
|
|
// 管理器
|
||
|
|
import { StateManager } from './manager/StateManager'
|
||
|
|
import { EventManager } from './manager/EventManager'
|
||
|
|
import { FlowManager } from './manager/FlowManager'
|
||
|
|
|
||
|
|
const vueFlow = ref<any>()
|
||
|
|
|
||
|
|
const stateManager = new StateManager({ vueFlow })
|
||
|
|
const nodes = computed(() => stateManager.nodes.value)
|
||
|
|
const edges = computed(() => stateManager.edges.value)
|
||
|
|
const eventManager = new EventManager({
|
||
|
|
stateManager,
|
||
|
|
vueFlow
|
||
|
|
})
|
||
|
|
const flowManager = new FlowManager({
|
||
|
|
stateManager,
|
||
|
|
vueFlow
|
||
|
|
})
|
||
|
|
|
||
|
|
const { fitView } = useVueFlow()
|
||
|
|
const { layout } = useLayout()
|
||
|
|
const index = ref(0)
|
||
|
|
async function layoutGraph(direction) {
|
||
|
|
if (index.value > 0) return
|
||
|
|
index.value++
|
||
|
|
setTimeout(() => {
|
||
|
|
stateManager.nodes.value = layout(
|
||
|
|
stateManager.nodes.value,
|
||
|
|
stateManager.edges.value,
|
||
|
|
direction
|
||
|
|
)
|
||
|
|
nextTick(() => {
|
||
|
|
fitView()
|
||
|
|
})
|
||
|
|
}, 0)
|
||
|
|
}
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
window.vueFlow = vueFlow
|
||
|
|
window.nodes = nodes
|
||
|
|
window.addaaaaa = () => {
|
||
|
|
const lastNode = vueFlow.value.getNode(nodes.value[nodes.value.length - 1].id)
|
||
|
|
const width = lastNode.dimensions.width
|
||
|
|
const x = lastNode.position.x
|
||
|
|
const y = lastNode.position.y
|
||
|
|
nodes.value.push({
|
||
|
|
id: nodes.value.length + 1 + '',
|
||
|
|
type: 'SecondaryNode',
|
||
|
|
class: 'custom-node',
|
||
|
|
data: { component: card, type_: 'to-3d-model' },
|
||
|
|
position: {
|
||
|
|
x: width + x + 50,
|
||
|
|
y: y
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
<style lang="less">
|
||
|
|
@import '@vue-flow/core/dist/style.css';
|
||
|
|
@import '@vue-flow/core/dist/theme-default.css';
|
||
|
|
</style>
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.flow-canvas {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
> .vue-flow {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|