Scaling via FreeTransform based on child elements.

[VictorPulzz]

Introduction

I faced a problem where it was not very clear how to correctly set minWidth and minHeight so that my Swimlane (rectangle) could only shrink to the nearest descendant with indentation. And never cross them. I don't really understand how to calculate this correctly. I need to understand where the rectangle of descendants (inflate) is located, then somehow understand that the width/height is less than Swimlane and I can reduce it to a certain limit...
I saw that this is implemented in the bpmn part, I would like to understand how...

export function getMinSizeByChildren(
  graph: dia.Graph,
  swimlane: dia.Element,
  offset = OFFSET_CHILDREN,
) {
  const embeds = swimlane.getEmbeddedCells();
  const currentBBox = swimlane.getBBox();
  const getCells = graph.getCellsBBox(embeds);

  if (getCells && embeds.length) {
    return getCells.inflate(offset);
  }

  const { width, height } = SHAPE_BOX_SIZES[ShapeNamesEnum.SWIMLANE];
  return new g.Rect(currentBBox.x, currentBBox.y, width, height);
}

export function createTransformBuilder(
  graph: dia.Graph,
  paper: dia.Paper,
  elementView: dia.ElementView,
  minWidth?: ui.FreeTransform.SizeConstraint,
  minHeight?: ui.FreeTransform.SizeConstraint,
) {
  const freeTransform = new ui.FreeTransform({
    graph,
    paper,
    cell: elementView.model,
    padding: 4,
    allowRotation: false,
    minWidth,
    minHeight,
    allowOrthogonalResize: false,
  });
  freeTransform.render();

  return freeTransform;
}

const childrenBBox = getMinSizeByChildren(graph, cellView.model);
      createTransformBuilder(
        graph,
        paper,
        cellView,
        (swimlane, _, direction) => {
          const currentBBox = swimlane.getBBox();
          switch (direction) {
            case 'bottom-left':
            case 'top-left': {
              const children = cellView.model.getEmbeddedCells();
              const childBBox = children.reduce(
                (bbox, child) => {
                  const childRect = child.getBBox();
                  return bbox.union(childRect);
                },
                new g.Rect(0, 0, 0, 0),
              );

              const swimlaneBBox = swimlane.getBBox();
              const { sx, sy } = swimlaneBBox.maxRectScaleToFit(childBBox);
              return 1;
            }
            default: {
              return childrenBBox.width;
            }
          }
        },
        childrenBBox.height,
      ).on('resize:stop', event => {
        paper.trigger('element:freetransform:resize:stop', args[1], event);
      });

Steps to reproduce

No response

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS+

[VictorPulzz]

I solved it:
my be help somebody:

export function getMinSizeByChildren(
  graph: dia.Graph,
  cell: dia.Cell,
  offset = OFFSET_CHILDREN,
) {
  const embeds = cell.getEmbeddedCells();
  const currentBBox = cell.getBBox();
  const getCells = graph.getCellsBBox(embeds);

  if (getCells && embeds.length) {
    return getCells.inflate(offset);
  }

  const { width, height } = DEFAULT_SIZE;
  return new g.Rect(currentBBox.x, currentBBox.y, width, height);
}

minWidth: (cell, __, direction) => {
          const cellBBox = cell.getBBox();
          const childrenBBox = getMinSizeByChildren(graph, cell);

          const cellLeft = cellBBox.x;
          const cellRight = cellBBox.x + cellBBox.width;
          const childLeft = childrenBBox.x;
          const childRight = childrenBBox.x + childrenBBox.width;

          if (['left', 'top-left', 'bottom-left'].includes(direction)) {
            return Math.max(MIN_WIDTH, Math.round(cellRight - childLeft));
          }

          if (['right', 'top-right', 'bottom-right'].includes(direction)) {
            return Math.max(MIN_WIDTH, Math.round(childRight - cellLeft));
          }

          return Math.max(MIN_WIDTH, Math.round(childrenBBox.width));
        },
minHeight:        (cell, __, direction) => {
          const cellBBox = cell.getBBox();
          const childrenBBox = getMinSizeByChildren(graph, cell);

          const cellTop = cellBBox.y;
          const cellBottom = cellBBox.y + cellBBox.height;
          const childTop = childrenBBox.y;
          const childBottom = childrenBBox.y + childrenBBox.height;

          if (['top', 'top-left', 'top-right'].includes(direction)) {
            return Math.max(MIN_HEIGHT, Math.round(cellBottom - childTop));
          }

          if (['bottom', 'bottom-left', 'bottom-right'].includes(direction)) {
            return Math.max(MIN_HEIGHT, Math.round(childBottom - cellTop));
          }

          return Math.max(MIN_HEIGHT, Math.round(childrenBBox.height));
        },