 
     transitions[k] = addArrow v
 
-  graph.addCells cells
+  render()
 
 #

gridMultiplier = 20 # in pixels
gridCellWidth = 10 # * gridMultiplier for pixels
gridCellHeight = 4 # * gridMultiplier for pixels
gridCellsH = "P".charCodeAt(0) - "A".charCodeAt(0) + 1
gridCellsV = 26
paperWidth = gridMultiplier * gridCellWidth * (gridCellsH + 1)
paperHeight = gridMultiplier * gridCellHeight * (gridCellsV + 1)

graph = new joint.dia.Graph()
paper = new joint.dia.Paper {
  el: $ '#paper'
  width: paperWidth
  height: paperHeight
  gridSize: gridMultiplier
  model: graph
  async: true
}
cells = []

# GRID

V(paper.svg).defs().append V """
<pattern id="smallGrid" width="#{gridMultiplier}" height="#{gridMultiplier}" patternUnits="userSpaceOnUse">
  <path d="M #{gridMultiplier} 0 L 0 0 0 #{gridMultiplier}" fill="none" stroke="#EEEEEE" stroke-width="0.5"/>
</pattern>
<pattern id="grid" width="#{gridMultiplier * 10}" height="#{gridMultiplier * 4}" patternUnits="userSpaceOnUse">
  <rect width="#{gridMultiplier * 10}" height="#{gridMultiplier * 4}" fill="url(#smallGrid)"/>
  <path d="M #{gridMultiplier * 10} 0 L 0 0 0 #{gridMultiplier * 4}" fill="none" stroke="#EEEEEE" stroke-width="1"/>
</pattern>
"""
V(paper.svg).prepend V """
<rect width="100%" height="100%" fill="url(#grid)" />
"""

# COLS,LINS

do () ->
  for i in [1..gridCellsH]
    cells.push new joint.shapes.basic.Text {
      position:
        x: gridMultiplier * gridCellWidth * i
        y: 0
      size:
        width: 'auto'
        height: 'auto'
      attrs:
        text:
          text: String.fromCharCode("A".charCodeAt(0) + i - 1)
          'font-size': gridMultiplier * .5
    }
    cells.push new joint.shapes.basic.Text {
      position:
        x: gridMultiplier * gridCellWidth * i
        y: paperHeight - gridMultiplier
      size:
        width: 'auto'
        height: 'auto'
      attrs:
        text:
          text: String.fromCharCode("A".charCodeAt(0) + i - 1)
          'font-size': gridMultiplier * .5
    }
  for i in [1..gridCellsV]
    cells.push new joint.shapes.basic.Text {
      position:
        x: 0
        y: gridMultiplier * gridCellHeight * i
      size:
        width: 'auto'
        height: 'auto'
      attrs:
        text:
          text: '' + i
          'font-size': gridMultiplier * .5
    }
    cells.push new joint.shapes.basic.Text {
      position:
        x: paperWidth - gridMultiplier
        y: gridMultiplier * gridCellHeight * i
      size:
        width: 'auto'
        height: 'auto'
      attrs:
        text:
          text: '' + i
          'font-size': gridMultiplier * .5
    }

# GRAPH OVERRIDE


  x += x  if x.length is 1
  x = x.charCodeAt(0) + (x.charCodeAt(1) - x.charCodeAt(0))/2
  x = x - "A".charCodeAt(0) + 1
  if x > gridCellsH then gridCellsH = x
  x = gridMultiplier * gridCellWidth * x
  # y
  y = parseInt y, 10
  if y > gridCellsV then gridCellsV = y
  y = gridMultiplier * gridCellHeight * y
  {x, y, col, lin}

