client/js/renderer/edge.js
changeset 459 98cae534083d
parent 458 423bdf56d103
child 461 48235ed6b07d
--- a/client/js/renderer/edge.js	Tue Jun 02 00:39:47 2015 +0200
+++ b/client/js/renderer/edge.js	Wed Jun 03 13:16:46 2015 +0200
@@ -20,12 +20,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;
@@ -55,6 +57,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");
@@ -66,7 +80,9 @@
             if (typeof this.from_representation === "undefined" || typeof this.to_representation === "undefined") {
                 return;
             }
-            var _p0a = this.from_representation.paper_coords,
+            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,
@@ -77,7 +93,7 @@
                 _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),
+                _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,
@@ -93,6 +109,9 @@
 
             var old_act_btn = this.active_buttons;
 
+            var array_opacity =
+                (this.model.has("style") && this.model.get("style").arrow) || !this.model.has("style") || (typeof this.model.get("style").arrow === 'undefined') ? opacity : 0;
+
             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) {
@@ -107,6 +126,7 @@
 
 
             this.paper_coords = _p0b.add(_p1b).divide(2);
+            this.line.strokeWidth = _strokeWidth;
             this.line.strokeColor = _color;
             this.line.dashArray = _dash;
             this.line.opacity = opacity;
@@ -115,10 +135,13 @@
             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 = opacity;
+            this.arrow.opacity = array_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;
@@ -161,7 +184,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();
@@ -180,7 +203,7 @@
                         b.hide();
                     });
                 }
-                this.line.strokeWidth = this.options.edge_stroke_width;
+                this.line.strokeWidth = this._getStrokeWidth();
                 this._super("unselect");
             }
         },