Accept css color names in any case.
Better handle blanks in the annotations example.
Show a show label option in the annotations example.
MODIFY
examples/annotations/index.jade
examples/annotations/index.jade
@@ -102,9 +102,14 @@ block append mainContent
option(value='round') Round
option(value='miter-clip') Miter-Clip
.col-md-6
- .form-group
+ .form-group(title='The label defaults to the annotation name')
label(for='edit-label') Label
input#edit-label(option='label')
+ .form-group(annotation-types='all', title='The label will only be shown if both this and the global option are selected')
+ label(for='edit-showLabel') Show Label
+ select#edit-showLabel(option='showLabel', format='boolean', optiontype='option')
+ option(value='true') Yes
+ option(value='false') No
.form-group(annotation-types='all')
label(for='edit-color') Label Color
input#edit-color(option='color', format='color', optiontype='label')

MODIFY
examples/annotations/main.js
examples/annotations/main.js
@@ -323,6 +323,9 @@ $(function () {
}
ctl.show();
switch ($('[option]', ctl).attr('optiontype')) {
+ case 'option':
+ value = opt[key];
+ break;
case 'label':
value = (opt.labelStyle || {})[key];
break;
@@ -336,9 +339,10 @@ $(function () {
value = geo.util.convertColorToHex(value || {r: 0, g: 0, b: 0}, 'needed');
break;
}
- if (value !== undefined) {
- $('[option]', ctl).val('' + value);
+ if ((value === undefined || value === '' || value === null) && $('[option]', ctl).is('select')) {
+ value = $('[option] option', ctl).eq(0).val();
}
+ $('[option]', ctl).val(value === undefined ? '' : '' + value);
});
dlg.one('shown.bs.modal', function () {
$('[option="name"]', dlg).focus();
@@ -356,31 +360,47 @@ $(function () {
var dlg = $('#editdialog'),
id = dlg.attr('annotation-id'),
annotation = layer.annotationById(id),
+ opt = annotation.options(),
type = annotation.type(),
typeMatch = new RegExp('(^| )(' + type + '|all)( |$)'),
- error,
- newopt = {},
- labelopt = {};
+ newopt = {style: {}, labelStyle: {}},
+ error;
// validate form values
$('.form-group[annotation-types]').each(function () {
var ctl = $(this),
key = $('[option]', ctl).attr('option'),
- value;
+ value, oldvalue;
if (!ctl.attr('annotation-types').match(typeMatch)) {
return;
}
value = layer.validateAttribute($('[option]', ctl).val(),
$('[option]', ctl).attr('format'));
- if (value === undefined) {
+ switch ($('[option]', ctl).attr('optiontype')) {
+ case 'option':
+ oldvalue = opt[key];
+ break;
+ case 'label':
+ oldvalue = (opt.labelStyle || {})[key];
+ break;
+ default:
+ oldvalue = opt.style[key];
+ break;
+ }
+ if (value === oldvalue || (oldvalue === undefined && value === '')) {
+ // don't change anything
+ } else if (value === undefined) {
error = $('label', ctl).text() + ' is not a valid value';
} else {
switch ($('[option]', ctl).attr('optiontype')) {
+ case 'option':
+ newopt[key] = value;
+ break;
case 'label':
- labelopt[key] = value;
+ newopt.labelStyle[key] = value;
break;
default:
- newopt[key] = value;
+ newopt.style[key] = value;
break;
}
}
@@ -392,7 +412,7 @@ $(function () {
annotation.name($('[option="name"]', dlg).val());
annotation.label($('[option="label"]', dlg).val() || null);
annotation.description($('[option="description"]', dlg).val() || '');
- annotation.options({style: newopt, labelStyle: labelopt}).draw();
+ annotation.options(newopt).draw();
dlg.modal('hide');
// refresh the annotation list

MODIFY
src/annotation.js
src/annotation.js
@@ -539,6 +539,9 @@ var annotation = function (type, args) {
if (m_description) {
obj.properties.description = m_description;
}
+ if (this.options('showLabel') === false) {
+ obj.properties.showLabel = this.options('showLabel');
+ }
for (i = 0; i < styles.length; i += 1) {
key = styles[i];
value = util.ensureFunction(objStyle[key])();

MODIFY
src/util/index.js
src/util/index.js
@@ -222,8 +222,9 @@ var util = module.exports = {
}
var opacity;
if (typeof color === 'string') {
- if (util.cssColors.hasOwnProperty(color)) {
- color = util.cssColors[color];
+ var lowerColor = color.toLowerCase();
+ if (util.cssColors.hasOwnProperty(lowerColor)) {
+ color = util.cssColors[lowerColor];
} else if (color.charAt(0) === '#') {
if (color.length === 4 || color.length === 5) {
/* interpret values of the form #rgb as #rrggbb and #rgba as
@@ -239,13 +240,13 @@ var util = module.exports = {
}
color = parseInt(color.slice(1, 7), 16);
}
- } else if (color === 'transparent') {
+ } else if (lowerColor === 'transparent') {
opacity = color = 0;
- } else if (color.indexOf('(') >= 0) {
+ } else if (lowerColor.indexOf('(') >= 0) {
for (var idx = 0; idx < util.cssColorConversions.length; idx += 1) {
- var match = util.cssColorConversions[idx].regex.exec(color);
+ var match = util.cssColorConversions[idx].regex.exec(lowerColor);
if (match) {
- return util.cssColorConversions[idx].process(color, match);
+ return util.cssColorConversions[idx].process(lowerColor, match);
}
}
}

MODIFY
tests/cases/colors.js
tests/cases/colors.js
@@ -28,6 +28,8 @@ describe('geo.util.convertColor', function () {
'green': {r: 0, g: 128 / 255, b: 0},
'blue': {r: 0, g: 0, b: 1},
'steelblue': {r: 70 / 255, g: 130 / 255, b: 180 / 255},
+ 'SteelBlue': {r: 70 / 255, g: 130 / 255, b: 180 / 255},
+ 'STEELBLUE': {r: 70 / 255, g: 130 / 255, b: 180 / 255},
// rgb() and rgba()
'rgb(18, 86, 171)': {r: 18 / 255, g: 86 / 255, b: 171 / 255},
'rgb(18 86 171)': {r: 18 / 255, g: 86 / 255, b: 171 / 255},
@@ -40,6 +42,7 @@ describe('geo.util.convertColor', function () {
'rgba(10% 35% 63.2% 40%)': {r: 0.1, g: 0.35, b: 0.632, a: 0.4},
'rgba(10% 35% 63.2% / 40%)': {r: 0.1, g: 0.35, b: 0.632, a: 0.4},
'rgba(100e-1% .35e2% 6.32e1% 40%)': {r: 0.1, g: 0.35, b: 0.632, a: 0.4},
+ 'RGBA(100E-1% .35E2% 6.32E1% 40%)': {r: 0.1, g: 0.35, b: 0.632, a: 0.4},
// hsl() and hsla()
'hsl(120, 100%, 25%)': {r: 0, g: 0.5, b: 0},
'hsla(120, 100%, 25%)': {r: 0, g: 0.5, b: 0},
@@ -49,11 +52,13 @@ describe('geo.util.convertColor', function () {
'hsl(120deg 100% 25%)': {r: 0, g: 0.5, b: 0},
'hsl(133.33grad 100% 25%)': {r: 0, g: 0.5, b: 0},
'hsl(2.0944rad 100% 25%)': {r: 0, g: 0.5, b: 0},
+ 'HSL(2.0944RAD 100% 25%)': {r: 0, g: 0.5, b: 0},
'hsl(.33333turn 100% 25%)': {r: 0, g: 0.5, b: 0},
'hsl(207 44% 49%)': {r: 0.2744, g: 0.51156, b: 0.7056},
'hsl(207 100% 50%)': {r: 0, g: 0.55, b: 1},
// transparent
'transparent': {r: 0, g: 0, b: 0, a: 0},
+ 'TRANSPARENT': {r: 0, g: 0, b: 0, a: 0},
// unknown strings
'none': 'none'
};

Accept css color names in any case.

Better handle blanks in the annotations example.

Show a show label option in the annotations example.