Initial commit

Author: dr-js

.gitignore

@@ -0,0 +1,17 @@
+# Logs
+logs
+*.log
+
+# Dependency directory
+node_modules
+
+# WebStorm configuration
+.idea
+
+# distribute file
+**/*-gitignore/**
+**/*-gitignore*
+/*.tgz
+
+/lib
+/example/index.js

.npmignore

@@ -0,0 +1,11 @@
+# distribute file
+**/*-gitignore/**
+**/*-gitignore*
+/*.tgz
+
+/*.lock
+/*lock.json
+/.*
+/src
+/example
+/*.config.js

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 MockingBot
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,113 @@
+# React-resizable-rotatable-draggable-rectangle
+
+
+A react widget that can be resized and rotated via a handler.
+
+### Installation
+
+`npm install --save react-resizable-rotatable-draggable`
+
+### Usage
+
+```javascript
+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                    | //      | //                                    |

babel.config.js

@@ -0,0 +1,15 @@
+const BABEL_ENV = process.env.BABEL_ENV || ''
+const isDev = BABEL_ENV.includes('dev')
+
+module.exports = {
+  presets: [
+    [ '@babel/env', { targets: isDev ? { node: '8.8' } : { browser: '>= 1%' } } ],
+    [ '@babel/react' ]
+  ],
+  plugins: [
+    [ 'styled-components' ],
+    [ '@babel/proposal-class-properties' ],
+    [ 'minify-replace', { replacements: [ { identifierName: '__DEV__', replacement: { type: 'booleanLiteral', value: isDev } } ] } ]
+  ],
+  comments: false
+}

example/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="theme-color" content="#000000">
+  <script src="index.js"></script>
+  <title>React App</title>
+</head>
+<body>
+<noscript>
+  You need to enable JavaScript to run this app.
+</noscript>
+<div id="root"></div>
+<script>
+  const { init } = window.RRRD
+  init(document.querySelector('#root'))
+</script>
+</body>
+</html>