diff -r e0c7be5dc02c -r 6dcff4438175 client/js/renderer/edge.js --- 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 = $('
').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"); } },