Misaligned routes when chrome zoom is not 100%

[TLeiter]

When user has a different zoom factor in Chrome, the routes are not alligned.

The following example was done with the demo application:

[jerosoler]

Uhmmm. What is your version of crhome?

[TLeiter]

Last one Version 92.0.4515.107 (Official Build) (64-bit)

[TLeiter]

Zoom at 150% works fine, but 125% not.

[jerosoler]

Work in 125%

This I think could be due to a browser problem rather than a library problem.

With the library you can set a zoom.

[Fr1411]

i have the same problem with chrome Versión 92.0.4515.107 (Build oficial). No zoom.

zoom 80% its works

[jerosoler]

@Fr1411 If you move any node, are they still wrong?

I see the images of the demo. The same thing happens without the demo.

[jerosoler]

I just installed the latest version and I see that it also happens.

[Fr1411]

@jerosoler yes! if i move any node it´s the same. In my project the situation is equal

[Fr1411]

@jerosoler Do you think this problem will be solved?

[Ammy22]

Temporary fix is

[jerosoler]

Fix in new version 0.0.48 https://github.com/jerosoler/Drawflow/releases/tag/0.0.48

Removed transform tranlate from connection.

The new css looks like this:

.drawflow .connection {
  position: absolute;
  pointer-events: none;
}
.drawflow .connection .main-path {
  fill: none;
  stroke-width: 5px;
  stroke: steelblue;
  pointer-events: all;
}
.drawflow .connection .main-path:hover {
  stroke: #1266ab;
  cursor: pointer;
}

.drawflow .connection .main-path.selected {
  stroke: #43b993;
}

.drawflow .connection .point {
  cursor: move;
  stroke: black;
  stroke-width: 2;
  fill: white;
  pointer-events: all;
}

Update Demo page

[Ammy22]

thank you so much for fixing it

---

From: Jero Soler @.> Sent: 04 August 2021 22:02 To: jerosoler/Drawflow @.> Cc: Ammy @.>; Comment @.> Subject: Re: [jerosoler/Drawflow] Misaligned routes when chrome zoom is not 100% (#218)

Fix in new version 0.0.48 https://github.com/jerosoler/Drawflow/releases/tag/0.0.48

Removed transform tranlate from connection.

The new css looks like this:

.drawflow .connection { position: absolute; pointer-events: none; } .drawflow .connection .main-path { fill: none; stroke-width: 5px; stroke: steelblue; pointer-events: all; } .drawflow .connection .main-path:hover { stroke: #1266ab; cursor: pointer; }

.drawflow .connection .main-path.selected { stroke: #43b993; }

.drawflow .connection .point { cursor: move; stroke: black; stroke-width: 2; fill: white; pointer-events: all; }

Update Demo page

— You are receiving this because you commented. Reply to this email directly, view it on GitHubhttps://github.com/jerosoler/Drawflow/issues/218#issuecomment-892801905, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AN6MZCSQBXWQ6MOBLDQWWOLT3FTQFANCNFSM5A7QMZHA. Triage notifications on the go with GitHub Mobile for iOShttps://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Androidhttps://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email.

[Fr1411]

Thank you!