From ecca32d61b0e66cae2ef87ce597e065cd9864dcd Mon Sep 17 00:00:00 2001 From: Jeremy Lane Date: Wed, 15 Feb 2017 20:45:23 -0800 Subject: [PATCH] Added ability to use react-resizable when the document body has been scaled using a css transform (eg. transform: scale(0.5);) --- lib/Resizable.jsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/lib/Resizable.jsx b/lib/Resizable.jsx index 4dae1bf6..57419900 100644 --- a/lib/Resizable.jsx +++ b/lib/Resizable.jsx @@ -153,6 +153,13 @@ export default class Resizable extends React.Component { return [width, height]; } + getBodyScale() { + const regExp = /scale\(([^)]+)\)/; + const bodyTransform = document && document.body ? document.body.style.transform : ''; + const matches = regExp.exec(bodyTransform); + return matches ? matches[1] : 1; + } + /** * Wrapper around drag events to provide more useful data. * @@ -166,9 +173,11 @@ export default class Resizable extends React.Component { const canDragX = this.props.axis === 'both' || this.props.axis === 'x'; const canDragY = this.props.axis === 'both' || this.props.axis === 'y'; + const scale = this.getBodyScale(); + // Update w/h - let width = this.state.width + (canDragX ? deltaX : 0); - let height = this.state.height + (canDragY ? deltaY : 0); + let width = this.state.width + (canDragX ? deltaX / scale : 0); + let height = this.state.height + (canDragY ? deltaY / scale : 0); // Early return if no change const widthChanged = width !== this.state.width, heightChanged = height !== this.state.height;