submaps are handled via new implementation

frontend-js/src/main/js/gui/SubmapPanel.js

+"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;

frontend-js/src/main/js/map/ControlType.js

@@ -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;

frontend-js/src/main/js/map/CustomMap.js

@@ -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;

frontend-js/src/main/js/map/Submap.js

@@ -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;

frontend-js/src/main/js/map/TouchMap.js

@@ -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;
 };

frontend-js/src/main/js/map/window/AliasInfoWindow.js

@@ -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();
 }
 

frontend-js/src/main/js/minerva.js

@@ -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(){

frontend-js/src/test/js/gui/SubmapPanel-test.js

+"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);
+  });
+  
+});

frontend-js/src/test/js/helper.js

@@ -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;
+};
+