javascript - サイズ変更中にパネルのサイズを取得するには?

Question

複数パネルの jQuery レイアウトがあり、サイズ変更中の中央パネルのサイズを知りたいです。document.ready 関数は次のようになります。

$(document).ready(function () { 

    outerLayout = $('body').layout({ 
        spacing_open:           8
    ,   south__spacing_open:    4 
    ,   north__minSize:         40
    ,   north__maxSize:         200
    ,   center__onresize:       resizeInnerLayout
    ,   resizeWhileDragging:    true
    ,   triggerEventsWhileDragging: true
    }); 

resizeInnerLayout 関数は次のとおりです。

function resizeInnerLayout() {
    var width=$('#content-middle').width();
    var height = $('#content-middle').height();
    console.log("content-middle size = ("+width +"," +height +")");
};

html は次のとおりです。

<div id="content-middle" class="inner-center">
    <svg></svg>
</div> 

Javascript は svg 内に d3 チャートを配置します。ユーザーが分割バーをスライドさせたときにサイズが変更されるので、それに応じてチャートのサイズを変更できるように、div のサイズを知る必要があります。現在、console.log には何も出力されません。

また、次のように関数を layoutpaneresize イベントにバインドしようとしました。

$('.inner-center').bind('layoutpaneresize', function(paneName, $pane, paneState, paneOptions) {
        console.log("content-middle size = ("+paneState.width +"," +paneState.height +")");     
    });

しかし、何も出力しません。これもしませんでした：

$('.inner_center').resize(function() {
    console.log("content-middle is being resized");
});

これは機能しますが、ウィンドウ内のスプリッターのサイズが変更された場合ではなく、ブラウザー ウィンドウのサイズが変更された場合にのみ機能します。それでも、サイズ変更を開始するとサイズが報告されますが、サイズが変化し続けると更新されません。

window.addEventListener("resize", drawChart);

何か案は？