瀏覽代碼

HUE-4832 [editor] Show tooltip when hovering over context popover tokens

Johan Ahlen 9 年之前
父節點
當前提交
d177852

+ 98 - 64
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -2869,79 +2869,113 @@
         }
       });
 
-      var lastHoveredToken = null;
-      var activeMarker = null;
+      // TODO: Move context menu logic to separate module
+      (function () {
+        var Tooltip = ace.require("ace/tooltip").Tooltip;
+
+        var contextTooltip = new Tooltip(editor.container);
+        var tooltipTimeout = -1;
+        var disableTooltip = false;
+        var lastHoveredToken = null;
+        var activeMarker = null;
+
+        var hideContextTooltip = function () {
+          clearTimeout(tooltipTimeout);
+          contextTooltip.hide();
+        };
 
-      var clearActiveMarker = function () {
-        if (activeMarker !== null) {
-          editor.session.removeMarker(activeMarker);
-          activeMarker = null;
-        }
-      };
+        var clearActiveMarker = function () {
+          hideContextTooltip();
+          if (activeMarker !== null) {
+            editor.session.removeMarker(activeMarker);
+            activeMarker = null;
+          }
+        };
 
-      var markLocation = function (parseLocation) {
-        var range;
-        if (parseLocation.type === 'function') {
-          // Todo: Figure out why functions need an extra char at the end
-          range = new AceRange(parseLocation.location.first_line - 1, parseLocation.location.first_column - 1, parseLocation.location.last_line - 1, parseLocation.location.last_column);
-        } else {
-          range = new AceRange(parseLocation.location.first_line - 1, parseLocation.location.first_column - 1, parseLocation.location.last_line - 1, parseLocation.location.last_column - 1);
-        }
-        activeMarker = editor.session.addMarker(range, 'hue-ace-location');
-        return range;
-      };
+        var markLocation = function (parseLocation) {
+          var range;
+          if (parseLocation.type === 'function') {
+            // Todo: Figure out why functions need an extra char at the end
+            range = new AceRange(parseLocation.location.first_line - 1, parseLocation.location.first_column - 1, parseLocation.location.last_line - 1, parseLocation.location.last_column);
+          } else {
+            range = new AceRange(parseLocation.location.first_line - 1, parseLocation.location.first_column - 1, parseLocation.location.last_line - 1, parseLocation.location.last_column - 1);
+          }
+          activeMarker = editor.session.addMarker(range, 'hue-ace-location');
+          return range;
+        };
 
-      editor.on("mousemove", function (e) {
-        var selectionRange = editor.selection.getRange();
-        if (selectionRange.isEmpty()) {
-          var pointerPosition = editor.renderer.screenToTextCoordinates(e.clientX+5, e.clientY);
-          var token = editor.session.getTokenAt(pointerPosition.row, pointerPosition.column);
-          if (lastHoveredToken !== token) {
-            clearActiveMarker();
-            if (token.parseLocation) {
-              markLocation(token.parseLocation);
+        huePubSub.subscribe('sql.context.popover.shown', function () {
+          hideContextTooltip();
+          disableTooltip = true;
+        });
+
+        huePubSub.subscribe('sql.context.popover.hidden', function () {
+          disableTooltip = false;
+        });
+
+        editor.on("mousemove", function (e) {
+          clearTimeout(tooltipTimeout);
+          var selectionRange = editor.selection.getRange();
+          if (selectionRange.isEmpty()) {
+            var pointerPosition = editor.renderer.screenToTextCoordinates(e.clientX+5, e.clientY);
+            var token = editor.session.getTokenAt(pointerPosition.row, pointerPosition.column);
+            if (token.parseLocation && !disableTooltip) {
+              tooltipTimeout = window.setTimeout(function () {
+                var endCoordinates = editor.renderer.textToScreenCoordinates(pointerPosition.row, token.start);
+                contextTooltip.show(options.contextTooltip, endCoordinates.pageX, endCoordinates.pageY + editor.renderer.lineHeight + 3);
+              }, 500);
+            } else {
+              hideContextTooltip();
+            }
+            if (lastHoveredToken !== token) {
+              clearActiveMarker();
+              if (token.parseLocation) {
+                markLocation(token.parseLocation);
+              }
+              lastHoveredToken = token;
             }
-            lastHoveredToken = token;
           }
-        }
-      });
+        });
 
-      editor.on("input", function (e) {
-        clearActiveMarker();
-        lastHoveredToken = null;
-      });
+        editor.on("input", function (e) {
+          clearActiveMarker();
+          lastHoveredToken = null;
+        });
 
-      editor.container.addEventListener("mouseout", function (e) {
-        clearActiveMarker();
-        lastHoveredToken = null;
-      });
+        editor.container.addEventListener("mouseout", function (e) {
+          clearActiveMarker();
+          clearTimeout(tooltipTimeout);
+          contextTooltip.hide();
+          lastHoveredToken = null;
+        });
 
-      editor.container.addEventListener("contextmenu", function (e) {
-        var selectionRange = editor.selection.getRange();
-        huePubSub.publish('sql.context.popover.hide');
-        if (selectionRange.isEmpty()) {
-          var pointerPosition = editor.renderer.screenToTextCoordinates(e.clientX + 5, e.clientY);
-          var token = editor.session.getTokenAt(pointerPosition.row, pointerPosition.column);
-
-          if (typeof token.parseLocation !== 'undefined') {
-            var range = markLocation(token.parseLocation);
-            var startCoordinates = editor.renderer.textToScreenCoordinates(range.start.row, range.start.column);
-            var endCoordinates = editor.renderer.textToScreenCoordinates(range.end.row, range.end.column);
-            huePubSub.publish('sql.context.popover.show', {
-              data: token.parseLocation,
-              snippet: snippet,
-              source: {
-                left: startCoordinates.pageX - 3,
-                top: startCoordinates.pageY,
-                right: endCoordinates.pageX - 3,
-                bottom: endCoordinates.pageY + editor.renderer.lineHeight
-              }
-            });
-            e.preventDefault();
-            return false;
+        editor.container.addEventListener("contextmenu", function (e) {
+          var selectionRange = editor.selection.getRange();
+          huePubSub.publish('sql.context.popover.hide');
+          if (selectionRange.isEmpty()) {
+            var pointerPosition = editor.renderer.screenToTextCoordinates(e.clientX + 5, e.clientY);
+            var token = editor.session.getTokenAt(pointerPosition.row, pointerPosition.column);
+
+            if (typeof token.parseLocation !== 'undefined') {
+              var range = markLocation(token.parseLocation);
+              var startCoordinates = editor.renderer.textToScreenCoordinates(range.start.row, range.start.column);
+              var endCoordinates = editor.renderer.textToScreenCoordinates(range.end.row, range.end.column);
+              huePubSub.publish('sql.context.popover.show', {
+                data: token.parseLocation,
+                snippet: snippet,
+                source: {
+                  left: startCoordinates.pageX - 3,
+                  top: startCoordinates.pageY,
+                  right: endCoordinates.pageX - 3,
+                  bottom: endCoordinates.pageY + editor.renderer.lineHeight
+                }
+              });
+              e.preventDefault();
+              return false;
+            }
           }
-        }
-      });
+        });
+      }());
 
       editor.previousSize = 0;
 

+ 2 - 0
desktop/core/src/desktop/templates/sql_context_popover.mako

@@ -305,6 +305,7 @@ from metadata.conf import has_navigator
         $('#sqlContextPopover').remove();
         $(document).off('click', hideOnClickOutside);
         huePubSub.publish('sql.context.popover.dispose');
+        huePubSub.publish('sql.context.popover.hidden');
       };
 
       var hideOnClickOutside = function (event) {
@@ -625,6 +626,7 @@ from metadata.conf import has_navigator
         var $sqlContextPopover = $('<div id="sqlContextPopover" data-bind="component: { name: \'sql-context-popover\', params: $data }" />');
         $('body').append($sqlContextPopover);
         ko.applyBindings(details, $sqlContextPopover[0]);
+        huePubSub.publish('sql.context.popover.shown');
         window.setTimeout(function() {
           $(document).on('click', hideOnClickOutside);
         }, 0);

+ 1 - 1
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -1543,7 +1543,7 @@ ${ hueIcons.symbols() }
     <div class="editor span12" data-bind="css: {'single-snippet-editor ace-container-resizable' : $root.editorMode() }, clickForAceFocus: ace">
       <div class="ace-editor" data-bind="css: {'single-snippet-editor ace-editor-resizable' : $root.editorMode(), 'active-editor': inFocus }, attr: { id: id() }, delayedOverflow, aceEditor: {
         snippet: $data,
-        openIt: '${ _ko("Shift + Click for details") }',
+        contextTooltip: '${ _ko("Right-click for details") }',
         expandStar: '${ _ko("Shift + Click to replace with all columns") }',
         onBlur: saveTemporarySnippet,
         highlightedRange: result.statement_range,