120 lines
3.5 KiB
Vue
120 lines
3.5 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 v-for="v in nodeTypes" :key="v" #[`node-${v}`]="nodeProps">
|
|
<node :type="v" :stateManager="stateManager" :node="nodeProps">
|
|
<component
|
|
:is="nodeProps.data.component"
|
|
:node="nodeProps"
|
|
:data="nodeProps.data.data"
|
|
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 { NODE_TYPE } from './tools/index.d'
|
|
// 组件
|
|
import headerTools from './components/header-tools.vue'
|
|
import zoom from '../components/zoom.vue'
|
|
import node from './components/node.vue'
|
|
import { computed, ref, markRaw, onMounted, reactive, nextTick, provide } from 'vue'
|
|
|
|
// 管理器
|
|
import { StateManager } from './manager/StateManager'
|
|
import { EventManager } from './manager/EventManager'
|
|
import { FlowManager } from './manager/FlowManager'
|
|
import { NodeManager } from './manager/NodeManager'
|
|
|
|
const vueFlow = ref<any>()
|
|
const nodeTypes = ref([NODE_TYPE.INPUT, NODE_TYPE.SECONDARY, NODE_TYPE.OUTPUT])
|
|
|
|
// 状态管理器
|
|
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 nodeManager = new NodeManager({ stateManager, vueFlow })
|
|
stateManager.setManager({
|
|
eventManager,
|
|
flowManager,
|
|
nodeManager
|
|
})
|
|
|
|
provide('stateManager', stateManager)
|
|
provide('eventManager', eventManager)
|
|
provide('flowManager', flowManager)
|
|
provide('nodeManager', nodeManager)
|
|
provide('nodeManager', nodeManager)
|
|
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({ maxZoom: 1 })
|
|
})
|
|
}, 0)
|
|
}
|
|
|
|
onMounted(() => {
|
|
// window['vueFlow'] = vueFlow
|
|
// window['nodes'] = nodes
|
|
nodeManager.createResultNode({
|
|
data: {
|
|
isHeader: false,
|
|
data: {
|
|
url: 'https://s3-alpha-sig.figma.com/img/ea2f/590e/9638f62a2fc91e31f33db0022db1642c?Expires=1773014400&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=M0B8oJJOk~dGG0aZAqOIocAp7T0LFdJ9FYmCrEZVTCRzYxM6SJRNtYMTX-rTO3Z~s14QINh~o-S41XiZnBv-0zcKjuWot~VVaNHfd0~1LesfNe2KwvCinT~72btFut1pheLnKE-wWCX5ewtonxU77bnw386YPMTqv7DBZzksf2udsJA7NmOYD6~TUG3Q2dWSt~zPH~lkaidscPqpCnCbqzljCEi4RiHY4U3A45l5XypcX2umqn1UaYUFCTqV9471J4qdB6Dg2pcKocdp-7-3s1De6Q~2SmBOrSgDQ~KEADCB2lhKfhxgWmy0lwMvhTd4l90ygVZDWZRABgjHNrGUvg__'
|
|
}
|
|
}
|
|
})
|
|
})
|
|
</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>
|