tagcanvas.js 60 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102
  1. /**
  2. * Copyright (C) 2010-2015 Graham Breach
  3. *
  4. * This program is free software: you can redistribute it and/or modify
  5. * it under the terms of the GNU Lesser General Public License as published by
  6. * the Free Software Foundation, either version 3 of the License, or
  7. * (at your option) any later version.
  8. *
  9. * This program is distributed in the hope that it will be useful,
  10. * but WITHOUT ANY WARRANTY; without even the implied warranty of
  11. * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  12. * GNU Lesser General Public License for more details.
  13. *
  14. * You should have received a copy of the GNU Lesser General Public License
  15. * along with this program. If not, see <http://www.gnu.org/licenses/>.
  16. */
  17. /**
  18. * TagCanvas 2.7
  19. * For more information, please contact <graham@goat1000.com>
  20. */
  21. (function(){
  22. "use strict";
  23. var i, j, abs = Math.abs, sin = Math.sin, cos = Math.cos, max = Math.max,
  24. min = Math.min, ceil = Math.ceil, sqrt = Math.sqrt, pow = Math.pow,
  25. hexlookup3 = {}, hexlookup2 = {}, hexlookup1 = {
  26. 0:"0,", 1:"17,", 2:"34,", 3:"51,", 4:"68,", 5:"85,",
  27. 6:"102,", 7:"119,", 8:"136,", 9:"153,", a:"170,", A:"170,",
  28. b:"187,", B:"187,", c:"204,", C:"204,", d:"221,", D:"221,",
  29. e:"238,", E:"238,", f:"255,", F:"255,"
  30. }, Oproto, Tproto, TCproto, Mproto, Vproto, TSproto, TCVproto,
  31. doc = document, ocanvas, handlers = {};
  32. for(i = 0; i < 256; ++i) {
  33. j = i.toString(16);
  34. if(i < 16)
  35. j = '0' + j;
  36. hexlookup2[j] = hexlookup2[j.toUpperCase()] = i.toString() + ',';
  37. }
  38. function Defined(d) {
  39. return typeof d != 'undefined';
  40. }
  41. function IsObject(o) {
  42. return typeof o == 'object' && o != null;
  43. }
  44. function Clamp(v, mn, mx) {
  45. return isNaN(v) ? mx : min(mx, max(mn, v));
  46. }
  47. function Nop() {
  48. return false;
  49. }
  50. function TimeNow() {
  51. return new Date().valueOf();
  52. }
  53. function SortList(l, f) {
  54. var nl = [], tl = l.length, i;
  55. for(i = 0; i < tl; ++i)
  56. nl.push(l[i]);
  57. nl.sort(f);
  58. return nl;
  59. }
  60. function Shuffle(a) {
  61. var i = a.length-1, t, p;
  62. while(i) {
  63. p = ~~(Math.random()*i);
  64. t = a[i];
  65. a[i] = a[p];
  66. a[p] = t;
  67. --i;
  68. }
  69. }
  70. function Vector(x, y, z) {
  71. this.x = x;
  72. this.y = y;
  73. this.z = z;
  74. }
  75. Vproto = Vector.prototype;
  76. Vproto.length = function() {
  77. return sqrt(this.x * this.x + this.y * this.y + this.z * this.z);
  78. };
  79. Vproto.dot = function(v) {
  80. return this.x * v.x + this.y * v.y + this.z * v.z;
  81. };
  82. Vproto.cross = function(v) {
  83. var x = this.y * v.z - this.z * v.y,
  84. y = this.z * v.x - this.x * v.z,
  85. z = this.x * v.y - this.y * v.x;
  86. return new Vector(x, y, z);
  87. };
  88. Vproto.angle = function(v) {
  89. var dot = this.dot(v), ac;
  90. if(dot == 0)
  91. return Math.PI / 2.0;
  92. ac = dot / (this.length() * v.length());
  93. if(ac >= 1)
  94. return 0;
  95. if(ac <= -1)
  96. return Math.PI;
  97. return Math.acos(ac);
  98. };
  99. Vproto.unit = function() {
  100. var l = this.length();
  101. return new Vector(this.x / l, this.y / l, this.z / l);
  102. };
  103. function MakeVector(lg, lt) {
  104. lt = lt * Math.PI / 180;
  105. lg = lg * Math.PI / 180;
  106. var x = sin(lg) * cos(lt), y = -sin(lt), z = -cos(lg) * cos(lt);
  107. return new Vector(x, y, z);
  108. }
  109. function Matrix(a) {
  110. this[1] = {1: a[0], 2: a[1], 3: a[2]};
  111. this[2] = {1: a[3], 2: a[4], 3: a[5]};
  112. this[3] = {1: a[6], 2: a[7], 3: a[8]};
  113. }
  114. Mproto = Matrix.prototype;
  115. Matrix.Identity = function() {
  116. return new Matrix([1,0,0, 0,1,0, 0,0,1]);
  117. };
  118. Matrix.Rotation = function(angle, u) {
  119. var sina = sin(angle), cosa = cos(angle), mcos = 1 - cosa;
  120. return new Matrix([
  121. cosa + pow(u.x, 2) * mcos, u.x * u.y * mcos - u.z * sina, u.x * u.z * mcos + u.y * sina,
  122. u.y * u.x * mcos + u.z * sina, cosa + pow(u.y, 2) * mcos, u.y * u.z * mcos - u.x * sina,
  123. u.z * u.x * mcos - u.y * sina, u.z * u.y * mcos + u.x * sina, cosa + pow(u.z, 2) * mcos
  124. ]);
  125. }
  126. Mproto.mul = function(m) {
  127. var a = [], i, j, mmatrix = (m.xform ? 1 : 0);
  128. for(i = 1; i <= 3; ++i)
  129. for(j = 1; j <= 3; ++j) {
  130. if(mmatrix)
  131. a.push(this[i][1] * m[1][j] +
  132. this[i][2] * m[2][j] +
  133. this[i][3] * m[3][j]);
  134. else
  135. a.push(this[i][j] * m);
  136. }
  137. return new Matrix(a);
  138. };
  139. Mproto.xform = function(p) {
  140. var a = {}, x = p.x, y = p.y, z = p.z;
  141. a.x = x * this[1][1] + y * this[2][1] + z * this[3][1];
  142. a.y = x * this[1][2] + y * this[2][2] + z * this[3][2];
  143. a.z = x * this[1][3] + y * this[2][3] + z * this[3][3];
  144. return a;
  145. };
  146. function PointsOnSphere(n,xr,yr,zr) {
  147. var i, y, r, phi, pts = [], inc = Math.PI * (3-sqrt(5)), off = 2/n;
  148. for(i = 0; i < n; ++i) {
  149. y = i * off - 1 + (off / 2);
  150. r = sqrt(1 - y*y);
  151. phi = i * inc;
  152. pts.push([cos(phi) * r * xr, y * yr, sin(phi) * r * zr]);
  153. }
  154. return pts;
  155. }
  156. function Cylinder(n,o,xr,yr,zr) {
  157. var phi, pts = [], inc = Math.PI * (3-sqrt(5)), off = 2/n, i, j, k, l;
  158. for(i = 0; i < n; ++i) {
  159. j = i * off - 1 + (off / 2);
  160. phi = i * inc;
  161. k = cos(phi);
  162. l = sin(phi);
  163. pts.push(o ? [j * xr, k * yr, l * zr] : [k * xr, j * yr, l * zr]);
  164. }
  165. return pts;
  166. }
  167. function Ring(o, n, xr, yr, zr, j) {
  168. var phi, pts = [], inc = Math.PI * 2 / n, i, k, l;
  169. for(i = 0; i < n; ++i) {
  170. phi = i * inc;
  171. k = cos(phi);
  172. l = sin(phi);
  173. pts.push(o ? [j * xr, k * yr, l * zr] : [k * xr, j * yr, l * zr]);
  174. }
  175. return pts;
  176. }
  177. function PointsOnCylinderV(n,xr,yr,zr) { return Cylinder(n, 0, xr, yr, zr) }
  178. function PointsOnCylinderH(n,xr,yr,zr) { return Cylinder(n, 1, xr, yr, zr) }
  179. function PointsOnRingV(n, xr, yr, zr, offset) {
  180. offset = isNaN(offset) ? 0 : offset * 1;
  181. return Ring(0, n, xr, yr, zr, offset);
  182. }
  183. function PointsOnRingH(n, xr, yr, zr, offset) {
  184. offset = isNaN(offset) ? 0 : offset * 1;
  185. return Ring(1, n, xr, yr, zr, offset);
  186. }
  187. function CentreImage(t) {
  188. var i = new Image;
  189. i.onload = function() {
  190. var dx = i.width / 2, dy = i.height / 2;
  191. t.centreFunc = function(c, w, h, cx, cy) {
  192. c.setTransform(1, 0, 0, 1, 0, 0);
  193. c.globalAlpha = 1;
  194. c.drawImage(i, cx - dx, cy - dy);
  195. };
  196. };
  197. i.src = t.centreImage;
  198. }
  199. function SetAlpha(c,a) {
  200. var d = c, p1, p2, ae = (a*1).toPrecision(3) + ')';
  201. if(c[0] === '#') {
  202. if(!hexlookup3[c])
  203. if(c.length === 4)
  204. hexlookup3[c] = 'rgba(' + hexlookup1[c[1]] + hexlookup1[c[2]] + hexlookup1[c[3]];
  205. else
  206. hexlookup3[c] = 'rgba(' + hexlookup2[c.substr(1,2)] + hexlookup2[c.substr(3,2)] + hexlookup2[c.substr(5,2)];
  207. d = hexlookup3[c] + ae;
  208. } else if(c.substr(0,4) === 'rgb(' || c.substr(0,4) === 'hsl(') {
  209. d = (c.replace('(','a(').replace(')', ',' + ae));
  210. } else if(c.substr(0,5) === 'rgba(' || c.substr(0,5) === 'hsla(') {
  211. p1 = c.lastIndexOf(',') + 1, p2 = c.indexOf(')');
  212. a *= parseFloat(c.substring(p1,p2));
  213. d = c.substr(0,p1) + a.toPrecision(3) + ')';
  214. }
  215. return d;
  216. }
  217. function NewCanvas(w,h) {
  218. // if using excanvas, give up now
  219. if(window.G_vmlCanvasManager)
  220. return null;
  221. var c = doc.createElement('canvas');
  222. c.width = w;
  223. c.height = h;
  224. return c;
  225. }
  226. // I think all browsers pass this test now...
  227. function ShadowAlphaBroken() {
  228. var cv = NewCanvas(3,3), c, i;
  229. if(!cv)
  230. return false;
  231. c = cv.getContext('2d');
  232. c.strokeStyle = '#000';
  233. c.shadowColor = '#fff';
  234. c.shadowBlur = 3;
  235. c.globalAlpha = 0;
  236. c.strokeRect(2,2,2,2);
  237. c.globalAlpha = 1;
  238. i = c.getImageData(2,2,1,1);
  239. cv = null;
  240. return (i.data[0] > 0);
  241. }
  242. function SetGradient(c, l, o, g) {
  243. var gd = c.createLinearGradient(0, 0, l, 0), i;
  244. for(i in g)
  245. gd.addColorStop(1 - i, g[i]);
  246. c.fillStyle = gd;
  247. c.fillRect(0, o, l, 1);
  248. }
  249. function FindGradientColour(tc, p, r) {
  250. var l = 1024, h = 1, gl = tc.weightGradient, cv, c, i, d;
  251. if(tc.gCanvas) {
  252. c = tc.gCanvas.getContext('2d');
  253. h = tc.gCanvas.height;
  254. } else {
  255. if(IsObject(gl[0]))
  256. h = gl.length;
  257. else
  258. gl = [gl];
  259. tc.gCanvas = cv = NewCanvas(l, h);
  260. if(!cv)
  261. return null;
  262. c = cv.getContext('2d');
  263. for(i = 0; i < h; ++i)
  264. SetGradient(c, l, i, gl[i]);
  265. }
  266. r = max(min(r || 0, h - 1), 0);
  267. d = c.getImageData(~~((l - 1) * p), r, 1, 1).data;
  268. return 'rgba(' + d[0] + ',' + d[1] + ',' + d[2] + ',' + (d[3]/255) + ')';
  269. }
  270. function TextSet(ctxt, font, colour, strings, padx, pady, shadowColour,
  271. shadowBlur, shadowOffsets, maxWidth, widths, align) {
  272. var xo = padx + (shadowBlur || 0) +
  273. (shadowOffsets.length && shadowOffsets[0] < 0 ? abs(shadowOffsets[0]) : 0),
  274. yo = pady + (shadowBlur || 0) +
  275. (shadowOffsets.length && shadowOffsets[1] < 0 ? abs(shadowOffsets[1]) : 0), i, xc;
  276. ctxt.font = font;
  277. ctxt.textBaseline = 'top';
  278. ctxt.fillStyle = colour;
  279. shadowColour && (ctxt.shadowColor = shadowColour);
  280. shadowBlur && (ctxt.shadowBlur = shadowBlur);
  281. shadowOffsets.length && (ctxt.shadowOffsetX = shadowOffsets[0],
  282. ctxt.shadowOffsetY = shadowOffsets[1]);
  283. for(i = 0; i < strings.length; ++i) {
  284. xc = 0;
  285. if(widths) {
  286. if('right' == align) {
  287. xc = maxWidth - widths[i];
  288. } else if('centre' == align) {
  289. xc = (maxWidth - widths[i]) / 2;
  290. }
  291. }
  292. ctxt.fillText(strings[i], xo + xc, yo);
  293. yo += parseInt(font);
  294. }
  295. }
  296. function RRect(c, x, y, w, h, r, s) {
  297. if(r) {
  298. c.beginPath();
  299. c.moveTo(x, y + h - r);
  300. c.arcTo(x, y, x + r, y, r);
  301. c.arcTo(x + w, y, x + w, y + r, r);
  302. c.arcTo(x + w, y + h, x + w - r, y + h, r);
  303. c.arcTo(x, y + h, x, y + h - r, r);
  304. c.closePath();
  305. c[s ? 'stroke' : 'fill']();
  306. } else {
  307. c[s ? 'strokeRect' : 'fillRect'](x, y, w, h);
  308. }
  309. }
  310. function TextCanvas(strings, font, w, h, maxWidth, stringWidths, align, valign,
  311. scale) {
  312. this.strings = strings;
  313. this.font = font;
  314. this.width = w;
  315. this.height = h;
  316. this.maxWidth = maxWidth;
  317. this.stringWidths = stringWidths;
  318. this.align = align;
  319. this.valign = valign;
  320. this.scale = scale;
  321. }
  322. TCVproto = TextCanvas.prototype;
  323. TCVproto.SetImage = function(image, w, h, position, padding, align, valign,
  324. scale) {
  325. this.image = image;
  326. this.iwidth = w * this.scale;
  327. this.iheight = h * this.scale;
  328. this.ipos = position;
  329. this.ipad = padding * this.scale;
  330. this.iscale = scale;
  331. this.ialign = align;
  332. this.ivalign = valign;
  333. };
  334. TCVproto.Align = function(size, space, a) {
  335. var pos = 0;
  336. if(a == 'right' || a == 'bottom')
  337. pos = space - size;
  338. else if(a != 'left' && a != 'top')
  339. pos = (space - size) / 2;
  340. return pos;
  341. };
  342. TCVproto.Create = function(colour, bgColour, bgOutline, bgOutlineThickness,
  343. shadowColour, shadowBlur, shadowOffsets, padding, radius) {
  344. var cv, cw, ch, c, x1, x2, y1, y2, offx, offy, ix, iy, iw, ih,
  345. sox = abs(shadowOffsets[0]), soy = abs(shadowOffsets[1]), shadowcv, shadowc;
  346. padding = max(padding, sox + shadowBlur, soy + shadowBlur);
  347. x1 = 2 * (padding + bgOutlineThickness);
  348. y1 = 2 * (padding + bgOutlineThickness);
  349. cw = this.width + x1;
  350. ch = this.height + y1;
  351. offx = offy = padding + bgOutlineThickness;
  352. if(this.image) {
  353. ix = iy = padding + bgOutlineThickness;
  354. iw = this.iwidth;
  355. ih = this.iheight;
  356. if(this.ipos == 'top' || this.ipos == 'bottom') {
  357. if(iw < this.width)
  358. ix += this.Align(iw, this.width, this.ialign);
  359. else
  360. offx += this.Align(this.width, iw, this.align);
  361. if(this.ipos == 'top')
  362. offy += ih + this.ipad;
  363. else
  364. iy += this.height + this.ipad;
  365. cw = max(cw, iw + x1);
  366. ch += ih + this.ipad;
  367. } else {
  368. if(ih < this.height)
  369. iy += this.Align(ih, this.height, this.ivalign);
  370. else
  371. offy += this.Align(this.height, ih, this.valign);
  372. if(this.ipos == 'right')
  373. ix += this.width + this.ipad;
  374. else
  375. offx += iw + this.ipad;
  376. cw += iw + this.ipad;
  377. ch = max(ch, ih + y1);
  378. }
  379. }
  380. cv = NewCanvas(cw, ch);
  381. if(!cv)
  382. return null;
  383. x1 = y1 = bgOutlineThickness / 2;
  384. x2 = cw - bgOutlineThickness;
  385. y2 = ch - bgOutlineThickness;
  386. c = cv.getContext('2d');
  387. if(bgColour) {
  388. c.fillStyle = bgColour;
  389. RRect(c, x1, y1, x2, y2, radius);
  390. }
  391. if(bgOutlineThickness) {
  392. c.strokeStyle = bgOutline;
  393. c.lineWidth = bgOutlineThickness;
  394. RRect(c, x1, y1, x2, y2, radius, true);
  395. }
  396. if(shadowBlur || sox || soy) {
  397. // use a transparent canvas to draw on
  398. shadowcv = NewCanvas(cw, ch);
  399. if(shadowcv) {
  400. shadowc = c;
  401. c = shadowcv.getContext('2d');
  402. }
  403. }
  404. // don't use TextSet shadow support because it adds space for shadow
  405. TextSet(c, this.font, colour, this.strings, offx, offy, 0, 0, [],
  406. this.maxWidth, this.stringWidths, this.align);
  407. if(this.image)
  408. c.drawImage(this.image, ix, iy, iw, ih);
  409. if(shadowc) {
  410. // draw the text and image with the added shadow
  411. c = shadowc;
  412. shadowColour && (c.shadowColor = shadowColour);
  413. shadowBlur && (c.shadowBlur = shadowBlur);
  414. c.shadowOffsetX = shadowOffsets[0];
  415. c.shadowOffsetY = shadowOffsets[1];
  416. c.drawImage(shadowcv, 0, 0);
  417. }
  418. return cv;
  419. };
  420. function ExpandImage(i, w, h) {
  421. var cv = NewCanvas(w, h), c;
  422. if(!cv)
  423. return null;
  424. c = cv.getContext('2d');
  425. c.drawImage(i, (w - i.width) / 2, (h - i.height) / 2);
  426. return cv;
  427. }
  428. function ScaleImage(i, w, h) {
  429. var cv = NewCanvas(w, h), c;
  430. if(!cv)
  431. return null;
  432. c = cv.getContext('2d');
  433. c.drawImage(i, 0, 0, w, h);
  434. return cv;
  435. }
  436. function AddBackgroundToImage(i, w, h, scale, colour, othickness, ocolour,
  437. padding, radius, ofill) {
  438. var cw = w + ((2 * padding) + othickness) * scale,
  439. ch = h + ((2 * padding) + othickness) * scale,
  440. cv = NewCanvas(cw, ch), c, x1, y1, x2, y2, ocanvas, cc;
  441. if(!cv)
  442. return null;
  443. othickness *= scale;
  444. radius *= scale;
  445. x1 = y1 = othickness / 2;
  446. x2 = cw - othickness;
  447. y2 = ch - othickness;
  448. padding = (padding * scale) + x1; // add space for outline
  449. c = cv.getContext('2d');
  450. if(colour) {
  451. c.fillStyle = colour;
  452. RRect(c, x1, y1, x2, y2, radius);
  453. }
  454. if(othickness) {
  455. c.strokeStyle = ocolour;
  456. c.lineWidth = othickness;
  457. RRect(c, x1, y1, x2, y2, radius, true);
  458. }
  459. if(ofill) {
  460. // use compositing to colour in the image and border
  461. ocanvas = NewCanvas(cw, ch);
  462. cc = ocanvas.getContext('2d');
  463. cc.drawImage(i, padding, padding, w, h);
  464. cc.globalCompositeOperation = 'source-in';
  465. cc.fillStyle = ocolour;
  466. cc.fillRect(0, 0, cw, ch);
  467. cc.globalCompositeOperation = 'destination-over';
  468. cc.drawImage(cv, 0, 0);
  469. cc.globalCompositeOperation = 'source-over';
  470. c.drawImage(ocanvas, 0, 0);
  471. } else {
  472. c.drawImage(i, padding, padding, i.width, i.height);
  473. }
  474. return {image: cv, width: cw / scale, height: ch / scale};
  475. }
  476. /**
  477. * Creates a new canvas containing the image and its shadow
  478. * Returns an object containing the image and its dimensions at z=0
  479. */
  480. function AddShadowToImage(i, w, h, scale, sc, sb, so) {
  481. var sw = abs(so[0]), sh = abs(so[1]),
  482. cw = w + (sw > sb ? sw + sb : sb * 2) * scale,
  483. ch = h + (sh > sb ? sh + sb : sb * 2) * scale,
  484. xo = scale * ((sb || 0) + (so[0] < 0 ? sw : 0)),
  485. yo = scale * ((sb || 0) + (so[1] < 0 ? sh : 0)), cv, c;
  486. cv = NewCanvas(cw, ch);
  487. if(!cv)
  488. return null;
  489. c = cv.getContext('2d');
  490. sc && (c.shadowColor = sc);
  491. sb && (c.shadowBlur = sb * scale);
  492. so && (c.shadowOffsetX = so[0] * scale, c.shadowOffsetY = so[1] * scale);
  493. c.drawImage(i, xo, yo, w, h);
  494. return {image: cv, width: cw / scale, height: ch / scale};
  495. }
  496. function FindTextBoundingBox(s,f,ht) {
  497. var w = parseInt(s.toString().length * ht), h = parseInt(ht * 2 * s.length),
  498. cv = NewCanvas(w,h), c, idata, w1, h1, x, y, i, ex;
  499. if(!cv)
  500. return null;
  501. c = cv.getContext('2d');
  502. c.fillStyle = '#000';
  503. c.fillRect(0,0,w,h);
  504. TextSet(c,ht + 'px ' + f,'#fff',s,0,0,0,0,[],'centre')
  505. idata = c.getImageData(0,0,w,h);
  506. w1 = idata.width; h1 = idata.height;
  507. ex = {
  508. min: { x: w1, y: h1 },
  509. max: { x: -1, y: -1 }
  510. };
  511. for(y = 0; y < h1; ++y) {
  512. for(x = 0; x < w1; ++x) {
  513. i = (y * w1 + x) * 4;
  514. if(idata.data[i+1] > 0) {
  515. if(x < ex.min.x) ex.min.x = x;
  516. if(x > ex.max.x) ex.max.x = x;
  517. if(y < ex.min.y) ex.min.y = y;
  518. if(y > ex.max.y) ex.max.y = y;
  519. }
  520. }
  521. }
  522. // device pixels might not be css pixels
  523. if(w1 != w) {
  524. ex.min.x *= (w / w1);
  525. ex.max.x *= (w / w1);
  526. }
  527. if(h1 != h) {
  528. ex.min.y *= (w / h1);
  529. ex.max.y *= (w / h1);
  530. }
  531. cv = null;
  532. return ex;
  533. }
  534. function FixFont(f) {
  535. return "'" + f.replace(/(\'|\")/g,'').replace(/\s*,\s*/g, "', '") + "'";
  536. }
  537. function AddHandler(h,f,e) {
  538. e = e || doc;
  539. if(e.addEventListener)
  540. e.addEventListener(h,f,false);
  541. else
  542. e.attachEvent('on' + h, f);
  543. }
  544. function RemoveHandler(h,f,e) {
  545. e = e || doc;
  546. if(e.removeEventListener)
  547. e.removeEventListener(h, f);
  548. else
  549. e.detachEvent('on' + h, f);
  550. }
  551. function AddImage(i, o, t, tc) {
  552. var s = tc.imageScale, mscale, ic, bc, oc, iw, ih;
  553. // image not loaded, wait for image onload
  554. if(!o.complete)
  555. return AddHandler('load',function() { AddImage(i,o,t,tc); }, o);
  556. if(!i.complete)
  557. return AddHandler('load',function() { AddImage(i,o,t,tc); }, i);
  558. // Yes, this does look like nonsense, but it makes sure that both the
  559. // width and height are actually set and not just calculated. This is
  560. // required to keep proportional sizes when the images are hidden, so
  561. // the images can be used again for another cloud.
  562. o.width = o.width;
  563. o.height = o.height;
  564. if(s) {
  565. i.width = o.width * s;
  566. i.height = o.height * s;
  567. }
  568. // the standard width of the image, with imageScale applied
  569. t.iw = i.width;
  570. t.ih = i.height;
  571. if(tc.txtOpt) {
  572. ic = i;
  573. mscale = tc.zoomMax * tc.txtScale;
  574. iw = t.iw * mscale;
  575. ih = t.ih * mscale;
  576. if(iw < o.naturalWidth || ih < o.naturalHeight) {
  577. ic = ScaleImage(i, iw, ih);
  578. if(ic)
  579. t.fimage = ic;
  580. } else {
  581. iw = t.iw;
  582. ih = t.ih;
  583. mscale = 1;
  584. }
  585. if(!t.HasText()) {
  586. if(tc.shadow) {
  587. ic = AddShadowToImage(t.image, iw, ih, mscale, tc.shadow, tc.shadowBlur,
  588. tc.shadowOffset);
  589. if(ic) {
  590. t.fimage = ic.image;
  591. t.w = ic.width;
  592. t.h = ic.height;
  593. }
  594. }
  595. if(tc.bgColour || tc.bgOutlineThickness) {
  596. bc = tc.bgColour == 'tag' ? GetProperty(t.a, 'background-color') :
  597. tc.bgColour;
  598. oc = tc.bgOutline == 'tag' ? GetProperty(t.a, 'color') :
  599. (tc.bgOutline || tc.textColour);
  600. iw = t.fimage.width;
  601. ih = t.fimage.height;
  602. if(tc.outlineMethod == 'colour') {
  603. // create the outline version first, using the current image state
  604. ic = AddBackgroundToImage(t.fimage, iw, ih, mscale, bc,
  605. tc.bgOutlineThickness, tc.outlineColour, tc.padding, tc.bgRadius, 1);
  606. if(ic)
  607. t.oimage = ic.image;
  608. }
  609. ic = AddBackgroundToImage(t.fimage, iw, ih, mscale, bc,
  610. tc.bgOutlineThickness, oc, tc.padding, tc.bgRadius);
  611. if(ic) {
  612. t.fimage = ic.image;
  613. t.w = ic.width;
  614. t.h = ic.height;
  615. }
  616. }
  617. if(tc.outlineMethod == 'size') {
  618. if(tc.outlineIncrease > 0) {
  619. t.iw += 2 * tc.outlineIncrease;
  620. t.ih += 2 * tc.outlineIncrease;
  621. iw = mscale * t.iw;
  622. ih = mscale * t.ih;
  623. ic = ScaleImage(t.fimage, iw, ih);
  624. t.oimage = ic;
  625. t.fimage = ExpandImage(t.fimage, t.oimage.width, t.oimage.height);
  626. } else {
  627. iw = mscale * (t.iw + (2 * tc.outlineIncrease));
  628. ih = mscale * (t.ih + (2 * tc.outlineIncrease));
  629. ic = ScaleImage(t.fimage, iw, ih);
  630. t.oimage = ExpandImage(ic, t.fimage.width, t.fimage.height);
  631. }
  632. }
  633. }
  634. }
  635. t.Init();
  636. }
  637. function GetProperty(e,p) {
  638. var dv = doc.defaultView, pc = p.replace(/\-([a-z])/g,function(a){return a.charAt(1).toUpperCase()});
  639. return (dv && dv.getComputedStyle && dv.getComputedStyle(e,null).getPropertyValue(p)) ||
  640. (e.currentStyle && e.currentStyle[pc]);
  641. }
  642. function FindWeight(a, wFrom, tHeight) {
  643. var w = 1, p;
  644. if(wFrom) {
  645. w = 1 * (a.getAttribute(wFrom) || tHeight);
  646. } else if(p = GetProperty(a,'font-size')) {
  647. w = (p.indexOf('px') > -1 && p.replace('px','') * 1) ||
  648. (p.indexOf('pt') > -1 && p.replace('pt','') * 1.25) ||
  649. p * 3.3;
  650. }
  651. return w;
  652. }
  653. function EventToCanvasId(e) {
  654. return e.target && Defined(e.target.id) ? e.target.id :
  655. e.srcElement.parentNode.id;
  656. }
  657. function EventXY(e, c) {
  658. var xy, p, xmul = parseInt(GetProperty(c, 'width')) / c.width,
  659. ymul = parseInt(GetProperty(c, 'height')) / c.height;
  660. if(Defined(e.offsetX)) {
  661. xy = {x: e.offsetX, y: e.offsetY};
  662. } else {
  663. p = AbsPos(c.id);
  664. if(Defined(e.changedTouches))
  665. e = e.changedTouches[0];
  666. if(e.pageX)
  667. xy = {x: e.pageX - p.x, y: e.pageY - p.y};
  668. }
  669. if(xy && xmul && ymul) {
  670. xy.x /= xmul;
  671. xy.y /= ymul;
  672. }
  673. return xy;
  674. }
  675. function MouseOut(e) {
  676. var cv = e.target || e.fromElement.parentNode, tc = TagCanvas.tc[cv.id];
  677. if(tc) {
  678. tc.mx = tc.my = -1;
  679. tc.UnFreeze();
  680. tc.EndDrag();
  681. }
  682. }
  683. function MouseMove(e) {
  684. return;
  685. var i, t = TagCanvas, tc, p, tg = EventToCanvasId(e);
  686. for(i in t.tc) {
  687. tc = t.tc[i];
  688. if(tc.tttimer) {
  689. clearTimeout(tc.tttimer);
  690. tc.tttimer = null;
  691. }
  692. }
  693. if(tg && t.tc[tg]) {
  694. tc = t.tc[tg];
  695. if(p = EventXY(e, tc.canvas)) {
  696. tc.mx = p.x;
  697. tc.my = p.y;
  698. tc.Drag(e, p);
  699. }
  700. tc.drawn = 0;
  701. }
  702. }
  703. function MouseDown(e) {
  704. var t = TagCanvas, cb = doc.addEventListener ? 0 : 1,
  705. tg = EventToCanvasId(e);
  706. if(tg && e.button == cb && t.tc[tg]) {
  707. t.tc[tg].BeginDrag(e);
  708. }
  709. }
  710. function MouseUp(e) {
  711. var t = TagCanvas, cb = doc.addEventListener ? 0 : 1,
  712. tg = EventToCanvasId(e), tc;
  713. if(tg && e.button == cb && t.tc[tg]) {
  714. tc = t.tc[tg];
  715. MouseMove(e);
  716. if(!tc.EndDrag() && !tc.touchState)
  717. tc.Clicked(e);
  718. }
  719. }
  720. function TouchDown(e) {
  721. var tg = EventToCanvasId(e), tc = (tg && TagCanvas.tc[tg]), p;
  722. if(tc && e.changedTouches) {
  723. if(e.touches.length == 1 && tc.touchState == 0) {
  724. tc.touchState = 1;
  725. tc.BeginDrag(e);
  726. if(p = EventXY(e, tc.canvas)) {
  727. tc.mx = p.x;
  728. tc.my = p.y;
  729. tc.drawn = 0;
  730. }
  731. } else if(e.targetTouches.length == 2 && tc.pinchZoom) {
  732. tc.touchState = 3;
  733. tc.EndDrag();
  734. tc.BeginPinch(e);
  735. } else {
  736. tc.EndDrag();
  737. tc.EndPinch();
  738. tc.touchState = 0;
  739. }
  740. }
  741. }
  742. function TouchUp(e) {
  743. var tg = EventToCanvasId(e), tc = (tg && TagCanvas.tc[tg]);
  744. if(tc && e.changedTouches) {
  745. switch(tc.touchState) {
  746. case 1:
  747. tc.Draw();
  748. tc.Clicked();
  749. break;
  750. case 2:
  751. tc.EndDrag();
  752. break;
  753. case 3:
  754. tc.EndPinch();
  755. }
  756. tc.touchState = 0;
  757. }
  758. }
  759. function TouchMove(e) {
  760. var i, t = TagCanvas, tc, p, tg = EventToCanvasId(e);
  761. for(i in t.tc) {
  762. tc = t.tc[i];
  763. if(tc.tttimer) {
  764. clearTimeout(tc.tttimer);
  765. tc.tttimer = null;
  766. }
  767. }
  768. tc = (tg && t.tc[tg]);
  769. if(tc && e.changedTouches && tc.touchState) {
  770. switch(tc.touchState) {
  771. case 1:
  772. case 2:
  773. if(p = EventXY(e, tc.canvas)) {
  774. tc.mx = p.x;
  775. tc.my = p.y;
  776. if(tc.Drag(e, p))
  777. tc.touchState = 2;
  778. }
  779. break;
  780. case 3:
  781. tc.Pinch(e);
  782. }
  783. tc.drawn = 0;
  784. }
  785. }
  786. function MouseWheel(e) {
  787. var t = TagCanvas, tg = EventToCanvasId(e);
  788. if(tg && t.tc[tg]) {
  789. e.cancelBubble = true;
  790. e.returnValue = false;
  791. e.preventDefault && e.preventDefault();
  792. t.tc[tg].Wheel((e.wheelDelta || e.detail) > 0);
  793. }
  794. }
  795. function DrawCanvas() {
  796. DrawCanvasRAF(TimeNow());
  797. }
  798. function DrawCanvasRAF(t) {
  799. var tc = TagCanvas.tc, i;
  800. TagCanvas.NextFrame(TagCanvas.interval);
  801. t = t || TimeNow();
  802. for(i in tc)
  803. tc[i].Draw(t);
  804. }
  805. function AbsPos(id) {
  806. var e = doc.getElementById(id), r = e.getBoundingClientRect(),
  807. dd = doc.documentElement, b = doc.body, w = window,
  808. xs = w.pageXOffset || dd.scrollLeft,
  809. ys = w.pageYOffset || dd.scrollTop,
  810. xo = dd.clientLeft || b.clientLeft,
  811. yo = dd.clientTop || b.clientTop;
  812. return { x: r.left + xs - xo, y: r.top + ys - yo };
  813. }
  814. function Project(tc,p1,sx,sy) {
  815. var m = tc.radius * tc.z1 / (tc.z1 + tc.z2 + p1.z);
  816. return {
  817. x: p1.x * m * sx,
  818. y: p1.y * m * sy,
  819. z: p1.z,
  820. w: (tc.z1 - p1.z) / tc.z2
  821. };
  822. }
  823. /**
  824. * @constructor
  825. * for recursively splitting tag contents on <br> tags
  826. */
  827. function TextSplitter(e) {
  828. this.e = e;
  829. this.br = 0;
  830. this.line = [];
  831. this.text = [];
  832. this.original = e.innerText || e.textContent;
  833. }
  834. TSproto = TextSplitter.prototype;
  835. TSproto.Empty = function() {
  836. for(var i = 0; i < this.text.length; ++i)
  837. if(this.text[i].length)
  838. return false;
  839. return true;
  840. };
  841. TSproto.Lines = function(e) {
  842. var r = e ? 1 : 0, cn, cl, i;
  843. e = e || this.e;
  844. cn = e.childNodes;
  845. cl = cn.length;
  846. for(i = 0; i < cl; ++i) {
  847. if(cn[i].nodeName == 'BR') {
  848. this.text.push(this.line.join(' '));
  849. this.br = 1;
  850. } else if(cn[i].nodeType == 3) {
  851. if(this.br) {
  852. this.line = [cn[i].nodeValue];
  853. this.br = 0;
  854. } else {
  855. this.line.push(cn[i].nodeValue);
  856. }
  857. } else {
  858. this.Lines(cn[i]);
  859. }
  860. }
  861. r || this.br || this.text.push(this.line.join(' '));
  862. return this.text;
  863. };
  864. TSproto.SplitWidth = function(w, c, f, h) {
  865. var i, j, words, text = [];
  866. c.font = h + 'px ' + f;
  867. for(i = 0; i < this.text.length; ++i) {
  868. words = this.text[i].split(/\s+/);
  869. this.line = [words[0]];
  870. for(j = 1; j < words.length; ++j) {
  871. if(c.measureText(this.line.join(' ') + ' ' + words[j]).width > w) {
  872. text.push(this.line.join(' '));
  873. this.line = [words[j]];
  874. } else {
  875. this.line.push(words[j]);
  876. }
  877. }
  878. text.push(this.line.join(' '));
  879. }
  880. return this.text = text;
  881. };
  882. /**
  883. * @constructor
  884. */
  885. function Outline(tc,t) {
  886. this.ts = TimeNow();
  887. this.tc = tc;
  888. this.tag = t;
  889. this.x = this.y = this.w = this.h = this.sc = 1;
  890. this.z = 0;
  891. this.Draw = tc.pulsateTo < 1 && tc.outlineMethod != 'colour' ?
  892. this.DrawPulsate : this.DrawSimple;
  893. this.radius = tc.outlineRadius | 0;
  894. this.SetMethod(tc.outlineMethod);
  895. }
  896. Oproto = Outline.prototype;
  897. Oproto.SetMethod = function(om) {
  898. var methods = {
  899. block: ['PreDraw','DrawBlock'],
  900. colour: ['PreDraw','DrawColour'],
  901. outline: ['PostDraw','DrawOutline'],
  902. classic: ['LastDraw','DrawOutline'],
  903. size: ['PreDraw','DrawColour'],
  904. none: ['LastDraw']
  905. }, funcs = methods[om] || methods.outline;
  906. if(om == 'none') {
  907. this.Draw = function() { return 1; }
  908. } else {
  909. this.drawFunc = this[funcs[1]];
  910. }
  911. this[funcs[0]] = this.Draw;
  912. };
  913. Oproto.Update = function(x,y,w,h,sc,z,xo,yo) {
  914. var o = this.tc.outlineOffset, o2 = 2 * o;
  915. this.x = sc * x + xo - o;
  916. this.y = sc * y + yo - o;
  917. this.w = sc * w + o2;
  918. this.h = sc * h + o2;
  919. this.sc = sc; // used to determine frontmost
  920. this.z = z;
  921. };
  922. Oproto.DrawOutline = function(c,x,y,w,h,colour) {
  923. c.strokeStyle = colour;
  924. RRect(c, x, y, w, h, this.radius, true);
  925. };
  926. Oproto.DrawColour = function(c,x,y,w,h,colour,tag,x1,y1) {
  927. if(tag.oimage) {
  928. tag.alpha = 1;
  929. tag.Draw(c, x1, y1, tag.oimage);
  930. return 1;
  931. }
  932. return this[tag.image ? 'DrawColourImage' : 'DrawColourText'](c,x,y,w,h,colour,tag,x1,y1);
  933. };
  934. Oproto.DrawColourText = function(c,x,y,w,h,colour,tag,x1,y1) {
  935. var normal = tag.colour;
  936. tag.colour = colour;
  937. tag.alpha = 1;
  938. tag.Draw(c,x1,y1);
  939. tag.colour = normal;
  940. return 1;
  941. };
  942. Oproto.DrawColourImage = function(c,x,y,w,h,colour,tag,x1,y1) {
  943. var ccanvas = c.canvas, fx = ~~max(x,0), fy = ~~max(y,0),
  944. fw = min(ccanvas.width - fx, w) + .5|0, fh = min(ccanvas.height - fy,h) + .5|0, cc;
  945. if(ocanvas)
  946. ocanvas.width = fw, ocanvas.height = fh;
  947. else
  948. ocanvas = NewCanvas(fw, fh);
  949. if(!ocanvas)
  950. return this.SetMethod('outline'); // if using IE and images, give up!
  951. cc = ocanvas.getContext('2d');
  952. cc.drawImage(ccanvas,fx,fy,fw,fh,0,0,fw,fh);
  953. c.clearRect(fx,fy,fw,fh);
  954. tag.alpha = 1;
  955. tag.Draw(c,x1,y1);
  956. c.setTransform(1,0,0,1,0,0);
  957. c.save();
  958. c.beginPath();
  959. c.rect(fx,fy,fw,fh);
  960. c.clip();
  961. c.globalCompositeOperation = 'source-in';
  962. c.fillStyle = colour;
  963. c.fillRect(fx,fy,fw,fh);
  964. c.restore();
  965. c.globalCompositeOperation = 'destination-over';
  966. c.drawImage(ocanvas,0,0,fw,fh,fx,fy,fw,fh);
  967. c.globalCompositeOperation = 'source-over';
  968. return 1;
  969. };
  970. Oproto.DrawBlock = function(c,x,y,w,h,colour) {
  971. c.fillStyle = colour;
  972. RRect(c, x, y, w, h, this.radius);
  973. };
  974. Oproto.DrawSimple = function(c, tag, x1, y1) {
  975. var t = this.tc;
  976. c.setTransform(1,0,0,1,0,0);
  977. c.strokeStyle = t.outlineColour;
  978. c.lineWidth = t.outlineThickness;
  979. c.shadowBlur = c.shadowOffsetX = c.shadowOffsetY = 0;
  980. c.globalAlpha = 1;
  981. return this.drawFunc(c,this.x,this.y,this.w,this.h,t.outlineColour,tag,x1,y1);
  982. };
  983. Oproto.DrawPulsate = function(c, tag, x1, y1) {
  984. var diff = TimeNow() - this.ts, t = this.tc;
  985. c.setTransform(1,0,0,1,0,0);
  986. c.strokeStyle = t.outlineColour;
  987. c.lineWidth = t.outlineThickness;
  988. c.shadowBlur = c.shadowOffsetX = c.shadowOffsetY = 0;
  989. c.globalAlpha = t.pulsateTo + ((1 - t.pulsateTo) *
  990. (0.5 + (cos(2 * Math.PI * diff / (1000 * t.pulsateTime)) / 2)));
  991. return this.drawFunc(c,this.x,this.y,this.w,this.h,t.outlineColour,tag,x1,y1);
  992. };
  993. Oproto.Active = function(c,x,y) {
  994. return (x >= this.x && y >= this.y &&
  995. x <= this.x + this.w && y <= this.y + this.h);
  996. };
  997. Oproto.PreDraw = Oproto.PostDraw = Oproto.LastDraw = Nop;
  998. /**
  999. * @constructor
  1000. */
  1001. function Tag(tc, text, a, v, w, h, col, bcol, bradius, boutline, bothickness,
  1002. font, padding, original) {
  1003. this.tc = tc;
  1004. this.image = null;
  1005. this.text = text;
  1006. this.text_original = original;
  1007. this.line_widths = [];
  1008. this.title = a.title || null;
  1009. this.a = a;
  1010. this.position = new Vector(v[0], v[1], v[2]);
  1011. this.x = this.y = this.z = 0;
  1012. this.w = w;
  1013. this.h = h;
  1014. this.colour = col || tc.textColour;
  1015. this.bgColour = bcol || tc.bgColour;
  1016. this.bgRadius = bradius | 0;
  1017. this.bgOutline = boutline || this.colour;
  1018. this.bgOutlineThickness = bothickness | 0;
  1019. this.textFont = font || tc.textFont;
  1020. this.padding = padding | 0;
  1021. this.sc = this.alpha = 1;
  1022. this.weighted = !tc.weight;
  1023. }
  1024. Tproto = Tag.prototype;
  1025. Tproto.Init = function(e) {
  1026. var tc = this.tc;
  1027. this.outline = new Outline(tc,this);
  1028. this.textHeight = tc.textHeight;
  1029. if(this.HasText()) {
  1030. this.Measure(tc.ctxt,tc);
  1031. } else {
  1032. this.w = this.iw;
  1033. this.h = this.ih;
  1034. }
  1035. this.SetShadowColour = tc.shadowAlpha ? this.SetShadowColourAlpha : this.SetShadowColourFixed;
  1036. this.SetDraw(tc);
  1037. };
  1038. Tproto.Draw = Nop;
  1039. Tproto.HasText = function() {
  1040. return this.text && this.text[0].length > 0;
  1041. };
  1042. Tproto.EqualTo = function(e) {
  1043. var i = e.getElementsByTagName('img');
  1044. if(this.a.href != e.href)
  1045. return 0;
  1046. if(i.length)
  1047. return this.image.src == i[0].src;
  1048. return (e.innerText || e.textContent) == this.text_original;
  1049. };
  1050. Tproto.SetImage = function(i) {
  1051. this.image = this.fimage = i;
  1052. };
  1053. Tproto.SetDraw = function(t) {
  1054. this.Draw = this.fimage ? (t.ie > 7 ? this.DrawImageIE : this.DrawImage) : this.DrawText;
  1055. t.noSelect && (this.CheckActive = Nop);
  1056. };
  1057. Tproto.MeasureText = function(c) {
  1058. var i, l = this.text.length, w = 0, wl;
  1059. for(i = 0; i < l; ++i) {
  1060. this.line_widths[i] = wl = c.measureText(this.text[i]).width;
  1061. w = max(w, wl);
  1062. }
  1063. return w;
  1064. };
  1065. Tproto.Measure = function(c,t) {
  1066. var extents = FindTextBoundingBox(this.text, this.textFont, this.textHeight),
  1067. s, th, f, soff, cw, twidth, theight, img, tcv;
  1068. // add the gap at the top to the height to make equal gap at bottom
  1069. theight = extents ? extents.max.y + extents.min.y : this.textHeight;
  1070. c.font = this.font = this.textHeight + 'px ' + this.textFont;
  1071. twidth = this.MeasureText(c);
  1072. if(t.txtOpt) {
  1073. s = t.txtScale;
  1074. th = s * this.textHeight;
  1075. f = th + 'px ' + this.textFont;
  1076. soff = [s * t.shadowOffset[0], s * t.shadowOffset[1]];
  1077. c.font = f;
  1078. cw = this.MeasureText(c);
  1079. tcv = new TextCanvas(this.text, f, cw + s, (s * theight) + s, cw,
  1080. this.line_widths, t.textAlign, t.textVAlign, s);
  1081. if(this.image)
  1082. tcv.SetImage(this.image, this.iw, this.ih, t.imagePosition, t.imagePadding,
  1083. t.imageAlign, t.imageVAlign, t.imageScale);
  1084. img = tcv.Create(this.colour, this.bgColour, this.bgOutline,
  1085. s * this.bgOutlineThickness, t.shadow, s * t.shadowBlur, soff,
  1086. s * this.padding, s * this.bgRadius);
  1087. // add outline image using highlight colour
  1088. if(t.outlineMethod == 'colour') {
  1089. this.oimage = tcv.Create(t.outlineColour, this.bgColour, t.outlineColour,
  1090. s * this.bgOutlineThickness, t.shadow, s * t.shadowBlur, soff,
  1091. s * this.padding, s * this.bgRadius);
  1092. } else if(t.outlineMethod == 'size') {
  1093. extents = FindTextBoundingBox(this.text, this.textFont,
  1094. this.textHeight + t.outlineIncrease);
  1095. th = extents.max.y + extents.min.y;
  1096. f = (s * (this.textHeight + t.outlineIncrease)) + 'px ' + this.textFont;
  1097. c.font = f;
  1098. cw = this.MeasureText(c);
  1099. tcv = new TextCanvas(this.text, f, cw + s, (s * th) + s, cw,
  1100. this.line_widths, t.textAlign, t.textVAlign, s);
  1101. if(this.image)
  1102. tcv.SetImage(this.image, this.iw + t.outlineIncrease,
  1103. this.ih + t.outlineIncrease, t.imagePosition, t.imagePadding,
  1104. t.imageAlign, t.imageVAlign, t.imageScale);
  1105. this.oimage = tcv.Create(this.colour, this.bgColour, this.bgOutline,
  1106. s * this.bgOutlineThickness, t.shadow, s * t.shadowBlur, soff,
  1107. s * this.padding, s * this.bgRadius);
  1108. if(t.outlineIncrease > 0)
  1109. img = ExpandImage(img, this.oimage.width, this.oimage.height);
  1110. else
  1111. this.oimage = ExpandImage(this.oimage, img.width, img.height);
  1112. }
  1113. if(img) {
  1114. this.fimage = img;
  1115. twidth = this.fimage.width / s;
  1116. theight = this.fimage.height / s;
  1117. }
  1118. this.SetDraw(t);
  1119. t.txtOpt = !!this.fimage;
  1120. }
  1121. this.h = theight;
  1122. this.w = twidth;
  1123. };
  1124. Tproto.SetFont = function(f, c, bc, boc) {
  1125. this.textFont = f;
  1126. this.colour = c;
  1127. this.bgColour = bc;
  1128. this.bgOutline = boc;
  1129. this.Measure(this.tc.ctxt, this.tc);
  1130. };
  1131. Tproto.SetWeight = function(w) {
  1132. var tc = this.tc, modes = tc.weightMode.split(/[, ]/), m, s, wl = w.length;
  1133. if(!this.HasText())
  1134. return;
  1135. this.weighted = true;
  1136. for(s = 0; s < wl; ++s) {
  1137. m = modes[s] || 'size';
  1138. if('both' == m) {
  1139. this.Weight(w[s], tc.ctxt, tc, 'size', tc.min_weight[s],
  1140. tc.max_weight[s], s);
  1141. this.Weight(w[s], tc.ctxt, tc, 'colour', tc.min_weight[s],
  1142. tc.max_weight[s], s);
  1143. } else {
  1144. this.Weight(w[s], tc.ctxt, tc, m, tc.min_weight[s], tc.max_weight[s], s);
  1145. }
  1146. }
  1147. this.Measure(tc.ctxt, tc);
  1148. };
  1149. Tproto.Weight = function(w, c, t, m, wmin, wmax, wnum) {
  1150. w = isNaN(w) ? 1 : w;
  1151. var nweight = (w - wmin) / (wmax - wmin);
  1152. if('colour' == m)
  1153. this.colour = FindGradientColour(t, nweight, wnum);
  1154. else if('bgcolour' == m)
  1155. this.bgColour = FindGradientColour(t, nweight, wnum);
  1156. else if('bgoutline' == m)
  1157. this.bgOutline = FindGradientColour(t, nweight, wnum);
  1158. else if('size' == m) {
  1159. if(t.weightSizeMin > 0 && t.weightSizeMax > t.weightSizeMin) {
  1160. this.textHeight = t.weightSize *
  1161. (t.weightSizeMin + (t.weightSizeMax - t.weightSizeMin) * nweight);
  1162. } else {
  1163. // min textHeight of 1
  1164. this.textHeight = max(1, w * t.weightSize);
  1165. }
  1166. }
  1167. };
  1168. Tproto.SetShadowColourFixed = function(c,s,a) {
  1169. c.shadowColor = s;
  1170. };
  1171. Tproto.SetShadowColourAlpha = function(c,s,a) {
  1172. c.shadowColor = SetAlpha(s, a);
  1173. };
  1174. Tproto.DrawText = function(c,xoff,yoff) {
  1175. var t = this.tc, x = this.x, y = this.y, s = this.sc, i, xl;
  1176. c.globalAlpha = this.alpha;
  1177. c.fillStyle = this.colour;
  1178. t.shadow && this.SetShadowColour(c,t.shadow,this.alpha);
  1179. c.font = this.font;
  1180. x += xoff / s;
  1181. y += (yoff / s) - (this.h / 2);
  1182. for(i = 0; i < this.text.length; ++i) {
  1183. xl = x;
  1184. if('right' == t.textAlign) {
  1185. xl += this.w / 2 - this.line_widths[i];
  1186. } else if('centre' == t.textAlign) {
  1187. xl -= this.line_widths[i] / 2;
  1188. } else {
  1189. xl -= this.w / 2;
  1190. }
  1191. c.setTransform(s, 0, 0, s, s * xl, s * y);
  1192. c.fillText(this.text[i], 0, 0);
  1193. y += this.textHeight;
  1194. }
  1195. };
  1196. Tproto.DrawImage = function(c,xoff,yoff,im) {
  1197. var x = this.x, y = this.y, s = this.sc,
  1198. i = im || this.fimage, w = this.w, h = this.h, a = this.alpha,
  1199. shadow = this.shadow;
  1200. c.globalAlpha = a;
  1201. shadow && this.SetShadowColour(c,shadow,a);
  1202. x += (xoff / s) - (w / 2);
  1203. y += (yoff / s) - (h / 2);
  1204. c.setTransform(s, 0, 0, s, s * x, s * y);
  1205. c.drawImage(i, 0, 0, w, h);
  1206. };
  1207. Tproto.DrawImageIE = function(c,xoff,yoff) {
  1208. var i = this.fimage, s = this.sc,
  1209. w = i.width = this.w*s, h = i.height = this.h * s,
  1210. x = (this.x*s) + xoff - (w/2), y = (this.y*s) + yoff - (h/2);
  1211. c.setTransform(1,0,0,1,0,0);
  1212. c.globalAlpha = this.alpha;
  1213. c.drawImage(i, x, y);
  1214. };
  1215. Tproto.Calc = function(m,a) {
  1216. var pp, t = this.tc, mnb = t.minBrightness,
  1217. mxb = t.maxBrightness, r = t.max_radius;
  1218. pp = m.xform(this.position);
  1219. this.xformed = pp;
  1220. pp = Project(t, pp, t.stretchX, t.stretchY);
  1221. this.x = pp.x;
  1222. this.y = pp.y;
  1223. this.z = pp.z;
  1224. this.sc = pp.w;
  1225. this.alpha = a * Clamp(mnb + (mxb - mnb) * (r - this.z) / (2 * r), 0, 1);
  1226. };
  1227. Tproto.UpdateActive = function(c, xoff, yoff) {
  1228. var o = this.outline, w = this.w, h = this.h,
  1229. x = this.x - w/2, y = this.y - h/2;
  1230. o.Update(x, y, w, h, this.sc, this.z, xoff, yoff);
  1231. return o;
  1232. };
  1233. Tproto.CheckActive = function(c,xoff,yoff) {
  1234. var t = this.tc, o = this.UpdateActive(c, xoff, yoff);
  1235. return o.Active(c, t.mx, t.my) ? o : null;
  1236. };
  1237. Tproto.Clicked = function(e) {
  1238. var a = this.a, t = a.target, h = a.href, evt;
  1239. if(t != '' && t != '_self') {
  1240. if(self.frames[t]) {
  1241. self.frames[t].document.location = h;
  1242. } else{
  1243. try {
  1244. if(top.frames[t]) {
  1245. top.frames[t].document.location = h;
  1246. return;
  1247. }
  1248. } catch(err) {
  1249. // different domain/port/protocol?
  1250. }
  1251. window.open(h, t);
  1252. }
  1253. return;
  1254. }
  1255. if(doc.createEvent) {
  1256. evt = doc.createEvent('MouseEvents');
  1257. evt.initMouseEvent('click', 1, 1, window, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, null);
  1258. if(!a.dispatchEvent(evt))
  1259. return;
  1260. } else if(a.fireEvent) {
  1261. if(!a.fireEvent('onclick'))
  1262. return;
  1263. }
  1264. doc.location = h;
  1265. };
  1266. /**
  1267. * @constructor
  1268. */
  1269. function TagCanvas(cid,lctr,opt) {
  1270. var i, p, c = doc.getElementById(cid), cp = ['id','class','innerHTML'], raf;
  1271. if(!c) throw 0;
  1272. if(Defined(window.G_vmlCanvasManager)) {
  1273. c = window.G_vmlCanvasManager.initElement(c);
  1274. this.ie = parseFloat(navigator.appVersion.split('MSIE')[1]);
  1275. }
  1276. if(c && (!c.getContext || !c.getContext('2d').fillText)) {
  1277. p = doc.createElement('DIV');
  1278. for(i = 0; i < cp.length; ++i)
  1279. p[cp[i]] = c[cp[i]];
  1280. c.parentNode.insertBefore(p,c);
  1281. c.parentNode.removeChild(c);
  1282. throw 0;
  1283. }
  1284. for(i in TagCanvas.options)
  1285. this[i] = opt && Defined(opt[i]) ? opt[i] :
  1286. (Defined(TagCanvas[i]) ? TagCanvas[i] : TagCanvas.options[i]);
  1287. this.canvas = c;
  1288. this.ctxt = c.getContext('2d');
  1289. this.z1 = 250 / max(this.depth, 0.001);
  1290. this.z2 = this.z1 / this.zoom;
  1291. this.radius = min(c.height, c.width) * 0.0075; // fits radius of 100 in canvas
  1292. this.max_radius = 100;
  1293. this.max_weight = [];
  1294. this.min_weight = [];
  1295. this.textFont = this.textFont && FixFont(this.textFont);
  1296. this.textHeight *= 1;
  1297. this.pulsateTo = Clamp(this.pulsateTo, 0, 1);
  1298. this.minBrightness = Clamp(this.minBrightness, 0, 1);
  1299. this.maxBrightness = Clamp(this.maxBrightness, this.minBrightness, 1);
  1300. this.ctxt.textBaseline = 'top';
  1301. this.lx = (this.lock + '').indexOf('x') + 1;
  1302. this.ly = (this.lock + '').indexOf('y') + 1;
  1303. this.frozen = this.dx = this.dy = this.fixedAnim = this.touchState = 0;
  1304. this.fixedAlpha = 1;
  1305. this.source = lctr || cid;
  1306. this.repeatTags = min(64, ~~this.repeatTags);
  1307. this.minTags = min(200, ~~this.minTags);
  1308. if(this.minTags > 0 && this.repeatTags < 1 && (i = this.GetTags().length))
  1309. this.repeatTags = ceil(this.minTags / i) - 1;
  1310. this.transform = Matrix.Identity();
  1311. this.startTime = this.time = TimeNow();
  1312. this.mx = this.my = -1;
  1313. this.centreImage && CentreImage(this);
  1314. this.Animate = this.dragControl ? this.AnimateDrag : this.AnimatePosition;
  1315. this.animTiming = (typeof TagCanvas[this.animTiming] == 'function' ?
  1316. TagCanvas[this.animTiming] : TagCanvas.Smooth);
  1317. if(this.shadowBlur || this.shadowOffset[0] || this.shadowOffset[1]) {
  1318. // let the browser translate "red" into "#ff0000"
  1319. this.ctxt.shadowColor = this.shadow;
  1320. this.shadow = this.ctxt.shadowColor;
  1321. this.shadowAlpha = ShadowAlphaBroken();
  1322. } else {
  1323. delete this.shadow;
  1324. }
  1325. this.Load();
  1326. if(lctr && this.hideTags) {
  1327. (function(t) {
  1328. if(TagCanvas.loaded)
  1329. t.HideTags();
  1330. else
  1331. AddHandler('load', function() { t.HideTags(); }, window);
  1332. })(this);
  1333. }
  1334. this.yaw = this.initial ? this.initial[0] * this.maxSpeed : 0;
  1335. this.pitch = this.initial ? this.initial[1] * this.maxSpeed : 0;
  1336. if(this.tooltip) {
  1337. this.ctitle = c.title;
  1338. c.title = '';
  1339. if(this.tooltip == 'native') {
  1340. this.Tooltip = this.TooltipNative;
  1341. } else {
  1342. this.Tooltip = this.TooltipDiv;
  1343. if(!this.ttdiv) {
  1344. this.ttdiv = doc.createElement('div');
  1345. this.ttdiv.className = this.tooltipClass;
  1346. this.ttdiv.style.position = 'absolute';
  1347. this.ttdiv.style.zIndex = c.style.zIndex + 1;
  1348. AddHandler('mouseover',function(e){e.target.style.display='none';},this.ttdiv);
  1349. doc.body.appendChild(this.ttdiv);
  1350. }
  1351. }
  1352. } else {
  1353. this.Tooltip = this.TooltipNone;
  1354. }
  1355. if(!this.noMouse && !handlers[cid]) {
  1356. handlers[cid] = [
  1357. ['mousemove', MouseMove],
  1358. ['mouseout', MouseOut],
  1359. ['mouseup', MouseUp],
  1360. ['touchstart', TouchDown],
  1361. ['touchend', TouchUp],
  1362. ['touchcancel', TouchUp],
  1363. ['touchmove', TouchMove]
  1364. ];
  1365. if(this.dragControl) {
  1366. handlers[cid].push(['mousedown', MouseDown]);
  1367. handlers[cid].push(['selectstart', Nop]);
  1368. }
  1369. if(this.wheelZoom) {
  1370. handlers[cid].push(['mousewheel', MouseWheel]);
  1371. handlers[cid].push(['DOMMouseScroll', MouseWheel]);
  1372. }
  1373. for(i = 0; i < handlers[cid].length; ++i)
  1374. AddHandler(handlers[cid][i][0], handlers[cid][i][1], c);
  1375. }
  1376. if(!TagCanvas.started) {
  1377. raf = window.requestAnimationFrame = window.requestAnimationFrame ||
  1378. window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame ||
  1379. window.msRequestAnimationFrame;
  1380. TagCanvas.NextFrame = raf ? TagCanvas.NextFrameRAF :
  1381. TagCanvas.NextFrameTimeout;
  1382. TagCanvas.interval = this.interval;
  1383. TagCanvas.NextFrame(this.interval);
  1384. TagCanvas.started = 1;
  1385. }
  1386. }
  1387. TCproto = TagCanvas.prototype;
  1388. TCproto.SourceElements = function() {
  1389. if(doc.querySelectorAll)
  1390. return doc.querySelectorAll('#' + this.source);
  1391. return [doc.getElementById(this.source)];
  1392. };
  1393. TCproto.HideTags = function() {
  1394. var el = this.SourceElements(), i;
  1395. for(i = 0; i < el.length; ++i)
  1396. el[i].style.display = 'none';
  1397. };
  1398. TCproto.GetTags = function() {
  1399. var el = this.SourceElements(), etl, tl = [], i, j, k;
  1400. for(k = 0; k <= this.repeatTags; ++k) {
  1401. for(i = 0; i < el.length; ++i) {
  1402. etl = el[i].getElementsByTagName('a');
  1403. for(j = 0; j < etl.length; ++j) {
  1404. tl.push(etl[j]);
  1405. }
  1406. }
  1407. }
  1408. return tl;
  1409. };
  1410. TCproto.Message = function(text) {
  1411. var tl = [], i, p, tc = text.split(''), a, t, x, z;
  1412. for(i = 0; i < tc.length; ++i) {
  1413. if(tc[i] != ' ') {
  1414. p = i - tc.length / 2;
  1415. a = doc.createElement('A');
  1416. a.href = '#';
  1417. a.innerText = tc[i];
  1418. x = 100 * sin(p / 9);
  1419. z = -100 * cos(p / 9);
  1420. t = new Tag(this, tc[i], a, [x,0,z], 2, 18, '#000', '#fff', 0, 0, 0,
  1421. 'monospace', 2, tc[i]);
  1422. t.Init();
  1423. tl.push(t);
  1424. }
  1425. }
  1426. return tl;
  1427. };
  1428. TCproto.CreateTag = function(e) {
  1429. var im, i, t, txt, ts, font, bc, boc, p = [0, 0, 0];
  1430. if('text' != this.imageMode) {
  1431. im = e.getElementsByTagName('img');
  1432. if(im.length) {
  1433. i = new Image;
  1434. i.src = im[0].src;
  1435. if(!this.imageMode) {
  1436. t = new Tag(this, "", e, p, 0, 0);
  1437. t.SetImage(i);
  1438. //t.Init();
  1439. AddImage(i, im[0], t, this);
  1440. return t;
  1441. }
  1442. }
  1443. }
  1444. if('image' != this.imageMode) {
  1445. ts = new TextSplitter(e);
  1446. txt = ts.Lines();
  1447. if(!ts.Empty()) {
  1448. font = this.textFont || FixFont(GetProperty(e,'font-family'));
  1449. if(this.splitWidth)
  1450. txt = ts.SplitWidth(this.splitWidth, this.ctxt, font, this.textHeight);
  1451. bc = this.bgColour == 'tag' ? GetProperty(e, 'background-color') :
  1452. this.bgColour;
  1453. boc = this.bgOutline == 'tag' ? GetProperty(e, 'color') : this.bgOutline;
  1454. } else {
  1455. ts = null;
  1456. }
  1457. }
  1458. if(ts || i) {
  1459. t = new Tag(this, txt, e, p, 2, this.textHeight + 2,
  1460. this.textColour || GetProperty(e,'color'), bc, this.bgRadius,
  1461. boc, this.bgOutlineThickness, font, this.padding, ts && ts.original);
  1462. if(i) {
  1463. t.SetImage(i);
  1464. AddImage(i, im[0], t, this);
  1465. } else {
  1466. t.Init();
  1467. }
  1468. return t;
  1469. }
  1470. };
  1471. TCproto.UpdateTag = function(t, a) {
  1472. var colour = this.textColour || GetProperty(a, 'color'),
  1473. font = this.textFont || FixFont(GetProperty(a, 'font-family')),
  1474. bc = this.bgColour == 'tag' ? GetProperty(a, 'background-color') :
  1475. this.bgColour, boc = this.bgOutline == 'tag' ? GetProperty(a, 'color') :
  1476. this.bgOutline;
  1477. t.a = a;
  1478. t.title = a.title;
  1479. if(t.colour != colour || t.textFont != font || t.bgColour != bc ||
  1480. t.bgOutline != boc)
  1481. t.SetFont(font, colour, bc, boc);
  1482. };
  1483. TCproto.Weight = function(tl) {
  1484. var ll = tl.length, w, i, s, weights = [], valid,
  1485. wfrom = this.weightFrom ? this.weightFrom.split(/[, ]/) : [null],
  1486. wl = wfrom.length;
  1487. for(i = 0; i < ll; ++i) {
  1488. weights[i] = [];
  1489. for(s = 0; s < wl; ++s) {
  1490. w = FindWeight(tl[i].a, wfrom[s], this.textHeight);
  1491. if(!this.max_weight[s] || w > this.max_weight[s])
  1492. this.max_weight[s] = w;
  1493. if(!this.min_weight[s] || w < this.min_weight[s])
  1494. this.min_weight[s] = w;
  1495. weights[i][s] = w;
  1496. }
  1497. }
  1498. for(s = 0; s < wl; ++s) {
  1499. if(this.max_weight[s] > this.min_weight[s])
  1500. valid = 1;
  1501. }
  1502. if(valid) {
  1503. for(i = 0; i < ll; ++i) {
  1504. tl[i].SetWeight(weights[i]);
  1505. }
  1506. }
  1507. };
  1508. TCproto.Load = function() {
  1509. var tl = this.GetTags(), taglist = [], shape, t,
  1510. shapeArgs, rx, ry, rz, vl, i, tagmap = [], pfuncs = {
  1511. sphere: PointsOnSphere,
  1512. vcylinder: PointsOnCylinderV,
  1513. hcylinder: PointsOnCylinderH,
  1514. vring: PointsOnRingV,
  1515. hring: PointsOnRingH
  1516. };
  1517. if(tl.length) {
  1518. tagmap.length = tl.length;
  1519. for(i = 0; i < tl.length; ++i)
  1520. tagmap[i] = i;
  1521. this.shuffleTags && Shuffle(tagmap);
  1522. rx = 100 * this.radiusX;
  1523. ry = 100 * this.radiusY;
  1524. rz = 100 * this.radiusZ;
  1525. this.max_radius = max(rx, max(ry, rz));
  1526. for(i = 0; i < tl.length; ++i) {
  1527. t = this.CreateTag(tl[tagmap[i]]);
  1528. if(t)
  1529. taglist.push(t);
  1530. }
  1531. this.weight && this.Weight(taglist, true);
  1532. if(this.shapeArgs) {
  1533. this.shapeArgs[0] = taglist.length;
  1534. } else {
  1535. shapeArgs = this.shape.toString().split(/[(),]/);
  1536. shape = shapeArgs.shift();
  1537. if(typeof window[shape] === 'function')
  1538. this.shape = window[shape];
  1539. else
  1540. this.shape = pfuncs[shape] || pfuncs.sphere;
  1541. this.shapeArgs = [taglist.length, rx, ry, rz].concat(shapeArgs);
  1542. }
  1543. vl = this.shape.apply(this, this.shapeArgs);
  1544. this.listLength = taglist.length;
  1545. for(i = 0; i < taglist.length; ++i)
  1546. taglist[i].position = new Vector(vl[i][0], vl[i][1], vl[i][2]);
  1547. }
  1548. if(this.noTagsMessage && !taglist.length)
  1549. taglist = this.Message('No tags');
  1550. this.taglist = taglist;
  1551. };
  1552. TCproto.Update = function() {
  1553. var tl = this.GetTags(), newlist = [],
  1554. taglist = this.taglist, found,
  1555. added = [], removed = [], vl, ol, nl, i, j;
  1556. if(!this.shapeArgs)
  1557. return this.Load();
  1558. if(tl.length) {
  1559. nl = this.listLength = tl.length;
  1560. ol = taglist.length;
  1561. // copy existing list, populate "removed"
  1562. for(i = 0; i < ol; ++i) {
  1563. newlist.push(taglist[i]);
  1564. removed.push(i);
  1565. }
  1566. // find added and removed tags
  1567. for(i = 0; i < nl; ++i) {
  1568. for(j = 0, found = 0; j < ol; ++j) {
  1569. if(taglist[j].EqualTo(tl[i])) {
  1570. this.UpdateTag(newlist[j], tl[i]);
  1571. found = removed[j] = -1;
  1572. }
  1573. }
  1574. if(!found)
  1575. added.push(i);
  1576. }
  1577. // clean out found tags from removed list
  1578. for(i = 0, j = 0; i < ol; ++i) {
  1579. if(removed[j] == -1)
  1580. removed.splice(j,1);
  1581. else
  1582. ++j;
  1583. }
  1584. // insert new tags in gaps where old tags removed
  1585. if(removed.length) {
  1586. Shuffle(removed);
  1587. while(removed.length && added.length) {
  1588. i = removed.shift();
  1589. j = added.shift();
  1590. newlist[i] = this.CreateTag(tl[j]);
  1591. }
  1592. // remove any more (in reverse order)
  1593. removed.sort(function(a,b) {return a-b});
  1594. while(removed.length) {
  1595. newlist.splice(removed.pop(), 1);
  1596. }
  1597. }
  1598. // add any extra tags
  1599. j = newlist.length / (added.length + 1);
  1600. i = 0;
  1601. while(added.length) {
  1602. newlist.splice(ceil(++i * j), 0, this.CreateTag(tl[added.shift()]));
  1603. }
  1604. // assign correct positions to tags
  1605. this.shapeArgs[0] = nl = newlist.length;
  1606. vl = this.shape.apply(this, this.shapeArgs);
  1607. for(i = 0; i < nl; ++i)
  1608. newlist[i].position = new Vector(vl[i][0], vl[i][1], vl[i][2]);
  1609. // reweight tags
  1610. this.weight && this.Weight(newlist);
  1611. }
  1612. this.taglist = newlist;
  1613. };
  1614. TCproto.SetShadow = function(c) {
  1615. c.shadowBlur = this.shadowBlur;
  1616. c.shadowOffsetX = this.shadowOffset[0];
  1617. c.shadowOffsetY = this.shadowOffset[1];
  1618. };
  1619. TCproto.Draw = function(t) {
  1620. if(this.paused)
  1621. return;
  1622. var cv = this.canvas, cw = cv.width, ch = cv.height, max_sc = 0,
  1623. tdelta = (t - this.time) * TagCanvas.interval / 1000,
  1624. x = cw / 2 + this.offsetX, y = ch / 2 + this.offsetY, c = this.ctxt,
  1625. active, a, i, aindex = -1, tl = this.taglist, l = tl.length,
  1626. frontsel = this.frontSelect, centreDrawn = (this.centreFunc == Nop), fixed;
  1627. this.time = t;
  1628. if(this.frozen && this.drawn)
  1629. return this.Animate(cw,ch,tdelta);
  1630. fixed = this.AnimateFixed();
  1631. c.setTransform(1,0,0,1,0,0);
  1632. for(i = 0; i < l; ++i)
  1633. tl[i].Calc(this.transform, this.fixedAlpha);
  1634. tl = SortList(tl, function(a,b) {return b.z-a.z});
  1635. if(fixed && this.fixedAnim.active) {
  1636. active = this.fixedAnim.tag.UpdateActive(c, x, y);
  1637. } else {
  1638. this.active = null;
  1639. for(i = 0; i < l; ++i) {
  1640. a = this.mx >= 0 && this.my >= 0 && this.taglist[i].CheckActive(c, x, y);
  1641. if(a && a.sc > max_sc && (!frontsel || a.z <= 0)) {
  1642. active = a;
  1643. aindex = i;
  1644. active.tag = this.taglist[i];
  1645. max_sc = a.sc;
  1646. }
  1647. }
  1648. this.active = active;
  1649. }
  1650. this.txtOpt || (this.shadow && this.SetShadow(c));
  1651. c.clearRect(0,0,cw,ch);
  1652. for(i = 0; i < l; ++i) {
  1653. if(!centreDrawn && tl[i].z <= 0) {
  1654. // run the centreFunc if the next tag is at the front
  1655. try { this.centreFunc(c, cw, ch, x, y); }
  1656. catch(e) {
  1657. alert(e);
  1658. // don't run it again
  1659. this.centreFunc = Nop;
  1660. }
  1661. centreDrawn = true;
  1662. }
  1663. if(!(active && active.tag == tl[i] && active.PreDraw(c, tl[i], x, y)))
  1664. tl[i].Draw(c, x, y);
  1665. active && active.tag == tl[i] && active.PostDraw(c);
  1666. }
  1667. if(this.freezeActive && active) {
  1668. this.Freeze();
  1669. } else {
  1670. this.UnFreeze();
  1671. this.drawn = (l == this.listLength);
  1672. }
  1673. if(this.fixedCallback) {
  1674. this.fixedCallback(this,this.fixedCallbackTag);
  1675. this.fixedCallback = null;
  1676. }
  1677. fixed || this.Animate(cw, ch, tdelta);
  1678. active && active.LastDraw(c);
  1679. cv.style.cursor = active ? this.activeCursor : '';
  1680. this.Tooltip(active,this.taglist[aindex]);
  1681. };
  1682. TCproto.TooltipNone = function() { };
  1683. TCproto.TooltipNative = function(active,tag) {
  1684. if(active)
  1685. this.canvas.title = tag && tag.title ? tag.title : '';
  1686. else
  1687. this.canvas.title = this.ctitle;
  1688. };
  1689. TCproto.SetTTDiv = function(title, tag) {
  1690. var tc = this, s = tc.ttdiv.style;
  1691. if(title != tc.ttdiv.innerHTML)
  1692. s.display = 'none';
  1693. tc.ttdiv.innerHTML = title;
  1694. tag && (tag.title = tc.ttdiv.innerHTML);
  1695. if(s.display == 'none' && ! tc.tttimer) {
  1696. tc.tttimer = setTimeout(function() {
  1697. var p = AbsPos(tc.canvas.id);
  1698. s.display = 'block';
  1699. s.left = p.x + tc.mx + 'px';
  1700. s.top = p.y + tc.my + 24 + 'px';
  1701. tc.tttimer = null;
  1702. }, tc.tooltipDelay);
  1703. }
  1704. };
  1705. TCproto.TooltipDiv = function(active,tag) {
  1706. if(active && tag && tag.title) {
  1707. this.SetTTDiv(tag.title, tag);
  1708. } else if(!active && this.mx != -1 && this.my != -1 && this.ctitle.length) {
  1709. this.SetTTDiv(this.ctitle);
  1710. } else {
  1711. this.ttdiv.style.display = 'none';
  1712. }
  1713. };
  1714. TCproto.Transform = function(tc, p, y) {
  1715. if(p || y) {
  1716. var sp = sin(p), cp = cos(p), sy = sin(y), cy = cos(y),
  1717. ym = new Matrix([cy,0,sy, 0,1,0, -sy,0,cy]),
  1718. pm = new Matrix([1,0,0, 0,cp,-sp, 0,sp,cp]);
  1719. tc.transform = tc.transform.mul(ym.mul(pm));
  1720. }
  1721. };
  1722. TCproto.AnimateFixed = function() {
  1723. var fa, t1, angle, m, d;
  1724. if(this.fadeIn) {
  1725. t1 = TimeNow() - this.startTime;
  1726. if(t1 >= this.fadeIn) {
  1727. this.fadeIn = 0;
  1728. this.fixedAlpha = 1;
  1729. } else {
  1730. this.fixedAlpha = t1 / this.fadeIn;
  1731. }
  1732. }
  1733. if(this.fixedAnim) {
  1734. if(!this.fixedAnim.transform)
  1735. this.fixedAnim.transform = this.transform;
  1736. fa = this.fixedAnim, t1 = TimeNow() - fa.t0, angle = fa.angle,
  1737. m, d = this.animTiming(fa.t, t1);
  1738. this.transform = fa.transform;
  1739. if(t1 >= fa.t) {
  1740. this.fixedCallbackTag = fa.tag;
  1741. this.fixedCallback = fa.cb;
  1742. this.fixedAnim = this.yaw = this.pitch = 0;
  1743. } else {
  1744. angle *= d;
  1745. }
  1746. m = Matrix.Rotation(angle, fa.axis);
  1747. this.transform = this.transform.mul(m);
  1748. return (this.fixedAnim != 0);
  1749. }
  1750. return false;
  1751. };
  1752. TCproto.AnimatePosition = function(w, h, t) {
  1753. var tc = this, x = tc.mx, y = tc.my, s, r;
  1754. if(!tc.frozen && x >= 0 && y >= 0 && x < w && y < h) {
  1755. s = tc.maxSpeed, r = tc.reverse ? -1 : 1;
  1756. tc.lx || (tc.yaw = ((x * 2 * s / w) - s) * r * t);
  1757. tc.ly || (tc.pitch = ((y * 2 * s / h) - s) * -r * t);
  1758. tc.initial = null;
  1759. } else if(!tc.initial) {
  1760. if(tc.frozen && !tc.freezeDecel)
  1761. tc.yaw = tc.pitch = 0;
  1762. else
  1763. tc.Decel(tc);
  1764. }
  1765. this.Transform(tc, tc.pitch, tc.yaw);
  1766. };
  1767. TCproto.AnimateDrag = function(w, h, t) {
  1768. var tc = this, rs = 100 * t * tc.maxSpeed / tc.max_radius / tc.zoom;
  1769. if(tc.dx || tc.dy) {
  1770. tc.lx || (tc.yaw = tc.dx * rs / tc.stretchX);
  1771. tc.ly || (tc.pitch = tc.dy * -rs / tc.stretchY);
  1772. tc.dx = tc.dy = 0;
  1773. tc.initial = null;
  1774. } else if(!tc.initial) {
  1775. tc.Decel(tc);
  1776. }
  1777. this.Transform(tc, tc.pitch, tc.yaw);
  1778. };
  1779. TCproto.Freeze = function() {
  1780. if(!this.frozen) {
  1781. this.preFreeze = [this.yaw, this.pitch];
  1782. this.frozen = 1;
  1783. this.drawn = 0;
  1784. }
  1785. };
  1786. TCproto.UnFreeze = function() {
  1787. if(this.frozen) {
  1788. this.yaw = this.preFreeze[0];
  1789. this.pitch = this.preFreeze[1];
  1790. this.frozen = 0;
  1791. }
  1792. };
  1793. TCproto.Decel = function(tc) {
  1794. var s = tc.minSpeed, ay = abs(tc.yaw), ap = abs(tc.pitch);
  1795. if(!tc.lx && ay > s)
  1796. tc.yaw = ay > tc.z0 ? tc.yaw * tc.decel : 0;
  1797. if(!tc.ly && ap > s)
  1798. tc.pitch = ap > tc.z0 ? tc.pitch * tc.decel : 0;
  1799. };
  1800. TCproto.Zoom = function(r) {
  1801. this.z2 = this.z1 * (1/r);
  1802. this.drawn = 0;
  1803. };
  1804. TCproto.Clicked = function(e) {
  1805. var a = this.active;
  1806. try {
  1807. if(a && a.tag)
  1808. if(this.clickToFront === false || this.clickToFront === null)
  1809. a.tag.Clicked(e);
  1810. else
  1811. this.TagToFront(a.tag, this.clickToFront, function() {
  1812. a.tag.Clicked(e);
  1813. }, true);
  1814. } catch(ex) {
  1815. }
  1816. };
  1817. TCproto.Wheel = function(i) {
  1818. var z = this.zoom + this.zoomStep * (i ? 1 : -1);
  1819. this.zoom = min(this.zoomMax,max(this.zoomMin,z));
  1820. this.Zoom(this.zoom);
  1821. };
  1822. TCproto.BeginDrag = function(e) {
  1823. this.down = EventXY(e, this.canvas);
  1824. e.cancelBubble = true;
  1825. e.returnValue = false;
  1826. e.preventDefault && e.preventDefault();
  1827. };
  1828. TCproto.Drag = function(e, p) {
  1829. if(this.dragControl && this.down) {
  1830. var t2 = this.dragThreshold * this.dragThreshold,
  1831. dx = p.x - this.down.x, dy = p.y - this.down.y;
  1832. if(this.dragging || dx * dx + dy * dy > t2) {
  1833. this.dx = dx;
  1834. this.dy = dy;
  1835. this.dragging = 1;
  1836. this.down = p;
  1837. }
  1838. }
  1839. return this.dragging;
  1840. };
  1841. TCproto.EndDrag = function() {
  1842. var res = this.dragging;
  1843. this.dragging = this.down = null;
  1844. return res;
  1845. };
  1846. function PinchDistance(e) {
  1847. var t1 = e.targetTouches[0], t2 = e.targetTouches[1];
  1848. return sqrt(pow(t2.pageX - t1.pageX, 2) + pow(t2.pageY - t1.pageY, 2));
  1849. }
  1850. TCproto.BeginPinch = function(e) {
  1851. this.pinched = [PinchDistance(e), this.zoom];
  1852. e.preventDefault && e.preventDefault();
  1853. };
  1854. TCproto.Pinch = function(e) {
  1855. var z, d, p = this.pinched;
  1856. if(!p)
  1857. return;
  1858. d = PinchDistance(e);
  1859. z = p[1] * d / p[0];
  1860. this.zoom = min(this.zoomMax,max(this.zoomMin,z));
  1861. this.Zoom(this.zoom);
  1862. };
  1863. TCproto.EndPinch = function(e) {
  1864. this.pinched = null;
  1865. };
  1866. TCproto.Pause = function() { this.paused = true; };
  1867. TCproto.Resume = function() { this.paused = false; };
  1868. TCproto.SetSpeed = function(i) {
  1869. this.initial = i;
  1870. this.yaw = i[0] * this.maxSpeed;
  1871. this.pitch = i[1] * this.maxSpeed;
  1872. };
  1873. TCproto.FindTag = function(t) {
  1874. if(!Defined(t))
  1875. return null;
  1876. Defined(t.index) && (t = t.index);
  1877. if(!IsObject(t))
  1878. return this.taglist[t];
  1879. var srch, tgt, i;
  1880. if(Defined(t.id))
  1881. srch = 'id', tgt = t.id;
  1882. else if(Defined(t.text))
  1883. srch = 'innerText', tgt = t.text;
  1884. for(i = 0; i < this.taglist.length; ++i)
  1885. if(this.taglist[i].a[srch] == tgt)
  1886. return this.taglist[i];
  1887. };
  1888. TCproto.RotateTag = function(tag, lt, lg, time, callback, active) {
  1889. var t = tag.xformed, v1 = new Vector(t.x, t.y, t.z),
  1890. v2 = MakeVector(lg, lt), angle = v1.angle(v2), u = v1.cross(v2).unit();
  1891. if(angle == 0) {
  1892. this.fixedCallbackTag = tag;
  1893. this.fixedCallback = callback;
  1894. } else {
  1895. this.fixedAnim = {
  1896. angle: -angle,
  1897. axis: u,
  1898. t: time,
  1899. t0: TimeNow(),
  1900. cb: callback,
  1901. tag: tag,
  1902. active: active
  1903. };
  1904. }
  1905. };
  1906. TCproto.TagToFront = function(tag, time, callback, active) {
  1907. this.RotateTag(tag, 0, 0, time, callback, active);
  1908. };
  1909. TagCanvas.Start = function(id,l,o) {
  1910. TagCanvas.Delete(id);
  1911. TagCanvas.tc[id] = new TagCanvas(id,l,o);
  1912. };
  1913. function tccall(f,id) {
  1914. TagCanvas.tc[id] && TagCanvas.tc[id][f]();
  1915. }
  1916. TagCanvas.Linear = function(t, t0) { return t0 / t; }
  1917. TagCanvas.Smooth = function(t, t0) { return 0.5 - cos(t0 * Math.PI / t) / 2; }
  1918. TagCanvas.Pause = function(id) { tccall('Pause',id); };
  1919. TagCanvas.Resume = function(id) { tccall('Resume',id); };
  1920. TagCanvas.Reload = function(id) { tccall('Load',id); };
  1921. TagCanvas.Update = function(id) { tccall('Update',id); };
  1922. TagCanvas.SetSpeed = function(id, speed) {
  1923. if(IsObject(speed) && TagCanvas.tc[id] &&
  1924. !isNaN(speed[0]) && !isNaN(speed[1])) {
  1925. TagCanvas.tc[id].SetSpeed(speed);
  1926. return true;
  1927. }
  1928. return false;
  1929. };
  1930. TagCanvas.TagToFront = function(id, options) {
  1931. if(!IsObject(options))
  1932. return false;
  1933. options.lat = options.lng = 0;
  1934. return TagCanvas.RotateTag(id, options);
  1935. };
  1936. TagCanvas.RotateTag = function(id, options) {
  1937. if(IsObject(options) && TagCanvas.tc[id]) {
  1938. if(isNaN(options.time))
  1939. options.time = 500;
  1940. var tt = TagCanvas.tc[id].FindTag(options);
  1941. if(tt) {
  1942. TagCanvas.tc[id].RotateTag(tt, options.lat, options.lng,
  1943. options.time, options.callback, options.active);
  1944. return true;
  1945. }
  1946. }
  1947. return false;
  1948. };
  1949. TagCanvas.Delete = function(id) {
  1950. var i, c;
  1951. if(handlers[id]) {
  1952. c = doc.getElementById(id);
  1953. if(c) {
  1954. for(i = 0; i < handlers[id].length; ++i)
  1955. RemoveHandler(handlers[id][i][0], handlers[id][i][1], c);
  1956. }
  1957. }
  1958. delete handlers[id];
  1959. delete TagCanvas.tc[id];
  1960. };
  1961. TagCanvas.NextFrameRAF = function() {
  1962. requestAnimationFrame(DrawCanvasRAF);
  1963. };
  1964. TagCanvas.NextFrameTimeout = function(iv) {
  1965. setTimeout(DrawCanvas, iv);
  1966. };
  1967. TagCanvas.tc = {};
  1968. TagCanvas.options = {
  1969. z1: 20000,
  1970. z2: 20000,
  1971. z0: 0.0002,
  1972. freezeActive: false,
  1973. freezeDecel: false,
  1974. activeCursor: 'pointer',
  1975. pulsateTo: 1,
  1976. pulsateTime: 3,
  1977. reverse: false,
  1978. depth: 0.5,
  1979. maxSpeed: 0.05,
  1980. minSpeed: 0,
  1981. decel: 0.95,
  1982. interval: 20,
  1983. minBrightness: 0.1,
  1984. maxBrightness: 1,
  1985. outlineColour: '#ffff99',
  1986. outlineThickness: 2,
  1987. outlineOffset: 5,
  1988. outlineMethod: 'outline',
  1989. outlineRadius: 0,
  1990. textColour: '#ff99ff',
  1991. textHeight: 15,
  1992. textFont: 'Helvetica, Arial, sans-serif',
  1993. shadow: '#000',
  1994. shadowBlur: 0,
  1995. shadowOffset: [0,0],
  1996. initial: null,
  1997. hideTags: true,
  1998. zoom: 1,
  1999. weight: false,
  2000. weightMode: 'size',
  2001. weightFrom: null,
  2002. weightSize: 1,
  2003. weightSizeMin: null,
  2004. weightSizeMax: null,
  2005. weightGradient: {0:'#f00', 0.33:'#ff0', 0.66:'#0f0', 1:'#00f'},
  2006. txtOpt: true,
  2007. txtScale: 2,
  2008. frontSelect: false,
  2009. wheelZoom: true,
  2010. zoomMin: 0.3,
  2011. zoomMax: 3,
  2012. zoomStep: 0.05,
  2013. shape: 'sphere',
  2014. lock: null,
  2015. tooltip: null,
  2016. tooltipDelay: 300,
  2017. tooltipClass: 'tctooltip',
  2018. radiusX: 1,
  2019. radiusY: 1,
  2020. radiusZ: 1,
  2021. stretchX: 1,
  2022. stretchY: 1,
  2023. offsetX: 0,
  2024. offsetY: 0,
  2025. shuffleTags: false,
  2026. noSelect: false,
  2027. noMouse: false,
  2028. imageScale: 1,
  2029. paused: false,
  2030. dragControl: false,
  2031. dragThreshold: 4,
  2032. centreFunc: Nop,
  2033. splitWidth: 0,
  2034. animTiming: 'Smooth',
  2035. clickToFront: false,
  2036. fadeIn: 0,
  2037. padding: 0,
  2038. bgColour: null,
  2039. bgRadius: 0,
  2040. bgOutline: null,
  2041. bgOutlineThickness: 0,
  2042. outlineIncrease: 4,
  2043. textAlign: 'centre',
  2044. textVAlign: 'middle',
  2045. imageMode: null,
  2046. imagePosition: null,
  2047. imagePadding: 2,
  2048. imageAlign: 'centre',
  2049. imageVAlign: 'middle',
  2050. noTagsMessage: true,
  2051. centreImage: null,
  2052. pinchZoom: false,
  2053. repeatTags: 0,
  2054. minTags: 0
  2055. };
  2056. for(i in TagCanvas.options) TagCanvas[i] = TagCanvas.options[i];
  2057. window.TagCanvas = TagCanvas;
  2058. // set a flag for when the window has loaded
  2059. AddHandler('load',function(){TagCanvas.loaded=1},window);
  2060. })();