/** * @private * @class Ext.chart.axis.sprite.Axis3D * @extends Ext.chart.axis.sprite.Axis * * The {@link Ext.chart.axis.Axis3D 3D axis} sprite. * Only 3D cartesian axes are rendered with this sprite. */ Ext.define('Ext.chart.axis.sprite.Axis3D', { extend: 'Ext.chart.axis.sprite.Axis', alias: 'sprite.axis3d', type: 'axis3d', inheritableStatics: { def: { processors: { depth: 'number' }, defaults: { depth: 0 }, triggers: { depth: 'layout' } } }, config: { animation: { customDurations: { depth: 0 } } }, layoutUpdater: function() { var me = this, chart = me.getAxis().getChart(); if (chart.isInitializing) { return; } // eslint-disable-next-line vars-on-top, one-var var attr = me.attr, layout = me.getLayout(), depth = layout.isDiscrete ? 0 : attr.depth, isRtl = chart.getInherited().rtl, min = attr.dataMin + (attr.dataMax - attr.dataMin) * attr.visibleMin, max = attr.dataMin + (attr.dataMax - attr.dataMin) * attr.visibleMax, context = { attr: attr, segmenter: me.getSegmenter(), renderer: me.defaultRenderer }; if (attr.position === 'left' || attr.position === 'right') { attr.translationX = 0; attr.translationY = max * (attr.length - depth) / (max - min) + depth; attr.scalingX = 1; attr.scalingY = (-attr.length + depth) / (max - min); attr.scalingCenterY = 0; attr.scalingCenterX = 0; me.applyTransformations(true); } else if (attr.position === 'top' || attr.position === 'bottom') { if (isRtl) { attr.translationX = attr.length + min * attr.length / (max - min) + 1; } else { attr.translationX = -min * attr.length / (max - min); } attr.translationY = 0; attr.scalingX = (isRtl ? -1 : 1) * (attr.length - depth) / (max - min); attr.scalingY = 1; attr.scalingCenterY = 0; attr.scalingCenterX = 0; me.applyTransformations(true); } if (layout) { layout.calculateLayout(context); me.setLayoutContext(context); } }, renderAxisLine: function(surface, ctx, layout, clipRect) { var me = this, attr = me.attr, halfLineWidth = attr.lineWidth * 0.5, layout = me.getLayout(), // eslint-disable-line no-redeclare depth = layout.isDiscrete ? 0 : attr.depth, docked = attr.position, position, gaugeAngles; if (attr.axisLine && attr.length) { switch (docked) { case 'left': position = surface.roundPixel(clipRect[2]) - halfLineWidth; ctx.moveTo(position, -attr.endGap + depth); ctx.lineTo(position, attr.length + attr.startGap); break; case 'right': ctx.moveTo(halfLineWidth, -attr.endGap); ctx.lineTo(halfLineWidth, attr.length + attr.startGap); break; case 'bottom': ctx.moveTo(-attr.startGap, halfLineWidth); ctx.lineTo(attr.length - depth + attr.endGap, halfLineWidth); break; case 'top': position = surface.roundPixel(clipRect[3]) - halfLineWidth; ctx.moveTo(-attr.startGap, position); ctx.lineTo(attr.length + attr.endGap, position); break; case 'angular': ctx.moveTo(attr.centerX + attr.length, attr.centerY); ctx.arc(attr.centerX, attr.centerY, attr.length, 0, Math.PI * 2, true); break; case 'gauge': gaugeAngles = me.getGaugeAngles(); ctx.moveTo(attr.centerX + Math.cos(gaugeAngles.start) * attr.length, attr.centerY + Math.sin(gaugeAngles.start) * attr.length); ctx.arc(attr.centerX, attr.centerY, attr.length, gaugeAngles.start, gaugeAngles.end, true); break; } } } });