client/js/paper-renderer.js
changeset 153 7fcb35795ff4
parent 152 5306bf5284c2
child 154 0f87088e03bc
--- a/client/js/paper-renderer.js	Tue Apr 09 16:09:25 2013 +0200
+++ b/client/js/paper-renderer.js	Wed Apr 10 17:25:41 2013 +0200
@@ -74,6 +74,7 @@
             left: (_options.tooltip_padding + Math.min(_left, _right)),
             top: (_options.tooltip_padding + _top)
         });
+        return _path;
     },
     sector : function(_repr, _inR, _outR, _startAngle, _endAngle, _padding, _imgsrc, _caption) {
         var _options = _repr.renderer.renkan.options,
@@ -304,6 +305,7 @@
     if (this.renderer.minimap) {
 	    this.renderer.minimap.node_layer.activate();
 	    this.minimap_circle = new paper.Path.Circle([0, 0], 1);
+	    this.minimap_circle.__representation = this.renderer.minimap.miniframe.__representation;
 	    this.renderer.minimap.node_group.addChild(this.minimap_circle);
     }
 }
@@ -562,6 +564,7 @@
     	this.renderer.minimap.edge_layer.activate();
 	    this.minimap_line = new paper.Path();
 	    this.minimap_line.add([0,0],[0,0]);
+	    this.minimap_line.__representation = this.renderer.minimap.miniframe.__representation;
 	    this.minimap_line.strokeWidth = 1;
     }
 }
@@ -655,6 +658,8 @@
         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();
         }
@@ -822,6 +827,7 @@
     + '<span class="Rk-Display-Title"><% if (node.uri) { %><a href="<%-node.uri%>" target="_blank"><% } %><%-node.title%><% if (node.uri) { %></a><% } %></span></h2>'
     + '<% if (node.uri) { %><p class="Rk-Display-URI"><a href="<%-node.uri%>" target="_blank"><%-node.short_uri%></a></p><% } %>'
     + '<p><%-node.description%></p>'
+    + '<% if (node.image) { %><img class="Rk-Display-ImgPreview" src="<%-node.image%>" /><% } %>'
     + '<% if (node.has_creator) { %><p><span class="Rk-Editor-Label"><%-translate("Created by:")%></span><span class="Rk-UserColor" style="background:<%-node.created_by_color%>;"></span><%- Rkns.Renderer.Utils.shortenText(node.created_by_title, 25) %></p><% } %>'
 );
 
@@ -1176,6 +1182,8 @@
 }
 
 Rkns.Renderer.NodeRemoveButton.prototype.mouseup = function() {
+    this.renderer.click_target = null;
+    this.renderer.is_dragging = false;
     this.renderer.removeRepresentationsOfType("editor");
     if (this.renderer.isEditable() && confirm(this.renkan.translate('Do you really wish to remove node ') + '"' + this.source_representation.model.get("title") + '"?')) {
         this.project.removeNode(this.source_representation.model);
@@ -1297,6 +1305,7 @@
     this.scale = 1;
     this.offset = paper.view.center;
     this.totalScroll = 0;
+    this.mouse_down = false;
     this.click_target = null;
     this.selected_target = null;
     this.edge_layer = new paper.Layer();
@@ -1340,43 +1349,45 @@
     
     this.bundles = [];
     this.click_mode = false;
-    var _tool = new paper.Tool(),
-        _this = this,
+    
+    var _this = this,
         _allowScroll = true;
     
-    _tool.minDistance = Rkns.Renderer._MIN_DRAG_DISTANCE;
-    _tool.onMouseMove = function(_event) {
+    this.canvas_$.on({
+    	mousedown: function(_event) {
+    		_this.onMouseDown(_event);
+    	},
+    	mousemove: function(_event) {
         _this.onMouseMove(_event);
-    }
-    _tool.onMouseDown = function(_event) {
-        _this.onMouseDown(_event);
-    }
-    _tool.onMouseDrag = function(_event) {
-        _this.onMouseDrag(_event);
-    }
-    this.canvas_$.mouseup(function(_event) {
-        _this.onMouseUp(_event);
-    });
-    this.canvas_$.mousewheel(function(_event, _delta) {
-        if (_allowScroll) {
-        	_this.onScroll(_event, _delta);
-        }
-    });
-    this.canvas_$.dblclick(function(_event) {
-        _this.onDoubleClick(_event);
-    });
-    this.canvas_$.on("dragover", function(_event) {
-    	_event.preventDefault();
-    });
-    this.canvas_$.on("dragenter", function(_event) {
-    	_allowScroll = false;
-    	_event.preventDefault();
-    });
-    this.canvas_$.on("dragleave", function(_event) {
-    	_allowScroll = true;
-    	_event.preventDefault();
-    });
-    this.canvas_$.on("drop", function(_event) {
+	    },
+	    mouseup: function(_event) {
+	        _this.onMouseUp(_event);
+	    },
+	    mousewheel: function(_event, _delta) {
+	        if (_allowScroll) {
+	        	_this.onScroll(_event, _delta);
+	        }
+	    },
+	    dblclick: function(_event) {
+	        _this.onDoubleClick(_event);
+	    },
+	    mouseleave: function(_event) {
+	        _this.onMouseUp(_event);
+	        _this.click_target = null;
+	        _this.is_dragging = false;
+	    },
+	    dragover: function(_event) {
+	    	_event.preventDefault();
+	    },
+	    dragenter: function(_event) {
+	    	_allowScroll = false;
+	    	_event.preventDefault();
+	    },
+	    dragleave: function(_event) {
+	    	_allowScroll = true;
+	    	_event.preventDefault();
+	    },
+    drop: function(_event) {
     	_event.preventDefault();
     	_allowScroll = true;
     	if (!_this.isEditable()) {
@@ -1511,7 +1522,8 @@
         	var _node = _this.renkan.project.addNode(_data);
             _this.getRepresentationByModel(_node).openEditor();
     	}
-    })
+    }
+    });
     this.editor_$.find(".Rk-ZoomOut").click(function() {
     	var _newScale = _this.scale * Math.SQRT1_2,
     		_offset = new paper.Point([
@@ -1913,33 +1925,51 @@
 }
 
 Rkns.Renderer.Scene.prototype.onMouseMove = function(_event) {
-    var _hitResult = paper.project.hitTest(_event.point);
+    var _off = this.canvas_$.offset(),
+    	_point = new paper.Point([
+            _event.pageX - _off.left,
+            _event.pageY - _off.top
+        ]);
+	var _delta = _point.subtract(this.last_point);
+	this.last_point = _point;
+    if (!this.is_dragging && this.mouse_down && _delta.length > Rkns.Renderer._MIN_DRAG_DISTANCE) {
+    	this.is_dragging = true;
+    }
+    var _hitResult = paper.project.hitTest(_point);
     if (this.is_dragging) {
         if (this.click_target && typeof this.click_target.paperShift === "function") {
-            this.click_target.paperShift(_event.delta);
+            this.click_target.paperShift(_delta);
         } else {
-            this.paperShift(_event.delta);
+            this.paperShift(_delta);
         }
     } else {
         this.findTarget(_hitResult);
     }
+    paper.view.draw();
 }
 
 Rkns.Renderer.Scene.prototype.onMouseDown = function(_event) {
+    var _off = this.canvas_$.offset(),
+    	_point = new paper.Point([
+            _event.pageX - _off.left,
+            _event.pageY - _off.top
+        ]);
+    this.last_point = _point;
+    this.mouse_down = true;
     if (!this.click_target || this.click_target.type !== "Temp-edge") {
         this.removeRepresentationsOfType("editor");
         this.is_dragging = false;
-        var _hitResult = paper.project.hitTest(_event.point);
+        var _hitResult = paper.project.hitTest(_point);
         if (this.isEditable() && _hitResult && typeof _hitResult.item.__representation !== "undefined") {
             this.click_target = _hitResult.item.__representation;
             if (this.click_target.type === "Node-link-button") {
                 this.removeRepresentationsOfType("editor");
-                this.addTempEdge(this.click_target.source_representation, _event.point);
+                this.addTempEdge(this.click_target.source_representation, _point);
             }
         } else {
             this.click_target = null;
             if (this.isEditable() && this.click_mode === Rkns.Renderer._CLICKMODE_ADDNODE) {
-                var _coords = this.toModelCoords(_event.point),
+                var _coords = this.toModelCoords(_point),
                     _data = {
                         id: Rkns.Utils.getUID('node'),
                         created_by: this.renkan.current_user,
@@ -1956,7 +1986,7 @@
     if (this.click_mode) {
         if (this.isEditable() && 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.addTempEdge(this.click_target, _point);
             this.click_mode = Rkns.Renderer._CLICKMODE_ENDEDGE;
             this.notif_$.fadeOut(function() {
                 Rkns.$(this).html(_renkan.translate("Click on a second node to complete the edge")).fadeIn();
@@ -1968,12 +1998,8 @@
     }
 }
 
-Rkns.Renderer.Scene.prototype.onMouseDrag = function(_event) {
-    this.is_dragging = true;
-    this.onMouseMove(_event);
-}
-
 Rkns.Renderer.Scene.prototype.onMouseUp = function(_event) {
+	this.mouse_down = false;
     if (this.click_target) {
         var _off = this.canvas_$.offset();
         this.click_target.mouseup(