offsetX and offsetY value for node

Question

Hi, how can I get the offsetX and offsetY of a node when it is dragging into the diagram space and first time when it is dropping into the diagram space.

Shyam G · Answer

Hi Rakhi,

When we drag a node from the palette and drop it onto the diagram, the drop event gets triggered. In this event, you can get a node offsetX and offsetY value from the argument element property. When we drag a element in the diagram, the positionChange event gets triggered. In this event, we can get a offsetX and offsetY value from the argument newValue property. Please refer to a code example and the sample below.

Code example:

<ejs-diagram #diagram id="diagram" width="100%" height="700px" (drop)="drop($event)" (positionChange)="positionChange($event)"> </ejs-diagram>

//drop event triggers when we drop a element in the diagram which is dragged from the palette

public drop(args: IDropEventArgs): void {

if(args.element) {

if(args.element instanceof Node) {

//set an offset values

args.element.offsetX = 300;

args.element.offsetY = 300;

}

//positionChange event triggers while dragging a element in the diagram

public positionChange(args: IDraggingEventArgs): void {

if(args.state === 'Completed') {

//get an offset value

let offsetX=args.newValue.offsetX;

let offsetY= args.newValue.offsetY;

}

Sample: https://stackblitz.com/edit/angular-uw2jg2?file=app.component.ts

Regards,

Shyam G

RakhiS · Answer

Thanks,my work is possible using position change, but in this how can I get the id of the node which is currently repositioning.

Shyam G · Answer

Hi Rakhi, 

In the positionChange event, you will get a selectedItems object in the arguments source property. If you are interacting with the node, you can get the selected node from arguments source nodes property. Similarly for the connectors, use arguments source connectors property. Please refer to a code example and the sample below. 

Code example: 




//positionChange event triggers while dragging a element in the diagram 
  public positionChange(args: IDraggingEventArgs): void {   
    if(args.state === 'Completed') {    
     //get a selected node 
      let node = args.source.nodes[0]; 
      if(node) { 
        //get a node id 
        let nodeId = node.id; 
      } 
      //get a selected connector 
      let connector = args.source.connectors[0]; 
      if(connector) { 
        //get a connector id 
        let connectorId = connector.id; 
      } 
      //get an offset value 
        let offsetX=args.newValue.offsetX; 
       let offsetY= args.newValue.offsetY;  
    } 
  } 

Sample: https://stackblitz.com/edit/angular-uw2jg2-b3zxcr?file=app.component.ts 

Regards, 
Shyam G

RakhiS · Answer

Hi,I tried with same but I am getting error: and this error is also showing under the sample code provided from you. Please have alook

Shyam G · Answer

Hi Rakhi, 

We have modified the code example to resolve your reported issue. Please refer to a code example and the sample below. 

Code example: 




//positionChange event triggers while dragging a element in the diagram 
  public positionChange(args: IDraggingEventArgs): void {   
    if(args.state === 'Completed') {    
     //get a selected node 
      let node = (args.source.nodes && args.source.nodes.length > 0) ? args.source.nodes[0]: {}; 
      if(node) { 
        //get a node id 
        let nodeId = node.id; 
      } 
      //get a selected connector 
      let connector = (args.source.connectors && args.source.connectors.length) > 0 ? args.source.connectors[0]: {}; 
      if(connector) { 
        //get a connector id 
        let connectorId = connector.id; 
      } 
      //get an offset value 
        let offsetX=args.newValue.offsetX; 
       let offsetY= args.newValue.offsetY;  
    } 
  } 


Sample: https://stackblitz.com/edit/angular-uw2jg2-cfssy8?file=app.component.ts 

Regards, 
Shyam G

RakhiS · Answer

Hi,  I tried the same code. At firt time I am getting offsetX and offsetY value for the current node but node id is undefined and second time it is giving

Shyam G · Answer

Hi Rakhi, 

You get a node id in the positionChange event while moving the node. Similarly, you get a connector id while moving the connector. Could you please check in the below sample? Still if you face any issues, please share us more details such as elaborate your issue in detail with video or screenshot. 

Sample: https://stackblitz.com/edit/angular-uw2jg2-c9ubqg?file=app.component.ts 

Regards, 
Shyam G