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 69	f0873867143a
parent 68	803dbeb7c919
child 70	47b3125130a2

equal deleted inserted replaced

-:803dbeb7c919
+:f0873867143a
 Rkns.Renderer = {
-_MARGIN_X: 80,
+_MINIMAP_MARGIN_X: 20,
-_MARGIN_Y: 50,
+_MINIMAP_MARGIN_Y: 20,
 _MIN_DRAG_DISTANCE: 2,
 _NODE_SIZE_BASE: 25,
 _NODE_BUTTON_WIDTH: 40,
 _EDGE_BUTTON_INNER: 2,
 _EDGE_BUTTON_OUTER: 40,
 _CLICKMODE_ADDNODE : 1,
 _CLICKMODE_STARTEDGE : 2,
 _CLICKMODE_ENDEDGE : 3,
 _IMAGE_MAX_KB : 500,
 _NODE_SIZE_STEP: Math.LN2/4,
+_MINIMAP_WIDTH: 160,
+_MINIMAP_HEIGHT: 120,
 _USER_PLACEHOLDER : {
 color: "#000000",
 title: "(unknown user)",
 get: function(attr) {
 return this[attr] || false;
 _centerYIn = Math.sin(_centerRads) * _inR,
 _centerYOut = Math.sin(_centerRads) * _outR,
 _textX = Math.cos(_centerRads) * (_outR + 3),
 _textY = Math.sin(_centerRads) * (_outR + 3),
 _segments = [];
+	_repr.renderer.buttons_layer.activate();
 var _path = new paper.Path();
 _path.add([_startXIn, _startYIn]);
 _path.arcTo([_centerXIn, _centerYIn], [_endXIn, _endYIn]);
 _path.lineTo([_endXOut,  _endYOut]);
 _path.arcTo([_centerXOut, _centerYOut], [_startXOut, _startYOut]);
 this.link_button = new Rkns.Renderer.NodeLinkButton(this.renderer, null);
 this.link_button.node_representation = this;
 }
 this.last_circle_radius = 1;
 this.title.paragraphStyle.justification = 'center';
+this.renderer.minimap.node_layer.activate();
+this.minimap_circle = new paper.Path.Circle([0, 0], 1);
+this.renderer.minimap.node_group.addChild(this.minimap_circle);
 }
 Rkns.Renderer.Node.prototype.redraw = function() {
+var _model_coords = new paper.Point(this.model.get("position")),
+	_baseRadius = Rkns.Renderer._NODE_SIZE_BASE * Math.exp((this.model.get("size") || 0) * Rkns.Renderer._NODE_SIZE_STEP);
 if (!this.paper_coords) {
-var _model_coords = new paper.Point(this.model.get("position"));
 this.paper_coords = this.renderer.toPaperCoords(_model_coords);
 }
-this.circle_radius = Rkns.Renderer._NODE_SIZE_BASE * Math.exp((this.model.get("size") || 0) * Rkns.Renderer._NODE_SIZE_STEP) * this.renderer.scale;
+this.circle_radius = _baseRadius * this.renderer.scale;
 if (this.last_circle_radius !== this.circle_radius) {
 	if (!this.renderer.renkan.read_only) {
 	    	this.edit_button.setSectorSize();
 	    	this.remove_button.setSectorSize();
 	    	this.link_button.setSectorSize();
 }
 this.last_circle_radius = this.circle_radius;
 this.title.content = this.model.get("title") || this.renderer.renkan.translate("(untitled)");
 this.title.position = this.paper_coords.add([0, this.circle_radius + 1.5 *Rkns.Renderer._NODE_FONT_SIZE]);
-this.circle.strokeColor = this.model.get("color") || (this.model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color");
+var _color = this.model.get("color") || (this.model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color");
+this.circle.strokeColor = _color;
 this.edit_button.moveTo(this.paper_coords);
 this.remove_button.moveTo(this.paper_coords);
 this.link_button.moveTo(this.paper_coords);
 var _img = this.model.get("image");
 if (_img && _img !== this.img) {
 this.img = _img;
 if (this.node_image && !this.img) {
 this.node_image.remove();
 delete this.node_image;
 }
+this.minimap_circle.fillColor = _color;
+var minipos = this.renderer.toMinimapCoords(_model_coords),
+	miniradius = this.renderer.minimap.scale * _baseRadius,
+	minisize = new paper.Size([miniradius, miniradius]);
+this.minimap_circle.fitBounds(minipos.subtract(minisize), minisize.multiply(2));
 Rkns._.each(this.project.get("edges").filter(function (ed) { return ((ed.to === this.model) || (ed.from === this.model));}), function(edge, index, list){
 var repr = this.renderer.getRepresentationByModel(edge);
 	if(repr != null && typeof repr.from_representation.paper_coords !== "undefined" && typeof repr.to_representation.paper_coords !== "undefined") {
 		repr.redraw();
 }
 });
 if (this.renderer.renkan.read_only) {
 this.openEditor();
 }
+this.minimap_circle.fillColor = "#ff00fc";
 }
 Rkns.Renderer.Node.prototype.unselect = function(_newTarget) {
 if (!_newTarget || _newTarget.node_representation !== this) {
 this.edit_button.hide();
 this.remove_button.hide();
 this.link_button.hide();
 this.circle.strokeWidth = 2;
 Rkns.$('.Rk-Bin-Item').removeClass("selected");
+	this.minimap_circle.fillColor = this.circle.strokeColor;
 }
 }
 Rkns.Renderer.Node.prototype.highlight = function() {
 this.circle.fillColor = "#ffff80";
 this.edit_button.destroy();
 this.remove_button.destroy();
 this.link_button.destroy();
 this.circle.remove();
 this.title.remove();
+this.minimap_circle.remove();
 if (this.node_image) {
 this.node_image.remove();
 }
 }
 /* */
 Rkns.Renderer.NodeEditButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
 Rkns.Renderer.NodeEditButton.prototype._init = function() {
-this.renderer.buttons_layer.activate();
 this.type = "Node-edit-button";
 this.lastSectorInner = 0;
 }
 Rkns.Renderer.NodeEditButton.prototype.setSectorSize = function() {
 /* */
 Rkns.Renderer.NodeRemoveButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
 Rkns.Renderer.NodeRemoveButton.prototype._init = function() {
-this.renderer.buttons_layer.activate();
 this.type = "Node-remove-button";
 this.lastSectorInner = 0;
 }
 Rkns.Renderer.NodeRemoveButton.prototype.setSectorSize = function() {
 /* */
 Rkns.Renderer.NodeLinkButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
 Rkns.Renderer.NodeLinkButton.prototype._init = function() {
-this.renderer.buttons_layer.activate();
 this.type = "Node-link-button";
 this.lastSectorInner = 0;
 }
 Rkns.Renderer.NodeLinkButton.prototype.setSectorSize = function() {
 /* */
 Rkns.Renderer.EdgeEditButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
 Rkns.Renderer.EdgeEditButton.prototype._init = function() {
-this.renderer.buttons_layer.activate();
 this.type = "Edge-edit-button";
 this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._EDGE_BUTTON_INNER, Rkns.Renderer._EDGE_BUTTON_OUTER, - 90, 90, 1, this.renderer.renkan.static_url+'img/edit.png', this.renderer.renkan.translate("Edit"));
 }
 Rkns.Renderer.EdgeEditButton.prototype.moveTo = function(_pos) {
 /* */
 Rkns.Renderer.EdgeRemoveButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
 Rkns.Renderer.EdgeRemoveButton.prototype._init = function() {
-this.renderer.buttons_layer.activate();
 this.type = "Edge-remove-button";
 this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._EDGE_BUTTON_INNER, Rkns.Renderer._EDGE_BUTTON_OUTER, - 270, -90, 1, this.renderer.renkan.static_url+'img/remove.png', this.renderer.renkan.translate("Remove"));
 }
 Rkns.Renderer.EdgeRemoveButton.prototype.moveTo = function(_pos) {
 this.sector.moveTo(_pos);
 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();
+this.minimap = {
+	background_layer: new paper.Layer(),
+	node_layer: new paper.Layer(),
+	node_group: new paper.Group(),
+	size: new paper.Size( Rkns.Renderer._MINIMAP_WIDTH, Rkns.Renderer._MINIMAP_HEIGHT )
+}
+this.minimap.background_layer.activate();
+this.minimap.topleft = paper.view.bounds.bottomRight.subtract(this.minimap.size);
+this.minimap.rectangle = new paper.Path.Rectangle(this.minimap.topleft.subtract([2,2]), this.minimap.size.add([4,4]));
+this.minimap.rectangle.fillColor = '#ffffff';
+this.minimap.rectangle.strokeColor = '#cccccc';
+this.minimap.rectangle.strokeWidth = 4;
+this.minimap.offset = new paper.Point(this.minimap.size.divide(2));
+this.minimap.scale = .25;
+this.node_layer.activate();
+this.minimap.cliprectangle = new paper.Path.Rectangle(this.minimap.topleft, this.minimap.size);
+this.minimap.node_group.addChild(this.minimap.cliprectangle);
+this.minimap.node_group.clipped = true;
+this.minimap.miniframe = new paper.Path.Rectangle(this.minimap.topleft, this.minimap.size);
+this.minimap.node_group.addChild(this.minimap.miniframe);
+this.minimap.miniframe.fillColor = '#f0f0ff';
+this.minimap.miniframe.strokeColor = '#8080ff';
+this.minimap.miniframe.strokeWidth = 2;
 this.bundles = [];
 this.click_mode = false;
 var _tool = new paper.Tool(),
 _this = this;
 _tool.minDistance = Rkns.Renderer._MIN_DRAG_DISTANCE;
 	_event.preventDefault();
 })
 this.canvas_$.on("drop", function(_event) {
 	_event.stopPropagation();
 	_event.preventDefault();
+	if (_this.renkan.read_only) {
+		return;
+	}
 	var res = {}
 	Rkns._(_event.originalEvent.dataTransfer.types).each(function(t) {
 		return res[t] = _event.originalEvent.dataTransfer.getData(t);
 	});
 	var newNode = {};
+	if (res["text/x-iri-source-uri"]) {
+		newNode.uri = res["text/x-iri-source-uri"];
+	}
 	if (res["text/plain"]) {
 		newNode.description = res["text/plain"].replace(/[\s\n]+/gm,' ').trim();
 	}
 	if (res["text/html"]) {
 		var snippet = Rkns.$('<div>').html(res["text/html"]);
 		newNode.image = snippet.find("img").attr("src") || '';
-		newNode.uri = snippet.find("a").attr("href");
+		newNode.uri = snippet.find("a").attr("href") || newNode.uri;
 		newNode.title = snippet.find("[title]").attr("title");
 	}
 	if (res["text/uri-list"]) {
 		newNode.uri = res["text/uri-list"];
 	}
-	if (res["text/x-moz-url"]) {
+	if (res["text/x-moz-url"] && !newNode.title) {
 		newNode.title = (res["text/x-moz-url"].split("\n")[1] || "").trim();
 		if (newNode.title === newNode.uri) {
-			newNode.title = "";
+			newNode.title = false;
 		}
+	}
+	if (res["text/x-iri-source-title"] && !newNode.title) {
+		newNode.title = res["text/x-iri-source-title"];
 	}
 	var fields = ["title", "description", "uri", "image"];
 	for (var i = 0; i < fields.length; i++) {
 		var f = fields[i];
 		if (res["text/x-iri-" + f]) {
 if (_this.click_mode === Rkns.Renderer._CLICKMODE_ADDNODE) {
 _this.click_mode = false;
 _this.notif_$.hide();
 } else {
 _this.click_mode = Rkns.Renderer._CLICKMODE_ADDNODE;
-_this.notif_$.html(_renkan.translate("Click on the background canvas to add a node")).fadeIn();
+_this.notif_$.text(_renkan.translate("Click on the background canvas to add a node")).fadeIn();
 }
 });
 this.$.find(".Rk-AddEdge-Button").click(function() {
 if (_this.click_mode === Rkns.Renderer._CLICKMODE_STARTEDGE || _this.click_mode === Rkns.Renderer._CLICKMODE_ENDEDGE) {
 _this.click_mode = false;
 _this.notif_$.hide();
 } else {
 _this.click_mode = Rkns.Renderer._CLICKMODE_STARTEDGE;
-_this.notif_$.html(_renkan.translate("Click on a first node to start the edge")).fadeIn();
+_this.notif_$.text(_renkan.translate("Click on a first node to start the edge")).fadeIn();
 }
+});
+this.$.find(".Rk-Bookmarklet-Button").click(function(){
+	_this.notif_$
+		.text(_renkan.translate("Drag this bookmarklet to your bookmark bar. When on a third-party website, click it to enable drag-and-drop from the website to Renkan."))
+		.fadeIn()
+		.delay(5000)
+		.fadeOut();
+		return false;
 });
 this.$.find(".Rk-TopBar-Button").mouseover(function() {
 Rkns.$(this).find(".Rk-TopBar-Tooltip").show();
 }).mouseout(function() {
 Rkns.$(this).find(".Rk-TopBar-Tooltip").hide();
 });
 paper.view.onResize = function(_event) {
 _this.offset = _this.offset.add(_event.delta.divide(2));
 _this.resetCoords();
+_this.minimap.topleft = paper.view.bounds.bottomRight.subtract(_this.minimap.size)
+_this.minimap.rectangle.fitBounds(_this.minimap.topleft.subtract([2,2]), _this.minimap.size.add([4,4]));
+_this.minimap.cliprectangle.fitBounds(_this.minimap.topleft, _this.minimap.size);
 _this.redraw();
 }
 var _thRedraw = Rkns._.throttle(function() {
 _this.redraw();
 el.text(_title);
 }
 });
 this.redraw();
+window.setInterval(function() {
+	_this.rescaleMinimap()
+}, 2000);
 }
 Rkns.Renderer.Scene.prototype.template = Rkns._.template(
 '<div class="Rk-TopBar"><% if (read_only) { %><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")%>" /><% } %>'
 + '<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"><%-translate("Full Screen")%></div></div></div>'
 + '<% if (!read_only) { %>'
 + '<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"><%-translate("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"><%-translate("Add Edge")%></div></div></div>'
 + '<div class="Rk-TopBar-Separator"></div><div class="Rk-TopBar-Button Rk-Save-Button"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Tip"></div><div class="Rk-TopBar-Tooltip-Contents"><%-translate("Archive Project")%></div></div></div>'
++ '<div class="Rk-TopBar-Separator"></div><a class="Rk-TopBar-Button Rk-Bookmarklet-Button" href="javascript:(function(){a=document;'
++ 'b=function(c){d=a.createElement(\'script\');d.type=\'text/javascript\';d.src=c;a.getElementsByTagName(\'head\')[0].appendChild(d);};'
++ 'b(\'<%- bookmarklet_url %>\');})();"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Tip"></div><div class="Rk-TopBar-Tooltip-Contents">'
++ '<%-translate("Renkan \'Drag and Add\' bookmarklet")%></div></div></a>'
 + '<div class="Rk-TopBar-Separator"></div></div>'
 + '<% } %>'
 + '<canvas class="Rk-Canvas" resize></canvas><div class="Rk-Editor"><div class="Rk-Notifications"></div>'
 + '<div class="Rk-ZoomButtons"><div class="Rk-ZoomIn" title="<%-translate("Zoom In")%>"></div><div class="Rk-ZoomOut" title="<%-translate("Zoom Out")%>"></div></div>'
 + '</div>'
 Rkns.Renderer.Scene.prototype.setScale = function(_newScale) {
 this.scale = _newScale;
 this.resetCoords();
 this.redraw();
 }
-/*
-Rkns.Renderer.Scene.prototype.autoScale = function() {
+Rkns.Renderer.Scene.prototype.redrawMiniframe = function() {
+	var topleft = this.toMinimapCoords(this.toModelCoords(new paper.Point([0,0]))),
+		bottomright = this.toMinimapCoords(this.toModelCoords(paper.view.bounds.bottomRight));
+	this.minimap.miniframe.fitBounds(topleft, bottomright);
+}
+Rkns.Renderer.Scene.prototype.rescaleMinimap = function() {
 var nodes = this.renkan.project.get("nodes")
 if (nodes.length > 1) {
 var _xx = nodes.map(function(_node) { return _node.get("position").x }),
 _yy = nodes.map(function(_node) { return _node.get("position").y }),
 _minx = Math.min.apply(Math, _xx),
 _miny = Math.min.apply(Math, _yy),
 _maxx = Math.max.apply(Math, _xx),
 _maxy = Math.max.apply(Math, _yy);
-var _scale = Math.min((paper.view.size.width - 2 * Rkns.Renderer._MARGIN_X) / (_maxx - _minx), (paper.view.size.height - 2 * Rkns.Renderer._MARGIN_Y) / (_maxy - _miny));
+var _scale = Math.min(this.scale * .8 * Rkns.Renderer._MINIMAP_WIDTH / paper.view.bounds.width, this.scale * .8 * Rkns.Renderer._MINIMAP_HEIGHT / paper.view.bounds.height, (Rkns.Renderer._MINIMAP_WIDTH - 2 * Rkns.Renderer._MINIMAP_MARGIN_X) / (_maxx - _minx), (Rkns.Renderer._MINIMAP_HEIGHT - 2 * Rkns.Renderer._MINIMAP_MARGIN_Y) / (_maxy - _miny));
-this.offset = paper.view.center.subtract(new paper.Point([(_maxx + _minx) / 2, (_maxy + _miny) / 2]).multiply(_scale));
+this.minimap.offset = this.minimap.size.divide(2).subtract(new paper.Point([(_maxx + _minx) / 2, (_maxy + _miny) / 2]).multiply(_scale));
-this.setScale(_scale);
+this.minimap.scale = _scale;
 }
 if (nodes.length === 1) {
-this.offset = paper.view.center.subtract(new paper.Point([nodes.at(0).get("position").x, nodes.at(0).get("position").y]));
+this.minimap.offset = this.minimap.size.divide(2).subtract(new paper.Point([nodes.at(0).get("position").x, nodes.at(0).get("position").y]));
-this.setScale(1);
+this.minimap.scale = .25;
 }
-}
+this.redraw();
-*/
+}
 Rkns.Renderer.Scene.prototype.resetCoords = function(_point) {
 _(this.representations).each(function(r) {
 r.resetCoords();
 });
 }
 Rkns.Renderer.Scene.prototype.toPaperCoords = function(_point) {
 return _point.multiply(this.scale).add(this.offset);
 }
+Rkns.Renderer.Scene.prototype.toMinimapCoords = function(_point) {
+return _point.multiply(this.minimap.scale).add(this.minimap.offset).add(this.minimap.topleft);
+}
 Rkns.Renderer.Scene.prototype.toModelCoords = function(_point) {
 return _point.subtract(this.offset).divide(this.scale);
 }
 Rkns.Renderer.Scene.prototype.redraw = function() {
 Rkns._(this.representations).each(function(_representation) {
 _representation.redraw();
 });
+this.redrawMiniframe();
 paper.view.draw();
 }
 Rkns.Renderer.Scene.prototype.addTempEdge = function(_from, _point) {
 var _tmpEdge = this.addRepresentation("TempEdge",null);

renkan