codecombat/app/lib/surface/CoordinateDisplay.coffee

158 lines
5.4 KiB
CoffeeScript
Raw Normal View History

2014-01-03 13:32:13 -05:00
module.exports = class CoordinateDisplay extends createjs.Container
layerPriority: -10
subscriptions:
'surface:mouse-moved': 'onMouseMove'
'surface:mouse-out': 'onMouseOut'
'surface:mouse-over': 'onMouseOver'
2014-03-12 20:50:59 -04:00
'surface:stage-mouse-down': 'onMouseDown'
2014-01-03 13:32:13 -05:00
'camera:zoom-updated': 'onZoomUpdated'
constructor: (options) ->
super()
@initialize()
@camera = options.camera
2014-06-30 22:16:26 -04:00
console.error 'CoordinateDisplay needs camera.' unless @camera
2014-01-03 13:32:13 -05:00
@build()
@show = _.debounce @show, 125
2014-01-03 13:32:13 -05:00
Backbone.Mediator.subscribe(channel, @[func], @) for channel, func of @subscriptions
destroy: ->
Backbone.Mediator.unsubscribe(channel, @[func], @) for channel, func of @subscriptions
@show = null
@destroyed = true
2014-01-03 13:32:13 -05:00
build: ->
@mouseEnabled = @mouseChildren = false
@addChild @background = new createjs.Shape()
2014-06-30 22:16:26 -04:00
@addChild @label = new createjs.Text('', 'bold 16px Arial', '#FFFFFF')
@addChild @pointMarker = new createjs.Shape()
@label.name = 'Coordinate Display Text'
2014-06-30 22:16:26 -04:00
@label.shadow = new createjs.Shadow('#000000', 1, 1, 0)
@background.name = 'Coordinate Display Background'
@pointMarker.name = 'Point Marker'
2014-01-03 13:32:13 -05:00
onMouseOver: (e) -> @mouseInBounds = true
onMouseOut: (e) -> @mouseInBounds = false
onMouseMove: (e) ->
if @mouseInBounds and key.shift
$('#surface').addClass('flag-cursor') unless $('#surface').hasClass('flag-cursor')
else if @mouseInBounds
$('#surface').removeClass('flag-cursor') if $('#surface').hasClass('flag-cursor')
2014-05-12 16:28:46 -04:00
wop = @camera.screenToWorld x: e.x, y: e.y
2014-01-03 13:32:13 -05:00
wop.x = Math.round(wop.x)
wop.y = Math.round(wop.y)
return if wop.x is @lastPos?.x and wop.y is @lastPos?.y
@lastPos = wop
@hide()
@show() # debounced
2014-03-12 20:50:59 -04:00
onMouseDown: (e) ->
return unless key.shift
2014-05-12 16:28:46 -04:00
wop = @camera.screenToWorld x: e.x, y: e.y
2014-03-12 20:50:59 -04:00
wop.x = Math.round wop.x
wop.y = Math.round wop.y
Backbone.Mediator.publish 'surface:coordinate-selected', wop
2014-01-03 13:32:13 -05:00
onZoomUpdated: (e) ->
@hide()
@show()
hide: ->
return unless @label.parent
@removeChild @label
@removeChild @background
@removeChild @pointMarker
2014-01-03 13:32:13 -05:00
@uncache()
updateSize: ->
2014-05-12 16:28:46 -04:00
margin = 3
contentWidth = @label.getMeasuredWidth() + (2 * margin)
contentHeight = @label.getMeasuredHeight() + (2 * margin)
2014-08-01 00:14:54 -04:00
# Shift pointmarker up so it centers at pointer (affects container cache position)
@pointMarker.regY = contentHeight
pointMarkerStroke = 2
pointMarkerLength = 8
2014-08-01 00:14:54 -04:00
fullPointMarkerLength = pointMarkerLength + (pointMarkerStroke / 2)
contributionsToTotalSize = []
2014-08-01 00:14:54 -04:00
contributionsToTotalSize = contributionsToTotalSize.concat @updateCoordinates contentWidth, contentHeight, fullPointMarkerLength
contributionsToTotalSize = contributionsToTotalSize.concat @updatePointMarker 0, contentHeight, pointMarkerLength, pointMarkerStroke
totalWidth = contentWidth + contributionsToTotalSize.reduce (a, b) -> a + b
totalHeight = contentHeight + contributionsToTotalSize.reduce (a, b) -> a + b
if @isNearTopEdge()
verticalEdge =
startPos: -fullPointMarkerLength
posShift: -contentHeight + 4
else
verticalEdge =
startPos: -totalHeight + fullPointMarkerLength
posShift: contentHeight
if @isNearRightEdge()
horizontalEdge =
startPos: -totalWidth + fullPointMarkerLength
posShift: totalWidth
else
horizontalEdge =
startPos: -fullPointMarkerLength
posShift: 0
@orient verticalEdge, horizontalEdge, totalHeight, totalWidth
isNearTopEdge: ->
yRatio = 1 - (@camera.worldViewport.y - @lastPos.y) / @camera.worldViewport.height
yRatio > 0.9
isNearRightEdge: ->
xRatio = (@lastPos.x - @camera.worldViewport.x) / @camera.worldViewport.width
xRatio > 0.85
orient: (verticalEdge, horizontalEdge, totalHeight, totalWidth) ->
@label.regY = @background.regY = verticalEdge.posShift
@label.regX = @background.regX = horizontalEdge.posShift
@cache horizontalEdge.startPos, verticalEdge.startPos, totalWidth, totalHeight
updateCoordinates: (contentWidth, contentHeight, offset) ->
# Center label horizontally and vertically
@label.x = contentWidth / 2 - (@label.getMeasuredWidth() / 2) + offset
@label.y = contentHeight / 2 - (@label.getMeasuredHeight() / 2) - offset
@background.graphics
.clear()
2014-06-30 22:16:26 -04:00
.beginFill('rgba(0,0,0,0.4)')
.beginStroke('rgba(0,0,0,0.6)')
.setStrokeStyle(backgroundStroke = 1)
.drawRoundRect(offset, -offset, contentWidth, contentHeight, radius = 2.5)
.endFill()
.endStroke()
contributionsToTotalSize = [offset, backgroundStroke]
updatePointMarker: (centerX, centerY, length, strokeSize) ->
strokeStyle = 'square'
@pointMarker.graphics
.beginStroke('rgb(255, 255, 255)')
.setStrokeStyle(strokeSize, strokeStyle)
.moveTo(centerX, centerY - length)
.lineTo(centerX, centerY + length)
.moveTo(centerX - length, centerY)
.lineTo(centerX + length, centerY)
.endStroke()
contributionsToTotalSize = [strokeSize, length]
2014-01-03 13:32:13 -05:00
show: =>
return unless @mouseInBounds and @lastPos and not @destroyed
@label.text = "{x: #{@lastPos.x}, y: #{@lastPos.y}}"
@updateSize()
2014-01-03 13:32:13 -05:00
sup = @camera.worldToSurface @lastPos
@x = sup.x
@y = sup.y
@addChild @background
2014-01-03 13:32:13 -05:00
@addChild @label
@addChild @pointMarker
@updateCache()
2014-01-03 13:32:13 -05:00
Backbone.Mediator.publish 'surface:coordinates-shown', {}