implemented editing of layout in browser

resources/css/style.css

@@ -1,3 +1,8 @@
+body{
+	background: gray;
+	width: 100%;
+	height: 100%;
+}
 .tile{
 	border: 1px solid black;
 	width: 30px;
@@ -26,17 +31,20 @@ svg text{
 	font-size: 12px;
 }
 
-.menu .tile .list{
+.menu .list{
 	display: none;
 }
 
-.menu .tile:hover .list{
+.menu div:hover .list{
+	display: inherit;
+}
+
+.menu .tile .list{
 	position: fixed;
 	right: 0;
 	height: 30px;
 	left: 0; 
 	bottom: 40px; 
-	display: inline-block;
 }
 
 .menu .tile .list .tile{

resources/js/plan.js

@@ -1 +1,60 @@
-alert('hallo!');
+const ADD = 1;
+const SQUARE = 30;
+const BODY = 'body';
+const SVG = 'svg';
+var selected = null;
+var mode = null;
+
+
+function addTile(tile,x,y){	
+	console.log("addTile:",tile.id,x,y);
+	x = Math.floor(x/SQUARE);
+	y = Math.floor(y/SQUARE);
+	var id = 'tile-'+x+'-'+y;
+	$('#'+id).remove();
+	var tile = $(tile).clone().css({left:(30*x)+'px',top:(30*y)+'px','border':''}).attr('id',id);
+	console.log(tile);
+	$(BODY).append(tile);
+}
+
+function bodyClick(ev){
+	console.log('bodyClick:',ev);
+	switch (mode){
+	case undefined:
+		case null: return;
+		case ADD:
+			return addTile(selected,ev.clientX,ev.clientY);
+	}
+	console.log(ev.clientX,ev.clientY);
+}
+
+function closeMenu(ev){
+	console.log('closeMenu:',ev);
+	if (selected != null) $(selected).css('border','');
+	$('.menu .list').css('display','')
+	mode = null;
+	selected = null;
+	return false;
+}
+
+function enableAdding(ev){
+	console.log('enableAdding:',ev);
+	if (selected != null) $(selected).css('border','');
+	selected = ev.target;
+	while (selected != null && selected.nodeName != SVG) selected = selected.parentNode;
+	if (selected == null){
+		mode = null;
+	} else {
+		$(selected).css('border','2px solid red');
+		$('.menu .tile .list').css('display','inherit');
+		mode = ADD;
+	}
+	return false; // otherwise body.click would also be triggered
+}
+
+window.onload = function () {
+	var isDragging = false;
+	$('.menu > div').click(closeMenu);
+	$('.menu .tile .list svg').click(enableAdding);
+	$(BODY).click(bodyClick);
+}

resources/svg/DiagES.svg

@@ -0,0 +1,3 @@
+<svg width="100" height="100" viewbox="0 0 100 100">
+	<polygon points="65,100 35,100 100,35 100,65" />
+</svg>