I'm using GOjs to create nodes and to connect them with each other just like a flow diagram. I have two div. In the first div (id="NodesContainer") I'm creating go.Palette and by using the id of second div (id="myDiagram") I'm designing the nodes on calling of Init() method in javascript.
When I connect two nodes, the left and right ports of the nodes form at the center of entire node size instead of the center of node shape. Thus when we connect the nodes it looks so weird.
How can I move the position of left and right ports to little bit upper at the center of the node image? Please help me if you know the answer.
Here is the image what I exactly want. Please click here to see the image
//initialize the Palette that is on the top side of the page
NodesContainer =
$(go.Palette, "NodesContainer", // must name or refer to the DIV HTML element
{
//"animationManager.duration": 800, // slightly longer than default (600ms) animation
nodeTemplateMap: myDiagram.nodeTemplateMap, // share the templates used by myDiagram
model: new go.GraphLinksModel([ // specify the contents of the Palette
{ category: "START", img: "../../Content/images/Start_Node.png" },
{ category: "END", img: "../../Content/images/End_Node.png" },
{ category: "ConnectorIn", img: "../../Content/images/Connector_In_Node.png" },
{ category: "ConnectorOut", img: "../../Content/images/Connector_Out_Node.png" },
{ category: "Comment", img: "../../Content/images/Comment_Node.png" },
{ category: "DECISION", img: "../../Content/images/Decision_Node.png" },
{ category: "Execution", img: "../../Content/images/Custom_Execution_Node.png" }
])
});
//end of Initialize the Palette that is on the top side of the page
function initNodes() {
var vargojsshapetextsize = [];
if (window.goSamples) goSamples();
function nodeStyle() {
return [
// The Node.location comes from the "loc" property of the node data,
// converted by the Point.parse static method.
// If the Node.location is changed, it updates the "loc" property of the node data,
// converting back using the Point.stringify static method.
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
{
// the Node.location is at the center of each node
locationSpot: go.Spot.Center,
//isShadowed: true,
//shadowColor: "#888",
// handle mouse enter/leave events to show/hide the ports
mouseEnter: function (e, obj) { showPorts(obj.part, true); },
mouseLeave: function (e, obj) { showPorts(obj.part, false); }
}
];
}
// Define a function for creating a "port" that is normally transparent.
function makePort(name, spot, output, input) {
// the port is basically just a small circle that has a white stroke when it is made visible
return $(go.Shape, "Circle",
{
fill: "transparent",
stroke: null, // this is changed to "white" in the showPorts function
desiredSize: new go.Size(8, 8),
alignment: spot,
alignmentFocus: spot, // align the port on the main Shape
portId: name, // declare this object to be a "port"
fromSpot: spot,
toSpot: spot, // declare where links may connect at this port
fromLinkable: output,
toLinkable: input, // declare whether the user may draw links to/from here
fromLinkableDuplicates: true,
toLinkableDuplicates: true,
fromMaxLinks: 1,
toMaxLinks: 1,// declare whether the user may draw links to/from here
cursor: "pointer" // show a different cursor to indicate potential link point
});
}
// Make link labels visible if coming out of a "conditional" node.
// This listener is called by the "LinkDrawn" and "LinkRelinked" DiagramEvents.
function showLinkLabel(e) {
var label = e.subject.findObject("LABEL");
if (label !== null)
label.visible = (e.subject.fromNode.data.figure === "Diamond");
}
// Make all ports on a node visible when the mouse is over the node
function showPorts(node, show) {
var diagram = node.diagram;
if (!diagram || diagram.isReadOnly || !diagram.allowLink) return;
node.ports.each(function (port) {
port.stroke = (show ? "#3e7dba" : null);
});
}
var $ = go.GraphObject.make; // for conciseness in defining templates
myDiagram = $(go.Diagram, "myDiagram", // must name or refer to the DIV HTML element
{
initialContentAlignment: go.Spot.TopCenter,
allowDrop: true, // must be true to accept drops from the Palette
initialContentAlignment: go.Spot.Center, //For Allignment
"undoManager.isEnabled": true,
//allowResize:true,
"LinkDrawn": showLinkLabel, // this DiagramEvent listener is defined below
"LinkRelinked": showLinkLabel,
"animationManager.duration": 1200, // slightly longer than default (600ms) animation
"undoManager.isEnabled": true // enable undo & redo
});
// define the Node templates for regular nodes
var lightText = 'whitesmoke';
myDiagram.nodeTemplateMap.add("TaskNodes",
$(go.Node, "Spot", nodeStyle(),
$(go.Panel, "Vertical",
$(go.Picture,
{
maxSize: new go.Size(30, 30),
portId: "",
},
new go.Binding("source", "img")),
$(go.TextBlock,
{
margin: new go.Margin(3, 0, 0, 0),
wrap: go.TextBlock.WrapFit,
textAlign: "center",
font: "5pt sans-serif",
isMultiline: true,
editable: true,
height: 14,
width: 30,
stroke: "black"
},
new go.Binding("text", "text").makeTwoWay())
),
// four named ports, one on each side:
makePort("T", go.Spot.Top, false, true),
makePort("L", go.Spot.Left, true, true),
makePort("R", go.Spot.Right, true, true),
makePort("B", go.Spot.Bottom, true, false)
));
myDiagram.nodeTemplateMap.add("Execution",
$(go.Node, "Spot", nodeStyle(),
$(go.Panel, "Auto",
$(go.Picture,
{
maxSize: new go.Size(30, 30)
},
new go.Binding("source", "img"))
),
// four named ports, one on each side:
makePort("T", go.Spot.Top, false, true),
makePort("L", go.Spot.Left, true, true),
makePort("R", go.Spot.Right, true, true),
makePort("B", go.Spot.Bottom, true, false)
));
}
Construct your node templates in a Vertical Panel, with an inner Spot Panel to contain the Ports, like so:
myDiagram.nodeTemplateMap.add("TaskNodes",
$(go.Node, "Vertical", nodeStyle(),
$(go.Panel, "Spot",
$(go.Picture,
{
maxSize: new go.Size(30, 30),
portId: "",
},
new go.Binding("source", "img")
),
// four named ports, one on each side:
makePort("T", go.Spot.Top, false, true),
makePort("L", go.Spot.Left, true, true),
makePort("R", go.Spot.Right, true, true),
makePort("B", go.Spot.Bottom, true, false)
), // end Spot Panel
$(go.TextBlock,
{
margin: new go.Margin(3, 0, 0, 0),
wrap: go.TextBlock.WrapFit,
textAlign: "center",
font: "5pt sans-serif",
isMultiline: true,
editable: true,
height: 14,
width: 30,
stroke: "black"
},
new go.Binding("text", "text").makeTwoWay()
)
)
);