search

maschek / imgmap

Javascript based imagemap editor
https://www.maschek.hu/imagemap/
GNU General Public License v2.0
59 stars 33 forks source link

Shape is offset from the cursor in IE10 #68

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago 
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 Werti...@gmail.com on 22 Mar 2013 at 11:12

Attachments:

GoogleCodeExporter commented 9 years ago 
Can be reproduced on the online image map editor as well.

Original comment by adam.mas...@gmail.com on 22 Mar 2013 at 12:45

GoogleCodeExporter commented 9 years ago 
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 Werti...@gmail.com on 22 Mar 2013 at 1:02

GoogleCodeExporter commented 9 years ago 
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 adam.mas...@gmail.com on 23 Mar 2013 at 3:28

GoogleCodeExporter commented 9 years ago 
[deleted comment]
GoogleCodeExporter commented 9 years ago 
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 Werti...@gmail.com on 23 Mar 2013 at 4:59

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

Original comment by Werti...@gmail.com on 24 Mar 2013 at 9:04

GoogleCodeExporter commented 9 years ago 
Thank you. I will incorporate your fix in an upcoming version soon!

Original comment by adam.mas...@gmail.com on 29 Mar 2013 at 7:18

GoogleCodeExporter commented 9 years ago 
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 boy.de.l...@gmail.com on 4 Jun 2013 at 3:37

GoogleCodeExporter commented 9 years ago 
[deleted comment]
GoogleCodeExporter commented 9 years ago 
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 boy.de.l...@gmail.com on 5 Jun 2013 at 10:22

GoogleCodeExporter commented 9 years ago 
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 pjh.nieu...@gmail.com on 30 Aug 2013 at 6:02

GoogleCodeExporter commented 9 years ago 
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 blo...@gmail.com on 24 Feb 2014 at 11:39

GoogleCodeExporter commented 9 years ago 
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 blo...@gmail.com on 24 Feb 2014 at 2:04