Leafer-UI 中处理元素交互状态切换的注意事项

在 Leafer-UI 项目中开发交互式应用时，我们经常会遇到需要动态切换元素可编辑状态的场景。最近有开发者反馈了一个看似是"bug"的现象：当连续两次通过双击操作切换父子元素的 editable 状态后，子元素的交换操作无法正常处理。

问题现象分析

开发者描述的具体现象是：

1. 第一次双击子元素 box1，将 box2.editable 设为 true，box1.editable 设为 false
2. 再次双击 box1 后取消选择，触发 EditorEvent.SELECT 事件
3. 在事件中将 box2.editable 设为 false，box1.editable 设为 true
4. 此时 box1 的交换操作无法正常处理，无法拖动

问题本质

经过深入分析，这实际上并不是框架的 bug，而是与 Leafer-UI 中 Group 元素的交互逻辑有关。关键在于理解以下几点：

1. 外层的 Box 元素实际上是一个 Group 容器
2. 双击操作会触发 Leafer-UI 的进组逻辑
3. 进组时框架会自动设置 hitChildren = true
4. 退出组时框架会自动设置 hitChildren = false

解决方案

要解决这个问题，我们需要在退出组后强制保持子元素的可命中状态。具体实现方式是在 SELECT 事件处理中加入以下代码：

leafer.editor.on(EditorEvent.SELECT, (e) => {
    if (e.oldValue?.name === 'box2') {
        box2.editable = false
        box1.editable = true
    }
    setTimeout(() => box2.hitChildren = true)
})

这里使用 setTimeout 是因为退出组的操作会在 SELECT 事件之后执行，我们需要确保我们的设置覆盖框架的默认行为。

最佳实践建议

1. 当处理 Group 容器内元素的交互状态切换时，要特别注意 hitChildren 属性的影响
2. 在动态修改 editable 属性时，考虑是否需要同步调整 hitChildren 属性
3. 对于复杂的交互逻辑，可以使用 setTimeout 确保操作顺序符合预期
4. 在调试这类问题时，可以打印出关键属性的值，帮助理解框架的内部状态变化

总结

Leafer-UI 作为一个强大的 UI 框架，其交互系统设计得非常灵活。理解框架的默认行为和工作原理，能够帮助开发者更好地处理各种交互场景。对于 Group 容器内的元素交互，记住 hitChildren 属性的重要性，就能避免类似问题的发生。