diff -r 96476d1fc7c0 -r c73bfb5c0af6 client/js/paper-renderer.js --- a/client/js/paper-renderer.js Tue Jul 31 18:16:39 2012 +0200 +++ b/client/js/paper-renderer.js Thu Aug 16 15:11:47 2012 +0200 @@ -149,6 +149,8 @@ this.edit_button.node_controller = this; this.remove_button = new Rkns.Renderer.NodeRemoveButton(this._renderer, {}); this.remove_button.node_controller = this; + this.link_button = new Rkns.Renderer.NodeLinkButton(this._renderer, {}); + this.link_button.node_controller = this; this.title.paragraphStyle.justification = 'center'; this.title.__controller = this; } @@ -162,6 +164,7 @@ this.circle.strokeColor = this._element.created_by.color; this.edit_button.moveTo(this.paper_coords); this.remove_button.moveTo(this.paper_coords); + this.link_button.moveTo(this.paper_coords); } Rkns.Renderer.Node.prototype.paperShift = function(_delta) { @@ -187,12 +190,14 @@ this.circle.strokeWidth = 3; this.edit_button.show(); this.remove_button.show(); + this.link_button.show(); } Rkns.Renderer.Node.prototype.unselect = function(_newTarget) { - if (!_newTarget || (_newTarget !== this.edit_button && _newTarget !== this.remove_button)) { + if (!_newTarget || (_newTarget !== this.edit_button && _newTarget !== this.remove_button && _newTarget !== this.link_button)) { this.edit_button.hide(); this.remove_button.hide(); + this.link_button.hide(); } this.circle.strokeWidth = 1; } @@ -361,7 +366,7 @@ this.editor_block.fillColor = "#e0e0e0"; this.editor_block.opacity = .8; this.editor_$ = Rkns.$('
') - .appendTo('.Rk-Editor') + .appendTo(this._renderer.editor_$) .css({ position: "absolute", opacity: .8 @@ -430,7 +435,7 @@ this.editor_block.fillColor = "#e0e0e0"; this.editor_block.opacity = .8; this.editor_$ = Rkns.$('
') - .appendTo('.Rk-Editor') + .appendTo(this._renderer.editor_$) .css({ position: "absolute", opacity: .8 @@ -517,6 +522,7 @@ this.sector.group.opacity = .5; this.hide(); this.node_controller.remove_button.hide(); + this.node_controller.link_button.hide(); } Rkns.Renderer.NodeEditButton.prototype.mouseup = function() { @@ -563,6 +569,7 @@ this.sector.group.opacity = .5; this.hide(); this.node_controller.edit_button.hide(); + this.node_controller.link_button.hide(); } Rkns.Renderer.NodeRemoveButton.prototype.mouseup = function() { @@ -577,12 +584,57 @@ /* */ +Rkns.Renderer.NodeLinkButton = Rkns.Utils.inherit(Rkns.Renderer._BaseController); + +Rkns.Renderer.NodeLinkButton.prototype._init = function() { + this._renderer.node_layer.activate(); + this.type = "node-link-button"; + this.sector = Rkns.Renderer.Utils.sector(1 + Rkns._NODE_RADIUS, 3 * Rkns._NODE_RADIUS, 30, 150, 2, 'img/link.png'); + this.sector.group.visible = false; + this.sector.group.opacity = .5; + this.sector.circle.__controller = this; + this.sector.delta = this.sector.group.position; +} + +Rkns.Renderer.NodeLinkButton.prototype.moveTo = function(_pos) { + this.sector.group.position = this.sector.delta.add(_pos); +} + +Rkns.Renderer.NodeLinkButton.prototype.show = function() { + this.sector.group.visible = true; +} + +Rkns.Renderer.NodeLinkButton.prototype.hide = function() { + this.sector.group.visible = false; +} + +Rkns.Renderer.NodeLinkButton.prototype.select = function() { + this.sector.group.opacity = .8; +} + +Rkns.Renderer.NodeLinkButton.prototype.unselect = function() { + this.sector.group.opacity = .5; + this.hide(); + this.node_controller.edit_button.hide(); + this.node_controller.remove_button.hide(); +} + +Rkns.Renderer.NodeLinkButton.prototype.destroy = function() { + this.sector.group.remove(); +} + +/* */ + Rkns.Renderer.Scene = function(_project) { this._project = _project; this._MARGIN_X = 80; this._MARGIN_Y = 50; var _canvas_id = this._project._opts.canvas_id; - this.$ = Rkns.$("#"+_canvas_id) + this.$ = Rkns.$("#"+_canvas_id); + this.editor_$ = Rkns.$(".Rk-Editor"); + this.editor_$.html(this.editorTemplate({ + l10n: this._project.l10n + })); paper.setup(document.getElementById(_canvas_id)); this.scale = 1; this.offset = paper.view.center; @@ -612,13 +664,33 @@ }) this.$.dblclick(function(_event) { _this.onDoubleClick(_event); - }) + }); + this.editor_$.find(".Rk-ZoomOut").click(function() { + _this.offset = new paper.Point([ + _this.$.width(), + _this.$.height() + ]).multiply( .5 * ( 1 - Math.SQRT1_2 ) ).add(_this.offset.multiply( Math.SQRT1_2 )); + _this.scale *= Math.SQRT1_2; + _this.redraw(); + }); + this.editor_$.find(".Rk-ZoomIn").click(function() { + _this.offset = new paper.Point([ + _this.$.width(), + _this.$.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(); } } +Rkns.Renderer.Scene.prototype.editorTemplate = Rkns._.template( + '
' +); + Rkns.Renderer.Scene.prototype.toPaperCoords = function(_point) { return _point.multiply(this.scale).add(this.offset); } @@ -677,6 +749,14 @@ paper.view.draw(); } +Rkns.Renderer.Scene.prototype.addTempEdge = function(_from, _point) { + var _tmpEdge = this.addController("TempEdge",{}); + _tmpEdge.end_pos = _point; + _tmpEdge.from_controller = _from; + _tmpEdge.redraw(); + this.click_target = _tmpEdge; +} + Rkns.Renderer.Scene.prototype.onMouseMove = function(_event) { var _hitResult = paper.project.hitTest(_event.point); if (_hitResult && typeof _hitResult.item.__controller !== "undefined") { @@ -702,11 +782,10 @@ if (_hitResult && typeof _hitResult.item.__controller !== "undefined") { this.click_target = _hitResult.item.__controller; if (this.click_target.type === "node" && _hitResult.type === "stroke") { - var _tmpEdge = this.addController("TempEdge",{}); - _tmpEdge.end_pos = _event.point; - _tmpEdge.from_controller = this.click_target; - _tmpEdge.redraw(); - this.click_target = _tmpEdge; + this.addTempEdge(this.click_target, _event.point); + } + if (this.click_target.type === "node-link-button") { + this.addTempEdge(this.click_target.node_controller, _event.point); } } else { this.click_target = null;