From b0cba113e9dcbe13e21c4ca8c824bb5f573f7035 Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Fri, 19 Jan 2018 20:32:45 +0000 Subject: [PATCH 1/2] Fix directional vertices on IE11/Edge (closes #4710) --- css/20_map.css | 14 +++++++++++++- modules/svg/defs.js | 6 +++--- 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/css/20_map.css b/css/20_map.css index f5d8e168a..e02a3922b 100644 --- a/css/20_map.css +++ b/css/20_map.css @@ -1,5 +1,17 @@ /* base styles */ -.layer-osm path:not(.oneway) { fill: none; } /* IE needs :not(.oneway) */ +.layer-osm path:not(.oneway-marker-path) { /* IE/Edge needs :not(.oneway) */ + fill: none; +} +.layer-osm path.viewfield-marker-path { /* IE/Edge rule for marker style */ + fill: #333; + fill-opacity: 0.75; + stroke: #fff; + stroke-width: 0.5px; + stroke-opacity: 0.75; +} +.fill-wireframe .layer-osm path.viewfield-marker-path { /* IE/Edge rule for marker style */ + fill: none; +} /* the above fill: none rule affects paths in shadow dom only in Firefox */ .layer-osm use.icon path { fill: #333; } /* FF svg Maki icons */ diff --git a/modules/svg/defs.js b/modules/svg/defs.js index ff6e2209e..d3e533ca4 100644 --- a/modules/svg/defs.js +++ b/modules/svg/defs.js @@ -38,7 +38,7 @@ export function svgDefs(context) { .attr('markerUnits', 'strokeWidth') .attr('orient', 'auto') .append('path') - .attr('class', 'oneway') + .attr('class', 'oneway-marker-path') .attr('d', 'M 5,3 L 0,3 L 0,2 L 5,2 L 5,0 L 10,2.5 L 5,5 z') .attr('stroke', 'none') .attr('fill', '#000') @@ -55,7 +55,7 @@ export function svgDefs(context) { .attr('markerUnits', 'strokeWidth') .attr('orient', 'auto') .append('path') - .attr('class', 'viewfield') + .attr('class', 'viewfield-marker-path') .attr('d', 'M 6,14 C 8,13.4 8,13.4 10,14 L 16,3 C 12,0 4,0 0,3 z') .attr('fill', '#333') .attr('fill-opacity', '0.75') @@ -74,7 +74,7 @@ export function svgDefs(context) { .attr('markerUnits', 'strokeWidth') .attr('orient', 'auto') .append('path') - .attr('class', 'viewfield') + .attr('class', 'viewfield-marker-path') .attr('d', 'M 6,14 C 8,13.4 8,13.4 10,14 L 16,3 C 12,0 4,0 0,3 z') .attr('fill', 'none') .attr('stroke', '#fff') From 3838b02739f93f954516a0d387c2189de95da0c6 Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Fri, 19 Jan 2018 17:28:35 -0500 Subject: [PATCH 2/2] Add detect.cssfilters, fallback to opacity only on IE11/Edge (re: #4711) --- modules/renderer/background.js | 43 ++++++++++++++---------- modules/ui/background_display_options.js | 19 +++++++---- modules/util/detect.js | 2 ++ 3 files changed, 41 insertions(+), 23 deletions(-) diff --git a/modules/renderer/background.js b/modules/renderer/background.js index 3d9f645b4..fc4fe994c 100644 --- a/modules/renderer/background.js +++ b/modules/renderer/background.js @@ -9,11 +9,13 @@ import { geoExtent, geoMetersToOffset, geoOffsetToMeters} from '../geo'; import { rendererBackgroundSource } from './background_source'; import { rendererTileLayer } from './tile_layer'; import { utilQsString, utilStringQs } from '../util'; +import { utilDetect } from '../util/detect'; import { utilRebind } from '../util/rebind'; export function rendererBackground(context) { var dispatch = d3_dispatch('change'); + var detected = utilDetect(); var baseLayer = rendererTileLayer(context).projection(context.projection); var _overlayLayers = []; var _backgroundSources = []; @@ -24,20 +26,22 @@ export function rendererBackground(context) { function background(selection) { - var baseFilter = ''; - if (_brightness !== 1) { - baseFilter += 'brightness(' + _brightness + ')'; - } - if (_contrast !== 1) { - baseFilter += 'contrast(' + _contrast + ')'; - } - if (_saturation !== 1) { - baseFilter += 'saturate(' + _saturation + ')'; - } - if (_sharpness < 1) { // gaussian blur - var blur = d3_interpolateNumber(0.5, 5)(1 - _sharpness); - baseFilter += 'blur(' + blur + 'px)'; + var baseFilter = ''; + if (detected.cssfilters) { + if (_brightness !== 1) { + baseFilter += 'brightness(' + _brightness + ')'; + } + if (_contrast !== 1) { + baseFilter += 'contrast(' + _contrast + ')'; + } + if (_saturation !== 1) { + baseFilter += 'saturate(' + _saturation + ')'; + } + if (_sharpness < 1) { // gaussian blur + var blur = d3_interpolateNumber(0.5, 5)(1 - _sharpness); + baseFilter += 'blur(' + blur + 'px)'; + } } var base = selection.selectAll('.layer-background') @@ -46,8 +50,13 @@ export function rendererBackground(context) { base = base.enter() .insert('div', '.layer-data') .attr('class', 'layer layer-background') - .merge(base) - .style('filter', baseFilter || null); + .merge(base); + + if (detected.cssfilters) { + base.style('filter', baseFilter || null); + } else { + base.style('opacity', _brightness); + } var imagery = base.selectAll('.layer-imagery') @@ -62,7 +71,7 @@ export function rendererBackground(context) { var maskFilter = ''; var mixBlendMode = ''; - if (_sharpness > 1) { // apply unsharp mask + if (detected.cssfilters && _sharpness > 1) { // apply unsharp mask mixBlendMode = 'overlay'; maskFilter = 'saturate(0) blur(3px) invert(1)'; @@ -74,7 +83,7 @@ export function rendererBackground(context) { } var mask = base.selectAll('.layer-unsharp-mask') - .data(_sharpness > 1 ? [0] : []); + .data(detected.cssfilters && _sharpness > 1 ? [0] : []); mask.exit() .remove(); diff --git a/modules/ui/background_display_options.js b/modules/ui/background_display_options.js index 9dfbfc80c..ba4a9113e 100644 --- a/modules/ui/background_display_options.js +++ b/modules/ui/background_display_options.js @@ -3,16 +3,21 @@ import { select as d3_select } from 'd3-selection'; - import { t, textDirection } from '../util/locale'; import { svgIcon } from '../svg'; import { uiDisclosure } from './disclosure'; +import { utilDetect } from '../util/detect'; export function uiBackgroundDisplayOptions(context) { - var _selection = d3_select(null); - var sliders = ['brightness', 'contrast', 'saturation', 'sharpness']; + var detected = utilDetect(); var storedOpacity = context.storage('background-opacity'); + var minVal = 0.25; + var maxVal = detected.cssfilters ? 2 : 1; + + var sliders = detected.cssfilters + ? ['brightness', 'contrast', 'saturation', 'sharpness'] + : ['brightness']; var _options = { brightness: (storedOpacity !== null ? (+storedOpacity) : 1), @@ -21,6 +26,8 @@ export function uiBackgroundDisplayOptions(context) { sharpness: 1 }; + var _selection = d3_select(null); + function clamp(x, min, max) { return Math.max(min, Math.min(x, max)); @@ -32,7 +39,7 @@ export function uiBackgroundDisplayOptions(context) { val = d3_event.target.value; } - val = clamp(val, 0.25, 2); + val = clamp(val, minVal, maxVal); _options[d] = val; context.background()[d](val); @@ -71,8 +78,8 @@ export function uiBackgroundDisplayOptions(context) { .append('input') .attr('class', function(d) { return 'display-option-input display-option-input-' + d; }) .attr('type', 'range') - .attr('min', '0.25') - .attr('max', '2') + .attr('min', minVal) + .attr('max', maxVal) .attr('step', '0.05') .on('input', function(d) { var val = d3_select(this).property('value'); diff --git a/modules/util/detect.js b/modules/util/detect.js index 92a9691a5..19af93b5d 100644 --- a/modules/util/detect.js +++ b/modules/util/detect.js @@ -112,6 +112,8 @@ export function utilDetect(force) { detected.download = !(detected.ie || detected.browser.toLowerCase() === 'edge'); + detected.cssfilters = !(detected.ie || detected.browser.toLowerCase() === 'edge'); + function nav(x) { return navigator.userAgent.indexOf(x) !== -1; }