Render graph partially.

app/assets/javascripts/branch-graph.js.coffee

@@ -9,6 +9,7 @@ class BranchGraph
     @offsetY = 20
     @unitTime = 30
     @unitSpace = 10
+    @prev_start = -1
     @load()
 
   load: ->
@@ -24,10 +25,18 @@ class BranchGraph
 
   prepareData: (@days, @commits) ->
     @collectParents()
+    @graphHeight = $(@element).height()
+    @graphWidth = $(@element).width()
+    ch = Math.max(@graphHeight, @offsetY + @unitTime * @mtime + 150)
+    cw = Math.max(@graphWidth, @offsetX + @unitSpace * @mspace + 300)
+    @r = Raphael(@element.get(0), cw, ch)
+    @top = @r.set()
+    @barHeight = Math.max(@graphHeight, @unitTime * @days.length + 320)
 
     for c in @commits
       c.isParent = true  if c.id of @parents
       @preparedCommits[c.id] = c
+      @markCommit(c)
 
     @collectColors()
 
@@ -49,18 +58,12 @@ class BranchGraph
       k++
 
   buildGraph: ->
-    graphHeight = $(@element).height()
-    graphWidth = $(@element).width()
-    ch = Math.max(graphHeight, @offsetY + @unitTime * @mtime + 150)
-    cw = Math.max(graphWidth, @offsetX + @unitSpace * @mspace + 300)
-    @r = r = Raphael(@element.get(0), cw, ch)
-    top = r.set()
+    r = @r
     cuday = 0
     cumonth = ""
-    barHeight = Math.max(graphHeight, @unitTime * @days.length + 320)
 
-    r.rect(0, 0, 26, barHeight).attr fill: "#222"
-    r.rect(26, 0, 20, barHeight).attr fill: "#444"
+    r.rect(0, 0, 26, @barHeight).attr fill: "#222"
+    r.rect(26, 0, 20, @barHeight).attr fill: "#444"
 
     for day, mm in @days
       if cuday isnt day[0]
@@ -81,22 +84,40 @@ class BranchGraph
           )
         cumonth = day[1]
 
-    for commit in @commits
-      x = @offsetX + @unitSpace * (@mspace - commit.space)
-      y = @offsetY + @unitTime * commit.time
+    @renderPartialGraph()
 
-      @drawDot(x, y, commit)
+    @bindEvents()
 
-      @drawLines(x, y, commit)
+  renderPartialGraph: ->
+    start = Math.floor((@element.scrollTop() - @offsetY) / @unitTime) - 10
+    start = 0 if start < 0
+    end = start + 40
+    end = @commits.length if @commits.length < end
 
-      @appendLabel(x, y, commit.refs)  if commit.refs
+    if @prev_start == -1 or Math.abs(@prev_start - start) > 10
+      i = start
 
-      @appendAnchor(top, commit, x, y)
+      @prev_start = start
 
-      @markCommit(x, y, commit, graphHeight)
+      while i < end
+        commit = @commits[i]
+        i += 1
 
-    top.toFront()
-    @bindEvents()
+        if commit.hasDrawn isnt true
+          x = @offsetX + @unitSpace * (@mspace - commit.space)
+          y = @offsetY + @unitTime * commit.time
+
+          @drawDot(x, y, commit)
+
+          @drawLines(x, y, commit)
+
+          @appendLabel(x, y, commit)
+
+          @appendAnchor(x, y, commit)
+
+          commit.hasDrawn = true
+
+      @top.toFront()
 
   bindEvents: ->
     drag = {}
@@ -114,9 +135,10 @@ class BranchGraph
       $(window).on "mousemove", dragger
 
     $(window).on
-      mouseup: ->
+      mouseup: =>
         $(window).off "mousemove", dragger
-      keydown: (event) ->
+        @renderPartialGraph()
+      keydown: (event) =>
         # left
         element.scrollLeft element.scrollLeft() - 50  if event.keyCode is 37
         # top
@@ -125,17 +147,20 @@ class BranchGraph
         element.scrollLeft element.scrollLeft() + 50  if event.keyCode is 39
         # bottom
         element.scrollTop element.scrollTop() + 50  if event.keyCode is 40
+        @renderPartialGraph()
+
+  appendLabel: (x, y, commit) ->
+    return unless commit.refs
 
-  appendLabel: (x, y, refs) ->
     r = @r
-    shortrefs = refs
+    shortrefs = commit.refs
     # Truncate if longer than 15 chars
     shortrefs = shortrefs.substr(0, 15) + "…"  if shortrefs.length > 17
     text = r.text(x + 4, y, shortrefs).attr(
       "text-anchor": "start"
       font: "10px Monaco, monospace"
       fill: "#FFF"
-      title: refs
+      title: commit.refs
     )
     textbox = text.getBBox()
     # Create rectangle based on the size of the textbox
@@ -156,8 +181,9 @@ class BranchGraph
     # Set text to front
     text.toFront()
 
-  appendAnchor: (top, commit, x, y) ->
+  appendAnchor: (x, y, commit) ->
     r = @r
+    top = @top
     options = @options
     anchor = r.circle(x, y, 10).attr(
       fill: "#000"
@@ -240,16 +266,18 @@ class BranchGraph
           stroke: color
           "stroke-width": 2)
 
-  markCommit: (x, y, commit, graphHeight) ->
+  markCommit: (commit) ->
     if commit.id is @options.commit_id
       r = @r
+      x = @offsetX + @unitSpace * (@mspace - commit.space)
+      y = @offsetY + @unitTime * commit.time
       r.path(["M", x + 5, y, "L", x + 15, y + 4, "L", x + 15, y - 4, "Z"]).attr(
         fill: "#000"
         "fill-opacity": .5
         stroke: "none"
       )
       # Displayed in the center
-      @element.scrollTop(y - graphHeight / 2)
+      @element.scrollTop(y - @graphHeight / 2)
 
 Raphael::commitTooltip = (x, y, commit) ->
   boxWidth = 300