client onSize event - Before size changes?

asked 2014-11-12 14:24:34 +0800

peterg4000
30 ● 2

I am trying to use a native html5 canvas to do some client-side drawing, which is going OK.

One thing I have learned - If you use CSS styling to size a canvas, it can stretch the pixels. You MUST use width and height attributes to set the pixel buffer. The CSS sizing affects the size on screen. If the 2 are different, you get stretched/blurry pixels.

Now I am trying to handle resizing in client-side Javascript. Due to above, resizing has to be handled carefully. I have my native canvas embedded in a Panel.

I am trying to detect changes to the Panel, and then carefully apply the required changes to the canvas.

But the onSize() event for the Panel seems to be triggered BEFORE the Panel has got its new size.

I have made a zkfiddle here: http://zkfiddle.org/sample/5cvf05/2-Handling-resizing-on-client

Run it and resize the panel. You will see that the alerts are always one behind the resize. (Behaviour is the same with the alerts taken out and using console logging)

Doco here says onSize() should be the last event fired: http://books.zkoss.org/wiki/ZKClient-sideReference/Notifications/ClientActivityWatches

How do I get the new Panel size after the resize?

If I have to handle on the server in Java, that's OK, but I need to come back to the client to change the native canvas, so I think better to handle all on the client.

P.S. There seems to be some sort of zk canvas object support(???), but it doesn't seem mainstream? If I am missing a simpler (fully supported) option, please let me know.

Thanks!

Here is the code from the current fiddle anyway:

<zk xmlns:native="native" xmlns:client="client">

<panel title="Waveform" id="myPanel" border="rounded" top="1%" left="10%" width="600px" height="150px" floatable="true" movable="true" sizable="true" maximizable="false" minimizable="false" collapsible="false" closable="false" client:onsize="handleOnSize();" &gt;="" <panelchildren="">

  <!-- A native HTML Canvas object wrapped in a ZK div: -->
  <div id="divCanvas" width="580px" height="80px" hflex="1" vflex="1">
    <native:canvas id="myCanvas" width="580px" height="80px"            
        style="z-index:1;position:absolute;left:0px;top:0px;background:black" />
  </div>

  <script>
    function handleOnSize() {
      console.log( "Panel onSize()! Finding widget:" );
      var p = zk.Widget.$('$myPanel').$n();
      console.log( "Panel:" );
      console.log( p );

      var style = window.getComputedStyle(p);
    // ######## PROBLEM - This seems to be height BEFORE THE RESIZE:
      console.log( "Computed height: " + style.getPropertyValue('height') );
      alert( 'Panel height is now: ' + style.getPropertyValue('height') );

    //canvas.setAttribute('width', '438');
    //canvas.setAttribute('height', '462');
    }
  </script>
</panelchildren>

</panel> </zk>