LogicFlow icon indicating copy to clipboard operation
LogicFlow copied to clipboard

[Bug Report]: v2版本 构造方法中nodeTextDraggable/edgeTextDraggable 属性设置为true无效 无法实现节点文本和连接线文本的拖拽

Open eye33 opened this issue 1 year ago • 2 comments

发生了什么?

v2版本 构造方法中nodeTextDraggable/edgeTextDraggable 属性设置为true无效 无法实现节点文本和连接线文本的拖拽 (可用状态时 鼠标位于文本上回有移动的鼠标指针模式 且文本可拖动) v1版本 这2个属性可用

// 创建画布实例,也可以 new Core.LogicFLow const lf = new Core.default({ container: document.querySelector('#container'), width: 700, height: 500, grid: true, nodeTextDraggable:true, edgeTextDraggable:true, })

示例地址 https://github.com/eye33/logicFlow_demo_v2/blob/main/index.html

logicflow/core版本

2.x

logicflow/extension版本

2.x

logicflow/engine版本

No response

浏览器&环境

Chrome, Microsoft Edge

eye33 avatar Sep 29 '24 06:09 eye33

允许文本拖动的逻辑在2.0版本更新后有变化,详见:

https://github.com/didi/LogicFlow/blob/080eff106ce5e5274317ac41088ca720994941b4/packages/core/CHANGELOG.md?plain=1#L352

想要实现文本拖拽的话,可以参考以下修改:

// 修改前的节点定义
{
	id: '21',
	type: 'rect',
	x: 100,
	y: 200,
	text: 'rect node',
}

// 修改后的节点定义
{
	id: '21',
	type: 'rect',
	x: 100,
	y: 200,
	text: {
		value: 'rect node',
		x: 100,
		y: 200,
		draggable: true,
	},
}

不过目前文本拖拽的位移计算似乎有问题,可以先看看目前的文本拖拽功能能不能满足实现。

ChangeSuger avatar Oct 09 '24 12:10 ChangeSuger

允许文本拖动的逻辑在2.0版本更新后有变化,详见:

https://github.com/didi/LogicFlow/blob/080eff106ce5e5274317ac41088ca720994941b4/packages/core/CHANGELOG.md?plain=1#L352

为了使节点和边的文本都可以拖拽, 我是不是还得写一段类似这样的代码?

lf.on('text:update', ({ data }) => {
  lf.getModelById(data.id).text.draggable = true
})

这或许有些不合理了, 让原本只要一个配置项就能实现的功能复杂化

我认为也许这么设定会更好些:

  • typeof text.draggable === 'boolean' 时, 以 text.draggable 为准
  • 否则, 以 nodeTextDraggable/edgeTextDraggable 为准

Yuan-ZW avatar Oct 16 '24 01:10 Yuan-ZW