Skip to content

Commit

Permalink
add multiple draw modes
Browse files Browse the repository at this point in the history
  • Loading branch information
thomasneirynck committed Mar 27, 2019
1 parent cfc16dc commit 7762c1d
Show file tree
Hide file tree
Showing 10 changed files with 168 additions and 141 deletions.
1 change: 1 addition & 0 deletions x-pack/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -220,6 +220,7 @@
"lodash.uniqby": "^4.7.0",
"lz-string": "^1.4.4",
"mapbox-gl": "0.52.0",
"mapbox-gl-draw-rectangle-mode": "^1.0.4",
"markdown-it": "^8.4.1",
"mime": "^2.2.2",
"mkdirp": "0.5.1",
Expand Down
22 changes: 5 additions & 17 deletions x-pack/plugins/maps/public/actions/store_actions.js
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,11 @@ export const DRAW_STATE_TYPE = {
ACTIVE: 'ACTIVE'
};

export const DRAW_STATE_DRAW_TYPE = {
BOUNDS: 'BOUNDS',
POLYGON: 'POLYGON'
};

function getLayerLoadingCallbacks(dispatch, layerId) {
return {
startLoading: (dataId, requestToken, meta) => dispatch(startDataLoad(layerId, dataId, requestToken, meta)),
Expand Down Expand Up @@ -623,20 +628,3 @@ export function updateDrawStateWithOptions(type, options) {
});
};
}


export function updateDrawState(type, layerId) {
return async (dispatch) => {
if (type === DRAW_STATE_TYPE.ACTIVE) {
await dispatch(setTooltipState(null));//tooltips just get in the way
}
dispatch({
type: UPDATE_DRAW_STATE,
drawState: {
type: type,
layerId: layerId
}
});
};
}

Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
.drawControl {
position: absolute;
top: 12px;
top: 10px;
width: 200px;
padding: 0;
margin: 0 auto;
left: 46px;
}
3 changes: 1 addition & 2 deletions x-pack/plugins/maps/public/components/draw_control/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,12 @@

import { connect } from 'react-redux';
import { DrawControl } from './view';
import { getDrawState, getLayerList, getUniqueIndexPatternIds } from '../../selectors/map_selectors';
import { getDrawState, getUniqueIndexPatternIds } from '../../selectors/map_selectors';
import { DRAW_STATE_TYPE, updateDrawStateWithOptions } from '../../actions/store_actions';
import { getIsReadOnly } from '../../store/ui';

function mapStateToProps(state = {}) {
return {
layerList: getLayerList(state),
isReadOnly: getIsReadOnly(state),
drawState: getDrawState(state),
uniqueIndexPatternIds: getUniqueIndexPatternIds(state)
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/


import React from 'react';
import {
EuiButton,
EuiPopover
} from '@elastic/eui';
import { IpSelectionList } from './ip_selection_list';
import { DRAW_STATE_TYPE } from '../../actions/store_actions';
import _ from 'lodash';
import { getIndexPatternsFromIds } from '../../index_pattern_util';

export class InitiateDrawButton extends React.Component {

state = {
openPopover: false,
uniqueIndexPatternsAndGeoFields: []
};

_openIndexPatternSelection = () => {
if (this._isMounted) {
this.setState({ openPopover: true });
}
};

_closePopover = () => {
if (this._isMounted) {
this.setState({ openPopover: false });
}
};

_onSelect = (e) => {
this._closePopover();
this.props.initiateDraw(e);
};

async _getuniqueIndexPatternAndFieldCombos() {

const indexPatterns = await getIndexPatternsFromIds(this.props.uniqueIndexPatternIds);
try {

const uniqueIndexPatternsAndGeofields = [];
indexPatterns.forEach((indexPattern) => {
indexPattern.fields.forEach(field => {
if (field.type === 'geo_point') {
uniqueIndexPatternsAndGeofields.push({
geoField: field.name,
indexPatternTitle: indexPattern.title,
indexPatternId: indexPattern.id
});
}
});
});


if (this._isMounted && !_.isEqual(this.state.uniqueIndexPatternsAndGeoFields, uniqueIndexPatternsAndGeofields)) {
this.setState({
uniqueIndexPatternsAndGeoFields: uniqueIndexPatternsAndGeofields,
openPopover: false
});
}
} catch(e) {
console.error(e);
throw e;
}
}

componentDidMount() {
this._isMounted = true;
}

componentWillUnmount() {
this._isMounted = false;
}

componentDidUpdate() {
this._getuniqueIndexPatternAndFieldCombos();
}

render() {
return (
<EuiPopover
button={
<EuiButton
disabled={this.props.drawState.type === DRAW_STATE_TYPE.ACTIVE && this.state.uniqueIndexPatternsAndGeoFields.length !== 0}
fill
size="s"
onClick={this._openIndexPatternSelection}
>
{this.props.buttonText}
</EuiButton>
}
isOpen={this.state.openPopover}
closePopover={this._closePopover}
anchorPosition="downLeft"
>
<IpSelectionList indexPatternsAndGeoFields={this.state.uniqueIndexPatternsAndGeoFields} onSelect={this._onSelect}/>
</EuiPopover>
);
}

}
114 changes: 25 additions & 89 deletions x-pack/plugins/maps/public/components/draw_control/view.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,86 +5,22 @@
*/

import React from 'react';
import _ from 'lodash';
import { InitiateDrawButton } from './initiate_draw_button';
import {
EuiButton,
EuiPopover
EuiFlexGroup,
EuiFlexItem
} from '@elastic/eui';
import { IpSelectionList } from './ip_selection_list';
import { DRAW_STATE_TYPE } from '../../actions/store_actions';
import { getIndexPatternsFromIds } from '../../index_pattern_util';


export class DrawControl extends React.Component {

state = {
openPopover: false,
uniqueIndexPatternsAndGeoFields: []
};

_openIndexPatternSelection = () => {
if (this._isMounted) {
this.setState({ openPopover: true });
}
};
import { DRAW_STATE_DRAW_TYPE } from '../../actions/store_actions';

_closePopover = () => {
if (this._isMounted) {
this.setState({ openPopover: false });
}
};
export class DrawControl extends React.Component {

_onSelect = (e) => {
this._closePopover();
// this.props.initiateDraw(e.layerId);
this.props.initiateDraw(e);
_initiateDraw = (drawType, e) => {
this.props.initiateDraw({ drawType, ...e });
};

async _getuniqueIndexPatternAndFieldCombos() {

const indexPatterns = await getIndexPatternsFromIds(this.props.uniqueIndexPatternIds);
try {

const uniqueIndexPatternsAndGeofields = [];
indexPatterns.forEach((indexPattern) => {

indexPattern.fields.forEach(field => {
if (field.type === 'geo_point') {
uniqueIndexPatternsAndGeofields.push({
geoField: field.name,
indexPatternTitle: indexPattern.title,
indexPatternId: indexPattern.id
});
}
});

});


if (this._isMounted && !_.isEqual(this.state.uniqueIndexPatternsAndGeoFields, uniqueIndexPatternsAndGeofields)) {
this.setState({
uniqueIndexPatternsAndGeoFields: uniqueIndexPatternsAndGeofields,
openPopover: false
});
}
} catch(e) {
console.error(e);
throw e;
}
}

componentDidMount() {
this._isMounted = true;
}

componentWillUnmount() {
this._isMounted = false;
}

componentDidUpdate() {
this._getuniqueIndexPatternAndFieldCombos();
}

render() {

if (!this.props.isReadOnly) {
Expand All @@ -93,24 +29,24 @@ export class DrawControl extends React.Component {

return (
<div className="drawControl">
<EuiPopover
id=""
button={
<EuiButton
disabled={this.props.drawState.type === DRAW_STATE_TYPE.ACTIVE && this.state.uniqueIndexPatternsAndGeoFields.length !== 0}
fill
size="s"
onClick={this._openIndexPatternSelection}
>
Draw
</EuiButton>
}
isOpen={this.state.openPopover}
closePopover={this._closePopover}
anchorPosition="downLeft"
>
<IpSelectionList indexPatternsAndGeoFields={this.state.uniqueIndexPatternsAndGeoFields} onSelect={this._onSelect}/>
</EuiPopover>
<EuiFlexGroup direction="row">
<EuiFlexItem>
<InitiateDrawButton
initiateDraw={(e) => this._initiateDraw(DRAW_STATE_DRAW_TYPE.POLYGON, e)}
uniqueIndexPatternIds={this.props.uniqueIndexPatternIds}
drawState={this.props.drawState}
buttonText="Draw polygon"
/>
</EuiFlexItem>
<EuiFlexItem>
<InitiateDrawButton
initiateDraw={(e) => this._initiateDraw(DRAW_STATE_DRAW_TYPE.BOUNDS, e)}
uniqueIndexPatternIds={this.props.uniqueIndexPatternIds}
drawState={this.props.drawState}
buttonText="Draw bounds"
/>
</EuiFlexItem>
</EuiFlexGroup>
</div>
);
}
Expand Down
6 changes: 3 additions & 3 deletions x-pack/plugins/maps/public/components/map/mb/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ import {
setMouseCoordinates,
clearMouseCoordinates,
clearGoto,
setTooltipState, updateDrawState,
DRAW_STATE_TYPE
setTooltipState,
DRAW_STATE_TYPE, updateDrawStateWithOptions
} from '../../../actions/store_actions';
import {
getTooltipState,
Expand Down Expand Up @@ -62,7 +62,7 @@ function mapDispatchToProps(dispatch) {
dispatch(setTooltipState(tooltipState));
},
disableDrawState() {
dispatch(updateDrawState(DRAW_STATE_TYPE.NONE, null));
dispatch(updateDrawStateWithOptions(DRAW_STATE_TYPE.NONE, null));
}
};
}
Expand Down
Loading

0 comments on commit 7762c1d

Please sign in to comment.