borkdominik / bigER

Entity Relationship Diagram modeling tool realized as a language server that is distributed as a VS Code extension.
https://marketplace.visualstudio.com/items?itemName=BIGModelingTools.erdiagram
MIT License
106 stars 13 forks source link

Rendering of the edges seems to work only in a certain area #29

Closed SchmiedHammer closed 1 year ago

SchmiedHammer commented 2 years ago

The rendering of the edges seems to work only in a certain area of the diagram view. In the screenshot, the entity E1 was dragged to the left side of the diagram view until the circle on the end of the edge started to disappear. It appears this phenomenon is in relation to the size of the initially rendered diagram.

image
Aksem commented 2 years ago

@SchmiedHammer, could you please help to reproduce this problem? I've checked the current main and #27 and couldn't find a view with circles.

SchmiedHammer commented 2 years ago

The circle is part of the Bachman notation. You can use the following BasicExample for the textual editor to reproduce the issue, but the problem is not only restricted to the circle of the Bachman notation. Every notation with a custom rendering (Crow's Foot, Bachman, UML) has the same problem when the elements of the diagram are moved apart.

erdiagram BasicExample // ER model notation=bachman

// entities entity Customer { id: int key name: string } entity Order { order_number: int key price: double }

// one-to-many relationship relationship Places { Customer[1] -> Order[1] }

Aksem commented 2 years ago

I've got it. First, the problem is not related to the routing of edges because routes are always correct, and they are also rendered correct (even if a circle disappears, a line is still fully visible), but to "edge additions" like circles. They begin to disappear if we move them so that at least one of the coordinates is negative. The reason is that they are wrapped in <svg> element, which defines a new viewport and shows children with only positive coordinates by default. If you wrap the elements only to group them, I would recommend using <g> instead(it works, tested). If you need some features of <svg>, then it needs additional parameters to solve the problem. One working workaround is setting 'overflow: visible' for <svg>, but I don't think it's a good idea, only if it's one working solution.

plglaser commented 1 year ago

Thanks for pointer, the issue was indeed fixed by wrapping the views in <g> instead of <svg> tags (e.g., see here).

The fix for this bug is already available in the latest release, thus, the issue is closed.