fix(lockAspectRatio): make logic shorter and more accurate

Added new tests to match
react-grid-layout · Jun 15, 2021 · 5bc6010 · 5bc6010
1 parent 8b99980
commit 5bc6010
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 12 deletions.
diff --git a/__tests__/Resizable.test.js b/__tests__/Resizable.test.js
@@ -288,7 +288,7 @@ describe('render Resizable', () => {
 
     describe('lockAspectRatio', () => {
 
-      [[5, 0], [0, 5]].forEach(([w, h]) => {
+      [[5, 0], [0, 5], [10, 5], [5, 10], [50, 51]].forEach(([w, h]) => {
         test(`drags with aspect ratio preserved w:${w} h:${h}`, () => {
           const element = shallow(<Resizable {...customProps} lockAspectRatio={true}>{resizableBoxChildren}</Resizable>);
           expect(props.onResize).not.toHaveBeenCalled();

diff --git a/examples/ExampleLayout.js b/examples/ExampleLayout.js
@@ -109,10 +109,10 @@ export default class ExampleLayout extends React.Component<{}, {width: number, h
           <ResizableBox className="box hover-handles" width={200} height={200} minConstraints={[150, 150]} maxConstraints={[500, 300]}>
             <span className="text">Resizable box with a handle that only appears on hover.</span>
           </ResizableBox>
-          <ResizableBox className="box" width={200} height={200} lockAspectRatio={true}>
+          <ResizableBox className="box" width={200} height={200} lockAspectRatio={true} resizeHandles={['sw', 'se', 'nw', 'ne', 'w', 'e', 'n', 's']}>
             <span className="text">Resizable square with a locked aspect ratio.</span>
           </ResizableBox>
-          <ResizableBox className="box" width={200} height={120} lockAspectRatio={true}>
+          <ResizableBox className="box" width={200} height={120} lockAspectRatio={true} resizeHandles={['sw', 'se', 'nw', 'ne', 'w', 'e', 'n', 's']}>
             <span className="text">Resizable rectangle with a locked aspect ratio.</span>
           </ResizableBox>
           <ResizableBox className="box" width={200} height={200} axis="x">

diff --git a/lib/Resizable.js b/lib/Resizable.js
@@ -41,17 +41,18 @@ export default class Resizable extends React.Component<Props, void> {
 
     // If constraining to min and max, we need to also fit width and height to aspect ratio.
     if (lockAspectRatio) {
-      const resizingHorizontally = height === this.props.height;
-      if (resizingHorizontally) {
-        const ratio = this.props.width / this.props.height;
+      const ratio = this.props.width / this.props.height;
+      const deltaW = width - this.props.width;
+      const deltaH = height - this.props.height;
+
+      // Find which coordinate was greater and should push the other toward it.
+      // E.g.:
+      // ratio = 1, deltaW = 10, deltaH = 5, deltaH should become 10.
+      // ratio = 2, deltaW = 10, deltaH = 6, deltaW should become 12.
+      if (Math.abs(deltaW) > Math.abs(deltaH * ratio)) {
         height = width / ratio;
-        width = height * ratio;
       } else {
-        // Take into account vertical resize with N/S handles on locked aspect
-        // ratio. Calculate the change height-first, instead of width-first
-        const ratio = this.props.height / this.props.width;
-        width = height / ratio;
-        height = width * ratio;
+        width = height * ratio;
       }
     }