git @ Cat's Eye Technologies yoob.js / 6e45eb9
Save ctx, remove drawCanvas, add drawCursors - can be early/late. Cat's Eye Technologies 11 years ago
1 changed file(s) with 64 addition(s) and 51 deletion(s). Raw diff Collapse all Expand all
+64
-51
src/yoob/playfield-canvas-view.js less more
1212 * TODO: option to stretch content rendering to fill a fixed-size canvas
1313 */
1414 yoob.PlayfieldCanvasView = function() {
15 this.pf = undefined;
16 this.canvas = undefined;
17
1815 this.init = function(pf, canvas) {
1916 this.pf = pf;
2017 this.canvas = canvas;
18 this.ctx = canvas.getContext('2d');
2119 this.cursors = [];
22 this.cellWidth = 8;
23 this.cellHeight = 8;
20 this.fixedPosition = false;
21 this.fixedSizeCanvas = false;
22 this.drawCursorsFirst = true;
23 this.setCellDimensions(8, 8);
2424 return this;
2525 };
2626
27 /* Chain setters */
27 /*** Chainable setters ***/
28
29 /*
30 * Set the list of cursors to the given list of yoob.Cursor (or compatible)
31 * objects.
32 */
2833 this.setCursors = function(cursors) {
2934 this.cursors = cursors;
3035 return this;
3136 };
37
38 /*
39 * Set the displayed dimensions of every cell.
40 * cellWidth and cellHeight are canvas units of measure for each cell.
41 * If cellWidth is undefined, the width of a character in the monospace
42 * font of cellHeight pixels is used.
43 */
3244 this.setCellDimensions = function(cellWidth, cellHeight) {
45 this.ctx.textBaseline = "top";
46 this.ctx.font = cellHeight + "px monospace";
47
48 if (cellWidth === undefined) {
49 cellWidth = this.ctx.measureText("@").width;
50 }
51
3352 this.cellWidth = cellWidth;
3453 this.cellHeight = cellHeight;
3554 return this;
4362 *
4463 * Override these if you want to draw some portion of the
4564 * playfield which is not the whole playfield.
46 * (Not yet implemented)
4765 */
4866 this.getLowerX = function() {
4967 var minX = this.pf.getMinX();
141159 });
142160 };
143161
144 /*
145 * Draws the Playfield, and a set of Cursors, on a canvas element.
146 * Resizes the canvas to the needed dimensions.
147 * cellWidth and cellHeight are canvas units of measure for each cell.
148 * Note that this is a holdover from when this method was on Playfield
149 * itself; typically you'd just call draw() instead.
150 */
151 this.drawCanvas = function(canvas, cellWidth, cellHeight, cursors) {
152 var ctx = canvas.getContext('2d');
153
154 var width = this.getExtentX();
155 var height = this.getExtentY();
156
157 if (cellWidth === undefined) {
158 ctx.textBaseline = "top";
159 ctx.font = cellHeight + "px monospace";
160 cellWidth = ctx.measureText("@").width;
161 }
162
163 canvas.width = width * cellWidth;
164 canvas.height = height * cellHeight;
165
166 ctx.clearRect(0, 0, canvas.width, canvas.height);
167
168 ctx.textBaseline = "top";
169 ctx.font = cellHeight + "px monospace";
170
171 var offsetX = (this.getLowerX() || 0) * cellWidth * -1;
172 var offsetY = (this.getLowerY() || 0) * cellHeight * -1;
173
174 if (this.fixedPosition) {
175 offsetX = 0;
176 offsetY = 0;
177 }
178
162 this.drawCursors = function(ctx, offsetX, offsetY, cellWidth, cellHeight) {
163 var cursors = this.cursors;
179164 for (var i = 0; i < cursors.length; i++) {
180165 cursors[i].drawContext(
181166 ctx,
184169 cellWidth, cellHeight
185170 );
186171 }
172 };
173
174 /*
175 * Draw the Playfield, and its set of Cursors, on the canvas element.
176 * Resizes the canvas to the needed dimensions first.
177 */
178 this.draw = function() {
179 var canvas = this.canvas;
180 var ctx = canvas.getContext('2d');
181 var cellWidth = this.cellWidth;
182 var cellHeight = this.cellHeight;
183 var cursors = this.cursors;
184
185 var width = this.getExtentX();
186 var height = this.getExtentY();
187
188 canvas.width = width * cellWidth;
189 canvas.height = height * cellHeight;
190
191 this.ctx.textBaseline = "top";
192 this.ctx.font = cellHeight + "px monospace";
193
194 var offsetX = 0;
195 var offsetY = 0;
196
197 if (!this.fixedPosition) {
198 offsetX = (this.getLowerX() || 0) * cellWidth * -1;
199 offsetY = (this.getLowerY() || 0) * cellHeight * -1;
200 }
201
202 if (this.drawCursorsFirst) {
203 this.drawCursors(ctx, offsetX, offsetY, cellWidth, cellHeight);
204 }
187205
188206 this.drawContext(ctx, offsetX, offsetY, cellWidth, cellHeight);
189 };
190
191 /*
192 * Render the playfield on the canvas.
193 */
194 this.draw = function() {
195 this.drawCanvas(
196 this.canvas, this.cellWidth, this.cellHeight, this.cursors
197 );
207
208 if (!this.drawCursorsFirst) {
209 this.drawCursors(ctx, offsetX, offsetY, cellWidth, cellHeight);
210 }
198211 };
199212
200213 };