re-resizable - npm Package Compare versions

Comparing version 6.9.18 to 6.10.0

lib/index.d.ts

@@ -59,2 +59,3 @@ import * as React from 'react';
     grid?: [number, number];
+    gridGap?: [number, number];
     snap?: {
@@ -136,2 +137,3 @@ x?: number[];
         grid: number[];
+        gridGap: number[];
         lockAspectRatio: boolean;
@@ -189,5 +191,5 @@ lockAspectRatioExtraWidth: number;
     updateSize(size: Size): void;
-    renderResizer(): JSX.Element | null;
+    renderResizer(directions: Direction[]): JSX.Element | null;
     render(): JSX.Element;
 }
 export {};

lib/index.es5.js

@@ -100,3 +100,6 @@ 'use strict';
 var clamp = function (n, min, max) { return Math.max(Math.min(n, max), min); };
-var snap = function (n, size) { return Math.round(n / size) * size; };
+var snap = function (n, size, gridGap) {
+    var v = Math.round(n / size);
+    return v * size + gridGap * (v - 1);
+};
 var hasDirection = function (dir, target) {
@@ -189,2 +192,3 @@ return new RegExp(dir, 'i').test(target);
     'grid',
+    'gridGap',
     'snap',
@@ -687,4 +691,4 @@ 'bounds',
         if (this.props.grid) {
-            var newGridWidth = snap(newWidth, this.props.grid[0]);
-            var newGridHeight = snap(newHeight, this.props.grid[1]);
+            var newGridWidth = snap(newWidth, this.props.grid[0], this.props.gridGap ? this.props.gridGap[0] : 0);
+            var newGridHeight = snap(newHeight, this.props.grid[1], this.props.gridGap ? this.props.gridGap[1] : 0);
             var gap = this.props.snapGap || 0;
@@ -780,3 +784,3 @@ var w = gap === 0 || Math.abs(newGridWidth - newWidth) <= gap ? newGridWidth : newWidth;
     };
-    Resizable.prototype.renderResizer = function () {
+    Resizable.prototype.renderResizer = function (directions) {
         var _this = this;
@@ -787,3 +791,5 @@ var _a = this.props, enable = _a.enable, handleStyles = _a.handleStyles, handleClasses = _a.handleClasses, handleWrapperStyle = _a.handleWrapperStyle, handleWrapperClass = _a.handleWrapperClass, handleComponent = _a.handleComponent;
         }
-        var resizers = Object.keys(enable).map(function (dir) {
+        var resizers = directions
+            .filter(function (dir) { return enable[dir] !== false; })
+            .map(function (dir) {
             if (enable[dir] !== false) {
@@ -820,4 +826,5 @@ return (React.createElement(Resizer, { key: dir, direction: dir, onResizeStart: _this.onResizeStart, replaceStyles: handleStyles && handleStyles[dir], className: handleClasses && handleClasses[dir] }, handleComponent && handleComponent[dir] ? handleComponent[dir] : null));
             this.state.isResizing && React.createElement("div", { style: this.state.backgroundStyle }),
+            this.renderResizer(['topLeft', 'top', 'topRight', 'left']),
             this.props.children,
-            this.renderResizer()));
+            this.renderResizer(['right', 'bottomLeft', 'bottom', 'bottomRight'])));
     };
@@ -841,2 +848,3 @@ Resizable.defaultProps = {
         grid: [1, 1],
+        gridGap: [0, 0],
         lockAspectRatio: false,
@@ -843,0 +851,0 @@ lockAspectRatioExtraWidth: 0,

lib/index.js

@@ -33,3 +33,6 @@ var __extends = (this && this.__extends) || (function () {
 var clamp = function (n, min, max) { return Math.max(Math.min(n, max), min); };
-var snap = function (n, size) { return Math.round(n / size) * size; };
+var snap = function (n, size, gridGap) {
+    var v = Math.round(n / size);
+    return v * size + gridGap * (v - 1);
+};
 var hasDirection = function (dir, target) {
@@ -122,2 +125,3 @@ return new RegExp(dir, 'i').test(target);
     'grid',
+    'gridGap',
     'snap',
@@ -620,4 +624,4 @@ 'bounds',
         if (this.props.grid) {
-            var newGridWidth = snap(newWidth, this.props.grid[0]);
-            var newGridHeight = snap(newHeight, this.props.grid[1]);
+            var newGridWidth = snap(newWidth, this.props.grid[0], this.props.gridGap ? this.props.gridGap[0] : 0);
+            var newGridHeight = snap(newHeight, this.props.grid[1], this.props.gridGap ? this.props.gridGap[1] : 0);
             var gap = this.props.snapGap || 0;
@@ -713,3 +717,3 @@ var w = gap === 0 || Math.abs(newGridWidth - newWidth) <= gap ? newGridWidth : newWidth;
     };
-    Resizable.prototype.renderResizer = function () {
+    Resizable.prototype.renderResizer = function (directions) {
         var _this = this;
@@ -720,3 +724,5 @@ var _a = this.props, enable = _a.enable, handleStyles = _a.handleStyles, handleClasses = _a.handleClasses, handleWrapperStyle = _a.handleWrapperStyle, handleWrapperClass = _a.handleWrapperClass, handleComponent = _a.handleComponent;
         }
-        var resizers = Object.keys(enable).map(function (dir) {
+        var resizers = directions
+            .filter(function (dir) { return enable[dir] !== false; })
+            .map(function (dir) {
             if (enable[dir] !== false) {
@@ -753,4 +759,5 @@ return (React.createElement(Resizer, { key: dir, direction: dir, onResizeStart: _this.onResizeStart, replaceStyles: handleStyles && handleStyles[dir], className: handleClasses && handleClasses[dir] }, handleComponent && handleComponent[dir] ? handleComponent[dir] : null));
             this.state.isResizing && React.createElement("div", { style: this.state.backgroundStyle }),
+            this.renderResizer(['topLeft', 'top', 'topRight', 'left']),
             this.props.children,
-            this.renderResizer()));
+            this.renderResizer(['right', 'bottomLeft', 'bottom', 'bottomRight'])));
     };
@@ -774,2 +781,3 @@ Resizable.defaultProps = {
         grid: [1, 1],
+        gridGap: [0, 0],
         lockAspectRatio: false,
@@ -776,0 +784,0 @@ lockAspectRatioExtraWidth: 0,

package.json

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

README.md

@@ -153,2 +153,7 @@ <p align="center"><img src ="https://github.com/bokuweb/re-resizable/blob/master/logo.png?raw=true" /></p>
 
+#### `gridGap?: [number, number];`
+
+The `gridGap` property is used to specify any gaps between your grid cells that should be accounted for when resizing. Defaults to `[0, 0]`.
+The value provided for each axis will always add the grid gap amount times grid cells spanned minus one.
+
 #### `snap?: { x?: Array<number>, y?: Array<number> };`
@@ -155,0 +160,0 @@

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

140237

increased by0.83%

Lines of code

2957

increased by0.61%

Number of lines in readme file

337

increased by1.51%

No dependency changes