From ae81b2c10a80e6f2ba87400ab2d7a622987e8c60 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Fri, 25 Aug 2017 12:30:33 -0600 Subject: [PATCH] Map filter not set appropriately when spy panel is open (#13678) (#13707) * get dimensions from parent elements when map has not height or width * clean up test variable names --- .../tile_map/public/__tests__/kibana_map.js | 110 +++++++++++++----- .../tile_map/public/kibana_map.js | 45 +++++-- 2 files changed, 120 insertions(+), 35 deletions(-) diff --git a/src/core_plugins/tile_map/public/__tests__/kibana_map.js b/src/core_plugins/tile_map/public/__tests__/kibana_map.js index 986fce61ddace9..f79a72b9b33731 100644 --- a/src/core_plugins/tile_map/public/__tests__/kibana_map.js +++ b/src/core_plugins/tile_map/public/__tests__/kibana_map.js @@ -8,14 +8,19 @@ describe('kibana_map tests', function () { let domNode; let kibanaMap; - function setupDOM() { - domNode = document.createElement('div'); - domNode.style.top = '0'; - domNode.style.left = '0'; - domNode.style.width = '512px'; - domNode.style.height = '512px'; - domNode.style.position = 'fixed'; - domNode.style['pointer-events'] = 'none'; + function createDiv(width, height) { + const div = document.createElement('div'); + div.style.top = '0'; + div.style.left = '0'; + div.style.width = width; + div.style.height = height; + div.style.position = 'fixed'; + div.style['pointer-events'] = 'none'; + return div; + } + + function setupDOM(width, height) { + domNode = createDiv(width, height); document.body.appendChild(domNode); } @@ -28,7 +33,7 @@ describe('kibana_map tests', function () { describe('KibanaMap - basics', function () { beforeEach(async function () { - setupDOM(); + setupDOM('512px', '512px'); kibanaMap = new KibanaMap(domNode, { minZoom: 1, maxZoom: 10, @@ -67,38 +72,86 @@ describe('kibana_map tests', function () { }); - describe('KibanaMap - getUntrimmedBounds', function () { - beforeEach(async function () { - setupDOM(); - domNode.style.width = '1600px'; - domNode.style.height = '1024px'; - kibanaMap = new KibanaMap(domNode, { - minZoom: 1, - maxZoom: 10, - center: [0,0], - zoom: 2 - }); - }); + describe('getUntrimmedBounds', function () { afterEach(function () { kibanaMap.destroy(); teardownDOM(); }); - it('should get untrimmed map bounds', function () { - const bounds = kibanaMap.getUntrimmedBounds(false); - expect(bounds.bottom_right.lon.toFixed(2)).to.equal('281.25'); - expect(bounds.top_left.lon.toFixed(2)).to.equal('-281.25'); + describe('extended bounds', function () { + beforeEach(async function () { + setupDOM('1600px', '1024px'); + kibanaMap = new KibanaMap(domNode, { + minZoom: 1, + maxZoom: 10, + center: [0,0], + zoom: 2 + }); + }); + + it('should get untrimmed map bounds', function () { + const bounds = kibanaMap.getUntrimmedBounds(); + expect(bounds.bottom_right.lon.toFixed(2)).to.equal('281.25'); + expect(bounds.top_left.lon.toFixed(2)).to.equal('-281.25'); + }); + }); + + describe('no map height', function () { + beforeEach(async function () { + setupDOM('386px', '256px'); + const noHeightNode = createDiv('386px', '0px'); + domNode.appendChild(noHeightNode); + kibanaMap = new KibanaMap(noHeightNode, { + minZoom: 1, + maxZoom: 10, + center: [0,0], + zoom: 10 + }); + }); + + it('should calculate map dimensions based on parent element dimensions', function () { + const bounds = kibanaMap.getUntrimmedBounds(); + expect(bounds).to.have.property('bottom_right'); + expect(bounds.bottom_right.lon.toFixed(2)).to.equal('0.27'); + expect(bounds.bottom_right.lat.toFixed(2)).to.equal('-0.18'); + expect(bounds).to.have.property('top_left'); + expect(bounds.top_left.lon.toFixed(2)).to.equal('-0.27'); + expect(bounds.top_left.lat.toFixed(2)).to.equal('0.18'); + }); + }); + + describe('no map width', function () { + beforeEach(async function () { + setupDOM('386px', '256px'); + const noWidthNode = createDiv('0px', '256px'); + domNode.appendChild(noWidthNode); + kibanaMap = new KibanaMap(noWidthNode, { + minZoom: 1, + maxZoom: 10, + center: [0,0], + zoom: 10 + }); + }); + + it('should calculate map dimensions based on parent element dimensions', function () { + const bounds = kibanaMap.getUntrimmedBounds(); + expect(bounds).to.have.property('bottom_right'); + expect(bounds.bottom_right.lon.toFixed(2)).to.equal('0.27'); + expect(bounds.bottom_right.lat.toFixed(2)).to.equal('-0.18'); + expect(bounds).to.have.property('top_left'); + expect(bounds.top_left.lon.toFixed(2)).to.equal('-0.27'); + expect(bounds.top_left.lat.toFixed(2)).to.equal('0.18'); + }); }); }); describe('KibanaMap - attributions', function () { - beforeEach(async function () { - setupDOM(); + setupDOM('512px', '512px'); kibanaMap = new KibanaMap(domNode, { minZoom: 1, maxZoom: 10, @@ -138,10 +191,11 @@ describe('kibana_map tests', function () { }); + describe('KibanaMap - baseLayer', function () { beforeEach(async function () { - setupDOM(); + setupDOM('512px', '512px'); kibanaMap = new KibanaMap(domNode, { minZoom: 1, maxZoom: 10, diff --git a/src/core_plugins/tile_map/public/kibana_map.js b/src/core_plugins/tile_map/public/kibana_map.js index 6a70d135673a66..86c0c9b7deb604 100644 --- a/src/core_plugins/tile_map/public/kibana_map.js +++ b/src/core_plugins/tile_map/public/kibana_map.js @@ -398,15 +398,46 @@ export class KibanaMap extends EventEmitter { const southEast = bounds.getSouthEast(); const northWest = bounds.getNorthWest(); - const southEastLng = southEast.lng; - const northWestLng = northWest.lng; - const southEastLat = southEast.lat; - const northWestLat = northWest.lat; + let southEastLng = southEast.lng; + let northWestLng = northWest.lng; + let southEastLat = southEast.lat; + let northWestLat = northWest.lat; - //Bounds cannot be created unless they form a box with larger than 0 dimensions - //Invalid areas are rejected by ES. + // When map has not width or height, calculate map dimensions based on parent dimensions if (southEastLat === northWestLat || southEastLng === northWestLng) { - return; + let parent = this._containerNode.parentElement; + while (parent && (parent.clientWidth === 0 || parent.clientHeight === 0)) { + parent = parent.parentNode; + } + let width = 512; + let height = 512; + if (parent && parent.clientWidth !== 0) { + width = parent.clientWidth; + } + if (parent && parent.clientHeight !== 0) { + height = parent.clientHeight; + } + + let top = 0; + let left = 0; + let bottom = height; + let right = width; + // no height - top is center of map and needs to be adjusted + if (southEastLat === northWestLat) { + top = height / 2 * -1; + bottom = height / 2; + } + // no width - left is center of map and needs to be adjusted + if (southEastLng === northWestLng) { + left = width / 2 * -1; + right = width / 2; + } + const containerSouthEast = this._leafletMap.layerPointToLatLng(L.point(right, bottom)); + const containerNorthWest = this._leafletMap.layerPointToLatLng(L.point(left, top)); + southEastLng = containerSouthEast.lng; + northWestLng = containerNorthWest.lng; + southEastLat = containerSouthEast.lat; + northWestLat = containerNorthWest.lat; } return {