Răsfoiți Sursa

HUE-5526 [editor] Skeleton for the custom autocompleter dropdown

Johan Ahlen 9 ani în urmă
părinte
comite
d672171

Fișier diff suprimat deoarece este prea mare
+ 0 - 0
desktop/core/src/desktop/static/desktop/js/ace/ext-language_tools.js


+ 18 - 1
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -3325,11 +3325,28 @@
             editor.completers.push(langTools.snippetCompleter);
             editor.completers.push(langTools.textCompleter);
             editor.completers.push(langTools.keyWordCompleter);
+            editor.completers.push(snippet.autocompleter);
+          } else if (snippet.type() === 'hive' || snippet.type() === 'impala') {
+            editor.completers.push(snippet.autocompleter);
+            editor.useHueAutocompleter = true;
+          } else {
+            editor.completers.push(snippet.autocompleter);
           }
-          editor.completers.push(snippet.autocompleter);
         }
       };
 
+      huePubSub.subscribe('hue.ace.autocompleter.show', function (data) {
+        if ($('.hue-ace-autocompleter').length > 0) {
+          $('.hue-ace-autocompleter').remove();
+        }
+        var $hueAceAutocompleter = $('<div data-bind="component: { name: \'hueAceAutocompleter\', params: $data }">').addClass('hue-ace-autocompleter').css({ top: data.position.top + data.lineHeight + 3 + 'px', left: data.position.left  + 'px' });
+        $('body').append($hueAceAutocompleter);
+        ko.applyBindings({
+          snippet: snippet,
+          editor: editor
+        }, $hueAceAutocompleter[0]);
+      });
+
       var langTools = ace.require("ace/ext/language_tools");
       langTools.textCompleter.setSqlMode(snippet.isSqlDialect());
 

+ 2 - 3
desktop/core/src/desktop/static/desktop/js/sqlAutocompleter3.js

@@ -272,7 +272,7 @@ var SqlAutocompleter3 = (function () {
     self.timeout = options.timeout;
   }
 
-  SqlAutocompleter3.prototype.autocomplete = function (beforeCursor, afterCursor, callback, editor) {
+  SqlAutocompleter3.prototype.autocomplete = function (beforeCursor, afterCursor, editor) {
     var self = this;
     var sourceType = self.snippet.type();
     var parseResult = sql.parseSql(beforeCursor, afterCursor, sourceType, false);
@@ -285,14 +285,13 @@ var SqlAutocompleter3 = (function () {
       editor.showSpinner();
     }
 
-    self.suggestions = new Suggestions({
+    return new Suggestions({
       parseResult: parseResult,
       sourceType: sourceType,
       defaultDatabase: parseResult.useDatabase || self.snippet.database(),
       timeout: self.timeout,
       callback: function () {
         editor.hideSpinner();
-        console.log(self);
       }
     });
   };

+ 12 - 0
desktop/libs/notebook/src/notebook/static/notebook/css/notebook.css

@@ -1158,3 +1158,15 @@ h4.header {
   width: 8px!important;
   margin-left: 10px!important;
 }
+
+.hue-ace-autocompleter {
+  position: absolute;
+  z-index: 100000;
+  width: 500px;
+  height: 250px;
+  border: 1px solid #DDD;
+  border-radius: 3px;
+  display: flex;
+  flex-direction: column;
+  background-color: #FFF;
+}

+ 1 - 0
desktop/libs/notebook/src/notebook/templates/editor.mako

@@ -42,6 +42,7 @@ ${ assist.assistPanel() }
 ${ assist.assistJSModels() }
 ${ configKoComponents.config() }
 ${ notebookKoComponents.downloadSnippetResults() }
+${ notebookKoComponents.hueAceAutocompleter() }
 
 ${ editorComponents.commonJS() }
 </span>

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

@@ -53,6 +53,7 @@ ${ assist.assistJSModels() }
 ${ configKoComponents.config() }
 ${ notebookKoComponents.addSnippetMenu() }
 ${ notebookKoComponents.downloadSnippetResults() }
+${ notebookKoComponents.hueAceAutocompleter() }
 
 ${ editorComponents.commonJS(bindableElement='notebookComponents') }
 

+ 35 - 0
desktop/libs/notebook/src/notebook/templates/notebook_ko_components.mako

@@ -444,3 +444,38 @@ except ImportError, e:
     })();
   </script>
 </%def>
+
+<%def name="hueAceAutocompleter()">
+  <script type="text/html" id="hue-ace-autocompleter">
+    <div style="flex: 1 1 30px; padding: 5px;"><div class="pull-right"><label class="checkbox"><input type="checkbox">${ _('Keywords') }</label></div></div>
+    <div style="flex: 1 1 100%; overflow-y: auto; padding: 0 5px;" data-bind="foreach: activeSuggestions">
+      <div style="clear: both;font: 12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;"><div class="pull-left" data-bind="text: value"></div><div class="pull-right" data-bind="text: meta"></div></div>
+    </div>
+    <!-- /ko -->
+  </script>
+
+  <script type="text/javascript" charset="utf-8">
+    (function () {
+      function HueAceAutocompleter (params, element) {
+        var self = this;
+        var snippet = params.snippet;
+        var editor = params.editor;
+        var autocompleter = new SqlAutocompleter3({ snippet: snippet, timeout: AUTOCOMPLETE_TIMEOUT });
+        self.suggestions = autocompleter.autocomplete(editor.getTextBeforeCursor(), editor.getTextAfterCursor(), editor);
+        self.activeSuggestions = ko.pureComputed(function () {
+          if (self.suggestions.keywords) {
+            return self.suggestions.keywords.suggestions();
+          }
+          return [];
+        });
+      }
+
+      ko.components.register('hueAceAutocompleter', {
+        viewModel: { createViewModel: function (params, componentInfo) {
+          return new HueAceAutocompleter(params, componentInfo.element);
+        }},
+        template: { element: 'hue-ace-autocompleter' }
+      });
+    })();
+  </script>
+</%def>

+ 12 - 0
tools/ace-editor/lib/ace/autocomplete.js

@@ -411,6 +411,18 @@ var Autocomplete = function() {
 Autocomplete.startCommand = {
     name: "startAutocomplete",
     exec: function(editor) {
+        if (editor.useHueAutocompleter) {
+            var renderer = editor.renderer;
+            var lineHeight = renderer.layerConfig.lineHeight;
+            var pos = renderer.$cursorLayer.getPixelPosition(this.base, true);
+            var rect = editor.container.getBoundingClientRect();
+            pos.top += rect.top - renderer.layerConfig.offset;
+            pos.left += rect.left - editor.renderer.scrollLeft;
+            pos.left += renderer.gutterWidth;
+
+            huePubSub.publish('hue.ace.autocompleter.show', { position: pos, lineHeight: lineHeight });
+            return;
+        }
         if (!editor.completer)
             editor.completer = new Autocomplete();
         editor.completer.autoInsert = false;

Unele fișiere nu au fost afișate deoarece prea multe fișiere au fost modificate în acest diff