simonsarris/roundedRectWithLine.html

## roundedRectWithLine.html
<!doctype html>
<html>
<head>
<title>Minimal GoJS Sample</title>
<!-- Copyright 1998-2014 by Northwoods Software Corporation. -->
<script src="http://gojs.net/latest/release/go.js"></script>
<script id="code">
  function init() {
    if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
    var $ = go.GraphObject.make;  // for conciseness in defining templates

    myDiagram = $(go.Diagram, "myDiagram",  // create a Diagram for the DIV HTML element
                  {
                    initialContentAlignment: go.Spot.Center,  // center the content
                    "undoManager.isEnabled": true  // enable undo & redo
                  });

    // define a simple Node template
    myDiagram.nodeTemplate =
      $(go.Node, "Table",
        { width: 150 },
        $(go.RowColumnDefinition, { row: 0, height: 30 }),
        $(go.RowColumnDefinition, { row: 1, height: 2 }),
        $(go.RowColumnDefinition, { row: 2, height: 60 }),
        $(go.Shape, "RoundedRectangle", {
          rowSpan: 3,
          stretch: go.GraphObject.Fill,
          fill: "white",
          stroke: "lightgray", strokeWidth: 2
        }),
        $(go.Shape, "Rectangle", {
          row: 1,
          stretch: go.GraphObject.Fill,
          fill: "lightgray",
          stroke: null, strokeWidth: 0
        }),
        $(go.TextBlock, "Wait", { font: '24px sans-serif', row: 0 }),
        $(go.TextBlock, "72 hours", {
          margin: 3, row: 2,
          alignment: go.Spot.Top, alignmentFocus: go.Spot.Top
        }),
        $(go.TextBlock, "(image)", {
          margin: 3, row: 2,
          alignment: go.Spot.Bottom, alignmentFocus: go.Spot.Bottom
        })
      );

    // but use the default Link template, by not setting Diagram.linkTemplate

    // 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" }
    ],
    [
    ]);
  }
</script>
</head>
<body onload="init()">
<div id="sample">
  <div id="myDiagram" style="border: solid 1px black; width:400px; height:400px; background: whitesmoke"></div>

</div>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>Minimal GoJS Sample</title>
	<!-- Copyright 1998-2014 by Northwoods Software Corporation. -->
	<script src="http://gojs.net/latest/release/go.js"></script>
	<script id="code">
	function init() {
	if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this
	var $ = go.GraphObject.make; // for conciseness in defining templates

	myDiagram = $(go.Diagram, "myDiagram", // create a Diagram for the DIV HTML element
	{
	initialContentAlignment: go.Spot.Center, // center the content
	"undoManager.isEnabled": true // enable undo & redo
	});

	// define a simple Node template
	myDiagram.nodeTemplate =
	$(go.Node, "Table",
	{ width: 150 },
	$(go.RowColumnDefinition, { row: 0, height: 30 }),
	$(go.RowColumnDefinition, { row: 1, height: 2 }),
	$(go.RowColumnDefinition, { row: 2, height: 60 }),
	$(go.Shape, "RoundedRectangle", {
	rowSpan: 3,
	stretch: go.GraphObject.Fill,
	fill: "white",
	stroke: "lightgray", strokeWidth: 2
	}),
	$(go.Shape, "Rectangle", {
	row: 1,
	stretch: go.GraphObject.Fill,
	fill: "lightgray",
	stroke: null, strokeWidth: 0
	}),
	$(go.TextBlock, "Wait", { font: '24px sans-serif', row: 0 }),
	$(go.TextBlock, "72 hours", {
	margin: 3, row: 2,
	alignment: go.Spot.Top, alignmentFocus: go.Spot.Top
	}),
	$(go.TextBlock, "(image)", {
	margin: 3, row: 2,
	alignment: go.Spot.Bottom, alignmentFocus: go.Spot.Bottom
	})
	);

	// but use the default Link template, by not setting Diagram.linkTemplate

	// 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" }
	],
	[
	]);
	}
	</script>
	</head>
	<body onload="init()">
	<div id="sample">
	<div id="myDiagram" style="border: solid 1px black; width:400px; height:400px; background: whitesmoke"></div>

	</div>
	</body>
	</html>