|
1 "use strict"; |
|
2 |
|
3 define(['jquery', 'underscore', 'requtils', 'renderer/baserepresentation'], function ($, _, requtils, BaseRepresentation) { |
|
4 |
|
5 var Utils = requtils.getUtils(); |
|
6 |
|
7 /* Edge Class Begin */ |
|
8 |
|
9 //var Edge = Renderer.Edge = Utils.inherit(Renderer._BaseRepresentation); |
|
10 var Edge = Utils.inherit(BaseRepresentation); |
|
11 |
|
12 _(Edge.prototype).extend({ |
|
13 _init: function() { |
|
14 this.renderer.edge_layer.activate(); |
|
15 this.type = "Edge"; |
|
16 this.from_representation = this.renderer.getRepresentationByModel(this.model.get("from")); |
|
17 this.to_representation = this.renderer.getRepresentationByModel(this.model.get("to")); |
|
18 this.bundle = this.renderer.addToBundles(this); |
|
19 this.line = new paper.Path(); |
|
20 this.line.add([0,0],[0,0],[0,0]); |
|
21 this.line.__representation = this; |
|
22 this.line.strokeWidth = this.options.edge_stroke_width; |
|
23 this.arrow = new paper.Path(); |
|
24 this.arrow.add( |
|
25 [ 0, 0 ], |
|
26 [ this.options.edge_arrow_length, this.options.edge_arrow_width / 2 ], |
|
27 [ 0, this.options.edge_arrow_width ] |
|
28 ); |
|
29 this.arrow.__representation = this; |
|
30 this.text = $('<div class="Rk-Label Rk-Edge-Label">').appendTo(this.renderer.labels_$); |
|
31 this.arrow_angle = 0; |
|
32 if (this.options.editor_mode) { |
|
33 var Renderer = requtils.getRenderer(); |
|
34 this.normal_buttons = [ |
|
35 new Renderer.EdgeEditButton(this.renderer, null), |
|
36 new Renderer.EdgeRemoveButton(this.renderer, null) |
|
37 ]; |
|
38 this.pending_delete_buttons = [ |
|
39 new Renderer.EdgeRevertButton(this.renderer, null) |
|
40 ]; |
|
41 this.all_buttons = this.normal_buttons.concat(this.pending_delete_buttons); |
|
42 for (var i = 0; i < this.all_buttons.length; i++) { |
|
43 this.all_buttons[i].source_representation = this; |
|
44 } |
|
45 this.active_buttons = []; |
|
46 } else { |
|
47 this.active_buttons = this.all_buttons = []; |
|
48 } |
|
49 |
|
50 if (this.renderer.minimap) { |
|
51 this.renderer.minimap.edge_layer.activate(); |
|
52 this.minimap_line = new paper.Path(); |
|
53 this.minimap_line.add([0,0],[0,0]); |
|
54 this.minimap_line.__representation = this.renderer.minimap.miniframe.__representation; |
|
55 this.minimap_line.strokeWidth = 1; |
|
56 } |
|
57 }, |
|
58 redraw: function() { |
|
59 var from = this.model.get("from"), |
|
60 to = this.model.get("to"); |
|
61 if (!from || !to) { |
|
62 return; |
|
63 } |
|
64 this.from_representation = this.renderer.getRepresentationByModel(from); |
|
65 this.to_representation = this.renderer.getRepresentationByModel(to); |
|
66 if (typeof this.from_representation === "undefined" || typeof this.to_representation === "undefined") { |
|
67 return; |
|
68 } |
|
69 var _p0a = this.from_representation.paper_coords, |
|
70 _p1a = this.to_representation.paper_coords, |
|
71 _v = _p1a.subtract(_p0a), |
|
72 _r = _v.length, |
|
73 _u = _v.divide(_r), |
|
74 _ortho = new paper.Point([- _u.y, _u.x]), |
|
75 _group_pos = this.bundle.getPosition(this), |
|
76 _delta = _ortho.multiply( this.options.edge_gap_in_bundles * _group_pos ), |
|
77 _p0b = _p0a.add(_delta), /* Adding a 4 px difference */ |
|
78 _p1b = _p1a.add(_delta), /* to differentiate bundled links */ |
|
79 _a = _v.angle, |
|
80 _textdelta = _ortho.multiply(this.options.edge_label_distance), |
|
81 _handle = _v.divide(3), |
|
82 _color = this.model.get("color") || this.model.get("color") || (this.model.get("created_by") || Utils._USER_PLACEHOLDER(this.renkan)).get("color"), |
|
83 opacity = 1; |
|
84 |
|
85 if (this.model.get("delete_scheduled") || this.from_representation.model.get("delete_scheduled") || this.to_representation.model.get("delete_scheduled")) { |
|
86 opacity = .5; |
|
87 this.line.dashArray = [2, 2]; |
|
88 } else { |
|
89 opacity = 1; |
|
90 this.line.dashArray = null; |
|
91 } |
|
92 |
|
93 var old_act_btn = this.active_buttons; |
|
94 |
|
95 this.active_buttons = this.model.get("delete_scheduled") ? this.pending_delete_buttons : this.normal_buttons; |
|
96 |
|
97 if (this.selected && this.renderer.isEditable() && old_act_btn !== this.active_buttons) { |
|
98 old_act_btn.forEach(function(b) { |
|
99 b.hide(); |
|
100 }); |
|
101 this.active_buttons.forEach(function(b) { |
|
102 b.show(); |
|
103 }); |
|
104 } |
|
105 |
|
106 this.paper_coords = _p0b.add(_p1b).divide(2); |
|
107 this.line.strokeColor = _color; |
|
108 this.line.opacity = opacity; |
|
109 this.line.segments[0].point = _p0a; |
|
110 this.line.segments[1].point = this.paper_coords; |
|
111 this.line.segments[1].handleIn = _handle.multiply(-1); |
|
112 this.line.segments[1].handleOut = _handle; |
|
113 this.line.segments[2].point = _p1a; |
|
114 this.arrow.rotate(_a - this.arrow_angle); |
|
115 this.arrow.fillColor = _color; |
|
116 this.arrow.opacity = opacity; |
|
117 this.arrow.position = this.paper_coords; |
|
118 this.arrow_angle = _a; |
|
119 if (_a > 90) { |
|
120 _a -= 180; |
|
121 _textdelta = _textdelta.multiply(-1); |
|
122 } |
|
123 if (_a < -90) { |
|
124 _a += 180; |
|
125 _textdelta = _textdelta.multiply(-1); |
|
126 } |
|
127 var _text = this.model.get("title") || this.renkan.translate(this.options.label_untitled_edges) || ""; |
|
128 _text = Utils.shortenText(_text, this.options.node_label_max_length); |
|
129 this.text.text(_text); |
|
130 var _textpos = this.paper_coords.add(_textdelta); |
|
131 this.text.css({ |
|
132 left: _textpos.x, |
|
133 top: _textpos.y, |
|
134 transform: "rotate(" + _a + "deg)", |
|
135 "-moz-transform": "rotate(" + _a + "deg)", |
|
136 "-webkit-transform": "rotate(" + _a + "deg)", |
|
137 opacity: opacity |
|
138 }); |
|
139 this.text_angle = _a; |
|
140 |
|
141 var _pc = this.paper_coords; |
|
142 this.all_buttons.forEach(function(b) { |
|
143 b.moveTo(_pc); |
|
144 }); |
|
145 |
|
146 if (this.renderer.minimap) { |
|
147 this.minimap_line.strokeColor = _color; |
|
148 this.minimap_line.segments[0].point = this.renderer.toMinimapCoords(new paper.Point(this.from_representation.model.get("position"))); |
|
149 this.minimap_line.segments[1].point = this.renderer.toMinimapCoords(new paper.Point(this.to_representation.model.get("position"))); |
|
150 } |
|
151 }, |
|
152 openEditor: function() { |
|
153 this.renderer.removeRepresentationsOfType("editor"); |
|
154 var _editor = this.renderer.addRepresentation("EdgeEditor",null); |
|
155 _editor.source_representation = this; |
|
156 _editor.draw(); |
|
157 }, |
|
158 select: function() { |
|
159 this.selected = true; |
|
160 this.line.strokeWidth = this.options.selected_edge_stroke_width; |
|
161 if (this.renderer.isEditable()) { |
|
162 this.active_buttons.forEach(function(b) { |
|
163 b.show(); |
|
164 }); |
|
165 } |
|
166 if (!this.options.editor_mode) { |
|
167 this.openEditor(); |
|
168 } |
|
169 this._super("select"); |
|
170 }, |
|
171 unselect: function(_newTarget) { |
|
172 if (!_newTarget || _newTarget.source_representation !== this) { |
|
173 this.selected = false; |
|
174 if (this.options.editor_mode) { |
|
175 this.all_buttons.forEach(function(b) { |
|
176 b.hide(); |
|
177 }); |
|
178 } |
|
179 this.line.strokeWidth = this.options.edge_stroke_width; |
|
180 this._super("unselect"); |
|
181 } |
|
182 }, |
|
183 mousedown: function(_event, _isTouch) { |
|
184 if (_isTouch) { |
|
185 this.renderer.unselectAll(); |
|
186 this.select(); |
|
187 } |
|
188 }, |
|
189 mouseup: function(_event, _isTouch) { |
|
190 if (!this.renkan.read_only && this.renderer.is_dragging) { |
|
191 this.from_representation.saveCoords(); |
|
192 this.to_representation.saveCoords(); |
|
193 this.from_representation.is_dragging = false; |
|
194 this.to_representation.is_dragging = false; |
|
195 } else { |
|
196 if (!_isTouch) { |
|
197 this.openEditor(); |
|
198 } |
|
199 this.model.trigger("clicked"); |
|
200 } |
|
201 this.renderer.click_target = null; |
|
202 this.renderer.is_dragging = false; |
|
203 }, |
|
204 paperShift: function(_delta) { |
|
205 if (this.options.editor_mode) { |
|
206 if (!this.options.read_only) { |
|
207 this.from_representation.paperShift(_delta); |
|
208 this.to_representation.paperShift(_delta); |
|
209 } |
|
210 } else { |
|
211 this.renderer.paperShift(_delta); |
|
212 } |
|
213 }, |
|
214 destroy: function() { |
|
215 this._super("destroy"); |
|
216 this.line.remove(); |
|
217 this.arrow.remove(); |
|
218 this.text.remove(); |
|
219 if (this.renderer.minimap) { |
|
220 this.minimap_line.remove(); |
|
221 } |
|
222 this.all_buttons.forEach(function(b) { |
|
223 b.destroy(); |
|
224 }); |
|
225 var _this = this; |
|
226 this.bundle.edges = _(this.bundle.edges).reject(function(_edge) { |
|
227 return _this === _edge; |
|
228 }); |
|
229 } |
|
230 }); |
|
231 |
|
232 return Edge; |
|
233 |
|
234 }); |
|
235 |