Transfer arrow from left to top

[Yusufzai]

Dear jero

How can I transfer the arrow from left to top?

https://prnt.sc/1rgvv3n

[jerosoler]

Hi @Yusufzai

I see that you are using straight lines I guess from here: https://github.com/jerosoler/Drawflow/issues/20

View example: https://github.com/jerosoler/Drawflow/issues/20#issuecomment-801265399

[Yusufzai]

Yes, I am using #20 for straight lines

[jerosoler]

View: https://github.com/jerosoler/Drawflow/issues/20#issuecomment-801265399

[Yusufzai]

Yes it fix the line but not the arrow

https://prnt.sc/1rh7s6l

[jerosoler]

I assume you are using this function to create the arrow. https://github.com/jerosoler/Drawflow/issues/20#issuecomment-669753826

If so, you just have to change, with the new coordinates.

 M '+ (x-11)  + ' ' + y + ' L'+(x-20)+' '+ (y-5)+'  L'+(x-20)+' '+ (y+5)+'Z';

I think you just have to change the values (20,5,11)

[Yusufzai]

I have changed but still the same my new (you have provided) and old coordinates are the same

[jerosoler]

As you understand, I cannot replicate your example. I have neither your css nor your javascript

I have not told you to just copy, but to modify the values as well.

 M '+ (x-11)  + ' ' + y + ' L'+(x-20)+' '+ (y-5)+'  L'+(x-20)+' '+ (y+5)+'Z';

It will have to be modified by something like: This is a simple path with "Lineto and Moveto" https://www.w3schools.com/graphics/svg_path.asp

I think it is better that you learn how to change it than how to copy and paste.

It would be something like this: NOT TESTED

 M '+ x  + ' ' +(y-11) + ' L'+(x-5)+' '+ (y-20)+'  L'+(x-5)+' '+ (y+20)+'Z';

[Yusufzai]

Thanks for your reply jero

But, currently, I have no time to learn SVG I will learn it later but at this time I have to deliver this to development team

Can you help me to fix this

Below is my code :

editor.createCurvature = function(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;
            }

            console.log('iod 1')

            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;
            }

            console.log('iod 2')
            //M0 75H10L5 80L0 75Z

            return ' M '+ line_x +' '+ line_y +' C '+ hx1 +' '+ line_y +' '+ hx2 +' ' + y +' ' + x +'  ' + y +' M '+ (x-11)  + ' ' + y + ' L'+(x-20)+' '+ (y-5)+'  L'+(x-20)+' '+ (y+5)+'Z';
            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;
            }

            console.log('iod 3')
            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;

            console.log('iod 4')

            //return ' M '+ line_x +' '+ line_y +' C '+ hx1 +' '+ line_y +' '+ hx2 +' ' + y +' ' + x +'  ' + y;
            // return ' M '+ line_x +' '+ line_y +' C '+ hx1 +' '+ line_y +' '+ hx2 +' ' + y +' ' + x +'  ' + y +' M '+ (x-11)  + ' ' + y + ' L'+(x-20)+' '+ (y-5)+'  L'+(x-20)+' '+ (y+5)+'Z';

            // 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 +' M '+ (x-11)  + ' ' + y + ' L'+(x-20)+' '+ (y-5)+'  L'+(x-20)+' '+ (y+5)+'Z';

            var center_y = ((end_pos_y - start_pos_y)/2)+start_pos_y;
            return ' M ' + start_pos_x + ' ' + start_pos_y + ' L '+ start_pos_x +' ' +  center_y  + ' L ' + end_pos_x + ' ' +  center_y  + ' L ' + end_pos_x + ' ' + end_pos_y +' M '+ (x-11)  + ' ' + y + ' L'+(x-20)+' '+ (y-5)+'  L'+(x-20)+' '+ (y+5)+'Z';
            // return ' M ' + start_pos_x + ' ' + start_pos_y + ' L '+ start_pos_x +' ' +  center_y  + ' L ' + end_pos_x + ' ' +  center_y  + ' L ' + end_pos_x + ' ' + end_pos_y +' M26 48 L32 48 L38 48 L32 54 Z';
            // return ' M ' + start_pos_x + ' ' + start_pos_y + ' L '+ start_pos_x +' ' +  center_y  + ' L ' + end_pos_x + ' ' +  center_y  + ' L ' + end_pos_x + ' ' + end_pos_y +' M '+ x  + ' ' +(y-11) + ' L'+(x-5)+' '+ (y-20)+'  L'+(x-5)+' '+ (y+20)+'Z';;
            // return ' M ' + start_pos_x + ' ' + start_pos_y + ' L '+ start_pos_x +' ' +  center_y  + ' L ' + end_pos_x + ' ' +  center_y  + ' L ' + end_pos_x + ' ' + end_pos_y + ' M '+ (x-11)  + ' ' + y + ' L'+(x-20)+' '+ (y-5)+'  L'+(x-20)+' '+ (y+5)+'Z';

        }

     }

[Yusufzai]

Ok! Finally, I fixed it

Below is my code +' M '+ x + ' ' + (y-12) + ' L'+(x+10)+' '+ (y-25)+' L'+(x-9)+' '+ (y-25)+'Z'

Thank you so much for your support 👍