gdi.js 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735
  1. /****************************************************************
  2. ** Licensed Materials - Property of IBM
  3. **
  4. ** IBM Cognos Products: mdsrv
  5. **
  6. ** (C) Copyright IBM Corp. 2008, 2015
  7. **
  8. ** US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
  9. *****************************************************************/
  10. //***********************************************************************************************
  11. // Copyright (C) 2008 Cognos ULC, an IBM Company. All rights reserved.
  12. // Cognos (R) is a trademark of Cognos ULC, (formerly Cognos Incorporated).
  13. //
  14. // Component: GDI
  15. //***********************************************************************************************
  16. //***********************************************************************************
  17. // GDI class
  18. //***********************************************************************************
  19. function gdi ( id_canvas, zoom )
  20. {
  21. ASSERT( id_canvas, "gdi: id_canvas is NOT valid !" );
  22. ASSERT( zoom, "gdi: zoom is NOT valid !" );
  23. // id must be the name/id of a container tag such as div.
  24. this.id = id_canvas;
  25. this.zoom = zoom || 100;
  26. this.zoomFactor = this.zoom / 100;
  27. this.htm = "";
  28. var temp = 0;
  29. if (document.documentElement.clientHeight == 0)
  30. temp = typeof document.body.insertAdjacentHTML != "undefined" && document.createElement;
  31. else
  32. temp = typeof document.documentElement.insertAdjacentHTML != "undefined" && document.createElement;
  33. this.ie = temp;
  34. this.canvas = document.getElementById (id_canvas);
  35. this.buf = new CStringBuffer();
  36. // setInterval ("Animation.animate ()", 50);
  37. this.setCanvas = function (id) { this.canvas = document.getElementById (id); }
  38. this.setZoom = function (zoom) { this.zoom = zoom; this.zoomFactor = this.zoom / 100; }
  39. this.getZoom = function () { return this.zoom; }
  40. this.init = function () { this.canvas.innerHTML = ""; }
  41. this.startContainer = function ( className, x, y, width, height, sId, sOverflow, sTooltip )
  42. {
  43. if ( typeof sOverflow == "undefined" )
  44. sOverflow = "hidden";
  45. this.buf.append( '<div class=' );
  46. this.buf.append( className );
  47. this.buf.append( ' style="position:absolute;overflow:' );
  48. this.buf.append( sOverflow );
  49. this.buf.append( ';left:' );
  50. this.buf.append( x * this.zoomFactor );
  51. this.buf.append( 'px;top:' );
  52. this.buf.append( y * this.zoomFactor );
  53. this.buf.append( 'px;width:' );
  54. this.buf.append( width * this.zoomFactor );
  55. this.buf.append( 'px;height:' );
  56. this.buf.append( height * this.zoomFactor );
  57. this.buf.append( 'px;"' );
  58. this.addId ( sId );
  59. this.addTooltip ( sTooltip );
  60. this.buf.append( '>' );
  61. }
  62. this.addText = function ( sText )
  63. {
  64. var escapedText = escapeHTML ( sText );
  65. this.buf.append( escapedText );
  66. }
  67. this.endContainer = function ()
  68. {
  69. this.buf.append( '<\/div>' );
  70. }
  71. this.divBackground = function ( className, x, y, width, height, sId )
  72. {
  73. this.buf.append( '<div class=' );
  74. this.buf.append( className );
  75. this.buf.append( ' style="position:absolute;' );
  76. this.buf.append( 'left:' );
  77. this.buf.append( x * this.zoomFactor );
  78. this.buf.append( 'px;top:' );
  79. this.buf.append( y * this.zoomFactor );
  80. this.buf.append( 'px;width:' );
  81. this.buf.append( width * this.zoomFactor );
  82. this.buf.append( 'px;height:' );
  83. this.buf.append( height * this.zoomFactor );
  84. this.buf.append( 'px;"' );
  85. this.addId ( sId );
  86. this.buf.append( '><\/div>' );
  87. }
  88. this.refresh = function ()
  89. {
  90. this.htm = this.buf.toString();
  91. if ( this.ie )
  92. {
  93. // moves the content into the container canvas (Internet Explorer)
  94. this.canvas.insertAdjacentHTML ( "BeforeEnd", this.htm );
  95. }
  96. else
  97. {
  98. var range = document.createRange ();
  99. range.setStartBefore ( this.canvas );
  100. range = range.createContextualFragment ( this.htm );
  101. this.canvas.appendChild ( range );
  102. }
  103. this.buf.cleanUp();
  104. }
  105. this.refreshObject = function ( id )
  106. {
  107. var elem = document.getElementById ( id );
  108. if ( elem )
  109. {
  110. elem.innerHTML = '';
  111. this.htm = this.buf.toString();
  112. if ( this.ie )
  113. {
  114. elem.insertAdjacentHTML ( "BeforeEnd", this.htm );
  115. }
  116. else
  117. {
  118. var range = document.createRange ();
  119. range.setStartBefore ( elem );
  120. range = range.createContextualFragment ( this.htm );
  121. elem.appendChild ( range );
  122. elem.innerHTML = this.htm;
  123. }
  124. //elem.style.display = "none";
  125. //elem.style.display = "block";
  126. }
  127. this.buf.cleanUp();
  128. }
  129. this.drawArrowLeft = function ( color, xArrowTip, yArrowTip, sPenStyle, nSize )
  130. {
  131. sPenStyle = 'solid';
  132. this.drawHorzLine ( color, 1, sPenStyle, xArrowTip, yArrowTip, nSize ); // Center line
  133. for ( var i = 1; i <= nSize/2; i++ )
  134. {
  135. this.drawHorzLine ( color, 1, sPenStyle, xArrowTip + i*2, yArrowTip - i, nSize - i*2 + 1 );
  136. this.drawHorzLine ( color, 1, sPenStyle, xArrowTip + i*2, yArrowTip + i, nSize - i*2 + 1 );
  137. }
  138. }
  139. this.drawArrowRight = function ( color, xArrowTip, yArrowTip, sPenStyle, nSize )
  140. {
  141. for ( var i = 1; i <= nSize/2; i++ )
  142. {
  143. this.drawHorzLine ( color, 1, sPenStyle, xArrowTip - nSize - 1, yArrowTip - i, nSize - i*2 + 1 );
  144. this.drawHorzLine ( color, 1, sPenStyle, xArrowTip - nSize - 1, yArrowTip + i, nSize - i*2 + 1 );
  145. }
  146. }
  147. this.drawArrowUp = function ( color, xArrowTip, yArrowTip, sPenStyle, nSize )
  148. {
  149. for ( var i = 1; i <= nSize/2; i++ )
  150. {
  151. this.drawVertLine ( color, 1, sPenStyle, xArrowTip - i, yArrowTip + i*2, nSize - i*2 + 1 );
  152. this.drawVertLine ( color, 1, sPenStyle, xArrowTip + i, yArrowTip + i*2, nSize - i*2 + 1 );
  153. }
  154. }
  155. this.drawArrowDown = function ( color, xArrowTip, yArrowTip, sPenStyle, nSize )
  156. {
  157. sPenStyle = 'solid';
  158. this.drawVertLine ( color, 1, sPenStyle, xArrowTip, yArrowTip - nSize - 1, nSize ); // Center line
  159. for ( var i = 1; i <= nSize/2; i++ )
  160. {
  161. this.drawVertLine ( color, 1, sPenStyle, xArrowTip - i, yArrowTip - nSize - 1, nSize - i*2 + 1 );
  162. this.drawVertLine ( color, 1, sPenStyle, xArrowTip + i, yArrowTip - nSize - 1, nSize - i*2 + 1 );
  163. }
  164. }
  165. this.fillRectangle = function ( color, x, y, width, height, opacity, extra )
  166. {
  167. this.div ( color, x, y, width, height, '', opacity, extra );
  168. }
  169. this.drawHorzLine = function ( color, penWidth, penStyle, x, y, width )
  170. {
  171. this.divLine ( color, x, y, width, penWidth, penStyle, penWidth, '', '', 'horzLine' );
  172. }
  173. this.drawHorzLineToPoint = function ( color, penWidth, penStyle, point1, point2 )
  174. {
  175. if ( point1.x == point2.x )
  176. return;
  177. // The first point should always be on the left
  178. if ( point1.x > point2.x )
  179. {
  180. var pointSwap = point1;
  181. point1 = point2;
  182. point2 = pointSwap;
  183. }
  184. var length = point2.x - point1.x;
  185. this.divLine ( color, point1.x, point1.y, length, penWidth, penStyle, penWidth, '', '', 'horzLine' );
  186. }
  187. this.drawVertLine = function ( color, penWidth, penStyle, x, y, height )
  188. {
  189. this.divLine ( color, x, y, penWidth, height, penStyle, penWidth, '', '', 'vertLine' );
  190. }
  191. this.drawVertLineToPoint = function ( color, penWidth, penStyle, point1, point2 )
  192. {
  193. if ( point1.y == point2.y )
  194. return;
  195. // The first point should always be on the top
  196. if ( point1.y > point2.y )
  197. {
  198. var pointSwap = point1;
  199. point1 = point2;
  200. point2 = pointSwap;
  201. }
  202. var height = point2.y - point1.y + penWidth;
  203. this.divLine ( color, point1.x, point1.y, penWidth, height, penStyle, penWidth, '', '', 'vertLine' );
  204. }
  205. this.drawVertAngledLineToPoint = function ( color, penWidth, penStyle, point1, point2, nElbowOffset )
  206. {
  207. if ( ! point1 || ! point2 )
  208. return;
  209. if ( point1.y == point2.y )
  210. return;
  211. // The first point should always be on the top
  212. var ptArrow = point2;
  213. if ( point1.y > point2.y )
  214. {
  215. var pointSwap = point1;
  216. point1 = point2;
  217. point2 = pointSwap;
  218. ptArrow = point1;
  219. }
  220. var nOffset = point2.y - point1.y;
  221. var xStep = point1.x - 20 - nElbowOffset;
  222. var ptStep = new CPoint ( xStep, point1.y + ( point2.y - point1.y ) / 2 );
  223. var ptStep1 = new CPoint ( xStep, point1.y );
  224. var ptStep2 = new CPoint ( xStep, point2.y );
  225. this.drawHorzLineToPoint ( color, penWidth, penStyle, point1, ptStep1 );
  226. this.drawVertLineToPoint ( color, penWidth, penStyle, ptStep1, ptStep2 );
  227. this.drawHorzLineToPoint ( color, penWidth, penStyle, ptStep2, point2 );
  228. this.drawArrowRight ( color, ptArrow.x, ptArrow.y, penStyle, DG.graphDefaults.nArrowSize );
  229. }
  230. this.drawLinePointToPoint = function ( color, penWidth, penStyle, pt1, pt2, nElbowOffset )
  231. {
  232. var point1 = pt1;
  233. var point2 = pt2;
  234. if ( point1 == point2 )
  235. return;
  236. // The first point should always be on the left
  237. if ( point1.x > point2.x )
  238. {
  239. var pointSwap = point1;
  240. point1 = point2;
  241. point2 = pointSwap;
  242. }
  243. // By now point1 is guaranteed to be on the left
  244. // point1.x += 1;
  245. if ( DG.graphDefaults.bUseShadows )
  246. point1.x += DG.graphDefaults.nShadowWidth - 1;
  247. if ( point1.y == point2.y )
  248. {
  249. this.drawHorzLineToPoint ( color, penWidth, penStyle, point1, point2 );
  250. return;
  251. }
  252. var xStep = point1.x + ( point2.x - point1.x ) / 2;
  253. xStep = Math.max ( point1.x + DG.graphDefaults.nArrowSize + 5, xStep - nElbowOffset );
  254. var ptStep1 = new CPoint ( xStep, point1.y );
  255. var ptStep2 = new CPoint ( xStep, point2.y );
  256. this.drawHorzLineToPoint ( color, penWidth, penStyle, point1, ptStep1 );
  257. this.drawVertLineToPoint ( color, penWidth, penStyle, ptStep1, ptStep2 );
  258. this.drawHorzLineToPoint ( color, penWidth, penStyle, ptStep2, point2 );
  259. }
  260. this.addId = function ( sId )
  261. {
  262. if ( typeof sId != "undefined" && sId.length > 0 )
  263. {
  264. this.buf.append( ' id=' );
  265. this.buf.append( sId );
  266. }
  267. }
  268. this.addTooltip = function ( sTooltip )
  269. {
  270. if ( typeof sTooltip != "undefined" && sTooltip.length > 0 )
  271. {
  272. this.buf.append( ' alt="' ); // For tooltip support in Internet Explorer
  273. this.buf.append( sTooltip );
  274. this.buf.append( '"' );
  275. this.buf.append( ' title="' ); // For tooltip support in other browsers
  276. this.buf.append( sTooltip );
  277. this.buf.append( '"' );
  278. }
  279. }
  280. this.addOpacity = function ( opacity )
  281. {
  282. if ( typeof opacity != "undefined" )
  283. {
  284. if ( this.ie )
  285. {
  286. this.buf.append( 'filter:alpha(opacity=' );
  287. this.buf.append( opacity * 100 );
  288. this.buf.append( ');' );
  289. }
  290. else
  291. {
  292. this.buf.append( 'opacity:' );
  293. this.buf.append( opacity );
  294. this.buf.append( ';' );
  295. }
  296. }
  297. // This is equal to one-liner:
  298. // this.buf.append( (this.ie ? 'filter:alpha(opacity=' + opacity*100 + ');' : 'opacity:' + opacity + ';') );
  299. }
  300. this.drawImageImpl = function ( image, className, x, y, width, height, sId, sTooltip )
  301. {
  302. this.buf.append( '<div class=' );
  303. this.buf.append( className );
  304. this.buf.append( ' style="left:' );
  305. this.buf.append( x * this.zoomFactor );
  306. this.buf.append( 'px;top:' );
  307. this.buf.append( y * this.zoomFactor );
  308. this.buf.append( 'px;width:' );
  309. this.buf.append( width * this.zoomFactor );
  310. this.buf.append( 'px;height:' );
  311. this.buf.append( height * this.zoomFactor );
  312. this.buf.append( 'px;' );
  313. this.buf.append( '">' );
  314. this.buf.append( '<img src="' );
  315. this.buf.append( image );
  316. this.buf.append( '" width=' );
  317. this.buf.append( width * this.zoomFactor );
  318. this.buf.append( ' height=' );
  319. this.buf.append( height * this.zoomFactor );
  320. this.addId ( sId );
  321. this.addTooltip ( sTooltip );
  322. this.buf.append( '><\/div>' );
  323. /*
  324. var elemHtml = '<div style="position:absolute;' +
  325. (typeof opacity != "undefined" && opacity != 1.0 ? (this.ie ? 'filter:alpha(opacity=' + opacity*100 + ');' : 'opacity:' + opacity + ';') : '') +
  326. 'left:' + x * this.zoomFactor + 'px;' +
  327. 'top:' + y * this.zoomFactor + 'px;' +
  328. 'width:' + width * this.zoomFactor + 'px;' +
  329. 'height:' + height * this.zoomFactor + 'px;' +
  330. (zIndex > -1 ? 'z-index:' + zIndex + ';' : '') +
  331. '">' +
  332. '<img src="' + image + '" width=' + width*this.zoomFactor + ' height=' + height*this.zoomFactor +
  333. (typeof sId != "undefined" ? ' id=' + sId : '') +
  334. '><\/div>';
  335. */
  336. }
  337. this.drawIcon = function ( image, x, y, width, height, id, sTooltip )
  338. {
  339. this.drawImageImpl ( image, 'classIconType', x, y, width, height, id, sTooltip );
  340. }
  341. this.drawActionIcon = function ( image, x, y, width, height, id, sTooltip )
  342. {
  343. this.drawImageImpl ( image, 'classIconAction', x, y, width, height, id, sTooltip );
  344. }
  345. this.drawBackgroundImage= function ( image, x, y, width, height, id )
  346. {
  347. this.drawImageImpl ( image, 'classBkImage', x, y, width, height, id );
  348. }
  349. /*
  350. * drawCaptionRect - intended to draw a caption rect with the bottom border only,
  351. * the image background, an icon at the left & the text aligned
  352. * alongside to the icon.
  353. * This one function will replace three others:
  354. * - gdi.drawBackgroundImage
  355. * - gdi.drawHorzLine
  356. * - gdi.drawString
  357. */
  358. this.drawCaptionRect = function ( idRect, className, text, x, y, width, height, penWidth, image )
  359. {
  360. var rectWidth = width - penWidth + 2;
  361. var rectHeight = height - penWidth + 2;
  362. if ( ! this.ie ) // for Firefox
  363. {
  364. rectWidth -= ( penWidth + 1 );
  365. rectHeight -= ( penWidth + 1 );
  366. }
  367. this.buf.append( '<div class=' );
  368. this.buf.append( className );
  369. this.buf.append( ' id=' );
  370. this.buf.append( idRect );
  371. this.buf.append( ' style="position:absolute;white-space:nowrap;overflow:hidden;' );
  372. this.buf.append( 'left:' );
  373. this.buf.append( x * this.zoomFactor );
  374. this.buf.append( 'px;top:' );
  375. this.buf.append( y * this.zoomFactor );
  376. this.buf.append( 'px;width:' );
  377. this.buf.append( width * this.zoomFactor );
  378. this.buf.append( 'px;height:' );
  379. this.buf.append( height * this.zoomFactor );
  380. this.buf.append( 'px;">' );
  381. this.buf.append( '<img src="' );
  382. this.buf.append( image );
  383. this.buf.append( '" width=' );
  384. this.buf.append( width * this.zoomFactor );
  385. this.buf.append( ' height=' );
  386. this.buf.append( height * this.zoomFactor );
  387. this.buf.append( ' class="img">' );
  388. this.buf.append( text );
  389. this.buf.append( '<\/div>' );
  390. /*
  391. this.htm += '<div class=' + className + ' id=' + idRect +
  392. ' style="position:absolute;white-space:nowrap;overflow:hidden;' +
  393. 'left:' + x * this.zoomFactor + 'px;' +
  394. 'top:' + y * this.zoomFactor + 'px;' +
  395. 'width:' + width * this.zoomFactor +'px;' +
  396. 'height:' + height* this.zoomFactor +'px;">' +
  397. '<img src="' + image + '" width=' + width*this.zoomFactor + ' height=' + height*this.zoomFactor + ' class="img">' +
  398. text +
  399. '<\/div>';
  400. */
  401. }
  402. this.drawRectangle = function ( color, x, y, width, height, sBorderStyle, penWidth, idRect )
  403. {
  404. var rectWidth = width - penWidth + 2;
  405. var rectHeight = height - penWidth + 2;
  406. if ( ! this.ie ) // for Firefox
  407. {
  408. rectWidth -= ( penWidth + 1 );
  409. rectHeight -= ( penWidth + 1 );
  410. }
  411. this.divLine ( color, x, y, rectWidth, rectHeight, sBorderStyle, penWidth, '', idRect );
  412. }
  413. this.drawString = function ( sText, color, x, y, width, height, font, size, style, sId, sTooltip )
  414. {
  415. var escapedText = escapeHTML( sText );
  416. var colorText = typeof color == "string" ? color : color.rgb;
  417. var opacity = color.opacity;
  418. var font_used = font != "" ? font : "verdana,geneva,helvetica,sans-serif";
  419. var fontStyle = getFontStyle (style);
  420. this.buf.append( '<div style="position:absolute;white-space:nowrap;overflow:hidden;' );
  421. this.buf.append( 'left:' );
  422. this.buf.append( x * this.zoomFactor );
  423. this.buf.append( 'px;top:' );
  424. this.buf.append( y * this.zoomFactor );
  425. this.buf.append( 'px;width:' );
  426. this.buf.append( width * this.zoomFactor );
  427. this.buf.append( 'px;height:' );
  428. this.buf.append( height * this.zoomFactor );
  429. this.buf.append( 'px;font-family:' );
  430. this.buf.append( font_used );
  431. this.buf.append( ';font-size:' );
  432. this.buf.append( size * this.zoomFactor );
  433. this.buf.append( 'px;z-index:1;' );
  434. this.buf.append( fontStyle );
  435. this.addOpacity( opacity );
  436. this.buf.append( 'color:' );
  437. this.buf.append( colorText );
  438. this.buf.append( ';"' );
  439. this.addId ( sId );
  440. this.addTooltip ( sTooltip );
  441. this.buf.append( '>' );
  442. this.buf.append( escapedText );
  443. this.buf.append( '<\/div>' );
  444. /*
  445. this.htm += '<div style="position:absolute;white-space:nowrap;overflow:hidden;'+
  446. 'left:' + x * this.zoomFactor + 'px;' +
  447. 'top:' + y * this.zoomFactor + 'px;' +
  448. 'width:' + width * this.zoomFactor +'px;' +
  449. 'height:' + height * this.zoomFactor +'px;' +
  450. 'font-family:' + font_used + ';'+
  451. 'font-size:' + size * this.zoomFactor + 'px;' +
  452. 'z-index:' + 1 + ';' +
  453. fontStyle +
  454. (typeof opacity != "undefined" ? (this.ie ? 'filter:alpha(opacity=' + opacity*100 + ');' : 'opacity:' + opacity + ';') : '') +
  455. 'color:' + colorText + ';"' +
  456. (typeof sId != "undefined" ? ' id=' + sId : '') +
  457. '>' +
  458. escapedText +
  459. '<\/div>';
  460. */
  461. }
  462. this.moveObject = function ( elem, x, y )
  463. {
  464. var domElem = elem;
  465. if ( typeof elem == "string" )
  466. domElem = document.getElementById( elem );
  467. domElem.style.left = x * this.zoomFactor + 'px';
  468. domElem.style.top = y * this.zoomFactor + 'px';
  469. }
  470. this.resizeObject = function ( elem, width, height )
  471. {
  472. var domElem = elem;
  473. if ( typeof elem == "string" )
  474. domElem = document.getElementById( elem );
  475. domElem.style.width = width * this.zoomFactor;
  476. domElem.style.height= height * this.zoomFactor;
  477. }
  478. // Private methods
  479. this.div = function ( color, x, y, width, height, sBorderStyle, opacity, extra )
  480. {
  481. var colorBk = typeof color == "string" ? color : color.rgb;
  482. x = x * this.zoomFactor;
  483. y = y * this.zoomFactor;
  484. width = width * this.zoomFactor;
  485. height = height * this.zoomFactor;
  486. if ( width < 1 ) width = 1;
  487. if ( height < 1 ) height = 1;
  488. this.buf.append( '<div style="position:absolute;' );
  489. this.buf.append( 'left:' );
  490. this.buf.append( x );
  491. this.buf.append( 'px;top:' );
  492. this.buf.append( y );
  493. this.buf.append( 'px;width:' );
  494. this.buf.append( width );
  495. this.buf.append( 'px;height:' );
  496. this.buf.append( height );
  497. this.buf.append( 'px;' );
  498. if ( sBorderStyle )
  499. {
  500. this.buf.append( 'border-style:' );
  501. this.buf.append( sBorderStyle );
  502. this.buf.append( ';' );
  503. }
  504. if ( this.ie )
  505. this.buf.append( 'clip:rect(0,' + width + 'px,' + height + 'px,0);' );
  506. this.addOpacity( opacity );
  507. this.buf.append( 'background-color:' );
  508. this.buf.append( colorBk );
  509. this.buf.append( ';"' );
  510. if ( extra )
  511. {
  512. this.buf.append( ' ' );
  513. this.buf.append( extra );
  514. }
  515. this.buf.append( '><\/div>' );
  516. /*
  517. var sBkColor = 'background-color:' + colorBk + ';';
  518. var sBorderString = sBorderStyle ? 'border-style:' + sBorderStyle + ';' : '';
  519. this.htm += '<div style="position:absolute;' +
  520. 'left:' + x + 'px;' +
  521. 'top:' + y + 'px;' +
  522. 'width:' + width + 'px;' +
  523. 'height:' + height + 'px;' +
  524. (sBorderString ? sBorderString : '') +
  525. (this.ie ? 'clip:rect(0,' + width + 'px,' + height + 'px,0);' : '') +
  526. (opacity ? (this.ie ? 'filter:alpha(opacity=' + opacity*100 + ');' : 'opacity:' + opacity + ';') : '') +
  527. sBkColor + '"' +
  528. (extra ? ' ' + extra : '') +
  529. '><\/div>';
  530. */
  531. }
  532. this.divLine = function ( color, x, y, width, height, sBorderStyle, nBorderWidth, opacity, sId, extra )
  533. {
  534. var colorBorder = typeof color == "string" ? color : color.rgb;
  535. x = x * this.zoomFactor;
  536. y = y * this.zoomFactor;
  537. width = width * this.zoomFactor;
  538. height = height * this.zoomFactor;
  539. if ( width < 1 ) width = 1;
  540. if ( height < 1 ) height = 1;
  541. var sBorderString = '';
  542. var sBkColor = 'background-color: transparent;';
  543. var sLineHack = 'font-size: 0px;'; // A hack to correctly render lines in IE6
  544. if ( sBorderStyle )
  545. {
  546. // special sBorderStyle values are to be set by line drawing methods
  547. if ( extra == 'horzLine' )
  548. {
  549. sBorderString = 'border-color:' + colorBorder + ';' + 'border-style:' + sBorderStyle + ';';
  550. sBorderString += 'border-left-width: 0px;' + 'border-top-width: ' + height + 'px;';
  551. sBorderString += 'border-right-width: 0px;' + 'border-bottom-width: 0px;';
  552. }
  553. else
  554. if ( extra == 'vertLine' )
  555. {
  556. sBorderString = 'border-color:' + colorBorder + ';' + 'border-style:' + sBorderStyle + ';';
  557. sBorderString += 'border-left-width: ' + width + 'px;' + 'border-top-width: 0px;';
  558. sBorderString += 'border-right-width: 0px;' + 'border-bottom-width: 0px;';
  559. }
  560. else
  561. {
  562. sBorderString = 'border-style:' + sBorderStyle + ';' + 'border-width:' + nBorderWidth + ';';
  563. }
  564. }
  565. this.buf.append( '<div style="position:absolute;' );
  566. this.buf.append( 'left:' );
  567. this.buf.append( x );
  568. this.buf.append( 'px;top:' );
  569. this.buf.append( y );
  570. this.buf.append( 'px;width:' );
  571. this.buf.append( width );
  572. this.buf.append( 'px;height:' );
  573. this.buf.append( height );
  574. this.buf.append( 'px;' );
  575. if ( sLineHack )
  576. this.buf.append( sLineHack );
  577. if ( sBorderString )
  578. this.buf.append( sBorderString );
  579. if ( this.ie )
  580. this.buf.append( 'clip:rect(0,' + width + 'px,' + height + 'px,0);' );
  581. if ( opacity )
  582. {
  583. this.addOpacity( opacity );
  584. }
  585. this.buf.append( sBkColor );
  586. this.buf.append( '"' );
  587. this.addId ( sId );
  588. this.buf.append( '><\/div>' );
  589. }
  590. this.drawPixel = function ( color, x, y, opacity )
  591. {
  592. this.div ( color, x, y, 1, 1, '', opacity );
  593. }
  594. function getFontStyle ( style )
  595. {
  596. fontStyle = "";
  597. if (typeof style == "undefined")
  598. return fontStyle;
  599. if (style.search (/bold/i) >= 0)
  600. fontStyle += "font-weight:bold;";
  601. if (style.search (/italic/i) >= 0)
  602. fontStyle += "font-style:italic;";
  603. return fontStyle;
  604. }
  605. }