How to create a diagram connector as Arc?
Hi Syncfusion Support Team!
I want to insert a diagram connector as ARC in diagram control from symbol palette as below image
I have used the connector with the 'Bezier' type to create connector but it's not working
I cannot create a connector as Arc 
Do you have any solution to do this one?
Please help me
Thanks!
Sy
SIGN IN To post a reply.
7 Replies
Thank for your reply
I know, although you don't support creating the connector as an Arc, but do you have any way to create arc from the available entities?
For example, I have used devexpress library to created points close together and connect these points to create a polyline, base on the trajectory of a circle
I have tried using syncfusion library in the same way, but the results did not meet my expectations
Below is my code I have implemented
const segments = generatePoints(100, 100);
console.log(segments);
let width = 150;
let height = 80;
let labelsShape =
{
id: 'informationlabel',
addInfo: { menuId: "edit", title: 'Information Label', tooltip: 'Information Label' },
type: 'polyline',
sourcePoint: {
x: 0,
y: 0,
},
targetPoint: {
x: 100.0,
y: 100.0,
},
segments: segments,
targetDecorator: {
shape: 'Arrow',
style: {
fill: 'black',
strokeColor: 'black'
}
},
annotations: [
{
content: "Label",
alignment: "Before"
},
],
tooltip: {
content: 'Show More Entity Info',
position: 'RightCenter'
},
style: {
fill: 'black',
strokeColor: 'black',
strokeWidth: 1
},
constraints: ConnectorConstraints.Tooltip | ConnectorConstraints.Default | ConnectorConstraints.AllowDrop,
with: 100,
height: 100
};
export function generatePoints(width: number, height: number): StraightSegmentModel[]
{
let segments: StraightSegmentModel[] = [];
const angpha = Math.PI / 40;
let startSegment: PointModel = {};
startSegment.x = 0.0;
startSegment.y = 0.0;
for (let i = 1; i < 20; i++) {
const xValue = startSegment.x + width * Math.cos(Math.PI * 0.5 - angpha * i);
const yValue = startSegment.y + height - height * Math.sin(Math.PI * 0.5 - angpha * i);
const seg: any = {
type: 'Straight',
point: { x: xValue, y: yValue }
};
segments.push(seg);
startSegment.x = xValue;
startSegment.y = yValue;
}
return segments;
}
Please let me know your comments
Thanks!
Sy
Hi Vivisa
As you can see on below image. I can create a connector as arc
I have added my code into your sample, it's can create a connector as arc
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { ChangeEventArgs as CheckBoxChangeEventArgs } from '@syncfusion/ej2-buttons';
import {
DiagramComponent,
NodeModel,
ConnectorModel,
NodeConstraints,
BasicShapeModel,
SnapSettingsModel,
SnapConstraints,
GradientType,
GradientModel,
LinearGradientModel,
RadialGradientModel,
DiagramModule,
} from '@syncfusion/ej2-angular-diagrams';
import { CheckBoxModule } from '@syncfusion/ej2-angular-buttons';
import { StraightSegmentModel, PointModel } from '@syncfusion/ej2-angular-diagrams';
/**
* Sample for Nodes Component
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None,
standalone: true,
imports: [DiagramModule, CheckBoxModule],
})
export class AppComponent {
@ViewChild('diagram') public diagram: DiagramComponent;
public shapeType: BasicShapeModel = { type: 'Basic', shape: 'Ellipse' };
public nodeDefaults(obj: NodeModel): NodeModel {
obj.style = { fill: '#37909A', strokeColor: '#024249' };
obj.annotations[0].margin = { left: 10, right: 10 };
obj.annotations[0].style = {
color: 'white',
fill: 'none',
strokeColor: 'none',
};
return obj;
}
public connDefaults(obj: ConnectorModel): void {
obj.targetDecorator.style = { fill: '#024249', strokeColor: '#024249' };
obj.style = { strokeColor: '#024249', strokeWidth: 2 };
}
public segments = this.generatePoints(100, 100);
public connectors: ConnectorModel[] = [
{
id: 'connector1',
type: 'Bezier',
sourcePoint: { x: 100, y: 100 },
targetPoint: { x: 200, y: 200 },
segments: [
{
type: 'Bezier',
point1: { x: 150, y: 50 },
point2: { x: 250, y: 150 },
},
],
style: {
strokeColor: '#6BA5D7',
strokeWidth: 2,
},
targetDecorator: {
shape: 'Arrow',
style: { fill: '#6BA5D7', strokeColor: '#6BA5D7' },
},
annotations: [
{ content: 'Communicate', offset: 0.5, alignment: 'Before' },
],
},
{
id: 'connector2',
type: 'Bezier',
sourcePoint: { x: 100, y: 300 },
targetPoint: { x: 200, y: 400 },
segments: [
{
type: 'Bezier',
point1: { x: 150, y: 250 },
point2: { x: 250, y: 350 },
},
],
style: {
strokeColor: '#6BA5D7',
strokeWidth: 2,
},
targetDecorator: {
shape: 'Arrow',
style: { fill: '#6BA5D7', strokeColor: '#6BA5D7' },
},
annotations: [{ content: 'Label', offset: 0.5, alignment: 'Before' }],
},
{
id: 'informationlabel',
type: 'Straight',
segments: this.segments,
sourcePoint: {
x: 0,
y: 0,
},
targetPoint: {
x: 100,
y: 100,
},
targetDecorator: {
shape: 'Arrow',
style: {
fill: 'black',
strokeColor: 'black'
}
},
annotations: [
{
content: "Label",
alignment: "Before"
},
],
tooltip: {
content: 'Show More Entity Info',
position: 'RightCenter'
},
style: {
fill: 'black',
strokeColor: 'black',
strokeWidth: 1
}
}
];
public generatePoints(width: number, height: number): StraightSegmentModel[]
{
let segments: StraightSegmentModel[] = [];
const angpha = Math.PI / 40;
let startSegment: PointModel = {};
startSegment.x = 0.0;
startSegment.y = 0.0;
for (let i = 1; i < 20; i++) {
const xValue = width * Math.cos(Math.PI * 0.5 - angpha * i);
const yValue = height - height * Math.sin(Math.PI * 0.5 - angpha * i);
const seg: StraightSegmentModel = {
type: 'Straight',
point: { x: xValue, y: yValue }
};
segments.push(seg);
startSegment.x = xValue;
startSegment.y = yValue;
}
return segments;
}
}
But when I add this code into my project and when I drag and drop arc object from symbol palette, the results is not good, the start and end points is incorrect
Do you know what's the cause of this problem?
Thanks!
Sy
SIGN IN To post a reply.
