Help SOS: Bounding Box is messing up with group.addWithUpdate() when scaled

[kartiksolanki]

I have fabricjs canvas with arrow like this:

addArrow() {
const centerCanvas = this.getZoomedCenter();
const arrowLength = 100;
const arrowHeadSize = 15;
const arrId = 123;

const arrowBody = new fabric.Line(
  [ -arrowLength / 2, 0, arrowLength / 2, 0 ],
  {
    stroke: '#FFF',
    strokeWidth: 2,
    selectable: true,
    evented: true,
    id: 'arrow_' + arrId,
    type: 'arrowBody',
    originX: 'center',
    originY: 'center',
    left: centerCanvas.left,
    top: centerCanvas.top,
  }
);

const arrowHead = new fabric.Triangle({
  width: arrowHeadSize,
  height: arrowHeadSize,
  fill: '#FFF',
  top: centerCanvas.top,
  left: centerCanvas.left + arrowLength / 2,
  originX: 'center',
  originY: 'center',
  selectable: false,
  evented: false,
  angle: 90,
  id: isImport ? importObj.id : 'arrow_' + arrId,
  type: 'arrowHead',
  scaleX: 1,
  scaleY: 1,
  lockScalingX: true, 
  lockScalingY: true, 
});

const arrowGroup = new fabric.Group([arrowBody, arrowHead], {
  left: centerCanvas.left,
  top: centerCanvas.top,
  originX: 'center',
  originY: 'center',
  hasRotatingPoint: true,
  hasControls: false,
  selection: false,
  hasBorders: false,
  lockScalingFlip: true, 
  id: 'arrow_' + arrId,
  type: 'arrow',
  perPixelTargetFind: true, 
  angle: 0,
  scaleX: 1,
  scaleY: 1,
});
this.canvas.add(arrowGroup);
this.canvas.setActiveObject(arrowGroup);
this.canvas.requestRenderAll();

}

On mouse:down event, I am make the selection of that arrow group like this:

enableArrowAdjustment (obj) {
this.canvas.setActiveObject(obj);
let selection = this.canvas.getActiveObject();
selection.set({
hasBorders: true,
hasControls: true,
lockScalingFlip: true,
lockRotation: false,
centeredRotation: true,
cornerStyle: 'circle',
transparentCorners: false,
borderOpacityWhenMoving: 1,
cornerSize: 7,
padding: 10,
cornerStrokeColor: '#FFF',
cornerColor: '#FFF',
borderColor: '#FFF',
hoverCursor:'default',
centeredScaling: false,
editingBorderColor: '#92949c'
}).setControlsVisibility({
mtr: true, mt: false, mb: false, ml: true, mr: false, bl: false, br: false, tl: false, tr: false
});
this.canvas.renderAll();
}

Now when i try to scale the arrow group, I am scaling only arrowBody and unscaling the arrowHead like this:

var group = this.canvas.getActiveObject();
var arrowHead = group.getObjects()[1];
var groupScaleX = group.scaleX;
var groupScaleY = group.scaleY;

arrowHead.set({
scaleX: 1 / groupScaleX,
scaleY: 1 / groupScaleY
}).setCoords();

group.set({
shapeScaleX: groupScaleX,
shapeScaleY: groupScaleY
}).setCoords();

//Update the group (messes up the bounding box when rotated)
group.addWithUpdate();

this.canvas.renderAll();
this.detailObserver(group);

While this scaling works flawlessly and it scales only the arrow body but when i rotate my arrow group, and then try to scale the arrow body, the bounding box i turning into square and it skews the arrow instead of scaling arrow body.

Any idea what am i doing wrong?

[asturur]

please make examples editable if you want other people to get engaged and help you