How to add PORTS to the NODES which are created using the "diagram.model.drawType"

[AB]

I would like to add the ports to each element that was created using the method: diagram.model.drawType.

I am following the link http://ngjq.syncfusion.com/#/diagram/drawingtools and trying to create the shapes using the HTML NODE type. After creating the shapes in ejdiagram I would like to add the PORTS automatically so that user can use the CONNECTOR later to connect various NODES easily. After trying a lot I am able to add  PORTS by providing the 4 OFFSET values so the PORT can be available on all 4 sides of the NODE.

I am still unsure what I need to do if I want to make my NODES have PORTS all around it (Meaning each point near the NODE should act has PORT so CONNECTOR can automatically get linked to it when hovered). Adding the OFFSET value for each of them is not a ideal option do you have any ALTERNATIVE approach using which I can create the PORTS all around?

The code I have so far:

//On item click drag and drop the elements to canvas

$scope.onItemclick = function(args){

var option = args.currentTarget.id;

var ports = [{name:"port1",offset:{x:0,y: 0.5},shape: "circle"},{name:"port2",offset:{x: 1,y: 0.5},shape: "circle"},{name:"port3",offset:{x:0.5,y:0},shape: "circle"},{name:"port4",offset:{x:0.5,y:1},shape: "circle"}];

//var ports = [{ name: "in", offset: { x: 1, y: 0.5 }, shape: "circle", visibility:ej.datavisualization.Diagram.PortVisibility.Visible }];

var labels = [{text: "Node "+counter,offset:{x: 0.5,y: 0.1 }}];

switch (option) {

case "Html_Tool":

diagram.model.drawType = {labels:labels, type: "html", templateId: "htmlTemplate", ports: ports};

//diagram.addPorts("node", ports);

$scope.counts.push(counter);

counter++;

$scope.$apply()

console.log(diagram.model.drawType);

break;

case "Connector_Tool":

diagram.model.drawType = { type: "connector"};

break;

}

var tool = diagram.tool();

diagram.update({ tool: tool | ej.datavisualization.Diagram.Tool.DrawOnce })

}

Also, after adding the CONNECTOR between the NODES. I want to know how can I find the SOURCE POINT and DESTINATION POINT of a CONNECTOR once it has been added. I am trying to fire the following function but in that I don't get any info e.connectionChange="connectionChange"

Can you please help me resolve this issue? 

Here is the figure of what I have so far for your reference:

[Aravind Ravi]

Hi AB, 

If you want to create a connection for node in any place means then want to use the port. If you don’t use the port means then connector gets connected to left side of the node. So we do not have any other support to connect the connector anywhere in the node. By using port only we can connect the connector to anywhere in node. So you want to create a multiple port with offset on the node border and connect with connector.  

Regards 

Aravind Ravi 

[AB]

Hi Aravind Ravi,

Thanks a lot for the explanation. Sure, I will add the PORTS using the offset.

[Aravind Ravi]

Hi AB, 

Thanks for the update. 

Regards 

Aravind Ravi