aguaviva/gist:2fb5f756e900e89edf6b622c55d3f7e8

## gistfile1.html
<!DOCTYPE>

<html>

	<head>
		<title>cytoscape-cola.js demo</title>

		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

		<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>

		<!-- for testing with local version of cytoscape.js -->
		<!--<script src="../cytoscape.js/build/cytoscape.js"></script>-->

		<script src="cola.js"></script>
		<script src="cytoscape-cola.js"></script>

		<style>
			body {
				font-family: helvetica;
				font-size: 14px;
			}

			#cy {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 999;
			}

			h1 {
				opacity: 0.5;
				font-size: 1em;
			}
		</style>

		<script>
			document.addEventListener('DOMContentLoaded', function(){

				var cy = window.cy = cytoscape({
					container: document.getElementById('cy'),

					layout: {
						name: 'cola',
                        infinite: true,
                        fit: false,
                        edgeLength:400
					},

					style: [
						{
							selector: 'node',
							css: {
								'content': 'data(name)',
                                'text-valign': 'center',
                                'text-halign': 'center',
                                'shape': 'roundrectangle',
                                'text-wrap': 'wrap',
                                'width': '300px',
                                'height': '100px',
							}
						},

						{
							selector: 'edge',
							css: {
								'target-arrow-shape': 'triangle'
							}
						}
					],

					elements: {
						nodes: [
							{ data: { id: 'j', name: 'This is a test of a long string, give it to me' } },
							{ data: { id: 'e', name: 'Elaine' } },
							{ data: { id: 'k', name: 'Kramer' } },
							{ data: { id: 'g', name: 'George' } }
						],
						edges: [
							{ data: { source: 'e', target: 'j', label:'yes' } },
							{ data: { source: 'e', target: 'k' } },
							{ data: { source: 'k', target: 'j' } },
							{ data: { source: 'k', target: 'g' } },
							{ data: { source: 'g', target: 'j' } }
						]
					}
				});

                cy.on('tap', 'edge', function(evt)
                {
                    var source = evt.target.source();
                    var target = evt.target.target();

                    var sp = source.position();
                    var st = target.position();

                    var x = (sp.x + st.x)*.5
                    var y = (sp.y + st.y)*.5

                    var id = source.id() + target.id()

                    var eles = cy.add([
                      { group: "nodes", data: { id: id, name: "Hello!" }, position: { x: x, y: y } },
                      { group: "edges", data: { id: id+"0", source: source.id(), target: id } },
                      { group: "edges", data: { id: id+"1", source: id, target: target.id() } }
                    ]);

                    cy.remove( evt.target );
                });


			});
		</script>
	</head>

	<body>
		<h1>cytoscape-cola demo</h1>

		<div id="cy"></div>

	</body>

</html>
	<!DOCTYPE>

	<html>

	<head>
	<title>cytoscape-cola.js demo</title>

	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

	<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>

	<!-- for testing with local version of cytoscape.js -->
	<!--<script src="../cytoscape.js/build/cytoscape.js"></script>-->

	<script src="cola.js"></script>
	<script src="cytoscape-cola.js"></script>

	<style>
	body {
	font-family: helvetica;
	font-size: 14px;
	}

	#cy {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 999;
	}

	h1 {
	opacity: 0.5;
	font-size: 1em;
	}
	</style>

	<script>
	document.addEventListener('DOMContentLoaded', function(){

	var cy = window.cy = cytoscape({
	container: document.getElementById('cy'),

	layout: {
	name: 'cola',
	infinite: true,
	fit: false,
	edgeLength:400
	},

	style: [
	{
	selector: 'node',
	css: {
	'content': 'data(name)',
	'text-valign': 'center',
	'text-halign': 'center',
	'shape': 'roundrectangle',
	'text-wrap': 'wrap',
	'width': '300px',
	'height': '100px',
	}
	},

	{
	selector: 'edge',
	css: {
	'target-arrow-shape': 'triangle'
	}
	}
	],

	elements: {
	nodes: [
	{ data: { id: 'j', name: 'This is a test of a long string, give it to me' } },
	{ data: { id: 'e', name: 'Elaine' } },
	{ data: { id: 'k', name: 'Kramer' } },
	{ data: { id: 'g', name: 'George' } }
	],
	edges: [
	{ data: { source: 'e', target: 'j', label:'yes' } },
	{ data: { source: 'e', target: 'k' } },
	{ data: { source: 'k', target: 'j' } },
	{ data: { source: 'k', target: 'g' } },
	{ data: { source: 'g', target: 'j' } }
	]
	}
	});

	cy.on('tap', 'edge', function(evt)
	{
	var source = evt.target.source();
	var target = evt.target.target();

	var sp = source.position();
	var st = target.position();

	var x = (sp.x + st.x)*.5
	var y = (sp.y + st.y)*.5

	var id = source.id() + target.id()

	var eles = cy.add([
	{ group: "nodes", data: { id: id, name: "Hello!" }, position: { x: x, y: y } },
	{ group: "edges", data: { id: id+"0", source: source.id(), target: id } },
	{ group: "edges", data: { id: id+"1", source: id, target: target.id() } }
	]);

	cy.remove( evt.target );
	});


	});
	</script>
	</head>

	<body>
	<h1>cytoscape-cola demo</h1>

	<div id="cy"></div>

	</body>

	</html>