@fusioncharts/charts/src/_internal/components/canvases/canvas3d.js

JavaScript Data Visualisation Library

"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule=true;exports.default=void 0;var _inheritsLoose2=_interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _canvas=_interopRequireDefault(require("./canvas"));var _lib=require("@fusioncharts/core/src/lib");var _dependencyManager=require("@fusioncharts/core/src/dependency-manager");var _canvas3d=_interopRequireDefault(require("./canvas3d.animation"));var _redraphaelShapes=_interopRequireDefault(require("@fusioncharts/core/src/_internal/redraphael/redraphael-shapes/redraphael-shapes.cubepath"));var R=(0,_dependencyManager.getDep)("redraphael","plugin"),canvasBaseColor3DStr="canvasBaseColor3D",canvasBGAlphaStr="canvasBgAlpha",clipCanvasStr="clip-canvas",clipCanvasInitStr="clip-canvas-init",COMMA=",",MAX_MITER_LINEJOIN=2,CANVAS_BASE_DEFAULT_VISIBILITY="hidden",ROUND=_lib.preDefStr.ROUND,miterStr=_lib.preDefStr.miterStr,math=Math,mathMax=math.max,Raphael=R,NONE="none",M="M",L="L",Z="Z",H="H",V="V",chartPaletteStr={chart2D:{bgColor:"bgColor",bgAlpha:"bgAlpha",bgAngle:"bgAngle",bgRatio:"bgRatio",canvasBgColor:"canvasBgColor",canvasBaseColor:"canvasBaseColor",divLineColor:"divLineColor",legendBgColor:"legendBgColor",legendBorderColor:"legendBorderColor",toolTipbgColor:"toolTipbgColor",toolTipBorderColor:"toolTipBorderColor",baseFontColor:"baseFontColor",anchorBgColor:"anchorBgColor"},chart3D:{bgColor:"bgColor3D",bgAlpha:"bgAlpha3D",bgAngle:"bgAngle3D",bgRatio:"bgRatio3D",canvasBgColor:"canvasBgColor3D",canvasBaseColor:canvasBaseColor3DStr,divLineColor:"divLineColor3D",divLineAlpha:"divLineAlpha3D",legendBgColor:"legendBgColor3D",legendBorderColor:"legendBorderColor3D",toolTipbgColor:"toolTipbgColor3D",toolTipBorderColor:"toolTipBorderColor3D",baseFontColor:"baseFontColor3D",anchorBgColor:"anchorBgColor3D"}},hideFn=function hideFn(){this.hide()},hide3dBaseFn=function hide3dBaseFn(){this.hide();this._.cubeside.hide();this._.cubetop.hide()},show3dBaseFn=function show3dBaseFn(){this.show();this._.cubeside.show();this._.cubetop.show()};(0,_dependencyManager.addDep)({name:"canvas3dAnimation",type:"animationRule",extension:_canvas3d.default});(0,_redraphaelShapes.default)(R);var Canvas3d=function(_Canvas){function Canvas3d(){return _Canvas.apply(this,arguments)||this}(0,_inheritsLoose2.default)(Canvas3d,_Canvas);var _proto=Canvas3d.prototype;_proto.getName=function getName(){return"canvas"};_proto.getType=function getType(){return"canvas"};_proto.drawCanvas=function drawCanvas(){if(this.getFromEnv("chart").isBar){this.drawCanvas3dBar()}else{this.drawCanvas3dColumn()}};_proto.configureAttributes=function configureAttributes(){_Canvas.prototype.configureAttributes.call(this);this.config.xDepth=10;this.config.yDepth=10};_proto.drawCanvas3dColumn=function drawCanvas3dColumn(){var canvas=this,chart=canvas.getFromEnv("chart"),jsonData=chart.getFromEnv("dataSource"),canvasConfig=canvas.config,chartConfig=chart.config,canvasLeft=canvasConfig.canvasLeft,canvasTop=canvasConfig.canvasTop,canvasWidth=canvasConfig.canvasWidth,canvasHeight=canvasConfig.canvasHeight,chartAttrs=jsonData.chart,animationManager=canvas.getFromEnv("animationManager"),colorM=chart.getFromEnv("color-manager"),canvasBorderElementCheck=canvas.getGraphicalElement("canvasBorderElement"),canvasBorderElement,canvasElement,canvasElementCheck=canvas.getGraphicalElement("canvasElement"),config=canvas.config,clip=config.clip={},canvasGroup=canvas.getContainer("canvasGroup"),canvasBg,canvasBgCheck=canvas.getGraphicalElement("canvasBg"),canvas3DBase,canvas3DBaseCheck=canvas.getGraphicalElement("canvas3DBase"),path,attr,x,y,w,h,zw,zh,clipCanvas,dsGroup=chart.getChildContainer("plotGroup"),dataLabelsLayer=chart.getChildContainer("datalabelsGroup"),canvas3dbaselineCheck=canvas.getGraphicalElement("canvas3dbaseline"),canvas3dbaseline,canvasBgColor=config.canvasBgColor,showCanvasBg=config.showCanvasBG=Boolean((0,_lib.pluckNumber)(chartAttrs.showcanvasbg,1)),canvasBgDepth=chartConfig.canvasBgDepth,showCanvasBase=chartConfig.showCanvasBase,canvasBaseDepth=chartConfig.canvasBaseDepth,canvasBaseColor3D=config.canvasBaseColor3D=(0,_lib.pluck)(chartAttrs.canvasbasecolor,colorM.getColor(canvasBaseColor3DStr)),use3DLighting=config.use3DLighting=(0,_lib.pluckNumber)(chartAttrs.use3dlighting,1),palleteString=chartPaletteStr.chart3D,canvasBorderRadius=config.canvasBorderRadius=(0,_lib.pluckNumber)(chartAttrs.plotborderradius,0),canvasBorderWidth=0,borderWHlf=canvasBorderWidth*.5,canvasBorderColor=config.canvasBorderColor=(0,_lib.convertColor)((0,_lib.pluck)(chartAttrs.canvasbordercolor,colorM.getColor(_lib.canvasBorderColorStr))),canBGAlpha=config.canBGAlpha=(0,_lib.pluck)(chartAttrs.canvasbgalpha,colorM.getColor(canvasBGAlphaStr)),canBGColor=config.canBGColor=(0,_lib.pluck)(chartAttrs.canvasbgcolor,colorM.getColor(palleteString.canvasBgColor)),xDepth,yDepth,canvasBasePadding=chartConfig.canvasBasePadding||2;if(use3DLighting){canvasBgColor=config.canvasBgColor={FCcolor:{color:(0,_lib.getDarkColor)(canBGColor,85)+_lib.COMMASTRING+(0,_lib.getLightColor)(canBGColor,55),alpha:canBGAlpha+_lib.COMMASTRING+canBGAlpha,ratio:_lib.BGRATIOSTRING,angle:(0,_lib.getAngle)(chartConfig.width-(chartConfig.marginLeft+chartConfig.marginRight),chartConfig.height-(chartConfig.marginTop+chartConfig.marginBottom),1)}}}else{canvasBgColor=config.canvasBgColor=(0,_lib.convertColor)(canBGColor,canBGAlpha)}canBGColor=canBGColor.split(_lib.COMMASTRING)[0];canBGAlpha=canBGAlpha.split(_lib.COMMASTRING)[0];xDepth=config.xDepth;yDepth=config.yDepth;attr={x:canvasLeft-borderWHlf,y:canvasTop-borderWHlf,width:canvasWidth+canvasBorderWidth,height:canvasHeight+canvasBorderWidth,r:canvasBorderRadius,"stroke-width":canvasBorderWidth,stroke:canvasBorderColor,"stroke-linejoin":canvasBorderWidth>MAX_MITER_LINEJOIN?ROUND:miterStr};canvasBorderElement=animationManager.setAnimation({el:canvasBorderElementCheck||"rect",attr:attr,component:canvas,label:"canvas",container:canvasGroup});if(!canvasBorderElementCheck){canvas.addGraphicalElement("canvasBorderElement",canvasBorderElement)}clip[clipCanvasStr]=[mathMax(0,canvasLeft-xDepth),mathMax(0,canvasTop),mathMax(1,canvasWidth+xDepth),mathMax(1,canvasHeight+yDepth)];clip[clipCanvasInitStr]=[mathMax(0,canvasLeft-xDepth),mathMax(0,canvasTop-yDepth),1,mathMax(1,canvasHeight+yDepth*2)];clipCanvas=clip[clipCanvasStr].slice(0);animationManager.setAnimation({el:dsGroup,attr:{"clip-rect":clipCanvas},component:canvas});animationManager.setAnimation({el:dataLabelsLayer,attr:{"clip-rect":clipCanvas},component:canvas});attr={x:canvasLeft,y:canvasTop,width:canvasWidth,height:canvasHeight,r:canvasBorderRadius,"stroke-width":0,stroke:NONE,fill:(0,_lib.toRaphaelColor)(canvasBgColor)};canvasElement=animationManager.setAnimation({el:canvasElementCheck||"rect",attr:attr,component:canvas,label:"canvas",callback:showCanvasBg?_lib.stubFN:hideFn,container:canvasGroup});if(!canvasElementCheck){canvas.addGraphicalElement("canvasElement",canvasElement)}path=[M,canvasLeft+canvasWidth,canvasTop,L,canvasLeft+canvasWidth+canvasBgDepth,canvasTop+canvasBgDepth*1.2,canvasLeft+canvasWidth+canvasBgDepth,canvasTop+canvasHeight-canvasBgDepth,canvasLeft+canvasWidth,canvasTop+canvasHeight,Z];canvasBg=animationManager.setAnimation({el:canvasBgCheck||"path",attr:{path:path,"stroke-width":0,stroke:NONE,fill:(0,_lib.toRaphaelColor)(canvasBgColor)},component:canvas,label:"canvas",callback:showCanvasBg?_lib.stubFN:hideFn,container:canvasGroup});if(!canvasBgCheck){canvas.addGraphicalElement("canvasBg",canvasBg)}if(showCanvasBg){canvasBg.show();canvasElement.show()}else{canvasBg.hide();canvasElement.hide()}x=canvasLeft-xDepth-canvasBasePadding;y=canvasTop+canvasHeight+yDepth+canvasBasePadding;w=canvasWidth;h=canvasBaseDepth;zw=xDepth+canvasBasePadding;zh=yDepth+canvasBasePadding;canvas3DBase=animationManager.setAnimation({el:canvas3DBaseCheck||"cubepath",component:canvas,index:0,attr:{cubepath:[x,y,w,h,zw,zh],stroke:NONE,"stroke-width":0,visibility:showCanvasBase?"visible":"hidden",fill:canvasBaseColor3D.replace(_lib.dropHash,_lib.HASHSTRING),noGradient:!use3DLighting},callback:showCanvasBase?_lib.stubFN:hide3dBaseFn,label:"canvas",container:canvasGroup});if(!canvas3DBaseCheck){canvas.addGraphicalElement("canvas3DBase",canvas3DBase)}canvas3dbaseline=animationManager.setAnimation({el:canvas3dbaselineCheck||"path",attr:{path:[M,canvasLeft,canvasTop+canvasHeight,H,canvasWidth+canvasLeft],stroke:R.tintshade(canvasBaseColor3D.replace(_lib.dropHash,_lib.HASHSTRING),.05).rgba},component:canvas,callback:showCanvasBase?_lib.stubFN:hideFn,label:"canvas",container:canvasGroup});if(!canvas3dbaselineCheck){canvas.addGraphicalElement("canvas3dbaseline",canvas3dbaseline)}if(showCanvasBase){show3dBaseFn.call(canvas3DBase);canvas3dbaseline.show()}};_proto.drawCanvas3dBar=function drawCanvas3dBar(){var canvas=this,chart=canvas.getFromEnv("chart"),jsonData=chart.getFromEnv("dataSource"),chartConfig=chart.config,canvasLeft=chartConfig.canvasLeft,canvasTop=chartConfig.canvasTop,canvasWidth=chartConfig.canvasWidth,canvasHeight=chartConfig.canvasHeight,chartAttrs=jsonData.chart,colorM=chart.getFromEnv("color-manager"),canvasBorderElement,canvasBorderElementCheck=canvas.getGraphicalElement("canvasBorderElement"),canvasElementCheck=canvas.getGraphicalElement("canvasElement"),canvasElement,config=canvas.config,clip=config.clip={},canvasGroup=canvas.getContainer("canvasGroup"),canvasBg,canvasBgCheck=canvas.getGraphicalElement("canvasBg"),canvas3DBase,canvas3DBaseCheck=canvas.getGraphicalElement("canvas3DBase"),attr,path,x,y,w,h,zw,zh,clipCanvas,dsGroup=chart.getChildContainer("plotGroup"),dataLabelsLayer=chart.getChildContainer("datalabelsGroup"),animationManager=canvas.getFromEnv("animationManager"),canvas3dbaseline,canvas3dbaselineCheck=canvas.getGraphicalElement("canvas3dbaseline"),canvasBgColor=config.canvasBgColor,showCanvasBg=config.showCanvasBG=Boolean((0,_lib.pluckNumber)(chartAttrs.showcanvasbg,1)),canvasBgDepth=chartConfig.canvasBgDepth,showCanvasBase=chartConfig.showCanvasBase,canvasBaseDepth=chartConfig.canvasBaseDepth,canvasBaseColor3D=config.canvasBaseColor3D=(0,_lib.pluck)(chartAttrs.canvasbasecolor,colorM.getColor(canvasBaseColor3DStr)),use3DLighting=config.use3DLighting=(0,_lib.pluckNumber)(chartAttrs.use3dlighting,1),palleteString=chartPaletteStr.chart3D,canvasBorderRadius=config.canvasBorderRadius=(0,_lib.pluckNumber)(chartAttrs.plotborderradius,0),canvasBorderWidth=config.canvasBorderWidth=0,borderWHlf=canvasBorderWidth*.5,canvasBorderColor=config.canvasBorderColor=(0,_lib.convertColor)((0,_lib.pluck)(chartAttrs.canvasbordercolor,colorM.getColor(_lib.canvasBorderColorStr))),canBGAlpha=config.canBGAlpha=(0,_lib.pluck)(chartAttrs.canvasbgalpha,colorM.getColor(canvasBGAlphaStr)),canBGColor=config.canBGColor=(0,_lib.pluck)(chartAttrs.canvasbgcolor,colorM.getColor(palleteString.canvasBgColor)),xDepth=config.xDepth,yDepth=config.yDepth;if(use3DLighting){canvasBgColor=config.canvasBgColor={FCcolor:{color:(0,_lib.getDarkColor)(canBGColor,85)+COMMA+(0,_lib.getLightColor)(canBGColor,55),alpha:canBGAlpha+COMMA+canBGAlpha,ratio:_lib.BGRATIOSTRING,angle:(0,_lib.getAngle)(chartConfig.width-(chartConfig.marginLeft+chartConfig.marginRight),chartConfig.height-(chartConfig.marginTop+chartConfig.marginBottom),1)}}}else{canvasBgColor=config.canvasBgColor=(0,_lib.convertColor)(canBGColor,canBGAlpha)}canBGColor=canBGColor.split(COMMA)[0];canBGAlpha=canBGAlpha.split(COMMA)[0];xDepth=config.xDepth=5;yDepth=config.yDepth=5;attr={x:canvasLeft-borderWHlf,y:canvasTop-borderWHlf,width:canvasWidth+canvasBorderWidth,height:canvasHeight+canvasBorderWidth,r:canvasBorderRadius,"stroke-width":canvasBorderWidth,stroke:canvasBorderColor,"stroke-linejoin":canvasBorderWidth>MAX_MITER_LINEJOIN?ROUND:miterStr};canvasBorderElement=animationManager.setAnimation({el:canvasBorderElementCheck||"rect",attr:attr,container:canvasGroup,label:"canvas",component:canvas});if(!canvasBorderElementCheck){canvas.addGraphicalElement("canvasBorderElement",canvasBorderElement)}clip[clipCanvasStr]=[mathMax(0,canvasLeft-xDepth),mathMax(0,canvasTop),mathMax(1,canvasWidth+xDepth),mathMax(1,canvasHeight+yDepth)];clip[clipCanvasInitStr]=[mathMax(0,canvasLeft-xDepth),mathMax(0,canvasTop-yDepth),1,mathMax(1,canvasHeight+yDepth*2)];clipCanvas=clip[clipCanvasStr].slice(0);animationManager.setAnimation({el:dsGroup,attr:{"clip-rect":clipCanvas},component:canvas});animationManager.setAnimation({el:dataLabelsLayer,attr:{"clip-rect":clipCanvas},component:canvas});attr={x:canvasLeft,y:canvasTop,width:canvasWidth,height:canvasHeight,r:canvasBorderRadius,"stroke-width":0,stroke:NONE,fill:(0,_lib.toRaphaelColor)(canvasBgColor)};canvasElement=animationManager.setAnimation({el:canvasElementCheck||"rect",attr:attr,component:canvas,label:"canvas",container:canvasGroup});if(!canvasElementCheck){canvas.addGraphicalElement("canvasElement",canvasElement)}path=[M,canvasLeft,canvasTop,L,canvasLeft+canvasBgDepth*1.2,canvasTop-canvasBgDepth,canvasLeft+canvasWidth-canvasBgDepth,canvasTop-canvasBgDepth,canvasLeft+canvasWidth,canvasTop,Z];canvasBg=animationManager.setAnimation({el:canvasBgCheck||"path",attr:{path:path,"stroke-width":0,stroke:NONE,fill:(0,_lib.toRaphaelColor)(canvasBgColor)},component:canvas,callback:showCanvasBg?_lib.stubFN:hideFn,label:"canvas",container:canvasGroup});if(!canvasBgCheck){canvas.addGraphicalElement("canvasBg",canvasBg)}if(showCanvasBg){canvasElement.show();canvasBg.show()}else{canvasElement.hide();canvasBg.hide()}x=canvasLeft-xDepth-canvasBaseDepth-1;y=canvasTop+yDepth+1;w=canvasBaseDepth;h=canvasHeight;zw=xDepth+1;zh=yDepth+1;canvas3DBase=animationManager.setAnimation({el:canvas3DBaseCheck||"cubepath",attr:{cubepath:[x,y,w,h,zw,zh],stroke:NONE,"stroke-width":0,visibility:CANVAS_BASE_DEFAULT_VISIBILITY,fill:canvasBaseColor3D.replace(_lib.dropHash,_lib.HASHSTRING),noGradient:!use3DLighting},component:canvas,callback:showCanvasBase?_lib.stubFN:hide3dBaseFn,label:"canvas",container:canvasGroup});if(!canvas3DBaseCheck){canvas.addGraphicalElement("canvas3DBase",canvas3DBase)}canvas3dbaseline=animationManager.setAnimation({el:canvas3dbaselineCheck||"path",attr:{path:[M,canvasLeft,canvasTop,V,canvasHeight+canvasTop],stroke:Raphael.tintshade(canvasBaseColor3D.replace(_lib.dropHash,_lib.HASHSTRING),.05).rgba},component:canvas,callback:showCanvasBase?_lib.stubFN:hideFn,label:"canvas",container:canvasGroup});if(!canvas3dbaselineCheck){canvas.addGraphicalElement("canvas3dbaseline",canvas3dbaseline)}if(showCanvasBase){canvas3dbaseline.show();show3dBaseFn.call(canvas3DBase)}};return Canvas3d}(_canvas.default);var _default=exports.default=Canvas3d;