Skip to main content
RectangleOverlayOptions
Options for a Rectangle overlay
NameTypeDescription
align?"center" | "flush"When the overlay is at position 1 or 0 (or is being used a source/target marker), this determines how the rectangle intersects the vertex. A value of 'flush', which is the default, means a point on the boundary of the rectangle touches the vertex boundary. A value of 'center' means the rectangle's center is on the vertex boundary.
attributes?Record<string,string>Optional custom attributes to write to the overlay's element.
cssClass?stringOptional CSS class(es) to add to the overlay's element.
direction?number1 to point forwards (the default), -1 to point backwards. Only taken into consideration in some overlay types.
events?Record<OverlayEvents,(value:any, event:any) => any>Optional event handlers to attach to the overlay.
height?numberHeight of the rectangle. Defaults to 10.
hollow?booleanDefaults to false. When true, the arrow is stroked but not filled.
id?stringOptional ID for the overlay. Can be used to retrieve the overlay from a connection.
location?numberDefaults to 0.5. See docs.
paintStyle?PaintStyleOptional paint style to use.
rotate?booleanWhether or not to rotate the rectangle so that it is always perpendicular to the connector path. Defaults to false.
visibility?OverlayVisibilityWhether the overlay is always visible, or only on hover. Defaults to OVERLAY_VISIBILITY_ALWAYS.
width?numberWidth of the rectangle. Defaults to 10.