Snapline

This section mainly introduces the Snapline plugin. By reading, you will learn:

How to use snaplines on the canvas

Usage

Snaplines help align moving nodes. Enable the feature via the Snapline plugin:

import { Graph, Snapline } from '@antv/x6'

const graph = new Graph({
  background: {
    color: '#F2F7FA',
  },
})
graph.use(
  new Snapline({
    enabled: true,
  }),
)

Demo

Configuration

Property Name	Type	Default Value	Description
className	string	-	Additional class name to customize snapline styles
tolerance	number	10	Snapline precision; a snapline is shown when the distance to the target position is less than `tolerance`
sharp	boolean	`false`	Whether to use short snaplines (truncated)
resizing	boolean	`false`	Whether to trigger snaplines when resizing nodes
clean	boolean	`true`	If `true`, snaplines are cleared after 3 seconds; if `false`, they are not cleared; if a number (ms), they are cleared after the specified duration
filter	Filter	-	Node filter

The above Filter type is relatively flexible and supports the following forms:

string[]: An array of node shapes; only nodes with those shapes participate in snapline calculations
({ id: string })[]: An array of node IDs; only the specified nodes participate in snapline calculations
(this: Graph, node: Node) => boolean: Only nodes for which the function returns true participate in snapline calculations

API

graph.isSnaplineEnabled()

isSnaplineEnabled(): boolean

Returns whether snaplines are enabled.

graph.enableSnapline()

enableSnapline(): this

Enables snaplines.

graph.disableSnapline()

disableSnapline(): this

Disables snaplines.

graph.toggleSnapline(...)

toggleSnapline(enabled?: boolean): this

Toggles whether snaplines are enabled. Parameters are as follows:

Name	Type	Required	Default Value	Description
enabled	boolean		-	Whether to enable snaplines; if omitted, toggles the current enabled state.

graph.hideSnapline()

hideSnapline(): this

Hides snaplines.

graph.isSnaplineOnResizingEnabled()

isSnaplineOnResizingEnabled(): boolean

Whether to trigger snaplines when resizing nodes.

graph.enableSnaplineOnResizing()

enableSnaplineOnResizing(): this

Enables triggering snaplines during node resizing.

graph.disableSnaplineOnResizing()

disableSnaplineOnResizing(): this

Disables triggering snaplines during node resizing.

graph.toggleSnaplineOnResizing(...)

toggleSnaplineOnResizing(enabled?: boolean): this

Toggles whether to trigger snaplines during node resizing. Parameters are as follows:

Name	Type	Required	Default Value	Description
enabled	boolean		-	Whether to enable snaplines; if omitted, toggles the current enabled state.

graph.isSharpSnapline()

isSharpSnapline(): boolean

Whether to use short snaplines.

graph.enableSharpSnapline()

enableSharpSnapline(): this

Enables short snaplines; when enabled, snaplines are truncated at relevant node positions; otherwise they span across the canvas.

graph.disableSharpSnapline()

disableSharpSnapline(): this

Disables short snaplines; snaplines span the entire canvas.

graph.toggleSharpSnapline()

toggleSharpSnapline(enabled?: boolean): this

Toggles whether short snaplines are enabled. Parameters are as follows:

Name	Type	Required	Default Value	Description
enabled	boolean		-	Whether to enable short snaplines; if omitted, toggles the current enabled state.

graph.getSnaplineTolerance()

getSnaplineTolerance(): number

Gets snapline precision.

graph.setSnaplineTolerance(...)

setSnaplineTolerance(tolerance: number): this

Sets snapline precision.

graph.setSnaplineFilter(...)

setSnaplineFilter(
  filter?:
   | null
   | (string | { id: string })[]
   | ((this: Graph, node: Node) => boolean)
): this

Sets the filter; only nodes that meet the condition participate in snapline calculations.