re-resizable - npm Package Compare versions

Comparing version 4.0.3 to 4.1.0

lib/index.es5.js

@@ -341,3 +341,3 @@ 'use strict';
 
-var definedProps = ['style', 'className', 'grid', 'bounds', 'size', 'defaultSize', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight', 'lockAspectRatio', 'enable', 'handleStyles', 'handleClasses', 'handleWrapperStyle', 'handleWrapperClass', 'children', 'onResizeStart', 'onResize', 'onResizeStop'];
+var definedProps = ['style', 'className', 'grid', 'bounds', 'size', 'defaultSize', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight', 'lockAspectRatio', 'lockAspectRatioExtraWidth', 'lockAspectRatioExtraHeight', 'enable', 'handleStyles', 'handleClasses', 'handleWrapperStyle', 'handleWrapperClass', 'children', 'onResizeStart', 'onResize', 'onResizeStop'];
 
@@ -483,8 +483,11 @@ var Resizable = function (_React$Component) {
           height = _state.height;
-      var lockAspectRatio = this.props.lockAspectRatio;
       var _props = this.props,
-          maxWidth = _props.maxWidth,
-          maxHeight = _props.maxHeight,
-          minWidth = _props.minWidth,
-          minHeight = _props.minHeight;
+          lockAspectRatio = _props.lockAspectRatio,
+          lockAspectRatioExtraHeight = _props.lockAspectRatioExtraHeight,
+          lockAspectRatioExtraWidth = _props.lockAspectRatioExtraWidth;
+      var _props2 = this.props,
+          maxWidth = _props2.maxWidth,
+          maxHeight = _props2.maxHeight,
+          minWidth = _props2.minWidth,
+          minHeight = _props2.minHeight;
 
@@ -515,3 +518,3 @@ // TODO: refactor
 
-      var ratio = original.height / original.width;
+      var ratio = typeof lockAspectRatio === 'number' ? lockAspectRatio : original.width / original.height;
       var newWidth = original.width;
@@ -521,15 +524,15 @@ var newHeight = original.height;
         newWidth = original.width + (clientX - original.x);
-        if (lockAspectRatio) newHeight = newWidth * ratio;
+        if (lockAspectRatio) newHeight = (newWidth - lockAspectRatioExtraWidth) / ratio + lockAspectRatioExtraHeight;
       }
       if (/left/i.test(direction)) {
         newWidth = original.width - (clientX - original.x);
-        if (lockAspectRatio) newHeight = newWidth * ratio;
+        if (lockAspectRatio) newHeight = (newWidth - lockAspectRatioExtraWidth) / ratio + lockAspectRatioExtraHeight;
       }
       if (/bottom/i.test(direction)) {
         newHeight = original.height + (clientY - original.y);
-        if (lockAspectRatio) newWidth = newHeight / ratio;
+        if (lockAspectRatio) newWidth = (newHeight - lockAspectRatioExtraHeight) * ratio + lockAspectRatioExtraWidth;
       }
       if (/top/i.test(direction)) {
         newHeight = original.height - (clientY - original.y);
-        if (lockAspectRatio) newWidth = newHeight / ratio;
+        if (lockAspectRatio) newWidth = (newHeight - lockAspectRatioExtraHeight) * ratio + lockAspectRatioExtraWidth;
       }
@@ -586,6 +589,10 @@
       if (lockAspectRatio) {
-        var lockedMinWidth = computedMinWidth > computedMinHeight / ratio ? computedMinWidth : computedMinHeight / ratio;
-        var lockedMaxWidth = computedMaxWidth < computedMaxHeight / ratio ? computedMaxWidth : computedMaxHeight / ratio;
-        var lockedMinHeight = computedMinHeight > computedMinWidth * ratio ? computedMinHeight : computedMinWidth * ratio;
-        var lockedMaxHeight = computedMaxHeight < computedMaxWidth * ratio ? computedMaxHeight : computedMaxWidth * ratio;
+        var extraMinWidth = (computedMinHeight - lockAspectRatioExtraHeight) * ratio + lockAspectRatioExtraWidth;
+        var extraMaxWidth = (computedMaxHeight - lockAspectRatioExtraHeight) * ratio + lockAspectRatioExtraWidth;
+        var extraMinHeight = (computedMinWidth - lockAspectRatioExtraWidth) / ratio + lockAspectRatioExtraHeight;
+        var extraMaxHeight = (computedMaxWidth - lockAspectRatioExtraWidth) / ratio + lockAspectRatioExtraHeight;
+        var lockedMinWidth = Math.max(computedMinWidth, extraMinWidth);
+        var lockedMaxWidth = Math.min(computedMaxWidth, extraMaxWidth);
+        var lockedMinHeight = Math.max(computedMinHeight, extraMinHeight);
+        var lockedMaxHeight = Math.min(computedMaxHeight, extraMaxHeight);
         newWidth = clamp(newWidth, lockedMinWidth, lockedMaxWidth);
@@ -659,8 +666,8 @@ newHeight = clamp(newHeight, lockedMinHeight, lockedMaxHeight);
 
-      var _props2 = this.props,
-          enable = _props2.enable,
-          handleStyles = _props2.handleStyles,
-          handleClasses = _props2.handleClasses,
-          handleWrapperStyle = _props2.handleWrapperStyle,
-          handleWrapperClass = _props2.handleWrapperClass;
+      var _props3 = this.props,
+          enable = _props3.enable,
+          handleStyles = _props3.handleStyles,
+          handleClasses = _props3.handleClasses,
+          handleWrapperStyle = _props3.handleWrapperStyle,
+          handleWrapperClass = _props3.handleWrapperClass;
 
@@ -781,3 +788,5 @@ if (!enable) return null;
   grid: [1, 1],
-  lockAspectRatio: false
+  lockAspectRatio: false,
+  lockAspectRatioExtraWidth: 0,
+  lockAspectRatioExtraHeight: 0
 };
@@ -784,0 +793,0 @@

lib/index.js

@@ -339,3 +339,3 @@ import { Component, createElement } from 'react';
 
-var definedProps = ['style', 'className', 'grid', 'bounds', 'size', 'defaultSize', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight', 'lockAspectRatio', 'enable', 'handleStyles', 'handleClasses', 'handleWrapperStyle', 'handleWrapperClass', 'children', 'onResizeStart', 'onResize', 'onResizeStop'];
+var definedProps = ['style', 'className', 'grid', 'bounds', 'size', 'defaultSize', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight', 'lockAspectRatio', 'lockAspectRatioExtraWidth', 'lockAspectRatioExtraHeight', 'enable', 'handleStyles', 'handleClasses', 'handleWrapperStyle', 'handleWrapperClass', 'children', 'onResizeStart', 'onResize', 'onResizeStop'];
 
@@ -481,8 +481,11 @@ var Resizable = function (_React$Component) {
           height = _state.height;
-      var lockAspectRatio = this.props.lockAspectRatio;
       var _props = this.props,
-          maxWidth = _props.maxWidth,
-          maxHeight = _props.maxHeight,
-          minWidth = _props.minWidth,
-          minHeight = _props.minHeight;
+          lockAspectRatio = _props.lockAspectRatio,
+          lockAspectRatioExtraHeight = _props.lockAspectRatioExtraHeight,
+          lockAspectRatioExtraWidth = _props.lockAspectRatioExtraWidth;
+      var _props2 = this.props,
+          maxWidth = _props2.maxWidth,
+          maxHeight = _props2.maxHeight,
+          minWidth = _props2.minWidth,
+          minHeight = _props2.minHeight;
 
@@ -513,3 +516,3 @@ // TODO: refactor
 
-      var ratio = original.height / original.width;
+      var ratio = typeof lockAspectRatio === 'number' ? lockAspectRatio : original.width / original.height;
       var newWidth = original.width;
@@ -519,15 +522,15 @@ var newHeight = original.height;
         newWidth = original.width + (clientX - original.x);
-        if (lockAspectRatio) newHeight = newWidth * ratio;
+        if (lockAspectRatio) newHeight = (newWidth - lockAspectRatioExtraWidth) / ratio + lockAspectRatioExtraHeight;
       }
       if (/left/i.test(direction)) {
         newWidth = original.width - (clientX - original.x);
-        if (lockAspectRatio) newHeight = newWidth * ratio;
+        if (lockAspectRatio) newHeight = (newWidth - lockAspectRatioExtraWidth) / ratio + lockAspectRatioExtraHeight;
       }
       if (/bottom/i.test(direction)) {
         newHeight = original.height + (clientY - original.y);
-        if (lockAspectRatio) newWidth = newHeight / ratio;
+        if (lockAspectRatio) newWidth = (newHeight - lockAspectRatioExtraHeight) * ratio + lockAspectRatioExtraWidth;
       }
       if (/top/i.test(direction)) {
         newHeight = original.height - (clientY - original.y);
-        if (lockAspectRatio) newWidth = newHeight / ratio;
+        if (lockAspectRatio) newWidth = (newHeight - lockAspectRatioExtraHeight) * ratio + lockAspectRatioExtraWidth;
       }
@@ -584,6 +587,10 @@
       if (lockAspectRatio) {
-        var lockedMinWidth = computedMinWidth > computedMinHeight / ratio ? computedMinWidth : computedMinHeight / ratio;
-        var lockedMaxWidth = computedMaxWidth < computedMaxHeight / ratio ? computedMaxWidth : computedMaxHeight / ratio;
-        var lockedMinHeight = computedMinHeight > computedMinWidth * ratio ? computedMinHeight : computedMinWidth * ratio;
-        var lockedMaxHeight = computedMaxHeight < computedMaxWidth * ratio ? computedMaxHeight : computedMaxWidth * ratio;
+        var extraMinWidth = (computedMinHeight - lockAspectRatioExtraHeight) * ratio + lockAspectRatioExtraWidth;
+        var extraMaxWidth = (computedMaxHeight - lockAspectRatioExtraHeight) * ratio + lockAspectRatioExtraWidth;
+        var extraMinHeight = (computedMinWidth - lockAspectRatioExtraWidth) / ratio + lockAspectRatioExtraHeight;
+        var extraMaxHeight = (computedMaxWidth - lockAspectRatioExtraWidth) / ratio + lockAspectRatioExtraHeight;
+        var lockedMinWidth = Math.max(computedMinWidth, extraMinWidth);
+        var lockedMaxWidth = Math.min(computedMaxWidth, extraMaxWidth);
+        var lockedMinHeight = Math.max(computedMinHeight, extraMinHeight);
+        var lockedMaxHeight = Math.min(computedMaxHeight, extraMaxHeight);
         newWidth = clamp(newWidth, lockedMinWidth, lockedMaxWidth);
@@ -657,8 +664,8 @@ newHeight = clamp(newHeight, lockedMinHeight, lockedMaxHeight);
 
-      var _props2 = this.props,
-          enable = _props2.enable,
-          handleStyles = _props2.handleStyles,
-          handleClasses = _props2.handleClasses,
-          handleWrapperStyle = _props2.handleWrapperStyle,
-          handleWrapperClass = _props2.handleWrapperClass;
+      var _props3 = this.props,
+          enable = _props3.enable,
+          handleStyles = _props3.handleStyles,
+          handleClasses = _props3.handleClasses,
+          handleWrapperStyle = _props3.handleWrapperStyle,
+          handleWrapperClass = _props3.handleWrapperClass;
 
@@ -779,3 +786,5 @@ if (!enable) return null;
   grid: [1, 1],
-  lockAspectRatio: false
+  lockAspectRatio: false,
+  lockAspectRatioExtraWidth: 0,
+  lockAspectRatioExtraHeight: 0
 };
@@ -782,0 +791,0 @@

lib/re-resizable.umd.js

@@ -343,3 +343,3 @@ (function (global, factory) {
 
-var definedProps = ['style', 'className', 'grid', 'bounds', 'size', 'defaultSize', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight', 'lockAspectRatio', 'enable', 'handleStyles', 'handleClasses', 'handleWrapperStyle', 'handleWrapperClass', 'children', 'onResizeStart', 'onResize', 'onResizeStop'];
+var definedProps = ['style', 'className', 'grid', 'bounds', 'size', 'defaultSize', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight', 'lockAspectRatio', 'lockAspectRatioExtraWidth', 'lockAspectRatioExtraHeight', 'enable', 'handleStyles', 'handleClasses', 'handleWrapperStyle', 'handleWrapperClass', 'children', 'onResizeStart', 'onResize', 'onResizeStop'];
 
@@ -485,8 +485,11 @@ var Resizable = function (_React$Component) {
           height = _state.height;
-      var lockAspectRatio = this.props.lockAspectRatio;
       var _props = this.props,
-          maxWidth = _props.maxWidth,
-          maxHeight = _props.maxHeight,
-          minWidth = _props.minWidth,
-          minHeight = _props.minHeight;
+          lockAspectRatio = _props.lockAspectRatio,
+          lockAspectRatioExtraHeight = _props.lockAspectRatioExtraHeight,
+          lockAspectRatioExtraWidth = _props.lockAspectRatioExtraWidth;
+      var _props2 = this.props,
+          maxWidth = _props2.maxWidth,
+          maxHeight = _props2.maxHeight,
+          minWidth = _props2.minWidth,
+          minHeight = _props2.minHeight;
 
@@ -517,3 +520,3 @@ // TODO: refactor
 
-      var ratio = original.height / original.width;
+      var ratio = typeof lockAspectRatio === 'number' ? lockAspectRatio : original.width / original.height;
       var newWidth = original.width;
@@ -523,15 +526,15 @@ var newHeight = original.height;
         newWidth = original.width + (clientX - original.x);
-        if (lockAspectRatio) newHeight = newWidth * ratio;
+        if (lockAspectRatio) newHeight = (newWidth - lockAspectRatioExtraWidth) / ratio + lockAspectRatioExtraHeight;
       }
       if (/left/i.test(direction)) {
         newWidth = original.width - (clientX - original.x);
-        if (lockAspectRatio) newHeight = newWidth * ratio;
+        if (lockAspectRatio) newHeight = (newWidth - lockAspectRatioExtraWidth) / ratio + lockAspectRatioExtraHeight;
       }
       if (/bottom/i.test(direction)) {
         newHeight = original.height + (clientY - original.y);
-        if (lockAspectRatio) newWidth = newHeight / ratio;
+        if (lockAspectRatio) newWidth = (newHeight - lockAspectRatioExtraHeight) * ratio + lockAspectRatioExtraWidth;
       }
       if (/top/i.test(direction)) {
         newHeight = original.height - (clientY - original.y);
-        if (lockAspectRatio) newWidth = newHeight / ratio;
+        if (lockAspectRatio) newWidth = (newHeight - lockAspectRatioExtraHeight) * ratio + lockAspectRatioExtraWidth;
       }
@@ -588,6 +591,10 @@
       if (lockAspectRatio) {
-        var lockedMinWidth = computedMinWidth > computedMinHeight / ratio ? computedMinWidth : computedMinHeight / ratio;
-        var lockedMaxWidth = computedMaxWidth < computedMaxHeight / ratio ? computedMaxWidth : computedMaxHeight / ratio;
-        var lockedMinHeight = computedMinHeight > computedMinWidth * ratio ? computedMinHeight : computedMinWidth * ratio;
-        var lockedMaxHeight = computedMaxHeight < computedMaxWidth * ratio ? computedMaxHeight : computedMaxWidth * ratio;
+        var extraMinWidth = (computedMinHeight - lockAspectRatioExtraHeight) * ratio + lockAspectRatioExtraWidth;
+        var extraMaxWidth = (computedMaxHeight - lockAspectRatioExtraHeight) * ratio + lockAspectRatioExtraWidth;
+        var extraMinHeight = (computedMinWidth - lockAspectRatioExtraWidth) / ratio + lockAspectRatioExtraHeight;
+        var extraMaxHeight = (computedMaxWidth - lockAspectRatioExtraWidth) / ratio + lockAspectRatioExtraHeight;
+        var lockedMinWidth = Math.max(computedMinWidth, extraMinWidth);
+        var lockedMaxWidth = Math.min(computedMaxWidth, extraMaxWidth);
+        var lockedMinHeight = Math.max(computedMinHeight, extraMinHeight);
+        var lockedMaxHeight = Math.min(computedMaxHeight, extraMaxHeight);
         newWidth = clamp(newWidth, lockedMinWidth, lockedMaxWidth);
@@ -661,8 +668,8 @@ newHeight = clamp(newHeight, lockedMinHeight, lockedMaxHeight);
 
-      var _props2 = this.props,
-          enable = _props2.enable,
-          handleStyles = _props2.handleStyles,
-          handleClasses = _props2.handleClasses,
-          handleWrapperStyle = _props2.handleWrapperStyle,
-          handleWrapperClass = _props2.handleWrapperClass;
+      var _props3 = this.props,
+          enable = _props3.enable,
+          handleStyles = _props3.handleStyles,
+          handleClasses = _props3.handleClasses,
+          handleWrapperStyle = _props3.handleWrapperStyle,
+          handleWrapperClass = _props3.handleWrapperClass;
 
@@ -783,3 +790,5 @@ if (!enable) return null;
   grid: [1, 1],
-  lockAspectRatio: false
+  lockAspectRatio: false,
+  lockAspectRatioExtraWidth: 0,
+  lockAspectRatioExtraHeight: 0
 };
@@ -786,0 +795,0 @@

package.json

 {
   "name": "re-resizable",
-  "version": "4.0.3",
+  "version": "4.1.0",
   "description": "Resizable component for React.",
@@ -5,0 +5,0 @@ "title": "re-resizable",

README.md

@@ -8,7 +8,7 @@ <p align="center"><img src ="https://github.com/bokuweb/re-resizable/blob/master/logo.png?raw=true" /></p>
 <a href="https://www.npmjs.com/package/re-resizable">
-<img src="https://img.shields.io/npm/v/re-resizable.svg" alt="Build Status" /></a> 
+<img src="https://img.shields.io/npm/v/re-resizable.svg" alt="Build Status" /></a>
 <a href="https://www.npmjs.com/package/re-resizable">
-<img src="https://img.shields.io/npm/dm/re-resizable.svg" /></a> 
+<img src="https://img.shields.io/npm/dm/re-resizable.svg" /></a>
 <a href="https://greenkeeper.io/">
-<img src="https://badges.greenkeeper.io/bokuweb/re-resizable.svg" /></a> 
+<img src="https://badges.greenkeeper.io/bokuweb/re-resizable.svg" /></a>
 </p>
@@ -31,3 +31,3 @@
 ![screenshot](https://github.com/bokuweb/re-resizable/blob/master/docs/screenshot.gif?raw=true)
-   
+
 ## Install
@@ -75,5 +75,5 @@
 Specifies the `width` and `height` that the dragged item should start at.
-For example, you can set `300`, `'300px'`, `50%`.   
-If both `defaultSize` and `size` omitted, set `'auto'`.    
-    
+For example, you can set `300`, `'300px'`, `50%`.
+If both `defaultSize` and `size` omitted, set `'auto'`.
+
 `defaultSize` will be ignored when `size` set.
@@ -83,6 +83,6 @@
 
-The `size` property is used to set the size of the component.   
-For example, you can set `300`, `'300px'`, `50%`.   
+The `size` property is used to set the size of the component.
+For example, you can set `300`, `'300px'`, `50%`.
 
-Use `size` if you need to control size state by yourself.    
+Use `size` if you need to control size state by yourself.
 
@@ -96,3 +96,3 @@ #### `className?: string;`
 The `style` property is used to set the custom `style` of a resizable component.
-   
+
 #### `minWidth?: number | string;`
@@ -118,7 +118,22 @@
 
-#### `lockAspectRatio?: boolean;`
+#### `lockAspectRatio?: boolean | number;`
 
 The `lockAspectRatio` property is used to lock aspect ratio.
+Set to `true` to lock the aspect ratio based on the initial size.
+Set to a numeric value to lock a specific aspect ratio (such as `16/9`).
+If set to numeric, make sure to set initial height/width to values with correct aspect ratio.
 If omitted, set `false`.
 
+#### `lockAspectRatioExtraWidth?: number;`
+
+The `lockAspectRatioExtraWidth` property enables a resizable component to maintain an aspect ratio plus extra width.
+For instance, a video could be displayed 16:9 with a 50px side bar.
+If omitted, set `0`.
+
+#### `lockAspectRatioExtraHeight?: number;`
+
+The `lockAspectRatioExtraHeight` property enables a resizable component to maintain an aspect ratio plus extra height.
+For instance, a video could be displayed 16:9 with a 50px header bar.
+If omitted, set `0`.
+
 #### `bounds?: ('window' | 'parent' | HTMLElement);`
@@ -153,3 +168,3 @@
 If omitted, all resizer are enabled.
-If you want to permit only right direction resizing, set `{ top:false, right:true, bottom:false, left:false, topRight:false, bottomRight:false, bottomLeft:false, topLeft:false }`. 
+If you want to permit only right direction resizing, set `{ top:false, right:true, bottom:false, left:false, topRight:false, bottomRight:false, bottomLeft:false, topLeft:false }`.
 
@@ -215,7 +230,7 @@ #### `onResizeStart?: ResizeStartCallBack;`
   ...
-  
+
   update() {
     this.resizable.updateSize({ width: 200, height: 300 });
   }
-  
+
   render() {
@@ -256,2 +271,6 @@ return (
 
+#### v4.0.3
+
+- Use ES5-compatible prototype methods #160
+
 #### v4.0.2
@@ -333,3 +352,3 @@
 - Use `border-box`.
-- Fix boundary size. 
+- Fix boundary size.
 
@@ -440,3 +459,3 @@ #### v2.0.1
 - Support react v15
-- ESLint run when push  
+- ESLint run when push
 
@@ -443,0 +462,0 @@ #### v0.4.1

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

239055

increased by4.05%

Lines of code

2114

increased by1.29%

Number of lines in readme file

471

increased by4.2%

No dependency changes