Skip to content

Commit

Permalink
Fix geosolutions-it#2951 circle draw and styles annotations
Browse files Browse the repository at this point in the history
  • Loading branch information
@MV88
MV88 committed May 29, 2018
1 parent 415b07f commit f8eee28
Show file tree
Hide file tree
Showing 5 changed files with 98 additions and 34 deletions.
2 changes: 1 addition & 1 deletion web/client/components/map/openlayers/DrawSupport.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -490,7 +490,7 @@ class DrawSupport extends React.Component {
return geom;
};
} else {
roiProps.geometryFunction = roiProps.type = geometryType;
roiProps.type = geometryType;
}
break;
}
Expand Down
29 changes: 17 additions & 12 deletions web/client/components/style/CircleStyler.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ 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');

class StylePolygon extends React.Component {
Expand Down Expand Up @@ -58,12 +59,14 @@ class StylePolygon extends React.Component {
</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 => {
const fillColor = rgbToHex(c.r, c.g, c.b);
const fillOpacity = c.a;
const newStyle = assign({}, this.props.shapeStyle, {
[styleType]: assign({}, style, {fillColor, fillOpacity})
});
this.props.setStyleParameter(newStyle);
if (!isNil(c)) {
const fillColor = rgbToHex(c.r, c.g, c.b);
const fillOpacity = c.a;
const newStyle = assign({}, this.props.shapeStyle, {
[styleType]: assign({}, style, {fillColor, fillOpacity})
});
this.props.setStyleParameter(newStyle);
}
}}/>
</Col>
</Row>
Expand All @@ -73,12 +76,14 @@ class StylePolygon extends React.Component {
</Col>
<Col xs={6} style={{position: 'static'}}>
<ColorSelector color={this.addOpacityToColor(hexToRgbObj(style.color), style.opacity)} width={this.props.width} onChangeColor={c => {
const color = rgbToHex(c.r, c.g, c.b);
const opacity = c.a;
const newStyle = assign({}, this.props.shapeStyle, {
[styleType]: assign({}, style, {color, opacity})
});
this.props.setStyleParameter(newStyle);
if (!isNil(c)) {
const color = rgbToHex(c.r, c.g, c.b);
const opacity = c.a;
const newStyle = assign({}, this.props.shapeStyle, {
[styleType]: assign({}, style, {color, opacity})
});
this.props.setStyleParameter(newStyle);
}
}}/>
</Col>
</Row>
Expand Down
33 changes: 19 additions & 14 deletions web/client/components/style/PolygonStyler.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ numberLocalizer();
require('react-widgets/lib/less/react-widgets.less');
const {hexToRgbObj, rgbToHex} = require('../../utils/ColorUtils');
const Message = require('../I18N/Message');
const {isNil} = require('lodash');

class StylePolygon extends React.Component {
static propTypes = {
Expand Down Expand Up @@ -59,13 +60,15 @@ class StylePolygon extends React.Component {
</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 => {
const fillColor = rgbToHex(c.r, c.g, c.b);
const fillOpacity = c.a;
const newStyle = assign({}, this.props.shapeStyle, {
[styleType]: assign({}, style, {fillColor, fillOpacity}),
[otherStyleType]: assign({}, style, {fillColor, fillOpacity})
});
this.props.setStyleParameter(newStyle);
if (!isNil(c)) {
const fillColor = rgbToHex(c.r, c.g, c.b);
const fillOpacity = c.a;
const newStyle = assign({}, this.props.shapeStyle, {
[styleType]: assign({}, style, {fillColor, fillOpacity}),
[otherStyleType]: assign({}, style, {fillColor, fillOpacity})
});
this.props.setStyleParameter(newStyle);
}
}}/>
</Col>
</Row>
Expand All @@ -75,13 +78,15 @@ class StylePolygon extends React.Component {
</Col>
<Col xs={6} style={{position: 'static'}}>
<ColorSelector color={this.addOpacityToColor(hexToRgbObj(style.color), style.opacity)} width={this.props.width} onChangeColor={c => {
const color = rgbToHex(c.r, c.g, c.b);
const opacity = c.a;
const newStyle = assign({}, this.props.shapeStyle, {
[styleType]: assign({}, style, {color, opacity}),
[otherStyleType]: assign({}, style, {color, opacity})
});
this.props.setStyleParameter(newStyle);
if (!isNil(c)) {
const color = rgbToHex(c.r, c.g, c.b);
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>
Expand Down
17 changes: 10 additions & 7 deletions web/client/components/style/PolylineStyler.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ numberLocalizer();
require('react-widgets/lib/less/react-widgets.less');
const {hexToRgbObj, rgbToHex} = require('../../utils/ColorUtils');
const Message = require('../I18N/Message');
const {isNil} = require('lodash');

class StylePolyline extends React.Component {
static propTypes = {
Expand Down Expand Up @@ -61,13 +62,15 @@ class StylePolyline extends React.Component {
<ColorSelector color={this.addOpacityToColor(hexToRgbObj(style.color), style.opacity)}
width={this.props.width}
onChangeColor={c => {
const color = rgbToHex(c.r, c.g, c.b);
const opacity = c.a;
const newStyle = assign({}, this.props.shapeStyle, {
[styleType]: assign({}, style, {color, opacity}),
[otherStyleType]: assign({}, style, {color, opacity})
});
this.props.setStyleParameter(newStyle);
if (!isNil(c)) {
const color = rgbToHex(c.r, c.g, c.b);
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>
Expand Down
51 changes: 51 additions & 0 deletions web/client/utils/ColorUtils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,6 +159,57 @@ 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
Expand Down

0 comments on commit f8eee28

Please sign in to comment.