The latest updates on your projects. Learn more about Vercel for Git ↗︎

@ryan-di what about adding aspect ratio. It's useful when drawing device frames, and will be especially useful once we ship frames.

Code:

function greatestCommonDenominator(a: number, b: number): number {
  if (b === 0) {
    return a;
  }
  return greatestCommonDenominator(b, a % b);
}

function isMaxTwoDigit(a: number) {
  return a >= 1 && a <= 99;
}

function findRatioOrFraction(width: number, height: number) {
  // round because with excalidraw's imprecise bounding box, even in grid mode,
  // coupled with floating point rounding errors, we'd rarely get a perfect
  // aspect ratio
  width = Math.round(width);
  height = Math.round(height);
  const greatestCommonDivisor = greatestCommonDenominator(width, height);
  const simplifiedWidth = Math.round(width / greatestCommonDivisor);
  const simplifiedHeight = Math.round(height / greatestCommonDivisor);

  // we want to display in W:H format only if both W and H are <= 2 digits
  if (isMaxTwoDigit(simplifiedWidth) && isMaxTwoDigit(simplifiedHeight)) {
    return `${simplifiedWidth}:${simplifiedHeight}`;
  }
  return (width / height).toPrecision(3);
}

<tr>
  <td>Aspect ratio</td>
  <td>
    {findRatioOrFraction(
      selectedBoundingBox[2] - selectedBoundingBox[0],
      selectedBoundingBox[3] - selectedBoundingBox[1],
    )}
  </td>
</tr>

What's left to figure out is how editing works.

Might be problematic for multi-selection. We'd have to disable non-proportional aspect ratio change with multi-selection as we don't allow non-proportional resize in the editor. With proportional resize it could be as easy as doing a multi-selection resize manually. EDIT: that's actually a no-op. So unless we implement #5423, we need to disable editing aspect ratio for multi-selection.

Hi! :) Any news on this? Can this be picked up or is this not good anymore?

We initially hit some roadblocks that required more changes/refactor elsewhere. Should be more or less unblocked now, though we bumped down in priority. We may restart the effort soon.

@ryan-di if we align the width/height change behavior with the behavior from side-resizing, that should simplify things a lot. Were there any other issues you were facing?

@dwelle there was also a lack of geometric helpers iirc. Agree with you that we should be a in a much better position to pick this up without much resistance 👍

Nice, thanks @ryan-di @dwelle . Actually for us Radius change would be the most important as that's the only property from the ones mentioned that can't be changed from UI. Huge plus if there's an option to change each 4 corners separately. I would say there's no need implement the drag pointer like in figma, a simple number text/number input would be enough for most users.
(#3600)

Right now we have to use a rectangle and two circles to do rouned rectangles. Very difficult to use bc you can't have a stroke, and can't change height/width dynamically.

Todos:

• drag to change a rotated element's width and height correctly
• when changing an element's width or height using the input value, fix the origin
• add support for custom font size
• add support for min width
• disable properties that are not editable for the selected element
• record history properly
• shift to change the step size
• multiple elements resize

When will this be available as part of npm package.
Currently, the latest stable version I am seeing is 0.17.6. It was updated 2 months ago.