Merge branch 'master' of https://github.com/bokuweb/re-resizable

bokuweb · Nov 16, 2018 · 2c60570 · 2c60570
2 parents 88cb971 + ead4b73
commit 2c60570
Show file tree

Hide file tree

Showing 7 changed files with 121 additions and 58 deletions.
diff --git a/README.md b/README.md
@@ -207,6 +207,10 @@ Calls when resizable component resize start.
 
 #### `onResize?: ResizeCallback;`
 
+#### `scale?: number`;
+
+The `scale` property is used in the scenario where the resizable element is a descendent of an element using css scaling (e.g. - `transform: scale(0.5)`).
+
 ### Basic
 
 `ResizeCallback` type is below.

diff --git a/package.json b/package.json
@@ -56,28 +56,28 @@
  "cross-env": "5.2.0",
  "eslint": "4.19.1",
  "eslint-config-airbnb": "16.1.0",
- "eslint-plugin-flowtype": "3.0.0",
+ "eslint-plugin-flowtype": "3.2.0",
  "eslint-plugin-import": "2.14.0",
  "eslint-plugin-jsx-a11y": "6.1.2",
  "eslint-plugin-react": "7.11.1",
- "flow-bin": "0.84.0",
+ "flow-bin": "0.85.0",
  "flow-copy-source": "2.0.2",
  "flow-typed": "2.5.1",
  "gh-pages": "2.0.1",
  "npm-run-all": "4.1.3",
- "prettier": "1.14.3",
+ "prettier": "1.15.1",
  "prettier-eslint": "8.8.2",
  "prettier-eslint-cli": "4.7.1",
- "react": "16.6.0",
- "react-dom": "16.6.0",
+ "react": "16.6.1",
+ "react-dom": "16.6.1",
  "rollup": "0.65.2",
  "rollup-plugin-babel": "3.0.7",
  "rollup-plugin-commonjs": "9.2.0",
- "rollup-plugin-node-globals": "1.2.1",
+ "rollup-plugin-node-globals": "1.4.0",
  "rollup-plugin-node-resolve": "3.3.0",
  "rollup-plugin-replace": "2.1.0",
  "rollup-watch": "4.3.1",
- "sinon": "7.1.0"
+ "sinon": "7.1.1"
  },
  "typings": "./index.d.ts",
  "files": [

diff --git a/src/index.js b/src/index.js
@@ -120,6 +120,7 @@ export type ResizableProps = {
  onResize?: ResizeCallback,
  onResizeStop?: ResizeCallback,
  defaultSize?: Size,
+ scale: number
 };
 
 type State = {
@@ -180,6 +181,7 @@ const definedProps = [
  'onResize',
  'onResizeStop',
  'handleComponent',
+ 'scale',
 ];
 
 const baseClassName = '__resizable_base__';
@@ -211,6 +213,7 @@ export default class Resizable extends React.Component<ResizableProps, State> {
  lockAspectRatio: false,
  lockAspectRatioExtraWidth: 0,
  lockAspectRatioExtraHeight: 0,
+ scale: 1,
  };
 
  constructor(props: ResizableProps) {
@@ -408,7 +411,7 @@ export default class Resizable extends React.Component<ResizableProps, State> {
  const clientX = event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
  const clientY = event instanceof MouseEvent ? event.clientY : event.touches[0].clientY;
  const { direction, original, width, height } = this.state;
- const { lockAspectRatio, lockAspectRatioExtraHeight, lockAspectRatioExtraWidth } = this.props;
+ const { lockAspectRatio, lockAspectRatioExtraHeight, lockAspectRatioExtraWidth, scale } = this.props;
  let { maxWidth, maxHeight, minWidth, minHeight } = this.props;
 
  // TODO: refactor
@@ -438,19 +441,19 @@ export default class Resizable extends React.Component<ResizableProps, State> {
  let newWidth = original.width;
  let newHeight = original.height;
  if (/right/i.test(direction)) {
- newWidth = original.width + (clientX - original.x);
+ newWidth = original.width + ((clientX - original.x) / scale);
  if (lockAspectRatio) newHeight = (newWidth - lockAspectRatioExtraWidth) / ratio + lockAspectRatioExtraHeight;
  }
  if (/left/i.test(direction)) {
- newWidth = original.width - (clientX - original.x);
+ newWidth = original.width - ((clientX - original.x) / scale);
  if (lockAspectRatio) newHeight = (newWidth - lockAspectRatioExtraWidth) / ratio + lockAspectRatioExtraHeight;
  }
  if (/bottom/i.test(direction)) {
- newHeight = original.height + (clientY - original.y);
+ newHeight = original.height + ((clientY - original.y) / scale);
  if (lockAspectRatio) newWidth = (newHeight - lockAspectRatioExtraHeight) * ratio + lockAspectRatioExtraWidth;
  }
  if (/top/i.test(direction)) {
- newHeight = original.height - (clientY - original.y);
+ newHeight = original.height - ((clientY - original.y) / scale);
  if (lockAspectRatio) newWidth = (newHeight - lockAspectRatioExtraHeight) * ratio + lockAspectRatioExtraWidth;
  }
 

diff --git a/stories/index.js b/stories/index.js
@@ -37,6 +37,8 @@ import MultipleHorizontal from './multiple/horizontal';
 
 import Nested from './nested/nested';
 
+import Scaled from './scaled/scaled';
+
 storiesOf('omit size', module)
  .add('auto.', () => <Auto />)
 
@@ -76,3 +78,6 @@ storiesOf('multiple', module)
 
 storiesOf('nested', module)
  .add('nested', () => <Nested />)
+
+storiesOf('scaled', module)
+ .add('scaled', () => <Scaled />)
diff --git a/stories/scaled/scaled.js b/stories/scaled/scaled.js
@@ -0,0 +1,27 @@
+/* eslint-disable */
+
+import React from 'react';
+import Resizable from '../../src';
+
+const style = {
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ border: 'solid 1px #ddd',
+ background: '#f0f0f0',
+};
+
+export default () => (
+ <div style={{ transform: 'scale(0.5)', transformOrigin: '0 0' }}>
+ <Resizable
+ scale={0.5}
+ style={style}
+ defaultSize={{
+ width: 200,
+ height: 200,
+ }}
+ >
+ transform: scale(0.5)
+ </Resizable>
+ </div>
+);
diff --git a/test/index.test.js b/test/index.test.js
@@ -895,3 +895,27 @@ test.serial('should render a handleComponent for right', async t => {
  t.is(node.childElementCount, 1);
  t.is(handleNode.getAttribute('class'), 'customHandle-right');
 });
+
+test.serial('should adjust resizing for specified scale', async t => {
+ const onResize = sinon.spy();
+ const resizable = ReactDOM.render(
+ <Resizable
+ defaultSize={{ width: 100, height: 100 }}
+ onResize={onResize}
+ style={{ padding: '40px' }}
+ scale={0.5}
+ />,
+ document.getElementById('content'),
+ );
+ const divs = TestUtils.scryRenderedDOMComponentsWithTag(resizable, 'div');
+ const node = ReactDOM.findDOMNode(divs[6]);
+ TestUtils.Simulate.mouseDown(node, { clientX: 0, clientY: 0 });
+ mouseMove(200, 220);
+ TestUtils.Simulate.mouseUp(node);
+ t.is(onResize.callCount, 1);
+ t.true(onResize.getCall(0).args[0] instanceof MouseEvent);
+ t.is(onResize.getCall(0).args[1], 'bottomRight');
+ t.deepEqual(onResize.getCall(0).args[2].clientWidth, 500);
+ t.deepEqual(onResize.getCall(0).args[2].clientHeight, 540);
+ t.deepEqual(onResize.getCall(0).args[3], { width: 400, height: 440 });
+});
diff --git a/yarn.lock b/yarn.lock
@@ -135,9 +135,9 @@
  node-fetch "^2.1.1"
  url-template "^2.0.8"
 
-"@sinonjs/commons@^1.0.2":
- version "1.0.2"
- resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.0.2.tgz#3e0ac737781627b8844257fadc3d803997d0526e"
+"@sinonjs/commons@^1.2.0":
+ version "1.3.0"
+ resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.3.0.tgz#50a2754016b6f30a994ceda6d9a0a8c36adda849"
  dependencies:
  type-detect "4.0.8"
 
@@ -428,6 +428,10 @@ acorn@^5.5.0:
  version "5.5.3"
  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.5.3.tgz#f473dd47e0277a08e28e9bec5aeeb04751f0b8c9"
 
+acorn@^5.7.3:
+ version "5.7.3"
+ resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.3.tgz#67aa231bf8812974b85235a96771eb6bd07ea279"
+
 address@1.0.3, address@^1.0.1:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/address/-/address-1.0.3.tgz#b5f50631f8d6cec8bd20c963963afb55e06cbce9"
@@ -3598,9 +3602,9 @@ eslint-module-utils@^2.2.0:
  debug "^2.6.8"
  pkg-dir "^1.0.0"
 
-eslint-plugin-flowtype@3.0.0:
- version "3.0.0"
- resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-3.0.0.tgz#4b72588d8a5a5c836439752fe52e8e0f4b9954df"
+eslint-plugin-flowtype@3.2.0:
+ version "3.2.0"
+ resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-3.2.0.tgz#824364ed5940a404b91326fdb5a313a2a74760df"
  dependencies:
  lodash "^4.17.10"
 
@@ -3808,10 +3812,6 @@ estree-walker@^0.3.0:
  version "0.3.1"
  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.3.1.tgz#e6b1a51cf7292524e7237c312e5fe6660c1ce1aa"
 
-estree-walker@^0.5.1:
- version "0.5.1"
- resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.5.1.tgz#64fc375053abc6f57d73e9bd2f004644ad3c5854"
-
 estree-walker@^0.5.2:
  version "0.5.2"
  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.5.2.tgz#d3850be7529c9580d815600b53126515e146dd39"
@@ -4180,9 +4180,9 @@ flatten@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
 
-flow-bin@0.84.0:
- version "0.84.0"
- resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.84.0.tgz#4cb2364c750fb37a7840524fa62456b53f64cdcb"
+flow-bin@0.85.0:
+ version "0.85.0"
+ resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.85.0.tgz#a3ca80748a35a071d5bbb2fcd61d64d977fc53a6"
 
 flow-copy-source@2.0.2:
  version "2.0.2"
@@ -5833,11 +5833,11 @@ macaddress@^0.2.8:
  version "0.2.8"
  resolved "https://registry.yarnpkg.com/macaddress/-/macaddress-0.2.8.tgz#5904dc537c39ec6dbefeae902327135fa8511f12"
 
-magic-string@^0.22.4:
- version "0.22.4"
- resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.22.4.tgz#31039b4e40366395618c1d6cf8193c53917475ff"
+magic-string@^0.22.5:
+ version "0.22.5"
+ resolved "http://registry.npmjs.org/magic-string/-/magic-string-0.22.5.tgz#8e9cf5afddf44385c1da5bc2a6a0dbd10b03657e"
  dependencies:
- vlq "^0.2.1"
+ vlq "^0.2.2"
 
 magic-string@^0.25.1:
  version "0.25.1"
@@ -7205,9 +7205,9 @@ prettier-eslint@^8.5.0:
  typescript "^2.5.1"
  typescript-eslint-parser "^11.0.0"
 
-prettier@1.14.3:
- version "1.14.3"
- resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.14.3.tgz#90238dd4c0684b7edce5f83b0fb7328e48bd0895"
+prettier@1.15.1:
+ version "1.15.1"
+ resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.15.1.tgz#06c67106afb1b40e74b002353b2079cc7e0e67bf"
 
 prettier@^1.7.0:
  version "1.11.1"
@@ -7514,14 +7514,14 @@ react-docgen@^3.0.0-beta11:
  node-dir "^0.1.10"
  recast "^0.12.6"
 
-react-dom@16.6.0:
- version "16.6.0"
- resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.6.0.tgz#6375b8391e019a632a89a0988bce85f0cc87a92f"
+react-dom@16.6.1:
+ version "16.6.1"
+ resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.6.1.tgz#5476e08694ae504ae385a28b62ecc4fe3a29add9"
  dependencies:
  loose-envify "^1.1.0"
  object-assign "^4.1.1"
  prop-types "^15.6.2"
- scheduler "^0.10.0"
+ scheduler "^0.11.0"
 
 react-error-overlay@^4.0.0:
  version "4.0.0"
@@ -7602,14 +7602,14 @@ react-treebeard@^2.1.0:
  shallowequal "^0.2.2"
  velocity-react "^1.3.1"
 
-react@16.6.0:
- version "16.6.0"
- resolved "https://registry.yarnpkg.com/react/-/react-16.6.0.tgz#b34761cfaf3e30f5508bc732fb4736730b7da246"
+react@16.6.1:
+ version "16.6.1"
+ resolved "https://registry.yarnpkg.com/react/-/react-16.6.1.tgz#ee2aef4f0a09e494594882029821049772f915fe"
  dependencies:
  loose-envify "^1.1.0"
  object-assign "^4.1.1"
  prop-types "^15.6.2"
- scheduler "^0.10.0"
+ scheduler "^0.11.0"
 
 read-pkg-up@^1.0.1:
  version "1.0.1"
@@ -8053,16 +8053,16 @@ rollup-plugin-commonjs@9.2.0:
  resolve "^1.8.1"
  rollup-pluginutils "^2.3.3"
 
-rollup-plugin-node-globals@1.2.1:
- version "1.2.1"
- resolved "https://registry.yarnpkg.com/rollup-plugin-node-globals/-/rollup-plugin-node-globals-1.2.1.tgz#2bd8309c19a0390b54cfac19a3bc13eabf3e5541"
+rollup-plugin-node-globals@1.4.0:
+ version "1.4.0"
+ resolved "https://registry.yarnpkg.com/rollup-plugin-node-globals/-/rollup-plugin-node-globals-1.4.0.tgz#5e1f24a9bb97c0ef51249f625e16c7e61b7c020b"
  dependencies:
- acorn "^5.5.0"
+ acorn "^5.7.3"
  buffer-es6 "^4.9.3"
- estree-walker "^0.5.1"
- magic-string "^0.22.4"
+ estree-walker "^0.5.2"
+ magic-string "^0.22.5"
  process-es6 "^0.11.6"
- rollup-pluginutils "^2.0.1"
+ rollup-pluginutils "^2.3.1"
 
 rollup-plugin-node-resolve@3.3.0:
  version "3.3.0"
@@ -8094,7 +8094,7 @@ rollup-pluginutils@^2.0.1:
  estree-walker "^0.3.0"
  micromatch "^2.3.11"
 
-rollup-pluginutils@^2.3.3:
+rollup-pluginutils@^2.3.1, rollup-pluginutils@^2.3.3:
  version "2.3.3"
  resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.3.3.tgz#3aad9b1eb3e7fe8262820818840bf091e5ae6794"
  dependencies:
@@ -8158,9 +8158,9 @@ sax@~1.2.1:
  version "1.2.4"
  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
 
-scheduler@^0.10.0:
- version "0.10.0"
- resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.10.0.tgz#7988de90fe7edccc774ea175a783e69c40c521e1"
+scheduler@^0.11.0:
+ version "0.11.0"
+ resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.11.0.tgz#def1f1bfa6550cc57981a87106e65e8aea41a6b5"
  dependencies:
  loose-envify "^1.1.0"
  object-assign "^4.1.1"
@@ -8326,11 +8326,11 @@ single-line-log@^1.1.2:
  dependencies:
  string-width "^1.0.1"
 
-sinon@7.1.0:
- version "7.1.0"
- resolved "https://registry.yarnpkg.com/sinon/-/sinon-7.1.0.tgz#819b63002ee09a90a3b50a0da4e0bdecb2e3f345"
+sinon@7.1.1:
+ version "7.1.1"
+ resolved "https://registry.yarnpkg.com/sinon/-/sinon-7.1.1.tgz#1202f317aa14d93cb9b69ff50b6bd49c0e05ffc9"
  dependencies:
- "@sinonjs/commons" "^1.0.2"
+ "@sinonjs/commons" "^1.2.0"
  "@sinonjs/formatio" "^3.0.0"
  "@sinonjs/samsam" "^2.1.2"
  diff "^3.5.0"
@@ -9274,9 +9274,9 @@ verror@1.10.0:
  core-util-is "1.0.2"
  extsprintf "^1.2.0"
 
-vlq@^0.2.1:
- version "0.2.2"
- resolved "https://registry.yarnpkg.com/vlq/-/vlq-0.2.2.tgz#e316d5257b40b86bb43cb8d5fea5d7f54d6b0ca1"
+vlq@^0.2.2:
+ version "0.2.3"
+ resolved "https://registry.yarnpkg.com/vlq/-/vlq-0.2.3.tgz#8f3e4328cf63b1540c0d67e1b2778386f8975b26"
 
 vm-browserify@0.0.4:
  version "0.0.4"