fix styler components

geosolutions-it · May 29, 2018 · a9e4f36 · a9e4f36
1 parent f8eee28
commit a9e4f36
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 74 deletions.
diff --git a/web/client/components/style/CircleStyler.jsx b/web/client/components/style/CircleStyler.jsx
@@ -16,9 +16,9 @@ const Slider = require('react-nouislider');
 const numberLocalizer = require('react-widgets/lib/localizers/simple-number');
 numberLocalizer();
 require('react-widgets/lib/less/react-widgets.less');
-const {hexToRgbObj, rgbToHex} = require('../../utils/ColorUtils');
 const {isNil} = require('lodash');
 const Message = require('../I18N/Message');
+const tinycolor = require("tinycolor2");
 
 class StylePolygon extends React.Component {
     static propTypes = {
@@ -45,8 +45,8 @@ class StylePolygon extends React.Component {
                             <div className="ms-marker-preview" style={{display: 'flex', width: '100%', height: 104}}>
                                 <StyleCanvas style={{ padding: 0, margin: "auto", display: "block"}}
                                     shapeStyle={assign({}, style, {
-                                        color: this.addOpacityToColor(hexToRgbObj(style.color), style.opacity),
-                                        fill: this.addOpacityToColor(hexToRgbObj(style.fillColor), style.fillOpacity)
+                                        color: this.addOpacityToColor(tinycolor(style.color).toRgb(), style.opacity),
+                                        fill: this.addOpacityToColor(tinycolor(style.fillColor).toRgb(), style.fillOpacity)
                                     })}
                                     geomType="Point"
                                 />
@@ -58,9 +58,9 @@ class StylePolygon extends React.Component {
                             <Message msgId="draw.fill"/>
                         </Col>
                         <Col xs={6} style={{position: 'static'}}>
-                            <ColorSelector key="poly-fill" color={this.addOpacityToColor(hexToRgbObj(style.fillColor), style.fillOpacity)} width={this.props.width} onChangeColor={c => {
+                            <ColorSelector key="poly-fill" color={this.addOpacityToColor(tinycolor(style.fillColor).toRgb(), style.fillOpacity)} width={this.props.width} onChangeColor={c => {
                                 if (!isNil(c)) {
-                                    const fillColor = rgbToHex(c.r, c.g, c.b);
+                                    const fillColor = tinycolor(c).toHexString();
                                     const fillOpacity = c.a;
                                     const newStyle = assign({}, this.props.shapeStyle, {
                                         [styleType]: assign({}, style, {fillColor, fillOpacity})
@@ -75,9 +75,9 @@ class StylePolygon extends React.Component {
                             <Message msgId="draw.stroke"/>
                         </Col>
                         <Col xs={6} style={{position: 'static'}}>
-                            <ColorSelector color={this.addOpacityToColor(hexToRgbObj(style.color), style.opacity)} width={this.props.width} onChangeColor={c => {
+                            <ColorSelector color={this.addOpacityToColor(tinycolor(style.color).toRgb(), style.opacity)} width={this.props.width} onChangeColor={c => {
                                 if (!isNil(c)) {
-                                    const color = rgbToHex(c.r, c.g, c.b);
+                                    const color = tinycolor(c).toHexString();
                                     const opacity = c.a;
                                     const newStyle = assign({}, this.props.shapeStyle, {
                                         [styleType]: assign({}, style, {color, opacity})

diff --git a/web/client/components/style/PolygonStyler.jsx b/web/client/components/style/PolygonStyler.jsx
@@ -16,9 +16,9 @@ const Slider = require('react-nouislider');
 const numberLocalizer = require('react-widgets/lib/localizers/simple-number');
 numberLocalizer();
 require('react-widgets/lib/less/react-widgets.less');
-const {hexToRgbObj, rgbToHex} = require('../../utils/ColorUtils');
 const Message = require('../I18N/Message');
 const {isNil} = require('lodash');
+const tinycolor = require("tinycolor2");
 
 class StylePolygon extends React.Component {
     static propTypes = {
@@ -46,8 +46,8 @@ class StylePolygon extends React.Component {
                             <div className="ms-marker-preview" style={{display: 'flex', width: '100%', height: 104}}>
                                 <StyleCanvas style={{ padding: 0, margin: "auto", display: "block"}}
                                     shapeStyle={assign({}, style, {
-                                        color: this.addOpacityToColor(hexToRgbObj(style.color), style.opacity),
-                                        fill: this.addOpacityToColor(hexToRgbObj(style.fillColor), style.fillOpacity)
+                                        color: this.addOpacityToColor(tinycolor(style.color).toRgb(), style.opacity),
+                                        fill: this.addOpacityToColor(tinycolor(style.fillColor).toRgb(), style.fillOpacity)
                                     })}
                                     geomType="Polygon"
                                 />
@@ -59,9 +59,9 @@ class StylePolygon extends React.Component {
                             <Message msgId="draw.fill"/>
                         </Col>
                         <Col xs={6} style={{position: 'static'}}>
-                            <ColorSelector key="poly-fill" color={this.addOpacityToColor(hexToRgbObj(style.fillColor), style.fillOpacity)} width={this.props.width} onChangeColor={c => {
+                            <ColorSelector key="poly-fill" color={this.addOpacityToColor(tinycolor(style.fillColor).toRgb(), style.fillOpacity)} width={this.props.width} onChangeColor={c => {
                                 if (!isNil(c)) {
-                                    const fillColor = rgbToHex(c.r, c.g, c.b);
+                                    const fillColor = tinycolor(c).toHexString();
                                     const fillOpacity = c.a;
                                     const newStyle = assign({}, this.props.shapeStyle, {
                                         [styleType]: assign({}, style, {fillColor, fillOpacity}),
@@ -77,16 +77,16 @@ class StylePolygon extends React.Component {
                             <Message msgId="draw.stroke"/>
                         </Col>
                         <Col xs={6} style={{position: 'static'}}>
-                            <ColorSelector color={this.addOpacityToColor(hexToRgbObj(style.color), style.opacity)} width={this.props.width} onChangeColor={c => {
+                            <ColorSelector color={this.addOpacityToColor(tinycolor(style.color).toRgb(), style.opacity)} width={this.props.width} onChangeColor={c => {
                                 if (!isNil(c)) {
-                                    const color = rgbToHex(c.r, c.g, c.b);
+                                    const color = tinycolor(c).toHexString();
                                     const opacity = c.a;
                                     const newStyle = assign({}, this.props.shapeStyle, {
                                         [styleType]: assign({}, style, {color, opacity}),
                                         [otherStyleType]: assign({}, style, {color, opacity})
                                     });
                                     this.props.setStyleParameter(newStyle);
-                            }
+                                }
                             }}/>
                         </Col>
                     </Row>

diff --git a/web/client/components/style/PolylineStyler.jsx b/web/client/components/style/PolylineStyler.jsx
@@ -16,9 +16,9 @@ const Slider = require('react-nouislider');
 const numberLocalizer = require('react-widgets/lib/localizers/simple-number');
 numberLocalizer();
 require('react-widgets/lib/less/react-widgets.less');
-const {hexToRgbObj, rgbToHex} = require('../../utils/ColorUtils');
 const Message = require('../I18N/Message');
 const {isNil} = require('lodash');
+const tinycolor = require("tinycolor2");
 
 class StylePolyline extends React.Component {
     static propTypes = {
@@ -46,7 +46,7 @@ class StylePolyline extends React.Component {
                             <div className="ms-marker-preview" style={{display: 'flex', width: '100%', height: 104}}>
                                 <StyleCanvas style={{ padding: 0, margin: "auto", display: "block"}}
                                     shapeStyle={assign({}, style, {
-                                        color: this.addOpacityToColor(hexToRgbObj(style.color), style.opacity)
+                                        color: this.addOpacityToColor(tinycolor(style.color).toRgb(), style.opacity)
                                     })}
                                     geomType="Polyline"
                                     height={40}
@@ -59,11 +59,11 @@ class StylePolyline extends React.Component {
                             <Message msgId="draw.stroke"/>
                         </Col>
                         <Col xs={6} style={{position: 'static'}}>
-                            <ColorSelector color={this.addOpacityToColor(hexToRgbObj(style.color), style.opacity)}
+                            <ColorSelector color={this.addOpacityToColor(tinycolor(style.color).toRgb(), style.opacity)}
                                 width={this.props.width}
                                 onChangeColor={c => {
                                     if (!isNil(c)) {
-                                        const color = rgbToHex(c.r, c.g, c.b);
+                                        const color = tinycolor(c).toHexString();
                                         const opacity = c.a;
                                         const newStyle = assign({}, this.props.shapeStyle, {
                                             [styleType]: assign({}, style, {color, opacity}),

diff --git a/web/client/components/style/TextStyler.jsx b/web/client/components/style/TextStyler.jsx
@@ -16,10 +16,10 @@ const StyleCanvas = require('./StyleCanvas');
 const numberLocalizer = require('react-widgets/lib/localizers/simple-number');
 numberLocalizer();
 require('react-widgets/lib/less/react-widgets.less');
-const {hexToRgbObj, rgbToHex} = require('../../utils/ColorUtils');
 const LocaleUtils = require('../../utils/LocaleUtils');
 const {createFont} = require('../../utils/AnnotationsUtils');
 const Message = require('../I18N/Message');
+const tinycolor = require("tinycolor2");
 
 class TextStyler extends React.Component {
     static propTypes = {
@@ -67,7 +67,7 @@ class TextStyler extends React.Component {
                             <div className="ms-marker-preview" style={{display: 'flex', width: '100%', height: 104}}>
                                 {<StyleCanvas style={{ padding: 0, margin: "auto", display: "block"}}
                                     shapeStyle={assign({}, style, {
-                                        color: this.addOpacityToColor(hexToRgbObj(style.color), style.opacity)
+                                        color: this.addOpacityToColor(tinycolor(style.color).toRgb(), style.opacity)
                                     })}
                                     geomType="Polyline"
                                     height={40}
@@ -80,10 +80,10 @@ class TextStyler extends React.Component {
                             <Message msgId="draw.font.textColor"/>
                         </Col>
                         <Col xs={6} style={{position: 'static'}}>
-                            <ColorSelector color={this.addOpacityToColor(hexToRgbObj(style.color), style.opacity)}
+                            <ColorSelector color={this.addOpacityToColor(tinycolor(style.color).toRgb(), style.opacity)}
                                 width={this.props.width}
                                 onChangeColor={c => {
-                                    const color = rgbToHex(c.r, c.g, c.b);
+                                    const color = tinycolor(c).toHexString();
                                     const opacity = c.a;
                                     const newStyle = assign({}, shapeStyle, {
                                         [styleType]: assign({}, style, {color, opacity})

diff --git a/web/client/utils/ColorUtils.js b/web/client/utils/ColorUtils.js
@@ -159,57 +159,6 @@ const ColorUtils = {
         }
     },
     colorToHexStr: (color = 'red') => tinycolor(color).toHexString(),
-    /**
-      * Return with position of a character in this.HCHARS string
-      * @private
-      * @param {Char} c
-      * @return {Integer}
-     */
-     getHCharPos: (c) => {
-         const HCHARS = '0123456789ABCDEF';
-         return HCHARS.indexOf( c.toUpperCase() );
-     },
-     /**
-      * Convert a hexa string to decimal
-      * @param {String} hex
-      * @return {Integer}
-     */
-     hexToDec: (hex) => {
-         const s = hex.split('');
-         return (ColorUtils.getHCharPos(s[0]) * 16 ) + (s.length === 2 ? ColorUtils.getHCharPos(s[1]) : 0);
-     },
-     /**
-      * Convert a hexa string to RGB color format
-      * hex can also contain #
-      * @param {String} hex
-      * @return {Array}
- 	 */
-     hexToRgb: (hex) => {
-         let hexSymbol = 0;
-         if (hex[0] === "#") {
-             hexSymbol = 1;
-         }
-         if (hex.length <= 4) {
-             // shorhand format #CB2
-             return [ ColorUtils.hexToDec(hex.substr(0 + hexSymbol, 1)), ColorUtils.hexToDec(hex.substr(1 + hexSymbol, 1)), ColorUtils.hexToDec(hex.substr(2 + hexSymbol, 1)) ];
-         }
-         // long format #CCBB22
-         return [ ColorUtils.hexToDec(hex.substr(0 + hexSymbol, 2)), ColorUtils.hexToDec(hex.substr(2 + hexSymbol, 2)), ColorUtils.hexToDec(hex.substr(4 + hexSymbol, 2)) ];
-     },
-     /**
-     * Convert a hex string to RGB color format
-     * hex containing of #
-     * @param {String} hex
-     * @return {Object}
-     */
-     hexToRgbObj: (hex) => {
-         const rgb = ColorUtils.hexToRgb(hex);
-         return {
-             r: rgb[0],
-             g: rgb[1],
-             b: rgb[2]
-         };
-     },
     /**
     * convert any valid css color to rgba str
     * @param {string} color any valid css color