Resizing does not work in paperjs 0.11.8 but works for 0.9.25

Question

I am trying to resize a rectangle in paper.js. I am able to do it for older versions of paperjs (like 0.9.25) but it is not working for the latest version 0.11.8. I am not sure why this is happening, any help would be highly appreciated.

Here is the Sketch link, you may select the version to 0.9.25 where it works and 0.11.8 where it doesnt work.

Sketch

Here is my code:

var hitOptions = {
    segments: true,
    stroke: true,
    fill: true,
    tolerance: 1
};

project.currentStyle = {
    fillColor: 'green',
    strokeColor: 'black'
};

var rect_a = new Path.Rectangle(new Point(50, 50), 50);

var segment, path, hitType;
var clickPos = null;
var movePath = false;
var minHeight = 1;
var minWidth = 1;

function onMouseDown(event) {
    segment = path = null;
    var hitResult = project.hitTest(event.point, hitOptions);
    if (!hitResult)
        return;

    hitType = hitResult.type;

    if (event.modifiers.shift) {
        if (hitResult.type == 'segment') {
            hitResult.segment.remove();
        };
        return;
    }

    if (hitResult) {
        path = hitResult.item;
        if (hitResult.type == 'segment') {
            segment = hitResult.segment;
        }
    }
    movePath = hitResult.type == 'fill';
    if (movePath) {
        project.activeLayer.addChild(hitResult.item);
    }

    clickPos = checkHitPosition(event);
}

function onMouseMove(event) {
    changeCursor(event);
    project.activeLayer.selected = false;
    if (event.item)
        event.item.selected = true;
}

function onMouseDrag(event) {
    if (hitType == "stroke" || hitType == "segment") {
        resizeRectangle(path, event);
    } else {
        path.position += event.delta;
    }
}

function resizeRectangle(path, event) {
    switch(clickPos) {
        case "SE" :
            resizeBottom(path, event);
            resizeRight(path, event);
            break;
        case "NE" :
            resizeTop(path, event);
            resizeRight(path, event);
            break;
        case "SW" :
            resizeBottom(path, event);
            resizeLeft(path, event);
            break;
        case "NW" :
            resizeTop(path, event);
            resizeLeft(path, event);
            break;
        case "S"  :
            resizeBottom(path, event);
            break;
        case "N"  :
            resizeTop(path, event);
            break;
        case "E"  :
            resizeRight(path, event);
            break;
        case "W"  :
            resizeLeft(path, event);
            break;
    }
}

function resizeTop(path, event) {
    if(path.bounds.height >= minHeight) {
        var adj = Math.min(event.delta.y, path.bounds.height-minHeight);
        path.bounds.top += adj;
    }
}

function resizeBottom(path, event) {
    if(path.bounds.height >= minHeight) {
        path.bounds.bottom += event.delta.y;
    }
}

function resizeLeft(path, event) {
    if(path.bounds.width >= minWidth) {
        path.bounds.left  += event.delta.x;
    }
}

function resizeRight(path, event) {
    if(path.bounds.width >= minWidth) {
        path.bounds.right  += event.delta.x;
    }
}

function checkHitPosition(event) {
    var hitResult = project.hitTest(event.point, hitOptions);
    var clickPosition = null;

    if (hitResult) {
        if (hitResult.type == 'stroke' || hitResult.type == 'segment') {
            var bounds = hitResult.item.bounds;
            var point = hitResult.point;

            if (bounds.top == point.y) {
                clickPosition = "N";
            }

            if (bounds.bottom == point.y) {
                clickPosition = "S";
            }

            if (bounds.left == point.x) {
                clickPosition = "W";
            }

            if (bounds.right == point.x) {
                clickPosition = "E";
            }

            if (bounds.top == point.y && bounds.left == point.x) {
                clickPosition = "NW";
            }

            if (bounds.top == point.y && bounds.right == point.x) {
                clickPosition = "NE";
            }

            if (bounds.bottom == point.y && bounds.left == point.x) {
                clickPosition = "SW";
            }

            if (bounds.bottom == point.y && bounds.right == point.x) {
                clickPosition = "SE";
            }
        } else {
            clickPosition = "C";
        }
    }
    return clickPosition;
};

function changeCursor(event) {
    var hitPosition = checkHitPosition(event);
    if(hitPosition == null ) {
        document.body.style.cursor = "auto";
    } else {
        if (hitPosition == "C") {
            document.body.style.cursor = "all-scroll";
        } else {
            document.body.style.cursor = hitPosition + "-resize";
        }
    }
}

Answer 1

helloworld,

If you want to resize/scale your path, I recommend using the Path.scalemethod (http://paperjs.org/reference/item/#scale-hor-ver).

To apply this on your example, replace your current resizing methods with:

function resizeTop(path, event) {
    if(path.bounds.height >= minHeight) {
        var relH = (event.point.y - (path.bounds.bottomCenter.y)) / path.bounds.height;
        path.scale(1, -relH, path.bounds.bottomCenter)
    }
}

function resizeBottom(path, event) {
    if(path.bounds.height >= minHeight) {
        var relH = (event.point.y - (path.bounds.topCenter.y)) / path.bounds.height;
        path.scale(1, relH, path.bounds.topCenter)
    }
}

function resizeLeft(path, event) {
    if(path.bounds.width >= minWidth) {
        var relW = (event.point.x - (path.bounds.rightCenter.x)) / path.bounds.width;
        path.scale(-relW, 1, path.bounds.rightCenter)
    }
}

function resizeRight(path, event) {
    if(path.bounds.width >= minWidth) {
        var relW = (event.point.x - (path.bounds.leftCenter.x)) / path.bounds.width;
        path.scale(relW, 1, path.bounds.leftCenter)
    }
}

Have a nice day!

-- edit --
I remade your sketch and replaced the code, sketch, which works with every version.