')
- .appendTo(this.renderer.tooltip_$)
- .css({
- position: "absolute",
- opacity: .8
- })
- .hide();
-}
-
-Rkns.Renderer.EdgeTooltip.prototype.template = Rkns._.template(
- '
×<%=a%>
'
- + '
<%-description%>
'
-);
-
-Rkns.Renderer.EdgeTooltip.prototype.draw = function() {
- var _model = this.edge_representation.model,
- _title = _model.get("title"),
- _uri = _model.get("uri");
- this.tooltip_$
- .html(this.template({
- a: (_uri ? '
' : '' ) + _title + (_uri ? '' : '' ),
- description: _model.get("description").replace(/(\n|\r|\r\n)/mg,' ').substr(0,180).replace(/(^.{150,179})[\s].+$/m,'$1…')
- }));
- this.redraw();
- var _this = this;
- this.tooltip_$.find(".Rk-CloseX").click(function() {
- _this.renderer.removeRepresentation(_this);
- paper.view.draw();
- });
-}
-
-Rkns.Renderer.EdgeTooltip.prototype.redraw = function() {
- var _coords = this.edge_representation.paper_coords;
- Rkns.Renderer.Utils.drawTooltip(_coords, this.tooltip_block, 250, 5, this.tooltip_$);
- this.tooltip_$.show();
- paper.view.draw();
-}
-
-Rkns.Renderer.EdgeTooltip.prototype.destroy = function() {
- this.tooltip_block.remove();
- this.tooltip_$.detach();
-}
-
-/* */
-
-Rkns.Renderer.Scene = function(_renkan, _project) {
- this.renkan = _renkan;
- this.project = _project;
- this.$ = Rkns.$(".Rk-Render");
- this.representations = [];
- this.$.html(this.template({
- width: this.$.width(),
- height: this.$.height(),
- l10n: _renkan.l10n
- }))
- this.canvas_$ = this.$.find(".Rk-Canvas");
- this.tooltip_$ = this.$.find(".Rk-Editor");
- paper.setup(this.canvas_$[0]);
- this.scale = 1;
- this.offset = paper.view.center;
- this.totalScroll = 0;
- this.click_target = null;
- this.selected_target = null;
- this.edge_layer = new paper.Layer();
- this.node_layer = new paper.Layer();
- this.overlay_layer = new paper.Layer();
- this.bundles = [];
- var _tool = new paper.Tool(),
- _this = this;
- _tool.minDistance = Rkns.Renderer._MIN_DRAG_DISTANCE;
- _tool.onMouseMove = function(_event) {
- _this.onMouseMove(_event);
- }
- _tool.onMouseDown = function(_event) {
- _this.onMouseDown(_event);
- }
- _tool.onMouseDrag = function(_event) {
- _this.onMouseDrag(_event);
- }
- this.canvas_$.mouseup(function(_event) {
- _this.onMouseUp(_event);
- });
- this.canvas_$.mousewheel(function(_event, _delta) {
- _this.onScroll(_event, _delta);
- });
- this.tooltip_$.find(".Rk-ZoomOut").click(function() {
- _this.offset = new paper.Point([
- _this.canvas_$.width(),
- _this.canvas_$.height()
- ]).multiply( .5 * ( 1 - Math.SQRT1_2 ) ).add(_this.offset.multiply( Math.SQRT1_2 ));
- _this.scale *= Math.SQRT1_2;
- _this.redraw();
- });
- this.tooltip_$.find(".Rk-ZoomIn").click(function() {
- _this.offset = new paper.Point([
- _this.canvas_$.width(),
- _this.canvas_$.height()
- ]).multiply( .5 * ( 1 - Math.SQRT2 ) ).add(_this.offset.multiply( Math.SQRT2 ));
- _this.scale *= Math.SQRT2;
- _this.redraw();
- });
- paper.view.onResize = function(_event) {
- _this.offset = _this.offset.add(_event.delta.divide(2));
- _this.redraw();
- }
-
- var _thRedraw = Rkns._.throttle(function() {
- _this.redraw();
- },50);
-
- this.addRepresentations("Node", this.project.get("nodes"));
- this.addRepresentations("Edge", this.project.get("edges"));
-
- this._addNodesBinding = function(_node) {
- _this.addRepresentation("Node", _node);
- _thRedraw();
- }
- this._addEdgesBinding = function(_edge) {
- _this.addRepresentation("Edge", _edge);
- _thRedraw();
- }
-
- this.project.on("add:nodes", this._addNodesBinding );
- this.project.on("add:edges", this._addEdgesBinding );
- this.redraw();
-}
-
-Rkns.Renderer.Scene.prototype.template = Rkns._.template(
- '
'
-);
-
-Rkns.Renderer.Scene.prototype.addToBundles = function(_edgeRepr) {
- var _bundle = Rkns._(this.bundles).find(function(_bundle) {
- return (
- ( _bundle.from === _edgeRepr.from_representation && _bundle.to === _edgeRepr.to_representation )
- || ( _bundle.from === _edgeRepr.to_representation && _bundle.to === _edgeRepr.from_representation )
- );
- });
- if (typeof _bundle !== "undefined") {
- _bundle.edges.push(_edgeRepr)
- } else {
- _bundle = {
- from: _edgeRepr.from_representation,
- to: _edgeRepr.to_representation,
- edges: [ _edgeRepr ],
- getPosition: function(_er) {
- var _dir = (_er.from_representation === this.from) ? 1 : -1;
- return _dir * ( Rkns._(this.edges).indexOf(_er) - (this.edges.length - 1) / 2 );
- }
- }
- this.bundles.push(_bundle);
- }
- return _bundle;
-}
-
-Rkns.Renderer.Scene.prototype.autoScale = function() {
- var nodes = this.project.get("nodes")
- if (nodes.length > 1) {
- var _xx = nodes.map(function(_node) { return _node.get("position").x }),
- _yy = nodes.map(function(_node) { return _node.get("position").y }),
- _minx = Math.min.apply(Math, _xx),
- _miny = Math.min.apply(Math, _yy),
- _maxx = Math.max.apply(Math, _xx),
- _maxy = Math.max.apply(Math, _yy);
- this.scale = Math.min((paper.view.size.width - 2 * Rkns.Renderer._MARGIN_X) / (_maxx - _minx), (paper.view.size.height - 2 * Rkns.Renderer._MARGIN_Y) / (_maxy - _miny));
- this.offset = paper.view.center.subtract(new paper.Point([(_maxx + _minx) / 2, (_maxy + _miny) / 2]).multiply(this.scale));
- this.redraw();
- }
- if (nodes.length === 1) {
- this.scale = 1;
- this.offset = paper.view.center.subtract(new paper.Point([nodes.at(0).get("position").x, nodes.at(0).get("position").y]));
- this.redraw();
- }
-}
-
-Rkns.Renderer.Scene.prototype.toPaperCoords = function(_point) {
- return _point.multiply(this.scale).add(this.offset);
-}
-
-
-Rkns.Renderer.Scene.prototype.toModelCoords = function(_point) {
- return _point.subtract(this.offset).divide(this.scale);
-}
-
-Rkns.Renderer.Scene.prototype.addRepresentation = function(_type, _model) {
- var _repr = new Rkns.Renderer[_type](this, _model);
- this.representations.push(_repr);
- return _repr;
-}
-
-Rkns.Renderer.Scene.prototype.addRepresentations = function(_type, _collection) {
- var _this = this;
- _collection.forEach(function(_model) {
- _this.addRepresentation(_type, _model);
- });
-}
-
-Rkns.Renderer.Scene.prototype.removeRepresentation = function(_representation) {
- _representation.destroy();
- this.representations = Rkns._(this.representations).reject(
- function(_repr) {
- return _repr == _representation
- }
- );
-}
-
-Rkns.Renderer.Scene.prototype.getRepresentationByModel = function(_model) {
- return Rkns._(this.representations).find(function(_repr) {
- return _repr.model === _model;
- });
-}
-
-Rkns.Renderer.Scene.prototype.removeRepresentationsOfType = function(_type) {
- var _representations = Rkns._(this.representations).filter(function(_repr) {
- return _repr.type == _type;
- }),
- _this = this;
- Rkns._(_representations).each(function(_repr) {
- _this.removeRepresentation(_repr);
- });
-}
-
-Rkns.Renderer.Scene.prototype.unselectAll = function() {
- Rkns._(this.representations).each(function(_repr) {
- _repr.model.trigger("unselect");
- });
-}
-
-Rkns.Renderer.Scene.prototype.redraw = function() {
- Rkns._(this.representations).each(function(_representation) {
- _representation.redraw();
- });
- paper.view.draw();
-}
-
-Rkns.Renderer.Scene.prototype.addTempEdge = function(_from, _point) {
- var _tmpEdge = this.addRepresentation("TempEdge",null);
- _tmpEdge.end_pos = _point;
- _tmpEdge.from_representation = _from;
- _tmpEdge.redraw();
- this.click_target = _tmpEdge;
-}
-
-Rkns.Renderer.Scene.prototype.findTarget = function(_hitResult) {
- if (_hitResult && typeof _hitResult.item.__representation !== "undefined") {
- var _newTarget = _hitResult.item.__representation;
- if (this.selected_target !== _newTarget && _newTarget.model) {
- if (this.selected_target) {
- this.selected_target.model.trigger("unselect");
- }
- _newTarget.model.trigger("select");
- this.selected_target = _newTarget;
- }
- } else {
- if (!_hitResult) {
- this.removeRepresentationsOfType("tooltip");
- }
- if (this.selected_target) {
- this.selected_target.model.trigger("unselect");
- }
- this.selected_target = null;
- }
-}
-
-Rkns.Renderer.Scene.prototype.onMouseMove = function(_event) {
- var _hitResult = paper.project.hitTest(_event.point);
- if (this.is_dragging) {
- if (this.click_target && typeof this.click_target.paperShift === "function") {
- this.click_target.paperShift(_event.delta);
- } else {
- this.offset = this.offset.add(_event.delta);
- this.redraw();
- }
- } else {
- this.findTarget(_hitResult);
- }
-}
-
-Rkns.Renderer.Scene.prototype.onMouseDown = function(_event) {
- this.is_dragging = false;
- var _hitResult = paper.project.hitTest(_event.point);
- if (_hitResult && typeof _hitResult.item.__representation !== "undefined") {
- this.click_target = _hitResult.item.__representation;
- } else {
- this.click_target = null;
- }
-}
-
-Rkns.Renderer.Scene.prototype.onMouseDrag = function(_event) {
- this.is_dragging = true;
- this.onMouseMove(_event);
-}
-
-Rkns.Renderer.Scene.prototype.onMouseUp = function(_event) {
- if (this.click_target) {
- var _off = this.canvas_$.offset();
- if (this.click_target.model) {
- this.click_target.model.trigger("click");
- }
- }
- this.is_dragging = false;
- this.click_target = null;
-}
-
-Rkns.Renderer.Scene.prototype.onScroll = function(_event, _scrolldelta) {
- this.totalScroll += _scrolldelta;
- if (Math.abs(this.totalScroll) >= 1) {
- var _off = this.canvas_$.offset(),
- _delta = new paper.Point([
- _event.pageX - _off.left,
- _event.pageY - _off.top
- ]).subtract(this.offset).multiply( Math.SQRT2 - 1 );
- if (this.totalScroll > 0) {
- this.offset = this.offset.subtract(_delta);
- this.scale *= Math.SQRT2;
- } else {
- this.offset = this.offset.add(_delta.divide( Math.SQRT2 ));
- this.scale *= Math.SQRT1_2;
- }
- this.totalScroll = 0;
- this.redraw();
- }
-}
-
-Rkns.Renderer.Scene.prototype.destroy = function() {
- this.project.off("add:nodes", this._addNodesBinding );
- this.project.off("add:edges", this._addEdgesBinding );
- Rkns._(this.representations).each(function(_repr) {
- _repr.destroy();
- });
- this.$.html("");
- paper.remove();
-}
-