We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to simulate a user selecting a node from Javascript?

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




3 Replies

SG Shyam G Syncfusion Team January 22, 2020 02:57 AM

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);  
      } 
 
 
 
Regards, 
Shyam G 



JJ Jim Jacobs January 22, 2020 07:52 AM

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




SG Shyam G Syncfusion Team January 24, 2020 01:49 AM

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 


Loader.
Live Chat Icon For mobile
Up arrow icon