React-resizable-rotatable-draggable-rectangle

A react widget that can be resized and rotated via a handler.

NODE and NPM

use node 18.x and npm >=8.x

Important For Merging Pull Requests

Do the following before the PR is merged after approval

merge latest master into feature branch on feature branch, run npm version minor, and push to feature branch this will update the package version then merge to master from github interface

Installation

npm install --save react-resizable-rotatable-draggable

Then you will need to install peer dependency

Usage

import React, { Component } from "react";
import ResizableRect from "react-resizable-rotatable-draggable";

class App extends Component {
  constructor() {
    super();
    this.state = {
      width: 100,
      height: 100,
      top: 100,
      left: 100,
      rotateAngle: 0,
    };
  }

  handleResize = (style, isShiftKey, type) => {
    // type is a string and it shows which resize-handler you clicked
    // e.g. if you clicked top-right handler, then type is 'tr'
    let { top, left, width, height } = style;
    top = Math.round(top);
    left = Math.round(left);
    width = Math.round(width);
    height = Math.round(height);
    this.setState({
      top,
      left,
      width,
      height,
    });
  };

  handleRotate = (rotateAngle) => {
    this.setState({
      rotateAngle,
    });
  };

  handleDrag = (deltaX, deltaY) => {
    this.setState({
      left: this.state.left + deltaX,
      top: this.state.top + deltaY,
    });
  };

  render() {
    const { width, top, left, height, rotateAngle } = this.state;
    return (
      <div className="App">
        <ResizableRect
          left={left}
          top={top}
          width={width}
          height={height}
          rotateAngle={rotateAngle}
          // aspectRatio={false}
          // minWidth={10}
          // minHeight={10}
          zoomable="n, w, s, e, nw, ne, se, sw"
          // rotatable={true}
          // onRotateStart={this.handleRotateStart}
          onRotate={this.handleRotate}
          // onRotateEnd={this.handleRotateEnd}
          // onResizeStart={this.handleResizeStart}
          onResize={this.handleResize}
          // onResizeEnd={this.handleUp}
          // onDragStart={this.handleDragStart}
          onDrag={this.handleDrag}
          // onDragEnd={this.handleDragEnd}
        />
      </div>
    );
  }
}

export default App;

Props

Props	Type	Default	Example
left	number.isRequired		10
top	number.isRequired		10
width	number.isRequired		100
height	number.isRequired		100
rotateAngle	number	0	0
rotatable	bool	true	true
zoomable	string	''	'n, w, s, e, nw, ne, se, sw'
minWidth	number	10	0
minHeight	number	10	0
aspectRatio	number (width / height)		1(which makes the rectangle a square)
onRotateStart	func
onRotate	func		(rotateAngle)
onRotateEnd	func
onResizeStart	func
onResize	func		(style, isShiftKey, type)
onResizeEnd	func
onDragStart	func
onDrag	func		(deltaX, deltaY)
onDragEnd	func

License

MIT © MockingBot