# FConnectorShape

- Human documentation: [https://docs.univer.ai/reference/facade/connector-shape](https://docs.univer.ai/reference/facade/connector-shape)

- Agent Markdown: [https://docs.univer.ai/reference/facade/connector-shape.md](https://docs.univer.ai/reference/facade/connector-shape.md)

- Requested language: `en-US`

- Content language: `en-US`

- Documentation version: `1.0.0-rc.0`

- Source: [facade/connector-shape.mdx](https://github.com/dream-num/documentation/blob/dev/content/reference/facade/connector-shape.mdx)

---

A live, host-neutral facade handle for a Connector Shape.

## Access

Access through:

* [`FWorksheet.insertShape()`](https://docs.univer.ai/reference/facade/worksheet.md#insertshape)
* [`FWorksheet.getShape()`](https://docs.univer.ai/reference/facade/worksheet.md#getshape)
* [`FWorksheet.getShapes()`](https://docs.univer.ai/reference/facade/worksheet.md#getshapes)
* [`FDocument.insertShape()`](https://docs.univer.ai/reference/facade/document.md#insertshape)
* [`FDocument.getShape()`](https://docs.univer.ai/reference/facade/document.md#getshape)
* [`FDocument.getShapes()`](https://docs.univer.ai/reference/facade/document.md#getshapes)
* [`FSlide.insertShape()`](https://docs.univer.ai/reference/facade/slide.md#insertshape)
* [`FSlide.insertSmartArt()`](https://docs.univer.ai/reference/facade/slide.md#insertsmartart)

## Inheritance

Extends [`FShape`](https://docs.univer.ai/reference/facade/shape.md). Its inherited members are available on this object.

## Example

Sheet

```ts
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getSheetByName('Sheet1')
const fConnectorShape = fWorksheet.insertShape({
  shapeType: univerAPI.Enum.ShapeTypeEnum.StraightConnector1,
  transform: { left: 80, top: 80, width: 240, height: 120 },
})
```

Doc

```ts
const fDocument = univerAPI.getActiveDocument()
const paragraph = fDocument.getParagraphs()[0]
const fConnectorShape = fDocument.insertShape({
  shapeType: univerAPI.Enum.ShapeTypeEnum.StraightConnector1,
  placement: {
    wrappingStyle: univerAPI.Enum.TextWrappingStyle.WRAP_SQUARE,
    anchor: {
      paragraphId: paragraph.getId(),
      segmentId: paragraph.getSegmentId(),
    },
    position: { horizontalOffset: 80, verticalOffset: 80 },
  },
  transform: { width: 240, height: 120 },
})
```

Slide

```ts
const fPresentation = univerAPI.getActivePresentation()
const fSlide = fPresentation.getSlideByIndex(0)
const fConnectorShape = fSlide.insertShape({
  shapeType: univerAPI.Enum.ShapeTypeEnum.StraightConnector1,
  transform: { left: 80, top: 80, width: 240, height: 120 },
})
```

Board

```ts
const fBoard = univerAPI.getActiveBoard()
const fConnectorShape = fBoard.insertShape({
  shapeType: univerAPI.Enum.ShapeTypeEnum.StraightConnector1,
  transform: { left: 80, top: 80, width: 240, height: 120 },
})
```

```ts
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getSheetByName('Sheet1')
const sourceShape = fWorksheet.insertShape({
  shapeType: univerAPI.Enum.ShapeTypeEnum.RoundRect,
  transform: { left: 80, top: 80, width: 180, height: 100 },
})
const targetShape = fWorksheet.insertShape({
  shapeType: univerAPI.Enum.ShapeTypeEnum.Ellipse,
  transform: { left: 420, top: 200, width: 180, height: 100 },
})
const fConnectorShape = fWorksheet.insertShape({
  shapeType: univerAPI.Enum.ShapeTypeEnum.BentConnector3,
  transform: { left: 240, top: 130, width: 240, height: 120 },
})

const startSite = sourceShape.getConnectionSites()[0]
const targetSites = targetShape.getConnectionSites()
const endSite = targetSites[2] ?? targetSites[0]

fConnectorShape
  .bindStart(sourceShape.getId(), startSite.index)
  .bindEnd(targetShape.getId(), endSite.index)
  .setEndArrow(univerAPI.Enum.ShapeArrowTypeEnum.Arrow)
```

## Setup

Register [`@univerjs-pro/engine-shape`](https://docs.univer.ai/reference/packages/plugins/univerjs-pro/engine-shape.md) or a preset that includes it. In plugin mode, import `@univerjs-pro/engine-shape/facade`. Additional methods below require their listed plugin packages. See [Facade setup](https://docs.univer.ai/guides/sheets/getting-started/facade.md).

## `@univerjs-pro/engine-shape`

### `FConnectorShape.bindEnd`

Binds the end endpoint to a target Shape connection site.

```typescript
bindEnd(targetShapeId: string, connectionSiteIndex: number): this
```

**Parameters**

* `targetShapeId` — Required. The target Shape's stable identifier.
* `connectionSiteIndex` — Required. The target Shape's connection site index.

**Returns**

This Connector Shape facade for chaining.

**Examples**

```ts
const target = targetShape.getConnectionSites()[0]
if (target) fConnectorShape.bindEnd(targetShape.getId(), target.index)
```

**Package:** [`@univerjs-pro/engine-shape`](https://docs.univer.ai/reference/packages/plugins/univerjs-pro/engine-shape.md) · [Type definitions](https://unpkg.com/@univerjs-pro/engine-shape@1.0.0-rc.0/lib/types/facade/f-connector-shape.d.ts)

### `FConnectorShape.bindStart`

Binds the start endpoint to a target Shape connection site.

```typescript
bindStart(targetShapeId: string, connectionSiteIndex: number): this
```

**Parameters**

* `targetShapeId` — Required. The target Shape's stable identifier.
* `connectionSiteIndex` — Required. The target Shape's connection site index.

**Returns**

This Connector Shape facade for chaining.

**Examples**

```ts
const source = sourceShape.getConnectionSites()[0]
if (source) fConnectorShape.bindStart(sourceShape.getId(), source.index)
```

**Package:** [`@univerjs-pro/engine-shape`](https://docs.univer.ai/reference/packages/plugins/univerjs-pro/engine-shape.md) · [Type definitions](https://unpkg.com/@univerjs-pro/engine-shape@1.0.0-rc.0/lib/types/facade/f-connector-shape.d.ts)

### `FConnectorShape.getEndArrow`

Returns the configured end arrowhead, or `null` when none is configured.

```typescript
getEndArrow(): IConnectorArrow | null
```

**Returns**

The end arrowhead, or `null` when none is configured.

**Examples**

```ts
console.log(fConnectorShape.getEndArrow())
```

**Types:** [`IConnectorArrow`](https://unpkg.com/@univerjs-pro/engine-shape@1.0.0-rc.0/lib/types/services/connector-shape-host-adapter.service.d.ts)

**Package:** [`@univerjs-pro/engine-shape`](https://docs.univer.ai/reference/packages/plugins/univerjs-pro/engine-shape.md) · [Type definitions](https://unpkg.com/@univerjs-pro/engine-shape@1.0.0-rc.0/lib/types/facade/f-connector-shape.d.ts)

### `FConnectorShape.getEndEndpoint`

Returns the resolved end endpoint, including its optional Shape binding.

```typescript
getEndEndpoint(): IConnectorEndpoint | null
```

**Returns**

The resolved end endpoint, or `null` when the Connector does not exist.

**Examples**

```ts
console.log(fConnectorShape.getEndEndpoint())
```

**Types:** [`IConnectorEndpoint`](https://unpkg.com/@univerjs-pro/engine-shape@1.0.0-rc.0/lib/types/services/connector-shape-host-adapter.service.d.ts)

**Package:** [`@univerjs-pro/engine-shape`](https://docs.univer.ai/reference/packages/plugins/univerjs-pro/engine-shape.md) · [Type definitions](https://unpkg.com/@univerjs-pro/engine-shape@1.0.0-rc.0/lib/types/facade/f-connector-shape.d.ts)

### `FConnectorShape.getRoutePoints`

Returns the resolved Connector route in the host's document coordinates.

```typescript
getRoutePoints(): IShapePoint[] | null
```

**Returns**

The resolved Connector route points, or `null` when the Connector does not exist.

**Examples**

```ts
console.log(fConnectorShape.getRoutePoints())
```

**Types:** [`IShapePoint`](https://unpkg.com/@univerjs-pro/engine-shape@1.0.0-rc.0/lib/types/facade/f-connector-shape.d.ts)

**Package:** [`@univerjs-pro/engine-shape`](https://docs.univer.ai/reference/packages/plugins/univerjs-pro/engine-shape.md) · [Type definitions](https://unpkg.com/@univerjs-pro/engine-shape@1.0.0-rc.0/lib/types/facade/f-connector-shape.d.ts)

### `FConnectorShape.getStartArrow`

Returns the configured start arrowhead, or `null` when none is configured.

```typescript
getStartArrow(): IConnectorArrow | null
```

**Returns**

The start arrowhead, or `null` when none is configured.

**Examples**

```ts
console.log(fConnectorShape.getStartArrow())
```

**Types:** [`IConnectorArrow`](https://unpkg.com/@univerjs-pro/engine-shape@1.0.0-rc.0/lib/types/services/connector-shape-host-adapter.service.d.ts)

**Package:** [`@univerjs-pro/engine-shape`](https://docs.univer.ai/reference/packages/plugins/univerjs-pro/engine-shape.md) · [Type definitions](https://unpkg.com/@univerjs-pro/engine-shape@1.0.0-rc.0/lib/types/facade/f-connector-shape.d.ts)

### `FConnectorShape.getStartEndpoint`

Returns the resolved start endpoint, including its optional Shape binding.

```typescript
getStartEndpoint(): IConnectorEndpoint | null
```

**Returns**

The resolved start endpoint, or `null` when the Connector does not exist.

**Examples**

```ts
console.log(fConnectorShape.getStartEndpoint())
```

**Types:** [`IConnectorEndpoint`](https://unpkg.com/@univerjs-pro/engine-shape@1.0.0-rc.0/lib/types/services/connector-shape-host-adapter.service.d.ts)

**Package:** [`@univerjs-pro/engine-shape`](https://docs.univer.ai/reference/packages/plugins/univerjs-pro/engine-shape.md) · [Type definitions](https://unpkg.com/@univerjs-pro/engine-shape@1.0.0-rc.0/lib/types/facade/f-connector-shape.d.ts)

### `FConnectorShape.isConnectorShape`

Whether this Shape is a Connector preset type.

```typescript
isConnectorShape(): boolean
```

**Returns**

Whether this Shape is a Connector preset type.

**Examples**

```ts
console.log(fShape.isConnectorShape())
```

**Package:** [`@univerjs-pro/engine-shape`](https://docs.univer.ai/reference/packages/plugins/univerjs-pro/engine-shape.md) · [Type definitions](https://unpkg.com/@univerjs-pro/engine-shape@1.0.0-rc.0/lib/types/facade/f-connector-shape.d.ts)

### `FConnectorShape.setEndArrow`

Sets the end arrowhead type and optional size.

```typescript
setEndArrow(type: ShapeArrowTypeEnum, size?: ShapeArrowSizeEnum): this
```

**Parameters**

* `type` — Required. The new end arrowhead type.
* `size` — Optional. The optional new end arrowhead size.

**Returns**

This Connector Shape facade for chaining.

**Examples**

```ts
fConnectorShape.setEndArrow(
  univerAPI.Enum.ShapeArrowTypeEnum.Arrow,
  univerAPI.Enum.ShapeArrowSizeEnum.Large,
)
```

**Types:** [`ShapeArrowTypeEnum`](https://unpkg.com/@univerjs-pro/engine-shape@1.0.0-rc.0/lib/types/facade/f-connector-shape.d.ts) · [`ShapeArrowSizeEnum`](https://unpkg.com/@univerjs-pro/engine-shape@1.0.0-rc.0/lib/types/facade/f-connector-shape.d.ts)

**Package:** [`@univerjs-pro/engine-shape`](https://docs.univer.ai/reference/packages/plugins/univerjs-pro/engine-shape.md) · [Type definitions](https://unpkg.com/@univerjs-pro/engine-shape@1.0.0-rc.0/lib/types/facade/f-connector-shape.d.ts)

### `FConnectorShape.setEndPoint`

Sets a free end point.
Calling this method removes any existing end binding while preserving the start binding.

```typescript
setEndPoint(point: IShapePoint): this
```

**Parameters**

* `point` — Required. The new end point in the host's document coordinates.

**Returns**

This Connector Shape facade for chaining.

**Examples**

```ts
fConnectorShape.setEndPoint({ x: 360, y: 240 })
```

**Types:** [`IShapePoint`](https://unpkg.com/@univerjs-pro/engine-shape@1.0.0-rc.0/lib/types/facade/f-connector-shape.d.ts)

**Package:** [`@univerjs-pro/engine-shape`](https://docs.univer.ai/reference/packages/plugins/univerjs-pro/engine-shape.md) · [Type definitions](https://unpkg.com/@univerjs-pro/engine-shape@1.0.0-rc.0/lib/types/facade/f-connector-shape.d.ts)

### `FConnectorShape.setRoutePoints`

Replaces the intermediate Connector route points while preserving both endpoint bindings.

```typescript
setRoutePoints(points: IShapePoint[]): this
```

**Parameters**

* `points` — Required. The new Connector route points in the host's document coordinates.

**Returns**

This Connector Shape facade for chaining.

**Examples**

```ts
fConnectorShape.setRoutePoints([
  { x: 180, y: 120 },
  { x: 180, y: 240 },
])
```

**Types:** [`IShapePoint`](https://unpkg.com/@univerjs-pro/engine-shape@1.0.0-rc.0/lib/types/facade/f-connector-shape.d.ts)

**Package:** [`@univerjs-pro/engine-shape`](https://docs.univer.ai/reference/packages/plugins/univerjs-pro/engine-shape.md) · [Type definitions](https://unpkg.com/@univerjs-pro/engine-shape@1.0.0-rc.0/lib/types/facade/f-connector-shape.d.ts)

### `FConnectorShape.setShapeData`

Replaces this Connector's Shape data without allowing a basic Shape type.

```typescript
setShapeData(shapeData: IShapeData): this
```

**Parameters**

* `shapeData` — Required. The new Shape data.

**Returns**

This Connector Shape facade for chaining.

**Examples**

```ts
fConnectorShape.setShapeData({
  shapeType: univerAPI.Enum.ShapeTypeEnum.StraightConnector1,
  stroke: { color: '#2563eb', width: 2 },
})
```

**Types:** [`IShapeData`](https://unpkg.com/@univerjs-pro/engine-shape@1.0.0-rc.0/lib/types/facade/f-connector-shape.d.ts)

**Package:** [`@univerjs-pro/engine-shape`](https://docs.univer.ai/reference/packages/plugins/univerjs-pro/engine-shape.md) · [Type definitions](https://unpkg.com/@univerjs-pro/engine-shape@1.0.0-rc.0/lib/types/facade/f-connector-shape.d.ts)

### `FConnectorShape.setShapeType`

Changes this Connector to another Connector Shape preset.

```typescript
setShapeType(shapeType: ShapeTypeEnum): this
```

**Parameters**

* `shapeType` — Required. The new Connector Shape type.

**Returns**

This Connector Shape facade for chaining.

**Examples**

```ts
fConnectorShape.setShapeType(univerAPI.Enum.ShapeTypeEnum.BentConnector3)
```

**Types:** [`ShapeTypeEnum`](https://unpkg.com/@univerjs-pro/engine-shape@1.0.0-rc.0/lib/types/facade/f-connector-shape.d.ts)

**Package:** [`@univerjs-pro/engine-shape`](https://docs.univer.ai/reference/packages/plugins/univerjs-pro/engine-shape.md) · [Type definitions](https://unpkg.com/@univerjs-pro/engine-shape@1.0.0-rc.0/lib/types/facade/f-connector-shape.d.ts)

### `FConnectorShape.setStartArrow`

Sets the start arrowhead type and optional size.

```typescript
setStartArrow(type: ShapeArrowTypeEnum, size?: ShapeArrowSizeEnum): this
```

**Parameters**

* `type` — Required. The new start arrowhead type.
* `size` — Optional. The optional new start arrowhead size.

**Returns**

This Connector Shape facade for chaining.

**Examples**

```ts
fConnectorShape.setStartArrow(
  univerAPI.Enum.ShapeArrowTypeEnum.OvalArrow,
  univerAPI.Enum.ShapeArrowSizeEnum.Medium,
)
```

**Types:** [`ShapeArrowTypeEnum`](https://unpkg.com/@univerjs-pro/engine-shape@1.0.0-rc.0/lib/types/facade/f-connector-shape.d.ts) · [`ShapeArrowSizeEnum`](https://unpkg.com/@univerjs-pro/engine-shape@1.0.0-rc.0/lib/types/facade/f-connector-shape.d.ts)

**Package:** [`@univerjs-pro/engine-shape`](https://docs.univer.ai/reference/packages/plugins/univerjs-pro/engine-shape.md) · [Type definitions](https://unpkg.com/@univerjs-pro/engine-shape@1.0.0-rc.0/lib/types/facade/f-connector-shape.d.ts)

### `FConnectorShape.setStartPoint`

Sets a free start point.
Calling this method removes any existing start binding while preserving the end binding.

```typescript
setStartPoint(point: IShapePoint): this
```

**Parameters**

* `point` — Required. The new start point in the host's document coordinates.

**Returns**

This Connector Shape facade for chaining.

**Examples**

```ts
fConnectorShape.setStartPoint({ x: 80, y: 120 })
```

**Types:** [`IShapePoint`](https://unpkg.com/@univerjs-pro/engine-shape@1.0.0-rc.0/lib/types/facade/f-connector-shape.d.ts)

**Package:** [`@univerjs-pro/engine-shape`](https://docs.univer.ai/reference/packages/plugins/univerjs-pro/engine-shape.md) · [Type definitions](https://unpkg.com/@univerjs-pro/engine-shape@1.0.0-rc.0/lib/types/facade/f-connector-shape.d.ts)

### `FConnectorShape.unbindEnd`

Unbinds the end endpoint while preserving its current visual position.

```typescript
unbindEnd(): this
```

**Returns**

This Connector Shape facade for chaining.

**Examples**

```ts
fConnectorShape.unbindEnd()
```

**Package:** [`@univerjs-pro/engine-shape`](https://docs.univer.ai/reference/packages/plugins/univerjs-pro/engine-shape.md) · [Type definitions](https://unpkg.com/@univerjs-pro/engine-shape@1.0.0-rc.0/lib/types/facade/f-connector-shape.d.ts)

### `FConnectorShape.unbindStart`

Unbinds the start endpoint while preserving its current visual position.

```typescript
unbindStart(): this
```

**Returns**

This Connector Shape facade for chaining.

**Examples**

```ts
fConnectorShape.unbindStart()
```

**Package:** [`@univerjs-pro/engine-shape`](https://docs.univer.ai/reference/packages/plugins/univerjs-pro/engine-shape.md) · [Type definitions](https://unpkg.com/@univerjs-pro/engine-shape@1.0.0-rc.0/lib/types/facade/f-connector-shape.d.ts)