Skip to content

Commit

Permalink
Fixes #2748: leaflet draw issues (#2752)
Browse files Browse the repository at this point in the history 
* Fixes #2748: leaflet draw issues

* Additional fix for measures
  • Loading branch information
@mbarto
mbarto authored Mar 19, 2018
1 parent 6dfd2e6 commit 14b295a
Show file tree
Hide file tree
Showing 3 changed files with 84 additions and 32 deletions.
46 changes: 39 additions & 7 deletions web/client/components/map/leaflet/DrawSupport.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,24 @@ const PropTypes = require('prop-types');
const React = require('react');
const {head} = require('lodash');
const L = require('leaflet');

require('leaflet-draw');

L.Draw.Polygon.prototype._calculateFinishDistance = function(t) {
if (this._markers.length > 0) {
const first = this._map.latLngToContainerPoint(this._markers[0].getLatLng());
const last = this._map.latLngToContainerPoint(this._markers[this._markers.length - 1].getLatLng());

const clickedMarker = new L.Marker(t, {
icon: this.options.icon,
zIndexOffset: 2 * this.options.zIndexOffset
});
const clicked = this._map.latLngToContainerPoint(clickedMarker.getLatLng());
return Math.min(first.distanceTo(clicked), last.distanceTo(clicked));
}
return 1 / 0;
};

const {isSimpleGeomType, getSimpleGeomType} = require('../../../utils/MapUtils');
const {boundsToOLExtent} = require('../../../utils/DrawSupportUtils');
const assign = require('object-assign');
Expand Down Expand Up @@ -352,6 +369,7 @@ class DrawSupport extends React.Component {
dashArray: [5, 5],
guidelineDistance: 5
},
allowIntersection: false,
showLength: false,
showArea: false,
repeatMode: true,
Expand Down Expand Up @@ -408,6 +426,9 @@ class DrawSupport extends React.Component {
}

// start the draw control
if (this.props.map.doubleClickZoom) {
this.props.map.doubleClickZoom.disable();
}
this.drawControl.enable();
};

Expand Down Expand Up @@ -474,13 +495,15 @@ class DrawSupport extends React.Component {
});

let allLayers = this.drawLayer.getLayers();
allLayers.forEach(l => {
l.on('edit', (e) => this.onUpdateGeom(e.target, newProps));
l.on('moveend', (e) => this.onUpdateGeom(e.target, newProps));
if (l.editing) {
l.editing.enable();
}
});
setTimeout(() => {
allLayers.forEach(l => {
l.on('edit', (e) => this.onUpdateGeom(e.target, newProps));
l.on('moveend', (e) => this.onUpdateGeom(e.target, newProps));
if (l.editing) {
l.editing.enable();
}
});
}, 0);

this.editControl = new L.Control.Draw({
edit: {
Expand All @@ -497,6 +520,9 @@ class DrawSupport extends React.Component {
}
}
});
if (this.props.map.doubleClickZoom) {
this.props.map.doubleClickZoom.disable();
}
}

removeAllInteractions = () => {
Expand All @@ -516,6 +542,9 @@ class DrawSupport extends React.Component {
this.drawControl = null;
this.props.map.off('draw:created', this.onDrawCreated, this);
this.props.map.off('draw:drawstart', this.onDrawStart, this);
if (this.props.map.doubleClickZoom) {
this.props.map.doubleClickZoom.enable();
}
}
};

Expand All @@ -531,6 +560,9 @@ class DrawSupport extends React.Component {
});
this.editControl = null;
}
if (this.props.map.doubleClickZoom) {
this.props.map.doubleClickZoom.enable();
}
};

cleanAndStop = () => {
Expand Down
64 changes: 42 additions & 22 deletions web/client/components/map/leaflet/MeasurementSupport.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -212,7 +212,11 @@ class MeasurementSupport extends React.Component {
}
}
onDrawStart = () => {
this.props.map.off('click', this.restartDrawing, this);
this.removeArcLayer();
if (this.props.map.doubleClickZoom) {
this.props.map.doubleClickZoom.disable();
}
this.drawing = true;
};

Expand Down Expand Up @@ -245,6 +249,27 @@ class MeasurementSupport extends React.Component {
if (this.props.measurement.lineMeasureEnabled && this.lastLayer) {
this.addArcsToMap([feature]);
}
setTimeout(() => {
this.props.map.off('click', this.restartDrawing, this);
this.props.map.on('click', this.restartDrawing, this);
}, 100);
};

onDrawVertex = () => {
let bearingMarkers = this.drawControl._markers || [];

if (this.props.measurement.geomType === 'Bearing' && bearingMarkers.length >= 2) {
setTimeout(() => {
this.drawControl._markers = slice(this.drawControl._markers, 0, 2);
this.drawControl._poly._latlngs = slice(this.drawControl._poly._latlngs, 0, 2);
this.drawControl._poly._originalPoints = slice(this.drawControl._poly._originalPoints, 0, 2);
this.updateMeasurementResults();
this.drawControl._finishShape();
this.drawControl.disable();
}, 100);
} else {
this.updateMeasurementResults();
}
};

render() {
Expand Down Expand Up @@ -319,27 +344,16 @@ class MeasurementSupport extends React.Component {
this.props.changeMeasurementState(newMeasureState);
};

mapClickHandler = () => {
if (!this.drawing && this.drawControl !== null) {
// re-enable draw control, since it is stopped after
// every finished sketch
this.props.map.removeLayer(this.lastLayer);
this.drawControl.enable();
this.drawing = true;
} else {
let bearingMarkers = this.drawControl._markers || [];

if (this.props.measurement.geomType === 'Bearing' && bearingMarkers.length >= 2) {
this.drawControl._markers = slice(this.drawControl._markers, 0, 2);
this.drawControl._poly._latlngs = slice(this.drawControl._poly._latlngs, 0, 2);
this.drawControl._poly._originalPoints = slice(this.drawControl._poly._originalPoints, 0, 2);
this.updateMeasurementResults();
this.drawControl._finishShape();
this.drawControl.disable();
} else {
this.updateMeasurementResults();
}
restartDrawing = () => {
this.props.map.off('click', this.restartDrawing, this);
if (this.props.map.doubleClickZoom) {
this.props.map.doubleClickZoom.enable();
}
// re-enable draw control, since it is stopped after
// every finished sketch
this.props.map.removeLayer(this.lastLayer);
this.drawControl.enable();
this.drawing = true;
};

addDrawInteraction = (newProps) => {
Expand All @@ -348,7 +362,8 @@ class MeasurementSupport extends React.Component {

this.props.map.on('draw:created', this.onDrawCreated, this);
this.props.map.on('draw:drawstart', this.onDrawStart, this);
this.props.map.on('click', this.mapClickHandler, this);
this.props.map.on('draw:drawvertex', this.onDrawVertex, this);
// this.props.map.on('click', this.mapClickHandler, this);
this.props.map.on('mousemove', this.updateBearing, this);

if (this.props.updateOnMouseMove) {
Expand Down Expand Up @@ -419,11 +434,16 @@ class MeasurementSupport extends React.Component {
this.removeLastLayer();
this.props.map.off('draw:created', this.onDrawCreated, this);
this.props.map.off('draw:drawstart', this.onDrawStart, this);
this.props.map.off('draw:drawvertex', this.onDrawVertex, this);
this.props.map.off('mousemove', this.updateBearing, this);
this.props.map.off('click', this.mapClickHandler, this);
this.props.map.off('click', this.restartDrawing, this);
// this.props.map.off('click', this.mapClickHandler, this);
if (this.props.updateOnMouseMove) {
this.props.map.off('mousemove', this.updateMeasurementResults, this);
}
if (this.props.map.doubleClickZoom) {
this.props.map.doubleClickZoom.enable();
}
}
};
removeLastLayer = () => {
Expand Down
6 changes: 3 additions & 3 deletions web/client/components/map/leaflet/__tests__/MeasurementSupport-test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -225,7 +225,7 @@ describe('Leaflet MeasurementSupport', () => {
/>
, msNode);

document.getElementById('map').addEventListener('click', () => {
document.getElementById('map').addEventListener('draw:addvertex', () => {
expect(newMeasureState).toExist();
});
document.getElementById('map').click();
Expand Down Expand Up @@ -261,7 +261,7 @@ describe('Leaflet MeasurementSupport', () => {
changeMeasurementState={(data) => {newMeasureState = data; }}
/>
, msNode);
document.getElementById('map').addEventListener('click', () => {
document.getElementById('map').addEventListener('draw:addvertex', () => {
expect(newMeasureState).toExist();
});
document.getElementById('map').click();
Expand Down Expand Up @@ -297,7 +297,7 @@ describe('Leaflet MeasurementSupport', () => {
changeMeasurementState={(data) => {newMeasureState = data; }}
/>
, msNode);
document.getElementById('map').addEventListener('click', () => {
document.getElementById('map').addEventListener('draw:addvertex', () => {
expect(newMeasureState).toExist();
});
document.getElementById('map').click();
Expand Down

0 comments on commit 14b295a

Please sign in to comment.