I have a component that's laid out using polymer-grid-layout
which contains a canvas as the main part of the content. I want the canvas to auto resize based on the size that polymer-grid-layout
allocates.
I can't put width:100%; height:100%
on the canvas as that just stretches the canvas making it distorted and grainy. Instead I wrapped a div around the canvas and manually resize the canvas based on the div size in code.
Code looks somewhat like (note I've left out the boiler plate like etc)
<polymer-grid-layout xnodes="{{xnodes}}"
layout="[[1, 2, 3],
[4, 4, 4]]">
</polymer-grid-layout>
<gauge-slider id='front' label='Front'></gauge-slider>
<panel flex></panel>
<gauge-slider id='back' label='Back'></gauge-slider>
<canvas-view id="canvasView" canvasModel="{{canvasModel}}" flex></canvas-view>
where canvas-view contains
<panel id="canvasContainer" flex>
<canvas id="canvas"></canvas>
</panel>
In the canvas-view dart code I set the canvas width like so
void _resize() {
canvas.width = canvasContainer.clientWidth;
canvas.height = canvasContainer.clientHeight;
_redraw();
}
which I call from
@override
void ready() {
canvas = $['canvas'];
canvasContainer = $['canvasContainer'];
// doesn't seem to be a resize on anything other than window!?!
window.onResize.listen((_) => _resize());
}
and from
@published void set canvasModel(CanvasModel m) {
_canvasModel = m;
// TODO: need to build in a delay as otherwise the containing div has not been sized properly yet
new Timer(new Duration(milliseconds: 50), _resize);
}
The problem is in the above code. If I call _resize directly here then the container div doesn't yet know it's proper height. After experimenting I found that 50 millisecs allows the container to be sized correctly by the grid layout on my machine but that seems really dodgy and likely to be problematic on different devices.
How can I avoid that delay? Is there some event I can listen to that tells me when the grid layout has finished sizing components?
Also was there a simpler way to have achieved the canvas resizing in the first place?
Lastly, I had to style the canvasContainer panel to have 0 margins, border etc. Is there a way to have fetched the inner dimensions of that container?