Permalink
Browse files

Simplify face usage and defaults

Rely on prototypal inheritance to set the default values for faces
making specifying them easier
  • Loading branch information...
1 parent 12bf681 commit 85196a07a5995627a11b40b9fd7a27509eb1acc9 @rhburrows committed Jul 15, 2011
Showing with 45 additions and 62 deletions.
  1. +18 −22 src/display.js
  2. +1 −18 src/extras/selection.js
  3. +26 −22 test/displayTest.js
View
@@ -1,12 +1,5 @@
(function($){
- function defaultFace() {
- return new Face({
- family : 'Monaco',
- size : 14
- });
- }
-
function Display(width, height) {
this.canvas = document.createElement('canvas');
$(this.canvas).attr('width', '' + width + 'px');
@@ -20,7 +13,7 @@
this.context = this.canvas.getContext('2d');
this.padding = 20;
this.faces = [];
- this.defaultFace = defaultFace();
+ this.defaultFace = DEFAULT_FACE;
applyFace(this, this.defaultFace);
this.lineLengths = [];
@@ -220,7 +213,12 @@
return this.defaultFace;
},
- setFace : function(from, to, face) {
+ setFace : function(from, to, faceOpts) {
+ var face = new Face();
+ $.each(faceOpts, function(opt, val){
+ face[opt] = val;
+ });
+
var updatedFaces = [];
for (var i = 0; i < this.faces.length; i++) {
var currentFace = this.faces[i];
@@ -284,19 +282,14 @@
}
};
- function Face(options) {
- this.style = options['style'] || 'normal';
- this.variant = options['variant'] || 'normal';
- this.weight = options['weight'] || 'normal';
- this.size = options['size'] || '14';
- this.lineHeight = options['line-height'] || 'normal';
- this.family = options['family'] || 'monospace';
- this.color = options['color'] || 'black';
- }
-
- Display.Face = Face;
-
- Face.prototype = {
+ var DEFAULT_FACE = {
+ style : 'normal',
+ variant : 'normal',
+ weight : 'normal',
+ size : '14',
+ lineHeight : 'normal',
+ family : 'monospace',
+ color : 'black',
fontString : function() {
return this.style + ' ' +
this.variant + ' ' +
@@ -307,6 +300,9 @@
}
};
+ function Face() {}
+ Face.prototype = DEFAULT_FACE;
+
function VisibleFrame(display, from, to) {
this.maxLines = Math.floor($(display.canvas).height() / display.lineHeight);
this.first = from || 0;
@@ -1,24 +1,7 @@
(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;
- }
+ color : 'red'
};
var lastSelectStart, lastSelectEnd;
View
@@ -83,55 +83,59 @@ test('s2e:mouseup event', function(){
});
test('faces', function(){
- var face = new $.fn.s2e.Display.Face({});
- var defaultFace = new $.fn.s2e.Display.Face({});
- display.defaultFace = defaultFace;
+ var face = {
+ color : 'yellow'
+ };
+ var defaultFace = display.defaultFace;
display.setFace(5, 10, face);
- equals(display.faceForPosition(0), defaultFace,
+ equals(display.faceForPosition(0).color, defaultFace.color,
"It returns the default if the face hasn't been set");
- equals(display.faceForPosition(4), defaultFace,
+ equals(display.faceForPosition(4).color, defaultFace.color,
"Outside the boundaries don't count as the set face");
- equals(display.faceForPosition(5), face,
+ equals(display.faceForPosition(5).color, face.color,
"It counts as the face at the first boundary");
- equals(display.faceForPosition(7), face,
+ equals(display.faceForPosition(7).color, face.color,
"It counts as the face in the middle");
- equals(display.faceForPosition(10), face,
+ equals(display.faceForPosition(10).color, face.color,
"It counts as the face at the second boundary");
- var newFace = new $.fn.s2e.Display.Face({});
+ var newFace = {
+ color : 'green'
+ };
display.setFace(6, 8, newFace);
- equals(display.faceForPosition(5), face,
+ equals(display.faceForPosition(5).color, face.color,
"It doesn't override the old set face outside the boundaries");
- equals(display.faceForPosition(6), newFace,
+ equals(display.faceForPosition(6).color, newFace.color,
"It counts as the face at the first boundary");
- equals(display.faceForPosition(7), newFace,
+ equals(display.faceForPosition(7).color, newFace.color,
"It counts as the face in the middle");
- equals(display.faceForPosition(8), newFace,
+ equals(display.faceForPosition(8).color, newFace.color,
"It counts as the face at the second boundary");
- equals(display.faceForPosition(15), defaultFace,
+ equals(display.faceForPosition(15).color, defaultFace.color,
"It's still the default after the set faces");
});
test('clearFace', function(){
- var face = new $.fn.s2e.Display.Face({});
- var defaultFace = new $.fn.s2e.Display.Face({});
- display.defaultFace = defaultFace;
+ var face = {
+ color : 'blue'
+ };
+ var defaultFace = display.defaultFace;
display.setFace(5, 10, face);
- equals(display.faceForPosition(7), face,
+ equals(display.faceForPosition(7).color, face.color,
"It set the face properly");
display.clearFace(7, 9);
- equals(display.faceForPosition(6), face,
+ equals(display.faceForPosition(6).color, face.color,
"It doesn't clear before the starting point");
- equals(display.faceForPosition(7), defaultFace,
+ equals(display.faceForPosition(7).color, defaultFace.color,
"It sets from the starting point back to deafult");
- equals(display.faceForPosition(9), defaultFace,
+ equals(display.faceForPosition(9).color, defaultFace.color,
"It sets at the ending point back to deafult");
- equals(display.faceForPosition(10), face,
+ equals(display.faceForPosition(10).color, face.color,
"It doesn't clear after the ending point");
});

0 comments on commit 85196a0

Please sign in to comment.