Commit | Line | Data |
---|---|---|
6a1aa64f DV |
1 | /* |
2 | PlotKit Canvas | |
3 | ============== | |
4 | ||
5 | Provides HTML Canvas Renderer. This is supported under: | |
6 | ||
7 | - Safari 2.0 | |
8 | - Mozilla Firefox 1.5 | |
9 | - Opera 9.0 preview 2 | |
10 | - IE 6 (via VML Emulation) | |
11 | ||
12 | It uses DIVs for labels. | |
13 | ||
14 | Copyright | |
15 | --------- | |
16 | Copyright 2005,2006 (c) Alastair Tse <alastair^liquidx.net> | |
17 | For use under the BSD license. <http://www.liquidx.net/plotkit> | |
18 | ||
19 | */ | |
20 | // -------------------------------------------------------------------- | |
21 | // Check required components | |
22 | // -------------------------------------------------------------------- | |
23 | ||
24 | try { | |
25 | if ((typeof(PlotKit.Base) == 'undefined') || | |
26 | (typeof(PlotKit.Layout) == 'undefined')) | |
27 | { | |
28 | throw ""; | |
29 | } | |
30 | } | |
31 | catch (e) { | |
32 | throw "PlotKit.Layout depends on MochiKit.{Base,Color,DOM,Format} and PlotKit.{Base,Layout}" | |
33 | } | |
34 | ||
35 | ||
36 | // ------------------------------------------------------------------------ | |
37 | // Defines the renderer class | |
38 | // ------------------------------------------------------------------------ | |
39 | ||
40 | if (typeof(PlotKit.CanvasRenderer) == 'undefined') { | |
41 | PlotKit.CanvasRenderer = {}; | |
42 | } | |
43 | ||
44 | PlotKit.CanvasRenderer.NAME = "PlotKit.CanvasRenderer"; | |
45 | PlotKit.CanvasRenderer.VERSION = PlotKit.VERSION; | |
46 | ||
47 | PlotKit.CanvasRenderer.__repr__ = function() { | |
48 | return "[" + this.NAME + " " + this.VERSION + "]"; | |
49 | }; | |
50 | ||
51 | PlotKit.CanvasRenderer.toString = function() { | |
52 | return this.__repr__(); | |
53 | } | |
54 | ||
55 | PlotKit.CanvasRenderer = function(element, layout, options) { | |
56 | if (arguments.length > 0) | |
57 | this.__init__(element, layout, options); | |
58 | }; | |
59 | ||
60 | PlotKit.CanvasRenderer.prototype.__init__ = function(element, layout, options) { | |
61 | var isNil = MochiKit.Base.isUndefinedOrNull; | |
62 | var Color = MochiKit.Color.Color; | |
63 | ||
64 | // default options | |
65 | this.options = { | |
66 | "drawBackground": true, | |
67 | "backgroundColor": Color.whiteColor(), | |
6a1aa64f DV |
68 | "colorScheme": PlotKit.Base.palette(PlotKit.Base.baseColors()[0]), |
69 | "strokeColor": Color.whiteColor(), | |
70 | "strokeColorTransform": "asStrokeColor", | |
71 | "strokeWidth": 0.5, | |
72 | "shouldFill": true, | |
73 | "shouldStroke": true, | |
74 | "drawXAxis": true, | |
75 | "drawYAxis": true, | |
76 | "axisLineColor": Color.blackColor(), | |
77 | "axisLineWidth": 0.5, | |
78 | "axisTickSize": 3, | |
79 | "axisLabelColor": Color.blackColor(), | |
80 | "axisLabelFont": "Arial", | |
81 | "axisLabelFontSize": 9, | |
82 | "axisLabelWidth": 50, | |
83 | "pieRadius": 0.4, | |
84 | "enableEvents": true | |
85 | }; | |
86 | MochiKit.Base.update(this.options, options ? options : {}); | |
87 | ||
88 | this.layout = layout; | |
89 | this.element = MochiKit.DOM.getElement(element); | |
90 | this.container = this.element.parentNode; | |
91 | ||
92 | // Stuff relating to Canvas on IE support | |
93 | this.isIE = PlotKit.Base.excanvasSupported(); | |
94 | ||
95 | if (this.isIE && !isNil(G_vmlCanvasManager)) { | |
96 | this.IEDelay = 0.5; | |
97 | this.maxTries = 5; | |
98 | this.renderDelay = null; | |
99 | this.clearDelay = null; | |
100 | this.element = G_vmlCanvasManager.initElement(this.element); | |
101 | } | |
102 | ||
103 | this.height = this.element.height; | |
104 | this.width = this.element.width; | |
105 | ||
106 | // --- check whether everything is ok before we return | |
107 | ||
108 | if (isNil(this.element)) | |
109 | throw "CanvasRenderer() - passed canvas is not found"; | |
110 | ||
111 | if (!this.isIE && !(PlotKit.CanvasRenderer.isSupported(this.element))) | |
112 | throw "CanvasRenderer() - Canvas is not supported."; | |
113 | ||
114 | if (isNil(this.container) || (this.container.nodeName.toLowerCase() != "div")) | |
115 | throw "CanvasRenderer() - <canvas> needs to be enclosed in <div>"; | |
116 | ||
117 | // internal state | |
118 | this.xlabels = new Array(); | |
119 | this.ylabels = new Array(); | |
120 | this.isFirstRender = true; | |
121 | ||
122 | this.area = { | |
8846615a DV |
123 | x: this.options.yAxisLabelWidth + 2 * this.options.axisTickSize, |
124 | y: 0 | |
6a1aa64f | 125 | }; |
8846615a DV |
126 | this.area.w = this.width - this.area.x - this.options.rightGap; |
127 | this.area.h = this.height - this.options.axisLabelFontSize - | |
128 | 2 * this.options.axisTickSize; | |
6a1aa64f DV |
129 | |
130 | MochiKit.DOM.updateNodeAttributes(this.container, | |
131 | {"style":{ "position": "relative", "width": this.width + "px"}}); | |
132 | ||
133 | // load event system if we have Signals | |
134 | /* Disabled until we have a proper implementation | |
135 | try { | |
136 | this.event_isinside = null; | |
137 | if (MochiKit.Signal && this.options.enableEvents) { | |
138 | this._initialiseEvents(); | |
139 | } | |
140 | } | |
141 | catch (e) { | |
142 | // still experimental | |
143 | } | |
144 | */ | |
145 | }; | |
146 | ||
147 | PlotKit.CanvasRenderer.prototype.render = function() { | |
148 | if (this.isIE) { | |
149 | // VML takes a while to start up, so we just poll every this.IEDelay | |
150 | try { | |
151 | if (this.renderDelay) { | |
152 | this.renderDelay.cancel(); | |
153 | this.renderDelay = null; | |
154 | } | |
155 | var context = this.element.getContext("2d"); | |
156 | } | |
157 | catch (e) { | |
158 | this.isFirstRender = false; | |
159 | if (this.maxTries-- > 0) { | |
160 | this.renderDelay = MochiKit.Async.wait(this.IEDelay); | |
161 | this.renderDelay.addCallback(bind(this.render, this)); | |
162 | } | |
163 | return; | |
164 | } | |
165 | } | |
166 | ||
167 | if (this.options.drawBackground) | |
168 | this._renderBackground(); | |
169 | ||
9148174b | 170 | if (this.layout.style == "line") { |
6a1aa64f DV |
171 | this._renderLineChart(); |
172 | this._renderLineAxis(); | |
173 | } | |
174 | }; | |
175 | ||
6a1aa64f DV |
176 | PlotKit.CanvasRenderer.prototype._renderLineChart = function() { |
177 | var context = this.element.getContext("2d"); | |
178 | var colorCount = this.options.colorScheme.length; | |
179 | var colorScheme = this.options.colorScheme; | |
180 | var setNames = MochiKit.Base.keys(this.layout.datasets); | |
181 | var setCount = setNames.length; | |
182 | var bind = MochiKit.Base.bind; | |
183 | var partial = MochiKit.Base.partial; | |
184 | ||
185 | for (var i = 0; i < setCount; i++) { | |
186 | var setName = setNames[i]; | |
187 | var color = colorScheme[i%colorCount]; | |
188 | var strokeX = this.options.strokeColorTransform; | |
189 | ||
190 | // setup graphics context | |
191 | context.save(); | |
192 | context.fillStyle = color.toRGBString(); | |
193 | if (this.options.strokeColor) | |
194 | context.strokeStyle = this.options.strokeColor.toRGBString(); | |
195 | else if (this.options.strokeColorTransform) | |
196 | context.strokeStyle = color[strokeX]().toRGBString(); | |
197 | ||
198 | context.lineWidth = this.options.strokeWidth; | |
199 | ||
200 | // create paths | |
201 | var makePath = function(ctx) { | |
202 | ctx.beginPath(); | |
203 | ctx.moveTo(this.area.x, this.area.y + this.area.h); | |
204 | var addPoint = function(ctx_, point) { | |
205 | if (point.name == setName) | |
206 | ctx_.lineTo(this.area.w * point.x + this.area.x, | |
207 | this.area.h * point.y + this.area.y); | |
208 | }; | |
209 | MochiKit.Iter.forEach(this.layout.points, partial(addPoint, ctx), this); | |
210 | ctx.lineTo(this.area.w + this.area.x, | |
211 | this.area.h + this.area.y); | |
212 | ctx.lineTo(this.area.x, this.area.y + this.area.h); | |
213 | ctx.closePath(); | |
214 | }; | |
215 | ||
216 | if (this.options.shouldFill) { | |
217 | bind(makePath, this)(context); | |
218 | context.fill(); | |
219 | } | |
220 | if (this.options.shouldStroke) { | |
221 | bind(makePath, this)(context); | |
222 | context.stroke(); | |
223 | } | |
224 | ||
225 | context.restore(); | |
226 | } | |
227 | }; | |
228 | ||
6a1aa64f DV |
229 | |
230 | PlotKit.CanvasRenderer.prototype._renderLineAxis = function() { | |
231 | this._renderAxis(); | |
232 | }; | |
233 | ||
234 | ||
235 | PlotKit.CanvasRenderer.prototype._renderAxis = function() { | |
236 | if (!this.options.drawXAxis && !this.options.drawYAxis) | |
237 | return; | |
238 | ||
239 | var context = this.element.getContext("2d"); | |
240 | ||
241 | var labelStyle = {"style": | |
242 | {"position": "absolute", | |
243 | "fontSize": this.options.axisLabelFontSize + "px", | |
244 | "zIndex": 10, | |
245 | "color": this.options.axisLabelColor.toRGBString(), | |
246 | "width": this.options.axisLabelWidth + "px", | |
247 | "overflow": "hidden" | |
248 | } | |
249 | }; | |
250 | ||
251 | // axis lines | |
252 | context.save(); | |
253 | context.strokeStyle = this.options.axisLineColor.toRGBString(); | |
254 | context.lineWidth = this.options.axisLineWidth; | |
255 | ||
256 | ||
257 | if (this.options.drawYAxis) { | |
258 | if (this.layout.yticks) { | |
259 | var drawTick = function(tick) { | |
260 | if (typeof(tick) == "function") return; | |
261 | var x = this.area.x; | |
262 | var y = this.area.y + tick[0] * this.area.h; | |
263 | context.beginPath(); | |
264 | context.moveTo(x, y); | |
265 | context.lineTo(x - this.options.axisTickSize, y); | |
266 | context.closePath(); | |
267 | context.stroke(); | |
268 | ||
269 | var label = DIV(labelStyle, tick[1]); | |
8846615a DV |
270 | var top = (y - this.options.axisLabelFontSize / 2); |
271 | if (top < 0) top = 0; | |
272 | ||
273 | if (top + this.options.axisLabelFontSize + 3 > this.height) { | |
274 | label.style.bottom = "0px"; | |
275 | } else { | |
276 | label.style.top = top + "px"; | |
277 | } | |
278 | label.style.left = "0px"; | |
6a1aa64f | 279 | label.style.textAlign = "right"; |
8846615a | 280 | label.style.width = this.options.yAxisLabelWidth + "px"; |
6a1aa64f DV |
281 | MochiKit.DOM.appendChildNodes(this.container, label); |
282 | this.ylabels.push(label); | |
283 | }; | |
284 | ||
285 | MochiKit.Iter.forEach(this.layout.yticks, bind(drawTick, this)); | |
8846615a DV |
286 | |
287 | // The lowest tick on the y-axis often overlaps with the leftmost | |
288 | // tick on the x-axis. Shift the bottom tick up a little bit to | |
289 | // compensate if necessary. | |
290 | var bottomTick = this.ylabels[0]; | |
291 | var fontSize = this.options.axisLabelFontSize; | |
292 | var bottom = parseInt(bottomTick.style.top) + fontSize; | |
293 | if (bottom > this.height - fontSize) { | |
294 | bottomTick.style.top = (parseInt(bottomTick.style.top) - | |
295 | fontSize / 2) + "px"; | |
296 | } | |
6a1aa64f DV |
297 | } |
298 | ||
299 | context.beginPath(); | |
300 | context.moveTo(this.area.x, this.area.y); | |
301 | context.lineTo(this.area.x, this.area.y + this.area.h); | |
302 | context.closePath(); | |
303 | context.stroke(); | |
304 | } | |
305 | ||
306 | if (this.options.drawXAxis) { | |
307 | if (this.layout.xticks) { | |
308 | var drawTick = function(tick) { | |
309 | if (typeof(dataset) == "function") return; | |
310 | ||
311 | var x = this.area.x + tick[0] * this.area.w; | |
312 | var y = this.area.y + this.area.h; | |
313 | context.beginPath(); | |
314 | context.moveTo(x, y); | |
315 | context.lineTo(x, y + this.options.axisTickSize); | |
316 | context.closePath(); | |
317 | context.stroke(); | |
318 | ||
319 | var label = DIV(labelStyle, tick[1]); | |
6a1aa64f | 320 | label.style.textAlign = "center"; |
8846615a DV |
321 | label.style.bottom = "0px"; |
322 | ||
323 | var left = (x - this.options.axisLabelWidth/2); | |
324 | if (left + this.options.axisLabelWidth > this.width) { | |
325 | left = this.width - this.options.xAxisLabelWidth; | |
326 | label.style.textAlign = "right"; | |
327 | } | |
328 | if (left < 0) { | |
329 | left = 0; | |
330 | label.style.textAlign = "left"; | |
331 | } | |
332 | ||
333 | label.style.left = left + "px"; | |
334 | label.style.width = this.options.xAxisLabelWidth + "px"; | |
6a1aa64f DV |
335 | MochiKit.DOM.appendChildNodes(this.container, label); |
336 | this.xlabels.push(label); | |
337 | }; | |
338 | ||
339 | MochiKit.Iter.forEach(this.layout.xticks, bind(drawTick, this)); | |
340 | } | |
341 | ||
342 | context.beginPath(); | |
343 | context.moveTo(this.area.x, this.area.y + this.area.h); | |
344 | context.lineTo(this.area.x + this.area.w, this.area.y + this.area.h); | |
345 | context.closePath(); | |
346 | context.stroke(); | |
347 | } | |
348 | ||
349 | context.restore(); | |
350 | ||
351 | }; | |
352 | ||
6a1aa64f DV |
353 | PlotKit.CanvasRenderer.prototype._renderBackground = function() { |
354 | var context = this.element.getContext("2d"); | |
355 | context.save(); | |
356 | context.fillStyle = this.options.backgroundColor.toRGBString(); | |
357 | context.fillRect(0, 0, this.width, this.height); | |
358 | context.restore(); | |
359 | }; | |
360 | ||
361 | PlotKit.CanvasRenderer.prototype.clear = function() { | |
362 | if (this.isIE) { | |
363 | // VML takes a while to start up, so we just poll every this.IEDelay | |
364 | try { | |
365 | if (this.clearDelay) { | |
366 | this.clearDelay.cancel(); | |
367 | this.clearDelay = null; | |
368 | } | |
369 | var context = this.element.getContext("2d"); | |
370 | } | |
371 | catch (e) { | |
372 | this.isFirstRender = false; | |
373 | this.clearDelay = MochiKit.Async.wait(this.IEDelay); | |
374 | this.clearDelay.addCallback(bind(this.clear, this)); | |
375 | return; | |
376 | } | |
377 | } | |
378 | ||
379 | var context = this.element.getContext("2d"); | |
380 | context.clearRect(0, 0, this.width, this.height); | |
381 | ||
382 | MochiKit.Iter.forEach(this.xlabels, MochiKit.DOM.removeElement); | |
383 | MochiKit.Iter.forEach(this.ylabels, MochiKit.DOM.removeElement); | |
384 | this.xlabels = new Array(); | |
385 | this.ylabels = new Array(); | |
386 | }; | |
387 | ||
388 | // ---------------------------------------------------------------- | |
389 | // Everything below here is experimental and undocumented. | |
390 | // ---------------------------------------------------------------- | |
391 | ||
392 | PlotKit.CanvasRenderer.prototype._initialiseEvents = function() { | |
393 | var connect = MochiKit.Signal.connect; | |
394 | var bind = MochiKit.Base.bind; | |
395 | //MochiKit.Signal.registerSignals(this, ['onmouseover', 'onclick', 'onmouseout', 'onmousemove']); | |
396 | //connect(this.element, 'onmouseover', bind(this.onmouseover, this)); | |
397 | //connect(this.element, 'onmouseout', bind(this.onmouseout, this)); | |
398 | //connect(this.element, 'onmousemove', bind(this.onmousemove, this)); | |
399 | connect(this.element, 'onclick', bind(this.onclick, this)); | |
400 | }; | |
401 | ||
402 | PlotKit.CanvasRenderer.prototype._resolveObject = function(e) { | |
403 | // does not work in firefox | |
404 | //var x = (e.event().offsetX - this.area.x) / this.area.w; | |
405 | //var y = (e.event().offsetY - this.area.y) / this.area.h; | |
406 | ||
407 | var x = (e.mouse().page.x - PlotKit.Base.findPosX(this.element) - this.area.x) / this.area.w; | |
408 | var y = (e.mouse().page.y - PlotKit.Base.findPosY(this.element) - this.area.y) / this.area.h; | |
409 | ||
410 | //log(x, y); | |
411 | ||
412 | var isHit = this.layout.hitTest(x, y); | |
413 | if (isHit) | |
414 | return isHit; | |
415 | return null; | |
416 | }; | |
417 | ||
418 | PlotKit.CanvasRenderer.prototype._createEventObject = function(layoutObj, e) { | |
419 | if (layoutObj == null) { | |
420 | return null; | |
421 | } | |
422 | ||
423 | e.chart = layoutObj | |
424 | return e; | |
425 | }; | |
426 | ||
427 | ||
428 | PlotKit.CanvasRenderer.prototype.onclick = function(e) { | |
429 | var layoutObject = this._resolveObject(e); | |
430 | var eventObject = this._createEventObject(layoutObject, e); | |
431 | if (eventObject != null) | |
432 | MochiKit.Signal.signal(this, "onclick", eventObject); | |
433 | }; | |
434 | ||
435 | PlotKit.CanvasRenderer.prototype.onmouseover = function(e) { | |
436 | var layoutObject = this._resolveObject(e); | |
437 | var eventObject = this._createEventObject(layoutObject, e); | |
438 | if (eventObject != null) | |
439 | signal(this, "onmouseover", eventObject); | |
440 | }; | |
441 | ||
442 | PlotKit.CanvasRenderer.prototype.onmouseout = function(e) { | |
443 | var layoutObject = this._resolveObject(e); | |
444 | var eventObject = this._createEventObject(layoutObject, e); | |
445 | if (eventObject == null) | |
446 | signal(this, "onmouseout", e); | |
447 | else | |
448 | signal(this, "onmouseout", eventObject); | |
449 | ||
450 | }; | |
451 | ||
452 | PlotKit.CanvasRenderer.prototype.onmousemove = function(e) { | |
453 | var layoutObject = this._resolveObject(e); | |
454 | var eventObject = this._createEventObject(layoutObject, e); | |
455 | ||
456 | if ((layoutObject == null) && (this.event_isinside == null)) { | |
457 | // TODO: should we emit an event anyway? | |
458 | return; | |
459 | } | |
460 | ||
461 | if ((layoutObject != null) && (this.event_isinside == null)) | |
462 | signal(this, "onmouseover", eventObject); | |
463 | ||
464 | if ((layoutObject == null) && (this.event_isinside != null)) | |
465 | signal(this, "onmouseout", eventObject); | |
466 | ||
467 | if ((layoutObject != null) && (this.event_isinside != null)) | |
468 | signal(this, "onmousemove", eventObject); | |
469 | ||
470 | this.event_isinside = layoutObject; | |
471 | //log("move", x, y); | |
472 | }; | |
473 | ||
474 | PlotKit.CanvasRenderer.isSupported = function(canvasName) { | |
475 | var canvas = null; | |
476 | try { | |
477 | if (MochiKit.Base.isUndefinedOrNull(canvasName)) | |
478 | canvas = MochiKit.DOM.CANVAS({}); | |
479 | else | |
480 | canvas = MochiKit.DOM.getElement(canvasName); | |
481 | var context = canvas.getContext("2d"); | |
482 | } | |
483 | catch (e) { | |
484 | var ie = navigator.appVersion.match(/MSIE (\d\.\d)/); | |
485 | var opera = (navigator.userAgent.toLowerCase().indexOf("opera") != -1); | |
486 | if ((!ie) || (ie[1] < 6) || (opera)) | |
487 | return false; | |
488 | return true; | |
489 | } | |
490 | return true; | |
491 | }; | |
492 | ||
493 | // Namespace Iniitialisation | |
494 | ||
495 | PlotKit.Canvas = {} | |
496 | PlotKit.Canvas.CanvasRenderer = PlotKit.CanvasRenderer; | |
497 | ||
498 | PlotKit.Canvas.EXPORT = [ | |
499 | "CanvasRenderer" | |
500 | ]; | |
501 | ||
502 | PlotKit.Canvas.EXPORT_OK = [ | |
503 | "CanvasRenderer" | |
504 | ]; | |
505 | ||
506 | PlotKit.Canvas.__new__ = function() { | |
507 | var m = MochiKit.Base; | |
508 | ||
509 | m.nameFunctions(this); | |
510 | ||
511 | this.EXPORT_TAGS = { | |
512 | ":common": this.EXPORT, | |
513 | ":all": m.concat(this.EXPORT, this.EXPORT_OK) | |
514 | }; | |
515 | }; | |
516 | ||
517 | PlotKit.Canvas.__new__(); | |
518 | MochiKit.Base._exportSymbols(this, PlotKit.Canvas); | |
519 |