client/js/paper-renderer.js
changeset 73 cc9deb3b3e13
parent 72 dbd90c784424
child 75 7adef9ce92aa
--- a/client/js/paper-renderer.js	Mon Mar 11 14:43:52 2013 +0100
+++ b/client/js/paper-renderer.js	Wed Mar 13 10:19:24 2013 +0100
@@ -8,6 +8,7 @@
     _EDGE_BUTTON_OUTER: 40,
     _NODE_FONT_SIZE: 10,
     _EDGE_FONT_SIZE: 9,
+    _EDGE_DISTANCE: 3,
     _NODE_MAX_CHAR: 50,
     _EDGE_MAX_CHAR: 40,
     _ARROW_LENGTH: 16,
@@ -303,7 +304,9 @@
     }
     this.last_circle_radius = this.circle_radius;
     
-    this.title.content = this.model.get("title") || this.renderer.renkan.translate("(untitled)");
+    var _text = this.model.get("title") || this.renderer.renkan.translate("(untitled)");
+    this.title.content = _text.length > Rkns.Renderer._NODE_MAX_CHAR ? (_text.substr(0,Rkns.Renderer._NODE_MAX_CHAR) + '…') : _text;
+
     this.title.position = this.paper_coords.add([0, this.circle_radius + 1.5 *Rkns.Renderer._NODE_FONT_SIZE]);
     var _color = this.model.get("color") || (this.model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color");
     this.circle.strokeColor = _color;
@@ -321,14 +324,18 @@
             _this.renderer.node_layer.activate();
             var _ratio = Math.min(2 / _image.width, 2 / _image.height );
             var _raster = new paper.Raster(_image);
-            var _clip = new paper.Path.Circle([0, 0], 1);
-            _raster.scale(_ratio);
-            _this.node_image = new paper.Group(_clip, _raster);
-            _this.node_image.opacity = .9;
-            /* This is a workaround to allow clipping at group level
-             * If opacity was set to 1, paper.js would merge all clipping groups in one (known bug).
-            */
-            _this.node_image.clipped = true;
+            if (_this.renderer.renkan.clip_images) {
+	            var _clip = new paper.Path.Circle([0, 0], 1);
+	            _raster.scale(_ratio);
+	            _this.node_image = new paper.Group(_clip, _raster);
+	            _this.node_image.opacity = .9;
+	            /* This is a workaround to allow clipping at group level
+	             * If opacity was set to 1, paper.js would merge all clipping groups in one (known bug).
+	            */
+	            _this.node_image.clipped = true;
+            } else {
+            	_this.node_image = _raster;
+            }
             _this.node_image.__representation = _this;
 		    var square = new paper.Size(_this.circle_radius, _this.circle_radius),
 		    	topleft = _this.paper_coords.subtract(square),
@@ -493,11 +500,13 @@
         _v = _p1a.subtract(_p0a),
         _r = _v.length,
         _u = _v.divide(_r),
+        _ortho = new paper.Point([- _u.y, _u.x]),
         _group_pos = this.bundle.getPosition(this),
-        _delta = new paper.Point([- _u.y, _u.x]).multiply( 12 * _group_pos ),
+        _delta = _ortho.multiply( 12 * _group_pos ),
         _p0b = _p0a.add(_delta), /* Adding a 4 px difference */
         _p1b = _p1a.add(_delta), /* to differentiate inbound and outbound links */
         _a = _v.angle,
+        _textdelta = _ortho.multiply(-Rkns.Renderer._EDGE_DISTANCE),
         _handle = _v.divide(3),
         _color = this.model.get("color") || this.model.get("color") || (this.model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color");
     this.paper_coords = _p0b.add(_p1b).divide(2);
@@ -513,13 +522,16 @@
     this.arrow_angle = _a;
     if (_a > 90) {
         _a -= 180;
+        _textdelta = _textdelta.multiply(-1);
     }
     if (_a < -90) {
         _a += 180;
+        _textdelta = _textdelta.multiply(-1);
     }
     this.text.rotate(_a - this.text_angle);
-    this.text.content = this.model.get("title");
-    this.text.position = this.paper_coords;
+    var _text = this.model.get("title");
+    this.text.content = _text.length > Rkns.Renderer._EDGE_MAX_CHAR ? (_text.substr(0,Rkns.Renderer._EDGE_MAX_CHAR) + '…') : _text;
+    this.text.position = this.paper_coords.add(_textdelta);
     this.text_angle = _a;
     this.edit_button.moveTo(this.paper_coords);
     this.remove_button.moveTo(this.paper_coords);