Consider using ResizeObserver

[kitsonk]

Enhancement/Discussion

We might want to consider using a ResizeObserver polyfill to allow the Dimensions meta manager to perform better, allowing it to detect changes to DOM elements that change the size information of a DOM element.

The draft spec is available at WICG ResizeObserver Draft. A well thought out polyfill is available at que-etc/resize-observer-polyfill which uses MutationObservers and Mutation Events to provide spec compliant functionality with some minor limitations.

It is currently available natively in Chrome/Opera under a flag.

Right now, every time a widget is re-rendered, any nodes that are registered with the Dimensions meta manager will have their bounding rectangle re-calculated, whether it has actually been changed. This would allow the manager to be more reactive and keep a cache of size information, of which its observed DOM elements would have their values updated on actual resize.

Because the polyfill is designed to deliver the resize changes only when it is convinced it has the right information, there could be an issue where the queuing of changes get delivered after the DOM has be re-rendered after an invalidation, either causing a double invalidation or incorrect information being offered up to the widgets. This would require investigation to help ensure that it operates effectively.

[xiaohulu]

I hava a Container widget which contains widget A and widget B。
When use mouse to select Container, A or B, then widget C and widget D change position
depend on the selected widget's position(left and bottom)

<widget> Container
    <widget>A</widget>
    <widget>B</widget>
</widget>
<widget>C</widget>
<widget>D</widget>

So I use use resize-observer-polyfill to observe the selected widget's position and size change.

In Container widget's onElementCreate, I create a private ResizeObserver, for example:

protected onElementCreated(element: Element, key: string | number) {
        const { onFocusChanged } = this.properties;
	this._resizeObserver = new ResizeObserver((entries, observer) => {
		for (const entry of entries) {
			const focusDimensions = getEnclosingWidgetDimensions(entry.target);
			onFocusChanged &&
				onFocusChanged({
					focusDimensions
				});
		}
	});

	this._resizeObserver.observe(element);
}

then, and a mouseup event for Container widget, here I do not want to create a mouseup event for each child widget(for example C and D), I want to use a delegate event at Container widget, because may has many children widgets.

private _onMouseUp(event: MouseEvent) {
    const selectedElement = this.getEnclosingWidget(event.target);
    if (this._focusDom != null) {
        this._resizeObserver.unobserve(this._focusDom);
    }
   this._focusDom = selectedElement ;
    this._resizeObserver.observe(this._focusDom);
}

protected render() {
    return v('div', {'onmouseup': this._onMouseUp}, [....]);
}

But I found onElementCreate was removed. How to Implement this feature without onElementCreate, custom a ResizeObserver Meta? But how to support delegate event?