[DE] Add 3d rotation settings for charts

This commit is contained in:
Julia Radzhabova 2022-09-12 19:57:16 +03:00
parent 8e0c9709e1
commit 5d14293056
2 changed files with 432 additions and 1 deletions

View file

@ -57,6 +57,71 @@
<button type="button" class="btn btn-text-default auto" id="chart-button-edit-data" style="min-width:115px;" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.textEditData %></button>
</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 class="fixed" style="margin-top: 3px;width: 88px;"><%= 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 class="fixed" style="margin-top: 3px;width: 88px;"><%= 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 class="fixed" style="margin-top: 3px;width: 88px;"><%= 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 class="fixed" style="margin-top: 3px;width: 122px;"><%= scope.text3dDepth %></label>
<div id="chart-spin-3d-depth" style="display: inline-block; float:right;"></div>
</td>
</tr>
<tr>
<td class="padding-small">
<label class="fixed" style="margin-top: 3px;width: 122px;"><%= 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="2">
<tr>
<td class="padding-small" colspan=2>
<div class="separator horizontal"></div>

View file

@ -95,6 +95,7 @@ define([
this.labelWidth = el.find('#chart-label-width');
this.labelHeight = el.find('#chart-label-height');
this.NotCombinedSettings = $('.not-combined');
this.Chart3DContainer = $('#chart-panel-3d-rotate');
},
setApi: function(api) {
@ -195,6 +196,57 @@ define([
this.labelHeight[0].innerHTML = this.textHeight + ': ' + Common.Utils.Metric.fnRecalcFromMM(value).toFixed(1) + ' ' + Common.Utils.Metric.getCurrentMetricName();
this._state.Height = value;
}
var props3d = this.chartProps ? this.chartProps.getView3d() : null;
this.ShowHideElem(!!props3d);
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_getRightAngleAxes();
if ( this._state.RightAngle!==value ) {
this.chRightAngle.setValue((value !== null && value !== undefined) ? value : 'indeterminate', true);
this._state.RightAngle=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.setMinValue((value!==null && value !== undefined) ? 0.1 : 0);
this.spnPerspective.setValue((value!==null && value !== undefined) ? value : 0, true);
this._state.Perspective = value;
}
this.spnPerspective.setDisabled(this._locked || !!this._state.RightAngle);
this.btnNarrow.setDisabled(this._locked || !!this._state.RightAngle);
this.btnWiden.setDisabled(this._locked || !!this._state.RightAngle);
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._state.Height3d = value;
}
this.spn3DHeight.setDisabled(this._locked || value===null);
}
}
},
@ -282,6 +334,210 @@ define([
this.lockedControls.push(this.btnEditData);
this.btnEditData.on('click', _.bind(this.setEditData, this));
// 3d rotation
this.spnX = new Common.UI.MetricSpinner({
el: $('#chart-spin-x'),
step: 10,
width: 57,
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(){ me.fireEvent('editcomplete', 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: 57,
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(){ me.fireEvent('editcomplete', me);});
this.btnUp = new Common.UI.Button({
parentEl: $('#chart-btn-y-up', me.$el),
cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-rotate-y-clockwise',
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-y-counterclockwise',
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: 57,
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(){ me.fireEvent('editcomplete', me);});
this.btnNarrow = new Common.UI.Button({
parentEl: $('#chart-btn-narrow', me.$el),
cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-rotate-up',
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-down',
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){
if (this._noApply) return;
if (this.chartProps) {
var props = new Asc.asc_CImgProperty();
var oView3D = this.chartProps.getView3d();
if (oView3D) {
oView3D.asc_setRightAngleAxes(field.getValue()=='checked');
this.chartProps.putView3d(oView3D);
props.put_ChartProperties(this.chartProps);
this.api.ImgApply(props);
}
}
}
}, 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){
if (this.chartProps) {
var props = new Asc.asc_CImgProperty();
var oView3D = this.chartProps.getView3d();
if (oView3D) {
oView3D.asc_setHeight(field.getValue()=='checked' ? null : this.spn3DHeight.getNumberValue());
this.chartProps.putView3d(oView3D);
props.put_ChartProperties(this.chartProps);
this.api.ImgApply(props);
}
}
}
}, this));
this.spn3DDepth = new Common.UI.MetricSpinner({
el: $('#chart-spin-3d-depth'),
step: 10,
width: 70,
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(){ me.fireEvent('editcomplete', me);});
this.spn3DHeight = new Common.UI.MetricSpinner({
el: $('#chart-spin-3d-height'),
step: 10,
width: 70,
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(){ me.fireEvent('editcomplete', 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));
},
@ -522,6 +778,101 @@ define([
type==Asc.c_oAscChartTypeSettings.comboAreaBar || type==Asc.c_oAscChartTypeSettings.comboCustom);
},
ShowHideElem: function(is3D) {
this.Chart3DContainer.toggleClass('settings-hidden', !is3D);
},
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;
},
@ -552,7 +903,22 @@ define([
txtInFront: 'In front',
textEditData: 'Edit Data',
textChartType: 'Change Chart Type',
textStyle: 'Style'
textStyle: 'Style',
text3dRotation: '3D Rotation',
textX: 'X rotation',
textY: 'Y rotation',
textPerspective: 'Perspective',
text3dDepth: 'Depth (% of base)',
text3dHeight: 'Height (% of base)',
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'
}, DE.Views.ChartSettings || {}));
});