diff --git a/script/goJSmodel.js b/script/goJSmodel.js index d59fb23..a73d1eb 100644 --- a/script/goJSmodel.js +++ b/script/goJSmodel.js @@ -1,33 +1,99 @@ -var myDiagram = $(go.Diagram, "myDiagramDiv", - { - "animationManager.isEnabled": false, - "undoManager.isEnabled": true // enable undo & redo - }); +var myDiagram = + $(go.Diagram, "myDiagramDiv", + { // automatically scale the diagram to fit the viewport's size + initialAutoScale: go.Diagram.Uniform, + // disable user copying of parts + allowCopy: false, + // position all of the nodes and route all of the links + layout: $(go.LayeredDigraphLayout, + { + direction: 90, + layerSpacing: 10, + columnSpacing: 15, + setsPortSpots: false + }) + }); +function convertKeyImage(key) { + if (!key) key = "NE"; + return "https://www.nwoods.com/go/beatpaths/" + key + "_logo-75x50.png"; +} +// replace the default Node template in the nodeTemplateMap +myDiagram.nodeTemplate = + $(go.Node, "Vertical", // the whole node panel + $(go.TextBlock, // the text label + new go.Binding("text", "key")), + $(go.Picture, // the icon showing the logo + // You should set the desiredSize (or width and height) + // whenever you know what size the Picture should be. + { desiredSize: new go.Size(75, 50) }, + new go.Binding("source", "key", convertKeyImage)) + ); +// replace the default Link template in the linkTemplateMap +myDiagram.linkTemplate = + $(go.Link, // the whole link panel + { curve: go.Link.Bezier, toShortLength: 2 }, + $(go.Shape, // the link shape + { strokeWidth: 1.5 }), + $(go.Shape, // the arrowhead + { toArrow: "Standard", stroke: null }) + ); - // define a simple Node template - myDiagram.nodeTemplate = - $(go.Node, "Auto", // the Shape will go around the TextBlock - $(go.Shape, "RoundedRectangle", { strokeWidth: 0 }, - // Shape.fill is bound to Node.data.color - new go.Binding("fill", "color")), - $(go.TextBlock, - { margin: 8 }, // some room around the text - // TextBlock.text is bound to Node.data.key - new go.Binding("text", "key")) - ); +// the array of link data objects: the relationships between the nodes +var linkDataArray = [ + { from: "CAR", to: "ARI" }, + { from: "ARI", to: "CIN" }, + { from: "ARI", to: "GB" }, + { from: "DEN", to: "GB" }, + { from: "DEN", to: "CIN" }, + { from: "DEN", to: "NE" }, + { from: "GB", to: "WAS" }, + { from: "WAS", to: "STL" }, + { from: "CIN", to: "STL" }, + { from: "STL", to: "SEA" }, + { from: "SEA", to: "SF" }, + { from: "SEA", to: "MIN" }, + { from: "NE", to: "NYG" }, + { from: "NE", to: "KC" }, + { from: "MIN", to: "DET" }, + { from: "MIN", to: "KC" }, + { from: "KC", to: "HOU" }, + { from: "KC", to: "BUF" }, + { from: "KC", to: "BAL" }, + { from: "KC", to: "OAK" }, + { from: "BUF", to: "NYJ" }, + { from: "BAL", to: "PIT" }, + { from: "DET", to: "NO" }, + { from: "DET", to: "PHI" }, + { from: "DET", to: "CHI" }, + { from: "HOU", to: "JAC" }, + { from: "HOU", to: "TEN" }, + { from: "PIT", to: "IND" }, + { from: "PIT", to: "SD" }, + { from: "OAK", to: "NYJ" }, + { from: "OAK", to: "SD" }, + { from: "NO", to: "ATL" }, + { from: "NO", to: "NYG" }, + { from: "PHI", to: "NYG" }, + { from: "CHI", to: "TB" }, + { from: "NYJ", to: "IND" }, + { from: "NYJ", to: "CLE" }, + { from: "IND", to: "TB" }, + { from: "TB", to: "ATL" }, + { from: "SD", to: "CLE" }, + { from: "ATL", to: "DAL" }, + { from: "ATL", to: "JAC" }, + { from: "CLE", to: "TEN" }, + { from: "DAL", to: "MIA" }, + { from: "MIA", to: "TEN" } +]; + +// create the model and assign it to the Diagram +myDiagram.model = + new go.GraphLinksModel( + { // automatically create node data objects for each "from" or "to" reference + // (set this property before setting the linkDataArray) + archetypeNodeData: {}, + // process all of the link relationship data + linkDataArray: linkDataArray + }); - // create the model data that will be represented by Nodes and Links - myDiagram.model = new go.GraphLinksModel( - [ - { key: "Alpha", color: "lightblue" }, - { key: "Beta", color: "orange" }, - { key: "Gamma", color: "lightgreen" }, - { key: "Delta", color: "pink" } - ], - [ - { from: "Alpha", to: "Beta" }, - { from: "Alpha", to: "Gamma" }, - { from: "Beta", to: "Beta" }, - { from: "Gamma", to: "Delta" }, - { from: "Delta", to: "Alpha" } - ]);