1 | define(["dojo/_base/lang", "dojo/_base/html", "dojo/_base/window", "dojo/dom-geometry", "dojox/gfx"], |
---|
2 | function(lang, html, win, domGeom, g){ |
---|
3 | |
---|
4 | var common = lang.getObject("dojox.charting.axis2d.common", true); |
---|
5 | |
---|
6 | var clearNode = function(s){ |
---|
7 | s.marginLeft = "0px"; |
---|
8 | s.marginTop = "0px"; |
---|
9 | s.marginRight = "0px"; |
---|
10 | s.marginBottom = "0px"; |
---|
11 | s.paddingLeft = "0px"; |
---|
12 | s.paddingTop = "0px"; |
---|
13 | s.paddingRight = "0px"; |
---|
14 | s.paddingBottom = "0px"; |
---|
15 | s.borderLeftWidth = "0px"; |
---|
16 | s.borderTopWidth = "0px"; |
---|
17 | s.borderRightWidth = "0px"; |
---|
18 | s.borderBottomWidth = "0px"; |
---|
19 | }; |
---|
20 | |
---|
21 | var getBoxWidth = function(n){ |
---|
22 | // marginBox is incredibly slow, so avoid it if we can |
---|
23 | if(n["getBoundingClientRect"]){ |
---|
24 | var bcr = n.getBoundingClientRect(); |
---|
25 | return bcr.width || (bcr.right - bcr.left); |
---|
26 | }else{ |
---|
27 | return domGeom.getMarginBox(n).w; |
---|
28 | } |
---|
29 | }; |
---|
30 | |
---|
31 | return lang.mixin(common, { |
---|
32 | // summary: |
---|
33 | // Common methods to be used by any axis. This is considered "static". |
---|
34 | createText: { |
---|
35 | gfx: function(chart, creator, x, y, align, text, font, fontColor){ |
---|
36 | // summary: |
---|
37 | // Use dojox.gfx to create any text. |
---|
38 | // chart: dojox.charting.Chart |
---|
39 | // The chart to create the text into. |
---|
40 | // creator: dojox.gfx.Surface |
---|
41 | // The graphics surface to use for creating the text. |
---|
42 | // x: Number |
---|
43 | // Where to create the text along the x axis (CSS left). |
---|
44 | // y: Number |
---|
45 | // Where to create the text along the y axis (CSS top). |
---|
46 | // align: String |
---|
47 | // How to align the text. Can be "left", "right", "center". |
---|
48 | // text: String |
---|
49 | // The text to render. |
---|
50 | // font: String |
---|
51 | // The font definition, a la CSS "font". |
---|
52 | // fontColor: String|dojo.Color |
---|
53 | // The color of the resultant text. |
---|
54 | // returns: dojox.gfx.Text |
---|
55 | // The resultant GFX object. |
---|
56 | return creator.createText({ |
---|
57 | x: x, y: y, text: text, align: align |
---|
58 | }).setFont(font).setFill(fontColor); // dojox.gfx.Text |
---|
59 | }, |
---|
60 | html: function(chart, creator, x, y, align, text, font, fontColor, labelWidth){ |
---|
61 | // summary: |
---|
62 | // Use the HTML DOM to create any text. |
---|
63 | // chart: dojox.charting.Chart |
---|
64 | // The chart to create the text into. |
---|
65 | // creator: dojox.gfx.Surface |
---|
66 | // The graphics surface to use for creating the text. |
---|
67 | // x: Number |
---|
68 | // Where to create the text along the x axis (CSS left). |
---|
69 | // y: Number |
---|
70 | // Where to create the text along the y axis (CSS top). |
---|
71 | // align: String |
---|
72 | // How to align the text. Can be "left", "right", "center". |
---|
73 | // text: String |
---|
74 | // The text to render. |
---|
75 | // font: String |
---|
76 | // The font definition, a la CSS "font". |
---|
77 | // fontColor: String|dojo.Color |
---|
78 | // The color of the resultant text. |
---|
79 | // labelWidth: Number? |
---|
80 | // The maximum width of the resultant DOM node. |
---|
81 | // returns: DOMNode |
---|
82 | // The resultant DOMNode (a "div" element). |
---|
83 | |
---|
84 | // setup the text node |
---|
85 | var p = win.doc.createElement("div"), s = p.style, boxWidth; |
---|
86 | // bidi support, if this function exists the module was loaded |
---|
87 | if(chart.getTextDir){ |
---|
88 | p.dir = chart.getTextDir(text); |
---|
89 | } |
---|
90 | clearNode(s); |
---|
91 | s.font = font; |
---|
92 | p.innerHTML = String(text).replace(/\s/g, " "); |
---|
93 | s.color = fontColor; |
---|
94 | // measure the size |
---|
95 | s.position = "absolute"; |
---|
96 | s.left = "-10000px"; |
---|
97 | win.body().appendChild(p); |
---|
98 | var size = g.normalizedLength(g.splitFontString(font).size); |
---|
99 | |
---|
100 | // do we need to calculate the label width? |
---|
101 | if(!labelWidth){ |
---|
102 | boxWidth = getBoxWidth(p); |
---|
103 | } |
---|
104 | // when the textDir is rtl, but the UI ltr needs |
---|
105 | // to recalculate the starting point |
---|
106 | if(p.dir == "rtl"){ |
---|
107 | x += labelWidth ? labelWidth : boxWidth; |
---|
108 | } |
---|
109 | |
---|
110 | // new settings for the text node |
---|
111 | win.body().removeChild(p); |
---|
112 | |
---|
113 | s.position = "relative"; |
---|
114 | if(labelWidth){ |
---|
115 | s.width = labelWidth + "px"; |
---|
116 | // s.border = "1px dotted grey"; |
---|
117 | switch(align){ |
---|
118 | case "middle": |
---|
119 | s.textAlign = "center"; |
---|
120 | s.left = (x - labelWidth / 2) + "px"; |
---|
121 | break; |
---|
122 | case "end": |
---|
123 | s.textAlign = "right"; |
---|
124 | s.left = (x - labelWidth) + "px"; |
---|
125 | break; |
---|
126 | default: |
---|
127 | s.left = x + "px"; |
---|
128 | s.textAlign = "left"; |
---|
129 | break; |
---|
130 | } |
---|
131 | }else{ |
---|
132 | switch(align){ |
---|
133 | case "middle": |
---|
134 | s.left = Math.floor(x - boxWidth / 2) + "px"; |
---|
135 | // s.left = Math.floor(x - p.offsetWidth / 2) + "px"; |
---|
136 | break; |
---|
137 | case "end": |
---|
138 | s.left = Math.floor(x - boxWidth) + "px"; |
---|
139 | // s.left = Math.floor(x - p.offsetWidth) + "px"; |
---|
140 | break; |
---|
141 | //case "start": |
---|
142 | default: |
---|
143 | s.left = Math.floor(x) + "px"; |
---|
144 | break; |
---|
145 | } |
---|
146 | } |
---|
147 | s.top = Math.floor(y - size) + "px"; |
---|
148 | s.whiteSpace = "nowrap"; // hack for WebKit |
---|
149 | // setup the wrapper node |
---|
150 | var wrap = win.doc.createElement("div"), w = wrap.style; |
---|
151 | clearNode(w); |
---|
152 | w.width = "0px"; |
---|
153 | w.height = "0px"; |
---|
154 | // insert nodes |
---|
155 | wrap.appendChild(p) |
---|
156 | chart.node.insertBefore(wrap, chart.node.firstChild); |
---|
157 | return wrap; // DOMNode |
---|
158 | } |
---|
159 | } |
---|
160 | }); |
---|
161 | }); |
---|