Base element

BaseElementView.coffee

define ['backbone', 'underscore', 'plugins/jquery.pep'], (Backbone, _) ->
	Backbone.View.extend
		className: "element"
		initialize: ->
			@render()
		setSize: (w, h) ->
			@el.style.width = @cmToPx(w) + "px"
			@el.style.height = @cmToPx(h) + "px"
		setImage: (image) ->
			@el.style.backgroundImage = "url(#{image})"
		cmToPx: (cm) ->
			Math.round cm / app.config.board.cm_to_pixel
		getPosition: ->
			{ x: parseInt(@el.style.left, 10), y: parseInt(@el.style.top, 10) }
		getBounds: ->
			pos = @getPosition()
			
			return {
				top: pos.y
				right: pos.x + @$el.width()
				bottom: pos.y + @$el.height()
				left: pos.x
			}
		setPosition: (pos) ->
			@el.style.left = "#{ pos.x }px"
			@el.style.top = "#{ pos.y }px"
			@snapToGrid()
		roundPosition: (pos, gridSize = 10) ->
			newX = Math.round(pos.x / gridSize) * gridSize
			newY = Math.round(pos.y / gridSize) * gridSize

			{ x: newX, y: newY }
		enableDrag: ->
			dragOpts =
				disableSelect: no
				removeMargins: no
				velocityMultiplier: 1.3
				constrainTo: "#artboard"
				cssEaseDuration: 400
				cssEaseString: "cubic-bezier(0.190, 1.000, 0.220, 1.000)"
				rest: => @handleDragState "rest"
				
			@$el.pep dragOpts
		handleDragState: (state) ->
			if state is "rest" then @snapToGrid()
		snapToGrid: ->
			# Dummy align to grid functionality
			pos = @roundPosition @getPosition()
			
			@el.style.top = "#{ pos.y }px"
			@el.style.left = "#{ pos.x }px"
		render: ->
			@setSize @model.get("size")[0], @model.get("size")[1]
			@setImage @model.get("image")
			@enableDrag()
			@snapToGrid()

			return @