Merge pull request #738 from metamaps/window.resize.fix

Makes it so that resizing the browser window doesn't change the user's current location on the map
This commit is contained in:
Robert Best 2016-10-22 02:12:54 -04:00 committed by GitHub
commit ea20ba45b3
2 changed files with 28 additions and 3 deletions

View file

@ -7,6 +7,7 @@ import Mobile from './Mobile'
import Realtime from './Realtime' import Realtime from './Realtime'
import Selected from './Selected' import Selected from './Selected'
import Topic from './Topic' import Topic from './Topic'
import Util from './Util'
import Visualize from './Visualize' import Visualize from './Visualize'
import { Search } from './GlobalUI' import { Search } from './GlobalUI'
@ -108,16 +109,19 @@ const Listeners = {
}) })
$(window).resize(function () { $(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() if (Active.Map && Realtime.inConversation) Realtime.positionVideos()
Mobile.resizeTitle() Mobile.resizeTitle()
}) })
}, },
centerAndReveal: function(nodes, opts) { centerAndReveal: function (nodes, opts) {
if (nodes.length < 1) return if (nodes.length < 1) return
var node = nodes[nodes.length - 1] var node = nodes[nodes.length - 1]
if (opts.center && opts.reveal) { if (opts.center && opts.reveal) {
Topic.centerOn(node.id, function() { Topic.centerOn(node.id, function () {
Topic.fetchRelatives(nodes) Topic.fetchRelatives(nodes)
}) })
} else if (opts.center) { } else if (opts.center) {

View file

@ -1,3 +1,5 @@
/* global $ */
import { Parser, HtmlRenderer } from 'commonmark' import { Parser, HtmlRenderer } from 'commonmark'
import Visualize from './Visualize' import Visualize from './Visualize'
@ -126,6 +128,25 @@ const Util = {
// use safe: true to filter xss // use safe: true to filter xss
return new HtmlRenderer({ safe: true }) return new HtmlRenderer({ safe: true })
.render(new Parser().parse(text)) .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)
} }
} }