Skip to content

Commit

Permalink
Update GlobalModes for Removal and Rotate + some little fixes (#1418)…
Browse files Browse the repository at this point in the history 
… (patch)
  • Loading branch information
@Falke-Design
Falke-Design authored Nov 22, 2023
1 parent b74fbfc commit 939893e
Show file tree
Hide file tree
Showing 5 changed files with 149 additions and 48 deletions.
79 changes: 78 additions & 1 deletion cypress/integration/globalmodes.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -255,7 +255,7 @@ describe('Modes', () => {
cy.testLayerAdditionPerformance();
});

it('Test removal when preventMarkerRremoval is passed to global options', () => {
it('Test removal when preventMarkerRemoval is passed to global options', () => {
cy.toolbarButton('rectangle')
.click()
.closest('.button-container')
Expand Down Expand Up @@ -348,4 +348,81 @@ describe('Modes', () => {
expect(map.pm.getGeomanLayers()[1].pm.layerDragEnabled()).to.equal(true);
});
});

it('re-applies rotate mode onAdd for first layer', (done) => {
cy.toolbarButton('rotate').click();

cy.window().then(({ map, L }) => {
const jsonString =
'{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[-0.155182,51.515687],[-0.155182,51.521028],[-0.124283,51.521028],[-0.124283,51.510345],[-0.155182,51.515687]]]}}';
const poly = JSON.parse(jsonString);
L.geoJSON(poly).addTo(map);
});

cy.window().then(({ map }) => {
setTimeout(() => {
expect(map.pm.getGeomanLayers()[0].pm.rotateEnabled()).to.equal(true);
done();
}, 100);
});
});

it('re-applies edit mode onAdd for first layer', (done) => {
cy.toolbarButton('edit').click();

cy.window().then(({ map, L }) => {
const jsonString =
'{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[-0.155182,51.515687],[-0.155182,51.521028],[-0.124283,51.521028],[-0.124283,51.510345],[-0.155182,51.515687]]]}}';
const poly = JSON.parse(jsonString);
L.geoJSON(poly).addTo(map);
});

cy.window().then(({ map }) => {
setTimeout(() => {
expect(map.pm.getGeomanLayers()[0].pm.enabled()).to.equal(true);
done();
}, 100);
});
});

it('re-applies move mode onAdd for first layer', (done) => {
cy.toolbarButton('drag').click();

cy.window().then(({ map, L }) => {
const jsonString =
'{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[-0.155182,51.515687],[-0.155182,51.521028],[-0.124283,51.521028],[-0.124283,51.510345],[-0.155182,51.515687]]]}}';
const poly = JSON.parse(jsonString);
L.geoJSON(poly).addTo(map);
});

cy.window().then(({ map }) => {
setTimeout(() => {
expect(map.pm.getGeomanLayers()[0].pm.layerDragEnabled()).to.equal(
true
);
done();
}, 100);
});
});

it('re-applies removal mode onAdd for first layer', (done) => {
cy.toolbarButton('delete').click();

cy.window().then(({ map, L }) => {
const jsonString =
'{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[-0.155182,51.515687],[-0.155182,51.521028],[-0.124283,51.521028],[-0.124283,51.510345],[-0.155182,51.515687]]]}}';
const poly = JSON.parse(jsonString);
L.geoJSON(poly).addTo(map);
});

cy.window().then(({ map }) => {
setTimeout(() => {
const layer = map.pm.getGeomanLayers()[0];
expect(layer.listens('click', map.pm.removeLayer, map.pm)).to.equal(
true
);
done();
}, 100);
});
});
});
12 changes: 7 additions & 5 deletions src/js/Mixins/Modes/Mode.Drag.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@ const GlobalDragMode = {
this._addedLayersDrag = {};

layers.forEach((layer) => {
layer.pm.enableLayerDrag();
if (this._isRelevantForDrag(layer)) {
layer.pm.enableLayerDrag();
}
});

if (!this.throttledReInitDrag) {
Expand Down Expand Up @@ -58,11 +60,11 @@ const GlobalDragMode = {
reinitGlobalDragMode() {
const layers = this._addedLayersDrag;
this._addedLayersDrag = {};
for (const id in layers) {
const layer = layers[id];
if (this.globalDragModeEnabled()) {
for (const id in layers) {
const layer = layers[id];

if (this._isRelevantForDrag(layer)) {
if (this.globalDragModeEnabled()) {
if (this._isRelevantForDrag(layer)) {
layer.pm.enableLayerDrag();
}
}
Expand Down
31 changes: 17 additions & 14 deletions src/js/Mixins/Modes/Mode.Edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,9 @@ const GlobalEditMode = {

// enable all layers
layers.forEach((layer) => {
layer.pm.enable(options);
if (this._isRelevantForEdit(layer)) {
layer.pm.enable(options);
}
});

if (!this.throttledReInitEdit) {
Expand All @@ -27,9 +29,9 @@ const GlobalEditMode = {
);
}

// save the added layers into the _addedLayers array, to read it later out
this._addedLayers = {};
this.map.on('layeradd', this._layerAdded, this);
// save the added layers into the _addedLayersEdit array, to read it later out
this._addedLayersEdit = {};
this.map.on('layeradd', this._layerAddedEdit, this);
// handle layers that are added while in edit mode
this.map.on('layeradd', this.throttledReInitEdit, this);

Expand All @@ -49,6 +51,7 @@ const GlobalEditMode = {
});

// cleanup layer off event
this.map.off('layeradd', this._layerAddedEdit, this);
this.map.off('layeradd', this.throttledReInitEdit, this);

// Set toolbar button to currect status
Expand All @@ -75,22 +78,22 @@ const GlobalEditMode = {
}
},
handleLayerAdditionInGlobalEditMode() {
const layers = this._addedLayers;
this._addedLayers = {};
for (const id in layers) {
const layer = layers[id];
// when global edit mode is enabled and a layer is added to the map,
// enable edit for that layer if it's relevant
const layers = this._addedLayersEdit;
this._addedLayersEdit = {};
if (this.globalEditModeEnabled()) {
for (const id in layers) {
const layer = layers[id];
// when global edit mode is enabled and a layer is added to the map,
// enable edit for that layer if it's relevant

if (this._isRelevantForEdit(layer)) {
if (this.globalEditModeEnabled()) {
if (this._isRelevantForEdit(layer)) {
layer.pm.enable({ ...this.globalOptions });
}
}
}
},
_layerAdded({ layer }) {
this._addedLayers[L.stamp(layer)] = layer;
_layerAddedEdit({ layer }) {
this._addedLayersEdit[L.stamp(layer)] = layer;
},
_isRelevantForEdit(layer) {
return (
Expand Down
41 changes: 26 additions & 15 deletions src/js/Mixins/Modes/Mode.Removal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,24 @@ const GlobalRemovalMode = {
// handle existing layers
this.map.eachLayer((layer) => {
if (this._isRelevantForRemoval(layer)) {
layer.pm.disable();
if (layer.pm.enabled()) {
layer.pm.disable();
}
layer.on('click', this.removeLayer, this);
}
});

if (!this.throttledReInitRemoval) {
this.throttledReInitRemoval = L.Util.throttle(
this.reinitGlobalRemovalMode,
this.handleLayerAdditionInGlobalRemovalMode,
100,
this
);
}

// save the added layers into the _addedLayersRemoval array, to read it later out
this._addedLayersRemoval = {};
// handle layers that are added while in removal mode
this.map.on('layeradd', this._layerAddedRemoval, this);
this.map.on('layeradd', this.throttledReInitRemoval, this);

// toogle the button in the toolbar if this is called programatically
Expand All @@ -33,6 +37,7 @@ const GlobalRemovalMode = {
});

// remove map handler
this.map.off('layeradd', this._layerAddedRemoval, this);
this.map.off('layeradd', this.throttledReInitRemoval, this);

// toogle the button in the toolbar if this is called programatically
Expand All @@ -55,18 +60,6 @@ const GlobalRemovalMode = {
this.enableGlobalRemovalMode();
}
},
reinitGlobalRemovalMode({ layer }) {
// do nothing if layer is not handled by leaflet so it doesn't fire unnecessarily
if (!this._isRelevantForRemoval(layer)) {
return;
}

// re-enable global removal mode if it's enabled already
if (this.globalRemovalModeEnabled()) {
this.disableGlobalRemovalMode();
this.enableGlobalRemovalMode();
}
},
removeLayer(e) {
const layer = e.target;
// only remove layer, if it's handled by leaflet-geoman,
Expand Down Expand Up @@ -96,6 +89,24 @@ const GlobalRemovalMode = {
layer.pm.options.allowRemoval
);
},
handleLayerAdditionInGlobalRemovalMode() {
const layers = this._addedLayersRemoval;
this._addedLayersRemoval = {};
if (this.globalRemovalModeEnabled()) {
for (const id in layers) {
const layer = layers[id];
if (this._isRelevantForRemoval(layer)) {
if (layer.pm.enabled()) {
layer.pm.disable();
}
layer.on('click', this.removeLayer, this);
}
}
}
},
_layerAddedRemoval({ layer }) {
this._addedLayersRemoval[L.stamp(layer)] = layer;
},
};

export default GlobalRemovalMode;
34 changes: 21 additions & 13 deletions src/js/Mixins/Modes/Mode.Rotate.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,15 @@ const GlobalRotateMode = {

if (!this.throttledReInitRotate) {
this.throttledReInitRotate = L.Util.throttle(
this._reinitGlobalRotateMode,
this.handleLayerAdditionInGlobalRotateMode,
100,
this
);
}

this._addedLayersRotate = {};
// handle layers that are added while in rotate mode
this.map.on('layeradd', this._layerAddedRotate, this);
this.map.on('layeradd', this.throttledReInitRotate, this);

// toogle the button in the toolbar if this is called programatically
Expand All @@ -35,6 +38,7 @@ const GlobalRotateMode = {
});

// remove map handler
this.map.off('layeradd', this._layerAddedRotate, this);
this.map.off('layeradd', this.throttledReInitRotate, this);

// toogle the button in the toolbar if this is called programatically
Expand All @@ -51,27 +55,31 @@ const GlobalRotateMode = {
this.enableGlobalRotateMode();
}
},
_reinitGlobalRotateMode({ layer }) {
// do nothing if layer is not handled by leaflet so it doesn't fire unnecessarily
if (!this._isRelevantForRotate(layer)) {
return;
}

// re-enable global rotation mode if it's enabled already
if (this.globalRotateModeEnabled()) {
this.disableGlobalRotateMode();
this.enableGlobalRotateMode();
}
},
_isRelevantForRotate(layer) {
return (
layer.pm &&
layer instanceof L.Polyline &&
!(layer instanceof L.LayerGroup) &&
((!L.PM.optIn && !layer.options.pmIgnore) || // if optIn is not set / true and pmIgnore is not set / true (default)
(L.PM.optIn && layer.options.pmIgnore === false)) && // if optIn is true and pmIgnore is false
!layer._pmTempLayer &&
layer.pm.options.allowRotation
);
},
handleLayerAdditionInGlobalRotateMode() {
const layers = this._addedLayersRotate;
this._addedLayersRotate = {};
if (this.globalRotateModeEnabled()) {
for (const id in layers) {
const layer = layers[id];
if (this._isRelevantForRemoval(layer)) {
layer.pm.enableRotate();
}
}
}
},
_layerAddedRotate({ layer }) {
this._addedLayersRotate[L.stamp(layer)] = layer;
},
};
export default GlobalRotateMode;

0 comments on commit 939893e

Please sign in to comment.