Filter

We can use the special attribute filter to specify SVG filters for elements. For example, we can define a predefined object for the filter attribute of the element, where name and args specify the filter name and filter parameters, respectively.

// Create a node by specifying the filter through the attrs option
const rect = graph.addNode({
  x: 40,
  y: 40,
  width: 80,
  height: 30,
  attrs: {
    body: {
      filter: {
        name: 'dropShadow',
        args: {
          dx: 2,
          dy: 2,
          blur: 3,
        },
      },
    },
  },
})

// After creating the node, we can modify or specify the element's filter using the `attr()` method
rect.attr('body/filter', {
  name: 'dropShadow',
  args: {
    dx: 2,
    dy: 2,
    blur: 3,
  },
})

Additionally, we can call the graph.defineFilter(...) method to obtain a filter ID, and then set the filter attribute to this filter ID.

const filterId = graph.defineFilter({
  name: 'dropShadow',
  args: {
    dx: 2,
    dy: 2,
    blur: 3,
  },
})

rect.attr('body/filter', `#${filterId}`)

Through this brief introduction, we have learned how to use filters. Next, let's take a look at the predefined filters available in X6.

Built-in Filters

dropShadow

Shadow filter. Refer to CSS drop-shadow() filter.

Parameter Name	Type	Default Value	Description
dx	number	`0`	Shadow offset on the X-axis.
dy	number	`0`	Shadow offset on the Y-axis.
blur	number	`0`	Shadow blur radius.
opacity	number	`1`	Shadow opacity.

blur

Gaussian blur filter. Refer to CSS blur() filter.

Parameter Name	Type	Default Value	Description
x	number	`2`	Blur amount in the X direction.
y	number	-	Blur amount in the Y direction; defaults to X.

grayScale

Grayscale filter. Refer to CSS grayscale() filter.

Parameter Name	Type	Default Value	Description
amount	number	`1`	Grayscale amount. Ranges from `[0-1]`, where `0` means no grayscale and `1` means full grayscale.

sepia

Sepia filter. Refer to CSS sepia() filter.

Parameter Name	Type	Default Value	Description
amount	number	`1`	Sepia amount. Ranges from `[0-1]`, where `0` means no sepia and `1` means full sepia.

saturate

Saturation filter. Refer to CSS saturate() filter.

Parameter Name	Type	Default Value	Description
amount	number	`1`	Saturation. Ranges from `[0-1]`.

hueRotate

Hue rotation filter. Refer to CSS hue-rotate() filter.

Parameter Name	Type	Default Value	Description
angle	number	`0`	Hue rotation angle.

invert

Invert filter. Refer to CSS invert() filter.

Parameter Name	Type	Default Value	Description
amount	number	`1`	Inversion amount. Ranges from `[0-1]`, where `0` means no inversion and `1` means full inversion.

brightness

Brightness filter. Refer to CSS brightness() filter.

Parameter Name	Type	Default Value	Description
amount	number	`1`	Brightness. Ranges from `[0-1]`, where `0` means completely dark and `1` means completely bright.

contrast

Contrast filter. Refer to CSS contrast() filter.

Parameter Name	Type	Default Value	Description
amount	number	`1`	Contrast. Ranges from `[0-1]`, where `0` means completely dark and `1` means completely bright.

highlight

Highlight filter.

Parameter Name	Type	Default Value	Description
color	string	`red`	Highlight color.
width	number	`1`	Width of the highlight border.
blur	number	`0`	Blur radius.
opacity	number	`1`	Opacity.

outline

Outline filter.

Parameter Name	Type	Default Value	Description
color	string	`blue`	Outline color.
width	number	`1`	Outline width.
margin	number	`2`	Margin.
opacity	number	`1`	Opacity.

Custom Filters

A filter definition is a function with the following signature that returns a <filter> tag string.

export type Definition<T> = (args: T) => string

For example, the definition of the Gaussian blur filter is:

export interface BlurArgs {
  x?: number
  y?: number
}

export function blur(args: BlurArgs = {}) {
  const x = getNumber(args.x, 2)
  const stdDeviation = args.y != null && isFinite(args.y) ? [x, args.y] : x

  return `
    <filter>
      <feGaussianBlur stdDeviation="${stdDeviation}"/>
    </filter>
  `.trim()
}

We can register a filter by calling the Graph.registerFilter(...) method.

Graph.registerFilter('blur', blur)