From bd1836fd0cf53254ed88352eb69a78da51092692 Mon Sep 17 00:00:00 2001 From: Martin Raifer Date: Mon, 14 Feb 2022 17:37:15 +0100 Subject: [PATCH] fix maki icons, tweak rendering of icons * maki v7+ doesn't have provide "11px" icons anymore * use 12px for icons on points & vertices on map (instead of 11px) * use 12px for icons on QA tool (improveOSM, osmose) markers (instead of 13px) * drop some unused code --- modules/svg/improveOSM.js | 17 +++------- modules/svg/labels.js | 8 +---- modules/svg/osmose.js | 17 +++------- modules/svg/points.js | 14 +++------ modules/svg/vertices.js | 9 +++--- modules/ui/improveOSM_header.js | 16 +++------- modules/ui/osmose_header.js | 17 +++------- modules/ui/preset_icon.js | 56 ++++++++++----------------------- 8 files changed, 42 insertions(+), 112 deletions(-) diff --git a/modules/svg/improveOSM.js b/modules/svg/improveOSM.js index 1e170f768..b8cd77dbd 100644 --- a/modules/svg/improveOSM.js +++ b/modules/svg/improveOSM.js @@ -127,20 +127,11 @@ export function svgImproveOSM(projection, context, dispatch) { markersEnter .append('use') - .attr('transform', 'translate(-6.5, -23)') .attr('class', 'icon-annotation') - .attr('width', '13px') - .attr('height', '13px') - .attr('xlink:href', d => { - const picon = d.icon; - - if (!picon) { - return ''; - } else { - const isMaki = /^maki-/.test(picon); - return `#${picon}${isMaki ? '-11' : ''}`; - } - }); + .attr('transform', 'translate(-6, -22)') + .attr('width', '12px') + .attr('height', '12px') + .attr('xlink:href', d => d.icon ? '#' + d.icon : ''); // update markers diff --git a/modules/svg/labels.js b/modules/svg/labels.js index 9a91c9434..a24d5100b 100644 --- a/modules/svg/labels.js +++ b/modules/svg/labels.js @@ -202,13 +202,7 @@ export function svgLabels(projection, context) { .attr('xlink:href', function(d) { var preset = presetManager.match(d, context.graph()); var picon = preset && preset.icon; - - if (!picon) { - return ''; - } else { - var isMaki = /^maki-/.test(picon); - return '#' + picon + (isMaki ? '-15' : ''); - } + return picon ? '#' + picon : ''; }); } diff --git a/modules/svg/osmose.js b/modules/svg/osmose.js index 95a57254f..1e39d13c0 100644 --- a/modules/svg/osmose.js +++ b/modules/svg/osmose.js @@ -127,20 +127,11 @@ export function svgOsmose(projection, context, dispatch) { markersEnter .append('use') - .attr('transform', 'translate(-6.5, -23)') .attr('class', 'icon-annotation') - .attr('width', '13px') - .attr('height', '13px') - .attr('xlink:href', d => { - const picon = d.icon; - - if (!picon) { - return ''; - } else { - const isMaki = /^maki-/.test(picon); - return `#${picon}${isMaki ? '-11' : ''}`; - } - }); + .attr('transform', 'translate(-6, -22)') + .attr('width', '12px') + .attr('height', '12px') + .attr('xlink:href', d => d.icon ? '#' + d.icon : ''); // update markers diff --git a/modules/svg/points.js b/modules/svg/points.js index 80f085c3d..03ba5b738 100644 --- a/modules/svg/points.js +++ b/modules/svg/points.js @@ -119,10 +119,10 @@ export function svgPoints(projection, context) { enter .append('use') - .attr('transform', 'translate(-5, -19)') + .attr('transform', 'translate(-5.5, -20)') .attr('class', 'icon') - .attr('width', '11px') - .attr('height', '11px'); + .attr('width', '12px') + .attr('height', '12px'); groups = groups .merge(enter) @@ -144,13 +144,7 @@ export function svgPoints(projection, context) { .attr('xlink:href', function(entity) { var preset = presetManager.match(entity, graph); var picon = preset && preset.icon; - - if (!picon) { - return ''; - } else { - var isMaki = /^maki-/.test(picon); - return '#' + picon + (isMaki ? '-11' : ''); - } + return picon ? '#' + picon : ''; }); diff --git a/modules/svg/vertices.js b/modules/svg/vertices.js index 73fbcfe50..21e18c581 100644 --- a/modules/svg/vertices.js +++ b/modules/svg/vertices.js @@ -155,13 +155,12 @@ export function svgVertices(projection, context) { iconUse.enter() .append('use') .attr('class', 'icon') - .attr('width', '11px') - .attr('height', '11px') - .attr('transform', 'translate(-5.5, -5.5)') + .attr('width', '12px') + .attr('height', '12px') + .attr('transform', 'translate(-6, -6)') .attr('xlink:href', function(d) { var picon = getIcon(d); - var isMaki = /^maki-/.test(picon); - return '#' + picon + (isMaki ? '-11' : ''); + return picon ? '#' + picon : ''; }); diff --git a/modules/ui/improveOSM_header.js b/modules/ui/improveOSM_header.js index 4e6b5a015..164eba794 100644 --- a/modules/ui/improveOSM_header.js +++ b/modules/ui/improveOSM_header.js @@ -46,18 +46,10 @@ export function uiImproveOsmHeader() { svgEnter .append('use') .attr('class', 'icon-annotation') - .attr('width', '13px') - .attr('height', '13px') - .attr('transform', 'translate(3.5, 5)') - .attr('xlink:href', d => { - const picon = d.icon; - if (!picon) { - return ''; - } else { - const isMaki = /^maki-/.test(picon); - return `#${picon}${isMaki ? '-11' : ''}`; - } - }); + .attr('width', '12px') + .attr('height', '12px') + .attr('transform', 'translate(4, 5.5)') + .attr('xlink:href', d => d.icon ? '#' + d.icon : ''); headerEnter .append('div') diff --git a/modules/ui/osmose_header.js b/modules/ui/osmose_header.js index 5932a0438..ef94cbb4e 100644 --- a/modules/ui/osmose_header.js +++ b/modules/ui/osmose_header.js @@ -48,19 +48,10 @@ export function uiOsmoseHeader() { svgEnter .append('use') .attr('class', 'icon-annotation') - .attr('width', '13px') - .attr('height', '13px') - .attr('transform', 'translate(3.5, 5)') - .attr('xlink:href', d => { - const picon = d.icon; - - if (!picon) { - return ''; - } else { - const isMaki = /^maki-/.test(picon); - return `#${picon}${isMaki ? '-11' : ''}`; - } - }); + .attr('width', '12px') + .attr('height', '12px') + .attr('transform', 'translate(4, 5.5)') + .attr('xlink:href', d => d.icon ? '#' + d.icon : ''); headerEnter .append('div') diff --git a/modules/ui/preset_icon.js b/modules/ui/preset_icon.js index e92e45ced..1a2e85f4a 100644 --- a/modules/ui/preset_icon.js +++ b/modules/ui/preset_icon.js @@ -9,12 +9,6 @@ import { utilFunctor } from '../util'; export function uiPresetIcon() { let _preset; let _geometry; - let _sizeClass = 'medium'; - - - function isSmall() { - return _sizeClass === 'small'; - } function presetIcon(selection) { @@ -23,11 +17,9 @@ export function uiPresetIcon() { function getIcon(p, geom) { - if (isSmall() && p.isFallback && p.isFallback()) return 'iD-icon-' + p.id; if (p.icon) return p.icon; if (geom === 'line') return 'iD-other-line'; if (geom === 'vertex') return p.isFallback() ? '' : 'temaki-vertex'; - if (isSmall() && geom === 'point') return ''; return 'maki-marker-stroked'; } @@ -129,7 +121,7 @@ export function uiPresetIcon() { let fillEnter = fill.enter(); - const d = isSmall() ? 40 : 60; + const d = 60; const w = d; const h = d; const l = d * 2/3; @@ -160,17 +152,15 @@ export function uiPresetIcon() { .attr('r', rVertex); }); - if (!isSmall()) { - const rMidpoint = 1.25; - [[c1, w/2], [c2, w/2], [h/2, c1], [h/2, c2]].forEach(point => { - fillEnter - .append('circle') - .attr('class', 'midpoint') - .attr('cx', point[0]) - .attr('cy', point[1]) - .attr('r', rMidpoint); - }); - } + const rMidpoint = 1.25; + [[c1, w/2], [c2, w/2], [h/2, c1], [h/2, c2]].forEach(point => { + fillEnter + .append('circle') + .attr('class', 'midpoint') + .attr('cx', point[0]) + .attr('cy', point[1]) + .attr('r', rMidpoint); + }); fill = fillEnter.merge(fill); @@ -191,7 +181,7 @@ export function uiPresetIcon() { let lineEnter = line.enter(); - const d = isSmall() ? 40 : 60; + const d = 60; // draw the line parametrically const w = d; const h = d; @@ -243,7 +233,7 @@ export function uiPresetIcon() { let routeEnter = route.enter(); - const d = isSmall() ? 40 : 60; + const d = 60; // draw the route parametrically const w = d; const h = d; @@ -330,13 +320,8 @@ export function uiPresetIcon() { icon.selectAll('svg') .attr('class', 'icon ' + picon + ' ' + (!isiDIcon && geom !== 'line' ? '' : tagClasses)); - var suffix = ''; - if (isMaki) { - suffix = isSmall() && geom === 'point' ? '-11' : '-15'; - } - icon.selectAll('use') - .attr('href', '#' + picon + suffix); + .attr('href', '#' + picon); } @@ -396,12 +381,12 @@ export function uiPresetIcon() { } const showThirdPartyIcons = prefs('preferences.privacy.thirdpartyicons') || 'true'; - const isFallback = isSmall() && p.isFallback && p.isFallback(); + const isFallback = p.isFallback && p.isFallback(); const imageURL = (showThirdPartyIcons === 'true') && p.imageURL; const picon = getIcon(p, geom); const isCategory = !p.setTags; - const drawPoint = picon && geom === 'point' && isSmall() && !isFallback; - const drawVertex = picon !== null && geom === 'vertex' && (!isSmall() || !isFallback); + const drawPoint = false; + const drawVertex = picon !== null && geom === 'vertex' && (!isFallback); const drawLine = picon && geom === 'line' && !isFallback && !isCategory; const drawArea = picon && geom === 'area' && !isFallback && !isCategory; const drawRoute = picon && geom === 'route'; @@ -422,7 +407,7 @@ export function uiPresetIcon() { container = container.enter() .append('div') - .attr('class', `preset-icon-container ${_sizeClass}`) + .attr('class', 'preset-icon-container') .merge(container); container @@ -453,12 +438,5 @@ export function uiPresetIcon() { return presetIcon; }; - - presetIcon.sizeClass = function(val) { - if (!arguments.length) return _sizeClass; - _sizeClass = val; - return presetIcon; - }; - return presetIcon; }