block.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg id="canvas" xmlns:stage2="http://www.bt.com/tools/designit/design2" xmlns="http://www.w3.org/2000/svg" 
	width="2000" height="2000" version="1.1" baseProfile="full"
	 onmousemove="move(evt)" onmouseup="up(evt)" onmousedown="create(evt)">
  <title>Design</title>
 <script language="JavaScript" type="text/javascript">
	  <![CDATA[
    var CREATE = 0;
    var DRAG = 1;
    var RESIZE = 2;
    var currentBlock;
    var currentRect;
    var startX;
    var startY;
    var mode = DRAG;

    function down(evt) {
        currentBlock = evt.currentTarget;
	var matrix = currentBlock.getCTM();	
	startX = evt.clientX - matrix.e;
	startY = evt.clientY - matrix.f;
    }


    function resize(evt) {
	evt.stopPropagation();
        mode = RESIZE;
        currentBlock = evt.currentTarget.parentNode;
	var matrix = currentBlock.getCTM();	
	startX = matrix.e;
	startY = matrix.f;
    }

    function doResize(grp, width, height) {
	var rect = grp.children[0];
	var oldWidth = rect.width;
	var oldHeight = rect.height;
	rect.setAttribute('width', width);
	rect.setAttribute('height', height);	

	var triangle = grp.children[5];
	triangle.setAttribute('d', 'M ' +  width +' ' + height + ' v -13 l -13 13');


	var txt = grp.children[6];
	txt.setAttribute('x', width / 2);
	txt.setAttribute('y', height / 2 + 4);

	var dX = width - oldWidth.baseVal.value;
	var w = getWest(grp);
	w.setAttribute('y', height / 2.0);
	var e = getEast(grp);
	e.setAttribute('x', width - 2.5);
	e.setAttribute('y', height / 2.0);
	var n = getNorth(grp);
	n.setAttribute('x', width / 2.0);
	var s = getSouth(grp);
	s.setAttribute('x', width / 2.0);
	s.setAttribute('y', height - 2.5);
    }

    function getEast(grp) {
	return grp.children[2];
    }

    function getWest(grp) {
	return grp.children[1];
    }
    function getNorth(grp) {
	return grp.children[3];
    }
    function getSouth(grp) {
	return grp.children[4];
    }

    function updateStartOfLink(link, newPointRect, xOffset, yOffset) {
	var pth = link.getAttribute('d');
        var x = Number(newPointRect.getAttribute('x')) + xOffset + 2.5;
        var y = Number(newPointRect.getAttribute('y')) + yOffset + 2.5;
        var newpth = pth.replace(/^M [0-9\.]+ [0-9\.]+/,"M " + x  +  " " + y );
        link.setAttribute('d', newpth);	
    }

    function updateEndOfLink(link, newPointRect, xOffset, yOffset) {
	var pth = link.getAttribute('d');
        var x = Number(newPointRect.getAttribute('x')) + xOffset  + 2.5;
        var y = Number(newPointRect.getAttribute('y')) + yOffset + 2.5;
	var newpth = pth.replace(/L [0-9\.]+ [0-9\.]+$/,"L " + x  +  " " + y );
        link.setAttribute('d', newpth);	
    }

    function updateLinks(grp, grpX, grpY) {
	var doc = grp.ownerDocument;
	var links = doc.getElementsByClassName("connector");

	for (var i=0; i < links.length; i++) {
	    var connector = links[i];
 	    var from = connector.getAttribute('from');
 	    var to = connector.getAttribute('to');
	    var pt = null;
	    if (from == grp.id + "_east") {
	        pt = getEast(grp);
	    } else if (from == grp.id + "_west") {
	        pt = getWest(grp);
	    } else if (from == grp.id + "_north") {
	        pt = getNorth(grp);
	    } else if (from == grp.id + "_south") {
	        pt = getSouth(grp);
	    }

	    if (pt != null) {	
	        updateStartOfLink(connector, pt, grpX, grpY);
	    }
	    pt = null;

	    if (to == grp.id + "_east") {
	        pt = getEast(grp);
	    } else if (to == grp.id + "_west") {
	        pt = getWest(grp);
	    } else if (to == grp.id + "_north") {
	        pt = getNorth(grp);
	    } else if (to == grp.id + "_south") {
	        pt = getSouth(grp);
	    }

	    if (pt != null) {	
	        updateEndOfLink(connector, pt, grpX, grpY);
	    }
	}
	
    }

    function move(evt) {
	if (currentBlock == null) {
		return;
	}

	if (mode == DRAG) {
		var dX = evt.clientX - startX;
		var dY = evt.clientY - startY;
		var x = dX;
		var y = dY;
		currentBlock.setAttribute ('transform', 'translate(' + x + ',' + y +  ')');
		updateLinks(currentBlock, x, y);
	} else if (mode == RESIZE) {
		var newX = evt.clientX - startX;
		var newY = evt.clientY - startY;
		doResize(currentBlock, newX, newY);
		updateLinks(currentBlock, startX, startY );
	} 
    }


    function up(evt) {
	if (mode == CREATE) {
		createBlock(startX, startY, evt.layerX, evt.layerY);
	}
	currentBlock=null;
	mode = DRAG;
    }

    blockId = 10;

    function createBlock(x1,y1,x2,y2) {
	if (x1 > x2) {
		var tmp = x1;
		x1 = x2;
		x2 = tmp;
	}
	if (y1 > y2) {
		var tmp = y1;
		y1 = y2;
		y2 = tmp;
	}

	var b1 = document.getElementById("block1");
	var n = b1.cloneNode(true);
	n.id = "block" + blockId++;
	n.setAttribute ('transform', 'translate(' + x1 + ',' + y1 +  ')');
	var width = x2 - x1;
	var height = y2 - y1
	var txt = n.children[6];
	txt.textContent = "Click to update";
	doResize(n, (width < 140) ? 140 : width , (height < 30) ? 30 : height );
	addingTo.appendChild(n)
	addingTo = null;
    }

    var addingTo = null;

    function create(evt) {
	var t = evt.target;
	if (t.ownerDocument == t.parentNode) {
		mode = CREATE;
		startX = evt.layerX;
		startY = evt.layerY;
		addingTo = t;
	}
    }

    function highlight(evt) {
        var target = evt.currentTarget;
	target.setAttribute('style','stroke: #999999; fill: #999999')
 
    }

    function out(evt) {
        var target = evt.currentTarget;
	target.setAttribute('style','stroke: #555588; fill: #555588')
    }

    var focusRect = null;

    function click(evt) {
	focusRect = evt.target;
    }

    function edit(evt) {
	var current = evt.target.textContent;
	var newVal = prompt("Update text", current);
	if (newVal == null) {
	    newVal = current;
	} else if (newVal == '') {
	    newVal = '?';
	}
	evt.target.textContent = newVal;

    }


	  ]]>
	</script> 


<g id="block1" transform="translate(20,20)"  onmousedown="down(evt)">    
<rect width="200" height="100" style="stroke: #555588; fill: #aaaaff" onclick="click(evt)" onmousedown=""   />
<rect x="-2.5" y="47.5" width="5" height="5" style="stroke: #555588; fill: #555588" onmouseover="highlight(evt)" onmouseout="out(evt)" />
<rect x="197.5" y="47.5" width="5" height="5" style="stroke: #555588; fill: #555588" onmouseover="highlight(evt)" onmouseout="out(evt)" />
<rect x="97.5" y="-2.5" width="5" height="5" style="stroke: #555588; fill: #555588" onmouseover="highlight(evt)"  onmouseout="out(evt)" />
<rect x="97.5" y="97.5" width="5" height="5" style="stroke: #555588; fill: #555588" onmouseover="highlight(evt)"  onmouseout="out(evt)" />
<path d="M 200 100 v -13 l -13 13" style="stroke: #555588; fill: #555588" onmouseover="highlight(evt)"  onmouseout="out(evt)"  onmousedown="resize(evt)" />
<text id="text" x="102" y="54" text-anchor="middle"  onclick="edit(evt)">hello</text>
</g>


<g id="block2" transform="translate(400,70)"  onmousedown="down(evt)">    
<rect width="200" height="100" style="stroke: #555588; fill: #aaaaff" onclick="click(evt)"  onmousedown=""  />
<rect x="-2.5" y="47.5" width="5" height="5" style="stroke: #555588; fill: #555588" onmouseover="highlight(evt)" onmouseout="out(evt)" />
<rect x="197.5" y="47.5" width="5" height="5" style="stroke: #555588; fill: #555588" onmouseover="highlight(evt)" onmouseout="out(evt)" />
<rect x="97.5" y="-2.5" width="5" height="5" style="stroke: #555588; fill: #555588" onmouseover="highlight(evt)"  onmouseout="out(evt)" />
<rect x="97.5" y="97.5" width="5" height="5" style="stroke: #555588; fill: #555588" onmouseover="highlight(evt)"  onmouseout="out(evt)" />
<path d="M 200 100 v -13 l -13 13" style="stroke: #555588; fill: #555588" onmouseover="highlight(evt)"  onmouseout="out(evt)"  onmousedown="resize(evt)" />
<text id="text" x="102" y="54" text-anchor="middle"  onclick="edit(evt)">hello</text>
</g>

<g id="block3" transform="translate(400,200)"  onmousedown="down(evt)">    
<rect width="200" height="100" style="stroke: #555588; fill: #aaaaff" onclick="click(evt)" onmousedown=""   />
<rect x="-2.5" y="47.5" width="5" height="5" style="stroke: #555588; fill: #555588" onmouseover="highlight(evt)" onmouseout="out(evt)" />
<rect x="197.5" y="47.5" width="5" height="5" style="stroke: #555588; fill: #555588" onmouseover="highlight(evt)" onmouseout="out(evt)" />
<rect x="97.5" y="-2.5" width="5" height="5" style="stroke: #555588; fill: #555588" onmouseover="highlight(evt)"  onmouseout="out(evt)" />
<rect x="97.5" y="97.5" width="5" height="5" style="stroke: #555588; fill: #555588" onmouseover="highlight(evt)"  onmouseout="out(evt)" />
<path d="M 200 100 v -13 l -13 13" style="stroke: #555588; fill: #555588" onmouseover="highlight(evt)"  onmouseout="out(evt)"  onmousedown="resize(evt)" />
<text id="text" x="102" y="54" text-anchor="middle"  onclick="edit(evt)">hello</text>
</g>


<path class="connector" from="block1_east" to="block2_west" d="M 220 70 L 400 120" style="stroke: black; fill:none" />

<path class="connector" from="block2_south" to="block3_north" d="M 500 170 L 500 200" style="stroke: black; fill:none" />

<path class="connector" from="block1_south" to="block3_north" d="M 120 120 L 500 200" style="stroke: black; fill:none" />
</svg>