diff -r 0f7d2275a88f -r 112a82ddd7e5 client/js/paper-renderer.js --- a/client/js/paper-renderer.js Fri Mar 29 18:19:47 2013 +0100 +++ b/client/js/paper-renderer.js Tue Apr 02 18:01:14 2013 +0200 @@ -1,32 +1,18 @@ Rkns.Renderer = { - _MINIMAP_MARGIN_X: 20, - _MINIMAP_MARGIN_Y: 20, + _MINIMAP_MARGIN: 20, _MIN_DRAG_DISTANCE: 2, _NODE_SIZE_BASE: 25, _NODE_BUTTON_WIDTH: 40, _EDGE_BUTTON_INNER: 2, _EDGE_BUTTON_OUTER: 40, - _NODE_FONT_SIZE: 10, - _EDGE_FONT_SIZE: 9, - _EDGE_DISTANCE: 3, - _NODE_MAX_CHAR: 50, - _EDGE_MAX_CHAR: 40, - _ARROW_LENGTH: 18, - _ARROW_WIDTH: 12, - _EDITOR_ARROW_LENGTH : 20, - _EDITOR_ARROW_WIDTH : 40, - _EDITOR_WIDTH : 275, - _EDITOR_MARGIN : 15, - _EDITOR_PADDING : 10, - _EDITOR_GRADIENT : new paper.Gradient(['#f0f0f0', '#d0d0d0']), _CLICKMODE_ADDNODE : 1, _CLICKMODE_STARTEDGE : 2, _CLICKMODE_ENDEDGE : 3, _IMAGE_MAX_KB : 500, _NODE_SIZE_STEP: Math.LN2/4, + _MIN_SCALE: 1/20, + _MAX_SCALE: 20, _AUTOSCALE_MARGIN: 50, - _MINIMAP_WIDTH: 160, - _MINIMAP_HEIGHT: 120, _USER_PLACEHOLDER : { color: "#000000", title: "(unknown user)", @@ -45,21 +31,21 @@ shortenText : function(_text, _maxlength) { return (_text.length > _maxlength ? (_text.substr(0,_maxlength) + '…') : _text); }, - drawEditBox : function(_coords, _path, _width, _xmargin, _selector) { - _selector.css({ - width: (_width - 2* Rkns.Renderer._EDITOR_PADDING), + drawEditBox : function(_options, _coords, _path, _xmargin, _selector) { + _selector.css({ + width: ( _options.tooltip_width - 2* _options.tooltip_margin ), }) - var _height = _selector.outerHeight() + 2* Rkns.Renderer._EDITOR_PADDING, + var _height = _selector.outerHeight() + 2* _options.tooltip_padding, _isLeft = (_coords.x < paper.view.center.x ? 1 : -1), - _left = _coords.x + _isLeft * ( _xmargin + Rkns.Renderer._EDITOR_ARROW_LENGTH ), - _right = _coords.x + _isLeft * ( _xmargin + Rkns.Renderer._EDITOR_ARROW_LENGTH + _width ), + _left = _coords.x + _isLeft * ( _xmargin + _options.tooltip_arrow_length ), + _right = _coords.x + _isLeft * ( _xmargin + _options.tooltip_arrow_length + _options.tooltip_width ), _top = _coords.y - _height / 2; - if (_top < Rkns.Renderer._EDITOR_MARGIN) { - _top = Math.min( Rkns.Renderer._EDITOR_MARGIN, _coords.y - Rkns.Renderer._EDITOR_ARROW_WIDTH / 2 ); + if (_top < _options.tooltip_margin) { + _top = Math.min( _options.tooltip_margin, _coords.y - _options.tooltip_arrow_width / 2 ); } var _bottom = _top + _height; - if (_bottom > (paper.view.size.height - Rkns.Renderer._EDITOR_MARGIN)) { - _bottom = Math.max( paper.view.size.height - Rkns.Renderer._EDITOR_MARGIN, _coords.y + Rkns.Renderer._EDITOR_ARROW_WIDTH / 2 ); + if (_bottom > (paper.view.size.height - _options.tooltip_margin)) { + _bottom = Math.max( paper.view.size.height - _options.tooltip_margin, _coords.y + _options.tooltip_arrow_width / 2 ); _top = _bottom - _height; } _path.segments[0].point @@ -79,17 +65,18 @@ _path.segments[4].point.y = _path.segments[5].point.y = _bottom; - _path.segments[1].point.y = _coords.y - Rkns.Renderer._EDITOR_ARROW_WIDTH / 2; - _path.segments[6].point.y = _coords.y + Rkns.Renderer._EDITOR_ARROW_WIDTH / 2; + _path.segments[1].point.y = _coords.y - _options.tooltip_arrow_width / 2; + _path.segments[6].point.y = _coords.y + _options.tooltip_arrow_width / 2; _path.closed = true; - _path.fillColor = new paper.GradientColor(Rkns.Renderer._EDITOR_GRADIENT, [0,_top], [0, _bottom]); + _path.fillColor = new paper.GradientColor(new paper.Gradient([_options.tooltip_top_color, _options.tooltip_bottom_color]), [0,_top], [0, _bottom]); _selector.css({ - left: (Rkns.Renderer._EDITOR_PADDING + Math.min(_left, _right)), - top: (Rkns.Renderer._EDITOR_PADDING + _top) + left: (_options.tooltip_padding + Math.min(_left, _right)), + top: (_options.tooltip_padding + _top) }); }, sector : function(_repr, _inR, _outR, _startAngle, _endAngle, _padding, _imgsrc, _caption) { - var _startRads = _startAngle * Math.PI / 180, + var _options = _repr.renderer.renkan.options, + _startRads = _startAngle * Math.PI / 180, _endRads = _endAngle * Math.PI / 180, _img = new Image(), _span = _endRads - _startRads, @@ -125,7 +112,7 @@ _path.arcTo([_centerXIn, _centerYIn], [_endXIn, _endYIn]); _path.lineTo([_endXOut, _endYOut]); _path.arcTo([_centerXOut, _centerYOut], [_startXOut, _startYOut]); - _path.fillColor = "#333333"; + _path.fillColor = _options.buttons_background; _path.opacity = .5; _path.closed = true; _path.__representation = _repr; @@ -136,8 +123,8 @@ } var _text = new paper.PointText(_textX,_textY); _text.characterStyle = { - fontSize: 9, - fillColor: '#c000c0' + fontSize: _options.buttons_label_font_size, + fillColor: _options.buttons_label_color }; if (_textX > 2) { _text.paragraphStyle.justification = 'left'; @@ -253,13 +240,20 @@ this.renderer.node_layer.activate(); this.type = "Node"; this.circle = new paper.Path.Circle([0, 0], 1); + this.circle.__representation = this; this.circle.fillColor = '#ffffff'; - this.circle.__representation = this; - this.circle.strokeWidth = 2; + if (this.renderer.renkan.options.show_node_circles) { + this.circle.strokeWidth = this.renderer.renkan.options.node_stroke_width; + this.h_ratio = 1; + } else { + this.circle.opacity = .01; + this.h_ratio = 0; + } this.title = new paper.PointText([0,0]); this.title.characterStyle = { - fontSize: Rkns.Renderer._NODE_FONT_SIZE, - fillColor: 'black' + font: this.renderer.renkan.options.node_label_font, + fontSize: this.renderer.renkan.options.node_label_font_size, + fillColor: this.renderer.renkan.options.node_label_color }; if (this.renderer.renkan.options.editor_mode) { this.edit_button = new Rkns.Renderer.NodeEditButton(this.renderer, null); @@ -272,9 +266,11 @@ this.last_circle_radius = 1; this.title.paragraphStyle.justification = 'center'; - this.renderer.minimap.node_layer.activate(); - this.minimap_circle = new paper.Path.Circle([0, 0], 1); - this.renderer.minimap.node_group.addChild(this.minimap_circle); + if (this.renderer.minimap) { + this.renderer.minimap.node_layer.activate(); + this.minimap_circle = new paper.Path.Circle([0, 0], 1); + this.renderer.minimap.node_group.addChild(this.minimap_circle); + } } Rkns.Renderer.Node.prototype.redraw = function(_dontRedrawEdges) { @@ -293,7 +289,7 @@ var square = new paper.Size(this.circle_radius, this.circle_radius), topleft = this.paper_coords.subtract(square), bounds = new paper.Rectangle(topleft, square.multiply(2)); - this.circle.fitBounds(bounds); + this.circle.fitBounds(bounds); if (this.node_image) { this.node_image.fitBounds(bounds); } @@ -306,9 +302,12 @@ this.last_circle_radius = this.circle_radius; var _text = this.model.get("title") || this.renderer.renkan.translate("(untitled)"); - this.title.content = Rkns.Renderer.Utils.shortenText(_text, Rkns.Renderer._NODE_MAX_CHAR); + this.title.content = Rkns.Renderer.Utils.shortenText(_text, this.renderer.renkan.options.node_label_max_length); - this.title.position = this.paper_coords.add([0, this.circle_radius + 1.5 *Rkns.Renderer._NODE_FONT_SIZE]); + this.title.position = this.paper_coords.add([ + 0, + this.circle_radius * this.h_ratio + this.renderer.renkan.options.node_label_font_size + this.renderer.renkan.options.node_label_distance + ]); var _color = this.model.get("color") || (this.model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color"); this.circle.strokeColor = _color; if (this.renderer.renkan.options.editor_mode) { @@ -326,16 +325,20 @@ } _this.renderer.node_layer.activate(); var _ratio = Math.min(2 / _image.width, 2 / _image.height ); + if (!_this.renderer.renkan.options.show_node_circles) { + _this.h_ratio = Math.min(1, _image.height / _image.width); + } var _raster = new paper.Raster(_image); - if (_this.renderer.renkan.options.clip_images) { + if (_this.renderer.renkan.options.clip_node_images) { var _clip = new paper.Path.Circle([0, 0], 1); _raster.scale(_ratio); _this.node_image = new paper.Group(_clip, _raster); - _this.node_image.opacity = .9; + _this.node_image.opacity = .99; /* This is a workaround to allow clipping at group level * If opacity was set to 1, paper.js would merge all clipping groups in one (known bug). */ _this.node_image.clipped = true; + _clip.__representation = _this; } else { _this.node_image = _raster; } @@ -344,8 +347,7 @@ topleft = _this.paper_coords.subtract(square), bounds = new paper.Rectangle(topleft, square.multiply(2)); _this.node_image.fitBounds(bounds); - _clip.__representation = _this; - paper.view.draw(); + _this.redraw(); } _image.src = _img; } @@ -355,11 +357,13 @@ delete this.node_image; } - this.minimap_circle.fillColor = _color; - var minipos = this.renderer.toMinimapCoords(_model_coords), - miniradius = this.renderer.minimap.scale * _baseRadius, - minisize = new paper.Size([miniradius, miniradius]); - this.minimap_circle.fitBounds(minipos.subtract(minisize), minisize.multiply(2)); + if (this.renderer.minimap) { + this.minimap_circle.fillColor = _color; + var minipos = this.renderer.toMinimapCoords(_model_coords), + miniradius = this.renderer.minimap.scale * _baseRadius, + minisize = new paper.Size([miniradius, miniradius]); + this.minimap_circle.fitBounds(minipos.subtract(minisize), minisize.multiply(2)); + } if (!_dontRedrawEdges) { Rkns._.each(this.project.get("edges").filter(function (ed) { return ((ed.to === this.model) || (ed.from === this.model));}), function(edge, index, list){ @@ -392,7 +396,7 @@ } Rkns.Renderer.Node.prototype.select = function() { - this.circle.strokeWidth = 4; + this.circle.strokeWidth = this.renderer.renkan.options.selected_node_stroke_width; if (this.renderer.isEditable()) { this.edit_button.show(); this.remove_button.show(); @@ -410,7 +414,10 @@ if (!this.renderer.renkan.options.editor_mode) { this.openEditor(); } - this.minimap_circle.fillColor = "#ff00fc"; + + if (this.renderer.minimap) { + this.minimap_circle.fillColor = "#ff00fc"; + } } Rkns.Renderer.Node.prototype.unselect = function(_newTarget) { @@ -420,9 +427,11 @@ this.remove_button.hide(); this.link_button.hide(); } - this.circle.strokeWidth = 2; + this.circle.strokeWidth = this.renderer.renkan.options.node_stroke_width; Rkns.$('.Rk-Bin-Item').removeClass("selected"); - this.minimap_circle.fillColor = this.circle.strokeColor; + if (this.renderer.minimap) { + this.minimap_circle.fillColor = this.model.get("color") || (this.model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color"); + } } } @@ -436,7 +445,7 @@ Rkns.Renderer.Node.prototype.unhighlight = function(_newTarget) { this.circle.fillColor = "#ffffff"; if (this.node_image) { - this.node_image.opacity = .9; + this.node_image.opacity = .99; } } @@ -474,7 +483,9 @@ } this.circle.remove(); this.title.remove(); - this.minimap_circle.remove(); + if (this.renderer.minimap) { + this.minimap_circle.remove(); + } if (this.node_image) { this.node_image.remove(); } @@ -493,14 +504,19 @@ this.line = new paper.Path(); this.line.add([0,0],[0,0],[0,0]); this.line.__representation = this; - this.line.strokeWidth = 2; + this.line.strokeWidth = this.renderer.renkan.options.edge_stroke_width; this.arrow = new paper.Path(); - this.arrow.add([0,0],[Rkns.Renderer._ARROW_LENGTH,Rkns.Renderer._ARROW_WIDTH / 2],[0,Rkns.Renderer._ARROW_WIDTH]); + this.arrow.add( + [ 0, 0 ], + [ this.renderer.renkan.options.edge_arrow_length, this.renderer.renkan.options.edge_arrow_width / 2 ], + [ 0, this.renderer.renkan.options.edge_arrow_width ] + ); this.arrow.__representation = this; this.text = new paper.PointText(); this.text.characterStyle = { - fontSize: Rkns.Renderer._EDGE_FONT_SIZE, - fillColor: 'black' + font: this.renderer.renkan.options.edge_label_font, + fontSize: this.renderer.renkan.options.edge_label_font_size, + fillColor: this.renderer.renkan.options.edge_label_color }; this.text.paragraphStyle.justification = 'center'; this.text_angle = 0; @@ -511,6 +527,13 @@ this.remove_button = new Rkns.Renderer.EdgeRemoveButton(this.renderer, null); this.remove_button.edge_representation = this; } + + 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.strokeWidth = 1; + } } Rkns.Renderer.Edge.prototype.redraw = function() { @@ -526,11 +549,11 @@ _u = _v.divide(_r), _ortho = new paper.Point([- _u.y, _u.x]), _group_pos = this.bundle.getPosition(this), - _delta = _ortho.multiply( 12 * _group_pos ), + _delta = _ortho.multiply( this.renderer.renkan.options.edge_gap_in_bundles * _group_pos ), _p0b = _p0a.add(_delta), /* Adding a 4 px difference */ - _p1b = _p1a.add(_delta), /* to differentiate inbound and outbound links */ + _p1b = _p1a.add(_delta), /* to differentiate bundled links */ _a = _v.angle, - _textdelta = _ortho.multiply(-Rkns.Renderer._EDGE_DISTANCE), + _textdelta = _ortho.multiply(this.renderer.renkan.options.edge_label_distance), _handle = _v.divide(3), _color = this.model.get("color") || this.model.get("color") || (this.model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color"); this.paper_coords = _p0b.add(_p1b).divide(2); @@ -542,7 +565,7 @@ this.line.segments[2].point = _p1a; this.arrow.rotate(_a - this.arrow_angle); this.arrow.fillColor = _color; - this.arrow.position = this.paper_coords.subtract(_u.multiply(4)); + this.arrow.position = this.paper_coords; this.arrow_angle = _a; if (_a > 90) { _a -= 180; @@ -554,13 +577,19 @@ } this.text.rotate(_a - this.text_angle); var _text = this.model.get("title"); - this.text.content = Rkns.Renderer.Utils.shortenText(_text, Rkns.Renderer._EDGE_MAX_CHAR); + this.text.content = Rkns.Renderer.Utils.shortenText(_text, this.renderer.renkan.options.edge_label_max_length); this.text.position = this.paper_coords.add(_textdelta); this.text_angle = _a; if (this.renderer.renkan.options.editor_mode) { this.edit_button.moveTo(this.paper_coords); this.remove_button.moveTo(this.paper_coords); } + + 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"))); + } } Rkns.Renderer.Edge.prototype.openEditor = function() { @@ -571,7 +600,7 @@ } Rkns.Renderer.Edge.prototype.select = function() { - this.line.strokeWidth = 4; + this.line.strokeWidth = this.renderer.renkan.options.selected_edge_stroke_width; if (this.renderer.isEditable()) { this.edit_button.show(); this.remove_button.show(); @@ -587,7 +616,7 @@ this.edit_button.hide(); this.remove_button.hide(); } - this.line.strokeWidth = 2; + this.line.strokeWidth = this.renderer.renkan.options.edge_stroke_width; } } @@ -620,6 +649,9 @@ this.line.remove(); this.arrow.remove(); this.text.remove(); + if (this.renderer.minimap) { + this.minimap_line.remove(); + } if (this.renderer.renkan.options.editor_mode) { this.edit_button.destroy(); this.remove_button.destroy(); @@ -645,7 +677,11 @@ this.line.__representation = this; this.arrow = new paper.Path(); this.arrow.fillColor = _color; - this.arrow.add([0,0],[Rkns.Renderer._ARROW_LENGTH,Rkns.Renderer._ARROW_WIDTH / 2],[0,Rkns.Renderer._ARROW_WIDTH]); + this.arrow.add( + [ 0, 0 ], + [ this.renderer.renkan.options.edge_arrow_length, this.renderer.renkan.options.edge_arrow_width / 2 ], + [ 0, this.renderer.renkan.options.edge_arrow_width ] + ); this.arrow.__representation = this; this.arrow_angle = 0; } @@ -874,7 +910,7 @@ Rkns.Renderer.NodeEditor.prototype.redraw = function() { var _coords = this.node_representation.paper_coords; - Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, Rkns.Renderer._EDITOR_WIDTH, 20, this.editor_$); + Rkns.Renderer.Utils.drawEditBox(this.renderer.renkan.options, _coords, this.editor_block, this.node_representation.circle_radius * .75, this.editor_$); this.editor_$.show(); paper.view.draw(); } @@ -1025,7 +1061,7 @@ Rkns.Renderer.EdgeEditor.prototype.redraw = function() { var _coords = this.edge_representation.paper_coords; - Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, Rkns.Renderer._EDITOR_WIDTH, 5, this.editor_$); + Rkns.Renderer.Utils.drawEditBox(this.renderer.renkan.options, _coords, this.editor_block, 5, this.editor_$); this.editor_$.show(); paper.view.draw(); } @@ -1308,33 +1344,37 @@ this.node_layer = new paper.Layer(); this.buttons_layer = new paper.Layer(); - this.minimap = { - background_layer: new paper.Layer(), - node_layer: new paper.Layer(), - node_group: new paper.Group(), - size: new paper.Size( Rkns.Renderer._MINIMAP_WIDTH, Rkns.Renderer._MINIMAP_HEIGHT ) + if (_renkan.options.show_minimap) { + this.minimap = { + background_layer: new paper.Layer(), + edge_layer: new paper.Layer(), + node_layer: new paper.Layer(), + node_group: new paper.Group(), + size: new paper.Size( _renkan.options.minimap_width, _renkan.options.minimap_height ) + } + + this.minimap.background_layer.activate(); + this.minimap.topleft = paper.view.bounds.bottomRight.subtract(this.minimap.size); + this.minimap.rectangle = new paper.Path.Rectangle(this.minimap.topleft.subtract([2,2]), this.minimap.size.add([4,4])); + this.minimap.rectangle.fillColor = '#ffffff'; + this.minimap.rectangle.strokeColor = '#cccccc'; + this.minimap.rectangle.strokeWidth = 4; + this.minimap.offset = new paper.Point(this.minimap.size.divide(2)); + this.minimap.scale = .1; + + this.minimap.node_layer.activate(); + this.minimap.cliprectangle = new paper.Path.Rectangle(this.minimap.topleft, this.minimap.size); + this.minimap.node_group.addChild(this.minimap.cliprectangle); + this.minimap.node_group.clipped = true; + this.minimap.miniframe = new paper.Path.Rectangle(this.minimap.topleft, this.minimap.size); + this.minimap.node_group.addChild(this.minimap.miniframe); + this.minimap.miniframe.fillColor = '#c0c0ff'; + this.minimap.miniframe.opacity = .3; + this.minimap.miniframe.strokeColor = '#000080'; + this.minimap.miniframe.strokeWidth = 3; + this.minimap.miniframe.__representation = new Rkns.Renderer.MiniFrame(this, null); } - this.minimap.background_layer.activate(); - this.minimap.topleft = paper.view.bounds.bottomRight.subtract(this.minimap.size); - this.minimap.rectangle = new paper.Path.Rectangle(this.minimap.topleft.subtract([2,2]), this.minimap.size.add([4,4])); - this.minimap.rectangle.fillColor = '#ffffff'; - this.minimap.rectangle.strokeColor = '#cccccc'; - this.minimap.rectangle.strokeWidth = 4; - this.minimap.offset = new paper.Point(this.minimap.size.divide(2)); - this.minimap.scale = .1; - - this.node_layer.activate(); - this.minimap.cliprectangle = new paper.Path.Rectangle(this.minimap.topleft, this.minimap.size); - this.minimap.node_group.addChild(this.minimap.cliprectangle); - this.minimap.node_group.clipped = true; - this.minimap.miniframe = new paper.Path.Rectangle(this.minimap.topleft, this.minimap.size); - this.minimap.node_group.addChild(this.minimap.miniframe); - this.minimap.miniframe.fillColor = '#f0f0ff'; - this.minimap.miniframe.strokeColor = '#8080ff'; - this.minimap.miniframe.strokeWidth = 2; - this.minimap.miniframe.__representation = new Rkns.Renderer.MiniFrame(this, null); - this.bundles = []; this.click_mode = false; var _tool = new paper.Tool(), @@ -1485,20 +1525,20 @@ } }) this.editor_$.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.setScale( _this.scale * Math.SQRT1_2 ); - _this.redraw(); + var _newScale = _this.scale * Math.SQRT1_2, + _offset = new paper.Point([ + _this.canvas_$.width(), + _this.canvas_$.height() + ]).multiply( .5 * ( 1 - Math.SQRT1_2 ) ).add(_this.offset.multiply( Math.SQRT1_2 )); + _this.setScale( _newScale, _offset ); }); this.editor_$.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.setScale( _this.scale * Math.SQRT2 ); - _this.redraw(); + var _newScale = _this.scale * Math.SQRT2, + _offset = new paper.Point([ + _this.canvas_$.width(), + _this.canvas_$.height() + ]).multiply( .5 * ( 1 - Math.SQRT2 ) ).add(_this.offset.multiply( Math.SQRT2 )); + _this.setScale( _newScale, _offset ); }); this.$.find(".Rk-CurrentUser").mouseenter( function() { _this.$.find(".Rk-UserList").slideDown() } @@ -1581,9 +1621,11 @@ paper.view.onResize = function(_event) { _this.offset = _this.offset.add(_event.delta.divide(2)); - _this.minimap.topleft = paper.view.bounds.bottomRight.subtract(_this.minimap.size) - _this.minimap.rectangle.fitBounds(_this.minimap.topleft.subtract([2,2]), _this.minimap.size.add([4,4])); - _this.minimap.cliprectangle.fitBounds(_this.minimap.topleft, _this.minimap.size); + if (_this.minimap) { + _this.minimap.topleft = paper.view.bounds.bottomRight.subtract(_this.minimap.size) + _this.minimap.rectangle.fitBounds(_this.minimap.topleft.subtract([2,2]), _this.minimap.size.add([4,4])); + _this.minimap.cliprectangle.fitBounds(_this.minimap.topleft, _this.minimap.size); + } _this.redraw(); } @@ -1628,9 +1670,12 @@ }); this.redraw(); - window.setInterval(function() { - _this.rescaleMinimap() - }, 2000); + + if (this.minimap) { + window.setInterval(function() { + _this.rescaleMinimap() + }, 2000); + } } Rkns.Renderer.Scene.prototype.template = Rkns._.template( @@ -1697,9 +1742,14 @@ } } -Rkns.Renderer.Scene.prototype.setScale = function(_newScale) { - this.scale = _newScale; - this.redraw(); +Rkns.Renderer.Scene.prototype.setScale = function(_newScale, _offset) { + if (_newScale > Rkns.Renderer._MIN_SCALE && _newScale < Rkns.Renderer._MAX_SCALE) { + this.scale = _newScale; + if (_offset) { + this.offset = _offset + } + this.redraw(); + } } Rkns.Renderer.Scene.prototype.autoScale = function() { @@ -1711,13 +1761,11 @@ _miny = Math.min.apply(Math, _yy), _maxx = Math.max.apply(Math, _xx), _maxy = Math.max.apply(Math, _yy); - var _scale = Math.min((paper.view.size.width - 2 * Rkns.Renderer._AUTOSCALE_MARGIN) / (_maxx - _minx), (paper.view.size.height - 2 * Rkns.Renderer._AUTOSCALE_MARGIN) / (_maxy - _miny)); - this.offset = paper.view.center.subtract(new paper.Point([(_maxx + _minx) / 2, (_maxy + _miny) / 2]).multiply(_scale)); - this.setScale(_scale); + var _scale = Math.max(Rkns.Renderer._MIN_SCALE, Math.min(Rkns.Renderer._MAX_SCALE, (paper.view.size.width - 2 * Rkns.Renderer._AUTOSCALE_MARGIN) / (_maxx - _minx), (paper.view.size.height - 2 * Rkns.Renderer._AUTOSCALE_MARGIN) / (_maxy - _miny))); + this.setScale(_scale, paper.view.center.subtract(new paper.Point([(_maxx + _minx) / 2, (_maxy + _miny) / 2]).multiply(_scale))); } if (nodes.length === 1) { - this.offset = paper.view.center.subtract(new paper.Point([nodes.at(0).get("position").x, nodes.at(0).get("position").y])); - this.setScale(1); + this.setScale(1, paper.view.center.subtract(new paper.Point([nodes.at(0).get("position").x, nodes.at(0).get("position").y]))); } } @@ -1736,7 +1784,12 @@ _miny = Math.min.apply(Math, _yy), _maxx = Math.max.apply(Math, _xx), _maxy = Math.max.apply(Math, _yy); - var _scale = Math.min(this.scale * .8 * Rkns.Renderer._MINIMAP_WIDTH / paper.view.bounds.width, this.scale * .8 * Rkns.Renderer._MINIMAP_HEIGHT / paper.view.bounds.height, (Rkns.Renderer._MINIMAP_WIDTH - 2 * Rkns.Renderer._MINIMAP_MARGIN_X) / (_maxx - _minx), (Rkns.Renderer._MINIMAP_HEIGHT - 2 * Rkns.Renderer._MINIMAP_MARGIN_Y) / (_maxy - _miny)); + var _scale = Math.min( + this.scale * .8 * this.renkan.options.minimap_width / paper.view.bounds.width, + this.scale * .8 * this.renkan.options.minimap_height / paper.view.bounds.height, + ( this.renkan.options.minimap_width - 2 * Rkns.Renderer._MINIMAP_MARGIN ) / (_maxx - _minx), + ( this.renkan.options.minimap_height - 2 * Rkns.Renderer._MINIMAP_MARGIN ) / (_maxy - _miny) + ); this.minimap.offset = this.minimap.size.divide(2).subtract(new paper.Point([(_maxx + _minx) / 2, (_maxy + _miny) / 2]).multiply(_scale)); this.minimap.scale = _scale; } @@ -1834,7 +1887,9 @@ Rkns._(this.representations).each(function(_representation) { _representation.redraw(true); }); - this.redrawMiniframe(); + if (this.minimap) { + this.redrawMiniframe(); + } paper.view.draw(); } @@ -1956,14 +2011,11 @@ _event.pageY - _off.top ]).subtract(this.offset).multiply( Math.SQRT2 - 1 ); if (this.totalScroll > 0) { - this.offset = this.offset.subtract(_delta); - this.setScale( this.scale * Math.SQRT2 ); + this.setScale( this.scale * Math.SQRT2, this.offset.subtract(_delta) ); } else { - this.offset = this.offset.add(_delta.divide( Math.SQRT2 )); - this.setScale( this.scale * Math.SQRT1_2); + this.setScale( this.scale * Math.SQRT1_2, this.offset.add(_delta.divide(Math.SQRT2))); } this.totalScroll = 0; - this.redraw(); } }