Connector

A connector is a line element that connects two points or items on the project map. Connectors support multiple line styles (straight, angled, curved) and customizable decorators (arrows, circles) at the endpoints.

Item type: connector

Properties

Property	Type	Required	Updatable	Default	Description
position	object	No	—	—	Ignored for connectors. Position is determined by startPoint and endPoint.
size	object	No	—	—	Ignored for connectors. Size is calculated automatically.
scale	number	No	—	—	Ignored for connectors.
angle	number	No	—	—	Ignored for connectors.
type	string	No	Yes	"Straight"	Line type: "Straight", "Angled", or "Curved".
strokeColor	string	No	Yes	Accent color	Stroke color as a CSS color string (e.g., "#FF0000", "rgb(255,0,0)").
strokeThickness	number	No	Yes	3	Line thickness in pixels. Must be ≥ 0.
cornerPoints	array	No	Yes	[]	Array of corner points for "Angled" connectors. Each point has x and y fields.
radius	number	No	Yes	0.5	Corner radius for "Angled" connectors. Must be ≥ 0.
startPoint	object	Yes	Yes	—	Start point configuration. See Connector Point below.
endPoint	object	Yes	Yes	—	End point configuration. See Connector Point below.

Connector Point

Both startPoint and endPoint use the ConnectorPointDto structure:

Property	Type	Required	Default	Description
edge	boolean	No	true	Whether to connect to the edge of an item (if itemId is specified).
position	object	Yes	{ x: 0, y: 0 }	Absolute position on the map with x and y fields.
itemId	string (GUID)	No	null	ID of an item to attach to. When specified, the connector follows the item.
decorator	string	No	"ArrowLine"	Endpoint decorator: "None", "Arrow", "ArrowLine", or "Circle".

Line Types

• Straight: Direct line between start and end points
• Angled: Polyline with 90-degree angles (uses cornerPoints and radius)
• Curved: Smooth cubic Bézier curve

Decorators

• None: No decorator
• Arrow: Filled arrow
• ArrowLine: Arrow outline
• Circle: Circle at the endpoint

Create

Creates a new connector item in the project.

POST /api/v2/projects/{projectId}/item/{parent}/connector

curl

curl -X POST "https://api.deon.cloud/api/v2/projects/{projectId}/item/inbox/connector" \
  -H "Authorization: Bearer <token>" \
  -H "Content-Type: application/json" \
  -d '{
    "type": "Straight",
    "strokeColor": "#0078D4",
    "strokeThickness": 2,
    "startPoint": {
      "position": { "x": 100, "y": 100 },
      "decorator": "None"
    },
    "endPoint": {
      "position": { "x": 300, "y": 200 },
      "decorator": "ArrowLine"
    }
  }'

JavaScript

const response = await fetch(
  `https://api.deon.cloud/api/v2/projects/${projectId}/item/inbox/connector`,
  {
    method: "POST",
    headers: {
      Authorization: `Bearer ${token}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      type: "Straight",
      strokeColor: "#0078D4",
      strokeThickness: 2,
      startPoint: {
        position: { x: 100, y: 100 },
        decorator: "None",
      },
      endPoint: {
        position: { x: 300, y: 200 },
        decorator: "ArrowLine",
      },
    }),
  }
);

const result = await response.json();
console.log(result.itemId); // "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"

Update

Updates an existing connector item.

PATCH /api/v2/projects/{projectId}/item/connector/{itemId}

curl

curl -X PATCH "https://api.deon.cloud/api/v2/projects/{projectId}/item/connector/{itemId}" \
  -H "Authorization: Bearer <token>" \
  -H "Content-Type: application/json" \
  -d '{
    "properties": {
      "strokeColor": "#FF5733",
      "strokeThickness": 4,
      "type": "Curved"
    }
  }'

JavaScript

const response = await fetch(
  `https://api.deon.cloud/api/v2/projects/${projectId}/item/connector/${itemId}`,
  {
    method: "PATCH",
    headers: {
      Authorization: `Bearer ${token}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      properties: {
        strokeColor: "#FF5733",
        strokeThickness: 4,
        type: "Curved",
      },
    }),
  }
);

const result = await response.json();
console.log(result.itemId);

Example: Connect Two Items

You can attach a connector to existing items by specifying their IDs:

const response = await fetch(
  `https://api.deon.cloud/api/v2/projects/${projectId}/item/inbox/connector`,
  {
    method: "POST",
    headers: {
      Authorization: `Bearer ${token}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      type: "Angled",
      strokeColor: "#28A745",
      strokeThickness: 2,
      radius: 10,
      startPoint: {
        itemId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx", // Source item ID
        position: { x: 0, y: 0 }, // Relative position
        edge: true,
        decorator: "Circle",
      },
      endPoint: {
        itemId: "yyyyyyyy-yyyy-yyyy-yyyy-yyyyyyyyyyyy", // Target item ID
        position: { x: 0, y: 0 }, // Relative position
        edge: true,
        decorator: "Arrow",
      },
    }),
  }
);

When itemId is specified and edge is true, the connector automatically attaches to the nearest edge of the item and follows it when the item is moved.