Error: <rect> attribute (x,y,width,height): Expected length, "NaN".NaN

[John Holiver]

Hi people,

I come here with a problem that's way harder than my last one. I built with Snap a fiddle where one can draw a squared area. The fiddle goes below in the link:

https://jsfiddle.net/johnholiver/e40dLb7f/4/

The problem is that anytime the mouse moves I get 129462308561056078640184601846871 errors, altho the functionality works perfect.

It keeps saying that attribute is NaN BUT I tried to put a a condition to enter animate and not even that worked.

if (!isNaN(newX) && !isNaN(newY) && !isNaN(dx) && !isNaN(dy))

Also, it surely is related to animate since commenting that would completely avoid the errors.

Any ideas how to fix it?

[Ian]

I don't get that when I mouse move, but there are bugs in the fiddle like clickBox instead of clickBlock

But ultimately even if I fix that, I have no idea whats supposed to happen. It just shows as an empty rect with the border going red.

So first I would fix the fiddle, break it down to its minimum code, remove any functionality that isn't required to highlight the problem, and then explain what you expect to happen.

[John Holiver]

Yeah, I saw today that the fiddle I linked was a non updated version, when I clicked it showed me that I had an unsaved draft -.-" sorry!

https://jsfiddle.net/johnholiver/e40dLb7f/11/

The link above will make waaaay more sense! It also has been reduced to the almost essential for the problem to show up.

What you can do here is click-n-drag to create a box. 

The problem is that upon mousemove i call clickbox.animate and that function is throwing a gazillion errors to the browser. One can see those by using chrome or firefox inspect function.

For each property I update (x,y,width,height), an error pops saying that I have passed NaN as a value and eventhough I've tried to only call animate making sure all values werent NaN, it still throws exceptions. The code that makes sure all values are numbers is this if line: 

[Ian]

Well there maybe does look like kind of a bug in Snap, but its a bit of an edge case maybe. I haven't had time to work out where it happens in Snaps code, but can stop it happening by changing your code slightly.

If you change the animation timeout from 0ms to 1ms, it should work ok https://jsfiddle.net/ian_b/e40dLb7f/14/

So it looks like there is a slight bug with animations of 0ms, so my question I guess be wondering if this is just a test case for another problem or if the 1ms workaround is ok. Why run off an animation for a duration of 1ms, and why not set its attributes without an animation that would have 0 duration? eg https://jsfiddle.net/ian_b/e40dLb7f/15/

[John Holiver]

It's not just a test case ^^ I'm building a thing that needs to draw/annotate on top of other svgs, so I thought snap would be cool to use, im just not that good on it xD
Thanks for the help, I've used animate bc of what I have fast learned thru tutorials. Will use .attr to refresh the square from now on.

Cheers!