TW.Runtime.Widgets.shape = function () { var domElementId; var widgetElement; var widgetProperties; this.runtimeProperties = function () { return { 'supportsTooltip': true, 'needsError': true, 'propertyAttributes': { 'ToolTipField': { 'isLocalizable': true } } }; }; // Parse hex/rgb{a} color syntax. // @input string // @returns array [r,g,b{,o}] this.renderHtml = function () { var html = '
'; return html; }; this.setShapeStyle = function(shape,style,gradientType,gradientOrientation) { var fill = "#000"; var secondaryFill = "#000"; var stroke = "#fff"; var strokeWidth = 1; var strokeStyle = TW.ChartLibrary.STROKE_SOLID; if(style !== undefined && style.styleDefinitionName !== undefined){ fill = style.backgroundColor; secondaryFill = style.secondaryBackgroundColor; stroke = style.lineColor; strokeWidth = parseInt(style.lineThickness); strokeStyle = style.lineStyle; } TW.ChartLibrary.setElementStyle(shape, fill, secondaryFill, gradientType, gradientOrientation, stroke, strokeWidth, strokeStyle); }; this.setLineStyle = function(shape,style) { var stroke = "#fff"; var strokeWidth = 1; var strokeStyle = TW.ChartLibrary.STROKE_SOLID; if(style !== undefined && style.styleDefinitionName !== undefined){ stroke = style.lineColor; strokeWidth = parseInt(style.lineThickness); strokeStyle = style.lineStyle; } TW.ChartLibrary.setElementStyle(shape, undefined, undefined, TW.ChartLibrary.FILL_NONE, TW.ChartLibrary.FILL_NONE, stroke, strokeWidth, strokeStyle); }; this.shapeClickHandler = function() { widgetElement.triggerHandler('Clicked'); }; this.shapeDoubleClickHandler = function() { widgetElement.triggerHandler('DoubleClicked'); }; this.afterRender = function(){ domElementId = this.jqElementId; widgetElement = this.jqElement; widgetProperties = this.properties; //Add the meta tag for IE9 to display the SVG //$('head').append(''); var shapeStyle = TW.getStyleFromStyleDefinition(widgetProperties['ShapeStyle']); var shapeStyleBorderSize = shapeStyle.lineThickness; var width = this.getProperty('Width'); var height = this.getProperty('Height'); var strokeWidth = 1; // var paperWidth = width; // var paperHeight = height; if(shapeStyle !== undefined && shapeStyle.styleDefinitionName !== undefined){ strokeWidth = parseInt(shapeStyle.lineThickness); } if (this.paper) { try { this.paper.clear(); this.paper.remove(); } catch (err) {} } var paper = undefined; if( this.properties.ResponsiveLayout === true ) { paper = Raphael(domElementId, '100%', '100%'); } else { paper = Raphael(domElementId, width, height); } this.paper = paper; var shapeType = widgetProperties['ShapeType']; if(shapeType === undefined){ shapeType = 'rectangle'; } //Get shape style properties switch(shapeType){ case 'rectangle': if(widgetProperties['EnableDynamicFill']) { this.backgroundShape = paper.rect(0, 0, width, height); } this.shape = paper.rect(0, 0, width, height); break; case 'roundrect': if(widgetProperties['EnableDynamicFill']) { this.backgroundShape = paper.rect(0, 0, width, height,widgetProperties['RectangleCornerRadius']); } this.shape = paper.rect(0, 0, width, height,widgetProperties['RectangleCornerRadius']); break; case 'circle': var centerX = width/2; var centerY = height/2; var radius = ((centerX < centerY) ? centerX : centerY) - strokeWidth; if(widgetProperties['EnableDynamicFill']) { this.backgroundShape = paper.circle(centerX, centerY, radius); } this.shape = paper.circle(centerX, centerY, radius); break; case 'ellipse': var centerX = width/2; var centerY = height/2; var radiusX = width/2 - strokeWidth; var radiusY = height/2 - strokeWidth; if(widgetProperties['EnableDynamicFill']) { this.backgroundShape = paper.ellipse(centerX, centerY, radiusX, radiusY); } this.shape = paper.ellipse(centerX, centerY, radiusX, radiusY); break; } this.setShapeStyle(this.shape, shapeStyle, widgetProperties['GradientType'] , widgetProperties['GradientOrientation'] ); if(widgetProperties['EnableDynamicFill']) { if(shapeType == 'rectangle') { if(widgetProperties['DynamicFillOrientation'] == 'horizontal') this.backgroundLine = paper.path(["M",0,0,"L",0,height]); else this.backgroundLine = paper.path(["M",0,height,"L",width,height]); this.setLineStyle(this.backgroundLine, shapeStyle); } this.setShapeStyle(this.backgroundShape, TW.getStyleFromStyleDefinition(widgetProperties['UnfilledBackgroundStyle']), widgetProperties['GradientType'] , widgetProperties['GradientOrientation'] ); } this.shape.click(this.shapeClickHandler); this.shape.dblclick(this.shapeDoubleClickHandler); if(this.backgroundShape !== undefined) { this.backgroundShape.click(this.shapeClickHandler); this.backgroundShape.dblclick(this.shapeDoubleClickHandler); } }; this.updateProperty = function (updatePropertyInfo) { var self = this; widgetProperties = this.properties; if (updatePropertyInfo.TargetProperty === 'ToolTipField') { thisWidget.setProperty('ToolTipField', updatePropertyInfo.SinglePropertyValue); } switch( updatePropertyInfo.TargetProperty ) { case 'DynamicRangeMinimum': case 'DynamicRangeMaximum': case 'ShapeFormatter': case 'Data': self.lastPropertyInfo = JSON.parse(JSON.stringify(updatePropertyInfo)); var shapeType = widgetProperties['ShapeType']; if(shapeType === undefined){ shapeType = 'rectangle'; } var value = undefined; var dataRow = undefined; switch (updatePropertyInfo.TargetProperty) { case "ShapeFormatter": value = this.lastValue; dataRow = this.lastDataRow; break; case "Data": try { value = parseFloat(updatePropertyInfo.RawSinglePropertyValue); } catch(e) { value = undefined; } if( isNaN(value) ) { value = undefined; } dataRow = updatePropertyInfo.ActualDataRows[0]; break; case "DynamicRangeMinimum": value = this.lastValue; dataRow = this.lastDataRow; widgetProperties['DynamicRangeMinimum'] = updatePropertyInfo.RawSinglePropertyValue; break; case "DynamicRangeMaximum": value = this.lastValue; dataRow = this.lastDataRow; widgetProperties['DynamicRangeMaximum'] = updatePropertyInfo.RawSinglePropertyValue; break; } var min = widgetProperties['DynamicRangeMinimum']; if(min == undefined || isNaN(min)) min = 0; var max = widgetProperties['DynamicRangeMaximum']; if(max == undefined || isNaN(max)) max = 100; if(value == undefined || isNaN(value)) { value = min; } var pct = 100 * (value - min) / (max - min); if(pct < 0) pct = 0; if(pct > 100) pct = 100; var hasFormatting = widgetProperties['ShapeFormatter'] !== undefined; var shapeStyle = TW.getStyleFromStyleDefinition(widgetProperties['ShapeStyle']); if (hasFormatting) { shapeStyle = TW.getStyleFromStateFormatting({ DataRow: dataRow, StateFormatting: widgetProperties['ShapeFormatter'] }); } this.setShapeStyle(this.shape, shapeStyle, widgetProperties['GradientType'], widgetProperties['GradientOrientation'] ); if(widgetProperties['EnableDynamicFill']) { var shapeType = widgetProperties['ShapeType']; if(shapeType === undefined){ shapeType = 'rectangle'; } var width = this.getProperty('Width'); var height = this.getProperty('Height'); if(widgetProperties['DynamicFillOrientation'] == 'horizontal') { var fillwidth = width * pct / 100.0; var cliprect = "0 " + 0 + " " + fillwidth + " " + height; this.shape.attr("clip-rect",cliprect); if(shapeType == 'rectangle') { this.setLineStyle(this.backgroundLine,shapeStyle); this.backgroundLine.transform(''); this.backgroundLine.transform(['T',fillwidth,0]); } } else { var fillheight = height * pct / 100.0; var cliprect = "0 " + (height-fillheight) + " " + width + " " + fillheight; this.shape.attr("clip-rect",cliprect); if(shapeType == 'rectangle') { this.setLineStyle(this.backgroundLine,shapeStyle); this.backgroundLine.transform(''); this.backgroundLine.transform(['T',0,-fillheight]); } } } // Save last value this.lastValue = value; this.lastDataRow = dataRow; } widgetProperties = null; }; this.resize = function(width,height) { var self = this; self.properties['Width'] = width; self.properties['Height'] = height; self.afterRender(); if (self.lastPropertyInfo) { self.updateProperty(self.lastPropertyInfo); } }; this.beforeDestroy = function () { if(this.shape !== undefined && this.shape !== null) { this.shape.unclick(this.shapeClickHandler); this.shape.undblclick(this.shapeDoubleClickHandler); this.shape.remove(); this.shape = null; delete this.shape; } if(this.backgroundShape !== undefined && this.backgroundShape !== null) { this.backgroundShape.unclick(this.shapeClickHandler); this.backgroundShape.undblclick(this.shapeDoubleClickHandler); this.backgroundShape.remove(); this.backgroundShape = null; delete this.backgroundShape; } if(this.backgroundLine !== undefined && this.backgroundLine !== null) { this.backgroundLine.remove(); this.backgroundLine = null; delete this.backgroundLine; } if(this.paper !== undefined) { try { this.paper.clear(); this.paper.remove(); try { TW.purgeJqElement(this,false); } catch(err) { TW.log.error('purge error: ' + err); } this.paper = null; delete this.paper; } catch (destroyErr) { } } domElementId = null; widgetProperties = null; widgetElement = null; }; };