Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Start working on vertical scrolling

It /kind of/ works except:

  * There's not way to trigger it except test functions
  * It doesn't pay attention to if the cursor is visible
  * Mouse clicks don't work if scrolled past the first line
  * The code is super messy
  * It doesn't work

Still, the first steps :)
  • Loading branch information...
commit 010eec94217be7f671f71ca8ff1a0c66a39d1be7 1 parent fa63ff0
@rhburrows authored
View
3  TODO.org
@@ -1,13 +1,14 @@
This is a list of things todo to finish s2e for release
=======================================================
-* Horizontal Scrolling
* Vertical Scrolling
+* Horizontal Scrolling
* Line Wrapping
* Mouse selection
* Copy & Paste
* Cursor Styling
* Background Styling
+* Scrollbar Styling
* syntax highlighting mode <-- contrib
* html syntax highlighting <-- contrib
* javascript syntax highlighting <-- contrib
View
2  src/core.js
@@ -59,6 +59,8 @@
inputManager.keydown(inputManager.handler(editor));
+ window.scrollDown = function(){ display.scrollDown(1, editor); };
+ window.scrollUp = function(){ display.scrollUp(1, editor); };
return editor;
});
};
View
103 src/display.js
@@ -22,6 +22,8 @@
this.defaultFace = defaultFace();
applyFace(this, this.defaultFace);
this.lineLengths = [];
+
+ this.visibleRange = [0, Math.floor(height/this.lineHeight)];
}
function mouseHandler(event, display) {
@@ -77,6 +79,29 @@
applyFace(display, face);
}
+ function paintScrollbar(display, from, to, max) {
+ var face = display.currentFace;
+
+ display.context.fillStyle = 'gray';
+ var left = $(display.canvas).position().left + $(display.canvas).width() - 20;
+ var top = $(display.canvas).position().top;
+ var height = $(display.canvas).height();
+ var width = 15;
+ display.context.fillRect(left, top, width, height);
+
+ display.context.fillStyle = '#ddd';
+ width = 8;
+ left = left + 2;
+
+ var percentage = (to - from) / max;
+ var maxHeight = height - 20;
+ height = Math.round(maxHeight * percentage);
+ top = top + 10 + Math.round(maxHeight * (from / max));
+ display.context.fillRect(left, top, width, height);
+
+ applyFace(display, face);
+ }
+
function applyFace(display, face) {
display.context.fillStyle = face.color;
display.charWidth = face.size * 0.8;
@@ -98,39 +123,59 @@
paint : function(editor) {
this.clear();
- var col = 0, row = 0, line = 0;
- var currentLineCount = 0;
+ var col = 0,
+ row = 0,
+ currentLine = 0;
var contents = editor.contents();
- this.lineLengths[line] = 0;
+ this.lineLengths[row] = 0;
+ var tooLong = false;
for (var i=0; i<contents.length; i++) {
var c = contents.charAt(i);
- if (this.faceForPosition(i) != this.currentFace) {
- applyFace(this, this.faceForPosition(i));
- }
-
- this.lineLengths[line]++;
-
- if (i == editor.pointPosition()) {
- paintCursor(this, col, row);
- }
-
- if (c == '\n') {
- col = 0;
- row++;
- line++;
- this.lineLengths[line] = 0;
- currentLineCount = 0;
- } else {
- paintCharacter(this, c, col, row);
- col++;
- currentLineCount++;
+ if (row < this.visibleRange[0]) {
+ if (c == '\n') {
+ row++;
+ this.lineLengths[row] = 0;
+ }
+ } else{
+ if (this.faceForPosition(i) != this.currentFace) {
+ applyFace(this, this.faceForPosition(i));
+ }
+
+ this.lineLengths[row]++;
+
+ if (i == editor.pointPosition()) {
+ paintCursor(this, col, currentLine);
+ }
+
+ if (c == '\n') {
+ col = 0;
+ row++;
+ currentLine++;
+ this.lineLengths[row] = 0;
+ } else {
+ paintCharacter(this, c, col, currentLine);
+ col++;
+ }
+
+ if (row > this.visibleRange[1]) {
+ tooLong = true;
+ break;
+ }
}
}
if (editor.pointPosition() == contents.length) {
paintCursor(this, col, row);
}
+
+ if (tooLong || this.visibleRange[0] > 0) {
+ paintScrollbar(this,
+ this.visibleRange[0],
+ this.visibleRange[1],
+ editor.lineCount());
+ }
+
$(this).trigger('s2e:repaint');
},
@@ -158,6 +203,18 @@
insertAfter : function(e) {
e.after(this.canvas);
+ },
+
+ scrollDown : function(n, editor) {
+ this.visibleRange[0] = this.visibleRange[0] + n;
+ this.visibleRange[1] = this.visibleRange[1] + n;
+ this.paint(editor);
+ },
+
+ scrollUp : function(n, editor) {
+ this.visibleRange[0] = this.visibleRange[0] - n;
+ this.visibleRange[1] = this.visibleRange[1] - n;
+ this.paint(editor);
}
};
View
7 src/editor.js
@@ -228,6 +228,13 @@
return start.join('') + end.join('');
},
+ lineCount : function() {
+ if (this.contents().length == 0) {
+ return 0;
+ }
+ return this.contents().split('\n').length;
+ },
+
pointPosition : function() {
return this.presize;
},
View
11 test/editorTest.js
@@ -427,4 +427,15 @@ test("s2e:movePoint event", function(){
expect(2);
editor.movePointTo(5);
+});
+
+test("lineCount", function(){
+ equals(editor.lineCount(), 0, "It works on empty editors");
+
+ editor.insertString("H");
+ equals(editor.lineCount(), 1, "It works if there's just one line");
+
+ editor.insertString("ello\nThere\nFriend.");
+
+ equals(editor.lineCount(), 3, "It counts the number of lines with multiple");
});
Please sign in to comment.
Something went wrong with that request. Please try again.