Merge pull request #270 from jviereck/folding

Add support for unfolding folds using the mouse. Add hints on the gutter for wrapped lines.

demo/demo.js

@@ -496,14 +496,34 @@ exports.launch = function(env) {
         }
     });
 
+    function isCommentRow(row) {
+        var session = env.editor.session;
+        var token;
+        var tokens = session.getTokens(row, row)[0].tokens;
+        var c = 0;
+        for (var i = 0; i < tokens.length; i++) {
+            token = tokens[i];
+            if (/^comment/.test(token.type)) {
+                return c;
+            } else if (!/^text/.test(token.type)) {
+                return false;
+            }
+            c += token.value.length;
+        }
+        return false;
+    };
+
     function toggleFold(env, tryToUnfold) {
-        var session = env.editor.session,
-            selection = env.editor.selection,
-            range = selection.getRange(), addFold;
+        var session = env.editor.session;
+        var selection = env.editor.selection;
+        var range = selection.getRange();
+        var addFold;
 
         if(range.isEmpty()) {
             var br = session.findMatchingBracket(range.start);
-            var fold = session.getFoldAt(range.start.row, range.start.column)
+            var fold = session.getFoldAt(range.start.row, range.start.column);
+            var column;
+
             if(fold) {
                 session.expandFold(fold);
                 selection.setSelectionRange(fold.range)
@@ -513,15 +533,25 @@ exports.launch = function(env) {
                 else
                     range.start = br;
                 addFold = true;
+            } else if ((column = isCommentRow(range.start.row)) !== false) {
+                var firstCommentRow = range.start.row;
+                var lastCommentRow = range.start.row;
+                var t;
+                while ((t = isCommentRow(firstCommentRow - 1)) !== false) {
+                    firstCommentRow --;
+                    column = t;
+                }
+                while (isCommentRow(lastCommentRow + 1) !== false) {
+                    lastCommentRow ++;
+                }
+                range.start.row = firstCommentRow;
+                range.start.column = column + 2;
+                range.end.row = lastCommentRow;
+                range.end.column = session.getLine(lastCommentRow).length - 1;
+                addFold = true;
             }
         } else {
-            var folds = session.getFoldsInRange(range);
-            if(tryToUnfold && folds.length)
-                session.expandFolds(folds);
-            else if(folds.length == 1 && folds[0].range.compare(range) == 0)
-                session.expandFolds(folds);
-            else
-                addFold = true;
+            addFold = true;
         }
         if(addFold) {
             var placeHolder = session.getTextRange(range);

lib/ace/css/editor.css

@@ -154,6 +154,10 @@
     -webkit-box-sizing: border-box;
 }
 
+.ace_line .ace_fold {
+    cursor: pointer;
+}
+
 .ace_dragging .ace_marker-layer, .ace_dragging .ace_text-layer {
   cursor: move;
 }

lib/ace/layer/gutter.js

@@ -108,7 +108,7 @@ var Gutter = function(parentEl) {
 
         while (true) {
             if(i > foldStart) {
-                i = fold.end.row+1;
+                i = fold.end.row + 1;
                 fold = this.session.getNextFold(i);
                 foldStart = fold ?fold.start.row :Infinity;
             }
@@ -121,7 +121,14 @@ var Gutter = function(parentEl) {
                 this.$breakpoints[i] ? " ace_breakpoint " : " ",
                 annotation.className,
                 "' title='", annotation.text.join("\n"),
-                "' style='height:", this.session.getRowHeight(config, i), "px;'>", (i+1), "</div>");
+                "' style='height:", config.lineHeight, "px;'>", (i+1));
+
+            var wrappedRowLength = this.session.getRowLength(i) - 1;
+            while (wrappedRowLength--) {
+                html.push("</div><div class='ace_gutter-cell' style='height:", config.lineHeight, "px'>&brvbar;</div>");
+            }
+
+            html.push("</div>");
 
             i++;
         }

lib/ace/mouse_handler.js

@@ -112,6 +112,13 @@ var MouseHandler = function(editor) {
             }
             return;
         } else {
+            // Select the fold as the user clicks it.
+            var fold = editor.session.getFoldAt(pos.row, pos.column, 1);
+            if (fold) {
+                editor.selection.setSelectionRange(fold.range);
+                return;
+            }
+
             inSelection = !editor.getReadOnly()
                 && !selectionEmpty
                 && selectionRange.contains(pos.row, pos.column);
@@ -255,10 +262,18 @@ var MouseHandler = function(editor) {
     };
 
     this.onMouseDoubleClick = function(e) {
+        var editor = this.editor;
         var pos = this.$getEventPosition(e);
-        this.editor.moveCursorToPosition(pos);
-        this.editor.selection.selectWord();
-        this.$clickSelection = this.editor.getSelectionRange();
+
+        // If the user dclicked on a fold, then expand it.
+        var fold = editor.session.getFoldAt(pos.row, pos.column, 1);
+        if (fold) {
+            editor.session.expandFold(fold);
+        } else {
+            editor.moveCursorToPosition(pos);
+            editor.selection.selectWord();
+            this.$clickSelection = editor.getSelectionRange();
+        }
     };
 
     this.onMouseTripleClick = function(e) {