Skip to content

Commit

Permalink
Merge pull request #43 from aarranz/feature/popover-improvements
Browse files Browse the repository at this point in the history 
Popover improvements
  • Loading branch information
@aarranz
aarranz committed Jul 6, 2021
2 parents 81ad05e + 39eaf4d commit 655b328
Show file tree
Hide file tree
Showing 6 changed files with 144 additions and 49 deletions.
9 changes: 6 additions & 3 deletions Gruntfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,6 @@ module.exports = function (grunt) {
'tests/js/*Spec.js'
],
frameworks: ['jasmine'],
reporters: ['progress'],
browsers: ['ChromeHeadless', 'FirefoxHeadless'],
singleRun: true
},
Expand All @@ -139,15 +138,18 @@ module.exports = function (grunt) {
type: 'html',
dir: 'build/coverage'
},
reporters: ['progress', 'coverage'],
preprocessors: {
"src/js/*.js": ['coverage'],
},
reporters: ["progress", "coverage"]
}
},
widgetci: {
options: {
junitReporter: {
"outputDir": 'build/test-reports'
},
reporters: ['junit', 'coverage'],
reporters: ["junit", "coverage", "progress"],
coverageReporter: {
reporters: [
{type: 'cobertura', dir: 'build/coverage', subdir: 'xml'},
Expand All @@ -162,6 +164,7 @@ module.exports = function (grunt) {
widgetdebug: {
options: {
browsers: ['Chrome', 'Firefox'],
reporters: ["progress"],
singleRun: false
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/config.xml
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<?xml version='1.0' encoding='UTF-8'?>
<widget xmlns="http://wirecloud.conwet.fi.upm.es/ns/macdescription/1" vendor="CoNWeT" name="ol3-map" version="1.2.4b1">
<widget xmlns="http://wirecloud.conwet.fi.upm.es/ns/macdescription/1" vendor="CoNWeT" name="ol3-map" version="1.2.4b2">
<details>
<title>OpenLayers Map</title>
<email>wirecloud@conwet.com</email>
Expand Down
6 changes: 6 additions & 0 deletions src/doc/changelog.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
## v1.2.x (2021-xx-xx)

- Add a feature for building a marker with Font Awesome icon
- Use sticky popovers on WireCloud 1.4
- Popover events are disabled while moving/zooming the map (when using sticky
events).
- Repaint popovers when moving/zooming the map (when using sticky events).
- Fix placement of popovers when icon anchor is different to `[0.5, 1]`


## v1.2.3 (2021-03-25)

Expand Down
80 changes: 44 additions & 36 deletions src/js/ol3-map-widget.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -560,18 +560,17 @@
}.bind(this));

// change mouse cursor when over marker
this.map.on('pointermove', function (event) {
this.map.on('pointermove', (event) => {
if (event.dragging) {
if (this.popover != null) {
this.popover.hide();
update_selected_feature.call(this, null);
this.popover.repaint();
}
return;
}
var pixel = this.map.getEventPixel(event.originalEvent);
var hit = this.map.hasFeatureAtPixel(pixel);
this.map.getTarget().style.cursor = hit ? 'pointer' : '';
}.bind(this));
});

// send poi updates on changes
this.send_visible_pois_bound = send_visible_pois.bind(this);
Expand All @@ -581,7 +580,22 @@
}
this.visiblePoisTimeout = setTimeout(this.send_visible_pois_bound, 50);
});
this.map.on('moveend', this.send_visible_pois_bound);
this.map.on("movestart", () => {
if (this.popover != null && !("disablePointerEvents" in this.popover)) {
this.popover.hide();
} else if (this.popover != null) {
this.popover.disablePointerEvents();
}
});
this.map.on("moveend", () => {
if (this.popover != null) {
if ("enablePointerEvents" in this.popover) {
this.popover.enablePointerEvents();
}
this.popover.repaint();
}
send_visible_pois.call(this);
});

this.geojsonparser = new ol.format.GeoJSON();

Expand Down Expand Up @@ -1189,7 +1203,8 @@
let popover = this.popover = new StyledElements.Popover({
placement: ['top', 'bottom', 'right', 'left'],
title: feature.get('title'),
content: new StyledElements.Fragment(feature.get('content'))
content: new StyledElements.Fragment(feature.get('content')),
sticky: true
});
popover.on('show', () => {
update_selected_feature.call(this, feature);
Expand All @@ -1204,43 +1219,36 @@
});

// Delay popover show action
setTimeout(function () {
var marker_coordinates, marker_position, marker_image, marker_size, marker_style, refpos;

setTimeout(() => {
if (this.popover !== popover) {
// Selection has changed in the middle
return;
}

marker_coordinates = ol.extent.getCenter(feature.getGeometry().getExtent());
marker_position = this.map.getPixelFromCoordinate(marker_coordinates);
var view = this.map.getView(); // See https://github.com/openlayers/openlayers/issues/4713
var width = ol.extent.getWidth(view.getProjection().getExtent()) / view.getResolution();
marker_position[0] = ((marker_position[0] % width) + width) % width;
marker_style = feature.getStyle()(feature);
marker_image = marker_style.getImage();
if (marker_image != null && (marker_size = marker_image.getSize()) != null) {
var marker_scale = marker_image.getScale();
marker_size = marker_size.map(function (value) {
return value * marker_scale;
});
refpos = {
top: marker_position[1] - marker_size[1],
left: marker_position[0] - (marker_size[0] / 2),
width: marker_size[0],
height: marker_size[1]
};
} else {
refpos = {
top: marker_position[1],
left: marker_position[0],
width: 0,
height: 0
};
}
const refpos = {
getBoundingClientRect: () => {
const marker_coordinates = ol.extent.getCenter(feature.getGeometry().getExtent());
const marker_position = this.map.getPixelFromCoordinate(marker_coordinates);
const marker_style = feature.getStyle()(feature);
const marker_image = marker_style.getImage();
let marker_size;
if (marker_image != null && (marker_size = marker_image.getSize()) != null) {
const marker_scale = marker_image.getScale();
let marker_anchor = marker_image.getAnchor();
marker_size = marker_size.map((value) => value * marker_scale);
marker_anchor = marker_anchor.map((value) => value * marker_scale);
const top = marker_position[1] - marker_anchor[1];
const left = marker_position[0] - marker_anchor[0];
return new DOMRect(left, top, marker_size[0], marker_size[1]);
} else {
return new DOMRect(marker_position[0], marker_position[1], 0, 0);
}
}
};

update_selected_feature.call(this, feature);
this.popover.show(refpos);
}.bind(this), 100);
}, 100);
}
};

Expand Down
2 changes: 1 addition & 1 deletion tests/helpers/StyledElements.min.js
View file

Large diffs are not rendered by default.

94 changes: 86 additions & 8 deletions tests/js/OpenlayersWidgetSpec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -436,6 +436,7 @@
spyOn(feature_mock, "getStyle").and.callFake(() => {return () => {return style_mock};});
spyOn(style_mock, 'getImage').and.returnValue({
getScale: () => {return 0.5;},
getAnchor: jasmine.createSpy().and.callFake(() => {return [0.5, 2];}),
getSize: jasmine.createSpy().and.callFake(() => {return [1, 2];})
});
widget.init();
Expand Down Expand Up @@ -564,12 +565,12 @@
widget.init();
spyOn(widget.map, 'getPixelFromCoordinate').and.returnValue([0, 0]);
widget.select_feature(feature_mock);
widget.popover.on('show', () => {
widget.popover.addEventListener('show', () => {
MashupPlatform.widget.outputs.poiOutput.reset();
let popover = widget.popover;
const popover = widget.popover;
// TODO, the following line is required as the CSS
// animation is not processed
popover.element.classList.remove('in');
document.body.querySelector('.popover').classList.remove('in');
spyOn(popover, "on");
spyOn(popover, "hide").and.callThrough();
spyOn(widget, "select_feature");
Expand Down Expand Up @@ -618,6 +619,76 @@
});
});

describe("moveend", () => {

it("wirecloud 1.3 and below", () => {
widget.init();
widget.popover = {
repaint: jasmine.createSpy("repaint")
};

widget.map.dispatchEvent({
type: "moveend"
});

expect(widget.popover.repaint).toHaveBeenCalledWith();
});

it("wirecloud 1.4+", () => {
widget.init();
widget.popover = {
enablePointerEvents: jasmine.createSpy("enablePointerEvents"),
repaint: jasmine.createSpy("repaint")
};

widget.map.dispatchEvent({
type: "moveend"
});

expect(widget.popover.enablePointerEvents).toHaveBeenCalledWith();
expect(widget.popover.repaint).toHaveBeenCalledWith();
});

});

describe("movestart", () => {

it("without popover", () => {
widget.init();

widget.map.dispatchEvent({
type: "movestart"
});
});

it("wirecloud 1.3 and below", () => {
widget.init();
widget.popover = {
hide: jasmine.createSpy('hide')
};

widget.map.dispatchEvent({
type: "movestart"
});

expect(widget.popover.hide).toHaveBeenCalledWith();
});

it("wirecloud 1.4+", () => {
widget.init();
widget.popover = {
disablePointerEvents: jasmine.createSpy("disablePointerEvents")
};

widget.map.dispatchEvent({
type: "movestart"
});

expect(widget.popover.disablePointerEvents).toHaveBeenCalledWith();
});

});

describe("pointermove", () => {

it("outside any feature", () => {
Expand Down Expand Up @@ -659,16 +730,16 @@
widget.init();
spyOn(widget.map, "getEventPixel");
spyOn(widget.map, "hasFeatureAtPixel").and.returnValue({});
let popover_mock = widget.popover = {
hide: jasmine.createSpy('hide')
const popover_mock = widget.popover = {
repaint: jasmine.createSpy('repaint')
};

widget.map.dispatchEvent({
type: "pointermove",
dragging: true
});

expect(popover_mock.hide).toHaveBeenCalled();
expect(popover_mock.repaint).toHaveBeenCalled();
});

});
Expand Down Expand Up @@ -1968,6 +2039,7 @@
});

describe("build marker with Font Awesome icon", () => {

it("build default marker", () => {
widget.init();
spyOn(widget.vector_source, 'addFeature');
Expand All @@ -1989,6 +2061,7 @@
expect(widget.vector_source.addFeature).toHaveBeenCalledTimes(1);
expect(widget.vector_source.addFeature).toHaveBeenCalledWith(jasmine.any(ol.Feature));
});

it("build marker with icon form", () => {
widget.init();
spyOn(widget.vector_source, 'addFeature');
Expand All @@ -2012,6 +2085,7 @@
expect(widget.vector_source.addFeature).toHaveBeenCalledTimes(1);
expect(widget.vector_source.addFeature).toHaveBeenCalledWith(jasmine.any(ol.Feature));
});

it("build red marker with icon form", () => {
widget.init();
spyOn(widget.vector_source, 'addFeature');
Expand All @@ -2036,6 +2110,7 @@
expect(widget.vector_source.addFeature).toHaveBeenCalledTimes(1);
expect(widget.vector_source.addFeature).toHaveBeenCalledWith(jasmine.any(ol.Feature));
});

it("build marker with circle form", () => {
widget.init();
spyOn(widget.vector_source, 'addFeature');
Expand All @@ -2059,6 +2134,7 @@
expect(widget.vector_source.addFeature).toHaveBeenCalledTimes(1);
expect(widget.vector_source.addFeature).toHaveBeenCalledWith(jasmine.any(ol.Feature));
});

it("build marker with box form", () => {
widget.init();
spyOn(widget.vector_source, 'addFeature');
Expand All @@ -2082,6 +2158,7 @@
expect(widget.vector_source.addFeature).toHaveBeenCalledTimes(1);
expect(widget.vector_source.addFeature).toHaveBeenCalledWith(jasmine.any(ol.Feature));
});

it("should use icon cache", () => {
widget.init();
spyOn(widget.vector_source, 'addFeature');
Expand All @@ -2096,7 +2173,7 @@
coordinates: [0, 0]
},
icon: {
'fontawesome': 'fa-star'
fontawesome: 'fa-star'
}
}));
widget.registerPoI(deepFreeze({
Expand All @@ -2107,12 +2184,13 @@
coordinates: [0, 0]
},
icon: {
'fontawesome': 'fa-star'
fontawesome: 'fa-star'
}
}));
expect(widget.vector_source.addFeature).toHaveBeenCalledTimes(2);
expect(widget.vector_source.addFeature).toHaveBeenCalledWith(jasmine.any(ol.Feature));
});

it("fallback when glyph not found", () => {
widget.init();
spyOn(widget.vector_source, 'addFeature');
Expand Down

0 comments on commit 655b328

Please sign in to comment.