')
- .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;