From 20b72a2b682d40ce268223167ed4cbcf688e8fe5 Mon Sep 17 00:00:00 2001 From: Martin Raifer Date: Fri, 17 Nov 2023 13:45:49 +0100 Subject: [PATCH] only render route colours if the value is a valid color addresses https://github.com/openstreetmap/iD/pull/9424#discussion_r1046495633 --- modules/osm/tags.js | 13 +++++++++++++ modules/ui/feature_list.js | 3 ++- modules/ui/fields/input.js | 11 +---------- modules/ui/sections/raw_member_editor.js | 3 ++- modules/ui/sections/raw_membership_editor.js | 5 +++-- 5 files changed, 21 insertions(+), 14 deletions(-) diff --git a/modules/osm/tags.js b/modules/osm/tags.js index 4962e969d..f3eb6cc1d 100644 --- a/modules/osm/tags.js +++ b/modules/osm/tags.js @@ -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; +} diff --git a/modules/ui/feature_list.js b/modules/ui/feature_list.js index f4062c73f..fe004bf68 100644 --- a/modules/ui/feature_list.js +++ b/modules/ui/feature_list.js @@ -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; }); diff --git a/modules/ui/fields/input.js b/modules/ui/fields/input.js index 92a62d302..14f05cd26 100644 --- a/modules/ui/fields/input.js +++ b/modules/ui/fields/input.js @@ -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(); diff --git a/modules/ui/sections/raw_member_editor.js b/modules/ui/sections/raw_member_editor.js index 9ad0901a9..e15712f6d 100644 --- a/modules/ui/sections/raw_member_editor.js +++ b/modules/ui/sections/raw_member_editor.js @@ -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); }); diff --git a/modules/ui/sections/raw_membership_editor.js b/modules/ui/sections/raw_membership_editor.js index 3e1e250e3..3ef210d7e 100644 --- a/modules/ui/sections/raw_membership_editor.js +++ b/modules/ui/sections/raw_membership_editor.js @@ -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); });