Show / Hide Table of Contents

Ports

Ports are used to connect shapes with links, when you create a link you can specify not only shape from and shape to, but also fromPort and toPort. Lets create a shape with 4 ports on the right side and 4 on the left:

 

FlowChart.shapeTemplates.myProcessWith5Ports.ports = function(shape) {
    var portSeparator = shape.height / 5;
    return{
        p1: { y: portSeparator * 1,  x: shape.width },
        p2: { y: portSeparator * 2 , x: shape.width },
        p4: { y: portSeparator * 3 , x: shape.width },
        p4: { y: portSeparator * 4 , x: shape.width },

        p5: { y: portSeparator * 1,  x: 0 },
        p6: { y: portSeparator * 2, x: 0 },
        p7: { y: portSeparator * 3, x: 0 },
        p8: { y: portSeparator * 4, x: 0 }  
    }               
}