# HG changeset patch
# User veltr
# Date 1366126260 -7200
# Node ID 83d7a10e1ad704e87cc9b0493ee78dee4b42ddb2
# Parent  7d5f722d76b208e7494e043b03f3eca60e9f1d6d
Labels as divs

diff -r 7d5f722d76b2 -r 83d7a10e1ad7 client/css/renkan.css
--- a/client/css/renkan.css	Mon Apr 15 18:36:59 2013 +0200
+++ b/client/css/renkan.css	Tue Apr 16 17:31:00 2013 +0200
@@ -109,7 +109,7 @@
 
 .Rk-UserList {
     box-shadow: 0 2px 2px #999999;
-    position: relative; z-index: 3; display: none; padding-top: 8px;
+    position: relative; z-index: 4; display: none; padding-top: 8px;
 }
 
 .Rk-User {
@@ -131,7 +131,7 @@
 }
 
 .Rk-TopBar-Tooltip {
-    position: absolute; top: 31px; left: 50%; margin-left: -60px; width: 120px; z-index: 3; display: none;
+    position: absolute; top: 31px; left: 50%; margin-left: -60px; width: 120px; z-index: 4; display: none;
 }
 
 .Rk-TopBar-Tooltip-Contents {
@@ -212,6 +212,9 @@
 
 .Rk-Editing-Space {
 	position: absolute; left: 0; top: 35px; right: 0; bottom: 0; overflow: hidden;
+	background: -moz-radial-gradient( center, circle, #ffffff 40%, #e0e0e0 90%);
+	background: -webkit-radial-gradient( center, circle, #ffffff 40%, #e0e0e0 90%);
+	background: -ms-radial-gradient( center, circle, #ffffff 40%, #e0e0e0 90%);
 }
 
 .Rk-Editing-Space-Full {
@@ -219,16 +222,29 @@
 }
 
 .Rk-Canvas {
-	background: -moz-radial-gradient( center, circle, #ffffff 40%, #e0e0e0 90%);
-	background: -webkit-radial-gradient( center, circle, #ffffff 40%, #e0e0e0 90%);
-	background: -ms-radial-gradient( center, circle, #ffffff 40%, #e0e0e0 90%);
-    position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1;
+    position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 2;
+}
+
+/* Node Labels */
+
+.Rk-Labels {
+    position: absolute; left: 0; top: 0; z-index: 1;
+    font-family: "Segoe UI", "Helvetica Neue", Arial, Helvetica, sans-serif;
+}
+
+.Rk-Label {
+	position: absolute; width: 160px; margin-left: -80px; text-align: center; font-size: 13px; line-height: 13px;
+}
+
+.Rk-Edge-Label {
+	font-size: 11px; transform-origin: 50% 0; -moz-transform-origin: 50% 0;
+	-webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0;
 }
 
 /* Editors */
 
 .Rk-Editor {
-    position: absolute; left: 0; top: 0; z-index: 2;
+    position: absolute; left: 0; top: 0; z-index: 3;
 }
 
 .Rk-Notifications {
diff -r 7d5f722d76b2 -r 83d7a10e1ad7 client/js/defaults.js
--- a/client/js/defaults.js	Mon Apr 15 18:36:59 2013 +0200
+++ b/client/js/defaults.js	Tue Apr 16 17:31:00 2013 +0200
@@ -54,22 +54,16 @@
 	selected_node_stroke_width: 4,
 	node_fill_color: "#ffffff",
 	highlighted_node_fill_color: "#ffff00",
-	node_label_color: "#000000",
-	node_label_font_size: 10,
-	node_label_font: 'Helvetica, Arial, sans-serif',
 	node_label_distance: 5,
 		/* Vertical distance between node and label */
-	node_label_max_length: 40,
+	node_label_max_length: 60,
 		/* Maximum displayed text length */
 	
 	/* EDGE DISPLAY OPTIONS */
 	
 	edge_stroke_width: 2,
 	selected_edge_stroke_width: 4,
-	edge_label_color: "#000000",
-	edge_label_font_size: 9,
-	edge_label_font: 'Helvetica, Arial, sans-serif',
-	edge_label_distance: -3,
+	edge_label_distance: 0,
 	edge_label_max_length: 20,
     edge_arrow_length: 18,
     edge_arrow_width: 12,
diff -r 7d5f722d76b2 -r 83d7a10e1ad7 client/js/paper-renderer.js
--- a/client/js/paper-renderer.js	Mon Apr 15 18:36:59 2013 +0200
+++ b/client/js/paper-renderer.js	Tue Apr 16 17:31:00 2013 +0200
@@ -281,12 +281,7 @@
     	this.circle.opacity = .01;
     	this.h_ratio = 0;
     }
-    this.title = new paper.PointText([0,0]);
-    this.title.characterStyle = {
-        font: this.options.node_label_font,
-        fontSize: this.options.node_label_font_size,
-        fillColor: this.options.node_label_color
-    };
+    this.title = Rkns.$('<div class="Rk-Label">').appendTo(this.renderer.labels_$);
     if (this.options.editor_mode) {
     	this.buttons = [
     		new Rkns.Renderer.NodeEditButton(this.renderer, null),
@@ -302,7 +297,7 @@
     	this.buttons = [];
     }
     this.last_circle_radius = 1;
-    this.title.paragraphStyle.justification = 'center';
+//    this.title.paragraphStyle.justification = 'center';
     
     if (this.renderer.minimap) {
 	    this.renderer.minimap.node_layer.activate();
@@ -339,12 +334,12 @@
     this.last_circle_radius = this.circle_radius;
     
     var _text = this.model.get("title") || this.renkan.translate("(untitled)");
-    this.title.content = Rkns.Renderer.Utils.shortenText(_text, this.options.node_label_max_length);
-
-    this.title.position = this.paper_coords.add([
-    	0,
-    	this.circle_radius * this.h_ratio + this.options.node_label_font_size + this.options.node_label_distance
-	]);
+	_text = Rkns.Renderer.Utils.shortenText(_text, this.options.node_label_max_length);
+	this.title.text(_text);
+	this.title.css({
+		left: this.paper_coords.x,
+		top: this.paper_coords.y + this.circle_radius * this.h_ratio + this.options.node_label_distance
+	})
     var _color = this.model.get("color") || (this.model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER(this.renkan)).get("color");
     this.circle.strokeColor = _color;
     var _pc = this.paper_coords;
@@ -564,14 +559,7 @@
     	[ 0, this.options.edge_arrow_width ]
 	);
     this.arrow.__representation = this;
-    this.text = new paper.PointText();
-    this.text.characterStyle = {
-        font: this.options.edge_label_font,
-        fontSize: this.options.edge_label_font_size,
-        fillColor: this.options.edge_label_color
-    };
-    this.text.paragraphStyle.justification = 'center';
-    this.text_angle = 0;
+    this.text = Rkns.$('<div class="Rk-Label Rk-Edge-Label">').appendTo(this.renderer.labels_$);
     this.arrow_angle = 0;
     if (this.options.editor_mode) {
         this.edit_button = new Rkns.Renderer.EdgeEditButton(this.renderer, null);
@@ -628,10 +616,17 @@
         _a += 180;
         _textdelta = _textdelta.multiply(-1);
     }
-    this.text.rotate(_a - this.text_angle);
     var _text = this.model.get("title");
-    this.text.content = Rkns.Renderer.Utils.shortenText(_text, this.options.edge_label_max_length);
-    this.text.position = this.paper_coords.add(_textdelta);
+	_text = Rkns.Renderer.Utils.shortenText(_text, this.options.node_label_max_length);
+    this.text.text(_text);
+    var _textpos = this.paper_coords.add(_textdelta);
+    this.text.css({
+    	left: _textpos.x,
+    	top: _textpos.y,
+    	transform: "rotate(" + _a + "deg)",
+    	"-moz-transform": "rotate(" + _a + "deg)",
+    	"-webkit-transform": "rotate(" + _a + "deg)"
+    });
     this.text_angle = _a;
     if (this.options.editor_mode) {
 	    this.edit_button.moveTo(this.paper_coords);
@@ -1212,8 +1207,8 @@
 Rkns.Renderer.NodeRemoveButton.prototype._init = function() {
     this.type = "Node-remove-button";
     this.lastSectorInner = 0;
-    this.startAngle = 90;
-    this.endAngle = 180;
+    this.startAngle = 0;
+    this.endAngle = 90;
     this.imageFile = 'img/remove.png';
     this.text = "Remove";
 }
@@ -1234,8 +1229,8 @@
 Rkns.Renderer.NodeLinkButton.prototype._init = function() {
     this.type = "Node-link-button";
     this.lastSectorInner = 0;
-    this.startAngle = 0;
-    this.endAngle = 90;
+    this.startAngle = 90;
+    this.endAngle = 180;
     this.imageFile = 'img/link.png';
     this.text = "Link to another node";
 }
@@ -1351,6 +1346,7 @@
     this.$.html(this.template(_renkan));
     this.onStatusChange();
     this.canvas_$ = this.$.find(".Rk-Canvas");
+    this.labels_$ = this.$.find(".Rk-Labels");
     this.editor_$ = this.$.find(".Rk-Editor");
     this.notif_$ = this.$.find(".Rk-Notifications");
     paper.setup(this.canvas_$[0]);
@@ -1409,15 +1405,19 @@
     
     this.canvas_$.on({
     	mousedown: function(_event) {
+    		_event.preventDefault();
     		_this.onMouseDown(_event, false);
     	},
     	mousemove: function(_event) {
+    		_event.preventDefault();
         	_this.onMouseMove(_event, false);
 	    },
 	    mouseup: function(_event) {
+    		_event.preventDefault();
 	        _this.onMouseUp(_event, false);
 	    },
 	    mousewheel: function(_event, _delta) {
+    		_event.preventDefault();
 	        if (_allowScroll) {
 	        	_this.onScroll(_event, _delta);
 	        }
@@ -1454,9 +1454,11 @@
 	    	_this.onMouseUp(_event.originalEvent.changedTouches[0], true);
 	    },
 	    dblclick: function(_event) {
+    		_event.preventDefault();
 	        _this.onDoubleClick(_event);
 	    },
 	    mouseleave: function(_event) {
+    		_event.preventDefault();
 	        _this.onMouseUp(_event, false);
 	        _this.click_target = null;
 	        _this.is_dragging = false;
@@ -1465,12 +1467,12 @@
 	    	_event.preventDefault();
 	    },
 	    dragenter: function(_event) {
+	    	_event.preventDefault();
 	    	_allowScroll = false;
-	    	_event.preventDefault();
 	    },
 	    dragleave: function(_event) {
+	    	_event.preventDefault();
 	    	_allowScroll = true;
-	    	_event.preventDefault();
 	    },
 	    drop: function(_event) {
 	    	_event.preventDefault();
@@ -1702,7 +1704,8 @@
     + '<%-translate("Renkan \'Drag-to-Add\' bookmarklet")%></div></div></a>'
     + '<div class="Rk-TopBar-Separator"></div>'
     + '<% } %></div><% } %>'
-    + '<div class="Rk-Editing-Space<% if (!options.show_top_bar) { %> Rk-Editing-Space-Full<% } %>"><canvas class="Rk-Canvas" resize></canvas><div class="Rk-Editor"><div class="Rk-Notifications"></div>'
+    + '<div class="Rk-Editing-Space<% if (!options.show_top_bar) { %> Rk-Editing-Space-Full<% } %>">'
+    + '<div class="Rk-Labels"></div><canvas class="Rk-Canvas" resize></canvas><div class="Rk-Editor"><div class="Rk-Notifications"></div>'
     + '<% if (options.show_bins) { %><div class="Rk-Fold-Bins">&laquo;</div><% } %>'
     + '<div class="Rk-ZoomButtons"><div class="Rk-ZoomIn" title="<%-translate("Zoom In")%>"></div><div class="Rk-ZoomOut" title="<%-translate("Zoom Out")%>"></div></div>'
     + '</div></div>'