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 153	7fcb35795ff4
parent 152	5306bf5284c2
child 154	0f87088e03bc

equal deleted inserted replaced

-:5306bf5284c2
+:7fcb35795ff4
 _path.fillColor = new paper.GradientColor(new paper.Gradient([_options.tooltip_top_color, _options.tooltip_bottom_color]), [0,_top], [0, _bottom]);
 _selector.css({
 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,
 	_startRads = _startAngle * Math.PI / 180,
 _endRads = _endAngle * Math.PI / 180,
 this.title.paragraphStyle.justification = 'center';
 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);
 }
 }
 Rkns.Renderer.Node.prototype.redraw = function(_dontRedrawEdges) {
 if (this.renderer.minimap) {
 	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;
 }
 }
 Rkns.Renderer.Edge.prototype.redraw = function() {
 Rkns.Renderer.Edge.prototype.mouseup = function(_event) {
 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();
 }
 }
 this.renderer.click_target = null;
 Rkns.Renderer.NodeEditor.prototype.readOnlyTemplate = Rkns._.template(
 '<h2><span class="Rk-CloseX">&times;</span><span class="Rk-UserColor" style="background:<%-node.color%>;"></span>'
 + '<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><% } %>'
 );
 Rkns.Renderer.NodeEditor.prototype.draw = function() {
 var _model = this.source_representation.model,
 this.imageFile = 'img/remove.png';
 this.text = "Remove";
 }
 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);
 }
 }
 this.notif_$ = this.$.find(".Rk-Notifications");
 paper.setup(this.canvas_$[0]);
 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();
 this.node_layer = new paper.Layer();
 this.buttons_layer = new paper.Layer();
 	paper.view.draw();
 }).throttle(100);
 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;
+this.canvas_$.on({
-_tool.onMouseMove = function(_event) {
+	mousedown: function(_event) {
+		_this.onMouseDown(_event);
+	},
+	mousemove: function(_event) {
 _this.onMouseMove(_event);
-}
+	    },
-_tool.onMouseDown = function(_event) {
+	    mouseup: function(_event) {
-_this.onMouseDown(_event);
+	        _this.onMouseUp(_event);
-}
+	    },
-_tool.onMouseDrag = function(_event) {
+	    mousewheel: function(_event, _delta) {
-_this.onMouseDrag(_event);
+	        if (_allowScroll) {
-}
+	        	_this.onScroll(_event, _delta);
-this.canvas_$.mouseup(function(_event) {
+	        }
-_this.onMouseUp(_event);
+	    },
-});
+	    dblclick: function(_event) {
-this.canvas_$.mousewheel(function(_event, _delta) {
+	        _this.onDoubleClick(_event);
-if (_allowScroll) {
+	    },
-	_this.onScroll(_event, _delta);
+	    mouseleave: function(_event) {
-}
+	        _this.onMouseUp(_event);
-});
+	        _this.click_target = null;
-this.canvas_$.dblclick(function(_event) {
+	        _this.is_dragging = false;
-_this.onDoubleClick(_event);
+	    },
-});
+	    dragover: function(_event) {
-this.canvas_$.on("dragover", function(_event) {
+	    	_event.preventDefault();
-	_event.preventDefault();
+	    },
-});
+	    dragenter: function(_event) {
-this.canvas_$.on("dragenter", function(_event) {
+	    	_allowScroll = false;
-	_allowScroll = false;
+	    	_event.preventDefault();
-	_event.preventDefault();
+	    },
-});
+	    dragleave: function(_event) {
-this.canvas_$.on("dragleave", function(_event) {
+	    	_allowScroll = true;
-	_allowScroll = true;
+	    	_event.preventDefault();
-	_event.preventDefault();
+	    },
-});
+drop: function(_event) {
-this.canvas_$.on("drop", function(_event) {
 	_event.preventDefault();
 	_allowScroll = true;
 	if (!_this.isEditable()) {
 		return;
 	}
 }
 };
 	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([
 	            _this.canvas_$.width(),
 	            _this.canvas_$.height()
 	this.offset = this.offset.add(_delta);
 this.redraw();
 }
 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,
 position: {
 x: _coords.x,
 }
 }
 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();
 });
 } else {
 this.click_mode = false;
 }
 }
 }
-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(
 {
 point: new paper.Point([

renkan