FConnectorShape

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

Access

Access through:

• FWorksheet.insertShape()
• FWorksheet.getShape()
• FWorksheet.getShapes()
• FDocument.insertShape()
• FDocument.getShape()
• FDocument.getShapes()
• FSlide.insertShape()
• FSlide.insertSmartArt()

Inheritance

Extends FShape. Its inherited members are available on this object.

Example

Sheet

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

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

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

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

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 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.

@univerjs-pro/engine-shape

FConnectorShape.bindEnd

Binds the end endpoint to a target Shape connection site.

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

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

Package: @univerjs-pro/engine-shape · Type definitions

FConnectorShape.bindStart

Binds the start endpoint to a target Shape connection site.

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

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

Package: @univerjs-pro/engine-shape · Type definitions

FConnectorShape.getEndArrow

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

getEndArrow(): IConnectorArrow | null

Returns

The end arrowhead, or null when none is configured.

Examples

console.log(fConnectorShape.getEndArrow())

Types: IConnectorArrow

Package: @univerjs-pro/engine-shape · Type definitions

FConnectorShape.getEndEndpoint

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

getEndEndpoint(): IConnectorEndpoint | null

Returns

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

Examples

console.log(fConnectorShape.getEndEndpoint())

Types: IConnectorEndpoint

Package: @univerjs-pro/engine-shape · Type definitions

FConnectorShape.getRoutePoints

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

getRoutePoints(): IShapePoint[] | null

Returns

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

Examples

console.log(fConnectorShape.getRoutePoints())

Types: IShapePoint

Package: @univerjs-pro/engine-shape · Type definitions

FConnectorShape.getStartArrow

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

getStartArrow(): IConnectorArrow | null

Returns

The start arrowhead, or null when none is configured.

Examples

console.log(fConnectorShape.getStartArrow())

Types: IConnectorArrow

Package: @univerjs-pro/engine-shape · Type definitions

FConnectorShape.getStartEndpoint

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

getStartEndpoint(): IConnectorEndpoint | null

Returns

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

Examples

console.log(fConnectorShape.getStartEndpoint())

Types: IConnectorEndpoint

Package: @univerjs-pro/engine-shape · Type definitions

FConnectorShape.isConnectorShape

Whether this Shape is a Connector preset type.

isConnectorShape(): boolean

Returns

Whether this Shape is a Connector preset type.

Examples

console.log(fShape.isConnectorShape())

Package: @univerjs-pro/engine-shape · Type definitions

FConnectorShape.setEndArrow

Sets the end arrowhead type and optional size.

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

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

Types: ShapeArrowTypeEnum · ShapeArrowSizeEnum

Package: @univerjs-pro/engine-shape · Type definitions

FConnectorShape.setEndPoint

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

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

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

Types: IShapePoint

Package: @univerjs-pro/engine-shape · Type definitions

FConnectorShape.setRoutePoints

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

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

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

Types: IShapePoint

Package: @univerjs-pro/engine-shape · Type definitions

FConnectorShape.setShapeData

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

setShapeData(shapeData: IShapeData): this

Parameters

• shapeData — Required. The new Shape data.

Returns

This Connector Shape facade for chaining.

Examples

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

Types: IShapeData

Package: @univerjs-pro/engine-shape · Type definitions

FConnectorShape.setShapeType

Changes this Connector to another Connector Shape preset.

setShapeType(shapeType: ShapeTypeEnum): this

Parameters

• shapeType — Required. The new Connector Shape type.

Returns

This Connector Shape facade for chaining.

Examples

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

Types: ShapeTypeEnum

Package: @univerjs-pro/engine-shape · Type definitions

FConnectorShape.setStartArrow

Sets the start arrowhead type and optional size.

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

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

Types: ShapeArrowTypeEnum · ShapeArrowSizeEnum

Package: @univerjs-pro/engine-shape · Type definitions

FConnectorShape.setStartPoint

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

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

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

Types: IShapePoint

Package: @univerjs-pro/engine-shape · Type definitions

FConnectorShape.unbindEnd

Unbinds the end endpoint while preserving its current visual position.

unbindEnd(): this

Returns

This Connector Shape facade for chaining.

Examples

fConnectorShape.unbindEnd()

Package: @univerjs-pro/engine-shape · Type definitions

FConnectorShape.unbindStart

Unbinds the start endpoint while preserving its current visual position.

unbindStart(): this

Returns

This Connector Shape facade for chaining.

Examples

fConnectorShape.unbindStart()

Package: @univerjs-pro/engine-shape · Type definitions