merged cont.
[opensuse:yast-rest-service.git] / webservice / public / javascripts / plugin / jqplot.canvasAxisTickRenderer.js
1 /**
2  * Copyright (c) 2009 Chris Leonello
3  * jqPlot is currently available for use in all personal or commercial projects 
4  * under both the MIT and GPL version 2.0 licenses. This means that you can 
5  * choose the license that best suits your project and use it accordingly. 
6  *
7  * The author would appreciate an email letting him know of any substantial
8  * use of jqPlot.  You can reach the author at: chris dot leonello at gmail 
9  * dot com or see http://www.jqplot.com/info.php .  This is, of course, 
10  * not required.
11  *
12  * If you are feeling kind and generous, consider supporting the project by
13  * making a donation at: http://www.jqplot.com/donate.php .
14  *
15  * Thanks for using jqPlot!
16  * 
17  */
18 (function($) {
19     /**
20     *  Class: $.jqplot.CanvasAxisTickRenderer
21     * Renderer to draw axis ticks with a canvas element to support advanced
22     * featrues such as rotated text.  This renderer uses a separate rendering engine
23     * to draw the text on the canvas.  Two modes of rendering the text are available.
24     * If the browser has native font support for canvas fonts (currently Mozila 3.5
25     * and Safari 4), you can enable text rendering with the canvas fillText method.
26     * You do so by setting the "enableFontSupport" option to true. 
27     * 
28     * Browsers lacking native font support will have the text drawn on the canvas
29     * using the Hershey font metrics.  Even if the "enableFontSupport" option is true
30     * non-supporting browsers will still render with the Hershey font.
31     */
32     $.jqplot.CanvasAxisTickRenderer = function(options) {
33         // Group: Properties
34         
35         // prop: mark
36         // tick mark on the axis.  One of 'inside', 'outside', 'cross', '' or null.
37         this.mark = 'outside';
38         // prop: showMark
39         // wether or not to show the mark on the axis.
40         this.showMark = true;
41         // prop: showGridline
42         // wether or not to draw the gridline on the grid at this tick.
43         this.showGridline = true;
44         // prop: isMinorTick
45         // if this is a minor tick.
46         this.isMinorTick = false;
47         // prop: angle
48         // angle of text, measured clockwise from x axis.
49         this.angle = 0;
50         // prop:  markSize
51         // Length of the tick marks in pixels.  For 'cross' style, length
52         // will be stoked above and below axis, so total length will be twice this.
53         this.markSize = 4;
54         // prop: show
55         // wether or not to show the tick (mark and label).
56         this.show = true;
57         // prop: showLabel
58         // wether or not to show the label.
59         this.showLabel = true;
60         // prop: labelPosition
61         // 'auto', 'start', 'middle' or 'end'.
62         // Whether tick label should be positioned so the start, middle, or end
63         // of the tick mark.
64         this.labelPosition = 'auto';
65         this.label = '';
66         this.value = null;
67         this._styles = {};
68         // prop: formatter
69         // A class of a formatter for the tick text.
70         // The default $.jqplot.DefaultTickFormatter uses sprintf.
71         this.formatter = $.jqplot.DefaultTickFormatter;
72         // prop: formatString
73         // string passed to the formatter.
74         this.formatString = '';
75         // prop: fontFamily
76         // css spec for the font-family css attribute.
77         this.fontFamily = '"Trebuchet MS", Arial, Helvetica, sans-serif';
78         // prop: fontSize
79         // CSS spec for font size.
80         this.fontSize = '11px';
81         // prop: fontWeight
82         // CSS spec for fontWeight
83         this.fontWeight = 'normal';
84         // prop: fontStretch
85         // Multiplier to condense or expand font width.  
86         // Applies only to browsers which don't support canvas native font rendering.
87         this.fontStretch = 1.0;
88         // prop: textColor
89         // css spec for the color attribute.
90         this.textColor = '#666666';
91         // prop: enableFontSupport
92         // true to turn on native canvas font support in Mozilla 3.5+ and Safari 4+.
93         // If true, tick label will be drawn with canvas tag native support for fonts.
94         // If false, tick label will be drawn with Hershey font metrics.
95         this.enableFontSupport = false;
96         // prop: pt2px
97         // Point to pixel scaling factor, used for computing height of bounding box
98         // around a label.  The labels text renderer has a default setting of 1.4, which 
99         // should be suitable for most fonts.  Leave as null to use default.  If tops of
100         // letters appear clipped, increase this.  If bounding box seems too big, decrease.
101         // This is an issue only with the native font renderering capabilities of Mozilla
102         // 3.5 and Safari 4 since they do not provide a method to determine the font height.
103         this.pt2px = null;
104         
105         this._elem;
106         this._ctx;
107         this._plotWidth;
108         this._plotHeight;
109         this._plotDimensions = {height:null, width:null};
110         
111         $.extend(true, this, options);
112         
113         var ropts = {fontSize:this.fontSize, fontWeight:this.fontWeight, fontStretch:this.fontStretch, fillStyle:this.textColor, angle:this.getAngleRad(), fontFamily:this.fontFamily};
114         if (this.pt2px) {
115             ropts.pt2px = this.pt2px;
116         }
117         
118         if (this.enableFontSupport) {
119             if ($.browser.safari) {
120                 var p = $.browser.version.split('.');
121                 for (var i=0; i<p.length; i++) { p[i] = Number(p[i]); }
122                 if (p[0] > 528 || (p[0] == 528 && p[1] >= 16)) {
123                     this._textRenderer = new $.jqplot.CanvasFontRenderer(ropts); 
124                 }
125             }
126             else if ($.browser.mozilla) {
127                 var p = $.browser.version.split(".");
128                 if (p[0] > 1 || (p[0] == 1 &&  p[1] >= 9 && p[2] > 0) ) {
129                     this._textRenderer = new $.jqplot.CanvasFontRenderer(ropts);
130                 }
131                 else {
132                     this._textRenderer = new $.jqplot.CanvasTextRenderer(ropts);
133                 }
134             }
135             
136             // TODO: test and enable this
137             // else if ($.browser.msie) {
138             //     this._textRenderer = new $.jqplot.CanvasFontRenderer(ropts); 
139             // }
140             
141             else {
142                 this._textRenderer = new $.jqplot.CanvasTextRenderer(ropts); 
143             }
144         }
145         else {
146             this._textRenderer = new $.jqplot.CanvasTextRenderer(ropts); 
147         }
148     };
149     
150     $.jqplot.CanvasAxisTickRenderer.prototype.init = function(options) {
151         $.extend(true, this, options);
152         this._textRenderer.init({fontSize:this.fontSize, fontWeight:this.fontWeight, fontStretch:this.fontStretch, fillStyle:this.textColor, angle:this.getAngleRad(), fontFamily:this.fontFamily});
153     };
154     
155     // return width along the x axis
156     // will check first to see if an element exists.
157     // if not, will return the computed text box width.
158     $.jqplot.CanvasAxisTickRenderer.prototype.getWidth = function(ctx) {
159         if (this._elem) {
160          return this._elem.outerWidth(true);
161         }
162         else {
163             var tr = this._textRenderer;
164             var l = tr.getWidth(ctx);
165             var h = tr.getHeight(ctx);
166             var w = Math.abs(Math.sin(tr.angle)*h) + Math.abs(Math.cos(tr.angle)*l);
167             return w;
168         }
169     };
170     
171     // return height along the y axis.
172     $.jqplot.CanvasAxisTickRenderer.prototype.getHeight = function(ctx) {
173         if (this._elem) {
174          return this._elem.outerHeight(true);
175         }
176         else {
177             var tr = this._textRenderer;
178             var l = tr.getWidth(ctx);
179             var h = tr.getHeight(ctx);
180             var w = Math.abs(Math.cos(tr.angle)*h) + Math.abs(Math.sin(tr.angle)*l);
181             return w;
182         }
183     };
184     
185     $.jqplot.CanvasAxisTickRenderer.prototype.getAngleRad = function() {
186         var a = this.angle * Math.PI/180;
187         return a;
188     };
189     
190     
191     $.jqplot.CanvasAxisTickRenderer.prototype.setTick = function(value, axisName, isMinor) {
192         this.value = value;
193         if (isMinor) {
194             this.isMinorTick = true;
195         }
196         return this;
197     };
198     
199     $.jqplot.CanvasAxisTickRenderer.prototype.draw = function(ctx) {
200         if (!this.label) {
201             this.label = this.formatter(this.formatString, this.value);
202         }
203         // create a canvas here, but can't draw on it untill it is appended
204         // to dom for IE compatability.
205         var domelem = document.createElement('canvas');
206         this._textRenderer.setText(this.label, ctx);
207         var w = this.getWidth(ctx);
208         var h = this.getHeight(ctx);
209         domelem.width = w;
210         domelem.height = h;
211         domelem.style.width = w;
212         domelem.style.height = h;
213         domelem.style.textAlign = 'left';
214         domelem.style.position = 'absolute';
215         this._domelem = domelem;
216         this._elem = $(domelem);
217         this._elem.css(this._styles);
218         this._elem.addClass('jqplot-'+this.axis+'-tick');
219         
220         return this._elem;
221     };
222     
223     $.jqplot.CanvasAxisTickRenderer.prototype.pack = function() {
224         if ($.browser.msie) {
225             window.G_vmlCanvasManager.init_(document);
226             this._domelem = window.G_vmlCanvasManager.initElement(this._domelem);
227         }
228         var ctx = this._elem.get(0).getContext("2d");
229         this._textRenderer.draw(ctx, this.label);
230     };
231     
232 })(jQuery);