Raphael ellipse resizing

gistfile1.coffee

handleDragMove = (dx, dy, mouseX, mouseY) ->
	angleEllipse = $canvas.data 'rotation'
	centreToMouseX = mouseX - ($canvas.offset().left + ellipse.attr('cx'))
	centreToMouseY = mouseY - ($canvas.offset().top + ellipse.attr('cy'))
	centreToMouse = Math.sqrt(Math.pow(centreToMouseX, 2) + Math.pow(centreToMouseY, 2))
	angleMouse = Math.atan2(centreToMouseY, centreToMouseX)
	if @data 'horizontal'
		updateShapes
			rx: Math.abs(centreToMouse * Math.cos(angleMouse - angleEllipse))
	else
		updateShapes
			ry: Math.abs(centreToMouse * Math.sin(angleMouse - angleEllipse))

updateShapes = (options) ->
	options = $.extend
		cx: ellipse.attr 'cx'
		cy: ellipse.attr 'cy'
		rx: ellipse.attr 'rx'
		ry: ellipse.attr 'ry'
		rotation: $canvas.data('rotation')
	, options

	ellipse.attr
		cx: options.cx
		cy: options.cy
		rx: options.rx
		ry: options.ry
	ellipse.transform "r#{rad2deg options.rotation}"
	$canvas.data rotation: options.rotation

	hHandleX = options.rx * Math.cos options.rotation
	hHandleY = options.rx * Math.sin options.rotation
	handleW.attr
		x: options.cx - hHandleX - handleSize / 2
		y: options.cy - hHandleY - handleSize / 2
	handleE.attr
		x: options.cx + hHandleX - handleSize / 2
		y: options.cy + hHandleY - handleSize / 2

	vHandleX = options.ry * Math.cos(Math.PI / 2 + options.rotation)
	vHandleY = options.ry * Math.sin(Math.PI / 2 + options.rotation)
	handleN.attr
		x: options.cx - vHandleX - handleSize / 2
		y: ellipse.attr('cy') - vHandleY - handleSize / 2
	handleS.attr
		x: options.cx + vHandleX - handleSize / 2
		y: options.cy + vHandleY - handleSize / 2

ellipse = paper.ellipse(0, 0, 1, 1).attr
	fill: 'none'
	stroke: yellow
	'stroke-width': strokeWidth
	'stroke-dasharray': strokeDashPattern
	cursor: 'move'
ellipse.drag (dx, dy) -> # onmove
	updateShapes
		cx: @data('dragStart').cx + dx
		cy: @data('dragStart').cy + dy
, -> # onstart
	@data dragStart:
		cx: @attr 'cx'
		cy: @attr 'cy'

handleProps =
	fill: red
	stroke: yellow
	'stroke-width': handleStrokeWidth
handleW = paper.rect(0, 0, handleSize, handleSize)
	.attr($.extend {}, handleProps, cursor: 'w-resize')
	.drag(handleDragMove)
	.data horizontal: true
handleE = paper.rect(0, 0, handleSize, handleSize)
	.attr($.extend {}, handleProps, cursor: 'e-resize')
	.drag(handleDragMove)
	.data horizontal: true
handleN = paper.rect(0, 0, handleSize, handleSize)
	.attr($.extend {}, handleProps, cursor: 'n-resize')
	.drag(handleDragMove)
	.data horizontal: false
handleS = paper.rect(0, 0, handleSize, handleSize)
	.attr($.extend {}, handleProps, cursor: 's-resize')
	.drag(handleDragMove)
	.data horizontal: false

updateShapes
	cx: $canvas.width() / 2
	cy: $canvas.height() / 2
	rx: $canvas.width() / 4
	ry: $canvas.height() / 3
	rotation: deg2rad(-30)