Hi I’m trying to recreate the sequence diagram here: Sequential Function Chart
But no links are being shown and the objects are just rendered in a horizontal line.
Here is my code:
var myDiagram =
$(go.Diagram, “myDiagramDiv”, // must be the ID or reference to an HTML DIV
{
// start everything in the middle of the viewport
initialContentAlignment: go.Spot.Center,
layout: $(go.LayeredDigraphLayout, { direction: 90, layerSpacing: 10, setsPortSpots: false }),
“undoManager.isEnabled”: true // enable undo & redo
});
// define the step Node template
myDiagram.nodeTemplateMap.add("step",
$(go.Node, "Spot",
{ locationSpot: go.Spot.Center },
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Shape, "Rectangle",
{
fill: "whitesmoke",
stroke: "gray",
strokeWidth: 2,
desiredSize: new go.Size(160, 60),
portId: "", // so that links connect to the Shape, not to the whole Node
fromSpot: go.Spot.BottomSide,
toSpot: go.Spot.TopSide,
alignment: go.Spot.Center
}),
$(go.TextBlock,
{
font: "bold 16px sans-serif",
alignment: go.Spot.Center,
wrap: go.TextBlock.WrapFit,
editable: true
},
new go.Binding("text", "text").makeTwoWay())
));
// define the transition Node template.
myDiagram.nodeTemplateMap.add("transition",
$(go.Node, "Horizontal",
{ locationSpot: go.Spot.Center, locationObjectName: "BAR" },
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Shape, "Rectangle",
{
name: "BAR",
fill: "black",
stroke: null,
desiredSize: new go.Size(60, 8),
portId: "",
fromSpot: go.Spot.BottomSide,
toSpot: go.Spot.TopSide
}),
$(go.TextBlock,
{ editable: true, margin: 3 },
new go.Binding("text", "text").makeTwoWay())
));
// define the parallel Node template.
myDiagram.nodeTemplateMap.add("parallel",
$(go.Node,
{ locationSpot: go.Spot.Center },
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Shape, "Rectangle",
{
fill: "whitesmoke",
stroke: "black",
fromSpot: go.Spot.BottomCenter,
toSpot: go.Spot.TopCenter,
desiredSize: new go.Size(200, 6),
portId: ""
})
));
// define the Link template
myDiagram.linkTemplate =
$(go.Link,
{ routing: go.Link.Orthogonal },
$(go.Shape,
{ stroke: "black", strokeWidth: 2 })
);
var model = $(go.Model);
model.nodeDataArray =
[
{ key: "S1", category: "step", text: "Step 0" },
{ key: "TR1", category: "transition", text: "Transition 1" },
{ key: "S2", category: "step", text: "Step 2" },
{ key: "TR2",category: "transition", text: "Transition 2" },
{ key: "BAR1", category: "parallel" },
{ key: "S3", category: "step", text: "Step 3" },
{ key: "S4", category: "step", text: "Step 4" },
{ key: "BAR2", category: "parallel" },
{ key: "TR3", category: "transition", text: "Transition 3" },
{ key: "S5", category: "step", text: "Step 5" }
];
model.linkDataArray = [
{ from: "S1", to: "TR1" },
{ from: "TR1", to: "S2" },
{ from: "S2", to: "TR2" },
{ from: "TR2", to: "BAR1" },
{ from: "BAR1", to: "S3" },
{ from: "BAR1", to: "S4" },
{ from: "S3", to: "BAR2" },
{ from: "S4", to: "BAR2" },
{ from: "BAR2", to: "TR3" },
{ from: "TR3", to: "S5" }
]
myDiagram.model = model;
What am i doing wrong?
Thanks,
Chris
