Improve display of editor tooltip. Add a vertical scroll if they too tall.
--- a/client/js/main.js Thu Jan 05 16:26:07 2017 +0100
+++ b/client/js/main.js Thu Jan 05 19:34:53 2017 +0100
@@ -550,10 +550,22 @@
},
/* Drawing an edit box with an arrow and positioning the edit box according to the position of the node/edge being edited
* Called by Rkns.Renderer.NodeEditor and Rkns.Renderer.EdgeEditor */
- drawEditBox: function(_options, _coords, _path, _xmargin, _selector) {
+ drawEditBox: function(_options, _coords, _path, _xmargin, _selector, _renkan) {
_selector.css({
width: (_options.tooltip_width - 2 * _options.tooltip_padding)
});
+
+ var rect = _selector[0].getBoundingClientRect();
+ var container_rect = _renkan.$[0].getBoundingClientRect();
+
+ if(rect.bottom > (container_rect.bottom - 2 * _options.tooltip_padding - 10)) {
+ _selector.css({
+ 'overflow-x': 'hidden',
+ 'overflow-y': 'scroll',
+ 'max-height':(container_rect.bottom - 2 * _options.tooltip_padding - 10 - rect.top) + 'px'
+ });
+ }
+
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),
@@ -575,10 +587,12 @@
_path.segments[1].point.y = _coords.y - _options.tooltip_arrow_width / 2;
_path.segments[6].point.y = _coords.y + _options.tooltip_arrow_width / 2;
_path.fillColor = new paper.Color(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;
},
// from http://stackoverflow.com/a/6444043
--- a/client/js/renderer/edgeeditor.js Thu Jan 05 16:26:07 2017 +0100
+++ b/client/js/renderer/edgeeditor.js Thu Jan 05 19:34:53 2017 +0100
@@ -178,7 +178,7 @@
redraw: function() {
if (this.options.popup_editor){
var _coords = this.source_representation.paper_coords;
- Utils.drawEditBox(this.options, _coords, this.editor_block, 5, this.editor_$);
+ Utils.drawEditBox(this.options, _coords, this.editor_block, 5, this.editor_$, this.renderer.renkan);
}
this.editor_$.show();
paper.view.draw();
--- a/client/js/renderer/nodeeditor.js Thu Jan 05 16:26:07 2017 +0100
+++ b/client/js/renderer/nodeeditor.js Thu Jan 05 19:34:53 2017 +0100
@@ -307,7 +307,7 @@
redraw: function() {
if (this.options.popup_editor){
var _coords = this.source_representation.paper_coords;
- Utils.drawEditBox(this.options, _coords, this.editor_block, this.source_representation.circle_radius * 0.75, this.editor_$);
+ Utils.drawEditBox(this.options, _coords, this.editor_block, this.source_representation.circle_radius * 0.75, this.editor_$, this.renderer.renkan);
}
this.editor_$.show();
paper.view.draw();