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 36	d249d36ecc37
parent 35	10e0c23c849e
child 37	db991a757015

equal deleted inserted replaced

-:10e0c23c849e
+:d249d36ecc37
 _ARROW_WIDTH: 8,
 _EDITOR_ARROW_LENGTH : 20,
 _EDITOR_ARROW_WIDTH : 40,
 _EDITOR_MARGIN : 15,
 _EDITOR_PADDING : 10,
-_EDITOR_GRADIENT : new paper.Gradient(['#f0f0f0', '#d0d0d0'])
+_EDITOR_GRADIENT : new paper.Gradient(['#f0f0f0', '#d0d0d0']),
+_CLICKMODE_ADDNODE : 1,
+_CLICKMODE_STARTEDGE : 2,
+_CLICKMODE_ENDEDGE : 3
 }
 Rkns.Renderer.Utils = {
 drawEditBox : function(_coords, _path, _width, _xmargin, _selector) {
 _selector.css({
 Rkns.Renderer.Node.prototype.mouseup = function(_event) {
 if (!this.renderer.is_dragging) {
 this.openEditor();
 }
+this.renderer.click_target = null;
+this.renderer.is_dragging = false;
 }
 Rkns.Renderer.Node.prototype.destroy = function(_event) {
 this.edit_button.destroy();
 this.remove_button.destroy();
 Rkns.Renderer.Edge.prototype.mouseup = function(_event) {
 if (!this.renderer.is_dragging) {
 this.openEditor();
 }
+this.renderer.click_target = null;
+this.renderer.is_dragging = false;
 }
 Rkns.Renderer.Edge.prototype.paperShift = function(_delta) {
 this.from_representation.paperShift(_delta);
 this.to_representation.paperShift(_delta);
 this.renderer.findTarget(_hitResult);
 this.redraw();
 }
 Rkns.Renderer.TempEdge.prototype.mouseup = function(_event) {
-var _hitResult = paper.project.hitTest(_event.point);
+var _hitResult = paper.project.hitTest(_event.point),
+_model = this.from_representation.model,
+_endDrag = true;
 if (_hitResult && typeof _hitResult.item.__representation !== "undefined") {
 var _target = _hitResult.item.__representation;
-if (_target.type === "Node" && this.from_representation.model !== _target.model) {
+if (_target.type === "Node" && _model !== _target.model) {
 var _data = {
 id: Rkns.Utils.getUID('edge'),
 created_by: this.renderer.renkan.current_user,
-from: this.from_representation.model.get("_id"),
+from: _model.get("_id"),
 to: _target.model.get("_id")
 };
 this.project.addEdge(_data);
 }
-}
+if (_model === _target.model || (_target.node_representation && _target.node_representation.model === _model)) {
-this.renderer.removeRepresentation(this);
+_endDrag = false;
+this.renderer.is_dragging = true;
+}
+}
+if (_endDrag) {
+this.renderer.click_target = null;
+this.renderer.is_dragging = false;
+this.renderer.removeRepresentation(this);
+paper.view.draw();
+}
 }
 Rkns.Renderer.TempEdge.prototype.destroy = function() {
 this.arrow.remove();
 this.line.remove();
 this.node_representation.unselect();
 }
 }
 Rkns.Renderer.NodeRemoveButton.prototype.mouseup = function() {
+this.renderer.removeRepresentationsOfType("editor");
 if (confirm('Do you really wish to remove node "' + this.node_representation.model.get("title") + '"?')) {
 this.project.removeNode(this.node_representation.model);
 }
 }
 this.edge_representation.unselect();
 }
 }
 Rkns.Renderer.EdgeRemoveButton.prototype.mouseup = function() {
+this.renderer.removeRepresentationsOfType("editor");
 if (confirm('Do you really wish to remove edge "' + this.edge_representation.model.get("title") + '"?')) {
 this.project.removeEdge(this.edge_representation.model);
 }
 }
 this.$.html(this.template({
 l10n: _renkan.l10n
 }))
 this.canvas_$ = this.$.find(".Rk-Canvas");
 this.editor_$ = this.$.find(".Rk-Editor");
+this.notif_$ = this.$.find(".Rk-Notifications");
 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 = [];
+this.click_mode = false;
 var _tool = new paper.Tool(),
 _this = this;
 _tool.minDistance = Rkns.Renderer._MIN_DRAG_DISTANCE;
 _tool.onMouseMove = function(_event) {
 _this.onMouseMove(_event);
 _this.canvas_$.height()
 ]).multiply( .5 * ( 1 - Math.SQRT2 ) ).add(_this.offset.multiply( Math.SQRT2 ));
 _this.setScale( _this.scale * Math.SQRT2 );
 _this.redraw();
 });
-this.$.find(".Rk-Users").mouseenter(function() {
+this.$.find(".Rk-CurrentUser").mouseenter(
-_this.$.find(".Rk-UserList").slideDown();
+function() { _this.$.find(".Rk-UserList").slideDown() }
-}).mouseleave(function() {
+);
-_this.$.find(".Rk-UserList").slideUp();
+this.$.find(".Rk-Users").mouseleave(
-});
+function() { _this.$.find(".Rk-UserList").slideUp(); }
+);
 this.$.find(".Rk-FullScreen-Button").click(function() {
 var _isFull = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen,
 _el = _this.renkan.$[0],
 _requestMethods = ["requestFullScreen","mozRequestFullScreen","webkitRequestFullScreen"],
 _cancelMethods = ["cancelFullScreen","mozCancelFullScreen","webkitCancelFullScreen"];
 }
 }
 }
 });
 this.$.find(".Rk-AddNode-Button").click(function() {
-var _coords = _this.toModelCoords(paper.view.center),
+if (_this.click_mode === Rkns.Renderer._CLICKMODE_ADDNODE) {
-_data = {
+_this.click_mode = false;
-id: Rkns.Utils.getUID('node'),
+_this.notif_$.hide();
-created_by: _this.renkan.current_user,
+} else {
-position: {
+_this.click_mode = Rkns.Renderer._CLICKMODE_ADDNODE;
-x: _coords.x,
+_this.notif_$.html(_renkan.l10n.notif_add_node).fadeIn();
-y: _coords.y
+}
-}
+});
-};
+this.$.find(".Rk-AddEdge-Button").click(function() {
-_node = _this.renkan.project.addNode(_data);
+if (_this.click_mode === Rkns.Renderer._CLICKMODE_STARTEDGE || _this.click_mode === Rkns.Renderer._CLICKMODE_ENDEDGE) {
-_this.getRepresentationByModel(_node).openEditor();
+_this.click_mode = false;
+_this.notif_$.hide();
+} else {
+_this.click_mode = Rkns.Renderer._CLICKMODE_STARTEDGE;
+_this.notif_$.html(_renkan.l10n.notif_start_edge).fadeIn();
+}
 });
 this.$.find(".Rk-TopBar-Button").mouseover(function() {
 Rkns.$(this).find(".Rk-TopBar-Tooltip").show();
 }).mouseout(function() {
 Rkns.$(this).find(".Rk-TopBar-Tooltip").hide();
 this.redraw();
 }
 Rkns.Renderer.Scene.prototype.template = Rkns._.template(
-'<div class="Rk-TopBar"><h3 class="Rk-PadTitle">Untitled Project</h3>'
+'<div class="Rk-TopBar"><h3 class="Rk-PadTitle"><%=l10n.untitled_project%></h3>'
 + '<div class="Rk-Users"><div class="Rk-CurrentUser"><span class="Rk-CurrentUser-Color"></span><span class="Rk-CurrentUser-Name">&lt;unknown user&gt;</span></div><ul class="Rk-UserList"></ul></div>'
 + '<div class="Rk-TopBar-Separator"></div><div class="Rk-TopBar-Button Rk-FullScreen-Button"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Tip"></div><div class="Rk-TopBar-Tooltip-Contents"><%=l10n.full_screen%></div></div></div>'
 + '<div class="Rk-TopBar-Separator"></div><div class="Rk-TopBar-Button Rk-AddNode-Button"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Tip"></div><div class="Rk-TopBar-Tooltip-Contents"><%=l10n.add_node%></div></div></div>'
++ '<div class="Rk-TopBar-Separator"></div><div class="Rk-TopBar-Button Rk-AddEdge-Button"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Tip"></div><div class="Rk-TopBar-Tooltip-Contents"><%=l10n.add_edge%></div></div></div>'
 + '<div class="Rk-TopBar-Separator"></div></div>'
-+ '<canvas class="Rk-Canvas" resize></canvas><div class="Rk-Editor">'
++ '<canvas class="Rk-Canvas" resize></canvas><div class="Rk-Editor"><div class="Rk-Notifications"></div>'
 + '<div class="Rk-ZoomButtons"><div class="Rk-ZoomIn" title="<%=l10n.zoom_in%>"></div><div class="Rk-ZoomOut" title="<%=l10n.zoom_out%>"></div></div>'
 + '</div>'
 );
 Rkns.Renderer.Scene.prototype.addToBundles = function(_edgeRepr) {
 this.findTarget(_hitResult);
 }
 }
 Rkns.Renderer.Scene.prototype.onMouseDown = function(_event) {
-this.is_dragging = false;
+if (!this.click_target || this.click_target.type !== "temp-edge") {
-var _hitResult = paper.project.hitTest(_event.point);
+this.is_dragging = false;
-if (_hitResult && typeof _hitResult.item.__representation !== "undefined") {
+var _hitResult = paper.project.hitTest(_event.point);
-this.click_target = _hitResult.item.__representation;
+if (_hitResult && typeof _hitResult.item.__representation !== "undefined") {
-if (this.click_target.type === "Node" && _hitResult.type === "stroke") {
+this.click_target = _hitResult.item.__representation;
+if (this.click_target.type === "Node-link-button") {
+this.removeRepresentationsOfType("editor");
+this.addTempEdge(this.click_target.node_representation, _event.point);
+}
+} else {
+this.click_target = null;
+if (this.click_mode === Rkns.Renderer._CLICKMODE_ADDNODE) {
+var _coords = this.toModelCoords(_event.point),
+_data = {
+id: Rkns.Utils.getUID('node'),
+created_by: this.renkan.current_user,
+position: {
+x: _coords.x,
+y: _coords.y
+}
+};
+_node = this.renkan.project.addNode(_data);
+this.getRepresentationByModel(_node).openEditor();
+}
+}
+}
+if (this.click_mode) {
+if (this.click_mode === Rkns.Renderer._CLICKMODE_STARTEDGE && this.click_target && this.click_target.type === "Node") {
+this.removeRepresentationsOfType("editor");
 this.addTempEdge(this.click_target, _event.point);
-}
+this.click_mode = Rkns.Renderer._CLICKMODE_ENDEDGE;
-if (this.click_target.type === "Node-link-button") {
+this.notif_$.fadeOut(function() {
-this.addTempEdge(this.click_target.node_representation, _event.point);
+Rkns.$(this).html(_renkan.l10n.notif_end_edge).fadeIn();
-}
+});
 } else {
-this.click_target = null;
+this.notif_$.hide();
+this.click_mode = false;
+}
 }
 }
 Rkns.Renderer.Scene.prototype.onMouseDrag = function(_event) {
 this.is_dragging = true;
 _event.pageX - _off.left,
 _event.pageY - _off.top
 ])
 }
 );
-}
+} else {
-this.is_dragging = false;
+this.click_target = null;
-this.click_target = null;
+this.is_dragging = false;
+}
 }
 Rkns.Renderer.Scene.prototype.onScroll = function(_event, _scrolldelta) {
 this.totalScroll += _scrolldelta;
 if (Math.abs(this.totalScroll) >= 1) {

renkan