301 this.node_image.position = this.paper_coords; |
302 this.node_image.position = this.paper_coords; |
302 } |
303 } |
303 } |
304 } |
304 this.last_circle_radius = this.circle_radius; |
305 this.last_circle_radius = this.circle_radius; |
305 |
306 |
306 this.title.content = this.model.get("title") || this.renderer.renkan.translate("(untitled)"); |
307 var _text = this.model.get("title") || this.renderer.renkan.translate("(untitled)"); |
|
308 this.title.content = _text.length > Rkns.Renderer._NODE_MAX_CHAR ? (_text.substr(0,Rkns.Renderer._NODE_MAX_CHAR) + '…') : _text; |
|
309 |
307 this.title.position = this.paper_coords.add([0, this.circle_radius + 1.5 *Rkns.Renderer._NODE_FONT_SIZE]); |
310 this.title.position = this.paper_coords.add([0, this.circle_radius + 1.5 *Rkns.Renderer._NODE_FONT_SIZE]); |
308 var _color = this.model.get("color") || (this.model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color"); |
311 var _color = this.model.get("color") || (this.model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color"); |
309 this.circle.strokeColor = _color; |
312 this.circle.strokeColor = _color; |
310 this.edit_button.moveTo(this.paper_coords); |
313 this.edit_button.moveTo(this.paper_coords); |
311 this.remove_button.moveTo(this.paper_coords); |
314 this.remove_button.moveTo(this.paper_coords); |
319 _this.node_image.remove(); |
322 _this.node_image.remove(); |
320 } |
323 } |
321 _this.renderer.node_layer.activate(); |
324 _this.renderer.node_layer.activate(); |
322 var _ratio = Math.min(2 / _image.width, 2 / _image.height ); |
325 var _ratio = Math.min(2 / _image.width, 2 / _image.height ); |
323 var _raster = new paper.Raster(_image); |
326 var _raster = new paper.Raster(_image); |
324 var _clip = new paper.Path.Circle([0, 0], 1); |
327 if (_this.renderer.renkan.clip_images) { |
325 _raster.scale(_ratio); |
328 var _clip = new paper.Path.Circle([0, 0], 1); |
326 _this.node_image = new paper.Group(_clip, _raster); |
329 _raster.scale(_ratio); |
327 _this.node_image.opacity = .9; |
330 _this.node_image = new paper.Group(_clip, _raster); |
328 /* This is a workaround to allow clipping at group level |
331 _this.node_image.opacity = .9; |
329 * If opacity was set to 1, paper.js would merge all clipping groups in one (known bug). |
332 /* This is a workaround to allow clipping at group level |
330 */ |
333 * If opacity was set to 1, paper.js would merge all clipping groups in one (known bug). |
331 _this.node_image.clipped = true; |
334 */ |
|
335 _this.node_image.clipped = true; |
|
336 } else { |
|
337 _this.node_image = _raster; |
|
338 } |
332 _this.node_image.__representation = _this; |
339 _this.node_image.__representation = _this; |
333 var square = new paper.Size(_this.circle_radius, _this.circle_radius), |
340 var square = new paper.Size(_this.circle_radius, _this.circle_radius), |
334 topleft = _this.paper_coords.subtract(square), |
341 topleft = _this.paper_coords.subtract(square), |
335 bounds = new paper.Rectangle(topleft, square.multiply(2)); |
342 bounds = new paper.Rectangle(topleft, square.multiply(2)); |
336 _this.node_image.fitBounds(bounds); |
343 _this.node_image.fitBounds(bounds); |
491 var _p0a = this.from_representation.paper_coords, |
498 var _p0a = this.from_representation.paper_coords, |
492 _p1a = this.to_representation.paper_coords, |
499 _p1a = this.to_representation.paper_coords, |
493 _v = _p1a.subtract(_p0a), |
500 _v = _p1a.subtract(_p0a), |
494 _r = _v.length, |
501 _r = _v.length, |
495 _u = _v.divide(_r), |
502 _u = _v.divide(_r), |
|
503 _ortho = new paper.Point([- _u.y, _u.x]), |
496 _group_pos = this.bundle.getPosition(this), |
504 _group_pos = this.bundle.getPosition(this), |
497 _delta = new paper.Point([- _u.y, _u.x]).multiply( 12 * _group_pos ), |
505 _delta = _ortho.multiply( 12 * _group_pos ), |
498 _p0b = _p0a.add(_delta), /* Adding a 4 px difference */ |
506 _p0b = _p0a.add(_delta), /* Adding a 4 px difference */ |
499 _p1b = _p1a.add(_delta), /* to differentiate inbound and outbound links */ |
507 _p1b = _p1a.add(_delta), /* to differentiate inbound and outbound links */ |
500 _a = _v.angle, |
508 _a = _v.angle, |
|
509 _textdelta = _ortho.multiply(-Rkns.Renderer._EDGE_DISTANCE), |
501 _handle = _v.divide(3), |
510 _handle = _v.divide(3), |
502 _color = this.model.get("color") || this.model.get("color") || (this.model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color"); |
511 _color = this.model.get("color") || this.model.get("color") || (this.model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color"); |
503 this.paper_coords = _p0b.add(_p1b).divide(2); |
512 this.paper_coords = _p0b.add(_p1b).divide(2); |
504 this.line.strokeColor = _color; |
513 this.line.strokeColor = _color; |
505 this.line.segments[0].point = _p0a; |
514 this.line.segments[0].point = _p0a; |
511 this.arrow.fillColor = _color; |
520 this.arrow.fillColor = _color; |
512 this.arrow.position = this.paper_coords.subtract(_u.multiply(4)); |
521 this.arrow.position = this.paper_coords.subtract(_u.multiply(4)); |
513 this.arrow_angle = _a; |
522 this.arrow_angle = _a; |
514 if (_a > 90) { |
523 if (_a > 90) { |
515 _a -= 180; |
524 _a -= 180; |
|
525 _textdelta = _textdelta.multiply(-1); |
516 } |
526 } |
517 if (_a < -90) { |
527 if (_a < -90) { |
518 _a += 180; |
528 _a += 180; |
|
529 _textdelta = _textdelta.multiply(-1); |
519 } |
530 } |
520 this.text.rotate(_a - this.text_angle); |
531 this.text.rotate(_a - this.text_angle); |
521 this.text.content = this.model.get("title"); |
532 var _text = this.model.get("title"); |
522 this.text.position = this.paper_coords; |
533 this.text.content = _text.length > Rkns.Renderer._EDGE_MAX_CHAR ? (_text.substr(0,Rkns.Renderer._EDGE_MAX_CHAR) + '…') : _text; |
|
534 this.text.position = this.paper_coords.add(_textdelta); |
523 this.text_angle = _a; |
535 this.text_angle = _a; |
524 this.edit_button.moveTo(this.paper_coords); |
536 this.edit_button.moveTo(this.paper_coords); |
525 this.remove_button.moveTo(this.paper_coords); |
537 this.remove_button.moveTo(this.paper_coords); |
526 } |
538 } |
527 |
539 |