fix: convert example to typescript to fix build; fit locked aspect ratio with least squares (#261)

* fix(example): convert example to typescript

* fix: fit locked aspect ratio with least squares

---------

Co-authored-by: Kevin Brey <Kevin.Brey@breakthroughfuel.com>

Author: manbearwiz

__tests__/Resizable.test.tsx

@@ -390,12 +390,13 @@ describe('render Resizable', () => {
           expect(props.onResize).not.toHaveBeenCalled();
           const seHandler = resizableRef.current.resizeHandler('onResize', 'se');
           seHandler(mockEvent, { node, deltaX: w, deltaY: h });
+          const expected = 50 + (w + h) / 2;
           expect(props.onResize).toHaveBeenLastCalledWith(
             mockEvent,
             expect.objectContaining({
               size: {
-                height: 50 + Math.max(w, h),
-                width: 50 + Math.max(w, h),
+                height: expected,
+                width: expected,
               },
             })
           );

examples/ExampleLayout.js examples/ExampleLayout.tsxexamples/ExampleLayout.js renamed to examples/ExampleLayout.tsx

@@ -1,9 +1,12 @@
 import React from 'react';
 import Resizable from '../lib/Resizable';
 import ResizableBox from '../lib/ResizableBox';
+import type {ResizeCallbackData} from '../lib/propTypes';
 import 'style-loader!css-loader!../css/styles.css';
 
-/* global __VERSION__, __GIT_TAG__, __GIT_COMMIT__ */
+declare const __VERSION__: string;
+declare const __GIT_TAG__: string;
+declare const __GIT_COMMIT__: string;
 
 // Update the version badge in the header
 function updateVersionBadge() {
@@ -23,7 +26,7 @@ if (typeof document !== 'undefined') {
   }
 }
 
-const CustomResizeHandle = React.forwardRef((props, ref) => {
+const CustomResizeHandle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & {handleAxis?: string}>((props, ref) => {
   const {handleAxis, ...restProps} = props;
   return (
     <div
@@ -34,8 +37,17 @@ const CustomResizeHandle = React.forwardRef((props, ref) => {
   );
 });
 
-export default class ExampleLayout extends React.Component<{}, {width: number, height: number}> {
-  state = {
+type State = {
+  width: number;
+  height: number;
+  absoluteWidth: number;
+  absoluteHeight: number;
+  absoluteLeft: number;
+  absoluteTop: number;
+};
+
+export default class ExampleLayout extends React.Component<{}, State> {
+  state: State = {
     width: 200,
     height: 200,
     absoluteWidth: 200,
@@ -49,12 +61,12 @@ export default class ExampleLayout extends React.Component<{}, {width: number, h
   };
 
   // On top layout
-  onFirstBoxResize = (event, {element, size, handle}) => {
+  onFirstBoxResize = (_event: React.SyntheticEvent, {size}: ResizeCallbackData) => {
     this.setState({width: size.width, height: size.height});
   };
 
   // On bottom layout. Used to resize the center element around its flex parent.
-  onResizeAbsolute = (event, {element, size, handle}) => {
+  onResizeAbsolute = (_event: React.SyntheticEvent, {size, handle}: ResizeCallbackData) => {
     this.setState((state) => {
       let newLeft = state.absoluteLeft;
       let newTop = state.absoluteTop;

examples/example.js examples/example.tsxexamples/example.js renamed to examples/example.tsx

@@ -41,18 +41,12 @@ export default class Resizable extends React.Component<Props, {}> {
     // If constraining to min and max, we need to also fit width and height to aspect ratio.
     if (lockAspectRatio) {
       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;
-      } else {
-        width = height * ratio;
-      }
+
+      // Project (width, height) onto the line w = ratio * h.
+      // Distributes tracking error across both axes instead of forcing one to overshoot.
+      // t = (w * ratio + h) / (ratio^2 + 1),  new_w = t * ratio,  new_h = t
+      height = (width * ratio + height) / (ratio * ratio + 1);
+      width = height * ratio;
     }
 
     const [oldW, oldH] = [width, height];

lib/Resizable.tsx

@@ -28,7 +28,7 @@ module.exports = {
   bail: isProduction,
   context: __dirname,
   entry: {
-    test: "./examples/example.js",
+    test: "./examples/example.tsx",
   },
   output: {
     path: path.join(__dirname, "examples"),