svg path does not overlap the node?

[ghost]

Hello. Is there a way to ensure that the svg path does not overlap the node?

[jerosoler]

By default the nodes are in a z-index 2. And the connections that have the svg path are in a z-index 0

Are you referring to this?

[ghost]

I know that the z value exists. I want to try to avoid the node itself instead of the z value, but this is something I have to develop myself, right?

[jerosoler]

Yes, you want a different configuration, you will have to modify the library yourself.

Even I do not understand the purpose of your query. Since by default they do not overlap.

[ghost]

Is it possible to modify the svg tag so that it does not overlap with the node and deflect it at a right angle? Do I have to change this part myself?

[jerosoler]

You mean this https://github.com/jerosoler/Drawflow/issues/20#issuecomment-667660280 ?

[ghost]

Hello, I'm back because I have a question. Like the picture above, I don't know how to give curvature to the line. Can you help me?

[jerosoler]

If you are using the previous comment. You have set the value of editor.curvature = 0;

If you are using the previous comment. You have set the value of editor.curvature = 0;

And you have modified the function: editor.createCurvature

View the original function:

  createCurvature(start_pos_x, start_pos_y, end_pos_x, end_pos_y, curvature_value, type) {
    var line_x = start_pos_x;
    var line_y = start_pos_y;
    var x = end_pos_x;
    var y = end_pos_y;
    var curvature = curvature_value;
    //type openclose open close other
    switch (type) {
      case 'open':
        if(start_pos_x >= end_pos_x) {
          var hx1 = line_x + Math.abs(x - line_x) * curvature;
          var hx2 = x - Math.abs(x - line_x) * (curvature*-1);
        } else {
          var hx1 = line_x + Math.abs(x - line_x) * curvature;
          var hx2 = x - Math.abs(x - line_x) * curvature;
        }
        return ' M '+ line_x +' '+ line_y +' C '+ hx1 +' '+ line_y +' '+ hx2 +' ' + y +' ' + x +'  ' + y;

        break
      case 'close':
        if(start_pos_x >= end_pos_x) {
          var hx1 = line_x + Math.abs(x - line_x) * (curvature*-1);
          var hx2 = x - Math.abs(x - line_x) * curvature;
        } else {
          var hx1 = line_x + Math.abs(x - line_x) * curvature;
          var hx2 = x - Math.abs(x - line_x) * curvature;
        }
        return ' M '+ line_x +' '+ line_y +' C '+ hx1 +' '+ line_y +' '+ hx2 +' ' + y +' ' + x +'  ' + y;
        break;
      case 'other':
        if(start_pos_x >= end_pos_x) {
          var hx1 = line_x + Math.abs(x - line_x) * (curvature*-1);
          var hx2 = x - Math.abs(x - line_x) * (curvature*-1);
        } else {
          var hx1 = line_x + Math.abs(x - line_x) * curvature;
          var hx2 = x - Math.abs(x - line_x) * curvature;
        }
        return ' M '+ line_x +' '+ line_y +' C '+ hx1 +' '+ line_y +' '+ hx2 +' ' + y +' ' + x +'  ' + y;
        break;
      default:

        var hx1 = line_x + Math.abs(x - line_x) * curvature;
        var hx2 = x - Math.abs(x - line_x) * curvature;

        return ' M '+ line_x +' '+ line_y +' C '+ hx1 +' '+ line_y +' '+ hx2 +' ' + y +' ' + x +'  ' + y;
    }

  }

You will have to add a "curveto" line to the svg.

[ghost]

I tried to execute the code you sent me. But the shape I want doesn't come out. Is there a way to give curvature to the edges of the path line?

[jerosoler]

For example not a complet example:

    editor.curvature = 0.5;
    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;
      var center_y = ((end_pos_y - start_pos_y)/2)+start_pos_y;
      //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;

      return `
        M ${start_pos_x} ${start_pos_y} 
        L ${center_x-20} ${start_pos_y}
        Q ${center_x} ${start_pos_y} ${center_x} ${center_y-20}
        L ${center_x} ${center_y} 
        Q ${center_x} ${end_pos_y} ${center_x+20} ${end_pos_y}
        L ${center_x+20} ${end_pos_y}
        L ${end_pos_x} ${end_pos_y}
      `
    } 

You will have to modify the number 20 to the value that fits.