overview dialog extracted to separate class

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

+"use strict";
+
+/* exported logger */
+
+var ObjectWithListeners = require('../ObjectWithListeners');
+
+var logger = require('../logger');
+
+function AbstractGuiElement(params) {
+  ObjectWithListeners.call(this, params);
+
+  var self = this;
+
+  self.setElement(params.element);
+  self.setMap(params.customMap);
+}
+
+AbstractGuiElement.prototype = Object.create(ObjectWithListeners.prototype);
+AbstractGuiElement.prototype.constructor = AbstractGuiElement;
+
+AbstractGuiElement.prototype.setMap = function(map) {
+  if (map===undefined || map===null) {
+    throw new Error("map must be defined");
+  }
+  this._map = map;
+};
+
+AbstractGuiElement.prototype.getMap = function() {
+  return this._map;
+};
+
+AbstractGuiElement.prototype.setElement = function(element) {
+  if (element === undefined || element === null) {
+    throw new Error("DOM Element must be defined");
+  }
+  this._element = element;
+};
+
+AbstractGuiElement.prototype.getElement = function() {
+  return this._element;
+};
+module.exports = AbstractGuiElement;

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

+"use strict";
+
+/* exported logger */
+
+var AbstractGuiElement = require('./AbstractGuiElement');
+var GuiConnector = require('../GuiConnector');
+
+var functions = require('../functions');
+var logger = require('../logger');
+
+function OverviewDialog(params) {
+  AbstractGuiElement.call(this, params);
+  var self = this;
+  $(self.getElement()).dialog({
+    autoOpen : false,
+    resizable : false,
+  });
+}
+
+OverviewDialog.prototype = Object.create(AbstractGuiElement.prototype);
+OverviewDialog.prototype.constructor = OverviewDialog;
+
+OverviewDialog.prototype.showOverview = function(overviewImageId) {
+  var self = this;
+  var map = self.getMap();
+
+  var project = map.getProject();
+
+  // resize dialog
+  var htmlTag = self.getElement();
+
+  var width = Math.floor(window.innerWidth * 2 / 3);
+  var height = Math.floor(window.innerHeight * 2 / 3);
+
+  $(self.getElement()).dialog("option", "width", width + 60);
+  $(self.getElement()).dialog("option", "height", height + 60);
+
+  // remove all child nodes from overview div
+  while (htmlTag.hasChildNodes()) {
+    htmlTag.removeChild(htmlTag.lastChild);
+  }
+
+  var content = document.createElement("div");
+  htmlTag.appendChild(content);
+
+  var canvasDebug = document.createElement("canvas");
+  canvasDebug.className = "canvasDebugClass";
+  canvasDebug.style.display = "none";
+  htmlTag.appendChild(canvasDebug);
+
+  if (overviewImageId === undefined) {
+    this.overviewImage = project.getTopOverviewImage();
+  } else {
+    this.overviewImage = null;
+    var images = project.getOverviewImages();
+    for (var i = 0; i < images.length; i++) {
+      if (images[i].idObject === overviewImageId) {
+        this.overviewImage = images[i];
+      }
+    }
+
+    if (this.overviewImage === null) {
+      logger.warn("Unknown overview image with id = " + overviewImageId);
+      this.overviewImage = project.getTopOverviewImage();
+    }
+  }
+
+  // add image to overview div
+  this.overviewImageTag = document.createElement("IMG");
+  this.overviewImageTag.src = "../map_images/" + this.overviewImage.filename;
+  content.appendChild(this.overviewImageTag);
+
+  var ratio = 1.0;
+
+  // check how image should be resized to fit dialog and resize it manually!!!
+  if (width / this.overviewImage.width > height / this.overviewImage.height) {
+    this.overviewImageTag.style.height = height + "px";
+    ratio = height / this.overviewImage.height;
+    width = this.overviewImage.width * ratio;
+    $(self.getElement()).dialog("option", "width", width + 60);
+  } else {
+    this.overviewImageTag.style.width = width + "px";
+    ratio = width / this.overviewImage.width;
+    height = this.overviewImage.height * ratio;
+    $(self.getElement()).dialog("option", "height", height + 60);
+  }
+
+  // on click event (what should happen when we click on the image)
+  var onclickevent = function getClickPosition(e) {
+    var parentPosition = functions.getPosition(e.currentTarget);
+    var xPosition = e.clientX - parentPosition.x;
+    var yPosition = e.clientY - parentPosition.y;
+
+    var imgWidth = self.overviewImageTag.offsetWidth;
+
+    var currentRatio = imgWidth / self.overviewImage.width;
+
+    var xNormal = xPosition / currentRatio;
+    var yNormal = yPosition / currentRatio;
+    var point = {
+      x : xNormal,
+      y : yNormal
+    };
+
+    var link = null;
+    for (var i = 0; i < self.overviewImage.links.length; i++) {
+      if (functions.pointInsidePolygon(point, self.overviewImage.links[i].polygon)) {
+        if (link === null) {
+          link = self.overviewImage.links[i];
+        } else {
+          logger.warn("More than one link found. Skipping");
+        }
+      }
+    }
+    if (link !== null) {
+      if (link.type === "OverviewModelLink") {
+        logger.debug("Opening model from overview. ModelId: " + link.modelLinkId);
+        logger.debug("link coordinates [" + link.idObject + "]: " + link.latLng);
+        // TODO min zoom value can be different for every map, it should be
+        // changed in the future
+        map.showModel(link.modelLinkId, link.latLng, link.zoomLevel + map.getMinZoom());
+        overviewDialog.hide();
+      } else if (link.type === "OverviewImageLink") {
+        logger.debug("Opening image from overview. ImageId: " + link.imageLinkId);
+        self.showOverview(link.imageLinkId);
+      } else if (link.type === "OverviewSearchLink") {
+        logger.debug("Sending search query. Query: " + link.query);
+        GuiConnector.search(link.query);
+        overviewDialog.hide();
+      } else {
+        logger.warn("Unknown type of link: " + link.type + ". Don't know what to do... LinkId: " + link.idObject);
+      }
+    }
+  };
+
+  this.overviewImageTag.onclick = onclickevent;
+
+  // resize canvas where on mouse over highligh will appear
+
+  // in debug mode draw clickable shapes
+  if (map.isDebug()) {
+    canvasDebug.style.display = "";
+    canvasDebug.width = width;
+    canvasDebug.height = height;
+    canvasDebug.onclick = onclickevent;
+    this.drawClickableShapes(canvasDebug, ratio);
+  }
+
+  this.overviewImage.mousePos = {
+    x : 0,
+    y : 0
+  };
+
+  // this listener should be called when mouse moves over image, it purpose is
+  // to change coursor to pointer when mouse enters clickable polygon and back
+  // to normal when mouse leaves such region
+  var onmousemove = function getMouseOverPosition(e) {
+    var position = functions.getPosition(e.currentTarget);
+    position.x = e.clientX - position.x;
+    position.y = e.clientY - position.y;
+
+    var imgWidth = self.overviewImageTag.offsetWidth;
+
+    var currentRatio = imgWidth / self.overviewImage.width;
+
+    var xNormal = position.x / currentRatio;
+    var yNormal = position.y / currentRatio;
+    var point = {
+      x : xNormal,
+      y : yNormal
+    };
+
+    if (self.overviewImage.mousePos.x !== position.x || self.overviewImage.mousePos.y !== position.y) {
+      self.overviewImage.mousePos = position;
+      var link = null;
+      for (var i = 0; i < self.overviewImage.links.length; i++) {
+        if (functions.pointInsidePolygon(point, self.overviewImage.links[i].polygon)) {
+          link = self.overviewImage.links[i];
+        }
+      }
+      if (link === null) {
+        e.currentTarget.style.cursor = "auto";
+      } else {
+        e.currentTarget.style.cursor = "pointer";
+      }
+    }
+  };
+
+  // onmousemove listener should be assigned to canvas (which is on top of the
+  // image) and overviewimage (just in case something went wrong with resizing
+  // canvas)
+  canvasDebug.onmousemove = onmousemove;
+  this.overviewImageTag.onmousemove = onmousemove;
+
+  $(self.getElement()).dialog("open");
+};
+
+OverviewDialog.prototype.drawClickableShapes = function(canvas, ratio) {
+  var ctx = canvas.getContext("2d");
+  // clear canvas
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  for (var i = 0; i < this.overviewImage.links.length; i++) {
+    ctx.beginPath();
+    var polygon = this.overviewImage.links[i].polygon;
+    for (var j = 0; j < polygon.length; j++) {
+      var x = polygon[j].x * ratio;
+      var y = polygon[j].y * ratio;
+      ctx.moveTo(x, y);
+      x = polygon[(j + 1) % polygon.length].x * ratio;
+      y = polygon[(j + 1) % polygon.length].y * ratio;
+      ctx.lineTo(x, y);
+    }
+    ctx.stroke();
+  }
+};
+
+OverviewDialog.prototype.destroy = function() {
+  $(this.getElement()).dialog("destroy");
+};
+
+module.exports = OverviewDialog;

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

@@ -3,12 +3,12 @@
 /* exported logger */
 
 var GuiConnector = require('../GuiConnector');
-var ObjectWithListeners = require('../ObjectWithListeners');
+var AbstractGuiElement = require('./AbstractGuiElement');
 
 var logger = require('../logger');
 
 function Panel(params) {
-  ObjectWithListeners.call(this, params);
+  AbstractGuiElement.call(this, params);
 
   var self = this;
 
@@ -18,7 +18,7 @@ function Panel(params) {
 
 }
 
-Panel.prototype = Object.create(ObjectWithListeners.prototype);
+Panel.prototype = Object.create(AbstractGuiElement.prototype);
 Panel.prototype.constructor = Panel;
 
 Panel.prototype.disablePanel = function(message) {

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

@@ -963,7 +963,7 @@ AbstractCustomMap.prototype.setDebug = function(debug) {
 };
 
 AbstractCustomMap.prototype.isDebug = function() {
-  return this.debug === true;
+  return this._debug === true;
 };
 
 AbstractCustomMap.prototype.getTopLeftLatLng = function() {

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

 "use strict";
 
 var ControlType = {
-  COMMENT_CHECKBOX : "COMMENT_CHECKBOX",
   SUBMAP_DIALOGS : "SUBMAP_DIALOGS",
   LOGO_IMG : "LOGO_IMG",
   LOGO_2_IMG : "LOGO_2_IMG",

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

@@ -45,10 +45,6 @@ function CustomMap(options) {
 
   this.customizeGoogleMapView(options.getMapDiv());
 
-  this.createBelt();
-  
-  this.createMapMenu();
-  
   this.createMapChangedCallbacks();
 
   this.overlayCollections = [];
@@ -127,15 +123,6 @@ CustomMap.prototype.createLogo = function() {
   this.getGoogleMap().controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(logoControlDiv);
 };
 
-CustomMap.prototype.createBelt = function() {
-  var self = this;
-
-  this.divBelt = document.createElement('DIV');
-  this.divBelt.className = "headerBelt";
-
-  this.getGoogleMap().controls[google.maps.ControlPosition.TOP_LEFT].push(this.divBelt);
-};
-
 CustomMap.prototype.clearOverlays = function() {
   for ( var overlayName in this.overlayCollections) {
     if (this.overlayCollections.hasOwnProperty(overlayName)) {
@@ -271,25 +258,6 @@ CustomMap.prototype.openLayoutByName = function(name) {
   }
 };
 
-CustomMap.prototype.createMapMenu = function() {
-  var selfMap = this;
-
-  // create a button for overview images when the image is available
-  if (this.getTopOverviewImage() !== undefined && this.getTopOverviewImage() !== null) {
-    var submenuButtonDiv2 = document.createElement('button');
-    submenuButtonDiv2.id = "overview_button";
-    submenuButtonDiv2.innerHTML = "<i class='fa fa-sitemap' style='font-size:18px; font-weight:400; padding-right:10px;'></i> SHOW OVERVIEW";
-    submenuButtonDiv2.className = "overview_button";
-    submenuButtonDiv2.onclick = (function() {
-      return function() {
-        selfMap.showOverview();
-        return false;
-      };
-    })();
-    this.divBelt.appendChild(submenuButtonDiv2);
-  }
-};
-
 CustomMap.prototype.registerSource = function(overlayCollection) {
   var self = this;
 
@@ -569,209 +537,6 @@ CustomMap.prototype.removeSelection = function() {
   }
 };
 
-/**
- * This method will hide google map view and will present single image overview
- * of the data.
- */
-CustomMap.prototype.showOverview = function(overviewImageId) {
-  var overviewDialog = GuiConnector.getOverviewDialog();
-  overviewDialog.syncWindowResize();
-  if (this.getOverviewDiv() === undefined) {
-    logger.warn("Cannot show overview, because overview div is  undefined");
-  } else {
-    logger.debug("Show overview");
-    overviewDialog.show();
-
-    // resize dialog
-    var htmlTag = GuiConnector.getOverviewHtmlTag();
-
-    var width = Math.floor(window.innerWidth * 2 / 3);
-    var height = Math.floor(window.innerHeight * 2 / 3);
-
-    htmlTag.style.height = (height + 50) + "px";
-    htmlTag.style.width = (width + 20) + "px";
-
-    var self = this;
-
-    // remove all child nodes from overview div
-    while (this.getOverviewDiv().hasChildNodes()) {
-      this.getOverviewDiv().removeChild(this.getOverviewDiv().lastChild);
-    }
-
-    if (overviewImageId === undefined || overviewImageId === null) {
-      this.overviewImage = this.getConfiguration().TOP_OVERVIEW_IMAGE;
-    } else {
-      this.overviewImage = null;
-      for (var i = 0; i < this.getConfiguration().OVERVIEW_IMAGES.length; i++) {
-        if (this.getConfiguration().OVERVIEW_IMAGES[i].idObject === overviewImageId) {
-          this.overviewImage = this.getConfiguration().OVERVIEW_IMAGES[i];
-        }
-      }
-
-      if (this.overviewImage === null) {
-        logger.warn("Unknown overview image with id = " + overviewImageId);
-        this.overviewImage = this.getConfiguration().TOP_OVERVIEW_IMAGE;
-      }
-    }
-
-    // add image to overview div
-    this.overviewImageTag = document.createElement("IMG");
-    this.overviewImageTag.src = "../map_images/" + this.overviewImage.filename;
-    this.getOverviewDiv().appendChild(this.overviewImageTag);
-
-    var ratio = 1.0;
-
-    // check how image should be resized to fit dialog and resize it manually!!!
-    if (width / this.overviewImage.width > height / this.overviewImage.height) {
-      this.overviewImageTag.style.height = height + "px";
-      ratio = height / this.overviewImage.height;
-      width = this.overviewImage.width * ratio;
-
-      htmlTag.style.width = (width + 20) + "px";
-    } else {
-      this.overviewImageTag.style.width = width + "px";
-      ratio = width / this.overviewImage.width;
-      height = this.overviewImage.height * ratio;
-
-      htmlTag.style.height = (height + 50) + "px";
-    }
-
-    // center dialog
-    overviewDialog.jq.css("top", Math.max(0, (($(window).height() - overviewDialog.jq.outerHeight()) / 2)
-        + $(window).scrollTop())
-        + "px");
-    overviewDialog.jq.css("left", Math.max(0, (($(window).width() - overviewDialog.jq.outerWidth()) / 2)
-        + $(window).scrollLeft())
-        + "px");
-
-    // on click event (what should happen when we click on the image)
-    var onclickevent = function getClickPosition(e) {
-      var parentPosition = functions.getPosition(e.currentTarget);
-      var xPosition = e.clientX - parentPosition.x;
-      var yPosition = e.clientY - parentPosition.y;
-
-      var imgWidth = self.overviewImageTag.offsetWidth;
-
-      var currentRatio = imgWidth / self.overviewImage.width;
-
-      var xNormal = xPosition / currentRatio;
-      var yNormal = yPosition / currentRatio;
-      var point = {
-        x : xNormal,
-        y : yNormal
-      };
-
-      var link = null;
-      for (var i = 0; i < self.overviewImage.links.length; i++) {
-        if (functions.pointInsidePolygon(point, self.overviewImage.links[i].polygon)) {
-          if (link === null) {
-            link = self.overviewImage.links[i];
-          } else {
-            logger.warn("More than one link found. Skipping");
-          }
-        }
-      }
-      if (link !== null) {
-        if (link.type === "OverviewModelLink") {
-          logger.debug("Opening model from overview. ModelId: " + link.modelLinkId);
-          logger.debug("link coordinates [" + link.idObject + "]: " + link.latLng);
-          // TODO min zoom value can be different for every map, it should be
-          // changed in the future
-          self.showModel(link.modelLinkId, link.latLng, link.zoomLevel + self.getConfiguration().MIN_ZOOM);
-          overviewDialog.hide();
-        } else if (link.type === "OverviewImageLink") {
-          logger.debug("Opening image from overview. ImageId: " + link.imageLinkId);
-          self.showOverview(link.imageLinkId);
-        } else if (link.type === "OverviewSearchLink") {
-          logger.debug("Sending search query. Query: " + link.query);
-          GuiConnector.search(link.query);
-          overviewDialog.hide();
-        } else {
-          logger.warn("Unknown type of link: " + link.type + ". Don't know what to do... LinkId: " + link.idObject);
-        }
-      }
-    };
-
-    this.overviewImageTag.onclick = onclickevent;
-
-    // resize canvas where on mouse over highligh will appear
-    var canvas = document.getElementById("canvasDebug");
-    canvas.width = width;
-    canvas.height = height;
-    canvas.onclick = onclickevent;
-
-    // in debug mode draw clickable shapes
-    if (this.isDebug()) {
-      this.drawClickableShapes(canvas, ratio);
-    }
-
-    this.overviewImage.mousePos = {
-      x : 0,
-      y : 0
-    };
-
-    // this listener should be called when mouse moves over image, it purpose is
-    // to change coursor to pointer when mouse enters clickable polygon and back
-    // to normal when mouse leaves such region
-    var onmousemove = function getMouseOverPosition(e) {
-      var position = functions.getPosition(e.currentTarget);
-      position.x = e.clientX - position.x;
-      position.y = e.clientY - position.y;
-
-      var imgWidth = self.overviewImageTag.offsetWidth;
-
-      var currentRatio = imgWidth / self.overviewImage.width;
-
-      var xNormal = position.x / currentRatio;
-      var yNormal = position.y / currentRatio;
-      var point = {
-        x : xNormal,
-        y : yNormal
-      };
-
-      if (self.overviewImage.mousePos.x !== position.x || self.overviewImage.mousePos.y !== position.y) {
-        self.overviewImage.mousePos = position;
-        var link = null;
-        for (var i = 0; i < self.overviewImage.links.length; i++) {
-          if (functions.pointInsidePolygon(point, self.overviewImage.links[i].polygon)) {
-            link = self.overviewImage.links[i];
-          }
-        }
-        if (link === null) {
-          e.currentTarget.style.cursor = "auto";
-        } else {
-          e.currentTarget.style.cursor = "pointer";
-        }
-      }
-    };
-
-    // onmousemove listener should be assigned to canvas (which is on top of the
-    // image) and overviewimage (just in case something went wrong with resizing
-    // canvas)
-    canvas.onmousemove = onmousemove;
-    this.overviewImageTag.onmousemove = onmousemove;
-  }
-};
-