' );
}
this.addText = function ( sText )
{
var escapedText = escapeHTML ( sText );
this.buf.append( escapedText );
}
this.endContainer = function ()
{
this.buf.append( '<\/div>' );
}
this.divBackground = function ( className, x, y, width, height, sId )
{
this.buf.append( '
<\/div>' );
}
this.refresh = function ()
{
this.htm = this.buf.toString();
if ( this.ie )
{
// moves the content into the container canvas (Internet Explorer)
this.canvas.insertAdjacentHTML ( "BeforeEnd", this.htm );
}
else
{
var range = document.createRange ();
range.setStartBefore ( this.canvas );
range = range.createContextualFragment ( this.htm );
this.canvas.appendChild ( range );
}
this.buf.cleanUp();
}
this.refreshObject = function ( id )
{
var elem = document.getElementById ( id );
if ( elem )
{
elem.innerHTML = '';
this.htm = this.buf.toString();
if ( this.ie )
{
elem.insertAdjacentHTML ( "BeforeEnd", this.htm );
}
else
{
var range = document.createRange ();
range.setStartBefore ( elem );
range = range.createContextualFragment ( this.htm );
elem.appendChild ( range );
elem.innerHTML = this.htm;
}
//elem.style.display = "none";
//elem.style.display = "block";
}
this.buf.cleanUp();
}
this.drawArrowLeft = function ( color, xArrowTip, yArrowTip, sPenStyle, nSize )
{
sPenStyle = 'solid';
this.drawHorzLine ( color, 1, sPenStyle, xArrowTip, yArrowTip, nSize ); // Center line
for ( var i = 1; i <= nSize/2; i++ )
{
this.drawHorzLine ( color, 1, sPenStyle, xArrowTip + i*2, yArrowTip - i, nSize - i*2 + 1 );
this.drawHorzLine ( color, 1, sPenStyle, xArrowTip + i*2, yArrowTip + i, nSize - i*2 + 1 );
}
}
this.drawArrowRight = function ( color, xArrowTip, yArrowTip, sPenStyle, nSize )
{
for ( var i = 1; i <= nSize/2; i++ )
{
this.drawHorzLine ( color, 1, sPenStyle, xArrowTip - nSize - 1, yArrowTip - i, nSize - i*2 + 1 );
this.drawHorzLine ( color, 1, sPenStyle, xArrowTip - nSize - 1, yArrowTip + i, nSize - i*2 + 1 );
}
}
this.drawArrowUp = function ( color, xArrowTip, yArrowTip, sPenStyle, nSize )
{
for ( var i = 1; i <= nSize/2; i++ )
{
this.drawVertLine ( color, 1, sPenStyle, xArrowTip - i, yArrowTip + i*2, nSize - i*2 + 1 );
this.drawVertLine ( color, 1, sPenStyle, xArrowTip + i, yArrowTip + i*2, nSize - i*2 + 1 );
}
}
this.drawArrowDown = function ( color, xArrowTip, yArrowTip, sPenStyle, nSize )
{
sPenStyle = 'solid';
this.drawVertLine ( color, 1, sPenStyle, xArrowTip, yArrowTip - nSize - 1, nSize ); // Center line
for ( var i = 1; i <= nSize/2; i++ )
{
this.drawVertLine ( color, 1, sPenStyle, xArrowTip - i, yArrowTip - nSize - 1, nSize - i*2 + 1 );
this.drawVertLine ( color, 1, sPenStyle, xArrowTip + i, yArrowTip - nSize - 1, nSize - i*2 + 1 );
}
}
this.fillRectangle = function ( color, x, y, width, height, opacity, extra )
{
this.div ( color, x, y, width, height, '', opacity, extra );
}
this.drawHorzLine = function ( color, penWidth, penStyle, x, y, width )
{
this.divLine ( color, x, y, width, penWidth, penStyle, penWidth, '', '', 'horzLine' );
}
this.drawHorzLineToPoint = function ( color, penWidth, penStyle, point1, point2 )
{
if ( point1.x == point2.x )
return;
// The first point should always be on the left
if ( point1.x > point2.x )
{
var pointSwap = point1;
point1 = point2;
point2 = pointSwap;
}
var length = point2.x - point1.x;
this.divLine ( color, point1.x, point1.y, length, penWidth, penStyle, penWidth, '', '', 'horzLine' );
}
this.drawVertLine = function ( color, penWidth, penStyle, x, y, height )
{
this.divLine ( color, x, y, penWidth, height, penStyle, penWidth, '', '', 'vertLine' );
}
this.drawVertLineToPoint = function ( color, penWidth, penStyle, point1, point2 )
{
if ( point1.y == point2.y )
return;
// The first point should always be on the top
if ( point1.y > point2.y )
{
var pointSwap = point1;
point1 = point2;
point2 = pointSwap;
}
var height = point2.y - point1.y + penWidth;
this.divLine ( color, point1.x, point1.y, penWidth, height, penStyle, penWidth, '', '', 'vertLine' );
}
this.drawVertAngledLineToPoint = function ( color, penWidth, penStyle, point1, point2, nElbowOffset )
{
if ( ! point1 || ! point2 )
return;
if ( point1.y == point2.y )
return;
// The first point should always be on the top
var ptArrow = point2;
if ( point1.y > point2.y )
{
var pointSwap = point1;
point1 = point2;
point2 = pointSwap;
ptArrow = point1;
}
var nOffset = point2.y - point1.y;
var xStep = point1.x - 20 - nElbowOffset;
var ptStep = new CPoint ( xStep, point1.y + ( point2.y - point1.y ) / 2 );
var ptStep1 = new CPoint ( xStep, point1.y );
var ptStep2 = new CPoint ( xStep, point2.y );
this.drawHorzLineToPoint ( color, penWidth, penStyle, point1, ptStep1 );
this.drawVertLineToPoint ( color, penWidth, penStyle, ptStep1, ptStep2 );
this.drawHorzLineToPoint ( color, penWidth, penStyle, ptStep2, point2 );
this.drawArrowRight ( color, ptArrow.x, ptArrow.y, penStyle, DG.graphDefaults.nArrowSize );
}
this.drawLinePointToPoint = function ( color, penWidth, penStyle, pt1, pt2, nElbowOffset )
{
var point1 = pt1;
var point2 = pt2;
if ( point1 == point2 )
return;
// The first point should always be on the left
if ( point1.x > point2.x )
{
var pointSwap = point1;
point1 = point2;
point2 = pointSwap;
}
// By now point1 is guaranteed to be on the left
// point1.x += 1;
if ( DG.graphDefaults.bUseShadows )
point1.x += DG.graphDefaults.nShadowWidth - 1;
if ( point1.y == point2.y )
{
this.drawHorzLineToPoint ( color, penWidth, penStyle, point1, point2 );
return;
}
var xStep = point1.x + ( point2.x - point1.x ) / 2;
xStep = Math.max ( point1.x + DG.graphDefaults.nArrowSize + 5, xStep - nElbowOffset );
var ptStep1 = new CPoint ( xStep, point1.y );
var ptStep2 = new CPoint ( xStep, point2.y );
this.drawHorzLineToPoint ( color, penWidth, penStyle, point1, ptStep1 );
this.drawVertLineToPoint ( color, penWidth, penStyle, ptStep1, ptStep2 );
this.drawHorzLineToPoint ( color, penWidth, penStyle, ptStep2, point2 );
}
this.addId = function ( sId )
{
if ( typeof sId != "undefined" && sId.length > 0 )
{
this.buf.append( ' id=' );
this.buf.append( sId );
}
}
this.addTooltip = function ( sTooltip )
{
if ( typeof sTooltip != "undefined" && sTooltip.length > 0 )
{
this.buf.append( ' alt="' ); // For tooltip support in Internet Explorer
this.buf.append( sTooltip );
this.buf.append( '"' );
this.buf.append( ' title="' ); // For tooltip support in other browsers
this.buf.append( sTooltip );
this.buf.append( '"' );
}
}
this.addOpacity = function ( opacity )
{
if ( typeof opacity != "undefined" )
{
if ( this.ie )
{
this.buf.append( 'filter:alpha(opacity=' );
this.buf.append( opacity * 100 );
this.buf.append( ');' );
}
else
{
this.buf.append( 'opacity:' );
this.buf.append( opacity );
this.buf.append( ';' );
}
}
// This is equal to one-liner:
// this.buf.append( (this.ie ? 'filter:alpha(opacity=' + opacity*100 + ');' : 'opacity:' + opacity + ';') );
}
this.drawImageImpl = function ( image, className, x, y, width, height, sId, sTooltip )
{
this.buf.append( '
' );
this.buf.append( '
;
this.buf.append( image );
this.buf.append( ')
<\/div>' );
/*
var elemHtml = '
-1 ? 'z-index:' + zIndex + ';' : '') +
'">' +
'

<\/div>';
*/
}
this.drawIcon = function ( image, x, y, width, height, id, sTooltip )
{
this.drawImageImpl ( image, 'classIconType', x, y, width, height, id, sTooltip );
}
this.drawActionIcon = function ( image, x, y, width, height, id, sTooltip )
{
this.drawImageImpl ( image, 'classIconAction', x, y, width, height, id, sTooltip );
}
this.drawBackgroundImage= function ( image, x, y, width, height, id )
{
this.drawImageImpl ( image, 'classBkImage', x, y, width, height, id );
}
/*
* drawCaptionRect - intended to draw a caption rect with the bottom border only,
* the image background, an icon at the left & the text aligned
* alongside to the icon.
* This one function will replace three others:
* - gdi.drawBackgroundImage
* - gdi.drawHorzLine
* - gdi.drawString
*/
this.drawCaptionRect = function ( idRect, className, text, x, y, width, height, penWidth, image )
{
var rectWidth = width - penWidth + 2;
var rectHeight = height - penWidth + 2;
if ( ! this.ie ) // for Firefox
{
rectWidth -= ( penWidth + 1 );
rectHeight -= ( penWidth + 1 );
}
this.buf.append( '
' );
this.buf.append( '
;
this.buf.append( image );
this.buf.append( ')
' );
this.buf.append( text );
this.buf.append( '<\/div>' );
/*
this.htm += '
' +
'

' +
text +
'<\/div>';
*/
}
this.drawRectangle = function ( color, x, y, width, height, sBorderStyle, penWidth, idRect )
{
var rectWidth = width - penWidth + 2;
var rectHeight = height - penWidth + 2;
if ( ! this.ie ) // for Firefox
{
rectWidth -= ( penWidth + 1 );
rectHeight -= ( penWidth + 1 );
}
this.divLine ( color, x, y, rectWidth, rectHeight, sBorderStyle, penWidth, '', idRect );
}
this.drawString = function ( sText, color, x, y, width, height, font, size, style, sId, sTooltip )
{
var escapedText = escapeHTML( sText );
var colorText = typeof color == "string" ? color : color.rgb;
var opacity = color.opacity;
var font_used = font != "" ? font : "verdana,geneva,helvetica,sans-serif";
var fontStyle = getFontStyle (style);
this.buf.append( '
' );
this.buf.append( escapedText );
this.buf.append( '<\/div>' );
/*
this.htm += '
' +
escapedText +
'<\/div>';
*/
}
this.moveObject = function ( elem, x, y )
{
var domElem = elem;
if ( typeof elem == "string" )
domElem = document.getElementById( elem );
domElem.style.left = x * this.zoomFactor + 'px';
domElem.style.top = y * this.zoomFactor + 'px';
}
this.resizeObject = function ( elem, width, height )
{
var domElem = elem;
if ( typeof elem == "string" )
domElem = document.getElementById( elem );
domElem.style.width = width * this.zoomFactor;
domElem.style.height= height * this.zoomFactor;
}
// Private methods
this.div = function ( color, x, y, width, height, sBorderStyle, opacity, extra )
{
var colorBk = typeof color == "string" ? color : color.rgb;
x = x * this.zoomFactor;
y = y * this.zoomFactor;
width = width * this.zoomFactor;
height = height * this.zoomFactor;
if ( width < 1 ) width = 1;
if ( height < 1 ) height = 1;
this.buf.append( '
<\/div>' );
/*
var sBkColor = 'background-color:' + colorBk + ';';
var sBorderString = sBorderStyle ? 'border-style:' + sBorderStyle + ';' : '';
this.htm += '
<\/div>';
*/
}
this.divLine = function ( color, x, y, width, height, sBorderStyle, nBorderWidth, opacity, sId, extra )
{
var colorBorder = typeof color == "string" ? color : color.rgb;
x = x * this.zoomFactor;
y = y * this.zoomFactor;
width = width * this.zoomFactor;
height = height * this.zoomFactor;
if ( width < 1 ) width = 1;
if ( height < 1 ) height = 1;
var sBorderString = '';
var sBkColor = 'background-color: transparent;';
var sLineHack = 'font-size: 0px;'; // A hack to correctly render lines in IE6
if ( sBorderStyle )
{
// special sBorderStyle values are to be set by line drawing methods
if ( extra == 'horzLine' )
{
sBorderString = 'border-color:' + colorBorder + ';' + 'border-style:' + sBorderStyle + ';';
sBorderString += 'border-left-width: 0px;' + 'border-top-width: ' + height + 'px;';
sBorderString += 'border-right-width: 0px;' + 'border-bottom-width: 0px;';
}
else
if ( extra == 'vertLine' )
{
sBorderString = 'border-color:' + colorBorder + ';' + 'border-style:' + sBorderStyle + ';';
sBorderString += 'border-left-width: ' + width + 'px;' + 'border-top-width: 0px;';
sBorderString += 'border-right-width: 0px;' + 'border-bottom-width: 0px;';
}
else
{
sBorderString = 'border-style:' + sBorderStyle + ';' + 'border-width:' + nBorderWidth + ';';
}
}
this.buf.append( '
<\/div>' );
}
this.drawPixel = function ( color, x, y, opacity )
{
this.div ( color, x, y, 1, 1, '', opacity );
}
function getFontStyle ( style )
{
fontStyle = "";
if (typeof style == "undefined")
return fontStyle;
if (style.search (/bold/i) >= 0)
fontStyle += "font-weight:bold;";
if (style.search (/italic/i) >= 0)
fontStyle += "font-style:italic;";
return fontStyle;
}
}