Skip to content

Instantly share code, notes, and snippets.

@qrobin qrobin/drawing.js forked from david-mart/drawing.js
Created Apr 28, 2018

Embed
What would you like to do?
import React, { Component } from 'react';
import { DrawingManager } from 'react-google-maps/lib/components/drawing/DrawingManager';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { mapConfig } from '../../../../constants/component-configs';
import {
setShapeEventListener,
getShapeArea,
getFiltersFromGoogleMapsShape,
convertFromGoogleMapsShape
} from '../../../../utilities/map-tools-utilities';
const { drawingManager } = mapConfig;
import { setMapFilters, setDrawingMode } from '../../../../actions/map-actions';
import debounce from 'lodash.debounce';
import ShapeTool from './shape-tool';
class MapDrawingTools extends Component {
constructor() {
super();
this.state = { mapsShape: null, active: false };
this.calculateShape = this.calculateShape.bind(this);
this.debounceCalculateInside = debounce(this.calculateInside.bind(this), 500);
this.resetShape = this.resetShape.bind(this);
}
componentWillReceiveProps(nextProps) {
if (this.props.mode !== nextProps.mode) {
this.setState({ active: true });
}
}
/* eslint-disable camelcase */
calculateInside() {
const { mapsShape } = this.state;
const geom_in = getFiltersFromGoogleMapsShape(mapsShape);
this.props.setMapFilters({ geom_in });
this.setState({ active: false });
}
resetShape() {
this.state.mapsShape.setMap(null);
this.setState({ mapsShape: null });
this.props.setDrawingMode('');
this.props.setMapFilters({ geom_in: null });
}
/* eslint-enable */
calculateShape(mapsShape) {
if (this.state.mapsShape) {
this.state.mapsShape.setMap(null);
}
this.setState({ mapsShape: setShapeEventListener(mapsShape, this.debounceCalculateInside) });
this.calculateInside();
}
render() {
const { mode, projectCount, eventCount } = this.props;
const { mapsShape, active } = this.state;
return (
<div>
{Boolean(mode.length) && active &&
<DrawingManager
drawingMode={mode}
options={drawingManager}
onPolygonComplete={this.calculateShape}
onCircleComplete={this.calculateShape}
/>
}
{mapsShape &&
<ShapeTool
projectCount={projectCount}
eventCount={eventCount}
area={getShapeArea(mapsShape)}
closeWindow={this.resetShape}
shape={convertFromGoogleMapsShape(mapsShape)}
/>
}
</div>
);
}
}
MapDrawingTools.propTypes = {
eventCount: PropTypes.number,
loader: PropTypes.bool,
mode: PropTypes.string,
projectCount: PropTypes.number,
setDrawingMode: PropTypes.func,
setMapFilters: PropTypes.func
};
const mapStateToProps = state => {
const { drawing, loader } = state.map;
const projectCount = state.projects.list.length;
const eventCount = state.events.list.length;
return { ...drawing, projectCount, eventCount, loader };
};
export default connect(mapStateToProps, { setMapFilters, setDrawingMode })(MapDrawingTools);
export { MapDrawingTools as PureMapDrawingTools };
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.