gefx.html

<meta charset="utf-8">
<title>Graphe</title>

<style>
	* { font-family: sans-serif; font-size: small; }
	svg circle:hover { stroke: black; z-index: 1; }
	svg polyline { marker-mid: url(#arrow); fill:none; stroke: darkgrey; }
	svg text { display: none; fill: grey; }
	.node:hover text { display: block; }
	#arrow { fill:darkgrey; stroke: darkgrey; }
	#arrow:hover { fill:black; stroke: black; }

</style>

<script id="api">
var arrowPosition = .618;
function createNode(id){
	var node = document.createElementNS("http://www.w3.org/2000/svg", 'svg');
	node.id = id ? id : new Date().getTime();
	node.classList.add('node');
	node.setAttribute('onmousedown', "mousedown(event)");
	node.setAttribute('onwheel', "wheel(event)");
	node.setAttribute('x', "100");
	node.setAttribute('y', "100");

	var circle = document.createElementNS("http://www.w3.org/2000/svg", 'circle');
	circle.setAttribute('cx', "11");
	circle.setAttribute('cy', "11");
	circle.setAttribute('r', "10");
	circle.setAttribute('stroke', "darkgrey");
	circle.setAttribute('stroke-width', "1");
	circle.setAttribute('fill', "url('#blue')");

	var text = document.createElementNS("http://www.w3.org/2000/svg", 'text');
	text.setAttribute('x', 25);
	text.setAttribute('y', 16);
	text.innerHTML = 'Hello';

	var svg = document.querySelector('#svg_nodes');
	svg.append(node);
	node.append(circle);
	node.append(text);
	return node;
}
function copyNode(proto){
	var node = proto.cloneNode(true);
	Object.assign(node, proto);
	node.id = new Date().getTime();
	var svg = document.querySelector('#svg_nodes');
	svg.insertBefore(node, svg.firstChild);
	return node;
}
function moveNode(node, x, y){
	node.setAttribute('x', x);
	node.setAttribute('y', y);
	drawEdges();
}
function removeNode(node){
	for(var edge of document.querySelectorAll('#svg_edges [source="'+node.id+'"]'))
		removeEdge(edge);
	for(var edge of document.querySelectorAll('#svg_edges [target="'+node.id+'"]'))
		removeEdge(edge);
	node.parentElement.removeChild(node);
}
function setNodeSize(node, r){
	var x = Number(node.getAttribute('x')) + Number(node.querySelector('circle').getAttribute('cx'));
	var y = Number(node.getAttribute('y')) + Number(node.querySelector('circle').getAttribute('cy'));
	node.setAttribute('x', x-r-1);
	node.setAttribute('y', y-r-1);
	node.querySelector('circle').setAttribute('cx', r+1);
	node.querySelector('circle').setAttribute('cy', r+1);
	node.querySelector('circle').setAttribute('r', r);
	node.querySelector('text').setAttribute('x', 2*r+5);
	node.querySelector('text').setAttribute('y', r+5);
}
function getNodeSize(node){
	return Number(node.querySelector('circle').getAttribute('r'));
}
function setNodeText(node, text){
	node.querySelector('text').innerHTML = text;
}

function createEdge(source, target){
	var mouse = document.createElementNS("http://www.w3.org/2000/svg", 'line');
	mouse.setAttribute("source", source);
	mouse.setAttribute("target", target);
	mouse.setAttribute('stroke-width', "8");
	mouse.setAttribute('pointer-events', "all");
	mouse.setAttribute('onmouseover', "cutArrow(event)");
	mouse.setAttribute('onclick', "clickArrow(event)");
	document.querySelector('#svg_edges').appendChild(mouse);

	var edge = document.createElementNS("http://www.w3.org/2000/svg", 'polyline');
	edge.id = new Date().getTime();
	edge.setAttribute("source", source);
	edge.setAttribute("target", target);
	document.querySelector('#svg_edges').appendChild(edge);

	drawEdges();
}
function removeEdge(edge){
	edge.parentElement.removeChild(edge);
}

function clear(){
	for(var node of document.querySelectorAll('#svg_nodes svg:not(.prototype)'))
		removeNode(node);
}

function drawEdges(){
	for(var edge of document.querySelectorAll('line')){
		var source = document.getElementById(edge.getAttribute('source'));
		var target = document.getElementById(edge.getAttribute('target'));
		edge.setAttribute('x1', Number(source.getAttribute('x'))+Number(source.querySelector('circle').getAttribute('cx')));
		edge.setAttribute('y1', Number(source.getAttribute('y'))+Number(source.querySelector('circle').getAttribute('cy')));
		edge.setAttribute('x2', Number(target.getAttribute('x'))+Number(target.querySelector('circle').getAttribute('cx')));
		edge.setAttribute('y2', Number(target.getAttribute('y'))+Number(target.querySelector('circle').getAttribute('cy')));
	}
	for(var edge of document.querySelectorAll('polyline')){
		var source = document.getElementById(edge.getAttribute('source'));
		var target = document.getElementById(edge.getAttribute('target'));
		var x1 = Number(source.getAttribute('x'))+Number(source.querySelector('circle').getAttribute('cx'));
		var y1 = Number(source.getAttribute('y'))+Number(source.querySelector('circle').getAttribute('cy'));
		var x3 = Number(target.getAttribute('x'))+Number(target.querySelector('circle').getAttribute('cx'));
		var y3 = Number(target.getAttribute('y'))+Number(target.querySelector('circle').getAttribute('cy'));
		var x2 = (1-arrowPosition)*x1 + arrowPosition*x3;
		var y2 = (1-arrowPosition)*y1 + arrowPosition*y3;
		
		var points = x1+','+y1+' '+x2+','+y2+' '+x3+','+y3;
		edge.setAttribute("points", points);
	}
}
loadFile = function(file){
	var f = new FileReader();
	f.onload = function(event){
		parser = new DOMParser();
		xml = parser.parseFromString(f.result, "text/xml");

		clear();
		var xMin = Infinity;
		var xMax = -Infinity;
		var yMin = Infinity;
		var yMax = -Infinity;
		for(var n of xml.querySelectorAll('node')){
			var pos = n.querySelector('position');
			var x = Number(pos.getAttribute('x'));
			var y = Number(pos.getAttribute('y'));
			if(x<xMin) xMin = x;
			if(x>xMax) xMax = x;
			if(y<yMin) yMin = y;
			if(y>yMax) yMax = y;
		}
		var scr = document.querySelector('svg').getBoundingClientRect();
		for(var n of xml.querySelectorAll('node')){
			var node = createNode(n.id);
			setNodeSize(node, n.querySelector('size').getAttribute('value')*2.5);
			setNodeText(node, n.getAttribute('label'));
			var pos = n.querySelector('position');
			var x = Number(pos.getAttribute('x'));
			var y = Number(pos.getAttribute('y'));
			x = ((x-xMin)/(xMax-xMin) *.8 +.1 ) *scr.width +scr.left;
			y = ((y-yMin)/(yMax-yMin) *.8 +.1 ) *scr.height +scr.top;
			moveNode(node, x, y);
		}
		for(var e of xml.querySelectorAll('edge')){
			createEdge(e.getAttribute('source'), e.getAttribute('target'));
		}
		document.title = file.name.replace(/\.[^\.]*$/, '');
	}
	f.readAsText(file);
}
saveFile = function(){
	var xml = '<?xml version="1.0" encoding="UTF-8"?>\n';
	xml += '<gexf xmlns="http://www.gexf.net/1.3" version="1.3" xmlns:viz="http://www.gexf.net/1.3/viz" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.gexf.net/1.3 http://www.gexf.net/1.3/gexf.xsd">\n';
	xml += '<meta lastmodifieddate="'+new Date().toISOString().substr(0,10)+'">\n';
    xml += '    <creator></creator>\n';
    xml += '    <description></description>\n';
	xml += '</meta>\n';
	
	xml += '<nodes>\n';
	for(var node of document.querySelectorAll('#svg_nodes circle:not(.prototype)')){
		xml += '    <node id="'+node.id+'">\n';
		xml += '      <viz:size value="'+node.getAttribute('r')+'"></viz:size>\n';
		xml += '      <viz:position x="'+node.getAttribute('cx')+'" y="'+node.getAttribute('cy')+'"></viz:position>\n';
		xml += '    </node>\n';
	}
	xml += '</nodes>\n';

	var edge_id = 0;
	xml += '<edges>\n';
	for(var edge of document.querySelectorAll('#svg_edges polyline'))
		xml += '<edge id="'+(edge_id++)+'" source="'+edge.getAttribute('source')+'" target="'+edge.getAttribute('target')+'"></edge>\n';
	xml += '</edges>\n';
	xml += '</gexf>';

	var link = document.createElement("a");
    link.download = document.title+'.gexf';
    link.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(xml);
    link.click();
}
</script>


<script id="gui">
var drag, dragX, dragY;
function mousedown(event){
	drag = event.target.parentElement;
	event.preventDefault();
	if(drag.classList.contains("node")){
		dragX = drag.getAttribute("x");
		dragY = drag.getAttribute("y");
		drag.dx = event.clientX - dragX;
		drag.dy = event.clientY - dragY;
		var nodes = document.querySelector('#svg_nodes');
		nodes.insertBefore(drag, nodes.firstChild);
	}
}
onmousemove = (event) => {
	if(drag){
		if(drag.classList.contains("prototype")){
			drag = copyNode(drag);
			drag.classList.remove('prototype');
		}
		moveNode(drag, event.clientX-drag.dx, event.clientY-drag.dy);
	}
}
onmouseup = (event) => {
	var source = event.target.parentElement;
	var target = drag;
	if(source && target && source!=target){
		createEdge(source.id, target.id);
		moveNode(drag, dragX, dragY);
	}
	drag = null;
}
function cutArrow(event){
	if(!drag && event.buttons==1){
		var source = event.target.getAttribute('source');
		var target = event.target.getAttribute('target');
		for(var edge of document.querySelectorAll('#svg_edges *[source="'+source+'"][target="'+target+'"]'))
			removeEdge(edge);
	}
}
function clickArrow(event){
	console.log(!drag, event);
}
function wheel(event){
	var node = event.target.parentElement;
	if(!node.classList.contains('prototype'))
		setNodeSize(node, (1+event.deltaY/25)*getNodeSize(node));
}
onload = function(){
	var svg = document.querySelector('svg');
	svg.addEventListener("dragenter", function(e) { e.stopPropagation(); e.preventDefault(); }, false);
	svg.addEventListener("dragover", function(e) { e.stopPropagation(); e.preventDefault(); }, false);
	svg.addEventListener("drop", function(e){ e.stopPropagation(); e.preventDefault(); loadFile(e.dataTransfer.files[0]);}, false);
}
onkeydown = function(event){
	event.preventDefault();
	if(event.ctrlKey && event.key=='s')
		saveFile();
}
</script>

<svg width="100%" height="100%">
	<radialGradient id="blue" cx="50%" cy="50%" r="50%" fx="70%" fy="30%">
		<stop offset="0%"   stop-color="white"  stop-opacity="100%"/>
		<stop offset="80%" stop-color="#b3cde3" stop-opacity="100%"/>
	</radialGradient>

	<radialGradient id="green" cx="50%" cy="50%" r="50%" fx="70%" fy="30%">
		<stop offset="0%"   stop-color="white"  stop-opacity="100%"/>
		<stop offset="80%" stop-color="#ccebc5" stop-opacity="100%"/>
	</radialGradient>

	<radialGradient id="yellow" cx="50%" cy="50%" r="50%" fx="70%" fy="30%">
		<stop offset="0%"   stop-color="white"  stop-opacity="100%"/>
		<stop offset="80%" stop-color="#ffffcc" stop-opacity="100%"/>
	</radialGradient>

	<radialGradient id="orange" cx="50%" cy="50%" r="50%" fx="70%" fy="30%">
		<stop offset="0%"   stop-color="white"  stop-opacity="100%"/>
		<stop offset="80%" stop-color="#fed9a6" stop-opacity="100%"/>
	</radialGradient>

	<radialGradient id="red" cx="50%" cy="50%" r="50%" fx="70%" fy="30%">
		<stop offset="0%"   stop-color="white"  stop-opacity="100%"/>
		<stop offset="80%" stop-color="#fbb4ae" stop-opacity="100%"/>
	</radialGradient>

	<radialGradient id="purple" cx="50%" cy="50%" r="50%" fx="70%" fy="30%">
		<stop offset="0%"   stop-color="white"  stop-opacity="100%"/>
		<stop offset="80%" stop-color="#decbe4" stop-opacity="100%"/>
	</radialGradient>

	<radialGradient id="grey" cx="50%" cy="50%" r="50%" fx="70%" fy="30%">
		<stop offset="0%"   stop-color="white"  stop-opacity="100%"/>
		<stop offset="80%" stop-color="#e6e6e6" stop-opacity="100%"/>
	</radialGradient>
	
	<defs>
		<marker id="arrow" viewBox="0 0 12 14" refX="0" refY="4" markerWidth="12" markerHeight="16" orient="auto">
			<path d="M0,0 L12,4 L0,8 z" />
		</marker>
	</defs>

	<g id="svg_edges"></g>

	<g id="svg_nodes">
		<svg class="node prototype" onmousedown="mousedown(event)" onwheel="wheel(event)" x="0" y="0">
			<circle cx="11" cy="11" r="10" stroke="darkgrey" stroke-width="1" fill="url('#blue')" />
			<text x="25" y="16" >Bleu</text>
		</svg>
		<svg class="node prototype" onmousedown="mousedown(event)" onwheel="wheel(event)"x="0", y="25">
			<circle class="prototype" onwheel="wheel(event)" cx="11" cy="11" r="10" stroke="darkgrey" stroke-width="1" fill="url('#green')" />
			<text x="25" y="16" >Vert</text>
		</svg>
		<svg class="node prototype" onmousedown="mousedown(event)" onwheel="wheel(event)"x="0", y="50">
			<circle class="prototype" onwheel="wheel(event)" cx="11" cy="11"  r="10" stroke="darkgrey" stroke-width="1" fill="url('#yellow')" />
			<text x="25" y="16" >Jaune</text>
		</svg>
		<svg class="node prototype" onmousedown="mousedown(event)" onwheel="wheel(event)"x="0", y="75">
			<circle class="prototype" onwheel="wheel(event)" cx="11" cy="11"  r="10" stroke="darkgrey" stroke-width="1" fill="url('#orange')" />
			<text x="25" y="16" >Orange</text>
		</svg>
		<svg class="node prototype" onmousedown="mousedown(event)" onwheel="wheel(event)"x="0", y="100">
			<circle class="prototype" onwheel="wheel(event)" cx="11" cy="11" r="10" stroke="darkgrey" stroke-width="1" fill="url('#red')" />
			<text x="25" y="16" >Rouge</text>
		</svg>
		<svg class="node prototype" onmousedown="mousedown(event)" onwheel="wheel(event)"x="0", y="125">
			<circle class="prototype" onwheel="wheel(event)" cx="11" cy="11" r="10" stroke="darkgrey" stroke-width="1" fill="url('#purple')" />
			<text x="25" y="16" >Violet</text>
		</svg>
		<svg class="node prototype" onmousedown="mousedown(event)" onwheel="wheel(event)"x="0", y="150">
			<circle class="prototype" onwheel="wheel(event)" cx="11" cy="11" r="10" stroke="darkgrey" stroke-width="1" fill="url('#grey')" />
			<text x="25" y="16" >Gris</text>
		</svg>
	</g>
</svg>