From c416c1269860cd72c3e8ae859ab049186e9627bc Mon Sep 17 00:00:00 2001 From: Franc Camps-Febrer Date: Wed, 19 Dec 2018 11:41:42 +0100 Subject: [PATCH] Adjust dimensions of sites-layer innarrative mode --- src/components/Map.jsx | 25 +++++++++-------- src/components/MapEvents.jsx | 2 +- src/js/map/map.js | 54 +++--------------------------------- src/scss/map.scss | 22 ++++++++------- 4 files changed, 31 insertions(+), 72 deletions(-) diff --git a/src/components/Map.jsx b/src/components/Map.jsx index 9b2fc7a..00053f4 100644 --- a/src/components/Map.jsx +++ b/src/components/Map.jsx @@ -40,8 +40,6 @@ class Map extends React.Component { .attr('width', width) .attr('height', height); - this.g = this.svg.append('g'); - this.state.map.on('zoomstart', () => { this.svg.classed('hide', true); }); @@ -49,7 +47,7 @@ class Map extends React.Component { this.svg.classed('hide', false); }); - this.mapLogic = new MapLogic(this.state.map, this.svg, this.g, this.props.app, this.props.ui, this.props.methods) + this.mapLogic = new MapLogic(this.state.map, this.svg, this.props.app, this.props.ui) this.mapLogic.update(this.props.app) this.setState({ isInitialized: true }) @@ -66,9 +64,6 @@ class Map extends React.Component { initializeMap() { /** * Creates a Leaflet map and a tilelayer for the map background - * @param {string} id: DOM element to create map onto - * @param {array} center: [lat, long] coordinates the map will be centered on - * @param {number} zoom: zoom level */ const map = L.map(this.props.mapId) @@ -99,10 +94,18 @@ class Map extends React.Component { map.keyboard.disable(); map.on("move", () => this.updateSVG()); + map.on("zoomend viewreset moveend", () => this.updateSVG()); + this.addResizeListener(); this.setState({ map }); } + addResizeListener() { + window.addEventListener('resize', () => { + this.updateSVG(); + }); + } + getSVGBoundaries() { const mapNode = d3.select('.leaflet-map-pane').node(); if (mapNode === null) return { transformX: 0, transformY: 0 }; @@ -122,10 +125,10 @@ class Map extends React.Component { } updateSVG() { - //const boundingClient = d3.select(`#${this.props.mapId}`).node().getBoundingClientRect(); + const boundingClient = d3.select(`#${this.props.mapId}`).node().getBoundingClientRect(); - //let WIDTH = boundingClient.width; - //let HEIGHT = boundingClient.height; + let WIDTH = boundingClient.width; + let HEIGHT = boundingClient.height; // Offset with leaflet map transform boundaries const { transformX, transformY } = this.getSVGBoundaries(); @@ -135,9 +138,9 @@ class Map extends React.Component { mapTransformY: transformY }) - /*this.svg.attr('width', WIDTH) + this.svg.attr('width', WIDTH) .attr('height', HEIGHT) - .attr('style', `left: ${-transformX}px; top: ${-transformY}px`);*/ + .attr('style', `left: ${-transformX}px; top: ${-transformY}px`); } renderSites() { diff --git a/src/components/MapEvents.jsx b/src/components/MapEvents.jsx index edfd68b..eff4653 100644 --- a/src/components/MapEvents.jsx +++ b/src/components/MapEvents.jsx @@ -42,7 +42,7 @@ class MapEvents extends React.Component { this.props.onSelect(events)} > diff --git a/src/js/map/map.js b/src/js/map/map.js index 2fcf7a7..04c21a5 100644 --- a/src/js/map/map.js +++ b/src/js/map/map.js @@ -1,11 +1,8 @@ -import { - areEqual, - isNotNullNorUndefined -} from '../utilities'; +import { isNotNullNorUndefined } from '../utilities'; import hash from 'object-hash'; import 'leaflet-polylinedecorator'; -export default function(lMap, svg, g, newApp, ui, methods) { +export default function(lMap, svg, newApp, ui) { const app = { selected: [], @@ -15,45 +12,6 @@ export default function(lMap, svg, g, newApp, ui, methods) { // Icons for markPoint flags (a yellow ring around a location) const eventCircleMarkers = {}; - function getSVGBoundaries() { - const mapNode = d3.select('.leaflet-map-pane').node(); - if (mapNode === null) return { transformX: 0, transformY: 0 }; - - // We'll get the transform of the leaflet container, - // which will let us offset the SVG by the same quantity - const transform = window - .getComputedStyle(mapNode) - .getPropertyValue('transform'); - - // However getComputedStyle returns an awkward string of the format - // matrix(0, 0, 1, 0, 0.56523, 123123), hence this awkwardness - return { - transformX: +transform.split(',')[4], - transformY: +transform.split(',')[5].split(')')[0] - } - } - - function updateSVG() { - const boundingClient = d3.select(`#${ui.dom.map}`).node().getBoundingClientRect(); - - let WIDTH = boundingClient.width; - let HEIGHT = boundingClient.height; - - // Offset with leaflet map transform boundaries - const { transformX, transformY } = getSVGBoundaries(); - - svg.attr('width', WIDTH) - .attr('height', HEIGHT) - .attr('style', `left: ${-transformX}px; top: ${-transformY}px`); - } - - lMap.on("zoomend viewreset moveend", updateSVG); - - - /* - * INTERACTIVE FUNCTIONS - */ - /** * Removes the circular ring to mark a particular location */ @@ -103,15 +61,11 @@ export default function(lMap, svg, g, newApp, ui, methods) { * Updates displayable data on the map: events, coevents and paths */ function update(newApp) { - updateSVG(); - const isNewAppProps = (hash(app) !== hash(newApp)); - - if (isNewAppProps) { + if (hash(app) !== hash(newApp)) { app.selected = newApp.selected; app.highlighted = newApp.highlighted; + renderSelectedAndHighlight(); } - - if (isNewAppProps) renderSelectedAndHighlight(); } function renderSelectedAndHighlight () { diff --git a/src/scss/map.scss b/src/scss/map.scss index 523f334..7067756 100644 --- a/src/scss/map.scss +++ b/src/scss/map.scss @@ -65,18 +65,20 @@ border-top-color: rgba($black,0.6); } } -} -.sites-layer { - position: fixed; - top: 0px; - left: 110px; -} + .sites-layer { + position: fixed; + top: 0px; + left: 110px; + } -.narratives-layer { - position: fixed; - top: 0px; - left: 110px; + &.narrative-mode { + .sites-layer { + position: fixed; + top: 0px; + left: 0px; + } + } } /*