Path disapear - Githubissues

RuslanHimikEvchev commented 2 years ago

Hello! https://www.awesomescreenshot.com/video/5918467?key=688922cdf04e2852ea484b5377a25c7d https://www.awesomescreenshot.com/video/5918484?key=48505f9a510d4eee998062b4b4897a92 https://www.awesomescreenshot.com/video/5918486?key=ca69da47f12fa5208e7b6bc869275790

If you use a scaling of 125% or more in Windows, strange behavior of lines appears on the canvas. They disappear in some areas. It was not possible to establish any exact patterns.

At a screen resolution of 1920 × 1080, the bug appears already at 150% of the scale. At 4K resolution, the same is 150%. This is the default frequent scaling in windows for 4k screens.

thanks

jerosoler commented 2 years ago

Hi @RuslanHimikEvchev

Thanks for write.

What browser are you testing with, have you tried more than one?

Have you tried another code? The demo is an example and may include some extra css code.

RuslanHimikEvchev commented 2 years ago

Google Chrome 95.0.4638.69 (latest). Only Google Chrome. Opera, FireFox and Edge - fine

Yes, I've tried a custom implementation, it's not about styles. Perhaps some subtleties of drawing svg that we do not know about

RuslanHimikEvchev commented 2 years ago

Not only Windows. Ubuntu, Mac too. Browser zoom to 110+%

jerosoler commented 2 years ago

mmmm 🤔 It reminds me of this other issue that google changed the behavior: https://github.com/jerosoler/Drawflow/issues/218

I'm going to update chrome to see if I see something.

RuslanHimikEvchev commented 2 years ago

https://www.awesomescreenshot.com/video/5931938?key=c9ce1a256559fcf1a10ab28fbfb8ba41

Simple steps to reproduce.

I am using your example, because its simple to debug for you.

jerosoler commented 2 years ago

I have updated chrome to the latest version.

Fail with the demo: https://jerosoler.github.io/Drawflow/

It does not fail with this other demo: https://jerosoler.github.io/drawflow-vue3-example/

It also does not fail with exte file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.css"
    />
  <script src="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.js"></script>
</head>
<body>
<div id="drawflow"></div>
  <style>
    #drawflow { 
      position: relative;
      text-align:initial;
        width: 100%;
        height: 800px;
        border: 1px solid red;
    }
</style>
<script>
    var id = document.getElementById("drawflow");
    const editor = new Drawflow(id);
    editor.start();

    editor.addNode('aaa', 1, 1, 100, 300, 'aaa', {}, 'aaa' );
    editor.addNode('aaa', 1, 1, 100, 300, 'aaa', {}, 'aaa' );
    editor.addNode('aaa', 1, 1, 100, 300, 'aaa', {}, 'aaa' );
    editor.addNode('aaa', 1, 1, 100, 300, 'aaa', {}, 'aaa' );
    editor.addNode('aaa', 1, 1, 100, 300, 'aaa', {}, 'aaa' );
    editor.addNode('aaa', 1, 1, 100, 300, 'aaa', {}, 'aaa' );
    editor.addNode('aaa', 1, 1, 100, 300, 'aaa', {}, 'aaa' );
    editor.addNode('aaa', 1, 1, 100, 300, 'aaa', {}, 'aaa' );
    editor.addNode('aaa', 1, 1, 100, 300, 'aaa', {}, 'aaa' );
    editor.addNode('aaa', 1, 1, 100, 300, 'aaa', {}, 'aaa' );
    editor.addNode('aaa', 1, 1, 100, 300, 'aaa', {}, 'aaa' );
    editor.addNode('aaa', 1, 1, 100, 300, 'aaa', {}, 'aaa' );
    editor.addNode('aaa', 1, 1, 100, 300, 'aaa', {}, 'aaa' );
    editor.addNode('aaa', 1, 1, 100, 300, 'aaa', {}, 'aaa' );
    editor.addNode('aaa', 1, 1, 100, 300, 'aaa', {}, 'aaa' );

  </script>

</body>
</html>

So I understand that it is with the demo some kind of css problem ...

Can you try the other tests?

RuslanHimikEvchev commented 2 years ago

Change .parent-drawflow { display: flex; overflow: hidden; touch-action: none; outline: 0 }

To .parent-drawflow { display: flex; overflow: visible; touch-action: none; outline: 0 }

in drawflow.css (or drawflow.min.css)

jerosoler commented 2 years ago

Have you tried it with the other demos if it also happens to you?

If I modify the value that comments the nodes are overlapped:

RuslanHimikEvchev commented 2 years ago

Only in this example https://jerosoler.github.io/Drawflow/

jerosoler commented 2 years ago

Then we can rule out failure of the library and yes of the demo.

RuslanHimikEvchev commented 2 years ago

In https://jerosoler.github.io/drawflow-vue3-example/ Add <el-input :rows="1" type="textarea" placeholder="Please input" /> After <el-button type="info" size="small" @click="drawer = true">Edit</el-button> In node2.vue

Drag and drop more than 4 blocks after default two blocks.

https://www.awesomescreenshot.com/video/5957823?key=a0ae2997a36e67b706b4ad37292f6bb5

jerosoler commented 2 years ago

Hi @RuslanHimikEvchev

Thanks for the pull request! But I think I have found a simpler solution.

Can you try it?

Solved with one line of css:

.drawflow {
  perspective: 0;
}

Thanks in advance.

RuslanHimikEvchev commented 2 years ago

OMG! Its working! Thanks!

jerosoler / Drawflow

Path disapear #292