define(['jquery', 'underscore', 'requtils', 'renderer/baserepresentation'], function ($, _, requtils, BaseRepresentation) {
'use strict';
var Utils = requtils.getUtils();
/* Edge Class Begin */
//var Edge = Renderer.Edge = Utils.inherit(Renderer._BaseRepresentation);
var Edge = Utils.inherit(BaseRepresentation);
_(Edge.prototype).extend({
_init: function() {
this.renderer.edge_layer.activate();
this.type = "Edge";
this.hidden = false;
this.ghost = false;
this.from_representation = this.renderer.getRepresentationByModel(this.model.get("from"));
this.to_representation = this.renderer.getRepresentationByModel(this.model.get("to"));
this.bundle = this.renderer.addToBundles(this);
this.line = new paper.Path();
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;
if (this.options.editor_mode) {
var Renderer = requtils.getRenderer();
this.normal_buttons = [
new Renderer.EdgeEditButton(this.renderer, null),
new Renderer.EdgeRemoveButton(this.renderer, null)
];
this.pending_delete_buttons = [
new Renderer.EdgeRevertButton(this.renderer, null)
];
this.all_buttons = this.normal_buttons.concat(this.pending_delete_buttons);
for (var i = 0; i < this.all_buttons.length; i++) {
this.all_buttons[i].source_representation = this;
}
this.active_buttons = [];
} else {
this.active_buttons = this.all_buttons = [];
}
if (this.renderer.minimap) {
this.renderer.minimap.edge_layer.activate();
this.minimap_line = new paper.Path();
this.minimap_line.add([0,0],[0,0]);
this.minimap_line.__representation = this.renderer.minimap.miniframe.__representation;
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");
if (!from || !to || (this.hidden && !this.ghost)) {
return;
}
this.from_representation = this.renderer.getRepresentationByModel(from);
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.hide();
return;
}
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 = 1;
if (this.model.get("delete_scheduled") || this.from_representation.model.get("delete_scheduled") || this.to_representation.model.get("delete_scheduled")) {
opacity = 0.5;
this.line.dashArray = [2, 2];
} else {
opacity = 1;
this.line.dashArray = null;
}
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) {
old_act_btn.forEach(function(b) {
b.hide();
});
this.active_buttons.forEach(function(b) {
b.show();
});
}
this.paper_coords = _p0b.add(_p1b).divide(2);
this.line.strokeWidth = _strokeWidth;
this.line.strokeColor = _color;
this.line.dashArray = _dash;
this.line.opacity = this.ghost ? 0.3 : 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.scale(_arrow_scale / this.arrow_scale);
this.arrow_scale = _arrow_scale;
this.arrow.fillColor = _color;
this.arrow.opacity = this.ghost ? 0.3 : array_opacity; //TODO: magic constant + var name
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;
_textdelta = _textdelta.multiply(-1);
}
if (_a < -90) {
_a += 180;
_textdelta = _textdelta.multiply(-1);
}
var _text = this.model.get("title") || this.renkan.translate(this.options.label_untitled_edges) || "";
_text = Utils.shortenText(_text, this.options.node_label_max_length);
this.text.text(_text);
var _textpos = this.paper_coords.add(_textdelta);
this.text.css({
left: _textpos.x,
top: _textpos.y,
transform: "rotate(" + _a + "deg)",
"-moz-transform": "rotate(" + _a + "deg)",
"-webkit-transform": "rotate(" + _a + "deg)",
opacity: this.ghost ? 0.3 : opacity
});
this.text_angle = _a;
var _pc = this.paper_coords;
this.all_buttons.forEach(function(b) {
b.moveTo(_pc);
});
if (this.renderer.minimap) {
this.minimap_line.strokeColor = _color;
this.minimap_line.segments[0].point = this.renderer.toMinimapCoords(new paper.Point(this.from_representation.model.get("position")));
this.minimap_line.segments[1].point = this.renderer.toMinimapCoords(new paper.Point(this.to_representation.model.get("position")));
}
},
hide: function(){
this.hidden = true;
this.ghost = false;
this.text.hide();
this.line.visible = false;
this.arrow.visible = false;
this.minimap_line.visible = false;
},
show: function(ghost){
this.ghost = 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 {
this.hidden = false;
this.text.css('opacity', 1);
this.line.opacity = 1;
this.arrow.opacity = 1;
this.minimap_line.opacity = 1;
}
this.text.show();
this.line.visible = true;
this.arrow.visible = true;
this.minimap_line.visible = true;
this.redraw();
},
openEditor: function() {
this.renderer.removeRepresentationsOfType("editor");
var _editor = this.renderer.addRepresentation("EdgeEditor",null);
_editor.source_representation = this;
_editor.draw();
},
select: function() {
this.selected = true;
this.line.strokeWidth = this._getSelectedStrokeWidth();
if (this.renderer.isEditable()) {
this.active_buttons.forEach(function(b) {
b.show();
});
}
if (!this.options.editor_mode) {
this.openEditor();
}
this._super("select");
},
unselect: function(_newTarget) {
if (!_newTarget || _newTarget.source_representation !== this) {
this.selected = false;
if (this.options.editor_mode) {
this.all_buttons.forEach(function(b) {
b.hide();
});
}
this.line.strokeWidth = this._getStrokeWidth();
this._super("unselect");
}
},
mousedown: function(_event, _isTouch) {
if (_isTouch) {
this.renderer.unselectAll();
this.select();
}
},
mouseup: function(_event, _isTouch) {
if (!this.renkan.read_only && this.renderer.is_dragging) {
this.from_representation.saveCoords();
this.to_representation.saveCoords();
this.from_representation.is_dragging = false;
this.to_representation.is_dragging = false;
} else {
if (!_isTouch) {
this.openEditor();
}
this.model.trigger("clicked");
}
this.renderer.click_target = null;
this.renderer.is_dragging = false;
},
paperShift: function(_delta) {
if (this.options.editor_mode) {
if (!this.options.read_only) {
this.from_representation.paperShift(_delta);
this.to_representation.paperShift(_delta);
}
} else {
this.renderer.paperShift(_delta);
}
},
destroy: function() {
this._super("destroy");
this.line.remove();
this.arrow.remove();
this.text.remove();
if (this.renderer.minimap) {
this.minimap_line.remove();
}
this.all_buttons.forEach(function(b) {
b.destroy();
});
var _this = this;
this.bundle.edges = _.reject(this.bundle.edges, function(_edge) {
return _this === _edge;
});
}
}).value();
return Edge;
});