How to simulate a user selecting a node from Javascript?

[Jim Jacobs]

Hi,

I'm using an automated tool to perform testing of our diagrams and am coding some Javascript within the tool.

I want to simulate the user clicking on a node which should cause the selectionChangeHandler event to fire.

I was hoping that diagram.addSelection(node1); would do the job, but it does not seem to work.

Here's my complete code:

var ports = [

{ name: "in", offset: { x: 0, y: 0.5 }, shape: "square", fillColor: "green" },

{ name: "out", offset: { x: 1, y: 0.5 }, shape: "square", fillColor: "green" }

];

var connectors = [{

name: "flow1",

sourceNode: "node1",

targetNode: "node2",

sourcePort: "out",

targetPort: "in"

}];

var addInfo = { NodeType: "Task", TaskType: "Task" };

var node1 = {

name: "node1", width: 120, height: 60,

offsetX: 100, offsetY: 100,

fillColor: "white", borderWidth: 1,

labels: [{ text: "Submit RFC" }],

addInfo: addInfo, ports: ports

};

var node2 = {

name: "node2", width: 120, height: 60,

offsetX: 325, offsetY: 100,

fillColor: "white", borderWidth: 1,

labels: [{ text: "Approve RFC" }],

addInfo: addInfo, ports: ports

};

var nodes = [node1, node2];

// Add nodes and connectors to the Diagram

diagram.add(nodes);

diagram.add(connectors);

diagram.clearSelection();

diagram.addSelection(node1);

diagram.nudge("down", 300);

console.log('diagram.model.selectedItems.children.length = ' + diagram.model.selectedItems.children.length);

The nodes and the connector are drawn correctly, but the nudge does not work and the selectedItems.children.length shows as zero!

Any suggestions for what I need to do to simulate a user selection in code?

Thanks

Jim

[Shyam G]

Hi Jim, 

 

When you add nodes and connectors at runtime and clear a selection using clearSelection method, the selectedItems children property will not contain any items. So, you need to get a node object using the method getNode, and pass it through the method addSelection as a parameter. 

 

Code example: 

function addSelection() { 

               var diagram = $("#diagram").ejDiagram("instance"); 

              . . . .  

               diagram.add(nodes); 

                diagram.add(connectors); 

               diagram.clearSelection(); 

            //find a node with name 

               var node = diagram.getNode("node1"); 

            //add selection 

               diagram.addSelection(node); 

                diagram.nudge("down", 300);  

      } 

 

 

Sample: http://jsplayground.syncfusion.com/lp4yq5vs 

 

Regards, 

Shyam G 

[Jim Jacobs]

Hi Shyam,

It's been a while since we chatted.

Glad to see you're still providing excellent support!

You're tip worked.  Thanks

I have another question.

Is there anyway to simulate (via JavaScript) a user dragging a shape form the palette and dropping it on the canvas?

And if so, will the drop and nodecollectionchange events be fired?

Thanks for any advice.

Jim

[Shyam G]

Hi Jim, 

Sorry for the delay. 

We don’t have any Javascript API to drag and drop the shapes from palette into the diagram. We can drag the shapes from the palette by mouse. 

Regards, 

Shyam G