Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
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...
commit 85196a07a5995627a11b40b9fd7a27509eb1acc9 1 parent 12bf681
@rhburrows authored
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
40 src/display.js
@@ -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;
View
19 src/extras/selection.js
@@ -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
48 test/displayTest.js
@@ -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");
});
Please sign in to comment.
Something went wrong with that request. Please try again.