diff -r 67f3a24a7c01 -r fa8035885814 client/js/renderer/edge.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/js/renderer/edge.js Mon May 05 17:43:37 2014 +0200 @@ -0,0 +1,235 @@ +"use strict"; + +define(['jquery', 'underscore', 'requtils', 'renderer/baserepresentation'], function ($, _, requtils, BaseRepresentation) { + + 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.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 = 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.__representation = this; + this.text = $('
').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; + } + }, + redraw: function() { + var from = this.model.get("from"), + to = this.model.get("to"); + if (!from || !to) { + 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") { + 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; + + if (this.model.get("delete_scheduled") || this.from_representation.model.get("delete_scheduled") || this.to_representation.model.get("delete_scheduled")) { + opacity = .5; + this.line.dashArray = [2, 2]; + } else { + opacity = 1; + this.line.dashArray = null; + } + + var old_act_btn = this.active_buttons; + + 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.strokeColor = _color; + 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.fillColor = _color; + this.arrow.opacity = opacity; + 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: 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"))); + } + }, + 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.options.selected_edge_stroke_width; + 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.options.edge_stroke_width; + 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 = _(this.bundle.edges).reject(function(_edge) { + return _this === _edge; + }); + } + }); + + return Edge; + +}); +