# Some value you can edit in the UI, probably by dragging

  # stuff. Drawn by light9-adjusters-canvas. This object does the

     #dia, #adjusters, #cursorCanvas, #adjustersCanvas {

    <light9-adjusters-canvas id="adjustersCanvas" set-adjuster="{{setAdjuster}}">

    </light9-adjusters-canvas>

<dom-module id="light9-adjusters-canvas">

  <template>

    <style>

     #canvas, :host {

         pointer-events: none;

     }

    </style>

    <canvas id="canvas"></canvas>

  </template>

</dom-module>

<!-- All the adjusters you can edit or select. Tells a light9-adjusters-canvas how to draw them. Probabaly doesn't need to be an element.

    @setAdjuster = @$.adjustersCanvas.setAdjuster.bind(@$.adjustersCanvas)

    @forwardMouseEventsToAdjustersCanvas()

    @$.adjustersCanvas.updateAllCoords()

  forwardMouseEventsToAdjustersCanvas: ->

    ac = @$.adjustersCanvas

    @addEventListener('mousedown', ac.onDown.bind(ac))

    @addEventListener('mousemove', ac.onMove.bind(ac))

    @addEventListener('mouseup', ac.onUp.bind(ac))

      @$.adjustersCanvas.updateAllCoords()

class deleteme

  go: ->

_line = (ctx, p1, p2) ->

  ctx.moveTo(p1.e(1), p1.e(2))

  ctx.lineTo(p2.e(1), p2.e(2))

# http://stackoverflow.com/a/4959890

_roundRect = (ctx, sx,sy,ex,ey,r) ->

    d2r = Math.PI/180

    r = ( ( ex - sx ) / 2 ) if ( ex - sx ) - ( 2 * r ) < 0 # ensure that the radius isn't too large for x

    r = ( ( ey - sy ) / 2 ) if ( ey - sy ) - ( 2 * r ) < 0 # ensure that the radius isn't too large for y

    ctx.beginPath();

    ctx.moveTo(sx+r,sy);

    ctx.lineTo(ex-r,sy);

    ctx.arc(ex-r,sy+r,r,d2r*270,d2r*360,false);

    ctx.lineTo(ex,ey-r);

    ctx.arc(ex-r,ey-r,r,d2r*0,d2r*90,false);

    ctx.lineTo(sx+r,ey);

    ctx.arc(sx+r,ey-r,r,d2r*90,d2r*180,false);

    ctx.lineTo(sx,sy+r);

    ctx.arc(sx+r,sy+r,r,d2r*180,d2r*270,false);

    ctx.closePath();

    _line(@ctx, $V([0, @mouseY]), $V([@$.canvas.width, @mouseY]))

    _line(@ctx, $V([@mouseX, 0]), $V([@mouseX, @$.canvas.height]))

      _line(@ctx, @cursorPath.top0, @cursorPath.top1)

      _line(@ctx, @cursorPath.bot0, @cursorPath.bot1, '#ff0303', '3px')

  is: 'light9-adjusters-canvas'

  behaviors: [ Polymer.IronResizableBehavior ]

  properties:

    adjs: { type: Object, notify: true }, # adjId: Adjustable

  listeners: 'iron-resize': 'update'

  ready: ->

    @adjs = {}

    @ctx = @$.canvas.getContext('2d')

    @redraw()

  onDown: (ev) ->

    if ev.buttons == 1

      ev.stopPropagation()

      start = $V([ev.x, ev.y])

      adj = @adjAtPoint(start)

      if adj

        @currentDrag = {start: start, adj: adj}

        adj.startDrag()

  onMove: (ev) ->

    pos = $V([ev.x, ev.y])

    if @currentDrag

      @currentDrag.cur = pos

      @currentDrag.adj.continueDrag(@currentDrag.cur.subtract(@currentDrag.start))

  onUp: (ev) ->

    return unless @currentDrag

    @currentDrag.adj.endDrag()

    @currentDrag = null

  setAdjuster: (adjId, makeAdjustable) ->

    # callers register/unregister the Adjustables they want us to make

    # adjuster elements for. Caller invents adjId.  makeAdjustable is

    # a function returning the Adjustable or it is null to clear any

    # adjusters with this id.

    if not @adjs[adjId] or not makeAdjustable?

      if not makeAdjustable?

        delete @adjs[adjId]

      else

        adj = makeAdjustable()

        @adjs[adjId] = adj

        adj.id = adjId

    # this is relying on makeCurveAdjusters always calling setAdjuster

    # whenever the values may have changed

    @debounce('adjsChanged', @adjsChanged.bind(@), 10)

    window.debug_adjsCount = Object.keys(@adjs).length

  adjsChanged: ->

    @updateAllCoords()

  layoutCenters: ->

    # push Adjustable centers around to avoid overlaps

    # Todo: also don't overlap inlineattr boxes

    @qt = d3.quadtree([], ((d)->d.e(1)), ((d)->d.e(2)))

    @qt.extent([[0,0], [8000,8000]])

    for _, adj of @adjs

      desired = adj.getSuggestedCenter()

      output = desired

      for tries in [0...2]

        nearest = @qt.find(output.e(1), output.e(2))

        if nearest

          dist = output.distanceFrom(nearest)

          if dist < 60

            away = output.subtract(nearest).toUnitVector()

            toScreenCenter = $V([500,200]).subtract(output).toUnitVector()

            output = output.add(away.x(60).add(toScreenCenter.x(10)))

      if -50 < output.e(1) < 20 # mostly for zoom-left

        output.setElements([

          Math.max(20, output.e(1)),

          output.e(2)])

      adj.centerOffset = output.subtract(adj.getTarget())

      output.adj = adj

      @qt.add(output)

  adjAtPoint: (pt) ->

    nearest = @qt.find(pt.e(1), pt.e(2))

    if not nearest? or nearest.distanceFrom(pt) > 50

      return null

    return nearest?.adj

  updateAllCoords: ->

    @layoutCenters()

    @redraw()

  update: (ev) ->

    @$.canvas.width = ev.target.offsetWidth

    @$.canvas.height = ev.target.offsetHeight

    @redraw()

  redraw: (adjs) ->

    @ctx.clearRect(0, 0, @$.canvas.width, @$.canvas.height)

    for adjId, adj of @adjs

      ctr = adj.getCenter()

      target = adj.getTarget()

      @drawConnector(ctr, target)

      @drawAdjuster(adj.getDisplayValue(),

                    Math.floor(ctr.e(1)) - 20, Math.floor(ctr.e(2)) - 10,

                    Math.floor(ctr.e(1)) + 20, Math.floor(ctr.e(2)) + 10)

  drawConnector: (ctr, target) ->

    @ctx.strokeStyle = '#aaa'

    @ctx.lineWidth = 2

    @ctx.beginPath()

    _line(@ctx, ctr, target)

    @ctx.stroke()

  drawAdjuster: (label, x1, y1, x2, y2) ->

    radius = 8

    @ctx.fillStyle = 'rgba(255, 255, 0, 0.5)'

    @ctx.beginPath()

    _roundRect(@ctx, x1, y1, x2, y2, radius)

    @ctx.fill()

    @ctx.strokeStyle = 'yellow'

    @ctx.lineWidth = 3

    @ctx.setLineDash([3, 3])

    @ctx.beginPath()

    _roundRect(@ctx, x1, y1, x2, y2, radius)

    @ctx.stroke()

    @ctx.setLineDash([])

    @ctx.font = "12px sans"

    @ctx.fillStyle = '#000'

    @ctx.fillText(label, x1 + 5, y2 - 5, x2 - x1 - 10)

    # coords from a center that's passed in

    # # special layout for the thaeter ones with middinh 

    # l/r arrows

    # connector

Polymer