Skip to content
Browse files

First pass at selection modifying the face

This is the first time I've changed the rendering through "extension"
code so it is still super messy. This is the beginning of how future
extensions can be written though. The selection itself is also still
buggy but its getting closer
  • Loading branch information...
1 parent 9f73660 commit 90ae50260547be8119171edcd37c24623ed78a9e @rhburrows committed Jul 5, 2011
Showing with 71 additions and 21 deletions.
  1. +2 −0 example/editor.html
  2. +4 −4 src/core.js
  3. +4 −0 src/defaults.js
  4. +15 −16 src/display.js
  5. +6 −1 src/editor.js
  6. +40 −0 src/extras/selection.js
View
2 example/editor.html
@@ -10,6 +10,8 @@
<script type="text/javascript" src="../src/display.js"></script>
<script type="text/javascript" src="../src/input.js"></script>
<script type="text/javascript" src="../src/defaults.js"></script>
+
+ <script type="text/javascript" src="../src/extras/selection.js"></script>
<script type="text/javascript">
// <![CDATA[
var initialText = "This is a canvas based javascript text editor.\n" +
View
8 src/core.js
@@ -20,8 +20,8 @@
var width = textarea.width();
var height = textarea.height();
- var editor = new $.fn.s2e.Editor(options.initialText);
- var display = new $.fn.s2e.Display(editor, width, height);
+ var display = new $.fn.s2e.Display(width, height);
+ var editor = new $.fn.s2e.Editor(options.initialText, display);
var inputManager = new $.fn.s2e.InputManager();
textarea.css({
@@ -39,10 +39,10 @@
});
$(editor).bind('s2e:movePoint s2e:contentsUpdate', function(e) {
- display.repaint();
+ display.repaint(editor);
textarea.trigger(extendEvent(e, editor, display));
});
- display.repaint();
+ display.repaint(editor);
$(display).bind('s2e:click', function(ev) {
inputManager.focus();
View
4 src/defaults.js
@@ -50,6 +50,10 @@
'C-p' : function(editor) {
editor.previousLine();
+ },
+
+ 'C-x' : function(editor) {
+ editor.toggleSelection();
}
};
View
31 src/display.js
@@ -7,7 +7,7 @@
});
}
- function Display(editor, width, height) {
+ function Display(width, height) {
this.canvas = document.createElement('canvas');
$(this.canvas).attr('width', '' + width + 'px');
$(this.canvas).attr('height', '' + height + 'px');
@@ -24,7 +24,6 @@
this.lineLengths = [];
this.visibleFrame = new VisibleFrame(this, 0, height/this.lineHeight);
- this.editor = editor;
}
function mouseHandler(event, display) {
@@ -121,13 +120,13 @@
}
Display.prototype = {
- repaint : function() {
+ repaint : function(editor) {
this.clear();
var col = 0,
row = 0,
currentLine = 0;
- var contents = this.editor.contents();
+ var contents = editor.contents();
var tooLong = false,
cursorPainted = false;
@@ -141,7 +140,7 @@
this.lineLengths[row] = 0;
}
- if (this.editor.pointPosition() == i) {
+ if (editor.pointPosition() == i) {
this.visibleFrame.scrollTo(row);
return this.repaint();
}
@@ -155,7 +154,7 @@
this.lineLengths[row]++;
- if (i == this.editor.pointPosition()) {
+ if (i == editor.pointPosition()) {
cursorPainted = true;
paintCursor(this, col, currentLine);
}
@@ -178,24 +177,24 @@
if (c == '\n') {
row++;
}
- if (i == this.editor.pointPosition()) {
+ if (i == editor.pointPosition()) {
this.visibleFrame.scrollTo(row);
- return this.repaint();
+ return this.repaint(editor);
}
}
break;
}
}
- if (this.editor.pointPosition() == contents.length) {
+ if (editor.pointPosition() == contents.length) {
paintCursor(this, col, row);
}
if (tooLong || this.visibleFrame.first > 0) {
paintScrollbar(this,
this.visibleFrame.first,
this.visibleFrame.last,
- this.editor.lineCount());
+ editor.lineCount());
}
$(this).trigger('s2e:repaint');
@@ -228,22 +227,22 @@
e.after(this.canvas);
},
- scrollDown : function(n) {
+ scrollDown : function(editor, n) {
this.visibleFrame.scrollUp(n);
- this.repaint();
+ this.repaint(editor);
},
- scrollUp : function(n) {
+ scrollUp : function(editor, n) {
this.visibleFrame.scrollUp(n);
- this.repaint();
+ this.repaint(editor);
}
};
function Face(options) {
this.style = options['style'] || 'normal';
this.variant = options['variant'] || 'normal';
this.weight = options['weight'] || 'normal';
- this.size = options['size'] || 'medium';
+ this.size = options['size'] || '14';
this.lineHeight = options['line-height'] || 'normal';
this.family = options['family'] || 'monospace';
this.color = options['color'] || 'black';
@@ -256,7 +255,7 @@
this.weight + ' ' +
this.size + '/' +
this.lineHeight + ' ' +
- this.family + ' ';
+ this.family;
}
};
View
7 src/editor.js
@@ -2,11 +2,12 @@
var extraInitializers = [];
- function Editor(initialText) {
+ function Editor(initialText, display) {
this.buffer = new Array(50);
this.size = 50;
this.presize = 0;
this.postsize = 0;
+ this.display = display;
this.insertString(initialText);
movePoint(this, -initialText.length);
@@ -264,6 +265,10 @@
} else {
return "";
}
+ },
+
+ setFace : function(from, to, face) {
+ this.display.setFace(from, to, face);
}
};
View
40 src/extras/selection.js
@@ -1,11 +1,46 @@
(function($){
+ // TODO: HACK HACK HACK!
+ // Make this more configurable or something
+ // And make it use an actual face
+ var selectedFace = {
+ style : 'normal',
+ variant : 'normal',
+ weight : 'bold',
+ size : '14',
+ lineHeight : 'normal',
+ family : 'monospace',
+ color : 'red',
+ fontString : function() {
+ return this.style + ' ' +
+ this.variant + ' ' +
+ this.weight + ' ' +
+ this.size + '/' +
+ this.lineHeight + ' ' +
+ this.family;
+ }
+ };
+
+ function setSelectionFace(e) {
+ var editor = e.editor;
+ // TODO: HACK AGAIN!!!!
+ editor.display.faces = [];
+ editor.display.setFace(editor.selectionStart(),
+ editor.selectionEnd(),
+ selectedFace);
+ }
+
$.fn.s2e.Editor.prototype.toggleSelection = function() {
if (this.selectionActive) {
this.selectionActive = false;
+
+ this.display.faces = [];
+ $(this).unbind('s2e:movePoint s2e:contentsUpdate', setSelectionFace);
} else {
this.selectionBegan = this.pointPosition();
this.selectionActive = true;
+
+ $(this).bind('s2e:movePoint s2e:contentsUpdate', setSelectionFace);
}
};
@@ -46,6 +81,11 @@
}
};
+ function isSelected(editor, position) {
+ return position > editor.selectionStart() &&
+ position < editor.selectionEnd();
+ }
+
$.fn.s2e.Editor.addInit(function(){
this.selectionActive = false;
});

0 comments on commit 90ae502

Please sign in to comment.
Something went wrong with that request. Please try again.