<%@ Page Language="C#" AutoEventWireup="true" Inherits="_Default" Codebehind="Default.aspx.cs" %>

<%@ Register Assembly="MindFusion.Diagramming.WebForms" Namespace="MindFusion.Diagramming.WebForms" TagPrefix="ndiag" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>MindFusion NetDiagram Tutorial</title>
  <link href="common/jquery-ui.min.css" rel="stylesheet" />
  <link href="common/samples.css" rel="stylesheet" />
  <script type="text/javascript" src="common/jquery.min.js"></script>
  <script type="text/javascript" src="common/jquery-ui.min.js"></script>
  <script type="text/javascript" src="common/samples.js"></script>
</head>
<body onload="onLoad()">
<form id="form1" runat="server">

  <asp:ScriptManager ID="ScriptManager1" runat="server" />

  <div id="header" style="height: 49px;">
    <div style="float: left; margin-right: 5px; margin-top: 17px;">
      <asp:Button ID="btnLayout" runat="server" OnClick="btnLayout_Click" Text="Layout" />
      <asp:Button ID="btnExportPdf" runat="server" OnClick="btnExportPdf_Click" Text="Export PDF" />
      <asp:HiddenField ID="pdfURL" runat="server" />
    </div>
    <div style="float: right; margin-right: 5px; margin-top: 17px;">
      <button id="expandButton" onclick="onExpandCollapse()">&gt;</button>
    </div>
  </div>

  <div id="info" style="top: 60px; bottom: 24px;">
    <div id="infoTab" style="padding: 10px;">
      <h1>About this sample</h1>
      <p>This is a tutorial application. Create new nodes by dragging links from existing nodes, then click the 'Layout' button to arrange the diagram or 'Export PDF' to export the diagram as a PDF.</p>
    </div>
  </div>

  <div id="content" style="top: 60px; bottom: 24px;">
    <ndiag:DiagramView ID="diagView" runat="server" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden;"
      ClientSideMode="Canvas"
      Behavior="DrawLinks" AllowInplaceEdit="true"
      LinkCreatedScript="onLinkCreated" LinkCreatingScript="onLinkCreating">
      <Diagram BackBrush="s:#FFFFFFFF" LinkHeadShape="Triangle" AllowUnconnectedLinks="true" />
    </ndiag:DiagramView>
  </div>

  <div id="footer" style="height: 24px;">
    <span id="copyright"></span>
  </div>

</form>
</body>

<script type="text/javascript">

  $(function() {
		$('#expandButton').click(function(event) {
			event.preventDefault();
		})
  });

  function onLinkCreated(diagram, args)
  {
    // get info about the DiagramLink just created
    var link = args.getLink();
    var points = link.getControlPoints();
    var destPoint = points[points.length - 1];

    // create a new ShapeNode
    var destNode = diagram.getFactory().createShapeNode(
    destPoint.x - 12, destPoint.y - 7, 24, 14);
    destNode.setText("node " + diagram.getNodes().length);
    destNode.setBrush('white');

    // connect the link to the node and set its properties
    link.setDestination(destNode);
    link.setDynamic(true);
  }

  function onLinkCreating(diagram, args)
  {
    var link = args.link;
    var origin = link.origin;

    // allow links start only from ShapeNodes
    if (!MindFusion.Diagramming.ShapeNode.isInstanceOfType(origin))
      args.setCancel(true);
  }

  function onLoad()
  {
    var url = document.getElementById("pdfURL");
    if (url.value != "")
    {
      window.open(url.value);
      url.value = "";
    }
  }

</script>

</html>