Skip to content

Commit

Permalink
fix maki icons, tweak rendering of icons
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@tyrasd
tyrasd committed Feb 14, 2022
1 parent a3bd33c commit bd1836f
Show file tree
Hide file tree
Showing 8 changed files with 42 additions and 112 deletions.
17 changes: 4 additions & 13 deletions modules/svg/improveOSM.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
8 changes: 1 addition & 7 deletions modules/svg/labels.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 : '';
});
}

Expand Down
17 changes: 4 additions & 13 deletions modules/svg/osmose.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
14 changes: 4 additions & 10 deletions modules/svg/points.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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 : '';
});


Expand Down
9 changes: 4 additions & 5 deletions modules/svg/vertices.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 : '';
});


Expand Down
16 changes: 4 additions & 12 deletions modules/ui/improveOSM_header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand Down
17 changes: 4 additions & 13 deletions modules/ui/osmose_header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand Down
56 changes: 17 additions & 39 deletions modules/ui/preset_icon.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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';
}

Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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);

Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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);
}


Expand Down Expand Up @@ -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';
Expand All @@ -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
Expand Down Expand Up @@ -453,12 +438,5 @@ export function uiPresetIcon() {
return presetIcon;
};


presetIcon.sizeClass = function(val) {
if (!arguments.length) return _sizeClass;
_sizeClass = val;
return presetIcon;
};

return presetIcon;
}

0 comments on commit bd1836f

Please sign in to comment.