diff --git a/app/assets/javascripts/src/Metamaps.JIT.js b/app/assets/javascripts/src/Metamaps.JIT.js index bef4ad59..6678004a 100644 --- a/app/assets/javascripts/src/Metamaps.JIT.js +++ b/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'; diff --git a/app/assets/javascripts/src/Metamaps.js b/app/assets/javascripts/src/Metamaps.js index 37614179..37a12278 100644 --- a/app/assets/javascripts/src/Metamaps.js +++ b/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.height = 1260; // 630 + canvas.canvas.width = WIDTH; + 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'; diff --git a/app/assets/stylesheets/clean.css b/app/assets/stylesheets/clean.css index 4ecd3120..eb2d0d3a 100644 --- a/app/assets/stylesheets/clean.css +++ b/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%; diff --git a/app/views/layouts/_lowermapelements.html.erb b/app/views/layouts/_lowermapelements.html.erb index 50e4296e..fc182b4d 100644 --- a/app/views/layouts/_lowermapelements.html.erb +++ b/app/views/layouts/_lowermapelements.html.erb @@ -1,5 +1,8 @@
-
Capture Screenshot
+
+
Capture Current View
+
Capture Full Map
+
Center View
Zoom In
Zoom Out