Connector styles gets distorted when using the browser Zoom-in Zoom-Out options

Aravinda93 commented 1 year ago

@jerosoler I facing some issues with styles of the connector between the nodes when browser zoom-in and zoom-out option is used.

Steps to reproduce:

Set the browser zoom to around 70/80 %.
Draw the nodes and connector between them.
After the design increase the browser zoom to 100.
Now, we can see the gap between the Node and connector.

I have added the code sample for the same with styles in my CodeSandBox: https://codesandbox.io/p/sandbox/cocky-matan-kvqnu?file=%2Fpages%2Findex.vue. Can you please have a look and let me know what am I missing here?

Following is the GIF file for the same: CPT2304271310-2240x1163

@jerosoler Also, could you please let me know how can I resize the node after adding them to canvas? I would like to add an option for each added node in canvas which users can use to resize the node based on their need, how to achieve this using the drawflow?

jerosoler commented 1 year ago

I see that you are using version 0.0.53. Try updating to 0.0.59, which is the latest. Made css changes in 56 with some similar problem.

To enlarge the nodes you could look at some library as moveable. https://github.com/daybrush/moveable

Aravinda93 commented 1 year ago

@jerosoler Thanks a lot for your response, I tried to update the library but did not resolve the issue. I am still seeing the gap between the nodes, the gap only disappears when I move the node. Can you please suggest how to fix this?

I will look into Moveable library and add it to resize the nodes.

jerosoler commented 1 year ago

You could force the refresh of the connections with the method updateConnectionNodes(id)

editor.updateConnectionNodes('node-5');

With a blank example you get the error, could it be because of the css?

Example without extra css:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <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>
    <style>
      #drawflow {
        position: relative;
        width: 100%;
        height: 800px;
        border: 1px solid red;
      }
      </style>
  </head>
  <body>
    <div>
        <div id="drawflow"></div>  
    </div>
    <script>
    var id = document.getElementById("drawflow");

    const editor = new Drawflow(id);
    editor.start();
    const nodeIdA = editor.addNode('test1', 1, 1, Math.floor(Math.random() * 1920) + 1, Math.floor(Math.random() * 800) + 1, 'test1', {}, '<div>Hi!!</div>');
    const nodeIdB = editor.addNode('test1', 1, 1, Math.floor(Math.random() * 1920) + 1, Math.floor(Math.random() * 800) + 1, 'test1', {}, '<div>Hi!!</div>');
    const nodeIdC = editor.addNode('test1', 1, 1, Math.floor(Math.random() * 1920) + 1, Math.floor(Math.random() * 800) + 1, 'test1', {}, '<div>Hi!!</div>');
    console.log(nodeIdA);
    console.log(nodeIdB);
    console.log(nodeIdC);

</script> 
  </body>
</html>

Aravinda93 commented 1 year ago

@jerosoler Thanks a lot for all the support, I tried to check every style to confirm which style is causing the problem and seems like this was the culprit:

.drawflow .drawflow-node {
  background: white;
  width: 10%;
}

I have removed it and it seems to be working. Thanks a lot for all the support, closing the issue.

jerosoler / Drawflow

Connector styles gets distorted when using the browser Zoom-in Zoom-Out options #684