Skip to content

Commit

Permalink
Fix #2951 circle draw and styles annotations (#2952)
Browse files Browse the repository at this point in the history 
* Fix #2951 circle draw and styles annotations

* fix styler components
  • Loading branch information
@MV88
MV88 authored May 29, 2018
1 parent 415b07f commit 07f1d0c
Show file tree
Hide file tree
Showing 5 changed files with 64 additions and 51 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
39 changes: 22 additions & 17 deletions web/client/components/style/CircleStyler.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +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 = {
Expand All @@ -44,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"
/>
Expand All @@ -57,13 +58,15 @@ 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 => {
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);
<ColorSelector key="poly-fill" color={this.addOpacityToColor(tinycolor(style.fillColor).toRgb(), style.fillOpacity)} width={this.props.width} onChangeColor={c => {
if (!isNil(c)) {
const fillColor = tinycolor(c).toHexString();
const fillOpacity = c.a;
const newStyle = assign({}, this.props.shapeStyle, {
[styleType]: assign({}, style, {fillColor, fillOpacity})
});
this.props.setStyleParameter(newStyle);
}
}}/>
</Col>
</Row>
Expand All @@ -72,13 +75,15 @@ 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 => {
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);
<ColorSelector color={this.addOpacityToColor(tinycolor(style.color).toRgb(), style.opacity)} width={this.props.width} onChangeColor={c => {
if (!isNil(c)) {
const color = tinycolor(c).toHexString();
const opacity = c.a;
const newStyle = assign({}, this.props.shapeStyle, {
[styleType]: assign({}, style, {color, opacity})
});
this.props.setStyleParameter(newStyle);
}
}}/>
</Col>
</Row>
Expand Down
43 changes: 24 additions & 19 deletions web/client/components/style/PolygonStyler.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +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 = {
Expand Down Expand Up @@ -45,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"
/>
Expand All @@ -58,14 +59,16 @@ 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 => {
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);
<ColorSelector key="poly-fill" color={this.addOpacityToColor(tinycolor(style.fillColor).toRgb(), style.fillOpacity)} width={this.props.width} onChangeColor={c => {
if (!isNil(c)) {
const fillColor = tinycolor(c).toHexString();
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 @@ -74,14 +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 => {
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);
<ColorSelector color={this.addOpacityToColor(tinycolor(style.color).toRgb(), style.opacity)} width={this.props.width} onChangeColor={c => {
if (!isNil(c)) {
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>
Expand Down
23 changes: 13 additions & 10 deletions web/client/components/style/PolylineStyler.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +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 = {
Expand Down Expand Up @@ -45,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}
Expand All @@ -58,16 +59,18 @@ 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 => {
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 = 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>
Expand Down
8 changes: 4 additions & 4 deletions web/client/components/style/TextStyler.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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}
Expand All @@ -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})
Expand Down

0 comments on commit 07f1d0c

Please sign in to comment.