renkan: comparison client/js/paper-renderer.js

Mercurial Mercurial > renkan / comparison

summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help

client/js/paper-renderer.js

changeset 11	c73bfb5c0af6
parent 10	96476d1fc7c0
child 15	de8528eb3662

equal deleted inserted replaced

-:96476d1fc7c0
+:c73bfb5c0af6
 };
 this.edit_button = new Rkns.Renderer.NodeEditButton(this._renderer, {});
 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;
 }
 Rkns.Renderer.Node.prototype.redraw = function() {
 this.title.content = this._element.title;
 this.title.position = this.paper_coords.add([0, 2 * Rkns._NODE_RADIUS]);
 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) {
 var _coords = this._renderer.toModelCoords(this.paper_coords.add(_delta)),
 _data = {
 Rkns.Renderer.Node.prototype.select = function() {
 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;
 }
 Rkns.Renderer.Node.prototype.mouseup = function(_event) {
 this.editor_block.strokeWidth = 2;
 this.editor_block.strokeColor = "#999999";
 this.editor_block.fillColor = "#e0e0e0";
 this.editor_block.opacity = .8;
 this.editor_$ = Rkns.$('<div>')
-.appendTo('.Rk-Editor')
+.appendTo(this._renderer.editor_$)
 .css({
 position: "absolute",
 opacity: .8
 })
 .hide();
 this.editor_block.strokeWidth = 2;
 this.editor_block.strokeColor = "#999999";
 this.editor_block.fillColor = "#e0e0e0";
 this.editor_block.opacity = .8;
 this.editor_$ = Rkns.$('<div>')
-.appendTo('.Rk-Editor')
+.appendTo(this._renderer.editor_$)
 .css({
 position: "absolute",
 opacity: .8
 })
 .hide();
 Rkns.Renderer.NodeEditButton.prototype.unselect = function() {
 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() {
 if (!this._renderer.is_dragging) {
 this.node_controller.openEditor();
 Rkns.Renderer.NodeRemoveButton.prototype.unselect = function() {
 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() {
 if (confirm('Do you really wish to remove node "' + this.node_controller._element.title + '"?')) {
 this._renderer._project.removeNode(this.node_controller._element, Rkns._RENDER_AND_SAVE);
 }
 }
 Rkns.Renderer.NodeRemoveButton.prototype.destroy = function() {
+this.sector.group.remove();
+}
+/* */
+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;
 this.totalScroll = 0;
 this.click_target = null;
 this.$.mousewheel(function(_event, _delta) {
 _this.onScroll(_event, _delta);
 })
 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(
+'<div class="Rk-ZoomButtons"><div class="Rk-ZoomIn" title="<%=l10n.zoom_in%>"></div><div class="Rk-ZoomOut" title="<%=l10n.zoom_out%>"></div></div>'
+);
 Rkns.Renderer.Scene.prototype.toPaperCoords = function(_point) {
 return _point.multiply(this.scale).add(this.offset);
 }
 _controller.redraw();
 });
 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") {
 var _newTarget = _hitResult.item.__controller;
 if (this.selected_target !== _hitResult.item.__controller) {
 this.is_dragging = false;
 var _hitResult = paper.project.hitTest(_event.point);
 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",{});
+this.addTempEdge(this.click_target, _event.point);
-_tmpEdge.end_pos = _event.point;
+}
-_tmpEdge.from_controller = this.click_target;
+if (this.click_target.type === "node-link-button") {
-_tmpEdge.redraw();
+this.addTempEdge(this.click_target.node_controller, _event.point);
-this.click_target = _tmpEdge;
 }
 } else {
 this.click_target = null;
 }
 }

renkan