if !@visible

        @clearElements()

        return

      window.debug_adjUpdateDisplay++

      @spanClass = if @adj.config.emptyBox then 'empty' else ''

      @displayValue = @adj.getDisplayValue()

      center = @adj.getCenter()

      target = @adj.getTarget()

      #log("adj updateDisplay center #{center.elements} target #{target.elements}")

      return if isNaN(center.e(1))

      @centerStyle = {x: center.e(1), y: center.e(2)}

      @dia.setAdjusterConnector(@adj.id + '/conn', center, target)

  attached: ->

    drag = d3.drag()

    sel = d3.select(@$.label)

    sel.call(drag)

    drag.subject((d) -> {x: @offsetLeft, y: @offsetTop})

    drag.container(@offsetParent)

    drag.on('start', () => @adj?.startDrag())

    drag.on 'drag', () =>

      @adj?.continueDrag($V([d3.event.x, d3.event.y]))

    drag.on('end', () => @adj?.endDrag())

      @ctx.stroke()

Polymer

  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) ->

    # 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

    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

      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.shadowColor = 'black'