strokeUniform under Active Selection scale

by Andrea Bogazzi

HTML

<script src="https://unpkg.com/[email protected]/dist/fabric.min.js"></script>
<canvas id="c" ></canvas>

CSS

#c{
  border: 1px solid #979797;
}

JavaScript

var canvas = this.__canvas = new fabric.Canvas('c');
canvas.setHeight(600);
canvas.setWidth(600);
canvas.uniformScaling = false;


const utahCommonDefaults = {
/*   originX: "center",
  originY: "center", */
  transparentCorners: false,
  cornerStyle: "rect",
  cornerColor: "#87CEFA",
  cornerSize: 6,
  cornerStrokeColor: "#2F4F4F",
  hasControls: true,
  lockSkewingX: true,
  lockSkewingY: true,
  lockRotation: true,
  _controlsVisibility: { mtr: false }
};
const utahObjectDefaults = {
  strokeWidth: 0,
  fill: "#00000001",
  hasBorders: false
};

const wrapWithLayouting = (actionHandler) => {
	return (eventData, transform, x, y) => {
      const { target, originX, originY } = transform;

        const centerPoint = target.getRelativeCenterPoint(),
      constraint = target.translateToOriginPoint(centerPoint, originX, originY),
      actionPerformed = actionHandler(eventData, transform, x, y);
			if (target.triggerLayout) {
        target.triggerLayout();
        target.setPositionByOrigin(
          constraint,
          transform.originX,
          transform.originY
        );
      } 
    return actionPerformed;
  };
};
const controlSet = fabric.controlsUtils.createObjectDefaultControls()
const brControl = controlSet.br;
brControl.actionHandler = wrapWithLayouting(brControl.actionHandler);


const utahActiveSelectionDefaults = {
  lockScalingFlip: true,
  perPixelTargetFind: true,
  controls: {
    br: brControl
  }
  /* padding: 2 */
};

fabric.ActiveSelection.ownDefaults = {
  ...fabric.ActiveSelection.ownDefaults,
  ...utahCommonDefaults,
  ...utahActiveSelectionDefaults
  
};

fabric.Object.ownDefaults = {
  ...fabric.Object.ownDefaults,
  ...utahCommonDefaults,
  ...utahObjectDefaults
};



var rect2 = new fabric.Rect({
  left: 250,
  top: 250,
  width: 600,
  height: 800,
  scaleX: 0.1,
  scaleY: 0.1,
  fill: "transparent",
  stroke: "green",
  strokeWidth: 10,
  perPixelTargetFind: true,
  strokeUniform: true
});
canvas.add(rect2);

const circle1 = new...