CHG: code sort

dr-js · dr-js · commit 6f8bcdb396cb · 2019-01-18T16:01:38.000+08:00
diff --git a/README.md b/README.md
@@ -1,7 +1,5 @@
 # React-resizable-rotatable-draggable-rectangle
 
->
-
 [![NPM](https://img.shields.io/npm/v/react-resizable-rotatable-draggable.svg)](https://www.npmjs.com/package/react-resizable-rotatable-draggable) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 
 A react widget that can be resized and rotated via a handler.
@@ -15,7 +13,7 @@ npm install --save react-resizable-rotatable-draggable`
 Then you will need to install peer dependency
 
 ```bash
-npm install --save styled-components@4"
+npm install --save styled-components@4
 ```
 
 ### Usage
@@ -96,33 +94,32 @@ class App extends Component {
 }
 
 export default App
-
 ```
 
 ### Props
 
 | Props       |  Type                   | Default | Example                               |
 |:-----------:|:-----------------------:|:-------:|:-------------------------------------:|
-|left         | number.isRequired       | //      | 10                                    |
-|top          | number.isRequired       | //      | 10                                    |
-|width        | number.isRequired       | //      | 100                                   |
-|height       | number.isRequired       | //      | 100                                   |
+|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                    | //      | //                                    |
+|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](https://github.com/mockingbot)
+MIT © [MockingBot](https://github.com/mockingbot)
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "build": "rollup -c",
     "build-dev": "rollup -c -w",
     "build-example": "cd example && npm install && npm run build",
+    "publish-dev": "npm publish --tag dev",
     "start": "npm run build-dev",
     "deploy": "npm run build && npm run build-example && gh-pages -d example/build/dist",
     "prepack": "npm run build"
diff --git a/src/Rect/index.js b/src/Rect/index.js
@@ -31,11 +31,11 @@ export default class Rect extends PureComponent {
     parentRotateAngle: PropTypes.number
   }
 
-  setElementRef = ref => this.$element = ref
+  setElementRef = (ref) => { this.$element = ref }
 
   // Drag
   startDrag = (e) => {
-    var { clientX: startX, clientY: startY } = e
+    let { clientX: startX, clientY: startY } = e
     this.props.onDragStart && this.props.onDragStart()
     this._isMouseDown = true
     const onMove = (e) => {
@@ -69,7 +69,7 @@ export default class Rect extends PureComponent {
       x: rect.left + rect.width / 2,
       y: rect.top + rect.height / 2
     }
-    var startVector = {
+    const startVector = {
       x: clientX - center.x,
       y: clientY - center.y
     }
@@ -104,7 +104,7 @@ export default class Rect extends PureComponent {
     const { styles: { position: { centerX, centerY }, size: { width, height }, transform: { rotateAngle } } } = this.props
     const { clientX: startX, clientY: startY } = e
     const rect = { width, height, centerX, centerY, rotateAngle }
-    const type = e.target.getAttribute('class').split(' ')[0]
+    const type = e.target.getAttribute('class').split(' ')[ 0 ]
     this.props.onResizeStart && this.props.onResizeStart()
     this._isMouseDown = true
     const onMove = (e) => {
@@ -132,9 +132,24 @@ export default class Rect extends PureComponent {
   }
 
   render () {
-    const { styles: { position: { centerX, centerY }, size: { width, height }, transform: { rotateAngle } }, zoomable, rotatable, parentRotateAngle } = this.props
-    const style = { width: Math.abs(width), height: Math.abs(height), transform: `rotate(${rotateAngle}deg)`, left: centerX - Math.abs(width) / 2, top: centerY - Math.abs(height) / 2 }
-    const direction = zoomable.split(',').map(d => d.trim()).filter(d => d)
+    const {
+      styles: {
+        position: { centerX, centerY },
+        size: { width, height },
+        transform: { rotateAngle }
+      },
+      zoomable,
+      rotatable,
+      parentRotateAngle
+    } = this.props
+    const style = {
+      width: Math.abs(width),
+      height: Math.abs(height),
+      transform: `rotate(${rotateAngle}deg)`,
+      left: centerX - Math.abs(width) / 2,
+      top: centerY - Math.abs(height) / 2
+    }
+    const direction = zoomable.split(',').map(d => d.trim()).filter(d => d) // TODO: may be speed up
 
     return (
       <StyledRect
@@ -154,15 +169,15 @@ export default class Rect extends PureComponent {
           direction.map(d => {
             const cursor = `${getCursor(rotateAngle + parentRotateAngle, d)}-resize`
             return (
-              <div key={d} style={{ cursor }} className={`${zoomableMap[d]} resizable-handler`} onMouseDown={(e) => this.startResize(e, cursor)} />
+              <div key={d} style={{ cursor }} className={`${zoomableMap[ d ]} resizable-handler`} onMouseDown={(e) => this.startResize(e, cursor)} />
             )
           })
         }
 
         {
           direction.map(d => {
             return (
-              <div key={d} className={`${zoomableMap[d]} square`} />
+              <div key={d} className={`${zoomableMap[ d ]} square`} />
             )
           })
         }
diff --git a/src/utils.js b/src/utils.js
@@ -188,34 +188,34 @@ export const getNewStyle = (type, rect, deltaW, deltaH, ratio, minWidth, minHeig
   }
 }
 
+const cursorStartMap = { n: 0, ne: 1, e: 2, se: 3, s: 4, sw: 5, w: 6, nw: 7 }
+const cursorDirectionArray = [ 'n', 'ne', 'e', 'se', 's', 'sw', 'w', 'nw' ]
+const cursorMap = { 0: 0, 1: 1, 2: 2, 3: 2, 4: 3, 5: 4, 6: 4, 7: 5, 8: 6, 9: 6, 10: 7, 11: 8 }
 export const getCursor = (rotateAngle, d) => {
-  const startMap = { n: 0, ne: 1, e: 2, se: 3, s: 4, sw: 5, w: 6, nw: 7 }
-  const directionArray = ['n', 'ne', 'e', 'se', 's', 'sw', 'w', 'nw']
-  const map = { 0: 0, 1: 1, 2: 2, 3: 2, 4: 3, 5: 4, 6: 4, 7: 5, 8: 6, 9: 6, 10: 7, 11: 8 }
-  const increment = map[Math.floor(rotateAngle / 30)]
-  const index = startMap[d]
+  const increment = cursorMap[ Math.floor(rotateAngle / 30) ]
+  const index = cursorStartMap[ d ]
   const newIndex = (index + increment) % 8
-  return directionArray[newIndex]
+  return cursorDirectionArray[ newIndex ]
 }
 
-export const centerToTL = ({ centerX, centerY, width, height, rotateAngle }) => {
-  const top = centerY - height / 2
-  const left = centerX - width / 2
-  return { top, left, width, height, rotateAngle }
-}
+export const centerToTL = ({ centerX, centerY, width, height, rotateAngle }) => ({
+  top: centerY - height / 2,
+  left: centerX - width / 2,
+  width,
+  height,
+  rotateAngle
+})
 
-export const tLToCenter = ({ top, left, width, height, rotateAngle }) => {
-  return {
-    position: {
-      centerX: left + width / 2,
-      centerY: top + height / 2
-    },
-    size: {
-      width,
-      height
-    },
-    transform: {
-      rotateAngle
-    }
+export const tLToCenter = ({ top, left, width, height, rotateAngle }) => ({
+  position: {
+    centerX: left + width / 2,
+    centerY: top + height / 2
+  },
+  size: {
+    width,
+    height
+  },
+  transform: {
+    rotateAngle
   }
-}
+})
