Merge branch 'relation-colours' into develop

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,6 +311,8 @@ 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 && 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; });
 
             enter

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();
 

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,6 +199,8 @@ export function uiSectionRawMemberEditor(context) {
                     labelLink
                         .append('span')
                         .attr('class', 'member-entity-name')
+                        .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); });
 
                     label

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';
@@ -239,7 +240,7 @@ export function uiSectionRawMembershipEditor(context) {
 
         var graph = context.graph();
 
-        function baseDisplayLabel(entity) {
+        function baseDisplayValue(entity) {
             var matched = presetManager.match(entity, graph);
             var presetName = (matched && matched.name()) || t('inspector.relation');
             var entityName = utilDisplayName(entity) || '';
@@ -247,23 +248,45 @@ export function uiSectionRawMembershipEditor(context) {
             return presetName + ' ' + entityName;
         }
 
+        function baseDisplayLabel(entity) {
+            var matched = presetManager.match(entity, graph);
+            var presetName = (matched && matched.name()) || t('inspector.relation');
+            var entityName = utilDisplayName(entity) || '';
+
+            return selection => {
+                selection
+                    .append('b')
+                    .text(presetName + ' ');
+                selection
+                    .append('span')
+                    .classed('has-colour', entity.tags.colour && isColourValid(entity.tags.colour))
+                    .style('border-color', entity.tags.colour)
+                    .text(entityName);
+            };
+        }
+
         var explicitRelation = q && context.hasEntity(q.toLowerCase());
         if (explicitRelation && explicitRelation.type === 'relation' && explicitRelation.id !== entityID) {
             // loaded relation is specified explicitly, only show that
 
             result.push({
                 relation: explicitRelation,
-                value: baseDisplayLabel(explicitRelation) + ' ' + explicitRelation.id
+                value: baseDisplayValue(explicitRelation) + ' ' + explicitRelation.id,
+                display: baseDisplayLabel(explicitRelation)
             });
         } else {
 
             context.history().intersects(context.map().extent()).forEach(function(entity) {
                 if (entity.type !== 'relation' || entity.id === entityID) return;
 
-                var value = baseDisplayLabel(entity);
+                var value = baseDisplayValue(entity);
                 if (q && (value + ' ' + entity.id).toLowerCase().indexOf(q.toLowerCase()) === -1) return;
 
-                result.push({ relation: entity, value: value });
+                result.push({
+                    relation: entity,
+                    value,
+                    display: baseDisplayLabel(entity)
+                });
             });
 
             result.sort(function(a, b) {
@@ -349,6 +372,8 @@ export function uiSectionRawMembershipEditor(context) {
         labelLink
             .append('span')
             .attr('class', 'member-entity-name')
+            .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); });
 
         labelEnter