added grid gap prop to support adding any gaps to width/height (#823)

Author: alexiz10

README.md

@@ -150,6 +150,11 @@ The `maxHeight` property is used to set the maximum height of a resizable compon
 
 The `grid` property is used to specify the increments that resizing should snap to. Defaults to `[1, 1]`.
 
+#### `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> };`
 
 The `snap` property is used to specify absolute pixel values that resizing should snap to. `x` and `y` are both optional, allowing you to only include the axis you want to define. Defaults to `null`.

src/index.tsx

@@ -82,6 +82,7 @@ export interface ResizableProps {
   style?: React.CSSProperties;
   className?: string;
   grid?: [number, number];
+  gridGap?: [number, number];
   snap?: {
     x?: number[];
     y?: number[];
@@ -129,7 +130,11 @@ interface State {
 }
 
 const clamp = (n: number, min: number, max: number): number => Math.max(Math.min(n, max), min);
-const snap = (n: number, size: number): number => Math.round(n / size) * size;
+const snap = (n: number, size: number, gridGap: number): number => {
+  const v = Math.round(n / size);
+
+  return v * size + gridGap * (v - 1);
+};
 const hasDirection = (dir: 'top' | 'right' | 'bottom' | 'left', target: string): boolean =>
   new RegExp(dir, 'i').test(target);
 
@@ -242,6 +247,7 @@ const definedProps = [
   'style',
   'className',
   'grid',
+  'gridGap',
   'snap',
   'bounds',
   'boundsByDirection',
@@ -373,6 +379,7 @@ export class Resizable extends React.PureComponent<ResizableProps, State> {
     },
     style: {},
     grid: [1, 1],
+    gridGap: [0, 0],
     lockAspectRatio: false,
     lockAspectRatioExtraWidth: 0,
     lockAspectRatioExtraHeight: 0,
@@ -803,8 +810,8 @@ export class Resizable extends React.PureComponent<ResizableProps, State> {
     newHeight = newSize.newHeight;
 
     if (this.props.grid) {
-      const newGridWidth = snap(newWidth, this.props.grid[0]);
-      const newGridHeight = snap(newHeight, this.props.grid[1]);
+      const newGridWidth = snap(newWidth, this.props.grid[0], this.props.gridGap ? this.props.gridGap[0] : 0);
+      const newGridHeight = snap(newHeight, this.props.grid[1], this.props.gridGap ? this.props.gridGap[1] : 0);
       const gap = this.props.snapGap || 0;
       const w = gap === 0 || Math.abs(newGridWidth - newWidth) <= gap ? newGridWidth : newWidth;
       const h = gap === 0 || Math.abs(newGridHeight - newHeight) <= gap ? newGridHeight : newHeight;

stories/grid.stories.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { Resizable } from '../src';
+import { storiesOf } from '@storybook/react';
+import { style } from './style';
+
+const cell: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '100px',
+  height: '50px',
+  backgroundColor: '#f8f8f8',
+  border: '1px solid #f0f0f0',
+  boxSizing: 'border-box',
+};
+
+const container: React.CSSProperties = {
+  display: 'flex',
+  gap: '3px',
+};
+
+const verticalContainer: React.CSSProperties = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '3px',
+};
+
+storiesOf('grid', module)
+  .add('default', () => (
+    <Resizable
+      style={style}
+      grid={[100, 100]}
+      defaultSize={{ width: 100, height: 100 }}
+      onResize={a => {
+        console.log(a);
+      }}
+    >
+      001
+    </Resizable>
+  ))
+  .add('grid gap', () => (
+    <div style={container}>
+      <div style={verticalContainer}>
+        <div style={cell} />
+        {Array.from({ length: 3 }, (_, idx) => (
+          <div style={cell}>h: 50px</div>
+        ))}
+      </div>
+      <div style={verticalContainer}>
+        <div style={container}>
+          {Array.from({ length: 3 }, (_, idx) => (
+            <div key={idx} style={cell}>
+              w: 100px
+            </div>
+          ))}
+        </div>
+        <Resizable
+          style={style}
+          grid={[100, 50]}
+          gridGap={[3, 3]}
+          defaultSize={{ width: 100, height: 50 }}
+          maxWidth={306}
+          maxHeight={156}
+          enable={{
+            top: false,
+            topRight: false,
+            right: true,
+            bottomRight: true,
+            bottom: true,
+            bottomLeft: false,
+            left: false,
+            topLeft: false,
+          }}
+          onResize={a => {
+            console.log(a);
+          }}
+        >
+          001
+        </Resizable>
+      </div>
+    </div>
+  ));