diff -r dbd90c784424 -r cc9deb3b3e13 client/js/paper-renderer.js --- 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);