Support scale (#485)

* fix: window boundary

* fix: tsc error

* fix: parent scale

* fix: body boundary

* fix: selector boundary

* fix: fix errors and add grid stories

* fix: README

Author: bokuweb

README.md

@@ -197,6 +197,13 @@ The `lockAspectRatioExtraWidth` property enables a resizable component to mainta
 For instance, a video could be displayed 16:9 with a 50px side bar.
 If omitted, set `0`.
 
+#### `scale?: number;`
+
+Specifies the scale of the canvas your are dragging or resizing this element on. This allows
+you to, for example, get the correct drag / resize deltas while you are zoomed in or out via
+a transform or matrix in the parent of this element.
+If omitted, set `1`.
+
 #### `lockAspectRatioExtraHeight?: number;`
 
 The `lockAspectRatioExtraHeight` property enables a resizable component to maintain an aspect ratio plus extra height.

src/index.js.flow

@@ -133,6 +133,7 @@ export type Props = {
   disableDragging?: boolean,
   cancel?: boolean,
   enableUserSelectHack?: boolean,
+  scale?: number,
 };
 
 export class Rnd extends React.Component<Props, State> {
@@ -145,6 +146,7 @@ export class Rnd extends React.Component<Props, State> {
     onDragStart: () => {},
     onDrag: () => {},
     onDragStop: () => {},
+    scale: 1,
   };
 
   updateSize(size: { width: number | string, height: number | string }) {

stories/index.tsx

@@ -12,6 +12,7 @@ import ScaleWindowUnControlled from "./scale/window-uncontrolled";
 import ScaleBodyX05UnControlled from "./scale/body-uncontrolled-x0-5";
 import ScaleBodyX15UnControlled from "./scale/body-uncontrolled-x1-5";
 import ScaleSelectorUnControlled from "./scale/selector-uncontrolled";
+import ScaleSelectorControlled from "./scale/selector-controlled";
 
 import BasicMultiUncontrolled from "./basic/multi-uncontrolled";
 import BasicMultiControlled from "./basic/multi-controlled";
@@ -60,8 +61,11 @@ storiesOf("scale", module)
   .add("x0.5 with body boundary", () => <ScaleBodyX05UnControlled />)
   .add("x1.5 with body boundary", () => <ScaleBodyX15UnControlled />)
   .add("with window boundary", () => <ScaleWindowUnControlled />)
+  .add("with selector boundary uncontrolled", () => <ScaleSelectorUnControlled />)
+  .add("with selector boundary controlled", () => <ScaleSelectorControlled />)
   .add("with selector boundary", () => <ScaleSelectorUnControlled />);
 
+
 storiesOf("size", module)
   .add("percent uncontrolled", () => <SizePercentUncontrolled />)
   .add("percent controlled", () => <SizePercentControlled />);

stories/scale/selector-controlled.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { Rnd } from "../../src";
+import { style, parentBoundary, selectorBoundary } from "../styles";
+
+type State = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+export default class Example extends React.Component<{}, State> {
+  constructor(props) {
+    super(props);
+    this.state = {
+      width: 200,
+      height: 200,
+      x: 0,
+      y: 0,
+    };
+  }
+
+  render() {
+    return (
+      <div className="boundary" style={{ ...selectorBoundary, transform: "scale(0.6)" }}>
+        <div style={parentBoundary}>
+          <Rnd
+            scale={0.6}
+            style={style}
+            bounds=".boundary"
+            size={{
+              width: this.state.width,
+              height: this.state.height,
+            }}
+            position={{
+              x: this.state.x,
+              y: this.state.y,
+            }}
+            onDragStop={(e, d) => {
+              this.setState({ x: d.x, y: d.y });
+            }}
+            onResize={(e, direction, ref, delta, position) => {
+              this.setState({
+                width: ref.offsetWidth,
+                height: ref.offsetHeight,
+                ...position,
+              });
+            }}
+          >
+            001
+          </Rnd>
+        </div>
+      </div>
+    );
+  }
+}