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

#9822 - Fix - [Annotations] Geometry title not easy to modify #9831

Merged
merged 2 commits into from
Jan 9, 2024
Merged

#9822 - Fix - [Annotations] Geometry title not easy to modify #9831

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d84fad6
#9822 - Fix - [Annotations] Geometry title not easy to modify
dsuren1 Dec 19, 2023
f361b6f
code refactor
dsuren1 Dec 19, 2023
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
62 changes: 48 additions & 14 deletions web/client/components/mapcontrols/annotations/AnnotationsEditor.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -280,6 +280,21 @@ class AnnotationsEditor extends React.Component {
this.props.onInitPlugin();
}

onAddGeometryAction = (type) => {
this.addGeometryTitle();
this.props.onAddGeometry(type);
}

onSelectFeatureAction = (feature) => {
this.addGeometryTitle();
this.props.onSelectFeature(feature);
}

onUnSelectFeatureAction = () => {
this.addGeometryTitle();
this.props.onUnSelectFeature();
}

getConfig = () => {
return {...defaultConfig, ...this.props.config, onFilterMarker: this.props.onFilterMarker};
};
Expand Down Expand Up @@ -308,6 +323,15 @@ class AnnotationsEditor extends React.Component {
return handleExpression({}, {}, '{(function(value) {return ' + validator + ';})}');
};

getGeometryTitle = (isLabel = false) => {
const type = this.props.selected ? getGeometryType(this.props.selected) : "";
const {label = ""} = isEmpty(type) ? {} : getGeometryGlyphInfo(type);
if (isLabel) {
return label;
}
return this.props.selected?.properties?.geometryTitle ?? label ?? this.props.selected?.properties?.id;
}

renderViewButtons = () => {
return (
<Grid fluid style={this.props.styling ? { width: '100%', boxShadow: 'none' } : { width: '100%' }}>
Expand Down Expand Up @@ -397,7 +421,7 @@ class AnnotationsEditor extends React.Component {
glyph: 'floppy-disk',
tooltipPosition: 'bottom',
tooltipId: !areAllFeaturesValid ? "annotations.annotationSaveGeometryError" : !isEmpty(this.props.selected) ? "annotations.saveGeometry" : "annotations.save",
disabled: (this.props.selected && this.props.selected.properties && !this.props.selected.properties.isValidFeature) || !areAllFeaturesValid,
disabled: (this.props.selected && this.props.selected.properties && (!this.props.selected.properties.isValidFeature || !this.getGeometryTitle())) || !areAllFeaturesValid,
onClick: () => this.save()
},
{
Expand Down Expand Up @@ -483,7 +507,7 @@ class AnnotationsEditor extends React.Component {
{editing && <FeaturesList
editing={this.props.editing}
selected={this.props.selected}
onAddGeometry={this.props.onAddGeometry}
onAddGeometry={this.onAddGeometryAction}
onSetStyle={this.props.onSetStyle}
onStartDrawing={this.props.onStartDrawing}
onAddText={this.props.onAddText}
Expand All @@ -493,9 +517,9 @@ class AnnotationsEditor extends React.Component {
setTabValue={this.setTabValue}
styling={this.props.styling}
onStyleGeometry={this.props.onStyleGeometry}
onSelectFeature={this.props.onSelectFeature}
onSelectFeature={this.onSelectFeatureAction}
drawing={this.props.drawing}
onUnselectFeature={this.props.onUnSelectFeature}
onUnselectFeature={this.onUnSelectFeatureAction}
onGeometryHighlight={this.props.onGeometryHighlight}
isMeasureEditDisabled={this.isMeasureEditDisabled()}
onSetAnnotationMeasurement={this.setAnnotationMeasurement}
Expand Down Expand Up @@ -653,7 +677,7 @@ class AnnotationsEditor extends React.Component {
}
} : {};
const type = this.props.selected ? getGeometryType(this.props.selected) : "";
const {glyph = "", label = ""} = isEmpty(type) ? {} : getGeometryGlyphInfo(type);
const {glyph = ""} = isEmpty(type) ? {} : getGeometryGlyphInfo(type);
return (
<div style={{display: "flex"}} className={"mapstore-annotations-info-viewer" + (this.props.mouseHoverEvents ? " hover-background" : "")} {...mouseHoverEvents}>
<div style={{flex: 1}}>
Expand All @@ -667,15 +691,17 @@ class AnnotationsEditor extends React.Component {
<div style={{padding: 8, display: 'flex', alignItems: 'center'}}>
<Glyphicon glyph={glyph} style={{fontSize: 20, paddingRight: 8}}/>
<div style={{flex: 1}}>
<FormControl
value={this.props.selected?.properties?.geometryTitle || label || this.props.selected?.properties?.id}
name="text"
placeholder="Enter geometry title"
onChange={e => {
const valueText = e.target.value.trim();
this.props.onChangeGeometryTitle(valueText ? valueText : label);
}}
type="text"/>
<FormGroup validationState={!this.getGeometryTitle() ? "error" : null}>
<FormControl
value={this.getGeometryTitle()}
name="text"
placeholder="Enter geometry title"
onChange={e => {
const valueText = e.target.value.trim();
this.props.onChangeGeometryTitle(valueText);
}}
type="text"/>
</FormGroup>
</div>
</div>
{this.props.selected?.properties?.isText && <div style={{padding: 8}}>
Expand Down Expand Up @@ -776,6 +802,14 @@ class AnnotationsEditor extends React.Component {
);
}

addGeometryTitle = () => {
const title = this.getGeometryTitle();
if (isEmpty(title)) {
const defaultTitle = this.getGeometryTitle(true);
!isEmpty(defaultTitle) && this.props.onChangeGeometryTitle(defaultTitle);
}
}

validateFeatures = () => {
let areAllGeometriesValid = true;
if (Array.isArray(this.props?.editing?.features)) {
Expand Down
44 changes: 40 additions & 4 deletions web/client/components/mapcontrols/annotations/__tests__/AnnotationsEditor-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,9 +99,32 @@ describe("test the AnnotationsEditor Panel", () => {
const viewer = ReactDOM.render(<AnnotationsEditor {...properties} {...actions} editing={{
properties
}}/>, document.getElementById("container"));
expect(viewer).toExist();
expect(TestUtils.scryRenderedDOMComponentsWithTag(viewer, "input").length).toEqual(1);
expect(TestUtils.scryRenderedDOMComponentsWithClass(viewer, "quill").length).toEqual(1);
expect(viewer).toBeTruthy();
expect(document.querySelector(".mapstore-annotations-info-viewer-title")).toBeTruthy();
expect(document.querySelector(".mapstore-annotations-info-viewer-description")).toBeTruthy();
});

it('test annotation geometry title', () => {
const properties = {
id: "1",
title: 'mytitle',
description: '<span><i>desc</i></span>'
};

let viewer = ReactDOM.render(<AnnotationsEditor {...properties} {...actions} editing={{
properties
}} selected={{geometry: {type: "Point", coordinates: [1, 1]}, properties: {isValidFeature: true, geometryTitle: "Point-1"}}}/>,
document.getElementById("container"));
expect(viewer).toBeTruthy();
let input = document.querySelector(".mapstore-annotations-info-viewer-expanded input");
expect(input).toBeTruthy();
expect(input.value).toBe('Point-1');
viewer = ReactDOM.render(<AnnotationsEditor {...properties} {...actions} editing={{
properties
}} selected={{geometry: {type: "Point", coordinates: [1, 1]}, properties: {isValidFeature: true}}}/>,
document.getElementById("container"));
input = document.querySelector(".mapstore-annotations-info-viewer-expanded input");
expect(input.value).toBe('Point');
});

it('test click remove annotation', () => {
Expand Down Expand Up @@ -199,7 +222,7 @@ describe("test the AnnotationsEditor Panel", () => {
marker: ["Test marker"],
symbol: ["Test symbol"]
}};
const viewer = ReactDOM.render(<AnnotationsEditor {...feature} {...actions}
let viewer = ReactDOM.render(<AnnotationsEditor {...feature} {...actions}
selected={{features: [], properties: {isValidFeature: true}}}
editing={{
properties: feature,
Expand All @@ -216,6 +239,19 @@ describe("test the AnnotationsEditor Panel", () => {

expect(saveButton).toExist();
TestUtils.Simulate.click(saveButton);
expect(spySaveGeometry).toNotHaveBeenCalled();
viewer = ReactDOM.render(<AnnotationsEditor {...feature} {...actions}
selected={{features: [], properties: {isValidFeature: true, geometryTitle: "Point-1"}}}
editing={{
properties: feature,
features: [{ properties: {
isValidFeature: true
} }]
}}
defaultStyles={defaultStyles}
onAddNewFeature={testHandlers.onAddNewFeature}
/>, document.getElementById("container"));
TestUtils.Simulate.click(saveButton);
expect(spySaveGeometry).toHaveBeenCalled();
});

Expand Down
Loading