jerosoler
commented
3 months ago Hi!
Thanks!
I am currently working with angular at work.
Although this is not an Angular problem.
What the create curvature function makes is a curve with svg.
What we do in the createcurvature function is add lines to create the arrow.
Here is one of the examples that I like the most when implementing.
Or this for horitzontal:
editor.createCurvature = function(start_pos_x, start_pos_y, end_pos_x, end_pos_y, curvature_value, type) {
let angle = 15;
const stroke = 2; // === stroke CSS.
const input_distance = 10;
const fix_arrow_distance = 10;
const min_x_distance = 45;
const x = start_pos_x + input_distance;
const y = start_pos_y;
const end_x = end_pos_x - fix_arrow_distance;
const end_y = end_pos_y;
const center_x = ((end_x - x)/2)+x;
const center_y = ((end_y - y)/2)+y;
const distance_x = end_x - x;
const distance_y = end_y - y;
let minX = false;
let line = '';
if(distance_x <= min_x_distance) {
minX = true;
}
if(end_y > y) {
//Down Lines
if(distance_y <= angle*2) {
angle = distance_y/2;
}
if(minX) {
if(distance_y <= angle*4) {
angle = distance_y/4;
}
line += `
M ${x} ${y}
L ${x+min_x_distance-angle} ${y}
A ${angle} ${angle} 1 0 1 ${x+min_x_distance} ${y+angle}
L ${x+min_x_distance} ${center_y-angle}
A ${angle} ${angle} 1 0 1 ${x+min_x_distance-angle} ${center_y}
L ${end_x-min_x_distance} ${center_y}
A ${angle} ${angle} 1 0 0 ${end_x-min_x_distance-angle} ${center_y+angle}
L ${end_x-min_x_distance-angle} ${end_y-angle}
A ${angle} ${angle} 1 0 0 ${end_x-min_x_distance} ${end_y}
L ${end_x} ${end_y}
`;
} else {
line += `
M ${x} ${y}
L ${center_x-angle} ${y}
A ${angle} ${angle} 1 0 1 ${center_x} ${y+angle}
L ${center_x} ${center_y}
L ${center_x} ${end_y-angle}
A ${angle} ${angle} 1 0 0 ${center_x+angle} ${end_y}
L ${end_x} ${end_y}
`;
}
} else {
// UP Lines
if(distance_y*-1 <= angle*2) {
angle = distance_y*-1/2;
}
if(minX) {
if(distance_y*-1 <= angle*4) {
angle = distance_y*-1/4;
}
line += `
M ${x} ${y}
L ${x+min_x_distance-angle} ${y}
A ${angle} ${angle} 1 0 0 ${x+min_x_distance} ${y-angle}
L ${x+min_x_distance} ${center_y+angle}
A ${angle} ${angle} 1 0 0 ${x+min_x_distance-angle} ${center_y}
L ${end_x-min_x_distance} ${center_y}
A ${angle} ${angle} 1 0 1 ${end_x-min_x_distance-angle} ${center_y-angle}
L ${end_x-min_x_distance-angle} ${end_y+angle}
A ${angle} ${angle} 1 0 1 ${end_x-min_x_distance} ${end_y}
L ${end_x} ${end_y}
`;
} else {
line += `
M ${x} ${y}
L ${center_x-angle} ${y}
A ${angle} ${angle} 1 0 0 ${center_x} ${y-angle}
L ${center_x} ${center_y}
L ${center_x} ${end_y+angle}
A ${angle} ${angle} 1 0 1 ${center_x+angle} ${end_y}
L ${end_x} ${end_y}
`;
}
}
let arrow = `M ${end_x+0.5} ${end_y+0.5} L ${end_x-10} ${end_y-10} M ${end_x+0.5} ${end_y-0.5} L ${end_x-10} ${end_y+10} `;
switch(type) {
case 'open':
return line;
break
case 'close':
return line + arrow;
break
case 'other':
return line;
break
default:
return line + arrow;
}
return line + arrow;
}
neelphilips
Hello Jerosoler ! First of all thank you for your awesome library. As of now currently I am using in angular and it is working fine. And I know you have no expertise in angular but can you please help me in logic. My question to you is that I want to add arrow at the end point where the connection has been established. I already gone through your arrow links issues examples but I am not able to understand how the code is working and how the css file is working so please can you help me. Thank you Jerosoler in advance.
Here is my code- this.editor.curvature = 0; this.editor.reroute_curvature_start_end = 0; this.editor.reroute_curvature = 0; this.editor.createCurvature = function (start_pos_x: any, start_pos_y: any, end_pos_x: any, end_pos_y: any) { 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; } this.editor.start(); const elements = document.getElementsByClassName("drag-drawflow"); for (let i = 0; i < elements.length; i++) { elements[i].addEventListener("touchend", this.drop, false); elements[i].addEventListener("touchmove", this.positionMobile, false); elements[i].addEventListener("touchstart", this.drag, false); }
i just want arrow where the connections has been established