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

feat{geometry-form-field}: allow to set symbol #373

Merged
merged 2 commits into from
Jul 25, 2019
Merged

feat{geometry-form-field}: allow to set symbol #373

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
9bbab0a
feat{geometry-form-field}: allow to set symbol
ameliebernier Jul 24, 2019
306e355
feat(geometry-form-field): better symbol control
ameliebernier Jul 25, 2019
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
89 changes: 65 additions & 24 deletions packages/geo/src/lib/geometry/geometry-form-field/geometry-form-field-input.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { NgControl, ControlValueAccessor } from '@angular/forms';

import { Subscription } from 'rxjs';

import { Style as OlStyle } from 'ol/style';
import * as OlStyle from 'ol/style';
import OlGeoJSON from 'ol/format/GeoJSON';
import OlGeometry from 'ol/geom/Geometry';
import OlGeometryType from 'ol/geom/GeometryType';
Expand All @@ -24,7 +24,6 @@ import OlOverlay from 'ol/Overlay';
import { IgoMap } from '../../map';
import {
MeasureLengthUnit,
clearOlGeometryMidpoints,
updateOlGeometryMidpoints,
formatMeasure,
measureOlGeometry
Expand Down Expand Up @@ -52,11 +51,10 @@ export class GeometryFormFieldInputComponent implements OnInit, OnDestroy, Contr

private drawControl: DrawControl;
private modifyControl: ModifyControl;
private drawInteractionStyle: OlStyle;
private defaultDrawStyleRadius: number;
private olGeometryEnds$$: Subscription;
private olGeometryChanges$$: Subscription;

private drawInteractionStyle: OlStyle;
private olTooltip = OlOverlay;

/**
Expand Down Expand Up @@ -89,13 +87,29 @@ export class GeometryFormFieldInputComponent implements OnInit, OnDestroy, Contr
/**
* The drawGuide around the mouse pointer to help drawing
*/
@Input() drawGuide = 0;
@Input() drawGuide: number = null;

/**
* Whether a measure tooltip should be displayed
*/
@Input() measure: boolean = false;

/**
* Color (R, G, B) for features drawn on the map
*/
@Input()
set symbolColor(value: [number, number, number]) {
this._symbolColor = value;
this.updateDrawStyleWithColor(value);
}
get symbolColor(): [number, number, number] { return this._symbolColor; }
private _symbolColor: [number, number, number];

/**
* Icon for point geometries drawn on the map
*/
@Input() pointIcon: OlStyle.Icon;

/**
* The geometry value (GeoJSON)
* Implemented as part of ControlValueAccessor.
Expand Down Expand Up @@ -148,7 +162,7 @@ export class GeometryFormFieldInputComponent implements OnInit, OnDestroy, Contr
ngOnInit() {
this.addOlOverlayLayer();
this.createMeasureTooltip();
this.drawInteractionStyle = createDrawInteractionStyle();
this.drawInteractionStyle = createDrawInteractionStyle(this.symbolColor);
this.defaultDrawStyleRadius = this.drawInteractionStyle.getImage().getRadius();
this.createDrawControl();
this.createModifyControl();
Expand Down Expand Up @@ -200,7 +214,8 @@ export class GeometryFormFieldInputComponent implements OnInit, OnDestroy, Contr
private addOlOverlayLayer(): OlVectorLayer {
this.olOverlayLayer = new OlVectorLayer({
source: new OlVectorSource(),
zIndex: 500
zIndex: 500,
style: null
});
this.map.ol.addLayer(this.olOverlayLayer);
}
Expand All @@ -209,15 +224,22 @@ export class GeometryFormFieldInputComponent implements OnInit, OnDestroy, Contr
* Create a draw control and subscribe to it's geometry
*/
private createDrawControl() {
this.drawControl = new DrawControl({
geometryType: this.geometryType,
layer: this.olOverlayLayer,
drawStyle: (olFeature: OlFeature, resolution: number) => {
const style = this.drawInteractionStyle;
this.updateDrawStyleWithDrawGuide(style, resolution);
return style;
}
});
if (this.geometryType) {
Copy link
Collaborator

Choose a reason for hiding this comment

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

I think the createDrawControl in ngOnInit could be harmlessly removed and the check for a defined geometryType moved to the geometryType setter. This would remove the need for a check here.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

So no tool would be activated by default? Because if there is a geometryType defined on init the tool should be activated I think

Copy link
Collaborator

Choose a reason for hiding this comment

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

ngOnInit is invoked after the inputs have been resolved so there should still be at least one control active.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I tried but it knida breaks the logic, there is a condition in the geometry type setter which returns when onInit is not completed

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Should I keep as it is or change that also

Copy link
Collaborator

Choose a reason for hiding this comment

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

I think it could be safely removed from the geometryType setter. I have been working on a version of this component that completely removes the need for the "ready" flag. I might push it later but, for now, let's remove it from the setter only, if possible.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It does not simplify things a lot I fear... Draw control cannot be created before overlay layer is added to the map

Copy link
Contributor Author

Choose a reason for hiding this comment

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

If I do some kind of default vector layer is hooked to the draw control and the first geometry is added twice

this.drawControl = new DrawControl({
geometryType: this.geometryType,
layer: this.olOverlayLayer,
drawStyle: (olFeature: OlFeature, resolution: number) => {
const style = this.drawInteractionStyle;
if (this.pointIcon && this.geometryType === 'Point' && !this.drawGuide) {
this.drawInteractionStyle.setImage(this.pointIcon);
} else {
this.drawInteractionStyle.setImage(createDrawInteractionStyle(this.symbolColor).getImage());
}
this.updateDrawStyleWithDrawGuide(style, resolution);
return style;
}
});
}
}

/**
Expand All @@ -239,7 +261,7 @@ export class GeometryFormFieldInputComponent implements OnInit, OnDestroy, Contr
*/
private toggleControl() {
this.deactivateControl();
if (!this.value) {
if (!this.value && this.geometryType) {
Copy link
Collaborator

Choose a reason for hiding this comment

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

I get why you check if the geometryType is defined but I think it would be more "futureproof" to check if the drawControl itself is defined.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Draw control was still defined even with invalid geometry type

Copy link
Collaborator

Choose a reason for hiding this comment

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

I think this would be solved with the modification suggested above.

this.activateControl(this.drawControl);
} else {
this.activateControl(this.modifyControl);
Expand Down Expand Up @@ -323,6 +345,10 @@ export class GeometryFormFieldInputComponent implements OnInit, OnDestroy, Contr
featureProjection: this.map.projection
});
const olFeature = new OlFeature({geometry: olGeometry});
olFeature.setStyle(createDrawInteractionStyle(this.symbolColor));
if (this.pointIcon && olFeature.getGeometry().getType() === 'Point') {
olFeature.getStyle().setImage(this.pointIcon);
}
this.olOverlaySource.clear();
this.olOverlaySource.addFeature(olFeature);
}
Expand Down Expand Up @@ -384,14 +410,29 @@ export class GeometryFormFieldInputComponent implements OnInit, OnDestroy, Contr
}

private updateDrawStyleWithDrawGuide(olStyle: OlStyle, resolution: number) {
const drawGuide = this.drawGuide;
let radius;
if (drawGuide === undefined || drawGuide < 0) {
radius = this.defaultDrawStyleRadius;
} else {
radius = drawGuide > 0 ? drawGuide / resolution : drawGuide;
if (olStyle.getImage().setRadius) {
const drawGuide = this.drawGuide;
let radius;
if (drawGuide === null || drawGuide < 0) {
radius = this.defaultDrawStyleRadius;
} else {
radius = drawGuide > 0 ? drawGuide / resolution : drawGuide;
}
olStyle.getImage().setRadius(radius);
}
olStyle.getImage().setRadius(radius);
}

/**
* Updates draw style color
* @param color New style color (R, G, B)
*/
private updateDrawStyleWithColor(color: [number, number, number]) {
if (this.drawInteractionStyle) {
const radius = this.drawInteractionStyle.getImage().getRadius ? this.drawInteractionStyle.getImage().getRadius() : null;
this.drawInteractionStyle = createDrawInteractionStyle(color);
if (this.drawInteractionStyle.getImage().setRadius) {
this.drawInteractionStyle.getImage().setRadius(radius);
}
}
}
}
4 changes: 3 additions & 1 deletion packages/geo/src/lib/geometry/geometry-form-field/geometry-form-field.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,9 @@
[map]="map"
[geometryType]="geometryType$ | async"
[drawGuide]="drawGuide$ | async"
[measure]="measure">
[measure]="measure"
[symbolColor]="symbolColor"
[pointIcon]="pointIcon">
</igo-geometry-form-field-input>

<div *ngIf="geometryTypeField" class="geometry-type-toggle">
Expand Down
14 changes: 12 additions & 2 deletions packages/geo/src/lib/geometry/geometry-form-field/geometry-form-field.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { FormControl } from '@angular/forms';
import { BehaviorSubject, Subscription } from 'rxjs';

import OlGeometryType from 'ol/geom/GeometryType';
import { Style as OlStyle } from 'ol/style';

import { FormFieldComponent } from '@igo2/common';

Expand Down Expand Up @@ -69,7 +70,7 @@ export class GeometryFormFieldComponent implements OnInit, OnDestroy {
/**
* The drawGuide around the mouse pointer to help drawing
*/
@Input() drawGuide: number = 0;
@Input() drawGuide: number = null;

/**
* Draw guide placeholder
Expand All @@ -81,6 +82,16 @@ export class GeometryFormFieldComponent implements OnInit, OnDestroy {
*/
@Input() measure: boolean = false;

/**
* Color (R, G, B) for features drawn on the map
*/
@Input() symbolColor: [number, number, number];

/**
* Icon for point geometries drawn on the map
*/
@Input() pointIcon: OlStyle.Icon;

/**
* The geometry type model
*/
Expand Down Expand Up @@ -126,5 +137,4 @@ export class GeometryFormFieldComponent implements OnInit, OnDestroy {
onDrawGuideChange(value: number) {
this.drawGuide$.next(value);
}

}
14 changes: 8 additions & 6 deletions packages/geo/src/lib/geometry/shared/geometry.utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,24 +14,26 @@ import {

/**
* Create a default style for draw and modify interactions
* @param color Style color (R, G, B)
* @returns OL style
*/
export function createDrawInteractionStyle(): olstyle.Style {
export function createDrawInteractionStyle(color?: [number, number, number]): olstyle.Style {
color = color || [0, 153, 255];
return new olstyle.Style({
stroke: new olstyle.Stroke({
color: [0, 153, 255, 1],
color: color.concat([1]),
width: 2
}),
fill: new olstyle.Fill({
color: [0, 153, 255, 0.2]
color: color.concat([0.2])
}),
image: new olstyle.Circle({
radius: 5,
radius: 8,
stroke: new olstyle.Stroke({
color: [0, 153, 255, 1],
color: color.concat([1])
}),
fill: new olstyle.Fill({
color: [0, 153, 255, 0.2]
color: color.concat([0.2])
})
})
});
Expand Down