     return 'translate(' + (@viewport.center.x+@viewport.origin.x+@viewport.x-@viewport.offsetx) + ',' + (@viewport.center.y+@viewport.origin.y+@viewport.y-@viewport.offsety) + ')scale(' + @viewport.scale + ')'
 
 
+  # Navigation Methods
+  # ---------------
+
+  zoomIn: ->
+    @zoom @viewport.scale*1.2
+    
+  zoomOut: ->
+    @zoom @viewport.scale/1.2
+  
+  zoom: (value) ->
+    @viewport.scale = value
+    @container
+      .transition()
+        .duration(500)
+        .attr 'transform', @getContainerTransform()
+
+
   # Events Methods
   # ---------------
 
   # Canvas Drag Events
-  onCanvasDrag: =>
+  onCanvasDragStart: =>
+    @svg.style('cursor','move')
+
+  onCanvasDragged: =>
     @viewport.x  += d3.event.dx
     @viewport.y  += d3.event.dy
     @viewport.dx += d3.event.dx

    @rescale()
    d3.event.sourceEvent.stopPropagation()  # silence other listeners

  onCanvasDragStart: =>
    @svg.style('cursor','move')

  onCanvasDragEnd: =>
    # Skip if viewport has no translation
    if @viewport.dx == 0 and @viewport.dy == 0
      Backbone.trigger 'visualization.node.hideInfo'
      return
    # TODO! Add viewportMove action to history
    @viewport.dx = @viewport.dy = 0;
    @svg.style('cursor','default')

  # Nodes drag events
  onNodeDragStart: (d) =>
    # d3.event.sourceEvent.stopPropagation() # silence other listeners


  onNodeDoubleClick: (d) =>
    # unfix the node position when the node is double clicked
    @force.unfix d
    #d.fixed = false

  # Tick Function
  onTick: =>
