From e0d1c7951b52b03e0aa3909ed46e287330f89bbd Mon Sep 17 00:00:00 2001
From: Piotr Gawron <piotr.gawron@uni.lu>
Date: Mon, 19 Mar 2018 12:44:48 +0100
Subject: [PATCH] icons in left panel can contain click method that zoom to the
elements
---
.../src/main/js/gui/leftPanel/GuiUtils.js | 19 +++++--
frontend-js/src/main/js/map/CustomMap.js | 11 ++--
.../main/js/map/data/SearchBioEntityGroup.js | 2 +-
.../test/js/gui/leftPanel/GuiUtils-test.js | 19 +++++++
.../src/test/js/map/AbstractCustomMap-test.js | 56 +++++++++++--------
5 files changed, 74 insertions(+), 33 deletions(-)
diff --git a/frontend-js/src/main/js/gui/leftPanel/GuiUtils.js b/frontend-js/src/main/js/gui/leftPanel/GuiUtils.js
index f677c943f0..eb87fa1b81 100644
--- a/frontend-js/src/main/js/gui/leftPanel/GuiUtils.js
+++ b/frontend-js/src/main/js/gui/leftPanel/GuiUtils.js
@@ -349,13 +349,16 @@ GuiUtils.prototype.createParamLine = function (label, value) {
return result;
};
-GuiUtils.prototype.createIcon = function (icon) {
+GuiUtils.prototype.createIcon = function (icon, onclickFunction) {
var result = document.createElement("div");
if (icon !== undefined && icon !== null) {
var img = document.createElement("img");
img.src = GuiConnector.getImgPrefix() + icon;
img.style.float = "left";
img.hspace = "5";
+ if (onclickFunction !== undefined) {
+ img.onclick = onclickFunction;
+ }
result.appendChild(img);
}
return result;
@@ -456,7 +459,15 @@ GuiUtils.prototype.createAliasElement = function (params) {
if (showTitle) {
if (icon !== undefined) {
- div.appendChild(this.createIcon(icon));
+ div.appendChild(this.createIcon(icon, function () {
+ return self.getMap().openSubmap(alias.getModelId()).then(function () {
+ if (alias instanceof Alias) {
+ return self.getMap().getSubmapById(alias.getModelId()).fitBounds([alias]);
+ } else {
+ return self.getMap().getSubmapById(alias.getModelId()).fitBounds(alias.getBioEntities());
+ }
+ });
+ }));
}
div.appendChild(this.createParamLine(alias.getType() + ": ", alias.getName()));
@@ -487,9 +498,9 @@ GuiUtils.prototype.createAliasElement = function (params) {
};
GuiUtils.prototype.createSearchBioEntityGroupElement = function (group) {
if (group.getBioEntities()[0] instanceof Alias) {
- return this.createAliasElement({alias:group, icon:group.getIcon()});
+ return this.createAliasElement({alias: group, icon: group.getIcon()});
} else {
- return this.createReactionElement({reaction:group, icon:group.getIcon()});
+ return this.createReactionElement({reaction: group, icon: group.getIcon()});
}
};
diff --git a/frontend-js/src/main/js/map/CustomMap.js b/frontend-js/src/main/js/map/CustomMap.js
index c04d494f09..66a7fa93f2 100644
--- a/frontend-js/src/main/js/map/CustomMap.js
+++ b/frontend-js/src/main/js/map/CustomMap.js
@@ -433,6 +433,8 @@ CustomMap.prototype.openSubmap = function (id) {
return self.refreshMarkers(true);
}
});
+ } else {
+ return Promise.resolve();
}
};
@@ -705,8 +707,6 @@ CustomMap.prototype.renderOverlayCollection = function (params) {
var overlayCollection = params.overlayCollection;
var elements;
- var markers = [];
-
var submaps = self.getSubmaps().concat([self]);
return overlayCollection.getIdentifiedElements().then(function (identifiedElements) {
@@ -719,9 +719,6 @@ CustomMap.prototype.renderOverlayCollection = function (params) {
}
return Promise.all(promises);
}).then(function (mapMarkers) {
- for (var i = 0; i < mapMarkers.length; i++) {
- markers = markers.concat(mapMarkers[i]);
- }
return Promise.each(elements, function (element) {
var infoWindow = self.getInfoWindowForIdentifiedElement(element);
if (infoWindow !== null && infoWindow !== undefined) {
@@ -731,10 +728,12 @@ CustomMap.prototype.renderOverlayCollection = function (params) {
}
});
}).then(function () {
+ return self.fetchIdentifiedElements(elements);
+ }).then(function (fullElements) {
var promises = [];
if (elements.length > 0 && fitBounds) {
for (var j = 0; j < submaps.length; j++) {
- promises.push(submaps[j].fitBounds(markers));
+ promises.push(submaps[j].fitBounds(fullElements));
}
}
return Promise.all(promises);
diff --git a/frontend-js/src/main/js/map/data/SearchBioEntityGroup.js b/frontend-js/src/main/js/map/data/SearchBioEntityGroup.js
index cfb18a2d90..bee43aa1ad 100644
--- a/frontend-js/src/main/js/map/data/SearchBioEntityGroup.js
+++ b/frontend-js/src/main/js/map/data/SearchBioEntityGroup.js
@@ -196,7 +196,7 @@ SearchAliasGroup.prototype.getMergedParameterByFunction = function (functionName
return result;
};
-SearchAliasGroup.prototype.getIntersectionListByFunction = function (functionName, comparator) {
+SearchAliasGroup.prototype.getIntersectionListByFunction = function (functionName) {
var bioEntities = this.getBioEntities();
var result;
if (typeof functionName === "function") {
diff --git a/frontend-js/src/test/js/gui/leftPanel/GuiUtils-test.js b/frontend-js/src/test/js/gui/leftPanel/GuiUtils-test.js
index 5d3aa3a65b..bfa7e4381f 100644
--- a/frontend-js/src/test/js/gui/leftPanel/GuiUtils-test.js
+++ b/frontend-js/src/test/js/gui/leftPanel/GuiUtils-test.js
@@ -136,6 +136,25 @@ describe('GuiUtils', function () {
alias: alias
}).innerHTML.indexOf("Full name") === -1);
});
+
+ it('onclick function', function () {
+ var map = helper.createCustomMap();
+ helper.createSearchDbOverlay(map);
+
+ var guiUtils = new GuiUtils();
+ guiUtils.setMap(map);
+ var alias = helper.createAlias(map);
+
+ alias.setFullName("xxx");
+ var htmlElement = guiUtils.createAliasElement({
+ alias: alias,
+ icon: "empty.png"
+ });
+
+ var img = $("img", htmlElement)[0];
+
+ return img.onclick();
+ });
});
describe('createLink', function () {
diff --git a/frontend-js/src/test/js/map/AbstractCustomMap-test.js b/frontend-js/src/test/js/map/AbstractCustomMap-test.js
index 4f2c4d282f..1b76576dc5 100644
--- a/frontend-js/src/test/js/map/AbstractCustomMap-test.js
+++ b/frontend-js/src/test/js/map/AbstractCustomMap-test.js
@@ -324,30 +324,42 @@ describe('AbstractCustomMap', function () {
assert.ok(map.isDebug());
});
- it("fitBounds", function () {
- var map = helper.createCustomMap();
- var alias = helper.createAlias(map);
- var ie = new IdentifiedElement(alias);
- var marker = new AliasMarker({
- map: map,
- element: ie
- });
- var surface = new AliasSurface({
- map: map,
- alias: alias,
- gmapObj: new google.maps.Rectangle({
- map: map.getGoogleMap(),
- bounds: new google.maps.LatLngBounds(new google.maps.LatLng(0, 0), new google.maps.LatLng(0.5, 1))
- })
+ describe("fitBounds", function () {
+ it("surface", function () {
+ var map = helper.createCustomMap();
+ var alias = helper.createAlias(map);
+ var ie = new IdentifiedElement(alias);
+ var marker = new AliasMarker({
+ map: map,
+ element: ie
+ });
+ var surface = new AliasSurface({
+ map: map,
+ alias: alias,
+ gmapObj: new google.maps.Rectangle({
+ map: map.getGoogleMap(),
+ bounds: new google.maps.LatLngBounds(new google.maps.LatLng(0, 0), new google.maps.LatLng(0.5, 1))
+ })
+ });
+
+ var markers = [marker, surface];
+ return marker.init().then(function () {
+
+ var center = map.getGoogleMap().getCenter();
+ map.fitBounds(markers);
+ var center2 = map.getGoogleMap().getCenter();
+ assert.ok(center.lat() !== center2.lat() || center.lng() !== center2.lng());
+ });
});
-
- var markers = [marker, surface];
- return marker.init().then(function () {
-
+ it("reaction", function () {
+ var map = helper.createCustomMap();
+ var reaction = helper.createReaction(map);
var center = map.getGoogleMap().getCenter();
- map.fitBounds(markers);
- var center2 = map.getGoogleMap().getCenter();
- assert.ok(center.lat() !== center2.lat() || center.lng() !== center2.lng());
+ return map.fitBounds([reaction]).then(function () {
+
+ var center2 = map.getGoogleMap().getCenter();
+ assert.ok(center.lat() !== center2.lat() || center.lng() !== center2.lng());
+ })
});
});
--
GitLab