Initial Implementation of Autocomplete

lib/src/web_ui/code_input.dart

@@ -4,6 +4,7 @@ import 'dart:async';
 import 'dart:html';
 
 import 'package:cs61a_scheme/cs61a_scheme.dart';
+import 'package:cs61a_scheme/cs61a_scheme_web.dart';
 
 import 'highlight.dart';
 
@@ -14,25 +15,40 @@ const List<SchemeSymbol> noIndentForms = [
   SchemeSymbol("define-macro")
 ];
 
+bool _enableAutocomplete = false;
+
 class CodeInput {
   Element element;
+  //Create an element that contains possible autcomplete options
+  Element _autoBox;
+  Element _wrapperAutoBox;
+  Map<String, Docs> wordToDocs;
   bool _active = true;
   final List<StreamSubscription> _subs = [];
+  String tabComplete = "";
 
   Function(String code) runCode;
   Function(int parens) parenListener;
 
-  CodeInput(Element log, this.runCode, {this.parenListener}) {
+  CodeInput(Element log, this.runCode, Frame env, {this.parenListener}) {
     element = SpanElement()
       ..classes = ['code-input']
       ..contentEditable = 'true';
+    _autoBox = DivElement()
+      ..classes = ["docs"]
+      ..style.visibility = "hidden";
+    _wrapperAutoBox = DivElement()
+      ..classes = ["render"]
+      ..append(_autoBox);
     _subs.add(element.onKeyPress.listen(_onInputKeyPress));
     _subs.add(element.onKeyDown.listen(_keyListener));
     _subs.add(element.onKeyUp.listen(_keyListener));
     log.append(element);
+    log.append(_wrapperAutoBox);
     element.focus();
     parenListener ??= (_) => null;
     parenListener(missingParens);
+    wordToDocs = allDocumentedForms(env);
   }
 
   String get text => element.text;
@@ -49,11 +65,15 @@ class CodeInput {
   void deactivate() {
     _active = false;
     element.contentEditable = 'false';
+    _wrapperAutoBox.remove();
     for (var sub in _subs) {
       sub.cancel();
     }
   }
 
+  void enableAutocomplete() => _enableAutocomplete = true;
+  void disableAutocomplete() => _enableAutocomplete = false;
+
   Future highlight(
       {bool saveCursor = false, int cursor, bool atEnd = false}) async {
     if (saveCursor) {
@@ -101,6 +121,43 @@ class CodeInput {
     parenListener(missingParens);
   }
 
+  /// Determines the operation at the last open parens
+  List _currOp(String inputText, int position, [int fromLast = 1]) {
+    List<String> splitLines = inputText.substring(0, position).split("\n");
+    //The first item indicates the word that was matched, the second item indicates
+    //if that word is the full string(true) or is in progress of being written out(false)
+    bool multipleLines = false;
+    String refLine;
+    int totalMissingCount = 0;
+
+    for (refLine in splitLines.reversed) {
+      totalMissingCount += countParens(refLine) ?? 0;
+      // Find the first line with an open paren but no close paren
+      if (totalMissingCount >= fromLast) break;
+      multipleLines = true;
+    }
+    //if there are not enough open parentheses, return the default output value
+    if (totalMissingCount >= fromLast) {
+      int strIndex = refLine.indexOf("(");
+      while (strIndex != -1 && strIndex < (refLine.length - 1)) {
+        int nextClose = refLine.indexOf(")", strIndex + 1);
+        int nextOpen = refLine.indexOf("(", strIndex + 1);
+        // Find the open paren that corresponds to the missing closed paren
+        if (totalMissingCount > fromLast) {
+          totalMissingCount -= 1;
+        } else if (nextOpen == -1 || nextClose == -1 || nextOpen < nextClose) {
+          //Assuming the word is right after the parens
+          List splitRef =
+              refLine.substring(strIndex + 1).split(RegExp("[ ()]+"));
+          //Determine if op represents the full string
+          return [splitRef[0], splitRef.length > 1 || multipleLines];
+        }
+        strIndex = nextOpen;
+      }
+    }
+    return ["", true];
+  }
+
   /// Determines how much space to indent the next line, based on parens
   int _countSpace(String inputText, int position) {
     List<String> splitLines = inputText.substring(0, position).split("\n");
@@ -145,8 +202,75 @@ class CodeInput {
     return strIndex + 2;
   }
 
+  ///Find the list of words that contain the same prefix as currWord
+  List<String> _wordMatches(String currWord, bool fullWord) {
+    List<String> matchingWords = [];
+    int currLength = currWord.length;
+    for (String schemeWord in wordToDocs.keys) {
+      if (((schemeWord.length > currWord.length) && !fullWord) ||
+          schemeWord.length == currWord.length) {
+        if (schemeWord.substring(0, currLength) == currWord) {
+          matchingWords.add(schemeWord);
+        }
+      }
+    }
+    return matchingWords;
+  }
+
+  ///Finds and displays the possible words that the user may be typing
+  void _autocomplete() {
+    //Find the text to the left of where the typing cursor currently is
+    int cursorPos = findPosition(element, window.getSelection().getRangeAt(0));
+    List<String> inputText =
+        element.text.substring(0, cursorPos).split(RegExp("[(]+"));
+    List<String> matchingWords = [];
+    //Find the last word that was being typed
+    int currLength = 0;
+    List output = _currOp(element.text, cursorPos);
+    List output2 = _currOp(element.text, cursorPos, 2);
+    String findMatch = output[0];
+    bool fullWord = output[1];
+    if (findMatch.isEmpty) {
+      findMatch = output2[0];
+      fullWord = output2[1];
+    }
+    if (findMatch.isNotEmpty && inputText.length > 1) {
+      matchingWords = _wordMatches(findMatch, fullWord);
+      currLength = findMatch.length;
+    }
+    //Clear whatever is currently in the box
+    _autoBox.children = [];
+    _autoBox.classes = ["docs"];
+    if (matchingWords.isEmpty) {
+      //If there are no matching words, hide the autocomplete box
+      tabComplete = "";
+      _autoBox.style.visibility = "hidden";
+    } else if (matchingWords.length == 1) {
+      //If there is only one matching word, display the docs for that word
+      render(wordToDocs[matchingWords.first], _autoBox);
+      _autoBox.style.visibility = "hidden";
+      _autoBox.children.last.style.visibility = "visible";
+      tabComplete = matchingWords.first.substring(currLength);
+    } else {
+      tabComplete = "";
+      //Add each matching word as its own element for formatting purposes
+      for (String match in matchingWords) {
+        _autoBox.append(SpanElement()
+          ..classes = ["autobox-word"]
+          //Bold the matching characters
+          ..innerHtml =
+              "<strong>${match.substring(0, currLength)}</strong>${match.substring(currLength)}");
+      }
+      _autoBox.style.visibility = "visible";
+    }
+    _autoBox.scrollIntoView();
+  }
+
   _keyListener(KeyboardEvent event) async {
     int key = event.keyCode;
+    if (_enableAutocomplete) {
+      _autocomplete();
+    }
     if (key == KeyCode.BACKSPACE) {
       await delay(0);
       parenListener(missingParens);
@@ -155,6 +279,11 @@ class CodeInput {
       await delay(0);
       parenListener(missingParens);
       await highlight(saveCursor: true);
+    } else if (key == KeyCode.TAB) {
+      event.preventDefault();
+      int cursor = findPosition(element, window.getSelection().getRangeAt(0));
+      element.appendText(tabComplete);
+      await highlight(cursor: cursor + tabComplete.length + 1);
     }
   }
 }

lib/src/web_ui/repl.dart

@@ -21,7 +21,6 @@ class Repl {
   int historyIndex = -1;
 
   final String prompt;
-
   Repl(this.interpreter, Element parent, {this.prompt = 'scm> '}) {
     if (window.localStorage.containsKey('#repl-history')) {
       var decoded = json.decode(window.localStorage['#repl-history']);
@@ -38,6 +37,12 @@ class Repl {
     status = SpanElement()..classes = ['repl-status'];
     container.append(status);
     buildNewInput();
+    if (window.localStorage.containsKey('autocomplete')) {
+      String val = window.localStorage['autocomplete'];
+      if (val == 't') {
+        activeInput.enableAutocomplete();
+      }
+    }
     interpreter.logger = (logging, [newline = true]) {
       var box = SpanElement();
       activeLoggingArea.append(box);
@@ -79,6 +84,19 @@ class Repl {
       autodraw = false;
       return undefined;
     }, 0);
+    addBuiltin(env, const SchemeSymbol('autocomplete'), (_a, _b) {
+      logText('While typing, will display a list of possible procedures.\n'
+          '(disable-autocomplete) to disable\n');
+      activeInput.enableAutocomplete();
+      window.localStorage['autocomplete'] = 't';
+      return undefined;
+    }, 0);
+    addBuiltin(env, const SchemeSymbol('disable-autocomplete'), (_a, _b) {
+      logText('Autocomplete disabled\n');
+      activeInput.disableAutocomplete();
+      window.localStorage['autocomplete'] = 'f';
+      return undefined;
+    }, 0);
   }
 
   buildNewInput() {
@@ -90,8 +108,8 @@ class Repl {
       ..text = prompt
       ..classes = ['repl-prompt'];
     container.append(activePrompt);
-    activeInput =
-        CodeInput(container, runCode, parenListener: updateParenStatus);
+    activeInput = CodeInput(container, runCode, interpreter.globalEnv,
+        parenListener: updateParenStatus);
     container.scrollTop = container.scrollHeight;
   }
 

web/assets/style.scss

@@ -101,6 +101,11 @@ body {
   }
 }
 
+.autobox-word {
+  margin: 10px;
+  display: inline-block;
+}
+
 .code-input {
   display: inline-block;
 }