/**
* @namespace Oracle.BDD.Portlets.Visualization.Model
*
*/
Ext.ns('Oracle.BDD.Portlets.Visualization.Model');
/**
* <b>Do NOT instantiate this class directly.</b> The canvas object should be
* acquired through the
* {@link Oracle.BDD.Portlets.Visualization.Renderers.BaseRenderer#getCanvas}
* function ONLY.
*
* @class Oracle.BDD.Portlets.Visualization.Model.Canvas
*
*/
Oracle.BDD.Portlets.Visualization.Model.Canvas = function(config) {
config = config || {};
this._tagName = config.tagName;
this._rendererId = config.rendererId;
this._width = config.width;
this._height = config.height;
this._container = config.container;
if (config.margins && Ext.isObject(config.margins)) {
Ext.copyTo(this._margins, config.margins, 'left,right,top,bottom');
}
this.clear();
return this;
};
Oracle.BDD.Portlets.Visualization.Model.Canvas.prototype = {
_container: undefined,
_height: 0,
_margins: {top: 20, right: 20, bottom: 20, left: 20},
_rendererId: undefined,
_tagName: 'svg',
_width: 0,
/**
* Clears the canvas of all child elements.
*/
clear: function() {
d3.select('#' + this._rendererId).selectAll('#' + this._rendererId + "_wrapper").remove();
},
/**
* Returns the height in pixels of the configured canvas height minus the
* top and bottom margins. This is the "working" height of the canvas.
*
* @return {Number} Canvas height
*/
getHeight: function() {
var margin = this._margins.top + this._margins.bottom;
if (isNaN(this._height) || this._height <= 0) {
return this._container.getHeight() - margin;
}
return this._height - margin;
},
/**
* Returns the margins of the canvas as { top: 50, bottom: 50, right: 50,
* left: 50}
*
* @return {Object} Margins of the canvas
*/
getMargins: function() {
return this._margins;
},
/**
* Returns the canvas root element's id
*
* @returns {string} The root element's id
*/
getRootId: function() {
return this._rendererId + "_root";
},
/**
* Returns the canvas as a DOM node. This is the root element onto which the
* visualization is to be rendered. If a tagName was specified in the
* configuration, an element of that tagName will be returned, otherwise a \<G\>
* container element wrapped in an \<SVG\> element will be returned. Note
* that this function returns a blank node only when the visualization has
* not yet been rendered or the clear parameter is true, otherwise the node
* will be the root element of the existing visualization's canvas.
*
* @param {boolean}
* clear Indicates if the existing canvas content should be
* cleared
* @returns {Object} The canvas as a DOM Node
*/
getRoot: function(clear) {
this._tagName = this._tagName || 'svg';
if (!this.isRendered()) {
d3.select('#' + this._rendererId + "_wrapper").remove();
if (this._tagName.toLowerCase() === 'svg') {
d3.select('#' + this._rendererId).append('svg')
.attr("id", this._rendererId + "_wrapper")
.attr("width", this.getWidth() + this._margins.left + this._margins.right)
.attr("height", this.getHeight() + this._margins.top + this._margins.bottom)
.append("g")
.attr("id", this.getRootId())
.attr("class", this._rendererId)
.attr("width", this.getWidth())
.attr("height", this.getHeight())
.attr("transform", "translate(" + this._margins.left + "," + this._margins.top + ")");
} else {
d3.select('#' + this._rendererId).append(this._tagName)
.attr("id", this._rendererId + "_wrapper")
.style("position", "relative")
.style("width", (this.getWidth() + this._margins.left + this._margins.right) + "px")
.style("height", (this.getHeight() + this._margins.top + this._margins.bottom ) + "px")
.append('div')
.attr("id", this.getRootId())
.style("margin-right", this._margins.right + "px")
.style("margin-bottom", this._margins.bottom + "px")
.style("margin-left", this._margins.left + "px")
.style("margin-top", this._margins.top + "px")
.classed(this._rendererId, true);
}
}
return document.getElementById(this.getRootId());
},
/**
* Returns the width in pixels of the configured canvas width minus the left
* and right margins. This is the "working" width of the canvas.
*
* @return {Number} Canvas width
*/
getWidth: function() {
var margin = this._margins.left + this._margins.right;
if (isNaN(this._width)
|| this._width <= 0
|| (this._width && this._width > this._container.getWidth()) ) {
return this._container.getWidth() - margin;
}
return this._width - margin;
},
/**
* Returns a boolean indicating if the canvas contains any content.
*
* @return {boolean}
*/
isRendered: function() {
var canvas = d3.select('#' + this._rendererId).select("#" + this.getRootId());
return !Ext.isEmpty(canvas) && canvas.length > 0 && canvas[0][0] != null && canvas[0][0].firstChild != null;
},
/**
* Retained for 1.1.0 compatibility
*
* @private
* @deprecated
*/
getD3Root: function(clear) {
return d3.select(this.getRoot(clear));
},
/**
* Retained for 1.1.0 compatibility
*
* @private
* @deprecated
*/
getRootNode: function(clear) {
return this.getRoot(clear);
}
};
// @ sourceURL=Canvas.js