Node Interaction in Angular Diagram control

31 Jan 202524 minutes to read

The diagram provides support for selecting, dragging, resizing, and rotating nodes interactively. A node can be selected by simply clicking on it, dragged by dragging it on diagram canvas, resized using the resize handle, and rotated using the rotate handle. Additionally, interactions can be performed using some public methods, which are explained below:

Select

You can simply click on the node to select it and click on diagram canvas to unselect it like below.

Select/UnSelect Node

To select node programatically

A node can be selected at runtime by using the select method and the selection can be cleared in the diagram by using the clearSelection or unSelect method. The following code explains how to select and clear selection in the diagram.

import { DiagramModule, DiagramComponent, NodeModel, ShapeStyleModel } from '@syncfusion/ej2-angular-diagrams'
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
@Component({
imports: [
         DiagramModule
    ],

providers: [ ],
standalone: true,
    selector: "app-container",
    template: `<button (click) = "select()">Select</button>
    <button (click) = "unSelect()">UnSelect</button>
    <ejs-diagram #diagram id="diagram" width="100%" height="580px" [getNodeDefaults] ='getNodeDefaults'>
        <e-nodes>
            <e-node id='node1' [offsetX]=350 [offsetY]=250 ></e-node>
        </e-nodes>
    </ejs-diagram>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    @ViewChild("diagram")
    public diagram?: DiagramComponent;
    public style?: ShapeStyleModel;
    public getNodeDefaults(node: NodeModel): NodeModel {
        node.height = 100;
        node.width = 100;
        return node;
    }
    select() {
        (this.diagram as any).select([(this.diagram as any).nodes[0]]);
    }
    unSelect() {
        (this.diagram as any).clearSelection()
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Method Parameter Description
unSelect NodeModel/ConnectorModel The object to remove from the selection.
clearSelection - Clears all the selection in the diagram.

Drag

You can simply mousedown on a node and drag it anywhere on the diagram canvas like below.

Drag node

To drag node programatically

A node can be dragged at runtime by using the drag method. The following code explains how to drag the node by using the drag method.

import { DiagramModule, DiagramComponent, NodeModel, ShapeStyleModel } from '@syncfusion/ej2-angular-diagrams'
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';

@Component({
imports: [
         DiagramModule
    ],

providers: [ ],
standalone: true,
    selector: "app-container",
    template: `<button (click) = "drag()">Drag</button>
    <ejs-diagram #diagram id="diagram" width="100%" height="580px" [getNodeDefaults] ='getNodeDefaults'>
        <e-nodes>
            <e-node id='node1' [offsetX]=350 [offsetY]=250 ></e-node>
        </e-nodes>
    </ejs-diagram>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    @ViewChild("diagram")
    public diagram?: DiagramComponent;
    public style?: ShapeStyleModel;
    public getNodeDefaults(node: NodeModel): NodeModel {
        node.height = 100;
        node.width = 100;
        return node;
    }
    drag() {
        (this.diagram as any).drag((this.diagram as any).nodes[0], 50, 50);
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Resize

When we select a node a resize handle will appear on all the sides of the node. We can resize the node by clicking and dragging the resize handle.

Resize Node

To resize node programatically

A node can be resized at runtime by using the scale method. The following code explains how to resize the node by using the scale method.

import {
  DiagramModule, DiagramComponent,
  NodeModel,
  ShapeStyleModel,
} from '@syncfusion/ej2-angular-diagrams';
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';

@Component({
  imports: [DiagramModule],

  providers: [],
  standalone: true,
  selector: 'app-container',
  template: `<button (click) = "reSize()">Resize</button>
    <ejs-diagram #diagram id="diagram" width="100%" height="580px" [getNodeDefaults] ='getNodeDefaults'>
        <e-nodes>
            <e-node id='node1' [offsetX]=350 [offsetY]=250 ></e-node>
        </e-nodes>
    </ejs-diagram>`,
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  @ViewChild('diagram')
  public diagram?: DiagramComponent;
  public style?: ShapeStyleModel;
  public getNodeDefaults(node: NodeModel): NodeModel {
    node.height = 100;
    node.width = 100;
    return node;
  }
  reSize() {
    (this.diagram as any).scale((this.diagram as any).nodes[0], 0.5, 0.5, {
      x: 0.5,
      y: 0.5,
    });
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Rotate

A node can be rotated interactively by clicking and dragging the rotate handle of the node.

Rotate Node

To rotate node programatically

A node can be rotated at runtime by using the rotate method. The following code explains how to rotate the node by using the rotate method.

import {
  DiagramModule, DiagramComponent,
  NodeModel,
  ShapeStyleModel,
} from '@syncfusion/ej2-angular-diagrams';
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';

@Component({
  imports: [DiagramModule],

  providers: [],
  standalone: true,
  selector: 'app-container',
  template: `<button (click) = "rotate()">Rotate</button>
    <ejs-diagram #diagram id="diagram" width="100%" height="580px" [getNodeDefaults] ='getNodeDefaults'>
        <e-nodes>
            <e-node id='node1' [offsetX]=350 [offsetY]=250 ></e-node>
        </e-nodes>
    </ejs-diagram>`,
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  @ViewChild('diagram')
  public diagram?: DiagramComponent;
  public style?: ShapeStyleModel;
  public getNodeDefaults(node: NodeModel): NodeModel {
    node.height = 100;
    node.width = 100;
    return node;
  }
  rotate() {
    (this.diagram as any).rotate((this.diagram as any).nodes[0], (this.diagram as any).nodes[0].rotateAngle + 15);
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Flip

The diagram Provides support to flip the node. flip is performed to give the mirrored image of the original element.

The flip types are as follows:

Flip direction Description
HorizontalFlip Horizontal is used to flip the node to be mirrored across the horizontal axis.
VerticalFlip Vertical is used to flip the node to be mirrored across the vertical axis.
Both Both is used to flip the node to be mirrored across the horizontal and vertical axes.
None It is used to disable all the flip behavior.

The following code illustrates how to provide the mirror image of the original element.

import {
  DiagramModule,
  DiagramComponent,
  NodeModel,
  FlipDirection
} from '@syncfusion/ej2-angular-diagrams';

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
@Component({
  imports: [DiagramModule],

  providers: [],
  standalone: true,
  selector: 'app-container',
  template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" [getNodeDefaults] ='getNodeDefaults'>
        <e-nodes>
            <e-node id='node1' [offsetX]=350 [offsetY]=250 ></e-node>
        </e-nodes>
    </ejs-diagram>`,
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  @ViewChild('diagram')
  public diagram?: DiagramComponent;
  public getNodeDefaults(node: NodeModel): NodeModel {
    node.shape = {
      type: 'Basic',
      shape: 'RightTriangle',
    };
    node.height = 100;
    node.width = 100;
    node.flip = FlipDirection.Horizontal;
    return node;
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Update flip at runtime

You can dynamically update the flip for a node at runtime using the ^ operator. This operator allows you to apply the same flip direction multiple times, toggling the node’s orientation effectively.
The following example demonstrates how to update the flip for a node dynamically:

import {
  DiagramModule,
  DiagramComponent,
  NodeModel,
  FlipDirection
} from '@syncfusion/ej2-angular-diagrams';

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
@Component({
  imports: [DiagramModule],

  providers: [],
  standalone: true,
  selector: 'app-container',
  template: `
    <button (click)="flipHorizontal()">flipHorizontal</button>
    <button (click)="flipVertical()">flipVertical</button>
    <button (click)="flipBoth()">flipBoth</button>
    <button (click)="flipNone()">flipNone</button>

  <ejs-diagram #diagram id="diagram" width="100%" height="580px" [getNodeDefaults] ='getNodeDefaults'>
        <e-nodes>
            <e-node id='node1' [offsetX]=350 [offsetY]=250 ></e-node>
        </e-nodes>
    </ejs-diagram>`,
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  @ViewChild('diagram')
  public diagram?: DiagramComponent;
  public flipHorizontal() {
    this.diagram.nodes[0].flip ^= FlipDirection.Horizontal;
    this.diagram.dataBind();
  }
  public flipVertical() {
    this.diagram.nodes[0].flip ^= FlipDirection.Vertical;
    this.diagram.dataBind();
  }
  public flipBoth() {
    this.diagram.nodes[0].flip ^= FlipDirection.Both;
    this.diagram.dataBind();
  }
  public flipNone() {
    this.diagram.nodes[0].flip = FlipDirection.None;
    this.diagram.dataBind();
  }
  public getNodeDefaults(node: NodeModel): NodeModel {
    node.shape = {
      type: 'Basic',
      shape: 'RightTriangle',
    };
    node.height = 100;
    node.width = 100;
    node.flip = FlipDirection.Horizontal;
    return node;
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Flip modes

The flipMode is used to control the behavior of the flip object whether to flip the object along with the port and label.

FlipMode Description
Label It flips the label along with the object while keeping the text readable.
Port It flips the port along with the object.
All It flips the port, label, and label text along with the object.
None It flips only the object.
LabelText It flips the object and inverts the label without changing its position.
PortAndLabel It flips the port and label along with the object while keeping the text readable.
PortAndLabelText It flips the port and label text along with the object.
LabelAndLabelText It flips the label and label text along with the Object.

Below are examples of a node undergoing various FlipModes in different flip directions.

Flip Direction Flip Mode Default Node Flipped Node
Horizontal All Horizontal All HorizontalFlip All
Horizontal Label Horizontal Label HorizontalFlip Label
Horizontal LabelText Horizontal LabelText HorizontalFlip LabelText
Horizontal Port Horizontal Port HorizontalFlip Port
Horizontal None Horizontal None HorizontalFlip None
Horizontal PortAndLabel Horizontal PortAndLabel HorizontalFlip PortAndLabel
Horizontal PortAndLabelText Horizontal PortAndLabelText HorizontalFlip PortAndLabelText
Horizontal LabelAndLabelText Horizontal LabelAndLabelText HorizontalFlip LabelAndLabelText
Vertical All Vertical All VerticalFlip All
Vertical Label Vertical Label VerticalFlip Label
Vertical LabelText Vertical LabelText VerticalFlip LabelText
Vertical Port Vertical Port VerticalFlip Port
Vertical None Vertical None VerticalFlip None
Vertical PortAndLabel Vertical PortAndLabel VerticalFlip PortAndLabel
Vertical PortAndLabelText Vertical PortAndLabelText VerticalFlip PortAndLabelText
Vertical LabelAndLabelText Vertical LabelAndLabelText VerticalFlip LabelAndLabelText
Both All Both All BothFlip All
Both Label Both Label BothFlip Label
Both LabelText Both LabelText BothFlip LabelText
Both Port Both Port BothFlip Port
Both None Both None BothFlip None
Both PortAndLabel Both PortAndLabel BothFlip PortAndLabel
Both PortAndLabelText Both PortAndLabelText BothFlip PortAndLabelText
Both LabelAndLabelText Both LabelAndLabelText BothFlip LabelAndLabelText 
import {
  DiagramModule,
  PointPortModel,
  PortVisibility,
  DiagramComponent,
  NodeModel,
  FlipDirection,
} from '@syncfusion/ej2-angular-diagrams';

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';

@Component({
  imports: [DiagramModule],

  providers: [],
  standalone: true,
  selector: 'app-container',
  template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" [getNodeDefaults] ='getNodeDefaults'>
        <e-nodes>
            <e-node id='label' [offsetX]=150 [offsetY]=250 [ports]='ports'>
            <e-node-annotations>
                    <e-node-annotation content="FlipMode as Label" [offset]="annotationOffset">
                    </e-node-annotation>
                </e-node-annotations>
            </e-node>
            <e-node id='port' [offsetX]=450 [offsetY]=250 [ports]='ports'>
            <e-node-annotations>
                    <e-node-annotation content="FlipMode as Port" [offset]="annotationOffset">
                    </e-node-annotation>
                </e-node-annotations>
            </e-node>
            <e-node id='all' [offsetX]=150 [offsetY]=450 [ports]='ports'>
            <e-node-annotations>
                    <e-node-annotation content="FlipMode as All" [offset]="annotationOffset">
                    </e-node-annotation>
                </e-node-annotations>
            </e-node>
            <e-node id='none' [offsetX]=450 [offsetY]=450 [ports]='ports'>
            <e-node-annotations>
                    <e-node-annotation content="FlipMode as None" [offset]="annotationOffset">
                    </e-node-annotation>
                </e-node-annotations>
            </e-node>
        </e-nodes>
    </ejs-diagram>`,
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  @ViewChild('diagram')
  public diagram?: DiagramComponent;
  public annotationOffset = { x: 0, y: 0.8 };
  public ports: PointPortModel[] = [
    {
      // Sets the position for the port
      offset: {
        x: 0,
        y: 0.5,
      },
      visibility: PortVisibility.Visible,
    },
  ];
  public getNodeDefaults(node: NodeModel): NodeModel {
    node.shape = {
      type: 'Basic',
      shape: 'RightTriangle',
    };
    node.height = 100;
    node.width = 100;
    node.flip = FlipDirection.Horizontal;
    if (node.id === 'port') {
      (node as any).flipMode = 'Port';
    } else if (node.id === 'label') {
      (node as any).flipMode = 'Label';
    } else if (node.id === 'all') {
      (node as any).flipMode = 'All';
    } else {
      (node as any).flipMode = 'None';
    }
    return node;
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));