Initial

Author: minogin

.gitignore

@@ -0,0 +1,6 @@
+.idea
+*.iml
+*.tgz
+.nyc_output
+coverage
+node_modules

package-lock.json

@@ -0,0 +1,31 @@
+{
+  "name": "@minogin/vue-drag-resize-rotate",
+  "version": "0.1.0",
+  "description": "Vue drag-resize-rotate component",
+  "keywords": [
+    "vue",
+    "drag",
+    "resize",
+    "rotate",
+    "draggable",
+    "resizable",
+    "rotateable"
+  ],
+  "author": {
+    "name": "Andrey Minogin",
+    "email": "minogin@gmail.com"
+  },
+  "license": "MIT",
+  "main": "src/drr.vue",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/minogin/drr"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {
+    "vue": "^2.5.17",
+    "@minogin/vector": "^1.0.2"
+  }
+}

package.json

@@ -0,0 +1,296 @@
+# Description
+Vue component which acts as a draggable, resizable and rotateable container for any content.
+
+### Features
+* All the properties are reactive.
+* Correct rotation based on vector geometry. Rotated container resizes correctly.
+* Supports fixed aspect ratio which is applied correctly when container is rotated.
+* Supports active (e.g. editable) content. For example you can create a draggable and resizable textbox and edit the text inside on double click.
+* Supports both outer and inner boundaries. E.g. container would always contain inner boundary and outer boundary would always contain the container. 
+* DRR-containers could be nested, e.g. for editing tree-like structures.
+
+### Caution!
+          
+(x; y) are always the coordinates of the **center** of the container, not the left-top corner. It is because the container could be rotated and therefore we don't know which corner would be left-top.
+
+### Inspired by
+
+[Vue-drag-resize component](https://www.npmjs.com/package/vue-drag-resize) 
+
+    
+
+# Installation and usage
+
+Install with npm
+
+```bash
+npm i @minogin/vue-drag-resize-rotate
+```
+
+Add the following lines to your index.js (main.js):
+
+```javascript
+import drr from '@minogin/vue-drag-resize-rotate'
+
+...
+
+Vue.component('drr', drr)
+```
+
+Use DRR in your Vue templates:
+
+```javascript
+<drr
+    :x="item.x"
+    :y="item.y"
+    :w="item.weight"
+    :h="item.height"
+    :angle="item.angle"
+    :aspectRatio="true"
+    @change="itemChange"
+>
+    <img src="/static/cat.jpg" style="width: 100%; height: 100%" />
+</drr>
+```
+
+```javascript
+<drr
+    :x="textbox.x"
+    :y="textbox.y"
+    :w="textbox.weight"
+    :h="textbox.height"
+    :rotateable="false"
+    :isActive="textbox.selected"
+    :selectable="!textbox.locked"
+    :hasActiveContent="true"
+    @activated="selectItem(textbox.id)"
+    @deactivated="deselectItem(textbox.id)"
+    @dragstop="textboxDragStop(textbox, ...arguments)"
+    @resizestop="textboxResizeStop(textbox, ...arguments)"
+    @rotatestop="textboxRotateStop(textbox, ...arguments)"
+    :innerBox="innerBox"
+    :outerBox="outerBox"
+>
+          <TextBox />
+</drr>
+```
+
+# Documentation
+
+## Properties
+
+#### x, y
+Type: `Number`\
+Required: `true`
+
+Center of the container.
+
+**Attention!**\
+(x; y) are the coordinates of the **center** of the container, not the left-top corner. It is because the container could be rotated and therefore we don't know which corner would be left-top.
+
+#### w, h
+Type: `Number`\
+Required: `true`
+
+Width and height of the container.
+
+#### angle
+Type: `Number`\
+Required: `false`\
+Default: `0`
+
+Rotation angle in degrees starting from up-axis.
+
+#### selected
+Type: `Boolean`\
+Required: `false`\
+Default: `false`
+
+Whether the container is selected and therefore able to be dragged, resized and rotated.
+
+#### selectable
+Type: `Boolean`\
+Required: `false`\
+Default: `true`
+
+Whether the container could be selected by mouse click or touch.
+
+#### draggable
+Type: `Boolean`\
+Required: `false`\
+Default: `true`
+
+Whether the container could be dragged.
+
+#### resizable
+Type: `Boolean`\
+Required: `false`\
+Default: `true`
+
+Whether the container could be resized.
+
+#### rotatable
+Type: `Boolean`\
+Required: `false`\
+Default: `true`
+
+Whether the container could be rotated.
+
+#### aspectRatio
+Type: `Boolean`\
+Required: `false`\
+Default: `false`
+
+Whether to preserve aspect ratio on resize.
+
+#### hasActiveContent
+Type: `Boolean`\
+Required: `false`\
+Default: `false`
+
+True means that there is some content in the container that could be activated by double click. For example editable text field, an image which enlarges or some nested elements.
+When content is activated by double click the container is locked and every child receives 'content-active' event. The content must determine by itself when the job is finished and send the 'content-inactive' event to the parent DRR like this:
+```javascript
+this.$parent.$emit('content-inactive')
+```      
+
+#### outerBound
+Type: `Object`\
+Required: `false`\
+Default: `null`
+
+A rectangular object
+```javascript
+{
+  x: ...,
+  y: ...,
+  w: ...,
+  h: ...
+}
+```
+which is the outer limit for DRR dragging and resizing. This boundary currently applies only to not rotated DRR. x and y are the coordinates of the center of the rectangle.
+
+#### innerBound
+Type: `Object`\
+Required: `false`\
+Default: `null`
+
+A rectangular object
+```javascript
+{
+  x: ...,
+  y: ...,
+  w: ...,
+  h: ...
+}
+```
+which is the inner limit for DRR dragging and resizing. It means that this rectangle will always be contained inside the container. 
+ This boundary currently applies only to not rotated DRR. x and y are the coordinates of the center of the rectangle.
+
+## Events
+
+#### select
+Fires when container is selected (focused).
+
+#### deselect
+Fires when container loses focus by clicking outside of the container.
+
+**Caution!** Currently clicking on another DRRs does not deselect current DRR. You must keep proper selection yourself using `selected` property. 
+
+#### dragstart (rect)
+Properties:\
+`rect`: `Object { x, y, w, h, angle }` - container coordinates on drag start
+
+Fires on drag start.
+
+#### drag (rect)
+Properties:\
+`rect`: `Object { x, y, w, h, angle }` - current container coordinates
+
+Fires continuously while dragging
+
+**Caution!** This event fires many times per second. Consider handler [debouncing](https://lodash.com/docs/#debounce).  
+ 
+#### dragstop (rect, startRect)
+Properties:\
+`rect`: `Object { x, y, w, h, angle }` - final container coordinates\
+`startRect`: `Object { x, y, w, h, angle }` - initial container coordinates.
+
+Fires when drag finishes.
+
+#### resizestart (rect)
+Properties:\
+`rect`: `Object { x, y, w, h, angle }` - container coordinates on resize start.
+
+Fires on resize start.
+
+#### resize (rect)
+Properties:\
+`rect`: `Object { x, y, w, h, angle }` - current container coordinates
+
+Fires continuously while resizing.
+
+**Caution!** This event fires many times per second. Consider handler [debouncing](https://lodash.com/docs/#debounce).  
+ 
+#### resizestop (rect, startRect)
+Properties:\
+`rect`: `Object { x, y, w, h, angle }` - final container coordinates\
+`startRect`: `Object { x, y, w, h, angle }` - initial container coordinates
+
+Fires when resize finishes.
+
+#### rotatestart (rect)
+Properties:\
+`rect`: `Object { x, y, w, h, angle }` - container coordinates on rotation start.
+
+Fires on rotation start.
+
+#### rotate (rect)
+Properties:\
+`rect`: `Object { x, y, w, h, angle }` - current container coordinates
+
+Fires continuously while rotating.
+
+**Caution!** This event fires many times per second. Consider handler [debouncing](https://lodash.com/docs/#debounce).  
+ 
+#### rotatestop (rect, startRect)
+Properties:\
+`rect`: `Object { x, y, w, h, angle }` - final container coordinates\
+`startRect`: `Object { x, y, w, h, angle }` - initial container coordinates
+
+Fires when rotation finishes.
+
+#### change (rect)
+Properties:\  
+`rect`: `Object { x, y, w, h, angle }` - final container coordinates\
+
+Fired when drag, resize or rotate finishes.
+
+#### content-active
+
+Fired when container is double-clicked and `hasActiveContent` property is set to `true`.
+
+#### active
+
+Fired on every child when container is double-clicked and `hasActiveContent` property is set to `true`.
+
+#### inactive
+
+Fired on every child when container receives 'content-inactive' event and `hasActiveContent` property is set to `true`.
+
+# Hints
+
+For the content (img, div, etc.) to resize along with the container use
+```css
+width: 100%;
+height: 100%;
+```
+style on the content element. 
+
+# Contacts
+
+Please contact me at [minogin@gmail.com](mailto:minogin@gmail.com) 
+
+# License
+
+[ISC](https://opensource.org/licenses/ISC)