315592 - Mousemove events in SVG don't react in a way you expect

Status: RESOLVED INVALID

(Core :: SVG, defect)

Description

[John Ophof]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8b5) Gecko/20051006 Firefox/1.4.1
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8b5) Gecko/20051006 Firefox/1.4.1

Contact me I have test files which I can send

Reproducible: Always

Comment 1

[John Ophof]

Attachment: Run test.svg from a website

It shows lines by clicking on the line. Handles shows up but dragging them don't react in a way you should expect. In ASV 3 it works completely diffrent. I want to make code that runs in both SVG rendering engines.

Comment 2

[Jonathan Watt [:jwatt]]

A single file of *minimal size* would be a lot more useful than a > 100KB JS file plus two others. Also before commenting further please update to the latest FF1.5 release candidate and test in that. See

  http://www.mozilla.org/projects/firefox/

(Tip: avoid getCTM with extreme predjudice - use getScreenCTM)

Comment 3

[John Ophof]

Attachment: Test file for event handling

Hi,

In new attachment smaller than yeserday, I added comments. Search for @@. I did run this test also on former version deerpark, with normal results. The code is out of a library. It calls only a few routines. After click handles shows up, then code for handle is fired. The mouse move events fired by Handle.prototype.mousedown=function(e){. The mouser object takes care of catching the events.

John

Comment 4

[John Ophof]

I test it with Firefox RC2. Delete } from line 1574 out of 2dsrc.js (sorry).

Comment 5

[John Ophof]

On line 141     this.svgNode.addEventListener("mousemove",this,false); the mouse move event for the hanles of the lines are installed. This events is not called or ages later. The routine Mouser.prototype.mousemove isn't executed. In ASV 3 this demo runs fine.

John

Comment 6

[Jonathan Watt [:jwatt]]

Comment on attachment 202407 [details]
Test file for event handling

Re test09112005.zip. This works fine for me (after removing the alert which was throwing up an insane number of popops). I don't see any @@ in the file and I your line numbers are *way* off so I have no idea what } should be removed.

Please explain what you mean by "don't react in a way you should expect". That's so vague I have no idea what you mean.

Comment 7

[Jonathan Watt [:jwatt]]

I've found that the mousemove event isn't fired for the node the event listeners are added to in my FF1.5 rc3 install, but it is in my home spun branch build!! To be honest I wouldn't expect events to fire because the painted area of the node isn't big enough. Nevertheless it's possible to get this working by adding the event listeners to the document element instead of the node. That way whenever the cursor moves (as long as it's over a painted part of the canvas) we should get the mousemove event. So:

Mouser.prototype.beginDrag=function(e){
    this.currentNode=e.target;
    var svgPoint=this.getUserCoordinate(this.currentNode,e.clientX,e.clientY);
    this.lastPoint=new Point2D(svgPoint.x,svgPoint.y);
  // changed the following two lines:
    svgDocument.documentElement.addEventListener("mouseup",this,false);
    svgDocument.documentElement.addEventListener("mousemove",this,false);
    svgDocument.documentElement.appendChild(this.svgNode);
    this.svgNode.setAttributeNS(null,"display","inline");
}
Mouser.prototype.mouseup=function(e){
    this.lastPoint=null;
    this.currentNode=null;
  // changed the following two lines:
    svgDocument.documentElement.removeEventListener("mouseup",this,false);
    svgDocument.documentElement.removeEventListener("mousemove",this,false);
    this.svgNode.setAttributeNS(null,"display","none");
}

Comment 8

[Jonathan Watt [:jwatt]]

So in summary I think this is invalid. UI's cannot dispatch a mousemove event for every pixel that the mouse cursor moves over (even if the operating system gives them that information) or else it would kill performance. As a result consecutive mousemove events may have large gaps between their positions. Adding a mousemove event listener to a small graphical object to implement dragging of that object is therefore highly likely to fail. The likelihood of a mouse event falling outside the graphical object during dragging when the user moves the mouse quickly is high, and as soon as that happens the mousemove event will target a different element and dragging code will no longer be called.

Instead of implementing dragging by registering an event listener on the object being dragged, I'd recommend registering the event listener on the root element.