Commit b052e6c6 authored by Piotr Gawron's avatar Piotr Gawron
Browse files

overview dialog extracted to separate class

parent 6fc2f18c
"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;
"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;
......@@ -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) {
......
......@@ -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() {
......
"use strict";
var ControlType = {
COMMENT_CHECKBOX : "COMMENT_CHECKBOX",
SUBMAP_DIALOGS : "SUBMAP_DIALOGS",
LOGO_IMG : "LOGO_IMG",
LOGO_2_IMG : "LOGO_2_IMG",
......
......@@ -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;
}
};
CustomMap.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();
}
};
CustomMap.prototype.showModel = function(id, point, zoomLevel) {
if (point !== undefined) {
this.setCenter(id, point);
......
......@@ -110,7 +110,7 @@ CustomMapOptions.prototype.setMapDiv = function(mapDiv) {
};
CustomMapOptions.prototype.isDebug = function() {
return this.debug === true;
return this._debug === true;
};
module.exports = CustomMapOptions;