Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix #2951 circle draw and styles annotations #2952

Merged
merged 2 commits into from
May 29, 2018
Merged

Fix #2951 circle draw and styles annotations #2952

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f8eee28
Fix #2951 circle draw and styles annotations
MV88 May 29, 2018
a9e4f36
fix styler components
MV88 May 29, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion web/client/components/map/openlayers/DrawSupport.jsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,6 +159,57 @@ const ColorUtils = {
}
},
colorToHexStr: (color = 'red') => tinycolor(color).toHexString(),
/**
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We already include tinycolor2 that should have all these functions available

* 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