[SSE] Add 3d rotation settings for charts
This commit is contained in:
Julia Radzhabova
parent
330549d850
commit
d824f9dd61
|
|
@ -46,6 +46,69 @@
|
|||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table cols="1" id="chart-panel-3d-rotate">
|
||||
<tr>
|
||||
<td class="padding-small">
|
||||
<div class="separator horizontal"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="padding-small">
|
||||
<label class="header"><%= scope.text3dRotation %></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="padding-small">
|
||||
<label style="margin-top: 3px;"><%= scope.textX %></label>
|
||||
<div id="chart-btn-x-right" style="display: inline-block; float:right; margin-left: 4px;"></div>
|
||||
<div id="chart-btn-x-left" style="display: inline-block; float:right; margin-left: 4px;"></div>
|
||||
<div id="chart-spin-x" style="display: inline-block; float:right;"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="padding-small">
|
||||
<label style="margin-top: 3px;"><%= scope.textY %></label>
|
||||
<div id="chart-btn-y-down" style="display: inline-block; float:right; margin-left: 4px;"></div>
|
||||
<div id="chart-btn-y-up" style="display: inline-block; float:right; margin-left: 4px;"></div>
|
||||
<div id="chart-spin-y" style="display: inline-block; float:right;"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="padding-small">
|
||||
<label style="margin-top: 3px;"><%= scope.textPerspective %></label>
|
||||
<div id="chart-btn-widen" style="display: inline-block; float:right; margin-left: 4px;"></div>
|
||||
<div id="chart-btn-narrow" style="display: inline-block; float:right; margin-left: 4px;"></div>
|
||||
<div id="chart-spin-persp" style="display: inline-block; float:right;"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="padding-small">
|
||||
<div id="chart-checkbox-right-angle"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="padding-small">
|
||||
<div id="chart-checkbox-autoscale"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="padding-small">
|
||||
<label style="margin-top: 3px;"><%= scope.text3dDepth %></label>
|
||||
<div id="chart-spin-3d-depth" style="display: inline-block; float:right;"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="padding-small">
|
||||
<label style="margin-top: 3px;"><%= scope.text3dHeight %></label>
|
||||
<div id="chart-spin-3d-height" style="display: inline-block; float:right;"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="padding-small">
|
||||
<label class="link" id="chart-def-rotate-link" data-hint="1" data-hint-direction="bottom" data-hint-offset="medium"><%= scope.textDefault %></label>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table cols="1" id="spark-panel-types">
|
||||
<tr>
|
||||
<td>
|
||||
|
|
|
|||
|
|
@ -114,6 +114,7 @@ define([
|
|||
this.SparkTypesContainer = $('#spark-panel-types');
|
||||
this.SparkPointsContainer = $('#spark-panel-points');
|
||||
this.NotCombinedSettings = $('.not-combined');
|
||||
this.Chart3DContainer = $('#chart-panel-3d-rotate');
|
||||
},
|
||||
|
||||
render: function () {
|
||||
|
|
@ -141,11 +142,15 @@ define([
|
|||
return;
|
||||
}
|
||||
|
||||
this.ShowHideElem(!!(props && props.asc_getChartProperties && props.asc_getChartProperties()));
|
||||
var isChart = !!(props && props.asc_getChartProperties && props.asc_getChartProperties()),
|
||||
chartSettings = isChart ? this.api.asc_getChartObject(true) : null, // don't lock chart object
|
||||
props3d = chartSettings ? chartSettings.getView3d() : null;
|
||||
|
||||
this.ShowHideElem(isChart, !!props3d);
|
||||
this.disableControls(this._locked);
|
||||
|
||||
if (this.api && props){
|
||||
if (props.asc_getChartProperties && props.asc_getChartProperties()) { // chart
|
||||
if (isChart) { // chart
|
||||
this._originalProps = new Asc.asc_CImgProperty(props);
|
||||
this.isChart = true;
|
||||
|
||||
|
|
@ -210,9 +215,53 @@ define([
|
|||
this._state.keepRatio=value;
|
||||
}
|
||||
|
||||
var chartSettings = this.api.asc_getChartObject(true), // don't lock chart object
|
||||
series = chartSettings ? chartSettings.getSeries() : null;
|
||||
var series = chartSettings ? chartSettings.getSeries() : null;
|
||||
this.btnSwitch.setDisabled(!series || series.length<1 || !chartSettings || !chartSettings.getRange());
|
||||
|
||||
if (props3d) {
|
||||
value = props3d.asc_getRotX();
|
||||
if ((this._state.X===undefined || value===undefined)&&(this._state.X!==value) ||
|
||||
Math.abs(this._state.X-value)>0.001) {
|
||||
this.spnX.setValue((value!==null && value !== undefined) ? value : '', true);
|
||||
this._state.X = value;
|
||||
}
|
||||
|
||||
value = props3d.asc_getRotY();
|
||||
if ( (this._state.Y===undefined || value===undefined)&&(this._state.Y!==value) ||
|
||||
Math.abs(this._state.Y-value)>0.001) {
|
||||
this.spnY.setValue((value!==null && value !== undefined) ? value : '', true);
|
||||
this._state.Y = value;
|
||||
}
|
||||
|
||||
value = props3d.asc_getPerspective();
|
||||
if ( (this._state.Perspective===undefined || value===undefined)&&(this._state.Perspective!==value) ||
|
||||
Math.abs(this._state.Perspective-value)>0.001) {
|
||||
this.spnPerspective.setValue((value!==null && value !== undefined) ? value : '', true);
|
||||
this._state.Perspective = value;
|
||||
}
|
||||
|
||||
value = props3d.asc_getRightAngleAxes();
|
||||
if ( this._state.RightAngle!==value ) {
|
||||
this.chRightAngle.setValue((value !== null && value !== undefined) ? value : 'indeterminate', true);
|
||||
this._state.RightAngle=point;
|
||||
}
|
||||
|
||||
value = props3d.asc_getDepth();
|
||||
if ( Math.abs(this._state.Depth-value)>0.001 ||
|
||||
(this._state.Depth===undefined || value===undefined)&&(this._state.Depth!==value)) {
|
||||
this.spn3DDepth.setValue((value!==null && value !== undefined) ? value : '', true);
|
||||
this._state.Depth = value;
|
||||
}
|
||||
|
||||
value = props3d.asc_getHeight();
|
||||
if ( Math.abs(this._state.Height3d-value)>0.001 ||
|
||||
(this._state.Height3d===undefined || this._state.Height3d===null || value===null)&&(this._state.Height3d!==value)) {
|
||||
(value!==null) && this.spn3DHeight.setValue(value, true);
|
||||
this.chAutoscale.setValue(value===null, true);
|
||||
this.spn3DHeight.setDisabled(value===null);
|
||||
this._state.Height3d = value;
|
||||
}
|
||||
}
|
||||
} else { //sparkline
|
||||
this._originalProps = props;
|
||||
this.isChart = false;
|
||||
|
|
@ -778,6 +827,208 @@ define([
|
|||
this.btnSwitch.on('click', _.bind(this.onSwitch, this));
|
||||
this.lockedControls.push(this.btnSwitch);
|
||||
|
||||
// 3d rotation
|
||||
this.spnX = new Common.UI.MetricSpinner({
|
||||
el: $('#chart-spin-x'),
|
||||
step: 10,
|
||||
width: 45,
|
||||
defaultUnit : "°",
|
||||
value: '20 °',
|
||||
maxValue: 359.9,
|
||||
minValue: 0,
|
||||
dataHint: '1',
|
||||
dataHintDirection: 'bottom',
|
||||
dataHintOffset: 'big'
|
||||
});
|
||||
this.lockedControls.push(this.spnX);
|
||||
this.spnX.on('change', _.bind(this.onXRotation, this));
|
||||
this.spnX.on('inputleave', function(){ Common.NotificationCenter.trigger('edit:complete', me);});
|
||||
|
||||
this.btnLeft = new Common.UI.Button({
|
||||
parentEl: $('#chart-btn-x-left', me.$el),
|
||||
cls: 'btn-toolbar',
|
||||
iconCls: 'toolbar__icon btn-rotate-270',
|
||||
hint: this.textLeft,
|
||||
dataHint: '1',
|
||||
dataHintDirection: 'top'
|
||||
});
|
||||
this.lockedControls.push(this.btnLeft);
|
||||
this.btnLeft.on('click', _.bind(function() {
|
||||
this.spnX.setValue(this.spnX.getNumberValue() - 10);
|
||||
}, this));
|
||||
|
||||
this.btnRight= new Common.UI.Button({
|
||||
parentEl: $('#chart-btn-x-right', me.$el),
|
||||
cls: 'btn-toolbar',
|
||||
iconCls: 'toolbar__icon btn-rotate-90',
|
||||
hint: this.textRight,
|
||||
dataHint: '1',
|
||||
dataHintDirection: 'top'
|
||||
});
|
||||
this.lockedControls.push(this.btnRight);
|
||||
this.btnRight.on('click', _.bind(function() {
|
||||
this.spnX.setValue(this.spnX.getNumberValue() + 10);
|
||||
}, this));
|
||||
|
||||
this.spnY = new Common.UI.MetricSpinner({
|
||||
el: $('#chart-spin-y'),
|
||||
step: 10,
|
||||
width: 45,
|
||||
defaultUnit : "°",
|
||||
value: '15 °',
|
||||
maxValue: 90,
|
||||
minValue: -90,
|
||||
dataHint: '1',
|
||||
dataHintDirection: 'bottom',
|
||||
dataHintOffset: 'big'
|
||||
});
|
||||
this.lockedControls.push(this.spnY);
|
||||
this.spnY.on('change', _.bind(this.onYRotation, this));
|
||||
this.spnY.on('inputleave', function(){ Common.NotificationCenter.trigger('edit:complete', me);});
|
||||
|
||||
this.btnUp = new Common.UI.Button({
|
||||
parentEl: $('#chart-btn-y-up', me.$el),
|
||||
cls: 'btn-toolbar',
|
||||
iconCls: 'toolbar__icon btn-rotate-270',
|
||||
hint: this.textUp,
|
||||
dataHint: '1',
|
||||
dataHintDirection: 'top'
|
||||
});
|
||||
this.lockedControls.push(this.btnUp);
|
||||
this.btnUp.on('click', _.bind(function() {
|
||||
this.spnY.setValue(this.spnY.getNumberValue() + 10);
|
||||
}, this));
|
||||
|
||||
this.btnDown= new Common.UI.Button({
|
||||
parentEl: $('#chart-btn-y-down', me.$el),
|
||||
cls: 'btn-toolbar',
|
||||
iconCls: 'toolbar__icon btn-rotate-90',
|
||||
hint: this.textDown,
|
||||
dataHint: '1',
|
||||
dataHintDirection: 'top'
|
||||
});
|
||||
this.lockedControls.push(this.btnDown);
|
||||
this.btnDown.on('click', _.bind(function() {
|
||||
this.spnY.setValue(this.spnY.getNumberValue() + 10);
|
||||
}, this));
|
||||
|
||||
this.spnPerspective = new Common.UI.MetricSpinner({
|
||||
el: $('#chart-spin-persp'),
|
||||
step: 5,
|
||||
width: 45,
|
||||
defaultUnit : "°",
|
||||
value: '0 °',
|
||||
maxValue: 100,
|
||||
minValue: 0.1,
|
||||
dataHint: '1',
|
||||
dataHintDirection: 'bottom',
|
||||
dataHintOffset: 'big'
|
||||
});
|
||||
this.lockedControls.push(this.spnPerspective);
|
||||
this.spnPerspective.on('change', _.bind(this.onPerspective, this));
|
||||
this.spnPerspective.on('inputleave', function(){ Common.NotificationCenter.trigger('edit:complete', me);});
|
||||
|
||||
this.btnNarrow = new Common.UI.Button({
|
||||
parentEl: $('#chart-btn-narrow', me.$el),
|
||||
cls: 'btn-toolbar',
|
||||
iconCls: 'toolbar__icon btn-rotate-270',
|
||||
hint: this.textNarrow,
|
||||
dataHint: '1',
|
||||
dataHintDirection: 'top'
|
||||
});
|
||||
this.lockedControls.push(this.btnNarrow);
|
||||
this.btnNarrow.on('click', _.bind(function() {
|
||||
this.spnPerspective.setValue(this.spnPerspective.getNumberValue() + 5);
|
||||
}, this));
|
||||
|
||||
this.btnWiden= new Common.UI.Button({
|
||||
parentEl: $('#chart-btn-widen', me.$el),
|
||||
cls: 'btn-toolbar',
|
||||
iconCls: 'toolbar__icon btn-rotate-90',
|
||||
hint: this.textWiden,
|
||||
dataHint: '1',
|
||||
dataHintDirection: 'top'
|
||||
});
|
||||
this.lockedControls.push(this.btnWiden);
|
||||
this.btnWiden.on('click', _.bind(function() {
|
||||
this.spnPerspective.setValue(this.spnPerspective.getNumberValue() + 5);
|
||||
}, this));
|
||||
|
||||
this.chRightAngle = new Common.UI.CheckBox({
|
||||
el: $('#chart-checkbox-right-angle'),
|
||||
labelText: this.textRightAngle
|
||||
});
|
||||
this.lockedControls.push(this.chRightAngle);
|
||||
this.chRightAngle.on('change', _.bind(function(field, newValue, oldValue, eOpts) {
|
||||
if (this.api){
|
||||
var props = this.api.asc_getChartObject();
|
||||
if (props) {
|
||||
var oView3D = props.getView3d();
|
||||
if (oView3D) {
|
||||
oView3D.asc_setRightAngleAxes(field.getValue()=='checked');
|
||||
props.startEdit();
|
||||
props.setView3d(oView3D);
|
||||
props.endEdit();
|
||||
}
|
||||
}
|
||||
}
|
||||
}, this));
|
||||
|
||||
this.chAutoscale = new Common.UI.CheckBox({
|
||||
el: $('#chart-checkbox-autoscale'),
|
||||
labelText: this.textAutoscale
|
||||
});
|
||||
this.lockedControls.push(this.chAutoscale);
|
||||
this.chAutoscale.on('change', _.bind(function(field, newValue, oldValue, eOpts) {
|
||||
if (this.api){
|
||||
var props = this.api.asc_getChartObject();
|
||||
if (props) {
|
||||
var oView3D = props.getView3d();
|
||||
if (oView3D) {
|
||||
oView3D.asc_setHeight(field.getValue()=='checked' ? null : this.spn3DHeight.getNumberValue());
|
||||
props.startEdit();
|
||||
props.setView3d(oView3D);
|
||||
props.endEdit();
|
||||
}
|
||||
}
|
||||
}
|
||||
}, this));
|
||||
|
||||
this.spn3DDepth = new Common.UI.MetricSpinner({
|
||||
el: $('#chart-spin-3d-depth'),
|
||||
step: 10,
|
||||
width: 78,
|
||||
defaultUnit : "%",
|
||||
value: '0 %',
|
||||
maxValue: 2000,
|
||||
minValue: 0,
|
||||
dataHint: '1',
|
||||
dataHintDirection: 'bottom',
|
||||
dataHintOffset: 'big'
|
||||
});
|
||||
this.lockedControls.push(this.spn3DDepth);
|
||||
this.spn3DDepth.on('change', _.bind(this.on3DDepth, this));
|
||||
this.spn3DDepth.on('inputleave', function(){ Common.NotificationCenter.trigger('edit:complete', me);});
|
||||
|
||||
this.spn3DHeight = new Common.UI.MetricSpinner({
|
||||
el: $('#chart-spin-3d-height'),
|
||||
step: 10,
|
||||
width: 78,
|
||||
defaultUnit : "%",
|
||||
value: '50 %',
|
||||
maxValue: 500,
|
||||
minValue: 5,
|
||||
dataHint: '1',
|
||||
dataHintDirection: 'bottom',
|
||||
dataHintOffset: 'big'
|
||||
});
|
||||
this.lockedControls.push(this.spn3DHeight);
|
||||
this.spn3DHeight.on('change', _.bind(this.on3DHeight, this));
|
||||
this.spn3DHeight.on('inputleave', function(){ Common.NotificationCenter.trigger('edit:complete', me);});
|
||||
|
||||
this.linkDefRotation = $('#chart-def-rotate-link');
|
||||
$(this.el).on('click', '#chart-def-rotate-link', _.bind(this.onDefRotation, this));
|
||||
|
||||
this.linkAdvanced = $('#chart-advanced-link');
|
||||
$(this.el).on('click', '#chart-advanced-link', _.bind(this.openAdvancedSettings, this));
|
||||
},
|
||||
|
|
@ -789,11 +1040,12 @@ define([
|
|||
this.UpdateThemeColors();
|
||||
},
|
||||
|
||||
ShowHideElem: function(isChart) {
|
||||
ShowHideElem: function(isChart, is3D) {
|
||||
this.ChartSizeContainer.toggleClass('settings-hidden', !isChart);
|
||||
this.ChartTypesContainer.toggleClass('settings-hidden', !isChart);
|
||||
this.SparkTypesContainer.toggleClass('settings-hidden', isChart);
|
||||
this.SparkPointsContainer.toggleClass('settings-hidden', isChart);
|
||||
this.Chart3DContainer.toggleClass('settings-hidden', !isChart || !is3D);
|
||||
},
|
||||
|
||||
ShowCombinedProps: function(type) {
|
||||
|
|
@ -1300,6 +1552,97 @@ define([
|
|||
}
|
||||
},
|
||||
|
||||
onXRotation: function(field, newValue, oldValue, eOpts){
|
||||
if (this.api){
|
||||
var props = this.api.asc_getChartObject();
|
||||
if (props) {
|
||||
var oView3D = props.getView3d();
|
||||
if (oView3D) {
|
||||
oView3D.asc_setRotX(field.getNumberValue());
|
||||
props.startEdit();
|
||||
props.setView3d(oView3D);
|
||||
props.endEdit();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onYRotation: function(field, newValue, oldValue, eOpts){
|
||||
if (this.api){
|
||||
var props = this.api.asc_getChartObject();
|
||||
if (props) {
|
||||
var oView3D = props.getView3d();
|
||||
if (oView3D) {
|
||||
oView3D.asc_setRotY(field.getNumberValue());
|
||||
props.startEdit();
|
||||
props.setView3d(oView3D);
|
||||
props.endEdit();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onPerspective: function(field, newValue, oldValue, eOpts){
|
||||
if (this.api){
|
||||
var props = this.api.asc_getChartObject();
|
||||
if (props) {
|
||||
var oView3D = props.getView3d();
|
||||
if (oView3D) {
|
||||
oView3D.asc_setPerspective(field.getNumberValue());
|
||||
props.startEdit();
|
||||
props.setView3d(oView3D);
|
||||
props.endEdit();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
on3DDepth: function(field, newValue, oldValue, eOpts){
|
||||
if (this.api){
|
||||
var props = this.api.asc_getChartObject();
|
||||
if (props) {
|
||||
var oView3D = props.getView3d();
|
||||
if (oView3D) {
|
||||
oView3D.asc_setDepth(field.getNumberValue());
|
||||
props.startEdit();
|
||||
props.setView3d(oView3D);
|
||||
props.endEdit();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
on3DHeight: function(field, newValue, oldValue, eOpts){
|
||||
if (this.api){
|
||||
var props = this.api.asc_getChartObject();
|
||||
if (props) {
|
||||
var oView3D = props.getView3d();
|
||||
if (oView3D) {
|
||||
oView3D.asc_setHeight(field.getNumberValue());
|
||||
props.startEdit();
|
||||
props.setView3d(oView3D);
|
||||
props.endEdit();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onDefRotation: function() {
|
||||
if (this.api){
|
||||
var props = this.api.asc_getChartObject();
|
||||
if (props) {
|
||||
var oView3D = props.getView3d();
|
||||
if (oView3D) {
|
||||
oView3D.asc_setRotX(20);
|
||||
oView3D.asc_setRotY(15);
|
||||
props.startEdit();
|
||||
props.setView3d(oView3D);
|
||||
props.endEdit();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
setLocked: function (locked) {
|
||||
this._locked = locked;
|
||||
},
|
||||
|
|
@ -1340,7 +1683,22 @@ define([
|
|||
textBorderSizeErr: 'The entered value is incorrect.<br>Please enter a value between 0 pt and 1584 pt.',
|
||||
textChangeType: 'Change type',
|
||||
textSwitch: 'Switch Row/Column',
|
||||
errorMaxRows: 'The maximum number of data series per chart is 255.'
|
||||
errorMaxRows: 'The maximum number of data series per chart is 255.',
|
||||
text3dRotation: '3D Rotation',
|
||||
textX: 'X rotation',
|
||||
textY: 'Y rotation',
|
||||
textPerspective: 'Perspective',
|
||||
text3dDepth: 'Depth',
|
||||
text3dHeight: 'Height',
|
||||
textLeft: 'Left',
|
||||
textRight: 'Right',
|
||||
textUp: 'Up',
|
||||
textDown: 'Down',
|
||||
textNarrow: 'Narrow field of view',
|
||||
textWiden: 'Widen field of view',
|
||||
textRightAngle: 'Right Angle Axes',
|
||||
textAutoscale: 'Autoscale',
|
||||
textDefault: 'Default Rotation'
|
||||
|
||||
}, SSE.Views.ChartSettings || {}));
|
||||
});
|
||||
Loading…
Reference in a new issue