Fabric.js: Keep object positions fixed when rescaling group

Question

I am trying to generate a group where some elements should stick at their same size AND position (as seen from the groups's edgs).

I figured the size issue. However, I am failing to get a fully working solution for keeping the positions the same. Here is my current approach:

http://jsfiddle.net/on7kujhs/111/

let originalX = e.originalLeft + e.width / 2, // my true left of my center, relative to group
          percentageX = 0.5 + originalX / target.width, // how much I will change my position in percent. zero if originalX is exactly the same as half the width, one if im at right edge
          totalChangeX = (target.scaleX - 1) * target.width / 2, // how much the center shifts
          myMovX = percentageX * totalChangeX; // how much I moved to the right

        if (e.groupedScaleOriginX === 'left') {
          e.left = e.originalLeft - myMovX;
        } else if (e.groupedScaleOriginX === 'right') {
          e.left = e.originalLeft + totalChangeX * (1 - percentageX);
        }

Answer 1

I think I figured it out.

http://jsfiddle.net/y3o7Lwn6/27/

The key is saving all objects positions relative to the groups borders and modifying them on scaling, as well as saving the true top/left positions relative to the groups top left border:

  let dX = (tr.scaleX - 1) / tr.scaleX; 
  let dY = (tr.scaleY - 1) / tr.scaleY; 

  if (e.groupedScaleOriginX == 'left') {
    e.left = e.originalLeft - dX * e.trueLeft;
  } else if (e.groupedScaleOriginX == 'right') {
    e.left = e.originalLeft - dX * e.trueRight;
  }
  if (e.groupedScaleOriginY == 'top') {
    e.top = e.originalTop - dY * e.trueTop;
  } else if (e.groupedScaleOriginY == 'bottom') {
    e.top = e.originalTop - dY * e.trueBottom;
  }