Issue with Connection Bounding Box

[prog-r-amer]

Hi,

I have an issue with giving the connections hover elements, because of the bounding box of the svg.

.main-path:hover { stroke: green !important; }

This doesn't work everywhere. If I give svg an absolute size like 10000px it works in a bigger area, but not when you translate the area. Can you give the svg the width and height properties according do the path inside it, so hover / onclick works everywhere?

[Ni55aN]

As I remember, SVG with large sizes will be overlayed on frames (from comment-plugin)

It seems that this is a bug with SVG, since the hover zone does not correspond to the actual size of the SVG

[prog-r-amer]

It goes a bit outside of the size of the svg, but it always works when the svg is bigger than the path. I would still appreciate an option to make the svg size bigger, since I don't use the comment plugin myself.

[prog-r-amer]

You were right, even if I set the svg size to the same size as the node editor hover doesn't always work. Do you have any suggestions how I get the hover to work 100% of the time?

[Ni55aN]

I don't. Seems like a bug in SVG, since I have not found a logical explanation for this behavior. Moreover, if the SVG size is too small, the coordinates of a connections may offset. This happens on all WebKit browsers.

[Ni55aN]

I will be grateful if someone finds examples with the reproduction of such behavior on a regular SVG (outside the framework)

[prog-r-amer]

I don't believe it's a bug in svg, I only get it within rete. Could it be something with drag or onclick events not propagating correctly and because of that the element doesn't get the mouseover event?

[Ni55aN]

@prog-r-amer I have reproduced the bug: https://codepen.io/Ni55aN/pen/jJGVYe

Anyway, starting from rete-connetion-plugin@0.5.0-rc.1 it was fixed

[prog-r-amer]

wow, thanks mate. I only have 1 issue now after upgrading: without

.connection {width: auto; height: auto}

it looks like this: https://imgur.com/a/mkHsqgY

I don't get the hover bug anymore though and this css fixes it for me. Just wanted to report it.

[prog-r-amer]

Ok, very rarely I still manage to not get hover working right, but it's far better than before.

[Ni55aN]

Maybe you have an inherited styles?

[prog-r-amer]

By the way, with

pointer-events: all; your codepen works bugfree for both paths.

[prog-r-amer]

No, it's with the 1px width and height, that it doesn't work.

[Ni55aN]

Is the example have any issues?

[prog-r-amer]

On my mobile phone it looks the same as the example I sent you. On my desktop pc it works.

[Ni55aN]

What is your mobile OS and browser?

[prog-r-amer]

Android with Chrome

[Ni55aN]

It's strange. I don't have any issues on Android 7.0 with Chrome 72

[prog-r-amer]

For Reference: https://imgur.com/a/3zuY7Bx

Chrome Version is 72 too.

[prog-r-amer]

Why do you set the width and height for the svg? It sets the ratio of the svg, and I think this is what causes the bug in some browsers.

I think you should set the width and height of the absolute positioned container, and give the svg no width and height attributes. This might also solve the still sometimes occuring hover bug, if you set the container to the actual dimensions of the svg, although I am not sure about that.

[Ni55aN]

Why do you set the width and height for the svg?

in some cases SVG may overlap other elements

I think you should set the width and height of the absolute positioned container, and give the svg no width and height attributes.

This doesn't work. SVG will still overlap

[prog-r-amer]

Why is it not allowed to overlap? And in the Image you posted the width and height are still 1px.

[Ni55aN]

Why is it not allowed to overlap?

it will blocks a mouse events

And in the Image you posted the width and height are still 1px.

with of div, not SVG

[prog-r-amer]

You can control the mouse events with pointer-events property of elements.

[Ni55aN]

pointer-events none doesn't working with root SVG

[prog-r-amer]

Today I learned...

[bfritscher]

I also have the bug on my desktop. The svg element bounding box is fine but the coordinates are wrong due to scaling factor of the HDPI display 150%.

On the other hand the 3D car configurator example works

[Ni55aN]

I can not give an explanation for this, since it looks like a bug at the level of the webkit engine

[Ni55aN]

The temporary solution is adding width: auto; height: auto to SVG, but it may lead to overlaying of other elements

[Ni55aN]

The same issue on Win10 with an interface scale of 125% (the browser has 100%)

[Ni55aN]

I deleted width and height constraints on SVG (which leads to a strange problem with a scaling) I hope that position: absolute and pointer-events: none will solve the issue of clicking on comment/frame in all major browsers

rete-connection-plugin@0.6.4 published https://github.com/retejs/connection-plugin/commit/39c55569fcefeedf134aa7e2017908c0a14d2d62

[Ni55aN]

The most interesting thing is that pointer-events does not work without position: absolute

[Ni55aN]

https://github.com/retejs/connection-plugin/issues/12