basic code in place for taking a screenshot of the current view

app/assets/javascripts/src/Metamaps.JIT.js

@@ -26,7 +26,12 @@ Metamaps.JIT = {
         };
         $(".zoomExtents").click(zoomExtents);
 
-        $(".takeScreenshot").click(Metamaps.Map.exportImage);
+        $(".takeScreenshotCurrent").click(function(){
+            Metamaps.Map.exportImage('current');
+        });
+        $(".takeScreenshotFull").click(function(){
+            Metamaps.Map.exportImage('full');
+        });
 
         self.topicDescImage = new Image();
         self.topicDescImage.src = '/assets/topic_description_signifier.png';

app/assets/javascripts/src/Metamaps.js

@@ -4522,19 +4522,26 @@ Metamaps.Map = {
         Metamaps.Map.timeToTurn = 0;
         Metamaps.Map.turnCount = 0;
     },
-    exportImage: function() {
+    exportImage: function(view) {
 
-        var canvas = {};
+        var WIDTH = 1880,
+            HEIGHT = 1260,
+            canvas = {},
+            current = view === 'current' ? true : false,
+            original = Metamaps.Visualize.mGraph.canvas,
+            modScale = original.scaleOffsetX,
+            modTransX = original.translateOffsetX,
+            modTransY = original.translateOffsetY;
 
         canvas.canvas = document.createElement("canvas");
-        canvas.canvas.width  =  1880; // 960;
+        canvas.canvas.width  = WIDTH;
-        canvas.canvas.height = 1260; // 630
+        canvas.canvas.height = HEIGHT;
 
         canvas.scaleOffsetX = 1;
         canvas.scaleOffsetY = 1;
-        canvas.translateOffsetY = 0;
         canvas.translateOffsetX = 0;
-        canvas.denySelected = true;
+        canvas.translateOffsetY = 0;
+        canvas.denySelected = current ? false : true;
 
         canvas.getSize =  function() {
             if(this.size) return this.size;
@@ -4565,7 +4572,7 @@ Metamaps.Map = {
           return this.canvas.getContext("2d");
         };
         // center it
-        canvas.getCtx().translate(1880/2, 1260/2);
+        canvas.getCtx().translate(WIDTH/2, HEIGHT/2);
 
         var mGraph = Metamaps.Visualize.mGraph;
 
@@ -4574,11 +4581,15 @@ Metamaps.Map = {
         var T = !!root.visited;
 
         // pass true to avoid basing it on a selection
-        Metamaps.JIT.zoomExtents(null, canvas, true);
+        if (!current) Metamaps.JIT.zoomExtents(null, canvas, true);
+        else if (current) {
+            canvas.translate(modTransX, modTransY);
+            canvas.getCtx().scale(modScale, modScale);
+        }
 
         var c = canvas.canvas,
             ctx = canvas.getCtx(),
-            scale = canvas.scaleOffsetX;
+            scale = current ? modScale : canvas.scaleOffsetX;
 
         // draw a grey background
         ctx.fillStyle = '#d8d9da';

app/assets/stylesheets/clean.css

@@ -915,16 +915,45 @@
     z-index: 4;
 }
 
-.takeScreenshot {
+.screenshotControls {
+    width: 32px;
+    height: 32px;
     margin-bottom: 5px;
+    position: relative;
+}
+.screenshotControls:hover {
+    height: 64px;
+}
+.screenshotControls:hover .takeScreenshotCurrent {
+    bottom: 32px;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
+.screenshotControls:hover .takeScreenshotFull {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
+.takeScreenshotCurrent {
+    position: absolute;
     border-radius: 2px;
+    bottom: 0;
+    z-index: 0;
+    -webkit-transition: bottom .1s ease-in-out; /* For Safari 3.1 to 6.0 */
+    transition: bottom .1s ease-in-out;
+}
+
+.takeScreenshotFull {
+    position: absolute;
+    border-radius: 2px;
+    bottom: 0;
     background-image: url(screenshot_sprite.png);
     display: none;
+    z-index: 1;
 }
-.takeScreenshot:hover {
+.takeScreenshotFull:hover {
     background-position: -32px 0;
 }
-.canEditMap .takeScreenshot {
+.canEditMap .takeScreenshotFull {
     display: block;
 }
 
@@ -938,7 +967,7 @@
     background-position: -32px 0;
 }
 
-.zoomExtents:hover .tooltips, .zoomIn:hover .tooltips, .zoomOut:hover .tooltips, .takeScreenshot:hover .tooltips, .sidebarCollaborateIcon:hover .tooltipsUnder,
+.zoomExtents:hover .tooltips, .zoomIn:hover .tooltips, .zoomOut:hover .tooltips, .takeScreenshotFull:hover .tooltips, .takeScreenshotCurrent:hover .tooltips, .sidebarCollaborateIcon:hover .tooltipsUnder,
  .sidebarFilterIcon:hover .tooltipsUnder, .sidebarForkIcon:hover .tooltipsUnder, .addMap:hover .tooltipsUnder, .authenticated .sidebarAccountIcon:hover .tooltipsUnder,
  .mapInfoIcon:hover .tooltipsAbove, .openCheatsheet:hover .tooltipsAbove {
     display: block;
@@ -1033,7 +1062,7 @@
     margin-top: 40px;
 }
 
-.zoomExtents div::after, .zoomIn div::after, .zoomOut div::after, .takeScreenshot div:after {
+.zoomExtents div:after, .zoomIn div:after, .zoomOut div:after, .takeScreenshotFull div:after, .takeScreenshotCurrent div:after {
     content: '';
     position: absolute;
     top: 57%;

app/views/layouts/_lowermapelements.html.erb

@@ -1,5 +1,8 @@
 <div class="mapControls mapElement">
-	<div class="takeScreenshot mapControl"><div class="tooltips">Capture Screenshot</div></div>
+  <div class="screenshotControls">
+    <div class="takeScreenshotCurrent mapControl"><div class="tooltips">Capture Current View</div></div>
+	  <div class="takeScreenshotFull mapControl"><div class="tooltips">Capture Full Map</div></div>
+  </div>
 	<div class="zoomExtents mapControl"><div class="tooltips">Center View</div></div>
 	<div class="zoomIn mapControl"><div class="tooltips">Zoom In</div></div>
 	<div class="zoomOut mapControl"><div class="tooltips">Zoom Out</div></div>