How to force proportional scaling using Fabricjs?

Question

There has been multiple changes in the Fabricjs API that affect the way scaling points behave. One of the latest changes in version 4 (http://fabricjs.com/v4-breaking-changes) states that uniformScaling is now the way to go to force proportional scaling.

This is my test canvas:

<canvas id="c" width="400" height="400" style="border:1px solid #ccc"></canvas>

And this is my simple code snippet:

const canvas = (this.__canvas = new fabric.Canvas("c"));
canvas.uniformScaling = true;

const Add = () => {
  const rect = new fabric.Rect({
    left: 100,
    top: 100,
    fill: "yellow",
    width: 200,
    height: 100,
    stroke: "lightgreen",
  });
  canvas.add(rect);
  canvas.setActiveObject(rect);
};
Add();

See a codepen illustrating the issue.

Why are the control points for resizing horizontally and vertically still there? What am I doing wrong?

Answer 1

The uniformScaling property only determines the behavior of the corner resize controls. You can hide the side controls using the setControlsVisibility method.

http://fabricjs.com/docs/fabric.Object.html#setControlsVisibility

fabric.Rect.prototype.setControlsVisibility({
    ml: false,
    mt: false,
    mr: false,
    mb: false
});