How to preserve aspect ratio during element resize?

Question

I have a custom element that has shape of an ellipse:

{
  size: { width: 160, height: 80 },
  attrs: {
    body: {
      refCx: '50%',
      refCy: '50%',
      refRx: '50%',
      refRy: '50%',
      width: 'calc(w)',
      strokeWidth: 2,
      stroke: '#333333',
      fill: '#FFFFFF'
    },
    label: {
      textVerticalAnchor: 'middle',
      textAnchor: 'middle',
      refX: '50%',
      refY: '50%',
      fontSize: 14,
      fill: '#333333'
    }
  }
}

markup = [{
  tagName: 'ellipse',
  selector: 'body'
}, {
  tagName: 'text',
  selector: 'label'
}]

I have enabled ui.Halo on elements to allow user to resize them. Problem is that by using Halo resizing user can change the shape of an ellipse to circle. How can I preserve aspect ration during resizing so that ellipse will be always ellipse with a 2:1 aspect ration?

Answer 1

If it is just preserveAspectRatio you are looking for, maybe ui.FreeTransform would be a better choice. It has a preserveAspectRatio option built-in, so your ellipse would maintain its sizing.