313 lines
8.6 KiB
Vue
313 lines
8.6 KiB
Vue
<template>
|
|
<div class="flow-canvas">
|
|
<VueFlow
|
|
ref="vueFlow"
|
|
:nodes="nodes"
|
|
:edges="edges_"
|
|
:min-zoom="0.1"
|
|
:max-zoom="10"
|
|
:nodes-draggable="nodesDraggable"
|
|
:pan-on-drag="panOnDrag"
|
|
@nodes-initialized="layoutGraph('LR')"
|
|
@node-drag-stop="(e) => eventManager.handleNodeDragStop(e)"
|
|
@viewport-change="(e) => eventManager.handleViewportChange(e)"
|
|
@pane-click="(e) => eventManager.handleClick(e)"
|
|
@mousedown="(e) => eventManager.mousedown(e)"
|
|
@mouseup="(e) => eventManager.mouseup(e)"
|
|
@node-click="(e) => clickNode(e)"
|
|
:class="{ 'custom-cursor': !!stateManager.cursor.value }"
|
|
:style="{ '--custom-cursor': stateManager.cursor.value }"
|
|
>
|
|
<template v-for="v in nodeTypes" :key="v" #[`node-${v}`]="node">
|
|
<node-el
|
|
:type="v"
|
|
:stateManager="stateManager"
|
|
:node="node"
|
|
:mask="
|
|
stateManager.tool.value === TOOLS.MOVE ||
|
|
stateManager.tool.value === TOOLS.TEXT
|
|
"
|
|
>
|
|
<component
|
|
:is="components[node.data.component]"
|
|
:class="{ active: stateManager.activeNodeID.value === node.id }"
|
|
:active="stateManager.activeNodeID.value === node.id"
|
|
:node="node"
|
|
:config="node.data"
|
|
:sketchId="config.imgId"
|
|
:data="node.data.data"
|
|
v-bind="node.data"
|
|
@delete-node="deleteNode(node.id)"
|
|
@copy-node="copyNode(node.id)"
|
|
@update-data="(v) => (node.data.data = v)"
|
|
@bring-to-font="bringToFont(node.id)"
|
|
@send-to-back="sendToBack(node.id)"
|
|
/>
|
|
</node-el>
|
|
</template>
|
|
</VueFlow>
|
|
</div>
|
|
<header-tools @export="exportFlow" @import="importFlow" :downloadData="downloadData" />
|
|
<zoom
|
|
:zoom="stateManager.zoom.value"
|
|
:step="0.1"
|
|
is-home
|
|
@add="(e) => flowManager.setZoom(e)"
|
|
@sub="(e) => flowManager.setZoom(e)"
|
|
@home="() => fitView({ maxZoom: 1 })"
|
|
/>
|
|
<image-preview ref="imagePreviewRef" />
|
|
<baseModal ref="threeModelRef">
|
|
<template v-slot="{ currentData }">
|
|
<threeModel :currentData="currentData" />
|
|
</template>
|
|
</baseModal>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { VueFlow, useVueFlow } from '@vue-flow/core'
|
|
import { computed, ref, watch, onMounted, nextTick, provide, onBeforeUnmount } from 'vue'
|
|
import { useLayout } from '@/utils/treeDiagram'
|
|
import { NODE_TYPE, NODE_COMPONENT } from './tools/index.d'
|
|
// 组件
|
|
import headerTools from './components/header-tools.vue'
|
|
import zoom from '../components/zoom.vue'
|
|
import imagePreview from '../components/image-preview.vue'
|
|
import baseModal from '../components/base-modal.vue'
|
|
// 工具
|
|
import threeModel from './components/tools/threeModel/index.vue'
|
|
// 节点
|
|
import nodeEl from './components/node-el.vue'
|
|
import resultImage from './components/nodes/result-image.vue'
|
|
import card from './components/nodes/cards/index.vue'
|
|
import text from './components/nodes/text.vue'
|
|
import { downImgListToZip } from '../tools/tools'
|
|
|
|
const components = {
|
|
[NODE_COMPONENT.RESULT_IMAGE]: resultImage,
|
|
[NODE_COMPONENT.CARD]: card,
|
|
[NODE_COMPONENT.TEXT]: text
|
|
}
|
|
|
|
// 管理器
|
|
import { StateManager } from './manager/StateManager'
|
|
import { EventManager } from './manager/EventManager'
|
|
import { FlowManager } from './manager/FlowManager'
|
|
import { NodeManager } from './manager/NodeManager'
|
|
import { ToolManager, TOOLS } from './manager/ToolManager'
|
|
import { GenerateManager } from './manager/GenerateManager'
|
|
|
|
const props = defineProps({
|
|
config: {
|
|
type: Object,
|
|
default: () => ({})
|
|
}
|
|
})
|
|
const emit = defineEmits(['exportFlow'])
|
|
|
|
const vueFlow = ref<any>()
|
|
const nodeTypes = ref([NODE_TYPE.INPUT, NODE_TYPE.SECONDARY, NODE_TYPE.OUTPUT, NODE_TYPE.ALONE])
|
|
// 状态管理器
|
|
const stateManager = new StateManager({ vueFlow, sketchId: props.config.imgId })
|
|
provide('stateManager', stateManager)
|
|
|
|
// 事件管理器
|
|
const eventManager = new EventManager({ stateManager, vueFlow })
|
|
stateManager.setManager({ eventManager })
|
|
provide('eventManager', eventManager)
|
|
|
|
// 流程管理器
|
|
const flowManager = new FlowManager({ stateManager, vueFlow })
|
|
stateManager.setManager({ flowManager })
|
|
provide('flowManager', flowManager)
|
|
|
|
// 节点管理器
|
|
const nodeManager = new NodeManager({ stateManager, vueFlow })
|
|
stateManager.setManager({ nodeManager })
|
|
provide('nodeManager', nodeManager)
|
|
|
|
// 工具管理器
|
|
const toolManager = new ToolManager({ stateManager, vueFlow })
|
|
stateManager.setManager({ toolManager })
|
|
provide('toolManager', toolManager)
|
|
|
|
// 生成管理器
|
|
const generateManager = new GenerateManager({ stateManager })
|
|
stateManager.setManager({ generateManager })
|
|
provide('generateManager', generateManager)
|
|
|
|
const nodes = computed(() => stateManager.nodes_.value)
|
|
const edges = computed(() => stateManager.edges.value)
|
|
const edges_ = computed(() => {
|
|
return edges.value.filter((v) => v?.visible)
|
|
})
|
|
const nodesDraggable = computed(() => stateManager.nodesDraggable.value)
|
|
const panOnDrag = computed(() => stateManager.panOnDrag.value)
|
|
|
|
const { fitView } = useVueFlow()
|
|
const { layout } = useLayout()
|
|
const index = ref(0)
|
|
async function layoutGraph(direction) {
|
|
if (props.config.json.length > 0) return
|
|
if (index.value > 0) return
|
|
index.value++
|
|
setTimeout(() => {
|
|
stateManager.nodes.value = layout(
|
|
stateManager.nodes.value,
|
|
stateManager.edges.value,
|
|
direction,
|
|
{
|
|
nodesep: nodeManager.nodesep,
|
|
ranksep: nodeManager.ranksep
|
|
}
|
|
)
|
|
nextTick(() => {
|
|
fitView({ maxZoom: 1 })
|
|
})
|
|
}, 0)
|
|
}
|
|
|
|
/** 点击节点 */
|
|
const clickNode = (event) => {
|
|
let node = event.node
|
|
// stateManager.showNodeConnections(node.id)
|
|
}
|
|
/** 删除节点 */
|
|
const deleteNode = (id) => {
|
|
nodeManager.deleteNode(id)
|
|
}
|
|
/** 复制节点 */
|
|
const copyNode = (id) => {
|
|
nodeManager.copyNodeById(id)
|
|
}
|
|
/** 节点zIndex设置最大 */
|
|
const bringToFont = (id) => {
|
|
stateManager.bringToFont(id)
|
|
}
|
|
/** 节点zIndex设置最小 */
|
|
const sendToBack = (id) => {
|
|
stateManager.sendToBack(id)
|
|
}
|
|
// 导出流程
|
|
const getFlowJson = () => {
|
|
return JSON.stringify(stateManager.nodes.value)
|
|
}
|
|
const downloadData = ref<any>({
|
|
amount: 0,
|
|
progress: 0,
|
|
status: 'success' //success
|
|
})
|
|
const exportFlow = async () => {
|
|
// console.log(vueFlow.value)
|
|
// console.log(vueFlow.value.toImage)
|
|
let arr = stateManager.nodes.value.filter(
|
|
(v) => v.data.type === NODE_COMPONENT.RESULT_IMAGE
|
|
)
|
|
let imgList = []
|
|
arr.forEach((v, i) => {
|
|
v.data.data.imageProcessTasks.forEach((item, index) => {
|
|
let url = item.url
|
|
let name = url?.split('.').pop().split('?').shift()
|
|
imgList.push({
|
|
url: url,
|
|
name: `${v.data.type}${i}-${index == 0 ? '' : index}.${name}`
|
|
})
|
|
})
|
|
})
|
|
downloadData.value.amount = imgList.length
|
|
downloadData.value.status = 'loading'
|
|
await downImgListToZip(imgList, (progress) => {
|
|
downloadData.value.progress = progress
|
|
if (progress == downloadData.value.amount) {
|
|
downloadData.value.status = 'success'
|
|
}
|
|
})
|
|
return
|
|
}
|
|
// 导入流程
|
|
const importFlow = async (json) => {
|
|
try {
|
|
stateManager.nodes.value = []
|
|
await nextTick()
|
|
// const json = JSON.parse(localStorage.getItem('flow_json') || '[]')
|
|
stateManager.nodes.value = json
|
|
setTimeout(() => {
|
|
nextTick(() => {
|
|
fitView({ maxZoom: 1 })
|
|
})
|
|
}, 0)
|
|
} catch (error) {
|
|
console.log(error)
|
|
}
|
|
}
|
|
|
|
const imagePreviewRef = ref<any>()
|
|
const threeModelRef = ref<any>()
|
|
/** 打开图片预览 */
|
|
const openImagePreview = (url: string) => {
|
|
imagePreviewRef.value.open(url)
|
|
}
|
|
/** 打开3D预览 */
|
|
const openThreeModelPreview = (currentData) => {
|
|
threeModelRef.value.open(currentData)
|
|
}
|
|
provide('openImagePreview', openImagePreview)
|
|
provide('openThreeModelPreview', openThreeModelPreview)
|
|
|
|
onMounted(async () => {
|
|
// window['vueFlow'] = vueFlow
|
|
// window['nodes'] = nodes
|
|
eventManager.registerEvents()
|
|
if (props.config.json.length > 0) {
|
|
importFlow(props.config.json)
|
|
} else {
|
|
const timestamp = Date.now()
|
|
nodeManager.createResultNode({
|
|
data: {
|
|
disableDelete: true,
|
|
isHeader: false,
|
|
data: {
|
|
selectable: false,
|
|
imageProcessTasks: [
|
|
{
|
|
id: props.config.imgId,
|
|
url: props.config.url,
|
|
status: 'RETURNED',
|
|
taskId: timestamp + ''
|
|
}
|
|
],
|
|
selectTaskId: timestamp + ''
|
|
}
|
|
}
|
|
})
|
|
}
|
|
})
|
|
onBeforeUnmount(() => {
|
|
stateManager.dispose()
|
|
eventManager.dispose()
|
|
flowManager.dispose()
|
|
nodeManager.dispose()
|
|
toolManager.dispose()
|
|
})
|
|
defineExpose({
|
|
getFlowJson
|
|
})
|
|
</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%;
|
|
&.custom-cursor {
|
|
cursor: var(--custom-cursor, pointer);
|
|
}
|
|
}
|
|
}
|
|
</style>
|