C125 annotations

web/client/components/map/openlayers/VectorStyle.js

@@ -12,7 +12,7 @@ const image = new ol.style.Circle({
 });
 
 const Icons = require('../../../utils/openlayers/Icons');
-const {hexToRgb} = require('../../../utils/ColorUtils');
+const {colorToRgbaStr} = require('../../../utils/ColorUtils');
 
 const STYLE_POINT = {
     color: '#ffcc33',
@@ -175,14 +175,14 @@ const getValidStyle = (geomType, options = { style: defaultStyles}, isDrawing, t
     if (geomType === "MultiLineString" || geomType === "LineString") {
         style = tempStyle ? {
             stroke: new ol.style.Stroke( tempStyle && tempStyle.stroke ? tempStyle.stroke : {
-                color: hexToRgb(options.style && tempStyle.color || "#0000FF").concat([tempStyle.opacity || 1]),
+                color: colorToRgbaStr(options.style && tempStyle.color || "#0000FF", tempStyle.opacity || 1),
                 lineDash: options.style.highlight ? [10] : [0],
                 width: tempStyle.weight || 1
             }),
             image: isDrawing ? image : null
             } : {
                 stroke: new ol.style.Stroke(defaultStyles[geomType] && defaultStyles[geomType].stroke ? defaultStyles[geomType].stroke : {
-                    color: hexToRgb(options.style && defaultStyles[geomType].color || "#0000FF").concat([defaultStyles[geomType].opacity || 1]),
+                    color: colorToRgbaStr(options.style && defaultStyles[geomType].color || "#0000FF", defaultStyles[geomType].opacity || 1),
                     lineDash: options.style.highlight ? [10] : [0],
                     width: defaultStyles[geomType].weight || 1
                 }) };
@@ -198,20 +198,20 @@ const getValidStyle = (geomType, options = { style: defaultStyles}, isDrawing, t
     if ((geomType === "Circle") && tempStyle.radius ) {
         return new ol.style.Style({
             stroke: new ol.style.Stroke( tempStyle && tempStyle.stroke ? tempStyle.stroke : {
-                color: hexToRgb(options.style && tempStyle.color || "#0000FF").concat([tempStyle.opacity || 1]),
+                color: colorToRgbaStr(options.style && tempStyle.color || "#0000FF", tempStyle.opacity || 1),
                 lineDash: options.style.highlight ? [10] : [0],
                 width: tempStyle.weight || 1
             }),
             fill: new ol.style.Fill(tempStyle.fill ? tempStyle.fill : {
-                color: hexToRgb(options.style && tempStyle.fillColor || "#0000FF").concat([tempStyle.fillOpacity || 0.2])
+                color: colorToRgbaStr(options.style && tempStyle.fillColor || "#0000FF", tempStyle.fillOpacity || 0.2)
             }),
             image: new ol.style.Circle({
                 radius: tempStyle.radius || 10,
                 fill: new ol.style.Fill(tempStyle.fill ? tempStyle.fill : {
-                    color: hexToRgb(options.style && tempStyle.fillColor || "#0000FF").concat([tempStyle.fillOpacity || 0.2])
+                    color: colorToRgbaStr(options.style && tempStyle.fillColor || "#0000FF", tempStyle.fillOpacity || 0.2)
                 }),
                 stroke: new ol.style.Stroke({
-                  color: hexToRgb(options.style && tempStyle.color || "#0000FF").concat([tempStyle.opacity || 1]),
+                  color: colorToRgbaStr(options.style && tempStyle.color || "#0000FF", tempStyle.opacity || 1),
                   lineDash: options.style.highlight ? [10] : [0],
                   width: tempStyle.weight || 1
                 })
@@ -227,7 +227,7 @@ const getValidStyle = (geomType, options = { style: defaultStyles}, isDrawing, t
                 text: textValues[0] || "",
                 font: tempStyle.font,
                 fill: new ol.style.Fill({
-                    color: hexToRgb(tempStyle.stroke || tempStyle.color || '#000000').concat([tempStyle.opacity || 1])
+                    color: colorToRgbaStr(tempStyle.stroke || tempStyle.color || '#000000', tempStyle.opacity || 1)
                 })
             })
         });
@@ -236,13 +236,13 @@ const getValidStyle = (geomType, options = { style: defaultStyles}, isDrawing, t
     if (geomType === "MultiPolygon" || geomType === "Polygon") {
         style = {
             stroke: new ol.style.Stroke( tempStyle.stroke ? tempStyle.stroke : {
-                color: hexToRgb(options.style && tempStyle.color || "#0000FF").concat([tempStyle.opacity || 1]),
+                color: colorToRgbaStr(options.style && tempStyle.color || "#0000FF", tempStyle.opacity || 1),
                 lineDash: options.style.highlight ? [10] : [0],
                 width: tempStyle.weight || 1
             }),
             image: isDrawing ? image : null,
             fill: new ol.style.Fill(tempStyle.fill ? tempStyle.fill : {
-                color: hexToRgb(options.style && tempStyle.fillColor || "#0000FF").concat([tempStyle.fillOpacity || 1])
+                color: colorToRgbaStr(options.style && tempStyle.fillColor || "#0000FF", tempStyle.fillOpacity || 1)
             })
         };
         return new ol.style.Style(style);
@@ -257,12 +257,12 @@ function getStyle(options, isDrawing = false, textValues = []) {
     if (!style && options.style) {
         style = {
             stroke: new ol.style.Stroke( options.style.stroke ? options.style.stroke : {
-                color: hexToRgb(options.style && options.style.color || "#0000FF").concat([options.style.opacity || 1]),
+                color: colorToRgbaStr(options.style && options.style.color || "#0000FF", options.style.opacity || 1),
                 lineDash: options.style.highlight ? [10] : [0],
                 width: options.style.weight || 1
             }),
             fill: new ol.style.Fill(options.style.fill ? options.style.fill : {
-                color: hexToRgb(options.style && options.style.fillColor || "#0000FF").concat([options.style.fillOpacity || 1])
+                color: colorToRgbaStr(options.style && options.style.fillColor || "#0000FF", options.style.fillOpacity || 1)
             })
         };
 

web/client/components/style/ColorPicker.jsx

@@ -51,7 +51,7 @@ class ColorPicker extends React.Component {
         <div className={this.props.disabled ? "cp-disabled" : "cp-swatch" } style={this.getStyle()} onClick={ () => { if (!this.props.disabled) { this.setState({ displayColorPicker: !this.state.displayColorPicker }); } } }>
         {this.props.text}
         </div>
-        { this.state.displayColorPicker ? <div className="cp-popover" style={{width: this.props.style.width}}>
+        { this.state.displayColorPicker ? <div className="cp-popover" style={{width: this.props.style && this.props.style.width}}>
           <div className="cp-cover" onClick={ () => { this.setState({ displayColorPicker: false, color: undefined}); this.props.onChangeColor(this.state.color); }}/>
           <SketchPicker color={ this.state.color || this.props.value} onChange={ (color) => { this.setState({ color: color.rgb }); }} />
         </div> : null }

web/client/utils/ColorUtils.js

@@ -5,7 +5,8 @@
   * This source code is licensed under the BSD-style license found in the
   * LICENSE file in the root directory of this source tree.
   */
-
+const tinycolor = require("tinycolor2");
+const {toNumber} = require("lodash");
 /**
  * Porting of various MapStore(1) utilities for random/color scale generations
  * @name ColorUtils
@@ -206,6 +207,17 @@ const ColorUtils = {
             g: rgb[1],
             b: rgb[2]
         };
+    },
+    /**
+    * convert any valid css color to rgba str
+    * @param (String) color any valid css color
+    * @param (number) opacity 0 - 1 alpha value
+    * @return (String) rgba string
+    */
+    colorToRgbaStr: (color = "#0000FF", alpha) => {
+        const c = tinycolor(color);
+        return c.setAlpha(toNumber(alpha !== undefined ? alpha : c.getAlpha())).toRgbString();
     }
+
 };
 module.exports = ColorUtils;

web/client/utils/__tests__/ColorUtils-test.js

@@ -0,0 +1,30 @@
+/*
+ * Copyright 2017, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const expect = require('expect');
+
+const ColorUtils = require('../ColorUtils');
+
+describe('Test the ColorUtils', () => {
+    it('colorToRgbaStr name color', () => {
+        const rgbaColor = ColorUtils.colorToRgbaStr("red");
+        expect(rgbaColor).toBe("rgb(255, 0, 0)");
+    });
+    it('colorToRgbaStr hex color', () => {
+        const rgbaColor = ColorUtils.colorToRgbaStr("#FF0000", 0.5);
+        expect(rgbaColor).toBe("rgba(255, 0, 0, 0.5)");
+    });
+    it('colorToRgbaStr rgba color with overrided alpha', () => {
+        const rgbaColor = ColorUtils.colorToRgbaStr("rgba(255, 255, 255, 0.8)", 0.5);
+        expect(rgbaColor).toBe("rgba(255, 255, 255, 0.5)");
+    });
+    it('colorToRgbaStr rgba color', () => {
+        const rgbaColor = ColorUtils.colorToRgbaStr("rgba(255, 255, 255, 0.8)");
+        expect(rgbaColor).toBe("rgba(255, 255, 255, 0.8)");
+    });
+
+});