simonsarris/linktest.html

## linktest.html
<!doctype html>
<html>
<head>
<title>Minimal GoJS Sample</title>
<!-- Copyright 1998-2014 by Northwoods Software Corporation. -->
<link href="goSamples.css" rel="stylesheet" type="text/css"/>
<script src="http://www.gojs.net/latest/release/go.js"></script>
<script id="code">

window.DiagramManager;
window.App = {};
window.API;

DiagramManager = (function() {
  function DiagramManager() {}

  DiagramManager.prototype.addLink = function(linkData) {
    var _skipsUndoManager;
    _skipsUndoManager = App.diagram.skipsUndoManager;
    App.diagram.skipsUndoManager = true;
    linkData.points = API.convertStringtoPoints(linkData.points);
    App.diagram.model.addLinkData(linkData);
    App.diagram.skipsUndoManager = _skipsUndoManager;
    return true;
  };

  DiagramManager.prototype.setDataProperty = function(object, property, value) {
    var _skipsUndoManager;
    _skipsUndoManager = App.diagram.skipsUndoManager;
    App.diagram.skipsUndoManager = true;
    value = value ? value : '';
    App.diagram.model.setDataProperty(object, property, value);
    App.diagram.skipsUndoManager = _skipsUndoManager;
    return true;
  };

  API = {
    convertStringtoPoints: function(string) {
      var i, list, pt, pts, _i, _ref;
      pts = JSON.parse(string);
      list = new go.List(go.Point);
      for (i = _i = 0, _ref = pts.length - 1; _i <= _ref; i = _i += 2) {
        pt = new go.Point(pts[i], pts[i + 1]);
        list.add(pt);
      }
      return list;
    }
  };

  return new DiagramManager();

})();

  function init() {
    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
                  });
    App.diagram = myDiagram;

    // define a simple Node template
    myDiagram.nodeTemplate =
      $(go.Node, "Auto",  // the Shape will go around the TextBlock
        $(go.Shape, "RoundedRectangle",
          // Shape.fill is bound to Node.data.color
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: 3 },  // some room around the text
          // TextBlock.text is bound to Node.data.key
          new go.Binding("text", "key"))
      );

    myDiagram.linkTemplate =
      $(go.Link,  // the whole link panel
        { selectable: true },
        { relinkableFrom: true, relinkableTo: true, reshapable: true },
        {
          routing: go.Link.AvoidsNodes,
          curve: go.Link.JumpOver,
          corner: 5,
          toShortLength: 4
        },
        new go.Binding("points").makeTwoWay(),
        $(go.Shape,  // the link path shape
          { isPanelMain: true, strokeWidth: 2 }),
        $(go.Shape,  // the arrowhead
          { toArrow: "Standard", stroke: null }),
        $(go.Panel, "Auto",
          new go.Binding("visible", "isSelected").ofObject(),
          $(go.Shape, "RoundedRectangle",  // the link shape
            { fill: "#F8F8F8", stroke: null }),
          $(go.TextBlock,
            {
              textAlign: "center",
              font: "10pt helvetica, arial, sans-serif",
              stroke: "#919191",
              margin: 2,
              minSize: new go.Size(10, NaN),
              editable: true
            },
            new go.Binding("text").makeTwoWay())
        )
      );


    // create the model data that will be represented by Nodes and Links
    myDiagram.model = new go.GraphLinksModel(
    [
      { key: "Alpha", color: "lightblue" }
    ],
    [

    ]);
  }

function addlink() {
    DiagramManager.addLink({
    from: -1,
    from_port: "right0",
    points: "[-158,-48.5,-148,-48.5,158,-48.5,158,13,158,74.5,148,74.5]",
    to: -2,
    to_port: "right0"
  })
}

</script>
</head>
<body onload="init()">
<div id="sample">
  <p>Minimal <b>GoJS</b> Sample</p>
  <!-- The DIV for the Diagram needs an explicit size or else we won't see anything.
       Also add a border to help see the edges. -->
  <div id="myDiagram" style="border: solid 1px black; width:400px; height:400px"></div>
  <button onclick="addlink()">add link</button>
</div>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>Minimal GoJS Sample</title>
	<!-- Copyright 1998-2014 by Northwoods Software Corporation. -->
	<link href="goSamples.css" rel="stylesheet" type="text/css"/>
	<script src="http://www.gojs.net/latest/release/go.js"></script>
	<script id="code">

	window.DiagramManager;
	window.App = {};
	window.API;

	DiagramManager = (function() {
	function DiagramManager() {}

	DiagramManager.prototype.addLink = function(linkData) {
	var _skipsUndoManager;
	_skipsUndoManager = App.diagram.skipsUndoManager;
	App.diagram.skipsUndoManager = true;
	linkData.points = API.convertStringtoPoints(linkData.points);
	App.diagram.model.addLinkData(linkData);
	App.diagram.skipsUndoManager = _skipsUndoManager;
	return true;
	};

	DiagramManager.prototype.setDataProperty = function(object, property, value) {
	var _skipsUndoManager;
	_skipsUndoManager = App.diagram.skipsUndoManager;
	App.diagram.skipsUndoManager = true;
	value = value ? value : '';
	App.diagram.model.setDataProperty(object, property, value);
	App.diagram.skipsUndoManager = _skipsUndoManager;
	return true;
	};

	API = {
	convertStringtoPoints: function(string) {
	var i, list, pt, pts, _i, _ref;
	pts = JSON.parse(string);
	list = new go.List(go.Point);
	for (i = _i = 0, _ref = pts.length - 1; _i <= _ref; i = _i += 2) {
	pt = new go.Point(pts[i], pts[i + 1]);
	list.add(pt);
	}
	return list;
	}
	};

	return new DiagramManager();

	})();

	function init() {
	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
	});
	App.diagram = myDiagram;

	// define a simple Node template
	myDiagram.nodeTemplate =
	$(go.Node, "Auto", // the Shape will go around the TextBlock
	$(go.Shape, "RoundedRectangle",
	// Shape.fill is bound to Node.data.color
	new go.Binding("fill", "color")),
	$(go.TextBlock,
	{ margin: 3 }, // some room around the text
	// TextBlock.text is bound to Node.data.key
	new go.Binding("text", "key"))
	);

	myDiagram.linkTemplate =
	$(go.Link, // the whole link panel
	{ selectable: true },
	{ relinkableFrom: true, relinkableTo: true, reshapable: true },
	{
	routing: go.Link.AvoidsNodes,
	curve: go.Link.JumpOver,
	corner: 5,
	toShortLength: 4
	},
	new go.Binding("points").makeTwoWay(),
	$(go.Shape, // the link path shape
	{ isPanelMain: true, strokeWidth: 2 }),
	$(go.Shape, // the arrowhead
	{ toArrow: "Standard", stroke: null }),
	$(go.Panel, "Auto",
	new go.Binding("visible", "isSelected").ofObject(),
	$(go.Shape, "RoundedRectangle", // the link shape
	{ fill: "#F8F8F8", stroke: null }),
	$(go.TextBlock,
	{
	textAlign: "center",
	font: "10pt helvetica, arial, sans-serif",
	stroke: "#919191",
	margin: 2,
	minSize: new go.Size(10, NaN),
	editable: true
	},
	new go.Binding("text").makeTwoWay())
	)
	);



	// create the model data that will be represented by Nodes and Links
	myDiagram.model = new go.GraphLinksModel(
	[
	{ key: "Alpha", color: "lightblue" }
	],
	[

	]);
	}

	function addlink() {
	DiagramManager.addLink({
	from: -1,
	from_port: "right0",
	points: "[-158,-48.5,-148,-48.5,158,-48.5,158,13,158,74.5,148,74.5]",
	to: -2,
	to_port: "right0"
	})
	}

	</script>
	</head>
	<body onload="init()">
	<div id="sample">
	<p>Minimal <b>GoJS</b> Sample</p>
	<!-- The DIV for the Diagram needs an explicit size or else we won't see anything.
	Also add a border to help see the edges. -->
	<div id="myDiagram" style="border: solid 1px black; width:400px; height:400px"></div>
	<button onclick="addlink()">add link</button>
	</div>
	</body>
	</html>