only render route colours if the value is a valid color

addresses https://github.com/openstreetmap/iD/pull/9424#discussion_r1046495633
This commit is contained in:
Martin Raifer
2023-11-17 13:45:49 +01:00
parent beea585251
commit 20b72a2b68
5 changed files with 21 additions and 14 deletions

View File

@@ -245,3 +245,16 @@ export var osmFlowingWaterwayTagValues = {
// Tags which values should be considered case sensitive when offering tag suggestions
export const allowUpperCaseTagValues = /network|taxon|genus|species|brand|grape_variety|royal_cypher|listed_status|booth|rating|stars|:output|_hours|_times|_ref|manufacturer|country|target|brewery|cai_scale|traffic_sign/;
// Returns whether a `colour` tag value looks like a valid color we can display
export function isColourValid(value) {
if (!value.match(/^(#([0-9a-fA-F]{3}){1,2}|\w+)$/)) {
// OSM only supports hex or named colors
return false;
}
if (!CSS.supports('color', value) || ['unset', 'inherit', 'initial', 'revert'].includes(value)) {
// see https://stackoverflow.com/a/68217760/1627467
return false;
}
return true;
}

View File

@@ -11,6 +11,7 @@ import { geoSphericalDistance } from '../geo/geo';
import { geoExtent } from '../geo';
import { modeSelect } from '../modes/select';
import { osmEntity } from '../osm/entity';
import { isColourValid } from '../osm/tags';
import { services } from '../services';
import { svgIcon } from '../svg/icon';
import { uiCmd } from './cmd';
@@ -310,7 +311,7 @@ export function uiFeatureList(context) {
label
.append('span')
.attr('class', 'entity-name')
.classed('has-colour', d => d.entity && d.entity.type === 'relation' && d.entity.tags.colour)
.classed('has-colour', d => d.entity && d.entity.type === 'relation' && d.entity.tags.colour && isColourValid(d.entity.tags.colour))
.style('border-color', d => d.entity && d.entity.type === 'relation' && d.entity.tags.colour)
.text(function(d) { return d.name; });

View File

@@ -9,6 +9,7 @@ import { t, localizer } from '../../core/localizer';
import { utilDetect, utilGetSetValue, utilNoAuto, utilRebind, utilTotalExtent } from '../../util';
import { svgIcon } from '../../svg/icon';
import { cardinal } from '../../osm/node';
import { isColourValid } from '../../osm/tags';
import { uiLengthIndicator } from '..';
import { uiTooltip } from '../tooltip';
import { isEqual } from 'lodash-es';
@@ -228,16 +229,6 @@ export function uiFieldText(field, context) {
function updateColourPreview() {
function isColourValid(colour) {
if (!colour.match(/^(#([0-9a-fA-F]{3}){1,2}|\w+)$/)) {
// OSM only supports hex or named colors
return false;
} else if (!CSS.supports('color', colour) || ['unset', 'inherit', 'initial', 'revert'].includes(colour)) {
// see https://stackoverflow.com/a/68217760/1627467
return false;
}
return true;
}
wrap.selectAll('.colour-preview')
.remove();

View File

@@ -11,6 +11,7 @@ import { actionMoveMember } from '../../actions/move_member';
import { modeBrowse } from '../../modes/browse';
import { modeSelect } from '../../modes/select';
import { osmEntity } from '../../osm';
import { isColourValid } from '../../osm/tags';
import { svgIcon } from '../../svg/icon';
import { services } from '../../services';
import { uiCombobox } from '../combobox';
@@ -198,7 +199,7 @@ export function uiSectionRawMemberEditor(context) {
labelLink
.append('span')
.attr('class', 'member-entity-name')
.classed('has-colour', d => d.member.type === 'relation' && d.member.tags.colour)
.classed('has-colour', d => d.member.type === 'relation' && d.member.tags.colour && isColourValid(d.member.tags.colour))
.style('border-color', d => d.member.type === 'relation' && d.member.tags.colour)
.text(function(d) { return utilDisplayName(d.member); });

View File

@@ -12,6 +12,7 @@ import { actionDeleteMembers } from '../../actions/delete_members';
import { modeSelect } from '../../modes/select';
import { osmEntity, osmRelation } from '../../osm';
import { isColourValid } from '../../osm/tags';
import { services } from '../../services';
import { svgIcon } from '../../svg/icon';
import { uiCombobox } from '../combobox';
@@ -258,7 +259,7 @@ export function uiSectionRawMembershipEditor(context) {
.text(presetName + ' ');
selection
.append('span')
.classed('has-colour', entity.tags.colour)
.classed('has-colour', entity.tags.colour && isColourValid(entity.tags.colour))
.style('border-color', entity.tags.colour)
.text(entityName);
};
@@ -371,7 +372,7 @@ export function uiSectionRawMembershipEditor(context) {
labelLink
.append('span')
.attr('class', 'member-entity-name')
.classed('has-colour', d => d.relation.tags.colour)
.classed('has-colour', d => d.relation.tags.colour && isColourValid(d.relation.tags.colour))
.style('border-color', d => d.relation.tags.colour)
.text(function(d) { return utilDisplayName(d.relation); });