Orbifold/Basic.html

## Basic.html
<!DOCTYPE html>
<html>
<head>
    <title>Hello, yFiles for HTML</title>
    <link type="text/css" rel="stylesheet" href="/OrbyWorks/lib/yfiles.css">

    <style>
        html, body, #graphCanvas, .canvascontrol {
            width: 100%;
            height: 80%;
            padding: 0;
            margin: 0;
            border: 1px solid dimgrey;
        }
    </style>
</head>
<body>
<div id="graphCanvas"></div>

<script src="/OrbyWorks/ide-support/yfiles-typeinfo.js"></script>
<script src="/OrbyWorks/lib/yFiles/es5-shim.js"></script>
<script src="/OrbyWorks/lib/requirejs/require.js"></script>

<script>

      var graphControl;

    require.baseUrl = '/OrbyWorks/lib/yFiles/'; // moving this to the config does not yield the same result
    require.config({

        "map": {
            "*": {
                "yfiles/lang": "../lib/yFiles/lang.js"
            }
        }
    });
    require([
                '../yWorks.yFilesHTML.DevelopmentLicense.js',
                '../lib/yFiles/complete.js'
            ],
            function () {
                // create the control for the specified div
                var graphControl = new yfiles.canvas.GraphControl.ForId('graphCanvas');

                // enable some interaction
                graphControl.inputMode = new yfiles.input.GraphEditorInputMode();

                // enable snapping
                var snapContext = new yfiles.input.GraphSnapContext();
                graphControl.inputMode.snapContext = snapContext;

                // get the underlying graph
                var graph = graphControl.graph;
                // change the default size to something a bit bigger than the default 30x30
                graph.nodeDefaults.size = new yfiles.geometry.SizeD(120, 80);
                // create a couple of node
                var n = graph.createNodeWithCenter(new yfiles.geometry.PointD(500, 200));
                var m = graph.createNodeWithCenter(new yfiles.geometry.PointD(700, 300));

                // add a label
                graph.addLabel(n, "First");
                graph.addLabelWithParameter(m, yfiles.drawing.InteriorLabelModel.CENTER, "Second")

                // could change the location of the ports
                graph.nodeDefaults.ports.locationModelParameter = yfiles.drawing.NodeScaledPortLocationModel.NODE_BOTTOM_ANCHORED;

                // change the style of the shape
                var style = new yfiles.drawing.ShapeNodeStyle();
                style.brush = yfiles.system.Brushes.BISQUE;
                style.shape = yfiles.drawing.ShapeNodeShape.ROUND_RECTANGLE;

                graph.setNodeStyle(n, style);
                graph.setNodeStyle(m, style);

                // add the bottom port
                var p = graph.addPort(n);
                var q = graph.addPort(m);

                // create an edge
                var edge = graph.createEdgeAtPorts(p, q);

                // wanna fetch the labels of the source and sink?
                var source = edge.sourcePort.owner;
                console.log("Source label:" + source.labels.getItem(0).text);
                var sink = edge.targetPort.owner;
                console.log("Sink label: " + sink.labels.getItem(0).text);


            });
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Hello, yFiles for HTML</title>
	<link type="text/css" rel="stylesheet" href="/OrbyWorks/lib/yfiles.css">

	<style>
	html, body, #graphCanvas, .canvascontrol {
	width: 100%;
	height: 80%;
	padding: 0;
	margin: 0;
	border: 1px solid dimgrey;
	}
	</style>
	</head>
	<body>
	<div id="graphCanvas"></div>

	<script src="/OrbyWorks/ide-support/yfiles-typeinfo.js"></script>
	<script src="/OrbyWorks/lib/yFiles/es5-shim.js"></script>
	<script src="/OrbyWorks/lib/requirejs/require.js"></script>

	<script>

	var graphControl;

	require.baseUrl = '/OrbyWorks/lib/yFiles/'; // moving this to the config does not yield the same result
	require.config({

	"map": {
	"*": {
	"yfiles/lang": "../lib/yFiles/lang.js"
	}
	}
	});
	require([
	'../yWorks.yFilesHTML.DevelopmentLicense.js',
	'../lib/yFiles/complete.js'
	],
	function () {
	// create the control for the specified div
	var graphControl = new yfiles.canvas.GraphControl.ForId('graphCanvas');

	// enable some interaction
	graphControl.inputMode = new yfiles.input.GraphEditorInputMode();

	// enable snapping
	var snapContext = new yfiles.input.GraphSnapContext();
	graphControl.inputMode.snapContext = snapContext;

	// get the underlying graph
	var graph = graphControl.graph;
	// change the default size to something a bit bigger than the default 30x30
	graph.nodeDefaults.size = new yfiles.geometry.SizeD(120, 80);
	// create a couple of node
	var n = graph.createNodeWithCenter(new yfiles.geometry.PointD(500, 200));
	var m = graph.createNodeWithCenter(new yfiles.geometry.PointD(700, 300));

	// add a label
	graph.addLabel(n, "First");
	graph.addLabelWithParameter(m, yfiles.drawing.InteriorLabelModel.CENTER, "Second")

	// could change the location of the ports
	graph.nodeDefaults.ports.locationModelParameter = yfiles.drawing.NodeScaledPortLocationModel.NODE_BOTTOM_ANCHORED;

	// change the style of the shape
	var style = new yfiles.drawing.ShapeNodeStyle();
	style.brush = yfiles.system.Brushes.BISQUE;
	style.shape = yfiles.drawing.ShapeNodeShape.ROUND_RECTANGLE;

	graph.setNodeStyle(n, style);
	graph.setNodeStyle(m, style);

	// add the bottom port
	var p = graph.addPort(n);
	var q = graph.addPort(m);

	// create an edge
	var edge = graph.createEdgeAtPorts(p, q);

	// wanna fetch the labels of the source and sink?
	var source = edge.sourcePort.owner;
	console.log("Source label:" + source.labels.getItem(0).text);
	var sink = edge.targetPort.owner;
	console.log("Sink label: " + sink.labels.getItem(0).text);


	});
	</script>
	</body>
	</html>