Ext.define('Ext.rtl.chart.Chart', {
override: 'Ext.chart.Chart',
initSurfaceCfg: function(cfg) {
this.callParent(arguments);
// Even in rtl mode, we still want the chart to use ltr, since
// we're just reversing the axes
cfg.forceLtr = true;
},
beforeRender: function() {
// Put this here because by this point we definitely know that we've been added to a container
// so we can identify the hierarchy state. Since the collection is keyed by side, we'll go ahead
// and do all our modifications before everything is initialized ~and~ we know our RTL state
var me = this,
axes = me.axes,
items, i, len, axis;
if (me.getHierarchyState().rtl) {
// There are 2 cases for RTL:
// The root is LTR & we are RTL, in which case we don't reverse the events
// The root is RTL & we are RTL, in we which need to re-LTRify the events, since
// the charts always lay out in an LTR fashion.
me.rtlEvent = !me.isOppositeRootDirection();
items = axes.getRange();
axes.removeAll();
for (i = 0, len = items.length; i < len; ++i) {
axis = items[i];
axis.position = this.invertPosition(axis.position);
axes.add(axis);
}
}
me.callParent(arguments);
},
invertPosition: function(pos) {
if (Ext.isArray(pos)) {
var out = [],
len = pos.length,
i;
for (i = 0; i < len; ++i) {
out.push(this.invertPosition(pos[i]));
}
return out;
}
if (this.getHierarchyState().rtl) {
if (pos == 'left') {
pos = 'right';
} else if (pos == 'right') {
pos = 'left';
}
}
return pos;
},
getEventXY: function(e) {
var box, pageXY, x, y, width;
if (this.rtlEvent) {
// If we're in RTL mode, the event coordinates have been reversed,
// so we need to modify them to get them back to a useful
// state for us!
box = this.surface.getRegion();
pageXY = e.getXY();
width = box.right - box.left;
x = width - (pageXY[0] - box.left);
y = pageXY[1] - box.top;
return [x, y];
} else {
return this.callParent(arguments);
}
}
});