Shape is offset from the cursor in IE10

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Open the TinyMCE 3 example (example_tiny3.html) in Internet Explorer 10 
(Windows 7 or Windows 8)
2. Start the Image Map Editor
3. Start making a rectangle at the middle of the image.
4. Notice how the origin of the shape and the "end" is way off the mouse's 
position

What is the expected output? What do you see instead?
I expect the shape to follow the cursor, instead of it being offset


What version of the product are you using? On what browser/operating system?
imgmap_2.2_108

Please provide any additional information below.
The problem seems to originate from window.event.x and window.event.y not being 
relative to the image any more. E.g. at approximately 0,0 on the image, x is 
-140 and y is -76.
window.event.offsetX and window.event.offsetY however seems to be the correct 
value now. 

Original issue reported on code.google.com by [email protected] on 22 Mar 2013 at 11:12

Attachments:

• [Online Image Map Editor - Example Tiny3 - Windows Internet Explorer_2013-03-22_12-11-23.png](https://storage.googleapis.com/google-code-attachments/imgmap/issue-68/comment-0/Online Image Map Editor - Example Tiny3 - Windows Internet Explorer_2013-03-22_12-11-23.png)

[GoogleCodeExporter]

Can be reproduced on the online image map editor as well.

Original comment by [email protected] on 22 Mar 2013 at 12:45

• Changed state: Accepted
• Added labels: ****
• Removed labels: ****

[GoogleCodeExporter]

Thank you for accepting the issue!
Are you still maintaining the code? I'm afraid the temporary solution I 
implemented is very wonky (There's something I am not accounting for 
correctly). 

I added an isMSIE10 check and implemented the following code in the three 
locations you use window.event.x and .y (fx. img_mouseover(e)): 
this.isMSIE10   = this.isMSIE && (ua.indexOf('MSIE 10')   != -1);
...
if (this.isMSIE10) {
    x = window.event.offsetX;
    y = window.event.offsetY;
    if(this.is_drawing) {
        xdiff = x - this.memory[this.currentid].downx;
        ydiff = y - this.memory[this.currentid].downy;
    }
}

--

When I move the cursor inside the area or another area it jumps around however

Original comment by [email protected] on 22 Mar 2013 at 1:02

• Added labels: ****
• Removed labels: ****

[GoogleCodeExporter]

I started to isolate a test case here:
http://jsfiddle.net/HzFdW/2/

I think the code:
        x = (this.isMSIE) ? (window.event.x - this.pic.offsetLeft) : (e.pageX - pos.x);
        y = (this.isMSIE) ? (window.event.y - this.pic.offsetTop)  : (e.pageY - pos.y);


should be changed to use 

window.event.clientX and clientY instead

Original comment by [email protected] on 23 Mar 2013 at 3:28

• Added labels: ****
• Removed labels: ****

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

I couldn't quite get the above code to work (the area was still 161px below the 
cursor)
I then measured the distance from the image to the top of the iframe, and guess 
what, it was exactly 161px. 

Logging this.pic.offsetLeft and offsetTop revealed that they were both 0. It 
turn out pic_container has the correct offsetTop and offsetLeft now however. 

Changing my code to the following finally made it work: 

    var x = (this.isMSIE) ? (window.event.clientX - this.pic_container.offsetLeft) : (e.pageX - pos.x);
    var y = (this.isMSIE) ? (window.event.clientY - this.pic_container.offsetTop)  : (e.pageY - pos.y);

So far, I've tested it in IE9 and IE10 with success. 
I'm going to test it in IE8 and IE7 later today. 

Thank you very much!

Original comment by [email protected] on 23 Mar 2013 at 4:59

• Added labels: ****
• Removed labels: ****

[GoogleCodeExporter]

I can confirm that all shapes seems to be working in IE7-IE10, with the changes 
in my previous comment. 

Original comment by [email protected] on 24 Mar 2013 at 9:04

• Added labels: ****
• Removed labels: ****

[GoogleCodeExporter]

Thank you. I will incorporate your fix in an upcoming version soon!

Original comment by [email protected] on 29 Mar 2013 at 7:18

• Changed state: Started
• Added labels: ****
• Removed labels: ****

[GoogleCodeExporter]

I changed

var x = (this.isMSIE) ? (window.event.x - this.pic.offsetLeft) : (e.pageX - 
pos.x);
var y = (this.isMSIE) ? (window.event.y - this.pic.offsetTop)  : (e.pageY - 
pos.y);

in

var x = (this.isMSIE) ? (window.event.clientX - this.pic_container.offsetLeft) 
: (e.pageX - pos.x);
var y = (this.isMSIE) ? (window.event.clientY - this.pic_container.offsetTop)  
: (e.pageY - pos.y);

at img_mouseup and img_mousedown but it's a bit lagy. Also dragging the 
rectangle around in IE 10 at Windows 7 doesn't work.

Original comment by [email protected] on 4 Jun 2013 at 3:37

• Added labels: ****
• Removed labels: ****

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Sorry forgot to replace the line at img_mousemove. I can confirm that all 
shapes seems to be working in IE8-IE10, with the changes mentioned above. Maby 
we can work together on the version for TinyMCE 4.

Original comment by [email protected] on 5 Jun 2013 at 10:22

• Added labels: ****
• Removed labels: ****

[GoogleCodeExporter]

In our project we are also using this component. We had also problems with IE9 
and IE10, but the given solution here was not enough for us. In our situation, 
the component must be scrolled into view because it is a longer page and we are 
using Twitter Bootstrap for the layout. The correct solution for us, are using 
these lines in the img_mouseup, img_mousemove and img_mousedown events:

var x = (this.isMSIE) ? (window.event.clientX + 
document.documentElement.scrollLeft - pos.x) : (e.pageX - pos.x);
var y = (this.isMSIE) ? (window.event.clientY + 
document.documentElement.scrollTop - pos.y)  : (e.pageY - pos.y);

I have tested it in IE9 and IE10.

Original comment by [email protected] on 30 Aug 2013 at 6:02

• Added labels: ****
• Removed labels: ****

[GoogleCodeExporter]

In which file do you need to replace this piece of code Werti and Boy? I did 
replace it in imgmap.js but I've got still the same problem.
KR!

Original comment by [email protected] on 24 Feb 2014 at 11:39

• Added labels: ****
• Removed labels: ****

[GoogleCodeExporter]

I've found. Standard, the popup.html file, refers to imgmap_packed.js and not 
to imgmap.js. After changing this, it works fine.
KR!

Original comment by [email protected] on 24 Feb 2014 at 2:04

• Added labels: ****
• Removed labels: ****