Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
minerva
core
Commits
b052e6c6
Commit
b052e6c6
authored
Feb 03, 2017
by
Piotr Gawron
Browse files
overview dialog extracted to separate class
parent
6fc2f18c
Changes
27
Hide whitespace changes
Inline
Side-by-side
frontend-js/src/main/js/gui/AbstractGuiElement.js
0 → 100644
View file @
b052e6c6
"
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
0 → 100644
View file @
b052e6c6
"
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
View file @
b052e6c6
...
@@ -3,12 +3,12 @@
...
@@ -3,12 +3,12 @@
/* exported logger */
/* exported logger */
var
GuiConnector
=
require
(
'
../GuiConnector
'
);
var
GuiConnector
=
require
(
'
../GuiConnector
'
);
var
ObjectWithListeners
=
require
(
'
.
.
/
ObjectWithListeners
'
);
var
AbstractGuiElement
=
require
(
'
./
AbstractGuiElement
'
);
var
logger
=
require
(
'
../logger
'
);
var
logger
=
require
(
'
../logger
'
);
function
Panel
(
params
)
{
function
Panel
(
params
)
{
ObjectWithListeners
.
call
(
this
,
params
);
AbstractGuiElement
.
call
(
this
,
params
);
var
self
=
this
;
var
self
=
this
;
...
@@ -18,7 +18,7 @@ function Panel(params) {
...
@@ -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
.
constructor
=
Panel
;
Panel
.
prototype
.
disablePanel
=
function
(
message
)
{
Panel
.
prototype
.
disablePanel
=
function
(
message
)
{
...
...
frontend-js/src/main/js/map/AbstractCustomMap.js
View file @
b052e6c6
...
@@ -963,7 +963,7 @@ AbstractCustomMap.prototype.setDebug = function(debug) {
...
@@ -963,7 +963,7 @@ AbstractCustomMap.prototype.setDebug = function(debug) {
};
};
AbstractCustomMap
.
prototype
.
isDebug
=
function
()
{
AbstractCustomMap
.
prototype
.
isDebug
=
function
()
{
return
this
.
debug
===
true
;
return
this
.
_
debug
===
true
;
};
};
AbstractCustomMap
.
prototype
.
getTopLeftLatLng
=
function
()
{
AbstractCustomMap
.
prototype
.
getTopLeftLatLng
=
function
()
{
...
...
frontend-js/src/main/js/map/ControlType.js
View file @
b052e6c6
"
use strict
"
;
"
use strict
"
;
var
ControlType
=
{
var
ControlType
=
{
COMMENT_CHECKBOX
:
"
COMMENT_CHECKBOX
"
,
SUBMAP_DIALOGS
:
"
SUBMAP_DIALOGS
"
,
SUBMAP_DIALOGS
:
"
SUBMAP_DIALOGS
"
,
LOGO_IMG
:
"
LOGO_IMG
"
,
LOGO_IMG
:
"
LOGO_IMG
"
,
LOGO_2_IMG
:
"
LOGO_2_IMG
"
,
LOGO_2_IMG
:
"
LOGO_2_IMG
"
,
...
...
frontend-js/src/main/js/map/CustomMap.js
View file @
b052e6c6
...
@@ -45,10 +45,6 @@ function CustomMap(options) {
...
@@ -45,10 +45,6 @@ function CustomMap(options) {
this
.
customizeGoogleMapView
(
options
.
getMapDiv
());
this
.
customizeGoogleMapView
(
options
.
getMapDiv
());
this
.
createBelt
();
this
.
createMapMenu
();
this
.
createMapChangedCallbacks
();
this
.
createMapChangedCallbacks
();
this
.
overlayCollections
=
[];
this
.
overlayCollections
=
[];
...
@@ -127,15 +123,6 @@ CustomMap.prototype.createLogo = function() {
...
@@ -127,15 +123,6 @@ CustomMap.prototype.createLogo = function() {
this
.
getGoogleMap
().
controls
[
google
.
maps
.
ControlPosition
.
RIGHT_BOTTOM
].
push
(
logoControlDiv
);
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
()
{
CustomMap
.
prototype
.
clearOverlays
=
function
()
{
for
(
var
overlayName
in
this
.
overlayCollections
)
{
for
(
var
overlayName
in
this
.
overlayCollections
)
{
if
(
this
.
overlayCollections
.
hasOwnProperty
(
overlayName
))
{
if
(
this
.
overlayCollections
.
hasOwnProperty
(
overlayName
))
{
...
@@ -271,25 +258,6 @@ CustomMap.prototype.openLayoutByName = function(name) {
...
@@ -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
)
{
CustomMap
.
prototype
.
registerSource
=
function
(
overlayCollection
)
{
var
self
=
this
;
var
self
=
this
;
...
@@ -569,209 +537,6 @@ CustomMap.prototype.removeSelection = function() {
...
@@ -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
;
}
};