how to get dojo widget root node's dimension

[xiaohulu]

at https://dojo.io/cookbook/rendering/get-rendered-dimensions-element.html, I know how to rendered dimensions of an element on the page, but i can not write get dimensions code in dojo2 widgets.

when I use

const dimensions = this.meta(Dimensions).get('buttonKey');
return v('div', {}, [w(Button, {key:'buttonKey'})]);

the dimensions's value is zero

[dylans]

Per the readme at https://github.com/dojo/widget-core/blob/master/README.md#meta-configuration , the dimensions are zero until the widget is first rendered.

[agubler]

@xiaohulu Meta does not work on widgets, only on nodes with a key created using v(). To get the above code working, the quickest way is to wrap your Button in a vnode and get the dimensions from that instead.

export class HelloWorld extends WidgetBase {

    protected render() {
        const dimensions = this.meta(Dimensions).get('buttonHolder');
        return v('div', { classes: css.root }, [
            v('div', { key: 'buttonHolder' }, [ 
                w(Button, {}, [ `Dimensions: ${JSON.stringify(dimensions)}` ])
            ])
        ]);
    }
}

Hope that this helps!

[xiaohulu]

@agubler wrap a Button in a vnode, get the wraped div dimensions，not exactly the Button dimensions. Does has a method to get Button's root node dimensions directly?

In order to get Button dimensions, wrap a Button in a div, I feel it is not elegant.

Thanks for your help.

[agubler]

@xiaohulu did you get enough information on gitter to close out this issue?

[xiaohulu]

No,I expect that we could get dimensions of dojo widgets directly, not through wrapped a button holder.

[dylans]

Ok, this should probably be moved as an enhancement request to dojo/widget-core then (as the documentation is correct based on what is currently supported), assuming it is something that is feasible @agubler? That said, we may want to document somewhere (if we don't already) that meta currently works on DOM nodes rather than widgets.

To clarify, I guess the enhancement request would be "could meta be provided on a widget and reference the root node of that widget, rather than only on a dom node that has a key?"

[matt-gadd]

Yes, meta is a dom abstraction mechanism for VNodes. Perhaps we should update the documentation to state that more specifically if needed.

could meta be provided on a widget and reference the root node of that widget, rather than only on a dom node that has a key?

this is something we are unlikely to support for 2 reasons:

1) a widget has no concept of a root node. A render function can also return undefined/null, a text node, an array of VNodes, another widget, an array of widgets, an array of a mixture of all of the above!

2) meta provides uncontrolled access to a dom node under the hood, and in some cases the meta itself has set functions on the api (see Animation, and Focus). This means that an end user would be able to set things on an arbitrary node in a child widget without the child widget itself knowing anything about it. For example a conflicting Animation usage between the child and the parent.

Given the above, a wrapping VNode like has been recommend, is both the most flexible and safest way to use meta around any number of child widgets without affecting the actual child widgets themselves.

[dylans]

Ok, that makes sense and thanks for explaining. I think this is worth explaining somewhere, either in the readme or reference guide on the website.