Commit 91cd4333 authored by Piotr Gawron's avatar Piotr Gawron
Browse files

submaps are handled via new implementation

parent 7ba78852
"use strict";
/* exported logger */
var Panel = require('./Panel');
var GuiConnector = require('../GuiConnector');
var logger = require('../logger');
function SubmapPanel(params) {
params.panelName = "user";
Panel.call(this, params);
var self = this;
self.refresh();
}
SubmapPanel.prototype = Object.create(Panel.prototype);
SubmapPanel.prototype.constructor = SubmapPanel;
SubmapPanel.prototype.getSubmapTable = function() {
return this.getElementByName(this.getElement(), "submapTable");
};
SubmapPanel.prototype.refresh = function() {
var self = this;
var table = self.getSubmapTable();
while (table.lastChild) {
table.removeChild(table.lastChild);
}
table.appendChild(self.createTableHeader());
table.appendChild(self.createRow(self.getMap().getModel()));
var submodels = self.getMap().getModel().getSubmodels();
for (var i = 0; i < submodels.length; i++) {
table.appendChild(self.createRow(submodels[i]));
}
};
SubmapPanel.prototype.createRow = function(model) {
var self = this;
var result = document.createElement("tr");
var nameTd = document.createElement("td");
nameTd.innerHTML = model.getName();
result.appendChild(nameTd);
var openTd = document.createElement("td");
if (model.getId() !== self.getMap().getId()) {
var button = document.createElement("button");
var img = self.createIcon("icons/search.png");
button.appendChild(img);
button.onclick = function() {
self.getMap().openSubmodel(model.getId());
};
openTd.appendChild(button);
}
result.appendChild(openTd);
return result;
};
SubmapPanel.prototype.createTableHeader = function() {
var result = document.createElement("thead");
var row = document.createElement("tr");
var nameTd = document.createElement("th");
nameTd.innerHTML = "Name";
row.appendChild(nameTd);
var viewTd = document.createElement("th");
viewTd.innerHTML = "View";
row.appendChild(viewTd);
result.appendChild(row);
return result;
};
module.exports = SubmapPanel;
......@@ -2,8 +2,9 @@
var ControlType = {
COMMENT_CHECKBOX : "COMMENT_CHECKBOX",
SUBMAP_DIALOGS : "SUBMAP_DIALOGS",
LOGO_IMG : "LOGO_IMG",
LOGO_2_IMG: "LOGO_2_IMG",
LOGO_2_IMG : "LOGO_2_IMG",
};
module.exports = ControlType;
......@@ -41,8 +41,6 @@ function CustomMap(options) {
AbstractCustomMap.call(this, options.getProject().getModel(), options);
this.setProject(options.getProject());
this.createSubmaps();
this.selectedLayouts = [];
this.customizeGoogleMapView(options.getMapDiv());
......@@ -71,6 +69,9 @@ function CustomMap(options) {
this._touchInterface = new TouchMap(this);
}
this.createSubmaps();
this._dialogs = [];
}
CustomMap.prototype = Object.create(AbstractCustomMap.prototype);
......@@ -253,6 +254,8 @@ CustomMap.prototype.updateOverlayCollection = function(overlayCollection, fitBou
* identifier of the layout to present
*/
CustomMap.prototype.openLayout = function(identifier) {
var self = this;
logger.debug("Opening layout: " + identifier);
this.getGoogleMap().setMapTypeId(identifier);
......@@ -267,8 +270,10 @@ CustomMap.prototype.openLayout = function(identifier) {
if (index === null) {
logger.warn("Invalid layout identifier: " + identifier);
}
for (var i = 0; i < this.submaps.length; i++) {
this.submaps[i].openLayout('cv' + this.submaps[i].getModel().getLayouts()[index].getId());
var submaps = self.getSubmaps();
for (var i = 0; i < submaps.length; i++) {
var submap = submaps[i];
submap.openLayout('cv' + submap.getModel().getLayouts()[index].getId());
}
};
......@@ -406,6 +411,13 @@ CustomMap.prototype.createMapMenu = function() {
rightHeaderMenu.appendChild(submenuButtonDiv);
this.divBelt.appendChild(rightHeaderMenu);
var submapDialogsDiv = document.createElement('div');
submapDialogsDiv.id = ControlType.SUBMAP_DIALOGS;
this.addControl(submapDialogsDiv);
this.divBelt.appendChild(submapDialogsDiv);
};
CustomMap.prototype.registerSource = function(overlayCollection) {
......@@ -518,39 +530,52 @@ CustomMap.prototype.refreshOverlayMarkers = function(overlay) {
}
};
CustomMap.prototype.openSubmodel = function(id, htmlTag, jsVar) {
if (jsVar.submapControler === undefined) {
var submap = null;
for (var j = 0; j < this.submaps.length; j++) {
if (this.submaps[j].getId() === id) {
submap = this.submaps[j];
}
}
if (submap === null) {
throw new Error("Unknown submap for id: " + id);
} else {
submap.init(htmlTag, jsVar);
// we have to perform it on top map, because on submaps id is different
this.openLayout(this.getGoogleMap().getMapTypeId());
CustomMap.prototype.getSubmapDialogDiv = function(id) {
var dialogs = this.getControl(ControlType.SUBMAP_DIALOGS);
// now we have to visualize layouts
var layouts = [];
var dialogDiv = this._dialogs[id];
// get list of layouts
for ( var key in this.selectedLayouts) {
if (this.selectedLayouts.hasOwnProperty(key) && this.selectedLayouts[key] === true) {
layouts.push(key);
}
}
if (dialogDiv === undefined) {
dialogDiv = document.createElement("div");
dialogDiv.setAttribute("name", "dialog-" + id);
// show layouts that should be visualized (resize or show them)
for (var i = 0; i < layouts.length; i++) {
var layoutId = layouts[i];
submap._showSelectedLayout(layoutId, i, layouts.length);
}
this._dialogs[id] = dialogDiv;
$(dialogDiv).dialog({autoOpen: false});
}
return dialogDiv;
};
CustomMap.prototype.openSubmodel = function(id) {
var self = this;
var submap = self.getSubmodelById(id);
if (submap === null) {
throw new Error("Unknown submap for id: " + id);
}
var dialogDiv = self.getSubmapDialogDiv(id);
submap.open(dialogDiv);
// we have to perform it on top map, because on submaps id is different
this.openLayout(this.getGoogleMap().getMapTypeId());
// now we have to visualize layouts
var layouts = [];
// get list of layouts
for ( var key in this.selectedLayouts) {
if (this.selectedLayouts.hasOwnProperty(key) && this.selectedLayouts[key] === true) {
layouts.push(key);
}
}
jsVar.show();
// show layouts that should be visualized (resize or show them)
for (var i = 0; i < layouts.length; i++) {
var layoutId = layouts[i];
submap._showSelectedLayout(layoutId, i, layouts.length);
}
};
......@@ -1737,4 +1762,13 @@ CustomMap.prototype.getSelectedPolygon = function(){
return this._selectedPolygon;
};
CustomMap.prototype.getSubmaps = function(){
var submaps = this.submaps;
if (submaps===undefined) {
submaps=[];
}
return submaps;
};
module.exports = CustomMap;
......@@ -44,76 +44,61 @@ Submap.prototype.constructor = Submap;
* javascript component of primefaces popup dialog where submap will be
* visualized
*/
Submap.prototype.init = function(htmlTag, jsVar) {
logger.debug("Initializing gui: " + this.getId());
Submap.prototype.open = function(htmlTag) {
var self = this;
if (jsVar.submapControler !== undefined) {
throw "Submodel with " + this.getId()
+ " cannot be created, because provided dialog window already has associated submodel";
} else {
this.htmlTag = htmlTag;
this.jsVar = jsVar;
if (!this.initialized) {
self.htmlTag = htmlTag;
this.initialized = true;
var mapOptions = self.creatMapOptions(self.getLayouts().length);
var doc = htmlTag;
var childDiv = null;
for (var i = 0; i < doc.childNodes.length; i++) {
if (doc.childNodes[i].className.indexOf("ui-dialog-content") >= 0) {
childDiv = doc.childNodes[i];
}
}
var contentDiv = document.createElement("div");
contentDiv.setAttribute("name", "submap-div-" + self.getId());
contentDiv.style.width = "100%";
contentDiv.style.height = "100%";
htmlTag.appendChild(contentDiv);
var controlDiv = document.createElement('div');
controlDiv.id = "submap-gmap-div-" + this.getId();
controlDiv.style.height = '100%';
controlDiv.style.width = '100%';
var mapDiv = document.createElement("div");
mapDiv.style.width = "100%";
mapDiv.style.height = "100%";
contentDiv.appendChild(mapDiv);
childDiv.appendChild(controlDiv);
childDiv.style.height = '100%';
childDiv.style.width = '100%';
$(this.htmlTag).dialog("open");
var mapOptions = this.creatMapOptions(this.getLayouts().length);
$(this.htmlTag).dialog("option", "width", Math.floor(window.innerWidth * 2 / 3));
$(this.htmlTag).dialog("option", "height", Math.floor(window.innerHeight * 2 / 3));
this.setGoogleMap(new google.maps.Map(controlDiv, mapOptions));
if (this.isCustomTouchInterface()) {
this._touchInterface = new TouchMap(this);
}
this.setupLayouts();
var self = this;
self.lastResize = 0;
jQuery(htmlTag).bind("resize", function() {
var timestamp = new Date().getTime();
if (timestamp > self.lastResize) {
self.lastResize = timestamp + 200;
setTimeout(function() {
google.maps.event.trigger(self.getGoogleMap(), 'resize');
self.lastResize = Math.min(new Date().getTime(), self.lastResize);
}, 100);
}
self.setGoogleMap(new google.maps.Map(mapDiv, mapOptions));
$(self.htmlTag).bind("resize", function() {
google.maps.event.trigger(self.getGoogleMap(), 'resize');
});
htmlTag.style.width = Math.floor(window.innerWidth * 2 / 3) + "px";
htmlTag.style.height = Math.floor(window.innerHeight * 2 / 3) + "px";
google.maps.event.trigger(self.getGoogleMap(), 'resize');
jsVar.submapControler = this;
if (self.isCustomTouchInterface()) {
self._touchInterface = new TouchMap(this);
}
self.setupLayouts();
this.registerMapClickEvents();
self.registerMapClickEvents();
// after resizing center map
var centerPoint = this.getModel().getCenterLatLng();
var centerPoint = self.getModel().getCenterLatLng();
self.getGoogleMap().setCenter(centerPoint);
var sessionData = ServerConnector.getSessionData(this.getProject());
// and now send the zoom level to the client side
google.maps.event.addListener(this.getGoogleMap(), 'zoom_changed', function() {
google.maps.event.addListener(self.getGoogleMap(), 'zoom_changed', function() {
sessionData.setZoomLevel(self.getModel(), self.getGoogleMap().getZoom());
});
sessionData.setZoomLevel(self.getModel(), self.getGoogleMap().getZoom());
self.initialized = true;
} else {
$(this.htmlTag).dialog("open");
}
};
......@@ -128,9 +113,9 @@ Submap.prototype.loadSubmapConfiguration = function() {
var self = this;
var onConfigurationReload = function() {
var submodelFound = false;
for (var i = 0; i < self.customMap.configuration.SUBMODELS.length && (!submodelFound); i++) {
if (self.customMap.configuration.SUBMODELS[i].getId() === self.getId()) {
self.configuration = self.customMap.configuration.SUBMODELS[i];
for (var i = 0; i < self.getTopMap().configuration.SUBMODELS.length && (!submodelFound); i++) {
if (self.getTopMap().configuration.SUBMODELS[i].getId() === self.getId()) {
self.configuration = self.getTopMap().configuration.SUBMODELS[i];
submodelFound = true;
}
}
......@@ -141,11 +126,11 @@ Submap.prototype.loadSubmapConfiguration = function() {
};
onConfigurationReload();
this.customMap.configuration.addListener("onreload", onConfigurationReload);
this.getTopMap().configuration.addListener("onreload", onConfigurationReload);
};
Submap.prototype.getTopMap = function() {
return this.customMap;
return this.getCustomMap();
};
Submap.prototype.getCustomMap = function() {
......@@ -160,6 +145,4 @@ Submap.prototype.getProject = function() {
return this.getCustomMap().getProject();
};
module.exports = Submap;
......@@ -8,7 +8,7 @@ var GuiConnector = require('../GuiConnector');
*/
function TouchMap(paramCustomMap) {
this._customMap = paramCustomMap;
this.setMap (paramCustomMap.getGoogleMap());
this.setMap(paramCustomMap.getGoogleMap());
logger.info("Turning on custom touch interfaces");
var self = this;
......@@ -41,7 +41,7 @@ function TouchMap(paramCustomMap) {
self.latLng = mouseEvent.latLng;
});
google.maps.event.addListener(this.getMap(), 'zoom_changed', function() {
self.getCustomMap().refreshMarkers();
self.getCustomMap().getTopMap().refreshMarkers();
});
}
......@@ -107,8 +107,7 @@ TouchMap.prototype.handleStart = function(evt) {
self.lastMoveDx = 0;
self.lastMoveDy = 0;
self.rightMenuOn = GuiConnector.isRightMenuVisible();
GuiConnector.updateMouseCoordinates(touches[i].clientX,
touches[i].clientY);
GuiConnector.updateMouseCoordinates(touches[i].clientX, touches[i].clientY);
}
if (self.ongoingTouches.length === 2) {
self.secondFingerId = touches[i].identifier;
......@@ -198,14 +197,11 @@ TouchMap.prototype.makeMove = function() {
var self = this;
if (self.firstFingerId !== null && self.firstFingerId !== undefined) {
if (self.secondFingerId !== null && self.secondFingerId !== undefined) {
var dist1 = self.lineDistance(self.secondStartX, self.secondStartY,
self.firstStartX, self.firstStartY);
var dist2 = self.lineDistance(self.secondEndX, self.secondEndY,
self.firstEndX, self.firstEndY);
var dist1 = self.lineDistance(self.secondStartX, self.secondStartY, self.firstStartX, self.firstStartY);
var dist2 = self.lineDistance(self.secondEndX, self.secondEndY, self.firstEndX, self.firstEndY);
var zoomFactor = dist2 / dist1;
var changeLevels = Math.round((Math.log(zoomFactor) / Math.log(2)));
self.zoomMap(self.firstEndX, self.firstEndY, changeLevels
+ self.startZoom);
self.zoomMap(self.firstEndX, self.firstEndY, changeLevels + self.startZoom);
} else {
var dx = -self.firstEndX + self.firstStartX;
var dy = -self.firstEndY + self.firstStartY;
......@@ -224,8 +220,7 @@ TouchMap.prototype.makeLeftClick = function(x, y) {
logger.debug(el);
// if we clicked on one of the elements on the map then emulate the click
if (el.attr('src') !== undefined || el.attr('id') !== undefined
|| el.attr('title') !== undefined) {
if (el.attr('src') !== undefined || el.attr('id') !== undefined || el.attr('title') !== undefined) {
el.click();
} else {
var mev = {
......@@ -243,8 +238,7 @@ TouchMap.prototype.makeRightClick = function(x, y) {
var el = $(document.elementFromPoint(x, y));
// if we clicked on one of the elements on the map then emulate the click
if (el.attr('src') !== undefined || el.attr('id') !== undefined
|| el.attr('title') !== undefined) {
if (el.attr('src') !== undefined || el.attr('id') !== undefined || el.attr('title') !== undefined) {
el.click();
} else {
var mev = {
......@@ -266,10 +260,8 @@ TouchMap.prototype.handleEnd = function(evt) {
logger.debug("first finger: " + self.firstFingerId);
logger.debug("last started: " + self.lastStartedFinger);
var dist = Math.abs(self.firstEndX - self.firstStartX)
+ Math.abs(self.firstEndY - self.firstStartY);
if (idx === self.firstFingerId && idx === self.lastStartedFinger
&& (dist < self.clickRange)) {
var dist = Math.abs(self.firstEndX - self.firstStartX) + Math.abs(self.firstEndY - self.firstStartY);
if (idx === self.firstFingerId && idx === self.lastStartedFinger && (dist < self.clickRange)) {
var clickTime = (new Date().getTime() - self.lastStartedTime);
logger.debug(clickTime + ", " + self.longClickTime);
if (clickTime < self.longClickTime) {
......@@ -296,8 +288,7 @@ TouchMap.prototype.handleEnd = function(evt) {
if (idx >= 0) {
self.ongoingTouches.splice(idx, 1); // remove it; we're done
} else {
logger.warn("can't figure out which touch to end: "
+ touches[i].identifier);
logger.warn("can't figure out which touch to end: " + touches[i].identifier);
}
}
};
......@@ -318,8 +309,7 @@ TouchMap.prototype.handleMove = function(evt) {
// record
} else {
logger.warn("can't figure out which touch to continue"
+ touches[i].identifier);
logger.warn("can't figure out which touch to continue" + touches[i].identifier);
}
}
......@@ -372,7 +362,6 @@ TouchMap.prototype.ongoingTouchIndexById = function(idToFind) {
return -1; // not found
};
TouchMap.prototype.setMap = function(map) {
this._map = map;
};
......
......@@ -33,12 +33,13 @@ function AliasInfoWindow(aliasParam, map, onloadFun) {
position : latLng
});
map.getSubmodelById(alias.getModelId()).getModel().getAliasById(alias.getId(), true).then(function(alias) {
self.update(alias);
if (onloadFun!==undefined) {
onloadFun();
}
});
map.getTopMap().getSubmodelById(alias.getModelId()).getModel().getAliasById(alias.getId(), true).then(
function(alias) {
self.update(alias);
if (onloadFun !== undefined) {
onloadFun();
}
});
this.open();
}
......
......@@ -15,6 +15,7 @@ var MiRnaPanel = require('./gui/MiRnaPanel');
var OverlayPanel = require('./gui/OverlayPanel');
var SearchDbOverlay = require('./map/overlay/SearchDbOverlay');
var SearchPanel = require('./gui/SearchPanel');
var SubmapPanel = require('./gui/SubmapPanel');
var UserPanel = require('./gui/UserPanel');
var OriginalGuiConnector = require('./GuiConnector');
......@@ -181,6 +182,11 @@ function create(params) {
customMap : result
});
new SubmapPanel({
element : document.getElementById("submapTab"),
customMap : result
});
return new Promise(function(resolve, reject) {
restoreSearchQuery(result).then(function(){
......
"use strict";
var Helper = require('../helper');
require("../mocha-config.js");
var SubmapPanel = require('../../../main/js/gui/SubmapPanel');
var chai = require('chai');
var assert = chai.assert;
var logger = require('../logger');
describe('SubmapPanel', function() {
var helper;
before(function() {
helper = new Helper();
});
it('contructor', function() {
var div = helper.createSubmapTab();
var map = helper.createCustomMap();
new SubmapPanel({
element : div,
customMap : map
});
assert.equal(logger.getWarnings().length, 0);
var buttons = div.getElementsByTagName("button");
assert.equal(buttons.length, 0);
});
});
......@@ -129,6 +129,21 @@ Helper.prototype.createUserTab = function() {
return result;
};
Helper.prototype.createSubmapTab = function() {
var result = document.createElement("div");
result.id = "submapTab";
var submapDiv = document.createElement("div");
submapDiv.setAttribute("name", "submapDiv");
result.appendChild(submapDiv);
var submapTable = document.createElement("table");
submapTable.setAttribute("name", "submapTable");
submapDiv.appendChild(submapTable);
return result;
};