From 0aeb6caadb20312ac906e9b585df8ed726b8d35c Mon Sep 17 00:00:00 2001 From: Robert Best Date: Fri, 7 Oct 2016 00:33:16 +0000 Subject: [PATCH 1/9] Makes it so that resizing the browser window doesn't change the user's location on the map --- frontend/src/Metamaps/Listeners.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/frontend/src/Metamaps/Listeners.js b/frontend/src/Metamaps/Listeners.js index 5861e15e..08aa9cee 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' @@ -122,7 +123,22 @@ const Listeners = { }) $(window).resize(function () { + var canvas = Visualize.mGraph.canvas, + scaleX = canvas.scaleOffsetX, + scaleY = canvas.scaleOffsetY, + centrePixX = Visualize.mGraph.canvas.canvases[0].size.width / 2, + centrePixY = Visualize.mGraph.canvas.canvases[0].size.height / 2, + centreCoords = Util.pixelsToCoords({x:centrePixX ,y:centrePixY}); + if (Visualize && Visualize.mGraph) Visualize.mGraph.canvas.resize($(window).width(), $(window).height()) + + canvas.scale(scaleX,scaleY); + var newCentrePixX = Visualize.mGraph.canvas.canvases[0].size.width / 2, + newCentrePixY = Visualize.mGraph.canvas.canvases[0].size.height / 2, + newCentreCoords = Util.pixelsToCoords({x:newCentrePixX ,y:newCentrePixY}); + + canvas.translate(newCentreCoords.x - centreCoords.x, newCentreCoords.y - centreCoords.y); + if (Active.Map && Realtime.inConversation) Realtime.positionVideos() Mobile.resizeTitle() }) From b978247785fd4e918a9c93548eba042b23033891 Mon Sep 17 00:00:00 2001 From: Robert Best Date: Fri, 7 Oct 2016 00:51:52 +0000 Subject: [PATCH 2/9] Put all the code within the if statement --- frontend/src/Metamaps/Listeners.js | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/frontend/src/Metamaps/Listeners.js b/frontend/src/Metamaps/Listeners.js index 08aa9cee..bd73e59b 100644 --- a/frontend/src/Metamaps/Listeners.js +++ b/frontend/src/Metamaps/Listeners.js @@ -123,21 +123,23 @@ const Listeners = { }) $(window).resize(function () { - var canvas = Visualize.mGraph.canvas, + if (Visualize && Visualize.mGraph){ + var canvas = Visualize.mGraph.canvas, scaleX = canvas.scaleOffsetX, scaleY = canvas.scaleOffsetY, centrePixX = Visualize.mGraph.canvas.canvases[0].size.width / 2, centrePixY = Visualize.mGraph.canvas.canvases[0].size.height / 2, centreCoords = Util.pixelsToCoords({x:centrePixX ,y:centrePixY}); - - if (Visualize && Visualize.mGraph) Visualize.mGraph.canvas.resize($(window).width(), $(window).height()) - - canvas.scale(scaleX,scaleY); - var newCentrePixX = Visualize.mGraph.canvas.canvases[0].size.width / 2, - newCentrePixY = Visualize.mGraph.canvas.canvases[0].size.height / 2, - newCentreCoords = Util.pixelsToCoords({x:newCentrePixX ,y:newCentrePixY}); - - canvas.translate(newCentreCoords.x - centreCoords.x, newCentreCoords.y - centreCoords.y); + + Visualize.mGraph.canvas.resize($(window).width(), $(window).height()) + + canvas.scale(scaleX,scaleY); + var newCentrePixX = Visualize.mGraph.canvas.canvases[0].size.width / 2, + newCentrePixY = Visualize.mGraph.canvas.canvases[0].size.height / 2, + newCentreCoords = Util.pixelsToCoords({x:newCentrePixX ,y:newCentrePixY}); + + canvas.translate(newCentreCoords.x - centreCoords.x, newCentreCoords.y - centreCoords.y); + } if (Active.Map && Realtime.inConversation) Realtime.positionVideos() Mobile.resizeTitle() From 08f89ee630b35e44625ff4da929664df8c4a2933 Mon Sep 17 00:00:00 2001 From: Robert Best Date: Thu, 6 Oct 2016 23:56:39 -0400 Subject: [PATCH 3/9] Update Listeners.js --- frontend/src/Metamaps/Listeners.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/frontend/src/Metamaps/Listeners.js b/frontend/src/Metamaps/Listeners.js index bd73e59b..48e50a69 100644 --- a/frontend/src/Metamaps/Listeners.js +++ b/frontend/src/Metamaps/Listeners.js @@ -124,6 +124,7 @@ const Listeners = { $(window).resize(function () { if (Visualize && Visualize.mGraph){ + //Find the current canvas scale and map-coordinate at the centre of the user's screen var canvas = Visualize.mGraph.canvas, scaleX = canvas.scaleOffsetX, scaleY = canvas.scaleOffsetY, @@ -131,8 +132,10 @@ const Listeners = { centrePixY = Visualize.mGraph.canvas.canvases[0].size.height / 2, centreCoords = Util.pixelsToCoords({x:centrePixX ,y:centrePixY}); + //Resize the canvas to fill the new indow size, based on how JIT works, this also resets the map back to scale 1 and tranlations = 0 Visualize.mGraph.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(scaleX,scaleY); var newCentrePixX = Visualize.mGraph.canvas.canvases[0].size.width / 2, newCentrePixY = Visualize.mGraph.canvas.canvases[0].size.height / 2, From 3e4ff59a82fd089707c6fa826d49a05fcb447654 Mon Sep 17 00:00:00 2001 From: Robert Best Date: Thu, 6 Oct 2016 23:58:57 -0400 Subject: [PATCH 4/9] Update Listeners.js --- frontend/src/Metamaps/Listeners.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/Metamaps/Listeners.js b/frontend/src/Metamaps/Listeners.js index 48e50a69..cc5621cb 100644 --- a/frontend/src/Metamaps/Listeners.js +++ b/frontend/src/Metamaps/Listeners.js @@ -132,7 +132,7 @@ const Listeners = { centrePixY = Visualize.mGraph.canvas.canvases[0].size.height / 2, centreCoords = Util.pixelsToCoords({x:centrePixX ,y:centrePixY}); - //Resize the canvas to fill the new indow size, based on how JIT works, this also resets the map back to scale 1 and tranlations = 0 + //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 Visualize.mGraph.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 From b6da38e29e143bd05a85db910a0284f184b0361b Mon Sep 17 00:00:00 2001 From: Robert Best Date: Fri, 7 Oct 2016 02:36:41 -0400 Subject: [PATCH 5/9] Update Listeners.js Simplified based on Connor's suggestion about usage of variables. --- frontend/src/Metamaps/Listeners.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/frontend/src/Metamaps/Listeners.js b/frontend/src/Metamaps/Listeners.js index cc5621cb..ce14dc9f 100644 --- a/frontend/src/Metamaps/Listeners.js +++ b/frontend/src/Metamaps/Listeners.js @@ -128,17 +128,17 @@ const Listeners = { var canvas = Visualize.mGraph.canvas, scaleX = canvas.scaleOffsetX, scaleY = canvas.scaleOffsetY, - centrePixX = Visualize.mGraph.canvas.canvases[0].size.width / 2, - centrePixY = Visualize.mGraph.canvas.canvases[0].size.height / 2, + centrePixX = canvas.canvases[0].size.width / 2, + centrePixY = canvas.canvases[0].size.height / 2, centreCoords = Util.pixelsToCoords({x:centrePixX ,y:centrePixY}); //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 - Visualize.mGraph.canvas.resize($(window).width(), $(window).height()) + 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(scaleX,scaleY); - var newCentrePixX = Visualize.mGraph.canvas.canvases[0].size.width / 2, - newCentrePixY = Visualize.mGraph.canvas.canvases[0].size.height / 2, + var newCentrePixX = canvas.canvases[0].size.width / 2, + newCentrePixY = canvas.canvases[0].size.height / 2, newCentreCoords = Util.pixelsToCoords({x:newCentrePixX ,y:newCentrePixY}); canvas.translate(newCentreCoords.x - centreCoords.x, newCentreCoords.y - centreCoords.y); From 858ca66d69ed9e43f4d3a4ce6be288508cf4efa1 Mon Sep 17 00:00:00 2001 From: Devin Howard Date: Mon, 10 Oct 2016 17:20:43 +0800 Subject: [PATCH 6/9] eslint updates --- frontend/src/Metamaps/Listeners.js | 42 +++++++++++++++--------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/frontend/src/Metamaps/Listeners.js b/frontend/src/Metamaps/Listeners.js index ce14dc9f..00238e90 100644 --- a/frontend/src/Metamaps/Listeners.js +++ b/frontend/src/Metamaps/Listeners.js @@ -123,36 +123,36 @@ const Listeners = { }) $(window).resize(function () { - if (Visualize && Visualize.mGraph){ - //Find the current canvas scale and map-coordinate at the centre of the user's screen - var canvas = Visualize.mGraph.canvas, - scaleX = canvas.scaleOffsetX, - scaleY = canvas.scaleOffsetY, - centrePixX = canvas.canvases[0].size.width / 2, - centrePixY = canvas.canvases[0].size.height / 2, - centreCoords = Util.pixelsToCoords({x:centrePixX ,y:centrePixY}); - - //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 + if (Visualize && Visualize.mGraph) { + // Find the current canvas scale and map-coordinate at the centre of the user's screen + let canvas = Visualize.mGraph.canvas + const scaleX = canvas.scaleOffsetX + const scaleY = canvas.scaleOffsetY + const centrePixX = canvas.canvases[0].size.width / 2 + const centrePixY = canvas.canvases[0].size.height / 2 + const centreCoords = Util.pixelsToCoords({ x: centrePixX, y: centrePixY }) + + // 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(scaleX,scaleY); - var newCentrePixX = canvas.canvases[0].size.width / 2, - newCentrePixY = canvas.canvases[0].size.height / 2, - newCentreCoords = Util.pixelsToCoords({x:newCentrePixX ,y:newCentrePixY}); - - canvas.translate(newCentreCoords.x - centreCoords.x, newCentreCoords.y - centreCoords.y); + + // 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(scaleX, scaleY) + const newCentrePixX = canvas.canvases[0].size.width / 2 + const newCentrePixY = canvas.canvases[0].size.height / 2 + const newCentreCoords = Util.pixelsToCoords({ x: newCentrePixX, y: newCentrePixY }) + + canvas.translate(newCentreCoords.x - centreCoords.x, newCentreCoords.y - centreCoords.y) } - + 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) { From cfb8f51214b9026dc32a2a242d15a771783fc81b Mon Sep 17 00:00:00 2001 From: Robert Best Date: Sat, 22 Oct 2016 05:21:32 +0000 Subject: [PATCH 7/9] simplified the window resize function by adding a Util function that logs the canvas attributes. --- frontend/src/Metamaps/Listeners.js | 21 +++++++-------------- frontend/src/Metamaps/Util.js | 7 +++++++ 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/frontend/src/Metamaps/Listeners.js b/frontend/src/Metamaps/Listeners.js index eec0424f..49678aac 100644 --- a/frontend/src/Metamaps/Listeners.js +++ b/frontend/src/Metamaps/Listeners.js @@ -110,24 +110,17 @@ const Listeners = { $(window).resize(function () { if (Visualize && Visualize.mGraph) { - // Find the current canvas scale and map-coordinate at the centre of the user's screen - let canvas = Visualize.mGraph.canvas - const scaleX = canvas.scaleOffsetX - const scaleY = canvas.scaleOffsetY - const centrePixX = canvas.canvases[0].size.width / 2 - const centrePixY = canvas.canvases[0].size.height / 2 - const centreCoords = Util.pixelsToCoords({ x: centrePixX, y: centrePixY }) - + // Store the current canvas attributes, i.e. scale and map-coordinate at the centre of the user's screen + let canvas = Visualize.mGraph.canvas; + 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(scaleX, scaleY) - const newCentrePixX = canvas.canvases[0].size.width / 2 - const newCentrePixY = canvas.canvases[0].size.height / 2 - const newCentreCoords = Util.pixelsToCoords({ x: newCentrePixX, y: newCentrePixY }) - - canvas.translate(newCentreCoords.x - centreCoords.x, newCentreCoords.y - centreCoords.y) + 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) } if (Active.Map && Realtime.inConversation) Realtime.positionVideos() diff --git a/frontend/src/Metamaps/Util.js b/frontend/src/Metamaps/Util.js index 32730a6f..d2ac9cd0 100644 --- a/frontend/src/Metamaps/Util.js +++ b/frontend/src/Metamaps/Util.js @@ -126,6 +126,13 @@ 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 }), + }; } } From 759ec7845b59b64530b3a92000eb78425f06183b Mon Sep 17 00:00:00 2001 From: Robert Best Date: Sat, 22 Oct 2016 05:50:31 +0000 Subject: [PATCH 8/9] cleaned up the window resize function even further --- frontend/src/Metamaps/Listeners.js | 13 ++----------- frontend/src/Metamaps/Util.js | 14 ++++++++++++++ 2 files changed, 16 insertions(+), 11 deletions(-) diff --git a/frontend/src/Metamaps/Listeners.js b/frontend/src/Metamaps/Listeners.js index 49678aac..dbebd8ab 100644 --- a/frontend/src/Metamaps/Listeners.js +++ b/frontend/src/Metamaps/Listeners.js @@ -110,17 +110,8 @@ const Listeners = { $(window).resize(function () { if (Visualize && Visualize.mGraph) { - // Store the current canvas attributes, i.e. scale and map-coordinate at the centre of the user's screen - let canvas = Visualize.mGraph.canvas; - 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) + Util.resizeCanvas(Visualize.mGraph.canvas) + } if (Active.Map && Realtime.inConversation) Realtime.positionVideos() diff --git a/frontend/src/Metamaps/Util.js b/frontend/src/Metamaps/Util.js index d2ac9cd0..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' @@ -133,6 +135,18 @@ const Util = { 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) } } From 37b989c38e9b37c60ab722e0ea390920814678e3 Mon Sep 17 00:00:00 2001 From: Robert Best Date: Sat, 22 Oct 2016 01:52:43 -0400 Subject: [PATCH 9/9] Update Listeners.js --- frontend/src/Metamaps/Listeners.js | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/Metamaps/Listeners.js b/frontend/src/Metamaps/Listeners.js index dbebd8ab..8b4d6616 100644 --- a/frontend/src/Metamaps/Listeners.js +++ b/frontend/src/Metamaps/Listeners.js @@ -111,7 +111,6 @@ const Listeners = { $(window).resize(function () { if (Visualize && Visualize.mGraph) { Util.resizeCanvas(Visualize.mGraph.canvas) - } if (Active.Map && Realtime.inConversation) Realtime.positionVideos()