#726 adds show-type command for type info at cursor (#970)

Author: dylanscott

dist/main/atom/commands/commands.js

@@ -11,6 +11,7 @@ var renameView = require("../views/renameView");
 var contextView = require("../views/contextView");
 var fileSymbolsView = require("../views/fileSymbolsView");
 var projectSymbolsView = require("../views/projectSymbolsView");
+var typeOverlayView_1 = require("../views/typeOverlayView");
 var gotoHistory = require("../gotoHistory");
 var utils = require("../../lang/utils");
 var mainPanelView_1 = require("../views/mainPanelView");
@@ -244,6 +245,35 @@ function registerCommands() {
             });
         }
     });
+    atom.commands.add('atom-workspace', 'typescript:show-type', function (e) {
+        var editor = atom.workspace.getActiveTextEditor();
+        var editorView = atom.views.getView(editor);
+        var cursor = editor.getLastCursor();
+        var position = atomUtils.getEditorPositionForBufferPosition(editor, cursor.getBufferPosition());
+        var filePath = editor.getPath();
+        parent.quickInfo({ filePath: filePath, position: position }).then(function (resp) {
+            if (resp.valid) {
+                var decoration = editor.decorateMarker(cursor.getMarker(), {
+                    type: 'overlay',
+                    item: typeOverlayView_1.create(resp.name, resp.comment)
+                });
+                var onKeydown = function (e) {
+                    if (e.keyCode == 27) {
+                        destroyTypeOverlay();
+                    }
+                };
+                var destroyTypeOverlay = function () {
+                    decoration.destroy();
+                    cursorListener.dispose();
+                    editorView.removeEventListener('blur', destroyTypeOverlay);
+                    editorView.removeEventListener('keydown', onKeydown);
+                };
+                var cursorListener = editor.onDidChangeCursorPosition(destroyTypeOverlay);
+                editorView.addEventListener('blur', destroyTypeOverlay);
+                editorView.addEventListener('keydown', onKeydown);
+            }
+        });
+    });
     atom.commands.add('atom-workspace', 'typescript:go-to-next', function (e) {
         gotoHistory.gotoNext();
     });

dist/main/atom/views/typeOverlayView.js

@@ -0,0 +1,13 @@
+"use strict";
+var escapeHtml = require('escape-html');
+function create(type, comment) {
+    var overlayHTML = "\n    <strong>" + escapeHtml(type) + "</strong>\n  ";
+    if (comment) {
+        overlayHTML += "\n      <br/>\n      <div class='comment'>\n        " + escapeHtml(comment).replace(/(?:\r\n|\r|\n)/g, '<br/>') + "\n      </div>\n    ";
+    }
+    var overlay = document.createElement('div');
+    overlay.className = 'atomts-show-type-view';
+    overlay.innerHTML = overlayHTML;
+    return overlay;
+}
+exports.create = create;

lib/main/atom/commands/commands.ts

@@ -8,6 +8,7 @@ import renameView = require("../views/renameView");
 import contextView = require("../views/contextView");
 import fileSymbolsView = require("../views/fileSymbolsView");
 import projectSymbolsView = require("../views/projectSymbolsView");
+import {create as createTypeOverlay} from "../views/typeOverlayView";
 import gotoHistory = require("../gotoHistory");
 import utils = require("../../lang/utils");
 import {panelView} from "../views/mainPanelView";
@@ -320,6 +321,38 @@ export function registerCommands() {
         }
     });
 
+    atom.commands.add('atom-workspace', 'typescript:show-type', (e) => {
+      var editor = atom.workspace.getActiveTextEditor();
+      var editorView = atom.views.getView(editor);
+      var cursor = editor.getLastCursor()
+      var position = atomUtils.getEditorPositionForBufferPosition(editor, cursor.getBufferPosition());
+      var filePath = editor.getPath();
+      parent.quickInfo({ filePath, position }).then((resp) => {
+        if (resp.valid) {
+          var decoration = editor.decorateMarker(cursor.getMarker(), {
+            type: 'overlay',
+            item: createTypeOverlay(resp.name, resp.comment)
+          });
+
+          var onKeydown = (e) => {
+            if (e.keyCode == 27) { // esc
+              destroyTypeOverlay();
+            }
+          };
+          var destroyTypeOverlay = () => {
+            decoration.destroy();
+            cursorListener.dispose();
+            editorView.removeEventListener('blur', destroyTypeOverlay);
+            editorView.removeEventListener('keydown', onKeydown);
+          };
+
+          var cursorListener = editor.onDidChangeCursorPosition(destroyTypeOverlay);
+          editorView.addEventListener('blur', destroyTypeOverlay);
+          editorView.addEventListener('keydown', onKeydown);
+        }
+      });
+    });
+
     atom.commands.add('atom-workspace', 'typescript:go-to-next', (e) => {
         gotoHistory.gotoNext();
     });

lib/main/atom/views/typeOverlayView.ts

@@ -0,0 +1,20 @@
+import escapeHtml = require('escape-html');
+
+export function create(type, comment) {
+  let overlayHTML = `
+    <strong>${escapeHtml(type)}</strong>
+  `;
+  if (comment) {
+    overlayHTML += `
+      <br/>
+      <div class='comment'>
+        ${escapeHtml(comment).replace(/(?:\r\n|\r|\n)/g, '<br/>')}
+      </div>
+    `;
+  }
+
+  const overlay = document.createElement('div');
+  overlay.className = 'atomts-show-type-view';
+  overlay.innerHTML = overlayHTML;
+  return overlay;
+}

lib/tsconfig.json

@@ -58,6 +58,7 @@
         "./main/atom/views/simpleOverlaySelectionView.ts",
         "./main/atom/views/simpleSelectionView.ts",
         "./main/atom/views/tooltipView.ts",
+        "./main/atom/views/typeOverlayView.ts",
         "./main/atom/views/view.ts",
         "./main/atomts.ts",
         "./main/bin/atbuild.ts",

styles/atomts-show-type-view.less

@@ -0,0 +1,8 @@
+@import 'ui-variables';
+
+.atomts-show-type-view {
+  background-color: @app-background-color;
+  border-radius: 3px;
+  box-shadow: 0 2px 8px 1px rgba(0, 0, 0, 0.3);
+  padding: 0.75em;
+}