|
|
|
@ -2,7 +2,7 @@
|
|
|
|
* @Author: donghao donghao@supervision.ltd
|
|
|
|
* @Author: donghao donghao@supervision.ltd
|
|
|
|
* @Date: 2025-07-03 10:27:47
|
|
|
|
* @Date: 2025-07-03 10:27:47
|
|
|
|
* @LastEditors: donghao donghao@supervision.ltd
|
|
|
|
* @LastEditors: donghao donghao@supervision.ltd
|
|
|
|
* @LastEditTime: 2025-07-17 16:01:16
|
|
|
|
* @LastEditTime: 2025-07-23 16:09:34
|
|
|
|
* @FilePath: \electron-project\Robot-Al\Robot-Al-Platform-Web\src\renderer\src\views\Design\Workflow\logicFlowView.vue
|
|
|
|
* @FilePath: \electron-project\Robot-Al\Robot-Al-Platform-Web\src\renderer\src\views\Design\Workflow\logicFlowView.vue
|
|
|
|
* @Description: 流程设计器面板
|
|
|
|
* @Description: 流程设计器面板
|
|
|
|
-->
|
|
|
|
-->
|
|
|
|
@ -30,13 +30,13 @@
|
|
|
|
<div id="lf-container" @dragover="handleDragOver" @drop="handleDrop"></div>
|
|
|
|
<div id="lf-container" @dragover="handleDragOver" @drop="handleDrop"></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="attr-model-box" v-if="showAttribute"></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
<script setup lang="ts">
|
|
|
|
import LogicFlow, { RectNode } from '@logicflow/core'
|
|
|
|
import LogicFlow, { RectNode } from '@logicflow/core'
|
|
|
|
// import '@logicflow/core/dist/style/index.css';
|
|
|
|
|
|
|
|
// import '@logicflow/extension/lib/style/index.css'
|
|
|
|
|
|
|
|
import { Menu, Snapshot, MiniMap } from '@logicflow/extension'
|
|
|
|
import { Menu, Snapshot, MiniMap } from '@logicflow/extension'
|
|
|
|
import CalibrateIcon from '@/assets/images/panelBar/calibrate.png'
|
|
|
|
import CalibrateIcon from '@/assets/images/panelBar/calibrate.png'
|
|
|
|
import { DSButton } from '@/components/Button'
|
|
|
|
import { DSButton } from '@/components/Button'
|
|
|
|
@ -57,6 +57,12 @@ const { graphData } = useLogicFlow()
|
|
|
|
const lf = ref<LogicFlow | null>(null)
|
|
|
|
const lf = ref<LogicFlow | null>(null)
|
|
|
|
const flowDetail = reactive({})
|
|
|
|
const flowDetail = reactive({})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 隐藏属性面板
|
|
|
|
|
|
|
|
const hideAttrPanel = () => {
|
|
|
|
|
|
|
|
showAttribute.value = false
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 控制器基础操作
|
|
|
|
const initDesignFlow = (record) => {
|
|
|
|
const initDesignFlow = (record) => {
|
|
|
|
console.log('initDesignFlow_record', record.type)
|
|
|
|
console.log('initDesignFlow_record', record.type)
|
|
|
|
if (!showLf.value) {
|
|
|
|
if (!showLf.value) {
|
|
|
|
@ -103,12 +109,17 @@ const setEdgeType = (data) => {
|
|
|
|
|
|
|
|
|
|
|
|
// 注册自定义事件
|
|
|
|
// 注册自定义事件
|
|
|
|
const initEvents = () => {
|
|
|
|
const initEvents = () => {
|
|
|
|
lf.value.on('node:dbclick', ({ data }) => {
|
|
|
|
lf.value.on('node:click', ({ data }) => {
|
|
|
|
nodeData.value = data
|
|
|
|
nodeData.value = data
|
|
|
|
|
|
|
|
console.log('node:click-nodeData', nodeData.value)
|
|
|
|
if (['imageNode'].includes(data.type)) {
|
|
|
|
if (['imageNode'].includes(data.type)) {
|
|
|
|
showAttribute.value = true
|
|
|
|
showAttribute.value = true
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
lf.value.on('node:dbclick', ({ data }) => {
|
|
|
|
|
|
|
|
nodeData.value = data
|
|
|
|
|
|
|
|
console.log('node:dbclick-nodeData', nodeData.value)
|
|
|
|
|
|
|
|
})
|
|
|
|
lf.value.on('edge:dbclick', ({ data }) => {
|
|
|
|
lf.value.on('edge:dbclick', ({ data }) => {
|
|
|
|
nodeData.value = data
|
|
|
|
nodeData.value = data
|
|
|
|
showAttribute.value = true
|
|
|
|
showAttribute.value = true
|
|
|
|
@ -119,11 +130,12 @@ const initEvents = () => {
|
|
|
|
showAttribute.value = true
|
|
|
|
showAttribute.value = true
|
|
|
|
})
|
|
|
|
})
|
|
|
|
lf.value.on('element:click', () => {
|
|
|
|
lf.value.on('element:click', () => {
|
|
|
|
// hideAddPanel() // 隐藏属性面板
|
|
|
|
hideAttrPanel() // 隐藏属性面板
|
|
|
|
|
|
|
|
// console.log(lf.value.getGraphData(), 'getGraphData_click', JSON.stringify(lf.value.getGraphData()))
|
|
|
|
})
|
|
|
|
})
|
|
|
|
lf.value.on('blank:contextmenu', (e, position) => {
|
|
|
|
lf.value.on('blank:contextmenu', (e, position) => {
|
|
|
|
console.log('blank_contextmenu', e, position)
|
|
|
|
console.log('blank_contextmenu', e, position)
|
|
|
|
// hideAddPanel() // 打开属性面板
|
|
|
|
// hideAttrPanel() // 打开属性面板
|
|
|
|
})
|
|
|
|
})
|
|
|
|
lf.value.on('connection:not-allowed', (data) => {
|
|
|
|
lf.value.on('connection:not-allowed', (data) => {
|
|
|
|
if (data.msg) {
|
|
|
|
if (data.msg) {
|
|
|
|
@ -138,7 +150,8 @@ const initEvents = () => {
|
|
|
|
|
|
|
|
|
|
|
|
// 注册自定义节点
|
|
|
|
// 注册自定义节点
|
|
|
|
const initRegisterNode = () => {
|
|
|
|
const initRegisterNode = () => {
|
|
|
|
lf.value.batchRegister([OperationNode, ImageNode])
|
|
|
|
console.log(ImageNode, 'initRegisterNode_ImageNode')
|
|
|
|
|
|
|
|
lf.value.batchRegister([...OperationNode, ImageNode])
|
|
|
|
showTop.value = true
|
|
|
|
showTop.value = true
|
|
|
|
// lf.value.render() //回显
|
|
|
|
// lf.value.render() //回显
|
|
|
|
initEvents()
|
|
|
|
initEvents()
|
|
|
|
@ -205,7 +218,6 @@ const handleDrop = (e: DragEvent) => {
|
|
|
|
// properties: dragData.value.properties || {}
|
|
|
|
// properties: dragData.value.properties || {}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
// lf.value.render()
|
|
|
|
// lf.value.render()
|
|
|
|
|
|
|
|
|
|
|
|
// 重置拖拽数据
|
|
|
|
// 重置拖拽数据
|
|
|
|
// dragData.value = null
|
|
|
|
// dragData.value = null
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -220,5 +232,4 @@ defineExpose({ initDesignFlow })
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
@import url('./logicFlowView.scss');
|
|
|
|
@import url('./logicFlowView.scss');
|
|
|
|
@import url('@/styles/logic-flow-core.scss');
|
|
|
|
|
|
|
|
</style>
|
|
|
|
</style>
|
|
|
|
|
