--- a/client/js/renderer/edge.js Wed Jun 03 17:27:46 2015 +0200
+++ b/client/js/renderer/edge.js Fri Jun 05 12:17:16 2015 +0200
@@ -22,12 +22,14 @@
this.line.add([0,0],[0,0],[0,0]);
this.line.__representation = this;
this.line.strokeWidth = this.options.edge_stroke_width;
+ this.arrow_scale = 1;
this.arrow = new paper.Path();
this.arrow.add(
[ 0, 0 ],
[ this.options.edge_arrow_length, this.options.edge_arrow_width / 2 ],
[ 0, this.options.edge_arrow_width ]
);
+ this.arrow.pivot = new paper.Point([ this.options.edge_arrow_length / 2, this.options.edge_arrow_width / 2 ]);
this.arrow.__representation = this;
this.text = $('<div class="Rk-Label Rk-Edge-Label">').appendTo(this.renderer.labels_$);
this.arrow_angle = 0;
@@ -57,6 +59,18 @@
this.minimap_line.strokeWidth = 1;
}
},
+ _getStrokeWidth: function() {
+ var thickness = (this.model.has('style') && this.model.get('style').thickness) || 1;
+ return this.options.edge_stroke_width + (thickness-1) * (this.options.edge_stroke_max_width - this.options.edge_stroke_width) / (this.options.edge_stroke_witdh_scale-1);
+ },
+ _getSelectedStrokeWidth: function() {
+ var thickness = (this.model.has('style') && this.model.get('style').thickness) || 1;
+ return this.options.selected_edge_stroke_width + (thickness-1) * (this.options.selected_edge_stroke_max_width - this.options.selected_edge_stroke_width) / (this.options.edge_stroke_witdh_scale-1);
+ },
+ _getArrowScale: function() {
+ var thickness = (this.model.has('style') && this.model.get('style').thickness) || 1;
+ return 1 + (thickness-1) * ((this.options.edge_arrow_max_width / this.options.edge_arrow_width) - 1) / (this.options.edge_stroke_witdh_scale-1);
+ },
redraw: function() {
var from = this.model.get("from"),
to = this.model.get("to");
@@ -67,36 +81,44 @@
this.to_representation = this.renderer.getRepresentationByModel(to);
if (typeof this.from_representation === "undefined" || typeof this.to_representation === "undefined" ||
(this.from_representation.hidden && !this.from_representation.ghost) ||
- (this.to_representation.hidden && !this.to_representation.ghost)){
+ (this.to_representation.hidden && !this.to_representation.ghost)) {
this.hide();
return;
}
- var _p0a = this.from_representation.paper_coords,
- _p1a = this.to_representation.paper_coords,
- _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 = _ortho.multiply( this.options.edge_gap_in_bundles * _group_pos ),
- _p0b = _p0a.add(_delta), /* Adding a 4 px difference */
- _p1b = _p1a.add(_delta), /* to differentiate bundled links */
- _a = _v.angle,
- _textdelta = _ortho.multiply(this.options.edge_label_distance),
- _handle = _v.divide(3),
- _color = this.model.get("color") || this.model.get("color") || (this.model.get("created_by") || Utils._USER_PLACEHOLDER(this.renkan)).get("color"),
- opacity = 1;
+ var _strokeWidth = this._getStrokeWidth(),
+ _arrow_scale = this._getArrowScale(),
+ _p0a = this.from_representation.paper_coords,
+ _p1a = this.to_representation.paper_coords,
+ _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 = _ortho.multiply( this.options.edge_gap_in_bundles * _group_pos ),
+ _p0b = _p0a.add(_delta), /* Adding a 4 px difference */
+ _p1b = _p1a.add(_delta), /* to differentiate bundled links */
+ _a = _v.angle,
+ _textdelta = _ortho.multiply(this.options.edge_label_distance + 0.5 * _arrow_scale * this.options.edge_arrow_width),
+ _handle = _v.divide(3),
+ _color = (this.model.has("style") && this.model.get("style").color) || (this.model.get("created_by") || Utils._USER_PLACEHOLDER(this.renkan)).get("color"),
+ _dash = (this.model.has("style") && this.model.get("style").dash) ? this.options.default_dash_array : null,
+ _opacity;
if (this.model.get("delete_scheduled") || this.from_representation.model.get("delete_scheduled") || this.to_representation.model.get("delete_scheduled")) {
- opacity = 0.5;
+ _opacity = 0.5;
this.line.dashArray = [2, 2];
} else {
- opacity = 1;
+ _opacity = this.ghost ? this.options.ghost_opacity : 1;
this.line.dashArray = null;
}
var old_act_btn = this.active_buttons;
+ this.arrow.visible =
+ (this.model.has("style") && this.model.get("style").arrow) ||
+ !this.model.has("style") ||
+ typeof this.model.get("style").arrow === 'undefined';
+
this.active_buttons = this.model.get("delete_scheduled") ? this.pending_delete_buttons : this.normal_buttons;
if (this.selected && this.renderer.isEditable() && old_act_btn !== this.active_buttons) {
@@ -109,17 +131,22 @@
}
this.paper_coords = _p0b.add(_p1b).divide(2);
+ this.line.strokeWidth = _strokeWidth;
this.line.strokeColor = _color;
- this.line.opacity = this.ghost ? 0.3 : opacity;
+ this.line.dashArray = _dash;
+ this.line.opacity = _opacity;
this.line.segments[0].point = _p0a;
this.line.segments[1].point = this.paper_coords;
this.line.segments[1].handleIn = _handle.multiply(-1);
this.line.segments[1].handleOut = _handle;
this.line.segments[2].point = _p1a;
- this.arrow.rotate(_a - this.arrow_angle);
+ this.arrow.scale(_arrow_scale / this.arrow_scale);
+ this.arrow_scale = _arrow_scale;
this.arrow.fillColor = _color;
- this.arrow.opacity = this.ghost ? 0.3 : opacity;
+ this.arrow.opacity = _opacity;
+ this.arrow.rotate(_a - this.arrow_angle, this.arrow.bounds.center);
this.arrow.position = this.paper_coords;
+
this.arrow_angle = _a;
if (_a > 90) {
_a -= 180;
@@ -139,7 +166,7 @@
transform: "rotate(" + _a + "deg)",
"-moz-transform": "rotate(" + _a + "deg)",
"-webkit-transform": "rotate(" + _a + "deg)",
- opacity: this.ghost ? 0.3 : opacity
+ opacity: _opacity
});
this.text_angle = _a;
@@ -157,7 +184,7 @@
hide: function(){
this.hidden = true;
this.ghost = false;
-
+
this.text.hide();
this.line.visible = false;
this.arrow.visible = false;
@@ -165,14 +192,14 @@
},
show: function(ghost){
this.ghost = ghost;
- if (this.ghost){
+ if (this.ghost) {
this.text.css('opacity', 0.3);
this.line.opacity = 0.3;
this.arrow.opacity = 0.3;
this.minimap_line.opacity = 0.3;
- }else{
+ } else {
this.hidden = false;
-
+
this.text.css('opacity', 1);
this.line.opacity = 1;
this.arrow.opacity = 1;
@@ -192,7 +219,7 @@
},
select: function() {
this.selected = true;
- this.line.strokeWidth = this.options.selected_edge_stroke_width;
+ this.line.strokeWidth = this._getSelectedStrokeWidth();
if (this.renderer.isEditable()) {
this.active_buttons.forEach(function(b) {
b.show();
@@ -211,7 +238,7 @@
b.hide();
});
}
- this.line.strokeWidth = this.options.edge_stroke_width;
+ this.line.strokeWidth = this._getStrokeWidth();
this._super("unselect");
}
},