Skip to content

子元素宽高位置变化均触发父元素BoundsEvent事件的疑问 #861

Description

@dawumusic

你好,BoundsEvent事件在开发中发现,Box内的子元素宽高或位置变化,都会引发父元素触发BoundsEvent事件。

特别是对于BoundsEvent.RESIZE的预期,按文档中的理解,一般认为是「只有元素自身宽高、Path变化」才会触发事件,但实际子元素的宽高、位置变化也会触发此事件,不知道是内部机制就是这样,还是触发了其它的条件边界引发。

因为业务中会对元素宽高变化做监听,也是比较常见的一种需求了,然而现在对于「子元素在容器内部拖拽」就会密集触发BoundsEvent.RESIZE,导致容器很难对自身大小变化直接监听了(要多写oldValue === newValue)。若改用PropertyEvent.CHANGE这种又会回退到之前另一个issue的解决方式,也不太对味儿。

希望作者看下,谢谢~

相关issue: #268

测试代码:

import { Leafer, Box, Rect, BoundsEvent } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const box = new Box({ x: 10, y: 10, fill: '#32cd79', draggable: true, width: 500, height: 300 })
const rect = new Rect({ x: 100, y: 100, fill: '#333', draggable: true, width: 100, height: 100 })

box.add(rect)
leafer.add(box)

box.on(BoundsEvent.RESIZE, function (target: Rect) {
    target.fill = 'red'    // 只因为子元素的变化,这里预期不应该被触发
})

setTimeout(() => {
    rect.x = 200        // 更新子元素rect位置也触发
//    rect.width = 200        // 更新子元素rect宽度触发
}, 1000)

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions