Usage

Using UI components to adjust node size and angle is a common requirement. We provide a standalone plugin package @antv/x6-plugin-transform to utilize this functionality.

# npm
$ npm install @antv/x6-plugin-transform --save

# yarn
$ yarn add @antv/x6-plugin-transform

Then we can use it in our code like this:

import { Transform } from '@antv/x6-plugin-transform'

const graph = new Graph({
  background: {
    color: '#F2F7FA',
  },
})
graph.use(
  new Transform({
    resizing: resizingOptions,
    rotating: rotatingOptions,
  }),
)

Demo

First, let's experience interactive resizing of nodes (clicking on a node brings up the operation component):

Next, let's experience interactive rotation of nodes (clicking on a node brings up the operation component):

Configuration

Resizing

The above configuration supports dynamic modification using functions as well:

new Transform({
  resizing: {
    enabled: true,
    orthogonal(node: Node) {
      const { enableOrthogonal } = node.getData()
      return enableOrthogonal
    },
  },
})

Rotating

The above configuration also supports dynamic modification using functions:

new Transform({
  rotating: {
    enabled: true,
    grid() {
      return 30
    },
  },
})

API

graph.createTransformWidget(node: Node)

Creates a transform control for the node.

graph.clearTransformWidgets()

Clears all transform controls.

Events

graph.on('node:rotated', ({ node }) => {
  console.log(node.angle())
})

// We can also listen to events on the plugin instance
transform.on('node:rotated', ({ node }) => {
  console.log(node.angle())
})