client/js/paper-renderer.js
changeset 154 0f87088e03bc
parent 153 7fcb35795ff4
child 155 7d5f722d76b2
--- a/client/js/paper-renderer.js	Wed Apr 10 17:25:41 2013 +0200
+++ b/client/js/paper-renderer.js	Fri Apr 12 19:10:40 2013 +0200
@@ -431,6 +431,7 @@
 }
 
 Rkns.Renderer.Node.prototype.select = function() {
+	this.selected = true;
     this.circle.strokeWidth = this.options.selected_node_stroke_width;
     if (this.renderer.isEditable()) {
     	this.buttons.forEach(function(b) {
@@ -457,6 +458,7 @@
 }
 
 Rkns.Renderer.Node.prototype.unselect = function(_newTarget) {
+	this.selected = false;
     if (!_newTarget || _newTarget.source_representation !== this) {
     	this.buttons.forEach(function(b) {
     		b.hide();
@@ -469,6 +471,15 @@
     }
 }
 
+Rkns.Renderer.Node.prototype.toggleSelect = function() {
+	if (this.selected) {
+		this.unselect(null);
+	} else {
+		this.renderer.unselectAll();
+		this.select();
+	}
+}
+	
 Rkns.Renderer.Node.prototype.highlight = function() {
     this.circle.fillColor = this.options.highlighted_node_fill_color;
     if (this.node_image) {
@@ -496,12 +507,16 @@
     }
 }
 
-Rkns.Renderer.Node.prototype.mouseup = function(_event) {
+Rkns.Renderer.Node.prototype.mouseup = function(_event, _isTouch) {
     if (this.renderer.isEditable() && this.renderer.is_dragging) {
         this.saveCoords();
-    }
-    else {
-        this.openEditor();
+    } else {
+    	if (_isTouch) {
+    		this.toggleSelect();
+    		paper.view.draw();
+    	} else {
+    		this.openEditor();
+    	}
     }
     this.renderer.click_target = null;
     this.renderer.is_dragging = false;
@@ -633,6 +648,7 @@
 }
 
 Rkns.Renderer.Edge.prototype.select = function() {
+	this.selected = true;
     this.line.strokeWidth = this.options.selected_edge_stroke_width;
     if (this.renderer.isEditable()) {
 	    this.edit_button.show();
@@ -644,6 +660,7 @@
 }
 
 Rkns.Renderer.Edge.prototype.unselect = function(_newTarget) {
+	this.selected = false;
     if (!_newTarget || _newTarget.source_representation !== this) {
     	if (this.options.editor_mode) {
 	        this.edit_button.hide();
@@ -653,7 +670,16 @@
     }
 }
 
-Rkns.Renderer.Edge.prototype.mouseup = function(_event) {
+Rkns.Renderer.Edge.prototype.toggleSelect = function() {
+	if (this.selected) {
+		this.unselect(null);
+	} else {
+		this.renderer.unselectAll();
+		this.select();
+	}
+}
+
+Rkns.Renderer.Edge.prototype.mouseup = function(_event, _isTouch) {
     if (!this.renkan.read_only) {
         if (this.renderer.is_dragging) {
             this.from_representation.saveCoords();
@@ -661,8 +687,13 @@
             this.from_representation.is_dragging = false;
             this.to_representation.is_dragging = false;
         } else {
-            this.openEditor();
-        }
+	    	if (_isTouch) {
+	    		this.toggleSelect();
+	    		paper.view.draw();
+	    	} else {
+	    		this.openEditor();
+	    	}
+    	}
     }
     this.renderer.click_target = null;
     this.renderer.is_dragging = false;
@@ -747,7 +778,7 @@
     this.redraw();
 }
 
-Rkns.Renderer.TempEdge.prototype.mouseup = function(_event) {
+Rkns.Renderer.TempEdge.prototype.mouseup = function(_event, _isTouch) {
     var _hitResult = paper.project.hitTest(_event.point),
         _model = this.from_representation.model,
         _endDrag = true;
@@ -1301,6 +1332,10 @@
     this.canvas_$ = this.$.find(".Rk-Canvas");
     this.editor_$ = this.$.find(".Rk-Editor");
     this.notif_$ = this.$.find(".Rk-Notifications");
+    this.canvas_$.attr({
+    	width: this.canvas_$.width(),
+    	height: this.canvas_$.height()
+    })
     paper.setup(this.canvas_$[0]);
     this.scale = 1;
     this.offset = paper.view.center;
@@ -1351,28 +1386,56 @@
     this.click_mode = false;
     
     var _this = this,
-        _allowScroll = true;
+        _allowScroll = true,
+        _originalScale,
+        _zooming = false;
     
     this.canvas_$.on({
     	mousedown: function(_event) {
-    		_this.onMouseDown(_event);
+    		_this.onMouseDown(_event, false);
     	},
     	mousemove: function(_event) {
-        _this.onMouseMove(_event);
+        	_this.onMouseMove(_event, false);
 	    },
 	    mouseup: function(_event) {
-	        _this.onMouseUp(_event);
+	        _this.onMouseUp(_event, false);
 	    },
 	    mousewheel: function(_event, _delta) {
 	        if (_allowScroll) {
 	        	_this.onScroll(_event, _delta);
 	        }
 	    },
+	    touchstart: function(_event) {
+	    	_event.preventDefault();
+	    	_originalScale = _this.scale;
+	    	_zooming = false;
+	    	_this.onMouseDown(_event.originalEvent.changedTouches[0], true);
+	    },
+	    touchmove: function(_event) {
+	    	_event.preventDefault();
+	    	if (_event.originalEvent.scale == 1) {
+	    		_this.onMouseMove(_event.originalEvent.changedTouches[0], true);
+	    	} else {
+	    		if (!_zooming) {
+	    			_this.onMouseUp(_event, true);
+			        _this.click_target = null;
+			        _this.is_dragging = false;
+			        _zooming = true;
+	    		}
+	    		var _newScale = _event.originalEvent.scale * _originalScale;
+	    		//TODO: Correct Offset !
+	    		_this.setScale(_newScale, _this.offset);
+	    	}
+	    },
+	    touchend: function(_event) {
+	    	_event.preventDefault();
+	    	_this.onMouseUp(_event.originalEvent.changedTouches[0], true);
+	    },
 	    dblclick: function(_event) {
 	        _this.onDoubleClick(_event);
 	    },
 	    mouseleave: function(_event) {
-	        _this.onMouseUp(_event);
+	        _this.onMouseUp(_event, false);
 	        _this.click_target = null;
 	        _this.is_dragging = false;
 	    },
@@ -1498,6 +1561,9 @@
     		if (res["text/x-iri-" + f] || res[f]) {
     			newNode[f] = res["text/x-iri-" + f] || res[f];
     		}
+    		if (newNode[f] === "none" || newNode[f] === "null") {
+    			newNode[f] = undefined;
+    		}
     	}
     	if (newNode.title || newNode.description || newNode.uri) {
     		var _off = _this.canvas_$.offset(),
@@ -1676,6 +1742,7 @@
 	    	_this.rescaleMinimap()
 	    }, 2000);
     }
+
 }
 
 Rkns.Renderer.Scene.prototype.template = Rkns._.template(
@@ -1883,6 +1950,12 @@
     });
 }
 
+Rkns.Renderer.Scene.prototype.unselectAll = function(_model) {
+    Rkns._(this.representations).each(function(_repr) {
+        _repr.unselect();
+    });
+}
+
 Rkns.Renderer.Scene.prototype.redraw = function() {
     Rkns._(this.representations).each(function(_representation) {
     	_representation.redraw(true);
@@ -1913,7 +1986,7 @@
         }
     } else {
         if (this.selected_target) {
-            this.selected_target.unselect(null);
+            this.selected_target.unselect();
         }
         this.selected_target = null;
     }
@@ -1948,7 +2021,7 @@
     paper.view.draw();
 }
 
-Rkns.Renderer.Scene.prototype.onMouseDown = function(_event) {
+Rkns.Renderer.Scene.prototype.onMouseDown = function(_event, _isTouch) {
     var _off = this.canvas_$.offset(),
     	_point = new paper.Point([
             _event.pageX - _off.left,
@@ -1998,7 +2071,7 @@
     }
 }
 
-Rkns.Renderer.Scene.prototype.onMouseUp = function(_event) {
+Rkns.Renderer.Scene.prototype.onMouseUp = function(_event, _isTouch) {
 	this.mouse_down = false;
     if (this.click_target) {
         var _off = this.canvas_$.offset();
@@ -2008,11 +2081,16 @@
                     _event.pageX - _off.left,
                     _event.pageY - _off.top
                 ])
-            }
+            },
+            _isTouch
         );
     } else {
         this.click_target = null;
         this.is_dragging = false;
+        if (_isTouch) {
+        	this.unselectAll();
+        	paper.view.draw();
+        }
     }
 }