Improve display of editor tooltip. Add a vertical scroll if they too tall.
authorymh <ymh.work@gmail.com>
Thu, 05 Jan 2017 19:34:53 +0100
changeset 648 e388117572d8
parent 647 eaaa1efce396
child 649 2b9c120dba55
Improve display of editor tooltip. Add a vertical scroll if they too tall.
client/js/main.js
client/js/renderer/edgeeditor.js
client/js/renderer/nodeeditor.js
--- 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();