How can make straight line between node

gowthm commented 3 years ago

Screenshot_2021-08-31_14-09-03

hello @jerosoler how to make straight line for the node..? and i did not understand where to use it https://github.com/jerosoler/Drawflow/issues/20#issuecomment-667660280

richardbiros commented 3 years ago

Hi, you need to edit src/drawflow.js.

1. There are 3 constants you need to modify (editor.curvature, reroute_curvature_start_end, reroute_curvature). You can find them at the beginning of file (line 12-14 in src/drawflow.js.)

2. There is a function createCurvature (line 601). Replace the content of the function with var center_x = ((end_pos_x - start_pos_x)/2)+start_pos_x; return ' M ' + start_pos_x + ' ' + start_pos_y + ' L '+ center_x +' ' + start_pos_y + ' L ' + center_x + ' ' + end_pos_y + ' L ' + end_pos_x + ' ' + end_pos_y;

jerosoler commented 3 years ago

Hi!

Simple example:

<!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://unpkg.com/drawflow/dist/drawflow.min.js"></script>

    <style>

      #drawflow {
        position: relative;
        width: 600px;
        height: 600px;
        border: 1px solid red;
      }

      </style>
  </head>
  <body>

        <div id="drawflow"></div>  

    <script>

        var id = document.getElementById("drawflow");
        const editor = new Drawflow(id);
        editor.curvature = 0;
        editor.reroute_curvature_start_end = 0;
        editor.reroute_curvature = 0;
        editor.createCurvature = function(start_pos_x, start_pos_y, end_pos_x, end_pos_y, curvature_value) {
        var center_x = ((end_pos_x - start_pos_x)/2)+start_pos_x;
        return ' M ' + start_pos_x + ' ' + start_pos_y + ' L '+ center_x +' ' +  start_pos_y  + ' L ' + center_x + ' ' +  end_pos_y  + ' L ' + end_pos_x + ' ' + end_pos_y;
        }
        editor.start();

        var html = `<input type="text" df-name></div>`;
        var data = { "name": 'aaaa', name2: { name3: "hey"}};

        editor.addNode('github', 1, 2, 150, 100, 'github', data, html);
        editor.addNode('github', 0, 1, 0, 375, 'github', data, '<div>Hey<div id="test" contenteditable="true" df-name2-name3></div></div>');

    </script>

  </body>
</html>

jerosoler / Drawflow

How can make straight line between node #241