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 156	83d7a10e1ad7
parent 155	7d5f722d76b2
child 157	cdfc0b1547f3

equal deleted inserted replaced

-:7d5f722d76b2
+:83d7a10e1ad7
 	    this.h_ratio = 1;
 } else {
 	this.circle.opacity = .01;
 	this.h_ratio = 0;
 }
-this.title = new paper.PointText([0,0]);
+this.title = Rkns.$('<div class="Rk-Label">').appendTo(this.renderer.labels_$);
-this.title.characterStyle = {
-font: this.options.node_label_font,
-fontSize: this.options.node_label_font_size,
-fillColor: this.options.node_label_color
-};
 if (this.options.editor_mode) {
 	this.buttons = [
 		new Rkns.Renderer.NodeEditButton(this.renderer, null),
 		new Rkns.Renderer.NodeRemoveButton(this.renderer, null),
 		new Rkns.Renderer.NodeLinkButton(this.renderer, null),
 	}
 } else {
 	this.buttons = [];
 }
 this.last_circle_radius = 1;
-this.title.paragraphStyle.justification = 'center';
+//    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.last_circle_radius = this.circle_radius;
 var _text = this.model.get("title") || this.renkan.translate("(untitled)");
-this.title.content = Rkns.Renderer.Utils.shortenText(_text, this.options.node_label_max_length);
+	_text = Rkns.Renderer.Utils.shortenText(_text, this.options.node_label_max_length);
+	this.title.text(_text);
-this.title.position = this.paper_coords.add([
+	this.title.css({
-	0,
+		left: this.paper_coords.x,
-	this.circle_radius * this.h_ratio + this.options.node_label_font_size + this.options.node_label_distance
+		top: this.paper_coords.y + this.circle_radius * this.h_ratio + this.options.node_label_distance
-	]);
+	})
 var _color = this.model.get("color") || (this.model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER(this.renkan)).get("color");
 this.circle.strokeColor = _color;
 var _pc = this.paper_coords;
 	this.buttons.forEach(function(b) {
 		b.moveTo(_pc);
 	[ 0, 0 ],
 	[ this.options.edge_arrow_length, this.options.edge_arrow_width / 2 ],
 	[ 0, this.options.edge_arrow_width ]
 	);
 this.arrow.__representation = this;
-this.text = new paper.PointText();
+this.text = Rkns.$('<div class="Rk-Label Rk-Edge-Label">').appendTo(this.renderer.labels_$);
-this.text.characterStyle = {
-font: this.options.edge_label_font,
-fontSize: this.options.edge_label_font_size,
-fillColor: this.options.edge_label_color
-};
-this.text.paragraphStyle.justification = 'center';
-this.text_angle = 0;
 this.arrow_angle = 0;
 if (this.options.editor_mode) {
 this.edit_button = new Rkns.Renderer.EdgeEditButton(this.renderer, null);
 this.edit_button.source_representation = this;
 this.remove_button = new Rkns.Renderer.EdgeRemoveButton(this.renderer, null);
 }
 if (_a < -90) {
 _a += 180;
 _textdelta = _textdelta.multiply(-1);
 }
-this.text.rotate(_a - this.text_angle);
 var _text = this.model.get("title");
-this.text.content = Rkns.Renderer.Utils.shortenText(_text, this.options.edge_label_max_length);
+	_text = Rkns.Renderer.Utils.shortenText(_text, this.options.node_label_max_length);
-this.text.position = this.paper_coords.add(_textdelta);
+this.text.text(_text);
+var _textpos = this.paper_coords.add(_textdelta);
+this.text.css({
+	left: _textpos.x,
+	top: _textpos.y,
+	transform: "rotate(" + _a + "deg)",
+	"-moz-transform": "rotate(" + _a + "deg)",
+	"-webkit-transform": "rotate(" + _a + "deg)"
+});
 this.text_angle = _a;
 if (this.options.editor_mode) {
 	    this.edit_button.moveTo(this.paper_coords);
 	    this.remove_button.moveTo(this.paper_coords);
 }
 Rkns.Renderer.NodeRemoveButton = Rkns.Utils.inherit(Rkns.Renderer._NodeButton);
 Rkns.Renderer.NodeRemoveButton.prototype._init = function() {
 this.type = "Node-remove-button";
 this.lastSectorInner = 0;
-this.startAngle = 90;
+this.startAngle = 0;
-this.endAngle = 180;
+this.endAngle = 90;
 this.imageFile = 'img/remove.png';
 this.text = "Remove";
 }
 Rkns.Renderer.NodeRemoveButton.prototype.mouseup = function() {
 Rkns.Renderer.NodeLinkButton = Rkns.Utils.inherit(Rkns.Renderer._NodeButton);
 Rkns.Renderer.NodeLinkButton.prototype._init = function() {
 this.type = "Node-link-button";
 this.lastSectorInner = 0;
-this.startAngle = 0;
+this.startAngle = 90;
-this.endAngle = 90;
+this.endAngle = 180;
 this.imageFile = 'img/link.png';
 this.text = "Link to another node";
 }
 Rkns.Renderer.NodeLinkButton.prototype.mousedown = function(_event, _isTouch) {
 this.$ = Rkns.$(".Rk-Render");
 this.representations = [];
 this.$.html(this.template(_renkan));
 this.onStatusChange();
 this.canvas_$ = this.$.find(".Rk-Canvas");
+this.labels_$ = this.$.find(".Rk-Labels");
 this.editor_$ = this.$.find(".Rk-Editor");
 this.notif_$ = this.$.find(".Rk-Notifications");
 paper.setup(this.canvas_$[0]);
 this.scale = 1;
 this.offset = paper.view.center;
 _originalScale,
 _zooming = false;
 this.canvas_$.on({
 	mousedown: function(_event) {
+		_event.preventDefault();
 		_this.onMouseDown(_event, false);
 	},
 	mousemove: function(_event) {
+		_event.preventDefault();
 	_this.onMouseMove(_event, false);
 	    },
 	    mouseup: function(_event) {
+		_event.preventDefault();
 	        _this.onMouseUp(_event, false);
 	    },
 	    mousewheel: function(_event, _delta) {
+		_event.preventDefault();
 	        if (_allowScroll) {
 	        	_this.onScroll(_event, _delta);
 	        }
 	    },
 	    touchstart: function(_event) {
 	    touchend: function(_event) {
 	    	_event.preventDefault();
 	    	_this.onMouseUp(_event.originalEvent.changedTouches[0], true);
 	    },
 	    dblclick: function(_event) {
+		_event.preventDefault();
 	        _this.onDoubleClick(_event);
 	    },
 	    mouseleave: function(_event) {
+		_event.preventDefault();
 	        _this.onMouseUp(_event, false);
 	        _this.click_target = null;
 	        _this.is_dragging = false;
 	    },
 	    dragover: function(_event) {
 	    	_event.preventDefault();
 	    },
 	    dragenter: function(_event) {
+	    	_event.preventDefault();
 	    	_allowScroll = false;
-	    	_event.preventDefault();
 	    },
 	    dragleave: function(_event) {
+	    	_event.preventDefault();
 	    	_allowScroll = true;
-	    	_event.preventDefault();
 	    },
 	    drop: function(_event) {
 	    	_event.preventDefault();
 	    	_allowScroll = true;
 	    	var res = {};
 + '<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"> </div></div></div>'
 + '<div class="Rk-TopBar-Separator"></div><a class="Rk-TopBar-Button Rk-Bookmarklet-Button" href="#"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Tip"></div><div class="Rk-TopBar-Tooltip-Contents">'
 + '<%-translate("Renkan \'Drag-to-Add\' bookmarklet")%></div></div></a>'
 + '<div class="Rk-TopBar-Separator"></div>'
 + '<% } %></div><% } %>'
-+ '<div class="Rk-Editing-Space<% if (!options.show_top_bar) { %> Rk-Editing-Space-Full<% } %>"><canvas class="Rk-Canvas" resize></canvas><div class="Rk-Editor"><div class="Rk-Notifications"></div>'
++ '<div class="Rk-Editing-Space<% if (!options.show_top_bar) { %> Rk-Editing-Space-Full<% } %>">'
++ '<div class="Rk-Labels"></div><canvas class="Rk-Canvas" resize></canvas><div class="Rk-Editor"><div class="Rk-Notifications"></div>'
 + '<% if (options.show_bins) { %><div class="Rk-Fold-Bins">&laquo;</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></div>'
 );

renkan