├── README.md
├── package.json
├── raphael.free_transform.js
└── screenshot.png


/README.md:
--------------------------------------------------------------------------------
  1 | Raphaël.FreeTransform
  2 | ====================
  3 | 
  4 |   Free transform tool for [Raphaël 2.0](http://raphaeljs.com/) elements and sets with many options. Supports snap-to-grid dragging, scaling and rotating with a specified interval and range.
  5 | 
  6 |   ![Screenshot](https://github.com/ElbertF/Raphael.FreeTransform/raw/master/screenshot.png)
  7 | 
  8 |   *Licensed under the [MIT license](http://www.opensource.org/licenses/mit-license.php).*
  9 | 
 10 |   ![Icon](https://alias.io/images/bitcoin_16x16.png) Donate Bitcoin: 1PgSBQXVBpVHxZKmQpaJDULyPwqw9ieVcT - *Thanks!*
 11 | 
 12 | Demo
 13 | ----
 14 | 
 15 |   https://alias.io/raphael/free_transform/
 16 | 
 17 | Examples
 18 | --------
 19 | 
 20 | ```html
 21 | <script type="text/javascript" src="raphael-min.js"></script>
 22 | <script type="text/javascript" src="raphael.free_transform.js"></script>
 23 | 
 24 | <div id="holder" style="height: 100%;"></div>
 25 | 
 26 | <script type="text/javascript">
 27 | 	var paper = Raphael(0, 0, 500, 500);
 28 | 
 29 | 	var rect = paper
 30 | 		.rect(200, 200, 100, 100)
 31 | 		.attr('fill', '#f00');
 32 | 
 33 | 	// Add freeTransform
 34 | 	var ft = paper.freeTransform(rect);
 35 | 
 36 | 	// Hide freeTransform handles
 37 | 	ft.hideHandles();
 38 | 
 39 | 	// Show hidden freeTransform handles
 40 | 	ft.showHandles();
 41 | 
 42 | 	// Apply transformations programmatically
 43 | 	ft.attrs.rotate = 45;
 44 | 
 45 | 	ft.apply();
 46 | 
 47 | 	// Remove freeTransform completely
 48 | 	ft.unplug();
 49 | 
 50 | 	// Add freeTransform with options and callback
 51 | 	ft = paper.freeTransform(rect, { keepRatio: true }, function(ft, events) {
 52 | 		console.log(ft.attrs);
 53 | 	});
 54 | 
 55 | 	// Change options on the fly
 56 | 	ft.setOpts({ keepRatio: false });
 57 | </script>
 58 | ```
 59 | 
 60 | Options
 61 | -------
 62 | 
 63 | #### `animate: true | { delay: num, easing: string } | false`
 64 | 
 65 | Animate transformations. Works best in combination with `apply()` (see the functions section below).
 66 | 
 67 | Default: `{ delay: 700, easing: 'linear' }`
 68 | 
 69 | 
 70 | #### `attrs: { fill: hex, stroke: hex }`
 71 | 
 72 | Sets the attributes of the handles.
 73 | 
 74 | Default: `{ fill: '#fff', stroke: '#000' }`
 75 | 
 76 | 
 77 | #### `customCorners: { size: num, distance: num, corners: [ { action: string: image: string }, ... ] } | false
 78 | 
 79 | Specify custom images and events for corner handles.
 80 | 
 81 | The corners array should contain 4 objects, one for each corner starting top left going clockwise.
 82 | 
 83 | Valid actions: `drag`, `rotate`, `scale` or a custom string. Actions are emitted as events in the callback.
 84 | 
 85 | Default: `false`
 86 | 
 87 | 
 88 | #### `boundary: { x: int, y: int, width: int, height: int } | false`
 89 | 
 90 | Limits the drag area of the handles.
 91 | 
 92 | Default: dimensions of the paper
 93 | 
 94 | 
 95 | #### `distance: num`
 96 | 
 97 | Sets the distance of the handles from the center of the element (`num` times radius).
 98 | 
 99 | Default: `1.3`
100 | 
101 | 
102 | #### `drag: true | [ 'center', 'self' ] | false`
103 | 
104 | Enables/disables dragging.
105 | 
106 | Default: `[ 'center', 'self' ]`
107 | 
108 | 
109 | #### `draw: [ 'bbox', 'circle' ]`
110 | 
111 | Additional elements to draw.
112 | 
113 | Default: `false`
114 | 
115 | 
116 | #### `keepRatio: true | [ 'axisX', 'axisY', 'bboxCorners', 'bboxSides' ] | false`
117 | 
118 | Scale axes together or individually.
119 | 
120 | Default: `false`
121 | 
122 | 
123 | #### `range: { rotate: [ num, num ], scale: [ num, num ] }`
124 | 
125 | Limit the range of transformation.
126 | 
127 | Default: `{ rotate: [ -180, 180 ], scale: [ 0, 99999 ] }`
128 | 
129 | 
130 | #### `rotate: true | [ 'axisX', 'axisY', 'self' ]|false`
131 | 
132 | Enables/disables rotating.
133 | 
134 | Default: `[ 'axisX', 'axisY' ]`
135 | 
136 | 
137 | #### `scale: true | [ 'axisX', 'axisY', 'bboxCorners', 'bboxSides' ] | false`
138 | 
139 | Enables/disables scaling.
140 | 
141 | Default: `[ 'axisX', 'axisY', 'bboxCorners', 'bboxSides' ]`
142 | 
143 | 
144 | #### `snap: { rotate: num, scale: num, drag: num }`: 
145 | 
146 | Snap transformations to num degrees (rotate) or pixels (scale, drag).
147 | 
148 | Default: `{ rotate: 0, scale: 0, drag: 0 }`
149 | 
150 | 
151 | #### `snapDist: { rotate: num, scale: num, drag: num }`
152 | 
153 | Snap distance in degrees (rotate) or pixels (scale, drag).
154 | 
155 | Default: `{ rotate: 0, scale: 0, drag: 7 }`
156 | 
157 | 
158 | #### `size: num | { axes: num, bboxCorners: num, bboxSides: num, center: num }`
159 | 
160 | Sets the radius of the handles in pixels.
161 | 
162 | Default: `5`
163 | 
164 | 
165 | Callback
166 | --------
167 | 
168 | A callback function can be specified to capture changes and events.
169 | 
170 | 
171 | Functions
172 | ---------
173 | 
174 | #### `apply()`
175 | 
176 | Programmatically apply transformations (see the example above).
177 | 
178 | 
179 | #### `hideHandles( opts )`
180 | 
181 | Removes handles but keeps values set by the plugin in memory. By
182 | default removes all drag events from the elements. If you'd like to
183 | keep then while the handles are hidden, pass ``{undrag: false}`` to
184 | hideHandles().
185 | 
186 | 
187 | #### `showHandles()`
188 | 
189 | Shows handles hidden with `hideHandles()`.
190 | 
191 | 
192 | #### `setOpts( object, function )`
193 | 
194 | Update options and callback.
195 | 
196 | 
197 | #### `unplug()`
198 | 
199 | Removes handles and deletes all values set by the plugin.
200 | 
201 | 
202 | #### `updateHandles()`
203 | 
204 | Updates handles to reflect the element's transformations.
205 | 
206 | 
207 | Raphaël.FreeTransform and Raphaël.JSON
208 | --------------------------------------
209 | 
210 | Instructions on how to use Raphaël.FreeTransform in combination with
211 | Raphaël.JSON can be found 
212 | [here](https://github.com/ElbertF/Raphael.JSON#raphaëljson-and-raphaëlfreetransform).
213 | 
214 | 
215 | Sponsors
216 | --------
217 | 
218 | Some of the work done for this plugin was paid for by [Signs.com](http://www.signs.com/) and [Merchbro.com](http://www.merchbro.com/).
219 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Raphael.FreeTransform",
 3 |   "version": "1.0.0",
 4 |   "main": "raphael.free_transform.js",
 5 |   "repository": "git@github.com:AliasIO/Raphael.FreeTransform.git",
 6 |   "author": "Elbert Alias <elbert@alias.io>",
 7 |   "license": "MIT",
 8 |   "dependencies": {
 9 |     "raphael": "^2.2.7"
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/raphael.free_transform.js:
--------------------------------------------------------------------------------
   1 | /*
   2 |  * Licensed under the MIT license:
   3 |  * http://www.opensource.org/licenses/mit-license.php
   4 |  *
   5 |  */
   6 | (function (root, factory) {
   7 | 	if ( typeof define === 'function' && define.amd ) {
   8 | 		// AMD. Register as an anonymous module.
   9 | 		define(['raphael'], function(Raphael) {
  10 | 			// Use global variables if the locals are undefined.
  11 | 			return factory(Raphael || root.Raphael);
  12 | 		});
  13 | 	} else {
  14 | 		// RequireJS isn't being used. Assume underscore and backbone are loaded in <script> tags
  15 | 		factory(Raphael);
  16 | 	}
  17 | }(this, function(Raphael) {
  18 | 	Raphael.fn.freeTransform = function(subject, options, callback) {
  19 | 		var
  20 | 			ft, i, mapped, timeout,
  21 | 			paper = this,
  22 | 			bbox  = subject.getBBox(true);
  23 | 
  24 | 
  25 | 		// Enable method chaining
  26 | 		if ( subject.freeTransform ) {
  27 | 			return subject.freeTransform;
  28 | 		}
  29 | 
  30 | 		// Add Array.map if the browser doesn't support it
  31 | 		if ( !Array.prototype.hasOwnProperty('map') ) {
  32 | 			Array.prototype.map = function(callback, arg) {
  33 | 				mapped = [];
  34 | 
  35 | 				for ( i in this ) {
  36 | 					if ( this.hasOwnProperty(i) ) {
  37 | 						mapped[i] = callback.call(arg, this[i], i, this);
  38 | 					}
  39 | 				}
  40 | 
  41 | 				return mapped;
  42 | 			};
  43 | 		}
  44 | 
  45 | 		// Add Array.indexOf if not builtin
  46 | 		if ( !Array.prototype.hasOwnProperty('indexOf') ) {
  47 | 			Array.prototype.indexOf = function(obj, start) {
  48 | 				for ( i = ( start || 0 ), j = this.length; i < j; i++ ) {
  49 | 					if ( this[i] === obj ) {
  50 | 						return i;
  51 | 					}
  52 | 				}
  53 | 
  54 | 				return -1;
  55 | 			};
  56 | 		}
  57 | 
  58 | 		ft = subject.freeTransform = {
  59 | 			// Keep track of transformations
  60 | 			attrs: {
  61 | 				x: bbox.x,
  62 | 				y: bbox.y,
  63 | 				size: { x: bbox.width, y: bbox.height },
  64 | 				center: { x: bbox.x + bbox.width / 2, y: bbox.y + bbox.height / 2 },
  65 | 				rotate: 0,
  66 | 				scale: { x: 1, y: 1 },
  67 | 				translate: { x: 0, y: 0 },
  68 | 				ratio: 1
  69 | 			},
  70 | 			axes: null,
  71 | 			bbox: null,
  72 | 			callback: null,
  73 | 			items: [],
  74 | 			handles: { center: null, x: null, y: null },
  75 | 			offset: {
  76 | 				rotate: 0,
  77 | 				scale: { x: 1, y: 1 },
  78 | 				translate: { x: 0, y: 0 }
  79 | 			},
  80 | 			opts: {
  81 | 				animate: false,
  82 | 				attrs: { fill: '#fff', stroke: '#000' },
  83 | 				boundary: { x: paper._left || 0, y: paper._top || 0, width: null, height: null },
  84 | 				customCorners: false, // { size: <number>, distance: <number>, corners: [ action: <string>, image: <string> ]	}
  85 | 				distance: 1.3,
  86 | 				drag: true,
  87 | 				draw: false,
  88 | 				keepRatio: false,
  89 | 				range: { rotate: [ -180, 180 ], scale: [ -99999, 99999 ] },
  90 | 				rotate: true,
  91 | 				scale: true,
  92 | 				snap: { rotate: 0, scale: 0, drag: 0 },
  93 | 				snapDist: { rotate: 0, scale: 0, drag: 7 },
  94 | 				size: 5
  95 | 			},
  96 | 			subject: subject
  97 | 		};
  98 | 
  99 | 		/**
 100 | 		 * Update handles based on the element's transformations
 101 | 		 */
 102 | 		ft.updateHandles = function() {
 103 | 			var
 104 | 				corners, cornersDistance, rad, radius, cx, cy, viewBoxRatio,
 105 | 				bboxHandleDirection = [ // Allowed x, y scaling directions for bbox handles
 106 | 					[ -1, -1 ], [ 1, -1 ], [ 1, 1 ], [ -1, 1 ],
 107 | 					[  0, -1 ], [ 1,  0 ], [ 0, 1 ], [ -1, 0 ]
 108 | 				];
 109 | 
 110 | 			if ( ft.handles.bbox || ft.opts.rotate.indexOf('self') >= 0 ) {
 111 | 				cornersDistance = corners = getBBox(0);
 112 | 
 113 | 				if ( ft.opts.customCorners && typeof ft.opts.customCorners.distance === 'number' ) {
 114 | 					cornersDistance = getBBox(ft.opts.customCorners.distance);
 115 | 				}
 116 | 			}
 117 | 
 118 | 			// Get the element's rotation
 119 | 			rad = {
 120 | 				x: ( ft.attrs.rotate      ) * Math.PI / 180,
 121 | 				y: ( ft.attrs.rotate + 90 ) * Math.PI / 180
 122 | 			};
 123 | 
 124 | 			radius = {
 125 | 				x: ft.attrs.size.x / 2 * ft.attrs.scale.x,
 126 | 				y: ft.attrs.size.y / 2 * ft.attrs.scale.y
 127 | 			};
 128 | 
 129 | 			ft.axes.map(function(axis) {
 130 | 				if ( ft.handles[axis] ) {
 131 | 					cx           = ft.attrs.center.x + ft.attrs.translate.x + radius[axis] * ft.opts.distance * Math.cos(rad[axis]),
 132 | 					cy           = ft.attrs.center.y + ft.attrs.translate.y + radius[axis] * ft.opts.distance * Math.sin(rad[axis]),
 133 | 					viewBoxRatio = { x: 1, y: 1 };
 134 | 
 135 | 					// viewBox might be scaled
 136 | 					if ( paper._viewBox ) {
 137 | 						viewBoxRatio = {
 138 | 							x: paper._viewBox[2] / getPaperSize().x,
 139 | 							y: paper._viewBox[3] / getPaperSize().y
 140 | 						};
 141 | 					}
 142 | 
 143 | 					// Keep handle within boundaries
 144 | 					if ( ft.opts.boundary ) {
 145 | 						cx = Math.max(Math.min(cx, ft.opts.boundary.x + ( ft.opts.boundary.width  || getPaperSize().x * viewBoxRatio.x)), ft.opts.boundary.x);
 146 | 						cy = Math.max(Math.min(cy, ft.opts.boundary.y + ( ft.opts.boundary.height || getPaperSize().y * viewBoxRatio.y)), ft.opts.boundary.y);
 147 | 					}
 148 | 
 149 | 					ft.handles[axis].disc.attr({ cx: cx, cy: cy });
 150 | 
 151 | 					ft.handles[axis].line.toFront().attr({
 152 | 						path: [ [ 'M', ft.attrs.center.x + ft.attrs.translate.x, ft.attrs.center.y + ft.attrs.translate.y ], [ 'L', ft.handles[axis].disc.attrs.cx, ft.handles[axis].disc.attrs.cy ] ]
 153 | 					});
 154 | 
 155 | 					ft.handles[axis].disc.toFront();
 156 | 				}
 157 | 			});
 158 | 
 159 | 			if ( ft.bbox ) {
 160 | 				ft.bbox.toFront().attr({
 161 | 					path: [
 162 | 						[ 'M', corners[0].x, corners[0].y ],
 163 | 						[ 'L', corners[1].x, corners[1].y ],
 164 | 						[ 'L', corners[2].x, corners[2].y ],
 165 | 						[ 'L', corners[3].x, corners[3].y ],
 166 | 						[ 'L', corners[0].x, corners[0].y ]
 167 | 					]
 168 | 				});
 169 | 
 170 | 				if ( ft.handles.bbox ) {
 171 | 					ft.handles.bbox.map(function (handle, i) {
 172 | 						var cx, cy, j, k;
 173 | 
 174 | 						if ( handle.isCorner ) {
 175 | 							cx = cornersDistance[i].x;
 176 | 							cy = cornersDistance[i].y;
 177 | 						} else {
 178 | 							j  = i % 4;
 179 | 							k  = ( j + 1 ) % corners.length;
 180 | 							cx = ( cornersDistance[j].x + cornersDistance[k].x ) / 2;
 181 | 							cy = ( cornersDistance[j].y + cornersDistance[k].y ) / 2;
 182 | 						}
 183 | 
 184 | 						handle.element.toFront()
 185 | 							.attr({
 186 | 								x: cx - ( handle.isCorner ? ( ft.opts.customCorners ? Math.ceil(ft.opts.customCorners.size / 2) : ft.opts.size.bboxCorners ) : ft.opts.size.bboxSides ),
 187 | 								y: cy - ( handle.isCorner ? ( ft.opts.customCorners ? Math.ceil(ft.opts.customCorners.size / 2) : ft.opts.size.bboxCorners ) : ft.opts.size.bboxSides )
 188 | 							})
 189 | 							.transform(ft.opts.customCorners ? null : 'R' + ft.attrs.rotate);
 190 | 
 191 | 						handle.x = bboxHandleDirection[i][0];
 192 | 						handle.y = bboxHandleDirection[i][1];
 193 | 					});
 194 | 				}
 195 | 			}
 196 | 
 197 | 			if ( ft.circle ) {
 198 | 				ft.circle.attr({
 199 | 					cx: ft.attrs.center.x + ft.attrs.translate.x,
 200 | 					cy: ft.attrs.center.y + ft.attrs.translate.y,
 201 | 					r:  Math.max(radius.x, radius.y) * ft.opts.distance
 202 | 				});
 203 | 			}
 204 | 
 205 | 			if ( ft.handles.center ) {
 206 | 				ft.handles.center.disc.toFront().attr({
 207 | 					cx: ft.attrs.center.x + ft.attrs.translate.x,
 208 | 					cy: ft.attrs.center.y + ft.attrs.translate.y
 209 | 				});
 210 | 			}
 211 | 
 212 | 			if ( ft.opts.rotate.indexOf('self') >= 0 ) {
 213 | 				radius = Math.max(
 214 | 					Math.sqrt(Math.pow(corners[1].x - corners[0].x, 2) + Math.pow(corners[1].y - corners[0].y, 2)),
 215 | 					Math.sqrt(Math.pow(corners[2].x - corners[1].x, 2) + Math.pow(corners[2].y - corners[1].y, 2))
 216 | 				) / 2;
 217 | 			}
 218 | 
 219 | 			return ft;
 220 | 		};
 221 | 
 222 | 		/**
 223 | 		 * Add handles
 224 | 		 */
 225 | 		ft.showHandles = function() {
 226 | 			var
 227 | 				i, handle, rotate, scale,
 228 | 				handles    = [];
 229 | 				draggables = [];
 230 | 
 231 | 			ft.hideHandles();
 232 | 
 233 | 			ft.axes.map(function(axis) {
 234 | 				ft.handles[axis] = {};
 235 | 
 236 | 				ft.handles[axis].line = paper
 237 | 					.path([ 'M', ft.attrs.center.x, ft.attrs.center.y ])
 238 | 					.attr({
 239 | 						stroke: ft.opts.attrs.stroke,
 240 | 						'stroke-dasharray': '- ',
 241 | 						opacity: .5
 242 | 					});
 243 | 
 244 | 				ft.handles[axis].disc = paper
 245 | 					.circle(ft.attrs.center.x, ft.attrs.center.y, ft.opts.size.axes)
 246 | 					.attr(ft.opts.attrs);
 247 | 
 248 | 				ft.handles[axis].disc.node.setAttribute('class', 'handle arm axis-' + axis);
 249 | 			});
 250 | 
 251 | 			if ( ft.opts.draw.indexOf('bbox') >= 0 ) {
 252 | 				ft.bbox = paper
 253 | 					.path('')
 254 | 					.attr({
 255 | 						stroke: ft.opts.attrs.stroke,
 256 | 						'stroke-dasharray': '- ',
 257 | 						opacity: .5
 258 | 					});
 259 | 
 260 | 				ft.handles.bbox = [];
 261 | 
 262 | 				for ( i = ( ft.opts.scale.indexOf('bboxCorners') || ft.opts.customCorners >= 0 ? 0 : 4 ); i < ( ft.opts.scale.indexOf('bboxSides') === -1 ? 4 : 8 ); i ++ ) {
 263 | 					handle = {};
 264 | 
 265 | 					handle.index    = i;
 266 | 					handle.axis     = i % 2 ? 'x' : 'y';
 267 | 					handle.isCorner = i < 4;
 268 | 
 269 | 					if ( handle.isCorner && ft.opts.customCorners ) {
 270 | 						handle.element = paper
 271 | 							.image(ft.opts.customCorners.corners[i].image, ft.attrs.center.x, ft.attrs.center.y, ft.opts.customCorners.size, ft.opts.customCorners.size);
 272 | 					} else {
 273 | 						handle.element = paper
 274 | 							.rect(ft.attrs.center.x, ft.attrs.center.y, ft.opts.size[handle.isCorner ? 'bboxCorners' : 'bboxSides' ] * 2, ft.opts.size[handle.isCorner ? 'bboxCorners' : 'bboxSides' ] * 2)
 275 | 							.attr(ft.opts.attrs);
 276 | 
 277 | 						if ( handle.isCorner ) {
 278 | 							handle.element.node.setAttribute('class', 'handle bbox corner index-' + i + ' axis-' + handle.axis);
 279 | 						} else {
 280 | 							handle.element.node.setAttribute('class', 'handle bbox side index-' + ( i - 4 ) + ' axis-' + handle.axis);
 281 | 						}
 282 | 					}
 283 | 
 284 | 					ft.handles.bbox[i] = handle;
 285 | 				}
 286 | 			}
 287 | 
 288 | 			if ( ft.opts.draw.indexOf('circle') !== -1 ) {
 289 | 				ft.circle = paper
 290 | 					.circle(0, 0, 0)
 291 | 					.attr({
 292 | 						stroke: ft.opts.attrs.stroke,
 293 | 						'stroke-dasharray': '- ',
 294 | 						opacity: .3
 295 | 					});
 296 | 			}
 297 | 
 298 | 			if ( ft.opts.drag.indexOf('center') !== -1 ) {
 299 | 				ft.handles.center = {};
 300 | 
 301 | 				ft.handles.center.disc = paper
 302 | 					.circle(ft.attrs.center.x, ft.attrs.center.y, ft.opts.size.center)
 303 | 					.attr(ft.opts.attrs);
 304 | 
 305 | 				ft.handles.center.disc.node.setAttribute('class', 'handle center');
 306 | 			}
 307 | 
 308 | 			// Drag x, y handles and custom corners
 309 | 			ft.axes.map(function(axis) {
 310 | 				if ( ft.handles[axis] ) {
 311 | 					handles.push({
 312 | 						element:  ft.handles[axis].disc,
 313 | 						rotate:   ft.opts.rotate.indexOf('axis' + axis.toUpperCase()) !== -1,
 314 | 						scale:    ft.opts.scale .indexOf('axis' + axis.toUpperCase()) !== -1,
 315 | 						axis:     axis,
 316 | 						isCorner: false
 317 | 					});
 318 | 				}
 319 | 			});
 320 | 
 321 | 			if ( ft.opts.customCorners ) {
 322 | 				ft.handles.bbox.map(function(handle) {
 323 | 					var action;
 324 | 
 325 | 					if ( typeof ft.opts.customCorners.corners[handle.index] !== 'undefined' ) {
 326 | 						action = ft.opts.customCorners.corners[handle.index].action;
 327 | 
 328 | 						if ( action === 'rotate' || action === 'scale' ) {
 329 | 							handles.push({
 330 | 								element:  handle.element,
 331 | 								rotate:   action === 'rotate',
 332 | 								scale:    action === 'scale',
 333 | 								axis:     'x',
 334 | 								isCorner: true
 335 | 							});
 336 | 						}
 337 | 					}
 338 | 				});
 339 | 			}
 340 | 
 341 | 			handles.map(function(handle) {
 342 | 				handle.element.drag(function(dx, dy) {
 343 | 					var
 344 | 						cx, cy, rad, opposite, adjacent, hypotenuse, pos,
 345 | 						mirrored = {
 346 | 							x: ft.o.scale.x < 0,
 347 | 							y: ft.o.scale.y < 0
 348 | 						};
 349 | 
 350 | 					// viewBox might be scaled
 351 | 					if ( ft.o.viewBoxRatio ) {
 352 | 						dx *= ft.o.viewBoxRatio.x;
 353 | 						dy *= ft.o.viewBoxRatio.y;
 354 | 					}
 355 | 
 356 | 					cx = dx + handle.element.ox,
 357 | 					cy = dy + handle.element.oy;
 358 | 
 359 | 					if ( handle.rotate ) {
 360 | 						rad = Math.atan2(cy - ft.o.center.y - ft.o.translate.y, cx - ft.o.center.x - ft.o.translate.x);
 361 | 
 362 | 						ft.attrs.rotate = rad * 180 / Math.PI - ft.o.angle;
 363 | 
 364 | 						if ( mirrored[handle.axis] ) {
 365 | 							ft.attrs.rotate -= 180;
 366 | 						}
 367 | 					}
 368 | 
 369 | 					// Keep handle within boundaries
 370 | 					if ( ft.opts.boundary ) {
 371 | 						cx = Math.max(Math.min(cx, ft.opts.boundary.x + ( ft.opts.boundary.width  || getPaperSize().x * (ft.o.viewBoxRatio && ft.o.viewBoxRatio.x || 1))), ft.opts.boundary.x);
 372 | 						cy = Math.max(Math.min(cy, ft.opts.boundary.y + ( ft.opts.boundary.height || getPaperSize().y * (ft.o.viewBoxRatio && ft.o.viewBoxRatio.y || 1))), ft.opts.boundary.y);
 373 | 					}
 374 | 
 375 | 					opposite   = cx - ft.o.center.x - ft.o.translate.x - ( ft.opts.customCorners ? ft.opts.customCorners.distance : 0 ),
 376 | 					adjacent   = cy - ft.o.center.y - ft.o.translate.y - ( ft.opts.customCorners ? ft.opts.customCorners.distance : 0 ),
 377 | 					hypotenuse = Math.sqrt(Math.pow(opposite, 2) + Math.pow(adjacent, 2));
 378 | 
 379 | 					if ( handle.scale ) {
 380 | 						ft.attrs.scale[handle.axis] = hypotenuse / ( ft.o.size[handle.axis] / 2 * ft.o.distance );
 381 | 
 382 | 						if ( mirrored[handle.axis] ) {
 383 | 							ft.attrs.scale[handle.axis] *= -1;
 384 | 						}
 385 | 					}
 386 | 
 387 | 					applyLimits();
 388 | 
 389 | 					// Maintain aspect ratio
 390 | 					if ( ft.opts.keepRatio.indexOf('axis' + handle.axis.toUpperCase()) !== -1 ) {
 391 | 						keepRatio(handle.axis);
 392 | 					} else {
 393 | 						ft.attrs.ratio = ft.attrs.scale.x / ft.attrs.scale.y;
 394 | 					}
 395 | 
 396 | 					if ( ft.attrs.scale.x && ft.attrs.scale.y ) {
 397 | 						ft.apply();
 398 | 					}
 399 | 
 400 | 					asyncCallback([ handle.rotate ? 'rotate' : null, handle.scale ? 'scale' : null ]);
 401 | 				}, function() {
 402 | 					// Offset values
 403 | 					ft.o = cloneObj(ft.attrs);
 404 | 
 405 | 					if ( paper._viewBox ) {
 406 | 						ft.o.viewBoxRatio = {
 407 | 							x: paper._viewBox[2] / getPaperSize().x,
 408 | 							y: paper._viewBox[3] / getPaperSize().y
 409 | 						};
 410 | 					}
 411 | 
 412 | 					handle.element.ox = this.attrs.cx ? this.attrs.cx : this.attrs.x + this.attrs.width  / 2;
 413 | 					handle.element.oy = this.attrs.cy ? this.attrs.cy : this.attrs.y + this.attrs.height / 2;
 414 | 
 415 | 					if ( handle.isCorner ) {
 416 | 						hypotenuse = Math.sqrt(Math.pow(ft.o.size.x * ft.o.scale.x, 2) + Math.pow(ft.o.size.y * ft.o.scale.y, 2)) / 2,
 417 | 						opposite   = ft.o.size.x * ft.o.scale.x / 2,
 418 | 						pos        = {
 419 | 							x: handle.element.ox - ( ft.o.center.x + ft.o.x + ft.o.translate.x ),
 420 | 							y: handle.element.oy - ( ft.o.center.y + ft.o.y + ft.o.translate.y )
 421 | 						};
 422 | 
 423 | 						// Distance from centre of handle to centre of element
 424 | 						ft.o.distance = hypotenuse / opposite;
 425 | 
 426 | 						ft.o.angle = 90 - ( Math.atan2(pos.x, pos.y) * 180 / Math.PI ) - ft.o.rotate;
 427 | 					} else {
 428 | 						ft.o.distance = ft.opts.distance;
 429 | 						ft.o.angle    = handle.axis === 'y' ? 90 : 0;
 430 | 					}
 431 | 
 432 | 					asyncCallback([ handle.rotate ? 'rotate start' : null, handle.scale ? 'scale start' : null ]);
 433 | 				}, function() {
 434 | 					asyncCallback([ handle.rotate ? 'rotate end'   : null, handle.scale ? 'scale end'   : null ]);
 435 | 				});
 436 | 			});
 437 | 
 438 | 			// Drag bbox handles
 439 | 			if ( ft.opts.draw.indexOf('bbox') >= 0 && !ft.opts.customCorners && ( ft.opts.scale.indexOf('bboxCorners') !== -1 || ft.opts.scale.indexOf('bboxSides') !== -1 ) ) {
 440 | 				ft.handles.bbox.map(function(handle) {
 441 | 					handle.element.drag(function(dx, dy) {
 442 | 						var
 443 | 							sin, cos, rx, ry, rdx, rdy, mx, my, sx, sy, ratio, tdy, tdx,
 444 | 							previous = cloneObj(ft.attrs),
 445 | 							trans    = { x: 0, y: 0 };
 446 | 
 447 | 						// viewBox might be scaled
 448 | 						if ( ft.o.viewBoxRatio ) {
 449 | 							dx *= ft.o.viewBoxRatio.x;
 450 | 							dy *= ft.o.viewBoxRatio.y;
 451 | 						}
 452 | 
 453 | 						sin = ft.o.rotate.sin;
 454 | 						cos = ft.o.rotate.cos;
 455 | 
 456 | 						// First rotate dx, dy to element alignment
 457 | 						rx = dx * cos - dy * sin;
 458 | 						ry = dx * sin + dy * cos;
 459 | 
 460 | 						rx *= Math.abs(handle.x);
 461 | 						ry *= Math.abs(handle.y);
 462 | 
 463 | 						// And finally rotate back to canvas alignment
 464 | 						rdx = rx *   cos + ry * sin;
 465 | 						rdy = rx * - sin + ry * cos;
 466 | 
 467 | 						ft.attrs.translate = {
 468 | 							x: ft.o.translate.x + rdx / 2,
 469 | 							y: ft.o.translate.y + rdy / 2
 470 | 						};
 471 | 
 472 | 						// Mouse position, relative to element center after translation
 473 | 						mx = ft.o.handlePos.cx + dx - ft.attrs.center.x - ft.attrs.translate.x;
 474 | 						my = ft.o.handlePos.cy + dy - ft.attrs.center.y - ft.attrs.translate.y;
 475 | 
 476 | 						// Position rotated to align with element
 477 | 						rx = mx * cos - my * sin;
 478 | 						ry = mx * sin + my * cos;
 479 | 
 480 | 						// Maintain aspect ratio
 481 | 						if ( handle.isCorner && ft.opts.keepRatio.indexOf('bboxCorners') !== -1 ) {
 482 | 							ratio = ( ft.attrs.size.x * ft.attrs.scale.x ) / ( ft.attrs.size.y * ft.attrs.scale.y ),
 483 | 							tdy   = rx * handle.x * ( 1 / ratio ),
 484 | 							tdx   = ry * handle.y * ratio;
 485 | 
 486 | 							if ( tdx > tdy * ratio ) {
 487 | 								rx = tdx * handle.x;
 488 | 							} else {
 489 | 								ry = tdy * handle.y;
 490 | 							}
 491 | 						}
 492 | 
 493 | 						// Scale element so that handle is at mouse position
 494 | 						sx = rx * 2 * handle.x / ft.o.size.x;
 495 | 						sy = ry * 2 * handle.y / ft.o.size.y;
 496 | 
 497 | 						ft.attrs.scale = {
 498 | 							x: sx || ft.attrs.scale.x,
 499 | 							y: sy || ft.attrs.scale.y
 500 | 						};
 501 | 
 502 | 						// Check boundaries
 503 | 						if ( !isWithinBoundaries().x || !isWithinBoundaries().y ) { ft.attrs = previous; }
 504 | 
 505 | 						applyLimits();
 506 | 
 507 | 						// Maintain aspect ratio
 508 | 						if ( ( handle.isCorner && ft.opts.keepRatio.indexOf('bboxCorners') !== -1 ) || ( !handle.isCorner && ft.opts.keepRatio.indexOf('bboxSides') !== -1 ) ) {
 509 | 							keepRatio(handle.axis);
 510 | 
 511 | 							trans.x = ( ft.attrs.scale.x - ft.o.scale.x ) * ft.o.size.x * handle.x;
 512 | 							trans.y = ( ft.attrs.scale.y - ft.o.scale.y ) * ft.o.size.y * handle.y;
 513 | 
 514 | 							rx =   trans.x * cos + trans.y * sin;
 515 | 							ry = - trans.x * sin + trans.y * cos;
 516 | 
 517 | 							ft.attrs.translate.x = ft.o.translate.x + rx / 2;
 518 | 							ft.attrs.translate.y = ft.o.translate.y + ry / 2;
 519 | 						}
 520 | 
 521 | 						ft.attrs.ratio = ft.attrs.scale.x / ft.attrs.scale.y;
 522 | 
 523 | 						asyncCallback([ 'scale' ]);
 524 | 
 525 | 						ft.apply();
 526 | 					}, function() {
 527 | 						var
 528 | 							angle     = ( ( 360 - ft.attrs.rotate ) % 360 ) / 180 * Math.PI,
 529 | 							handlePos = handle.element.attr(['x', 'y']);
 530 | 
 531 | 						// Offset values
 532 | 						ft.o = cloneObj(ft.attrs);
 533 | 
 534 | 						ft.o.handlePos = {
 535 | 							cx: handlePos.x + ft.opts.size[handle.isCorner ? 'bboxCorners' : 'bboxSides'],
 536 | 							cy: handlePos.y + ft.opts.size[handle.isCorner ? 'bboxCorners' : 'bboxSides']
 537 | 						};
 538 | 
 539 | 						// Pre-compute rotation sin & cos for efficiency
 540 | 						ft.o.rotate = {
 541 | 							sin: Math.sin(angle),
 542 | 							cos: Math.cos(angle)
 543 | 						};
 544 | 
 545 | 						if ( paper._viewBox ) {
 546 | 							ft.o.viewBoxRatio = {
 547 | 								x: paper._viewBox[2] / getPaperSize().x,
 548 | 								y: paper._viewBox[3] / getPaperSize().y
 549 | 							};
 550 | 						}
 551 | 
 552 | 						asyncCallback([ 'scale start' ]);
 553 | 					}, function() {
 554 | 						asyncCallback([ 'scale end' ]);
 555 | 					});
 556 | 				});
 557 | 			}
 558 | 
 559 | 			// Custom BBox corners
 560 | 			if ( ft.opts.customCorners ) {
 561 | 				ft.handles.bbox.map(function(handle) {
 562 | 					if ( typeof ft.opts.customCorners.corners[handle.index] !== 'undefined' ) {
 563 | 						if ( [ 'drag', 'rotate', 'scale' ].indexOf(ft.opts.customCorners.corners[handle.index].action) === -1 ) {
 564 | 							// Unknown action, absorb drag event and emit as custom event on click
 565 | 							handle.element.drag(function() {
 566 | 								return false;
 567 | 							});
 568 | 
 569 | 							handle.element.click(function() {
 570 | 								asyncCallback([ 'custom:' + ft.opts.customCorners.corners[handle.index].action ]);
 571 | 							});
 572 | 						}
 573 | 					}
 574 | 				});
 575 | 			}
 576 | 
 577 | 			// Drag element and center handle
 578 | 			if ( ft.opts.drag.indexOf('self') >= 0 && ft.opts.scale.indexOf('self') === -1 && ft.opts.rotate.indexOf('self') === -1 ) {
 579 | 				draggables.push(subject);
 580 | 			}
 581 | 
 582 | 			if ( ft.opts.drag.indexOf('center') >= 0 ) {
 583 | 				draggables.push(ft.handles.center.disc);
 584 | 			}
 585 | 
 586 | 			if ( ft.opts.customCorners ) {
 587 | 				ft.handles.bbox.map(function(handle) {
 588 | 					if ( typeof ft.opts.customCorners.corners[handle.index] !== 'undefined' ) {
 589 | 						if ( ft.opts.customCorners.corners[handle.index].action === 'drag' ) {
 590 | 							draggables.push(handle.element);
 591 | 						}
 592 | 					}
 593 | 				});
 594 | 			}
 595 | 
 596 | 			draggables.map(function(draggable) {
 597 | 				draggable.drag(function(dx, dy) {
 598 | 					var bbox = cloneObj(ft.o.bbox);
 599 | 
 600 | 					// viewBox might be scaled
 601 | 					if ( ft.o.viewBoxRatio ) {
 602 | 						dx *= ft.o.viewBoxRatio.x;
 603 | 						dy *= ft.o.viewBoxRatio.y;
 604 | 					}
 605 | 
 606 | 					ft.attrs.translate.x = ft.o.translate.x + dx;
 607 | 					ft.attrs.translate.y = ft.o.translate.y + dy;
 608 | 
 609 | 					bbox.x += dx;
 610 | 					bbox.y += dy;
 611 | 
 612 | 					applyLimits(bbox);
 613 | 
 614 | 					asyncCallback([ 'drag' ]);
 615 | 
 616 | 					ft.apply();
 617 | 				}, function() {
 618 | 					// Offset values
 619 | 					ft.o = cloneObj(ft.attrs);
 620 | 
 621 | 					if ( ft.opts.snap.drag ) {
 622 | 						ft.o.bbox = subject.getBBox();
 623 | 					}
 624 | 
 625 | 					// viewBox might be scaled
 626 | 					if ( paper._viewBox ) {
 627 | 						ft.o.viewBoxRatio = {
 628 | 							x: paper._viewBox[2] / getPaperSize().x,
 629 | 							y: paper._viewBox[3] / getPaperSize().y
 630 | 						};
 631 | 					}
 632 | 
 633 | 					ft.axes.map(function(axis) {
 634 | 						if ( ft.handles[axis] ) {
 635 | 							ft.handles[axis].disc.ox = ft.handles[axis].disc.attrs.cx;
 636 | 							ft.handles[axis].disc.oy = ft.handles[axis].disc.attrs.cy;
 637 | 						}
 638 | 					});
 639 | 
 640 | 					asyncCallback([ 'drag start' ]);
 641 | 				}, function() {
 642 | 					asyncCallback([ 'drag end' ]);
 643 | 				});
 644 | 			});
 645 | 
 646 | 			rotate = ft.opts.rotate.indexOf('self') >= 0,
 647 | 			scale  = ft.opts.scale .indexOf('self') >= 0;
 648 | 
 649 | 			if ( rotate || scale ) {
 650 | 				subject.drag(function(dx, dy, x, y) {
 651 | 					var
 652 | 						rad, radius,
 653 | 						mirrored = {
 654 | 							x: ft.o.scale.x < 0,
 655 | 							y: ft.o.scale.y < 0
 656 | 						};
 657 | 
 658 | 					if ( rotate ) {
 659 | 						rad = Math.atan2(y - ft.o.center.y - ft.o.translate.y, x - ft.o.center.x - ft.o.translate.x);
 660 | 
 661 | 						ft.attrs.rotate = ft.o.rotate + ( rad * 180 / Math.PI ) - ft.o.deg;
 662 | 					}
 663 | 
 664 | 					if ( scale ) {
 665 | 						radius = Math.sqrt(Math.pow(x - ft.o.center.x - ft.o.translate.x, 2) + Math.pow(y - ft.o.center.y - ft.o.translate.y, 2));
 666 | 
 667 | 						ft.attrs.scale.x = ft.attrs.scale.y = ( mirrored.x ? -1 : 1 ) * ft.o.scale.x + ( radius - ft.o.radius ) / ( ft.o.size.x / 2 );
 668 | 
 669 | 						if ( mirrored.x ) { ft.attrs.scale.x *= -1; }
 670 | 						if ( mirrored.y ) { ft.attrs.scale.y *= -1; }
 671 | 					}
 672 | 
 673 | 					applyLimits();
 674 | 
 675 | 					ft.apply();
 676 | 
 677 | 					asyncCallback([ rotate ? 'rotate' : null, scale ? 'scale' : null ]);
 678 | 				}, function(x, y) {
 679 | 					// Offset values
 680 | 					ft.o = cloneObj(ft.attrs);
 681 | 
 682 | 					ft.o.deg = Math.atan2(y - ft.o.center.y - ft.o.translate.y, x - ft.o.center.x - ft.o.translate.x) * 180 / Math.PI;
 683 | 
 684 | 					ft.o.radius = Math.sqrt(Math.pow(x - ft.o.center.x - ft.o.translate.x, 2) + Math.pow(y - ft.o.center.y - ft.o.translate.y, 2));
 685 | 
 686 | 					// viewBox might be scaled
 687 | 					if ( paper._viewBox ) {
 688 | 						ft.o.viewBoxRatio = {
 689 | 							x: paper._viewBox[2] / getPaperSize().x,
 690 | 							y: paper._viewBox[3] / getPaperSize().y
 691 | 						};
 692 | 					}
 693 | 
 694 | 					asyncCallback([ rotate ? 'rotate start' : null, scale ? 'scale start' : null ]);
 695 | 				}, function() {
 696 | 					asyncCallback([ rotate ? 'rotate end'   : null, scale ? 'scale end'   : null ]);
 697 | 				});
 698 | 			}
 699 | 
 700 | 			ft.updateHandles();
 701 | 
 702 | 			return ft;
 703 | 		};
 704 | 
 705 | 		/**
 706 | 		 * Remove handles
 707 | 		 */
 708 | 		ft.hideHandles = function(opts) {
 709 | 			var opts = opts || {}
 710 | 
 711 | 			if ( opts.undrag === undefined ) {
 712 | 				opts.undrag = true;
 713 | 			}
 714 | 
 715 | 			if ( opts.undrag ) {
 716 | 				ft.items.map(function(item) {
 717 | 					item.el.undrag();
 718 | 				});
 719 | 			}
 720 | 
 721 | 			if ( ft.handles.center ) {
 722 | 				ft.handles.center.disc.remove();
 723 | 
 724 | 				ft.handles.center = null;
 725 | 			}
 726 | 
 727 | 			[ 'x', 'y' ].map(function(axis) {
 728 | 				if ( ft.handles[axis] ) {
 729 | 					ft.handles[axis].disc.remove();
 730 | 					ft.handles[axis].line.remove();
 731 | 
 732 | 					ft.handles[axis] = null;
 733 | 				}
 734 | 			});
 735 | 
 736 | 			if ( ft.bbox ) {
 737 | 				ft.bbox.remove();
 738 | 
 739 | 				ft.bbox = null;
 740 | 
 741 | 				if ( ft.handles.bbox ) {
 742 | 					ft.handles.bbox.map(function(handle) {
 743 | 						handle.element.remove();
 744 | 					});
 745 | 
 746 | 					ft.handles.bbox = null;
 747 | 				}
 748 | 			}
 749 | 
 750 | 			if ( ft.circle ) {
 751 | 				ft.circle.remove();
 752 | 
 753 | 				ft.circle = null;
 754 | 			}
 755 | 
 756 | 			return ft;
 757 | 		};
 758 | 
 759 | 		// Override defaults
 760 | 		ft.setOpts = function(options, callback) {
 761 | 			var i, j;
 762 | 
 763 | 			if ( callback !== undefined ) {
 764 | 				ft.callback = typeof callback === 'function' ? callback : false;
 765 | 			}
 766 | 
 767 | 			for ( i in options ) {
 768 | 				if ( options[i] && options[i].constructor === Object ) {
 769 | 					if(ft.opts[i] === false){
 770 |             ft.opts[i] = {};
 771 |           }
 772 | 					for ( j in options[i] ) {
 773 | 						if ( options[i].hasOwnProperty(j) ) {
 774 | 							ft.opts[i][j] = options[i][j];
 775 | 						}
 776 | 					}
 777 | 				} else {
 778 | 					ft.opts[i] = options[i];
 779 | 				}
 780 | 			}
 781 | 
 782 | 			if ( ft.opts.animate === true ) {
 783 | 				ft.opts.animate = { delay: 700, easing: 'linear' };
 784 | 			}
 785 | 
 786 | 			if ( ft.opts.drag === true ) {
 787 | 				ft.opts.drag = [ 'center', 'self' ];
 788 | 			}
 789 | 
 790 | 			if ( ft.opts.keepRatio === true ) {
 791 | 				ft.opts.keepRatio = [ 'axisX', 'axisY', 'bboxCorners', 'bboxSides' ];
 792 | 			}
 793 | 
 794 | 			if ( ft.opts.rotate === true ) {
 795 | 				ft.opts.rotate = [ 'axisX', 'axisY' ];
 796 | 			}
 797 | 
 798 | 			if ( ft.opts.scale === true ) {
 799 | 				ft.opts.scale = [ 'axisX', 'axisY', 'bboxCorners', 'bboxSides' ];
 800 | 			}
 801 | 
 802 | 			[ 'drag', 'draw', 'keepRatio', 'rotate', 'scale' ].map(function(option) {
 803 | 				if ( ft.opts[option] === false ) {
 804 | 					ft.opts[option] = [];
 805 | 				}
 806 | 			});
 807 | 
 808 | 			ft.axes = [];
 809 | 
 810 | 			if ( ft.opts.rotate.indexOf('axisX') >= 0 || ft.opts.scale.indexOf('axisX') >= 0 ) {
 811 | 				ft.axes.push('x');
 812 | 			}
 813 | 
 814 | 			if ( ft.opts.rotate.indexOf('axisY') >= 0 || ft.opts.scale.indexOf('axisY') >= 0 ) {
 815 | 				ft.axes.push('y');
 816 | 			}
 817 | 
 818 | 			[ 'drag', 'rotate', 'scale' ].map(function(option) {
 819 | 				if ( !ft.opts.snapDist[option] ) {
 820 | 					ft.opts.snapDist[option] = ft.opts.snap[option];
 821 | 				}
 822 | 			});
 823 | 
 824 | 			// Force numbers
 825 | 			ft.opts.range = {
 826 | 				rotate: [ parseFloat(ft.opts.range.rotate[0]), parseFloat(ft.opts.range.rotate[1]) ],
 827 | 				scale:  [ parseFloat(ft.opts.range.scale[0]),  parseFloat(ft.opts.range.scale[1])  ]
 828 | 			};
 829 | 
 830 | 			ft.opts.snap = {
 831 | 				drag:   parseFloat(ft.opts.snap.drag)   || 0,
 832 | 				rotate: parseFloat(ft.opts.snap.rotate) || 0,
 833 | 				scale:  parseFloat(ft.opts.snap.scale)  || 0
 834 | 			};
 835 | 
 836 | 			ft.opts.snapDist = {
 837 | 				drag:   parseFloat(ft.opts.snapDist.drag)   || 0,
 838 | 				rotate: parseFloat(ft.opts.snapDist.rotate) || 0,
 839 | 				scale:  parseFloat(ft.opts.snapDist.scale)  || 0
 840 | 			};
 841 | 
 842 | 			if ( typeof ft.opts.size === 'string' ) {
 843 | 				ft.opts.size = parseFloat(ft.opts.size) || 0;
 844 | 			}
 845 | 
 846 | 			if ( !isNaN(ft.opts.size) ) {
 847 | 				ft.opts.size = {
 848 | 					axes:        ft.opts.size,
 849 | 					bboxCorners: ft.opts.size,
 850 | 					bboxSides:   ft.opts.size,
 851 | 					center:      ft.opts.size
 852 | 				};
 853 | 			}
 854 | 
 855 | 			if ( ft.opts.customCorners ) {
 856 | 				ft.opts.customCorners.size     = parseFloat(ft.opts.customCorners.size)     || 0;
 857 | 				ft.opts.customCorners.distance = parseFloat(ft.opts.customCorners.distance) || 0;
 858 | 			}
 859 | 
 860 | 			ft.showHandles();
 861 | 
 862 | 			asyncCallback([ 'init' ]);
 863 | 
 864 | 			return ft;
 865 | 		};
 866 | 
 867 | 		ft.setOpts(options, callback);
 868 | 
 869 | 		/**
 870 | 		 * Apply transformations, optionally update attributes manually
 871 | 		 */
 872 | 		ft.apply = function() {
 873 | 			ft.items.map(function(item, i) {
 874 | 				// Take offset values into account
 875 | 				var
 876 | 					center = {
 877 | 						x: ft.attrs.center.x + ft.offset.translate.x,
 878 | 						y: ft.attrs.center.y + ft.offset.translate.y
 879 | 					},
 880 | 					rotate    = ft.attrs.rotate - ft.offset.rotate,
 881 | 					scale     = {
 882 | 						x: ft.attrs.scale.x / ft.offset.scale.x,
 883 | 						y: ft.attrs.scale.y / ft.offset.scale.y
 884 | 					},
 885 | 					translate = {
 886 | 						x: ft.attrs.translate.x - ft.offset.translate.x,
 887 | 						y: ft.attrs.translate.y - ft.offset.translate.y
 888 | 					};
 889 | 
 890 | 				if ( ft.opts.animate ) {
 891 | 					asyncCallback([ 'animate start' ]);
 892 | 
 893 | 					item.el.animate(
 894 | 						{ transform: [
 895 | 							'R', rotate, center.x, center.y,
 896 | 							'S', scale.x, scale.y, center.x, center.y,
 897 | 							'T', translate.x, translate.y
 898 | 						] + ft.items[i].transformString },
 899 | 						ft.opts.animate.delay,
 900 | 						ft.opts.animate.easing,
 901 | 						function() {
 902 | 							asyncCallback([ 'animate end' ]);
 903 | 
 904 | 							ft.updateHandles();
 905 | 						}
 906 | 					);
 907 | 				} else {
 908 | 					item.el.transform([
 909 | 						'R', rotate, center.x, center.y,
 910 | 						'S', scale.x, scale.y, center.x, center.y,
 911 | 						'T', translate.x, translate.y
 912 | 					] + ft.items[i].transformString);
 913 | 
 914 | 					asyncCallback([ 'apply' ]);
 915 | 
 916 | 					ft.updateHandles();
 917 | 				}
 918 | 			});
 919 | 
 920 | 			return ft;
 921 | 		};
 922 | 
 923 | 		/**
 924 | 		 * Clean exit
 925 | 		 */
 926 | 		ft.unplug = function() {
 927 | 			var attrs = ft.attrs;
 928 | 
 929 | 			ft.hideHandles();
 930 | 
 931 | 			// Goodbye
 932 | 			delete subject.freeTransform;
 933 | 
 934 | 			return attrs;
 935 | 		};
 936 | 
 937 | 		// Store attributes for each item
 938 | 		function scan(subject) {
 939 | 			( subject.type === 'set' ? subject.items : [ subject ] ).map(function(item) {
 940 | 				if ( item.type === 'set' ) {
 941 | 					scan(item);
 942 | 				} else {
 943 | 					ft.items.push({
 944 | 						el: item,
 945 | 						attrs: {
 946 | 							rotate:    0,
 947 | 							scale:     { x: 1, y: 1 },
 948 | 							translate: { x: 0, y: 0 }
 949 | 						},
 950 | 						transformString: item.matrix.toTransformString()
 951 | 					});
 952 | 				}
 953 | 			});
 954 | 		}
 955 | 
 956 | 		scan(subject);
 957 | 
 958 | 		// Get the current transform values for each item
 959 | 		ft.items.map(function(item, i) {
 960 | 			if ( item.el._ && item.el._.transform && typeof item.el._.transform === 'object' ) {
 961 | 				item.el._.transform.map(function(transform) {
 962 | 					if ( transform[0] ) {
 963 | 						switch ( transform[0].toUpperCase() ) {
 964 | 							case 'T':
 965 | 								ft.items[i].attrs.translate.x += transform[1];
 966 | 								ft.items[i].attrs.translate.y += transform[2];
 967 | 
 968 | 								break;
 969 | 							case 'S':
 970 | 								ft.items[i].attrs.scale.x *= transform[1];
 971 | 								ft.items[i].attrs.scale.y *= transform[2];
 972 | 
 973 | 								break;
 974 | 							case 'R':
 975 | 								ft.items[i].attrs.rotate += transform[1];
 976 | 
 977 | 								break;
 978 | 						}
 979 | 					}
 980 | 				});
 981 | 			}
 982 | 		});
 983 | 
 984 | 		// If subject is not of type set, the first item _is_ the subject
 985 | 		if ( subject.type !== 'set' ) {
 986 | 			ft.attrs.rotate    = ft.items[0].attrs.rotate;
 987 | 			ft.attrs.scale     = ft.items[0].attrs.scale;
 988 | 			ft.attrs.translate = ft.items[0].attrs.translate;
 989 | 
 990 | 			ft.items[0].attrs = {
 991 | 				rotate:    0,
 992 | 				scale:     { x: 1, y: 1 },
 993 | 				translate: { x: 0, y: 0 }
 994 | 			};
 995 | 
 996 | 			ft.items[0].transformString = '';
 997 | 		}
 998 | 
 999 | 		ft.attrs.ratio = ft.attrs.scale.x / ft.attrs.scale.y;
1000 | 
1001 | 		/**
1002 | 		 * Get rotated bounding box
1003 | 		 */
1004 | 		function getBBox(distance) {
1005 | 			var
1006 | 				rad, radius,
1007 | 				corners = [],
1008 | 				signs   = [ { x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 } ];
1009 | 
1010 | 			if ( typeof distance !== 'number' ) {
1011 | 				distance = 0;
1012 | 			}
1013 | 
1014 | 			rad = {
1015 | 				x: ( ft.attrs.rotate      ) * Math.PI / 180,
1016 | 				y: ( ft.attrs.rotate + 90 ) * Math.PI / 180
1017 | 			};
1018 | 
1019 | 			radius = {
1020 | 				x: ft.attrs.size.x / 2 * ft.attrs.scale.x + distance,
1021 | 				y: ft.attrs.size.y / 2 * ft.attrs.scale.y + distance
1022 | 			};
1023 | 
1024 | 			signs.map(function(sign) {
1025 | 				corners.push({
1026 | 					x: ( ft.attrs.center.x + ft.attrs.translate.x + sign.x * radius.x * Math.cos(rad.x) ) + sign.y * radius.y * Math.cos(rad.y),
1027 | 					y: ( ft.attrs.center.y + ft.attrs.translate.y + sign.x * radius.x * Math.sin(rad.x) ) + sign.y * radius.y * Math.sin(rad.y)
1028 | 				});
1029 | 			});
1030 | 
1031 | 			return corners;
1032 | 		}
1033 | 
1034 | 		/**
1035 | 		 * Get dimension of the paper
1036 | 		 */
1037 | 		function getPaperSize() {
1038 | 			var match = {
1039 | 				x: /^([0-9]+)%$/.exec(paper.width),
1040 | 				y: /^([0-9]+)%$/.exec(paper.height)
1041 | 			};
1042 | 
1043 | 			return {
1044 | 				x: match.x ? paper.canvas.clientWidth  || paper.canvas.parentNode.clientWidth  * parseInt(match.x[1], 10) * 0.01 : paper.canvas.clientWidth  || paper.width,
1045 | 				y: match.y ? paper.canvas.clientHeight || paper.canvas.parentNode.clientHeight * parseInt(match.y[1], 10) * 0.01 : paper.canvas.clientHeight || paper.height
1046 | 			};
1047 | 		}
1048 | 
1049 | 		/**
1050 | 		 * Apply limits
1051 | 		 */
1052 | 		function applyLimits(bbox) {
1053 | 			var
1054 | 				x, y, deg,
1055 | 				dist = { x: 0, y: 0 },
1056 | 				snap = { x: 0, y: 0 };
1057 | 
1058 | 			// Snap to grid
1059 | 			if ( bbox && ft.opts.snap.drag ) {
1060 | 				x = bbox.x,
1061 | 				y = bbox.y,
1062 | 
1063 | 				[ 0, 1 ].map(function() {
1064 | 					// Top and left sides first
1065 | 					dist.x = x - Math.round(x / ft.opts.snap.drag) * ft.opts.snap.drag;
1066 | 					dist.y = y - Math.round(y / ft.opts.snap.drag) * ft.opts.snap.drag;
1067 | 
1068 | 					if ( Math.abs(dist.x) <= ft.opts.snapDist.drag ) { snap.x = dist.x; }
1069 | 					if ( Math.abs(dist.y) <= ft.opts.snapDist.drag ) { snap.y = dist.y; }
1070 | 
1071 | 					// Repeat for bottom and right sides
1072 | 					x += bbox.width  - snap.x;
1073 | 					y += bbox.height - snap.y;
1074 | 				});
1075 | 
1076 | 				ft.attrs.translate.x -= snap.x;
1077 | 				ft.attrs.translate.y -= snap.y;
1078 | 			}
1079 | 
1080 | 			// Keep center within boundaries
1081 | 			if ( ft.opts.boundary ) {
1082 | 				ft.opts.boundarywidth  = ft.opts.boundarywidth  || getPaperSize().x * (ft.o.viewBoxRatio && ft.o.viewBoxRatio.x || 1);
1083 | 				ft.opts.boundaryheight = ft.opts.boundaryheight || getPaperSize().y * (ft.o.viewBoxRatio && ft.o.viewBoxRatio.y || 1);
1084 | 
1085 | 				if ( ft.attrs.center.x + ft.attrs.translate.x < ft.opts.boundary.x ) {
1086 | 					ft.attrs.translate.x += ft.opts.boundary.x - ( ft.attrs.center.x + ft.attrs.translate.x );
1087 | 				}
1088 | 
1089 | 				if ( ft.attrs.center.y + ft.attrs.translate.y < ft.opts.boundary ) {
1090 | 					ft.attrs.translate.y += ft.opts.boundary - ( ft.attrs.center.y + ft.attrs.translate.y );
1091 | 				}
1092 | 
1093 | 				if ( ft.attrs.center.x + ft.attrs.translate.x > ft.opts.boundary.x + ft.opts.boundarywidth  ) {
1094 | 					ft.attrs.translate.x += ft.opts.boundary.x + ft.opts.boundarywidth - ( ft.attrs.center.x + ft.attrs.translate.x );
1095 | 				}
1096 | 
1097 | 				if ( ft.attrs.center.y + ft.attrs.translate.y > ft.opts.boundary + ft.opts.boundaryheight ) {
1098 | 					ft.attrs.translate.y += ft.opts.boundary + ft.opts.boundaryheight - ( ft.attrs.center.y + ft.attrs.translate.y );
1099 | 				}
1100 | 			}
1101 | 
1102 | 			// Snap to angle, rotate with increments
1103 | 			dist = Math.abs(ft.attrs.rotate % ft.opts.snap.rotate);
1104 | 			dist = Math.min(dist, ft.opts.snap.rotate - dist);
1105 | 
1106 | 			if ( dist < ft.opts.snapDist.rotate ) {
1107 | 				ft.attrs.rotate = Math.round(ft.attrs.rotate / ft.opts.snap.rotate) * ft.opts.snap.rotate;
1108 | 			}
1109 | 
1110 | 			// Snap to scale, scale with increments
1111 | 			dist = {
1112 | 				x: Math.abs(( ft.attrs.scale.x * ft.attrs.size.x ) % ft.opts.snap.scale),
1113 | 				y: Math.abs(( ft.attrs.scale.y * ft.attrs.size.x ) % ft.opts.snap.scale)
1114 | 			};
1115 | 
1116 | 			dist = {
1117 | 				x: Math.min(dist.x, ft.opts.snap.scale - dist.x),
1118 | 				y: Math.min(dist.y, ft.opts.snap.scale - dist.y)
1119 | 			};
1120 | 
1121 | 			if ( dist.x < ft.opts.snapDist.scale ) {
1122 | 				ft.attrs.scale.x = Math.round(ft.attrs.scale.x * ft.attrs.size.x / ft.opts.snap.scale) * ft.opts.snap.scale / ft.attrs.size.x;
1123 | 			}
1124 | 
1125 | 			if ( dist.y < ft.opts.snapDist.scale ) {
1126 | 				ft.attrs.scale.y = Math.round(ft.attrs.scale.y * ft.attrs.size.y / ft.opts.snap.scale) * ft.opts.snap.scale / ft.attrs.size.y;
1127 | 			}
1128 | 
1129 | 			// Limit range of rotation
1130 | 			if ( ft.opts.range.rotate ) {
1131 | 				deg = ( 360 + ft.attrs.rotate ) % 360;
1132 | 
1133 | 				if ( deg > 180 ) { deg -= 360; }
1134 | 
1135 | 				if ( deg < ft.opts.range.rotate[0] ) { ft.attrs.rotate += ft.opts.range.rotate[0] - deg; }
1136 | 				if ( deg > ft.opts.range.rotate[1] ) { ft.attrs.rotate += ft.opts.range.rotate[1] - deg; }
1137 | 			}
1138 | 
1139 | 			// Limit scale
1140 | 			if ( ft.opts.range.scale ) {
1141 | 				if ( ft.attrs.scale.x * ft.attrs.size.x < ft.opts.range.scale[0] ) {
1142 | 					ft.attrs.scale.x = ft.opts.range.scale[0] / ft.attrs.size.x;
1143 | 				}
1144 | 
1145 | 				if ( ft.attrs.scale.y * ft.attrs.size.y < ft.opts.range.scale[0] ) {
1146 | 					ft.attrs.scale.y = ft.opts.range.scale[0] / ft.attrs.size.y;
1147 | 				}
1148 | 
1149 | 				if ( ft.attrs.scale.x * ft.attrs.size.x > ft.opts.range.scale[1] ) {
1150 | 					ft.attrs.scale.x = ft.opts.range.scale[1] / ft.attrs.size.x;
1151 | 				}
1152 | 
1153 | 				if ( ft.attrs.scale.y * ft.attrs.size.y > ft.opts.range.scale[1] ) {
1154 | 					ft.attrs.scale.y = ft.opts.range.scale[1] / ft.attrs.size.y;
1155 | 				}
1156 | 			}
1157 | 		}
1158 | 
1159 | 		function isWithinBoundaries() {
1160 | 			return {
1161 | 				x: ft.attrs.scale.x * ft.attrs.size.x >= ft.opts.range.scale[0] && ft.attrs.scale.x * ft.attrs.size.x <= ft.opts.range.scale[1],
1162 | 				y: ft.attrs.scale.y * ft.attrs.size.y >= ft.opts.range.scale[0] && ft.attrs.scale.y * ft.attrs.size.y <= ft.opts.range.scale[1]
1163 | 			};
1164 | 		}
1165 | 
1166 | 		function keepRatio(axis) {
1167 | 			if ( axis === 'x' ) {
1168 | 				ft.attrs.scale.y = ft.attrs.scale.x / ft.attrs.ratio;
1169 | 			} else {
1170 | 				ft.attrs.scale.x = ft.attrs.scale.y * ft.attrs.ratio;
1171 | 			}
1172 | 		}
1173 | 
1174 | 		/**
1175 | 		 * Recursive copy of object
1176 | 		 */
1177 | 		function cloneObj(obj) {
1178 | 			var i, clone = {};
1179 | 
1180 | 			for ( i in obj ) {
1181 | 				clone[i] = typeof obj[i] === 'object' ? cloneObj(obj[i]) : obj[i];
1182 | 			}
1183 | 
1184 | 			return clone;
1185 | 		}
1186 | 
1187 | 		/**
1188 | 		 * Call callback asynchronously for better performance
1189 | 		 */
1190 | 		function asyncCallback(e) {
1191 | 			var events = [];
1192 | 
1193 | 			if ( ft.callback ) {
1194 | 				// Remove empty values
1195 | 				e.map(function(e, i) {
1196 | 					if ( e ) {
1197 | 						events.push(e);
1198 | 					}
1199 | 				});
1200 | 
1201 | 				clearTimeout(timeout);
1202 | 
1203 | 				timeout = setTimeout(function() {
1204 | 					if ( ft.callback ) {
1205 | 						ft.callback(ft, events, getBBox());
1206 | 					}
1207 | 				}, .1);
1208 | 			}
1209 | 		}
1210 | 
1211 | 		ft.updateHandles();
1212 | 
1213 | 		// Enable method chaining
1214 | 		return ft;
1215 | 	};
1216 | }));
1217 | 


--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AliasIO/Raphael.FreeTransform/6316e7ccf5881bb5748e812544e332a734ea7063/screenshot.png


--------------------------------------------------------------------------------