I'm using Aurelia with D3, via custom attribute with a data binding for the graph data (nodes and edges).
All the d3 rendering occurs in the valueChanged function of the custom attribute. Mostly its working.
Problem is with bounding box calculation. Using svgText.node().getBBox() where svgText is an svg element. For each node, some text is appended to svgText and the bounding box calculation is run.
Issue is this only returns positive width and height if the svg has actually been rendered to the DOM.
Using breakpoints, it looks like Aurelia does not render to the dom until the entire valueChanged function has completed. So all the bounding box calculations are returning width and height = 0.
Does anyone know how to resolve this?
Have a go with pushing it to the back of the micro task queue - that way anything in the task queue (like bindings etc) should have completed before you call your function to get the BB
there are examples here
just search for taskQueue
This will ensure that all queued events, including the bound property's value change, are processed before the focus is given.
think that should solve your issue
you want to queueMicroTask(task: Callable | Function), and stick your func in there
basically, there's a whole task queue that does all the "stuff" in aurelia
[task1, task2, task3, task4] - the tasks are jobs like evaluating a binding, adding an element to the DOM etc
you are just pushing your function to the back of that queue by calling queueMicroTask
so it will get run after all the other aurelia goodness has finished - e.g. your valueChanged binding etc
-> this stuff runs first.... [some, events, that, need, to, be, processed, valueChanged, some, more, events, yourFunction]
From Aurelia discuss on gitter:
I'm using Aurelia with D3, via custom attribute with a data binding for the graph data (nodes and edges). All the d3 rendering occurs in the valueChanged function of the custom attribute. Mostly its working. Problem is with bounding box calculation. Using svgText.node().getBBox() where svgText is an svg element. For each node, some text is appended to svgText and the bounding box calculation is run. Issue is this only returns positive width and height if the svg has actually been rendered to the DOM. Using breakpoints, it looks like Aurelia does not render to the dom until the entire valueChanged function has completed. So all the bounding box calculations are returning width and height = 0. Does anyone know how to resolve this?
Have a go with pushing it to the back of the micro task queue - that way anything in the task queue (like bindings etc) should have completed before you call your function to get the BB there are examples here just search for taskQueue This will ensure that all queued events, including the bound property's value change, are processed before the focus is given. think that should solve your issue
you want to
queueMicroTask(task: Callable | Function), and stick your func in therebasically, there's a whole task queue that does all the "stuff" in aurelia [task1, task2, task3, task4] - the tasks are jobs like evaluating a binding, adding an element to the DOM etc you are just pushing your function to the back of that queue by calling queueMicroTask so it will get run after all the other aurelia goodness has finished - e.g. your valueChanged binding etc -> this stuff runs first.... [some, events, that, need, to, be, processed, valueChanged, some, more, events, yourFunction]