start

A technical framework out of the box must have complete supporting tools. X6 provides a large number of graph editing functions, they are basically based on configuration, and configuration parameters are through a large number of business practices, the development process fully consider scalability and compatibility, can cover most of the functional scenarios.

implementation

Node scale

Dragging and dropping to change the size and rotation Angle of a node is a common feature, and in X6 only a simple configuration is required:

const graph = new Graph({
  resizing: true.rotating: true,})Copy the code

You can also change the default style of action elements using CSS:

.x6-widget-transform {
  margin: -1px 0 0 -1px;
  padding: 0px;
  border: 1px solid #239EDD;
  > div {
    border: 1px solid #239EDD;
  }
  > div:hover {
    background-color: #3DAFE4;
  }
  .x6-widget-transform-active-handle {
    background-color: #3DAFE4; }}.x6-widget-transform-resize {
  border-radius: 0;
}
Copy the code

choose

The select function provides a quick way to move and delete nodes in batches. It is a frequently used function.

const graph = new Graph({
  selecting: {
    enabled: true.rubberband: true.showNodeSelectionBox: true}})Copy the code

Alignment line

Alignment lines are an important aid to help us achieve node alignment:

const graph = new Graph({
  snapline: true,})Copy the code

You can also customize alignment styles by modifying the CSS:

.x6-widget-snapline-vertical {
  border-right-color: #239EDD;
}
.x6-widget-snapline-horizontal {
  border-bottom-color: #239EDD;
}
Copy the code

Cancel the redo

X6 records node addition, deletion and attribute modification in real time, and can be returned to any position in the history record through the undo operation.

const graph = new Graph({
  history: true,
})

graph.addNode(...)
graph.history.undo() // Delete the new node
graph.history.redo()  // Restore the new node
Copy the code

Sometimes we want to undo multiple operations at once. X6 provides batchUpdate, a batch operation is recorded only once.

graph.batchUpdate('rename'.() = > {
  rect.prop('zIndex'.10)
  rect.attr('label/text'.'hello')
  rect.attr('label/fill'.'#ff0000')})Copy the code

The small map

In the infinite canvas scenario, you need to pay attention to where the viewport is on the canvas and quickly locate distant canvas elements. This is where the minimap function is needed. The minimap is actually a thumbnail of the canvas that can be quickly panned and zoomed.

const graph = new Graph({
  minimap: {
    enabled: true.container: document.getElementById('minimap')! , width:198.height: 198.padding: 10,}})Copy the code

The last

Choosing a good framework can greatly improve the efficiency of development. X6 provides a wealth of out-of-the-box features through a few simple configurations, which is very friendly for novices.

  1. Source: portal
  2. Remember to star X6 warehouse