Skip to content

Commit b12ad85

Browse files
author
Aaron Caldwell
committed
Add edit controls
1 parent 3d7ad76 commit b12ad85

10 files changed

Lines changed: 145 additions & 63 deletions

File tree

‎x-pack/plugins/maps/common/constants.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -158,6 +158,9 @@ export enum DRAW_TYPE {
158158
POLYGON = 'POLYGON',
159159
POINT = 'POINT',
160160
LINE = 'LINE',
161+
DIRECT_SELECT = 'DIRECT_SELECT',
162+
SIMPLE_SELECT = 'SIMPLE_SELECT',
163+
TRASH = 'TRASH',
161164
}
162165

163166
export const AGG_DELIMITER = '_of_';

‎x-pack/plugins/maps/public/connected_components/mb_map/draw_control/draw_control.tsx‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,18 @@
66
*/
77

88
import _ from 'lodash';
9-
import React, {Component} from 'react';
9+
import React, { Component } from 'react';
1010
// @ts-expect-error
1111
import MapboxDraw from '@mapbox/mapbox-gl-draw';
1212
// @ts-expect-error
1313
import DrawRectangle from 'mapbox-gl-draw-rectangle-mode';
14-
import {Map as MbMap} from 'mapbox-gl';
15-
import {Feature} from 'geojson';
16-
import {DRAW_TYPE} from '../../../../common/constants';
17-
import {DrawCircle} from './draw_circle';
18-
import {DrawTooltip} from './draw_tooltip';
14+
import { Map as MbMap } from 'mapbox-gl';
15+
import { Feature } from 'geojson';
16+
import { DRAW_TYPE } from '../../../../common/constants';
17+
import { DrawCircle } from './draw_circle';
18+
import { DrawTooltip } from './draw_tooltip';
1919

20+
const SIMPLE_SELECT = 'simple_select';
2021
const DRAW_RECTANGLE = 'draw_rectangle';
2122
const DRAW_CIRCLE = 'draw_circle';
2223
const DRAW_POLYGON = 'draw_polygon';
@@ -76,10 +77,17 @@ export class DrawControl extends Component<Props, {}> {
7677

7778
this.props.mbMap.getCanvas().style.cursor = '';
7879
this.props.mbMap.off('draw.create', this.props.onDraw);
80+
this.props.mbMap.off('draw.selectionchange', this._handleFeatureSelected);
7981
this.props.mbMap.removeControl(this._mbDrawControl);
8082
this._mbDrawControlAdded = false;
8183
}
8284

85+
_handleFeatureSelected = () => {
86+
if (this.props.drawType === DRAW_TYPE.TRASH) {
87+
this._mbDrawControl.trash();
88+
}
89+
};
90+
8391
_updateDrawControl() {
8492
if (!this.props.drawType) {
8593
return;
@@ -90,6 +98,7 @@ export class DrawControl extends Component<Props, {}> {
9098
this._mbDrawControlAdded = true;
9199
this.props.mbMap.getCanvas().style.cursor = 'crosshair';
92100
this.props.mbMap.on('draw.create', this.props.onDraw);
101+
this.props.mbMap.on('draw.selectionchange', this._handleFeatureSelected);
93102
}
94103

95104
const drawMode = this._mbDrawControl.getMode();
@@ -103,6 +112,8 @@ export class DrawControl extends Component<Props, {}> {
103112
this._mbDrawControl.changeMode(DRAW_POLYGON);
104113
} else if (drawMode !== DRAW_POINT && this.props.drawType === DRAW_TYPE.POINT) {
105114
this._mbDrawControl.changeMode(DRAW_POINT);
115+
} else if (drawMode !== SIMPLE_SELECT && this.props.drawType === DRAW_TYPE.SIMPLE_SELECT) {
116+
this._mbDrawControl.changeMode(SIMPLE_SELECT);
106117
} else if (
107118
drawMode !== this._mbDrawControl.modes.DRAW_POLYGON &&
108119
this.props.drawType === DRAW_TYPE.POLYGON

x-pack/plugins/maps/public/connected_components/toolbar_overlay/feature_edit_control/__snapshots__/feature_edit_control.test.tsx.snap renamed to x-pack/plugins/maps/public/connected_components/toolbar_overlay/feature_draw_controls/__snapshots__/feature_edit_control.test.tsx.snap

File renamed without changes.

x-pack/plugins/maps/public/connected_components/toolbar_overlay/feature_edit_control/_index.scss renamed to x-pack/plugins/maps/public/connected_components/toolbar_overlay/feature_draw_controls/_index.scss

File renamed without changes.

x-pack/plugins/maps/public/connected_components/toolbar_overlay/feature_edit_control/feature_edit_control.tsx renamed to x-pack/plugins/maps/public/connected_components/toolbar_overlay/feature_draw_controls/feature_draw_control/feature_draw_control.tsx

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,16 @@
88
import React from 'react';
99
import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiPanel } from '@elastic/eui';
1010
import { i18n } from '@kbn/i18n';
11-
import { DRAW_TYPE } from '../../../../common/constants';
11+
import { DRAW_TYPE } from '../../../../../common/constants';
1212
// @ts-expect-error
13-
import { GeometryFilterForm } from '../../../components/geometry_filter_form';
13+
import { GeometryFilterForm } from '../../../../components/geometry_filter_form';
1414

1515
export interface Props {
1616
cancelDraw: () => void;
1717
initiateDraw: (drawFeatureState: DRAW_TYPE) => void;
1818
}
1919

20-
export function FeatureEditControl(props: Props) {
20+
export function FeatureDrawControl(props: Props) {
2121
return (
2222
<EuiPanel paddingSize="none" style={{ display: 'inline-block' }}>
2323
<EuiFlexGroup responsive={false} gutterSize="none" direction="column">
@@ -26,10 +26,10 @@ export function FeatureEditControl(props: Props) {
2626
className="mapToolbarOverlay__button"
2727
onClick={() => props.initiateDraw(DRAW_TYPE.LINE)}
2828
iconType="minus"
29-
aria-label={i18n.translate('xpack.maps.toolbarOverlay.featureEdit.drawLineLabel', {
29+
aria-label={i18n.translate('xpack.maps.toolbarOverlay.featureDraw.drawLineLabel', {
3030
defaultMessage: 'Draw line',
3131
})}
32-
title={i18n.translate('xpack.maps.toolbarOverlay.featureEdit.drawLineTitle', {
32+
title={i18n.translate('xpack.maps.toolbarOverlay.featureDraw.drawLineTitle', {
3333
defaultMessage: 'Draw line',
3434
})}
3535
/>
@@ -39,10 +39,10 @@ export function FeatureEditControl(props: Props) {
3939
className="mapToolbarOverlay__button"
4040
onClick={() => props.initiateDraw(DRAW_TYPE.POLYGON)}
4141
iconType="home"
42-
aria-label={i18n.translate('xpack.maps.toolbarOverlay.featureEdit.drawPolygonLabel', {
42+
aria-label={i18n.translate('xpack.maps.toolbarOverlay.featureDraw.drawPolygonLabel', {
4343
defaultMessage: 'Draw polygon',
4444
})}
45-
title={i18n.translate('xpack.maps.toolbarOverlay.featureEdit.drawLineTitle', {
45+
title={i18n.translate('xpack.maps.toolbarOverlay.featureDraw.drawLineTitle', {
4646
defaultMessage: 'Draw polygon',
4747
})}
4848
/>
@@ -52,10 +52,10 @@ export function FeatureEditControl(props: Props) {
5252
className="mapToolbarOverlay__button"
5353
onClick={() => props.initiateDraw(DRAW_TYPE.BOUNDS)}
5454
iconType="stop"
55-
aria-label={i18n.translate('xpack.maps.toolbarOverlay.featureEdit.drawBBoxLabel', {
55+
aria-label={i18n.translate('xpack.maps.toolbarOverlay.featureDraw.drawBBoxLabel', {
5656
defaultMessage: 'Draw bounding box',
5757
})}
58-
title={i18n.translate('xpack.maps.toolbarOverlay.featureEdit.drawBBoxTitle', {
58+
title={i18n.translate('xpack.maps.toolbarOverlay.featureDraw.drawBBoxTitle', {
5959
defaultMessage: 'Draw bounding box',
6060
})}
6161
/>
@@ -65,10 +65,10 @@ export function FeatureEditControl(props: Props) {
6565
className="mapToolbarOverlay__button"
6666
onClick={() => props.initiateDraw(DRAW_TYPE.POINT)}
6767
iconType="dot"
68-
aria-label={i18n.translate('xpack.maps.toolbarOverlay.featureEdit.drawPointLabel', {
68+
aria-label={i18n.translate('xpack.maps.toolbarOverlay.featureDraw.drawPointLabel', {
6969
defaultMessage: 'Draw point',
7070
})}
71-
title={i18n.translate('xpack.maps.toolbarOverlay.featureEdit.drawPointTitle', {
71+
title={i18n.translate('xpack.maps.toolbarOverlay.featureDraw.drawPointTitle', {
7272
defaultMessage: 'Draw point',
7373
})}
7474
/>

‎x-pack/plugins/maps/public/connected_components/toolbar_overlay/feature_draw_controls/feature_draw_control/index.ts‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License
4+
* 2.0; you may not use this file except in compliance with the Elastic License
5+
* 2.0.
6+
*/
7+
8+
import { AnyAction } from 'redux';
9+
import { ThunkDispatch } from 'redux-thunk';
10+
import { connect } from 'react-redux';
11+
import { FeatureDrawControl } from './feature_draw_control';
12+
import { isDrawingFilter } from '../../../../selectors/map_selectors';
13+
import { updateDrawFeatureState } from '../../../../actions';
14+
import { MapStoreState } from '../../../../reducers/store';
15+
import { DRAW_TYPE } from '../../../../../common';
16+
17+
function mapStateToProps(state: MapStoreState) {
18+
return {
19+
isDrawingFilter: isDrawingFilter(state),
20+
};
21+
}
22+
23+
function mapDispatchToProps(dispatch: ThunkDispatch<MapStoreState, void, AnyAction>) {
24+
return {
25+
initiateDraw: (drawFeatureState: DRAW_TYPE) => {
26+
dispatch(updateDrawFeatureState(drawFeatureState));
27+
},
28+
cancelDraw: () => {
29+
dispatch(updateDrawFeatureState(null));
30+
},
31+
};
32+
}
33+
34+
const connectedFeatureEditControl = connect(
35+
mapStateToProps,
36+
mapDispatchToProps
37+
)(FeatureDrawControl);
38+
export { connectedFeatureEditControl as FeatureDrawControl };

‎x-pack/plugins/maps/public/connected_components/toolbar_overlay/feature_draw_controls/feature_edit_control/feature_edit_control.tsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License
4+
* 2.0; you may not use this file except in compliance with the Elastic License
5+
* 2.0.
6+
*/
7+
8+
import React from 'react';
9+
import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiPanel } from '@elastic/eui';
10+
import { i18n } from '@kbn/i18n';
11+
import { DRAW_TYPE } from '../../../../../common/constants';
12+
// @ts-expect-error
13+
import { GeometryFilterForm } from '../../../../components/geometry_filter_form';
14+
15+
export interface Props {
16+
isDrawingFilter: boolean;
17+
drawType: string;
18+
cancelDraw: () => void;
19+
initiateDraw: (drawFeatureState: DRAW_TYPE) => void;
20+
}
21+
22+
export function FeatureEditControl(props: Props) {
23+
return (
24+
<EuiPanel paddingSize="none" style={{ display: 'inline-block' }}>
25+
<EuiFlexGroup responsive={false} gutterSize="none" direction="column">
26+
<EuiFlexItem key={'line'} grow={false}>
27+
<EuiButtonIcon
28+
className="mapToolbarOverlay__button"
29+
onClick={() => props.initiateDraw(DRAW_TYPE.SIMPLE_SELECT)}
30+
iconType="documentEdit"
31+
aria-label={i18n.translate('xpack.maps.toolbarOverlay.featureEdit.editFeaturesLabel', {
32+
defaultMessage: 'Edit features',
33+
})}
34+
title={i18n.translate('xpack.maps.toolbarOverlay.featureEdit.editFeaturesTitle', {
35+
defaultMessage: 'Edit features',
36+
})}
37+
aria-pressed={props.drawType === DRAW_TYPE.SIMPLE_SELECT}
38+
isSelected={props.drawType === DRAW_TYPE.SIMPLE_SELECT}
39+
/>
40+
</EuiFlexItem>
41+
<EuiFlexItem key={'polygon'} grow={false}>
42+
<EuiButtonIcon
43+
className="mapToolbarOverlay__button"
44+
onClick={() => props.initiateDraw(DRAW_TYPE.TRASH)}
45+
iconType="trash"
46+
aria-label={i18n.translate('xpack.maps.toolbarOverlay.featureEdit.deleteLabel', {
47+
defaultMessage: 'Remove feature',
48+
})}
49+
title={i18n.translate('xpack.maps.toolbarOverlay.featureEdit.deleteTitle', {
50+
defaultMessage: 'Remove feature',
51+
})}
52+
aria-pressed={props.drawType === DRAW_TYPE.TRASH}
53+
isSelected={props.drawType === DRAW_TYPE.TRASH}
54+
/>
55+
</EuiFlexItem>
56+
</EuiFlexGroup>
57+
</EuiPanel>
58+
);
59+
}

x-pack/plugins/maps/public/connected_components/toolbar_overlay/feature_edit_control/index.ts renamed to x-pack/plugins/maps/public/connected_components/toolbar_overlay/feature_draw_controls/feature_edit_control/index.ts

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,15 @@ import { AnyAction } from 'redux';
99
import { ThunkDispatch } from 'redux-thunk';
1010
import { connect } from 'react-redux';
1111
import { FeatureEditControl } from './feature_edit_control';
12-
import { isDrawingFilter } from '../../../selectors/map_selectors';
13-
import { updateDrawFeatureState } from '../../../actions';
14-
import { MapStoreState } from '../../../reducers/store';
15-
import { DRAW_TYPE } from '../../../../common';
12+
import { isDrawingFilter } from '../../../../selectors/map_selectors';
13+
import { updateDrawFeatureState } from '../../../../actions';
14+
import { MapStoreState } from '../../../../reducers/store';
15+
import { DRAW_TYPE } from '../../../../../common';
1616

1717
function mapStateToProps(state: MapStoreState) {
1818
return {
1919
isDrawingFilter: isDrawingFilter(state),
20+
drawType: state.map.mapState.drawFeatureState,
2021
};
2122
}
2223

‎x-pack/plugins/maps/public/connected_components/toolbar_overlay/feature_edit_control/feature_edit_control.test.tsx‎

Lines changed: 0 additions & 36 deletions
This file was deleted.

‎x-pack/plugins/maps/public/connected_components/toolbar_overlay/toolbar_overlay.tsx‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ import { Filter } from 'src/plugins/data/public';
1111
import { ActionExecutionContext, Action } from 'src/plugins/ui_actions/public';
1212
import { SetViewControl } from './set_view_control';
1313
import { ToolsControl } from './tools_control';
14-
import { FeatureEditControl } from './feature_edit_control';
14+
import { FeatureDrawControl } from './feature_draw_controls/feature_draw_control';
15+
import { FeatureEditControl } from './feature_draw_controls/feature_edit_control';
1516
import { FitToData } from './fit_to_data';
1617
import { GeoFieldWithIndex } from '../../components/geo_field_with_index';
1718

@@ -41,11 +42,16 @@ export function ToolbarOverlay(props: Props) {
4142
);
4243
}
4344

44-
function renderFeatureEditControl() {
45+
function renderFeatureDrawAndEditControls() {
4546
return props.editModeActive ? (
46-
<EuiFlexItem>
47-
<FeatureEditControl />
48-
</EuiFlexItem>
47+
<>
48+
<EuiFlexItem>
49+
<FeatureDrawControl />
50+
</EuiFlexItem>
51+
<EuiFlexItem>
52+
<FeatureEditControl />
53+
</EuiFlexItem>
54+
</>
4955
) : null;
5056
}
5157

@@ -67,7 +73,7 @@ export function ToolbarOverlay(props: Props) {
6773

6874
{renderToolsControl()}
6975

70-
{renderFeatureEditControl()}
76+
{renderFeatureDrawAndEditControls()}
7177
</EuiFlexGroup>
7278
);
7379
}

0 commit comments

Comments
 (0)