Open
Description
发生了什么？
拖拽创建节点时，节点拖拽进去后，幕布中现有的节点的text就不显示了，双击一下任意一个节点的text位置处，节点text内容就显示了
在logicFlow2.0中有这个个问题，logicFlow1.0中没有问题
双击后就显示了
代码如下
<template>
<a-row>
<a-col :span="3">
<a-row>
<a-col :span="24">
<a-divider>General</a-divider>
</a-col>
<a-col :span="8"
v-for="(item,index) in shapeList"
:key="index"
>
<span class="iconfont" :class="item.class" style="font-size: 40px;" @mousedown='mouseDownHandle(item)'></span>
</a-col>
</a-row>
</a-col>
<a-col :span="15">
<div class="container" ref="container"></div>
</a-col>
<a-col :span="6">
<a-row>
<a-col :span="24">
<a-divider>配置</a-divider>
</a-col>
<a-col :span="24">
<a-collapse>
<a-collapse-panel header="组件样式配置">配置</a-collapse-panel>
</a-collapse>
</a-col>
<a-col :span="24" v-if="componentDetail&&componentDetail.hasOwnProperty('owner')">
<a-divider>组件详情</a-divider>
</a-col>
<a-col :span="24" v-if="componentDetail&&componentDetail.hasOwnProperty('owner')">
<a-row>
<a-col :span="8">负责人</a-col>
<a-col :span="16">
<span v-if="componentDetail.owner&&componentDetail.owner.length>0">{{ componentDetail.owner }}</span>
</a-col>
</a-row>
<a-row style="margin-top: 5px">
<a-col :span="8">版本</a-col>
<a-col :span="16">
<span
v-if="componentDetail.version&&componentDetail.version.length>0">{{ componentDetail.version }}</span>
</a-col>
</a-row>
<a-row style="margin-top: 5px">
<a-col :span="8">版本</a-col>
<a-col :span="16">
<span
v-if="componentDetail.version&&componentDetail.version.length>0">{{ componentDetail.version }}</span>
</a-col>
</a-row>
<a-row>
<a-col :span="8">项目</a-col>
<a-col :span="16">
<span
v-if="componentDetail.gerrit_project&&componentDetail.gerrit_project.length>0">{{
componentDetail.gerrit_project
}}</span>
</a-col>
</a-row>
</a-col>
</a-row>
</a-col>
</a-row>
</template>
<script>
import LogicFlow from '@logicflow/core'
import '@logicflow/core/lib/style/index.css'
import '@logicflow/extension/lib/style/index.css'
import { Control, Menu, SelectionSelect } from '@logicflow/extension'
LogicFlow.use(Control)
export default {
name: 'ComponentShowView',
data () {
return {
shapeList: [
{ type: 'rect', text: '矩形', class: 'icon-juxing' },
{ type: 'polygon', text: '多边形', class: 'icon-tubiao' },
{ type: 'circle', text: '圆形', class: 'icon-xingzhuang-tuoyuanxing' },
{ type: 'text', text: 'text', class: 'icon-text' },
{ type: 'html', text: 'html', class: 'icon-html' }
],
componentDetailMap: {
adas: { owner: '张三', version: 'v1.0.0', gerrit_project: 'adasProject' },
serviceBus: { owner: '李四', version: 'v1.0.0', gerrit_project: 'busProject' }
},
componentDetail: {},
lf: null
}
},
mounted () {
this.lf = new LogicFlow({
container: this.$refs.container,
overlapMode: 1,
autoWrap: true,
metaKeyMultipleSelected: true,
keyboard: { // 内置快捷键开启
enabled: true
},
background: {
backgroundImage: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAwIDEwIEwgNDAgMTAgTSAxMCAwIEwgMTAgNDAgTSAwIDIwIEwgNDAgMjAgTSAyMCAwIEwgMjAgNDAgTSAwIDMwIEwgNDAgMzAgTSAzMCAwIEwgMzAgNDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2QwZDBkMCIgb3BhY2l0eT0iMC4yIiBzdHJva2Utd2lkdGg9IjEiLz48cGF0aCBkPSJNIDQwIDAgTCAwIDAgMCA0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZDBkMGQwIiBzdHJva2Utd2lkdGg9IjEiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JpZCkiLz48L3N2Zz4=")',
backgroundRepeat: 'repeat'
},
grid: {
size: 20,
visible: false,
type: 'mesh',
config: {
color: '#ece4e2',
thickness: 1
}
},
// 允许节点缩放
allowResize: true,
// 允许节点旋转
allowRotate: false,
plugins: [Menu, SelectionSelect]
})
this.lf.render({
nodes: [
{
id: 'node1',
type: 'rect',
x: 100,
y: 100,
text: { x: 100, y: 100, value: 'serviceBus' }
}
],
edges: []
})
// 渲染到视图中心为止，否则在左上角显示
this.lf.translateCenter()
this.lf.openSelectionSelect()
const menuConfig = {
nodeMenu: [
{
text: '置于顶层',
callback: (node) => {
this.lf.graphModel.setElementZIndex(node.id, 'top')
}
},
{
text: '置于底层',
callback: (node) => {
this.lf.graphModel.setElementZIndex(node.id, 'bottom')
}
}
],
edgeMenu: []
}
this.lf.extension.menu.addMenuConfig(menuConfig)
this.lf.on('node:click', ({ data }) => {
// this.lf.getNodeModelById(data.id).setZIndex(data.zIndex + 10)
const nodeData = this.lf.getNodeModelById(data.id).getData()
if (nodeData && nodeData.text && nodeData.text.value) {
const componentName = nodeData.text.value
this.componentDetail = this.componentDetailMap[componentName]
}
// this.lf.getNodeModelById(data.id).setZIndex(9999)
console.log(this.lf.getGraphData())
})
this.lf.on('blank:click', ({ data }) => {
console.log(this.lf.getGraphData())
})
},
methods: {
/**
* 拖拽
* @param item 拖拽属性
*/
mouseDownHandle (item) {
this.lf.dnd.startDrag({
type: item.type,
text: '节点'
})
console.log(this.lf.getGraphRawData())
}
}
}
</script>
<style scoped>
.container {
height: 800px;
}
.low-z-index-node {
z-index: -1 !important;
}
.high-z-index-node {
z-index: 9999 !important;
}
</style>
logicflow/core版本
2.0.10
logicflow/extension版本
2.0.14
logicflow/engine版本
No response
浏览器&环境
Chrome