diff --git a/frontend/src/Metamaps/Listeners.js b/frontend/src/Metamaps/Listeners.js index cbd138fd..8b4d6616 100644 --- a/frontend/src/Metamaps/Listeners.js +++ b/frontend/src/Metamaps/Listeners.js @@ -7,6 +7,7 @@ import Mobile from './Mobile' import Realtime from './Realtime' import Selected from './Selected' import Topic from './Topic' +import Util from './Util' import Visualize from './Visualize' import { Search } from './GlobalUI' @@ -108,16 +109,19 @@ const Listeners = { }) $(window).resize(function () { - if (Visualize && Visualize.mGraph) Visualize.mGraph.canvas.resize($(window).width(), $(window).height()) + if (Visualize && Visualize.mGraph) { + Util.resizeCanvas(Visualize.mGraph.canvas) + } + if (Active.Map && Realtime.inConversation) Realtime.positionVideos() Mobile.resizeTitle() }) }, - centerAndReveal: function(nodes, opts) { + centerAndReveal: function (nodes, opts) { if (nodes.length < 1) return var node = nodes[nodes.length - 1] if (opts.center && opts.reveal) { - Topic.centerOn(node.id, function() { + Topic.centerOn(node.id, function () { Topic.fetchRelatives(nodes) }) } else if (opts.center) { diff --git a/frontend/src/Metamaps/Util.js b/frontend/src/Metamaps/Util.js index 32730a6f..445a898c 100644 --- a/frontend/src/Metamaps/Util.js +++ b/frontend/src/Metamaps/Util.js @@ -1,3 +1,5 @@ +/* global $ */ + import { Parser, HtmlRenderer } from 'commonmark' import Visualize from './Visualize' @@ -126,6 +128,25 @@ const Util = { // use safe: true to filter xss return new HtmlRenderer({ safe: true }) .render(new Parser().parse(text)) + }, + logCanvasAttributes: function(canvas){ + return { + scaleX: canvas.scaleOffsetX, + scaleY: canvas.scaleOffsetY, + centreCoords: Util.pixelsToCoords({ x: canvas.canvases[0].size.width / 2, y: canvas.canvases[0].size.height / 2 }), + }; + }, + resizeCanvas: function(canvas){ + // Store the current canvas attributes, i.e. scale and map-coordinate at the centre of the user's screen + const oldAttr = Util.logCanvasAttributes(canvas); + + // Resize the canvas to fill the new window size. Based on how JIT works, this also resets the map back to scale 1 and tranlations = 0 + canvas.resize($(window).width(), $(window).height()) + + // Return the map to the original scale, and then put the previous central map-coordinate back to the centre of user's newly resized screen + canvas.scale(oldAttr.scaleX, oldAttr.scaleY) + const newAttr = Util.logCanvasAttributes(canvas); + canvas.translate(newAttr.centreCoords.x - oldAttr.centreCoords.x, newAttr.centreCoords.y - oldAttr.centreCoords.y) } }