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 163	fca0475da9a7
parent 161	c7a503c80ef4
child 169	a60a450b8f3b

equal deleted inserted replaced

-:1b7289414d3c
+:fca0475da9a7
 var _height = _selector.outerHeight() + 2* _options.tooltip_padding,
 _isLeft = (_coords.x < paper.view.center.x ? 1 : -1),
 _left = _coords.x + _isLeft * ( _xmargin + _options.tooltip_arrow_length ),
 _right = _coords.x + _isLeft * ( _xmargin + _options.tooltip_arrow_length + _options.tooltip_width ),
 _top = _coords.y - _height / 2;
+if (_top + _height > (paper.view.size.height - _options.tooltip_margin)) {
+_top = Math.max( paper.view.size.height - _options.tooltip_margin, _coords.y + _options.tooltip_arrow_width / 2 ) - _height;
+}
 if (_top < _options.tooltip_margin) {
 _top = Math.min( _options.tooltip_margin, _coords.y - _options.tooltip_arrow_width / 2 );
 }
 var _bottom = _top + _height;
-if (_bottom > (paper.view.size.height - _options.tooltip_margin)) {
-_bottom = Math.max( paper.view.size.height - _options.tooltip_margin, _coords.y + _options.tooltip_arrow_width / 2 );
-_top = _bottom - _height;
-}
 _path.segments[0].point
 = _path.segments[7].point
 = _coords.add([_isLeft * _xmargin, 0]);
 _path.segments[1].point.x
 = _path.segments[2].point.x
 _renderer.removeRepresentation(_this);
 _(function() {
 _renderer.redraw()
 }).defer();
 }
+this._selectBinding = function() {
+_this.select();
+}
+this._unselectBinding = function() {
+_this.unselect();
+}
 this.model.on("change", this._changeBinding );
 this.model.on("remove", this._removeBinding );
+this.model.on("select", this._selectBinding );
+this.model.on("unselect", this._unselectBinding );
 }
 }
 }
 Rkns.Renderer._BaseRepresentation.prototype.super = function(_func) {
 Rkns.Renderer._BaseRepresentation.prototype.show = function() {}
 Rkns.Renderer._BaseRepresentation.prototype.hide = function() {}
-Rkns.Renderer._BaseRepresentation.prototype.select = function() {}
+Rkns.Renderer._BaseRepresentation.prototype.select = function() {
+if (this.model) {
-Rkns.Renderer._BaseRepresentation.prototype.unselect = function() {}
+this.model.trigger("selected");
+}
+}
+Rkns.Renderer._BaseRepresentation.prototype.unselect = function() {
+if (this.model) {
+this.model.trigger("unselected");
+}
+}
 Rkns.Renderer._BaseRepresentation.prototype.highlight = function() {}
 Rkns.Renderer._BaseRepresentation.prototype.unhighlight = function() {}
 Rkns.Renderer._BaseRepresentation.prototype.mousedown = function() {}
-Rkns.Renderer._BaseRepresentation.prototype.mouseup = function() {}
+Rkns.Renderer._BaseRepresentation.prototype.mouseup = function() {
+if (this.model) {
+this.model.trigger("clicked");
+}
+}
 Rkns.Renderer._BaseRepresentation.prototype.destroy = function() {
 if (this.model) {
 this.model.off("change", this._changeBinding );
 this.model.off("remove", this._removeBinding );
+this.model.off("select", this._selectBinding );
+this.model.off("unselect", this._unselectBinding );
 }
 }
 /* */
 this.last_circle_radius = this.circle_radius;
 var old_act_btn = this.active_buttons;
 if (this.model.get("delete_scheduled")) {
-var opacity = .33;
+var opacity = .5;
 this.active_buttons = this.pending_delete_buttons;
+this.circle.dashArray = [2,2];
 } else {
 var opacity = 1;
 this.active_buttons = this.normal_buttons;
-}
+this.circle.dashArray = null;
+}
-if (this.selected && this.renderer.isEditable() && old_act_btn !== this.active_buttons) {
-old_act_btn.forEach(function(b) {
+if (this.selected && this.renderer.isEditable()) {
-b.hide();
+if (old_act_btn !== this.active_buttons) {
-});
+old_act_btn.forEach(function(b) {
+b.hide();
+});
+}
 this.active_buttons.forEach(function(b) {
 b.show();
 });
 }
 if (this.renderer.minimap) {
 this.minimap_circle.strokeWidth = this.options.minimap_highlight_weight;
 this.minimap_circle.strokeColor = this.options.minimap_highlight_color;
 }
+this.super("select");
 }
 Rkns.Renderer.Node.prototype.unselect = function(_newTarget) {
 if (!_newTarget || _newTarget.source_representation !== this) {
 this.selected = false;
 this.circle.strokeWidth = this.options.node_stroke_width;
 Rkns.$('.Rk-Bin-Item').removeClass("selected");
 if (this.renderer.minimap) {
 this.minimap_circle.strokeColor = undefined;
 }
+this.super("unselect");
 }
 }
 Rkns.Renderer.Node.prototype.highlight = function() {
 if (this.highlighted) {
 this.saveCoords();
 } else {
 if (!_isTouch && !this.model.get("delete_scheduled")) {
 this.openEditor();
 }
+this.model.trigger("clicked");
 }
 this.renderer.click_target = null;
 this.renderer.is_dragging = false;
 this.is_dragging = false;
 }
 _a = _v.angle,
 _textdelta = _ortho.multiply(this.options.edge_label_distance),
 _handle = _v.divide(3),
 _color = this.model.get("color") || this.model.get("color") || (this.model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER(this.renkan)).get("color");
-var opacity = (this.model.get("delete_scheduled") || this.from_representation.model.get("delete_scheduled") || this.to_representation.model.get("delete_scheduled")) ? .33 : 1;
+if (this.model.get("delete_scheduled") || this.from_representation.model.get("delete_scheduled") || this.to_representation.model.get("delete_scheduled")) {
+var opacity = .5;
+this.line.dashArray = [2, 2];
+} else {
+var opacity = 1;
+this.line.dashArray = null;
+}
 var old_act_btn = this.active_buttons;
 this.active_buttons = this.model.get("delete_scheduled") ? this.pending_delete_buttons : this.normal_buttons;
 });
 }
 if (!this.options.editor_mode) {
 this.openEditor();
 }
+this.super("select");
 }
 Rkns.Renderer.Edge.prototype.unselect = function(_newTarget) {
 if (!_newTarget || _newTarget.source_representation !== this) {
 this.selected = false;
 this.all_buttons.forEach(function(b) {
 b.hide();
 });
 }
 this.line.strokeWidth = this.options.edge_stroke_width;
+this.super("unselect");
 }
 }
 Rkns.Renderer.Edge.prototype.mousedown = function(_event, _isTouch) {
 if (_isTouch) {
 this.to_representation.is_dragging = false;
 } else {
 if (!_isTouch) {
 this.openEditor();
 }
+this.model.trigger("clicked");
 }
 this.renderer.click_target = null;
 this.renderer.is_dragging = false;
 }
 /* */
 Rkns.Renderer._BaseEditor = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
+Rkns.Renderer._BaseEditor.prototype._init = function() {
+this.renderer.buttons_layer.activate();
+this.type = "editor";
+this.editor_block = new paper.Path();
+var _pts = Rkns._(Rkns._.range(8)).map(function() {return [0,0]});
+this.editor_block.add.apply(this.editor_block, _pts);
+this.editor_block.strokeWidth = this.options.tooltip_border_width;
+this.editor_block.strokeColor = this.options.tooltip_border_color;
+this.editor_block.opacity = .8;
+this.editor_$ = Rkns.$('<div>')
+.appendTo(this.renderer.editor_$)
+.css({
+position: "absolute",
+opacity: .8
+})
+.hide();
+}
 Rkns.Renderer._BaseEditor.prototype.destroy = function() {
 this.editor_block.remove();
-this.editor_$.detach();
+this.editor_$.remove();
 }
 /* */
 Rkns.Renderer.NodeEditor = Rkns.Utils.inherit(Rkns.Renderer._BaseEditor);
 }
 /* */
 Rkns.Renderer.EdgeEditor = Rkns.Utils.inherit(Rkns.Renderer._BaseEditor);
-Rkns.Renderer.EdgeEditor.prototype._init = function() {
-this.renderer.buttons_layer.activate();
-this.type = "editor";
-this.editor_block = new paper.Path();
-var _pts = Rkns._(Rkns._.range(8)).map(function() {return [0,0]});
-this.editor_block.add.apply(this.editor_block, _pts);
-this.editor_block.strokeWidth = this.options.tooltip_border_width;
-this.editor_block.strokeColor = this.options.tooltip_border_color;
-this.editor_block.opacity = .8;
-this.editor_$ = Rkns.$('<div>')
-.appendTo(this.renderer.editor_$)
-.css({
-position: "absolute",
-opacity: .8
-})
-.hide();
-}
 Rkns.Renderer.EdgeEditor.prototype.template = Rkns._.template(
 '<h2><span class="Rk-CloseX">&times;</span><%-renkan.translate("Edit Edge")%></span></h2>'
 + '<p><label><%-renkan.translate("Title:")%></label><input class="Rk-Edit-Title" type="text" value="<%-edge.title%>"/></p>'
 + '<p><label><%-renkan.translate("URI:")%></label><input class="Rk-Edit-URI" type="text" value="<%-edge.uri%>"/><a class="Rk-Edit-Goto" href="<%-edge.uri%>" target="_blank"></a></p>'
 Rkns.Renderer.EdgeEditor.prototype.redraw = function() {
 var _coords = this.source_representation.paper_coords;
 Rkns.Renderer.drawEditBox(this.options, _coords, this.editor_block, 5, this.editor_$);
 this.editor_$.show();
 paper.view.draw();
-}
-/* */
-Rkns.Renderer._BaseEditor.prototype._init = function() {
-this.renderer.buttons_layer.activate();
-this.type = "editor";
-this.editor_block = new paper.Path();
-var _pts = Rkns._(Rkns._.range(8)).map(function() {return [0,0]});
-this.editor_block.add.apply(this.editor_block, _pts);
-this.editor_block.strokeWidth = this.options.tooltip_border_width;
-this.editor_block.strokeColor = this.options.tooltip_border_color;
-this.editor_block.opacity = .8;
-this.editor_$ = Rkns.$('<div>')
-.appendTo(this.renderer.editor_$)
-.css({
-position: "absolute",
-opacity: .8
-})
-.hide();
 }
 /* */
 Rkns.Renderer._NodeButton = Rkns.Utils.inherit(Rkns.Renderer._BaseButton);
 el.text(_title);
 }
 });
 if (_renkan.options.size_bug_fix) {
+var _delay = (
+typeof _renkan.options.size_bug_fix === "number"
+? _renkan.options.size_bug_fix
+: 500
+);
 window.setTimeout(
 function() {
-var w = _this.$.width(),
+_this.fixSize(true);
-h = _this.$.height();
-if (_renkan.options.show_top_bar) {
-h -= _this.$.find(".Rk-TopBar").height();
-}
-_this.canvas_$.attr({
-width: w,
-height: h
-});
-paper.view.viewSize = new paper.Size([w, h]);
-_this.autoScale();
 },
-500
+_delay
 );
+}
+if (_renkan.options.force_resize) {
+$(window).resize(function() {
+_this.fixSize(false);
+});
 }
 this.redraw();
 window.setInterval(function() {
 + '<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>'
 );
+Rkns.Renderer.Scene.prototype.fixSize = function(_autoscale) {
+var w = this.$.width(),
+h = this.$.height();
+if (this.renkan.options.show_top_bar) {
+h -= this.$.find(".Rk-TopBar").height();
+}
+this.canvas_$.attr({
+width: w,
+height: h
+});
+paper.view.viewSize = new paper.Size([w, h]);
+if (_autoscale) {
+this.autoScale();
+}
+}
 Rkns.Renderer.Scene.prototype.drawSector = function(_repr, _inR, _outR, _startAngle, _endAngle, _padding, _imgname, _caption) {
 var _options = this.renkan.options,
 _startRads = _startAngle * Math.PI / 180,
 _endRads = _endAngle * Math.PI / 180,

renkan