Almost have line highlighting working

hawtio · May 2, 2013 · 3c100e8 · 3c100e8
1 parent 642a329
commit 3c100e8
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 12 deletions.
diff --git a/hawtio-web/src/main/webapp/app/ui/html/test.html b/hawtio-web/src/main/webapp/app/ui/html/test.html
@@ -105,15 +105,16 @@
 
     Instance 1
     <div class="row-fluid">
-      <div hawtio-editor="someText" mode="javascript"></div>
+      <div hawtio-editor="someText" name='theMaster' mode="javascript"></div>
       <div>Text : {{someText}}</div>
     </div>
 
     Instance 2 (readonly)
     <div class="row-fluid">
-      <div hawtio-editor="someText" read-only="true" mode="javascript"></div>
+      <div hawtio-editor="someText" read-only="true" mode="javascript" selected-line="{{selectedLine}}"></div>
       <div>Text : {{someText}}</div>
     </div>
+    <input type="number" ng-model="selectedLine">
   </div>
 
 

diff --git a/hawtio-web/src/main/webapp/app/ui/js/editorDirective.ts b/hawtio-web/src/main/webapp/app/ui/js/editorDirective.ts
@@ -9,14 +9,16 @@ module UI {
 
     public scope = {
       text: '=hawtioEditor',
-      name: '@',
+      selectedLine: '@',
+      name: '@'
     };
 
     public controller = ($scope, $element, $attrs) => {
 
       $scope.codeMirror = null;
       $scope.doc = null;
       $scope.options = [];
+      $scope.actions = [];
 
       observe($scope, $attrs, 'name', 'editor');
 
@@ -29,21 +31,39 @@ module UI {
         }
       };
 
+      $scope.actions.push({
+         doc: () => {
+           $scope.codeMirror.on('change', function(changeObj) {
+             var phase = $scope.$parent.$$phase;
+             if (!phase) {
+               $scope.text = $scope.doc.getValue();
+               Core.$applyNowOrLater($scope);
+             }
+           });
+         }
+      });
+
       $scope.$watch('doc', () => {
         if ($scope.doc) {
-          $scope.codeMirror.on('change', function(changeObj) {
-            var phase = $scope.$parent.$$phase;
-            if (!phase) {
-              $scope.text = $scope.doc.getValue();
-              Core.$applyNowOrLater($scope);
-            }
-          });
+          $scope.actions = executeActions('doc', $scope.actions);
+        }
+      });
+
+      $scope.actions.push({
+        editor: () => {
+          $scope.doc = $scope.codeMirror.getDoc();
+        }
+      });
+
+      $scope.actions.push({
+        editor: () => {
+          $scope.applyOptions();
         }
       });
 
       $scope.$watch('codeMirror', () => {
         if ($scope.codeMirror) {
-          $scope.doc = $scope.codeMirror.getDoc();
+          $scope.actions = executeActions('editor', $scope.actions);
         }
       });
 
@@ -55,6 +75,27 @@ module UI {
         }
       });
 
+      $scope.$watch('selectedLine', function() {
+
+        var setLine = () => {
+          if ($scope.selectedLine < $scope.codeMirror.lineCount()) {
+            var lineText = $scope.doc.getLine($scope.selectedLine);
+            var endChar = (lineText) ? lineText.length : 1000;
+            var start = {line: $scope.selectedLine, ch: 0};
+            var end = {line: $scope.selectedLine, ch: endChar};
+            $scope.codeMirror.scrollIntoView(start);
+            $scope.codeMirror.setSelection(start, end);
+            $scope.codeMirror.refresh();
+          }
+        }
+
+        if ($scope.codeMirror && $scope.doc) {
+          setLine();
+        } else {
+          $scope.actions.push( { doc: setLine });
+        }
+      });
+
     };
 
     public link = ($scope, $element, $attrs) => {
@@ -82,7 +123,6 @@ module UI {
 
           options = CodeEditor.createEditorSettings(options);
           $scope.codeMirror = CodeMirror.fromTextArea($element.find('textarea').get(0), options);
-          $scope.applyOptions();
         }
       });
 

diff --git a/hawtio-web/src/main/webapp/app/ui/js/helpers.ts b/hawtio-web/src/main/webapp/app/ui/js/helpers.ts
@@ -16,6 +16,20 @@ module UI {
     });
   }
 
+  export function executeActions(type, actions) {
+    var toExecute = actions.filter(function(action) {
+      return angular.isDefined(action[type]);
+    });
+    var remaining = actions.exclude(function(action) {
+      return !angular.isDefined(action[type]);
+    });
+    toExecute.each(function(action) {
+      action[type]();
+    });
+    return remaining;
+  }
+
+
 
 
 

diff --git a/hawtio-web/src/main/webapp/app/ui/js/testController.ts b/hawtio-web/src/main/webapp/app/ui/js/testController.ts
@@ -23,6 +23,8 @@ module UI {
                       "  return \"Hello World!;\"\n" +
                       "}\n";
 
+    $scope.selectedLine = 0;
+
 
   }