shaperpan resizable with aspect ratio

[erata]

hi, i want to resize my shaperpans with 1/3 ratio and i did it changich mouseDragged event. but it stop edge of ratio. for example if i reach max width for 1/3 ratio it stops, the same thing exist for height. i want like resize as https://jqueryui.com/resources/demos/resizable/aspect-ratio.html. how can i do it non stop resizeble at zebra.

[barmalei]

Well, not very graceful solution but find below an example of code that sizes component with preserving 3/2 ratio:

zebkit.require("ui","layout","draw", "ui.design", function(ui, layout, draw, design) {
    var zc = new ui.zCanvas();
    //zc.setSizeFull(true);
    zc.root.add(new design.ShaperPan(new ui.Button("Test"), [
        function pointerDragged(e){
            if (this.$state !== null) {
                var s= this.$state;
                if ((s.top + s.right + s.bottom + s.left) === 0) {
                    this.$super(e);
                } else {
                    var dy = (e.absY - this.py),
                        dx = (e.absX - this.px),
                        nh = this.height - dy * s.top  + dy * s.bottom;

                    if (nh >= this.minHeight && dy !== 0) {
                        this.px = e.absX;
                        this.py = e.absY;
                        var nw = Math.floor(nh * 3) / 2;
                        this.setBounds(this.x + dx * s.left, this.y + dy * s.top, nw, nh);
                    }
                }
            }
        }
    ])).setBounds(10, 10, Math.floor((50 * 3) / 2), 50);
});

[erata]

thanks