didi / didi/LogicFlow

[Bug Report]:拖拽创建节点时,节点拖拽进去后,幕布中现有的节点的text就不显示了,双击一下任意一个节点的text位置处,节点text内容就显示了

Open
#2,053 3 comments 0 reactions 1 assignee Assigned to @boyongjiong View on GitHub
extension: dnd-panel status: todo type:bug
Dominant language
TypeScript
Stars
11.7k
Forks
1.4k
PR merge metrics
No merged PRs in 30d

Description

### 发生了什么?

拖拽创建节点时,节点拖拽进去后,幕布中现有的节点的text就不显示了,双击一下任意一个节点的text位置处,节点text内容就显示了
在logicFlow2.0中有这个个问题,logicFlow1.0中没有问题

Image

双击后就显示了

代码如下

```





General












配置



配置



组件详情



负责人

{{ componentDetail.owner }}



版本

{{ componentDetail.version }}



版本

{{ componentDetail.version }}



项目

{{
componentDetail.gerrit_project
}}





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())
}

}
}

.container {

height: 800px;
}

.low-z-index-node {
z-index: -1 !important;
}

.high-z-index-node {
z-index: 9999 !important;
}

```

### logicflow/core版本

2.0.10

### logicflow/extension版本

2.0.14

### logicflow/engine版本

_No response_

### 浏览器&环境

Chrome

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.