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 154	0f87088e03bc
parent 153	7fcb35795ff4
child 155	7d5f722d76b2

equal deleted inserted replaced

-:7fcb35795ff4
+:0f87088e03bc
 _editor.source_representation = this;
 _editor.draw();
 }
 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) {
 		b.show();
 	});
 	this.minimap_circle.strokeColor = this.options.minimap_highlight_color;
 }
 }
 Rkns.Renderer.Node.prototype.unselect = function(_newTarget) {
+	this.selected = false;
 if (!_newTarget || _newTarget.source_representation !== this) {
 	this.buttons.forEach(function(b) {
 		b.hide();
 	});
 	this.circle.strokeWidth = this.options.node_stroke_width;
 		this.minimap_circle.strokeColor = undefined;
 	}
 }
 }
+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) {
 this.node_image.opacity = .5;
 }
 if (this.renderer.isEditable()) {
 	this.model.set(_data);
 }
 }
-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 {
-else {
+	if (_isTouch) {
-this.openEditor();
+		this.toggleSelect();
+		paper.view.draw();
+	} else {
+		this.openEditor();
+	}
 }
 this.renderer.click_target = null;
 this.renderer.is_dragging = false;
 this.is_dragging = false;
 }
 _editor.source_representation = this;
 _editor.draw();
 }
 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();
 	    this.remove_button.show();
 	}
 this.openEditor();
 }
 }
 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();
 	        this.remove_button.hide();
 }
 this.line.strokeWidth = this.options.edge_stroke_width;
 }
 }
-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();
 this.to_representation.saveCoords();
 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;
 }
 var _hitResult = paper.project.hitTest(this.end_pos);
 this.renderer.findTarget(_hitResult);
 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;
 if (_hitResult && typeof _hitResult.item.__representation !== "undefined") {
 var _target = _hitResult.item.__representation;
 this.$.html(this.template(_renkan));
 this.onStatusChange();
 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;
 this.totalScroll = 0;
 this.mouse_down = false;
 this.bundles = [];
 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;
 	    },
 	    dragover: function(_event) {
 	    	_event.preventDefault();
 	for (var i = 0; i < fields.length; i++) {
 		var f = fields[i];
 		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(),
 _point = new paper.Point([
 _event.originalEvent.pageX - _off.left,
 if (this.minimap) {
 	    window.setInterval(function() {
 	    	_this.rescaleMinimap()
 	    }, 2000);
 }
 }
 Rkns.Renderer.Scene.prototype.template = Rkns._.template(
 '<% if (options.show_top_bar) { %><div class="Rk-TopBar"><% if (!options.editor_mode) { %><h2 class="Rk-PadTitle"><%- project.get("title") || translate("Untitled project")%></h2>'
 + '<% } else { %><input type="text" class="Rk-PadTitle" value="<%- project.get("title") || "" %>" placeholder="<%-translate("Untitled project")%>" /><% } %>'
 Rkns._(this.representations).each(function(_repr) {
 _repr.unhighlight();
 });
 }
+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);
 });
 if (this.minimap) {
 _newTarget.select(this.selected_target);
 this.selected_target = _newTarget;
 }
 } else {
 if (this.selected_target) {
-this.selected_target.unselect(null);
+this.selected_target.unselect();
 }
 this.selected_target = null;
 }
 }
 this.findTarget(_hitResult);
 }
 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,
 _event.pageY - _off.top
 ]);
 this.click_mode = false;
 }
 }
 }
-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();
 this.click_target.mouseup(
 {
 point: new paper.Point([
 _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();
+}
 }
 }
 Rkns.Renderer.Scene.prototype.onScroll = function(_event, _scrolldelta) {
 this.totalScroll += _scrolldelta;

renkan