Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[PE] Add 3d settings for charts

Browse source
This commit is contained in:
Julia Radzhabova 2022-09-12 20:10:15 +03:00
parent 5d14293056
commit 066aca3d07
4 changed files with 460 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
apps/documenteditor/main/locale/en.json
View file

@ -1355,6 +1355,21 @@
"DE.Views.ChartSettings.txtTight": "Tight",
"DE.Views.ChartSettings.txtTitle": "Chart",
"DE.Views.ChartSettings.txtTopAndBottom": "Top and bottom",
"DE.Views.ChartSettings.text3dRotation": "3D Rotation",
"DE.Views.ChartSettings.textX": "X rotation",
"DE.Views.ChartSettings.textY": "Y rotation",
"DE.Views.ChartSettings.textPerspective": "Perspective",
"DE.Views.ChartSettings.text3dDepth": "Depth (% of base)",
"DE.Views.ChartSettings.text3dHeight": "Height (% of base)",
"DE.Views.ChartSettings.textLeft": "Left",
"DE.Views.ChartSettings.textRight": "Right",
"DE.Views.ChartSettings.textUp": "Up",
"DE.Views.ChartSettings.textDown": "Down",
"DE.Views.ChartSettings.textNarrow": "Narrow field of view",
"DE.Views.ChartSettings.textWiden": "Widen field of view",
"DE.Views.ChartSettings.textRightAngle": "Right Angle Axes",
"DE.Views.ChartSettings.textAutoscale": "Autoscale",
"DE.Views.ChartSettings.textDefault": "Default Rotation",
"DE.Views.ControlSettingsDialog.strGeneral": "General",
"DE.Views.ControlSettingsDialog.textAdd": "Add",
"DE.Views.ControlSettingsDialog.textAppearance": "Appearance",

65
apps/presentationeditor/main/app/template/ChartSettings.template
View file

@ -49,6 +49,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="1">
<tr>
<td class="padding-small">
<div class="separator horizontal"></div>

366
apps/presentationeditor/main/app/view/ChartSettings.js
View file

@ -181,6 +181,57 @@ define([
this.btnRatio.toggle(value);
this._state.keepRatio=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);
}
}
},
@ -290,10 +341,213 @@ define([
this.fireEvent('editcomplete', this);
}, 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.chartProps) {
var props = new Asc.CAscChartProp();
var oView3D = this.chartProps.getView3d();
if (oView3D) {
oView3D.asc_setRightAngleAxes(field.getValue()=='checked');
this.chartProps.putView3d(oView3D);
props.put_ChartProperties(this.chartProps);
this.api.ChartApply(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.CAscChartProp();
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.ChartApply(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));
this.NotCombinedSettings = $('.not-combined');
this.Chart3DContainer = $('#chart-panel-3d-rotate');
},
createDelayedElements: function() {
@ -535,6 +789,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;
},
@ -558,6 +907,21 @@ define([
textEditData: 'Edit Data',
textChartType: 'Change Chart Type',
textStyle: 'Style',
textAdvanced: 'Show advanced settings'
textAdvanced: 'Show advanced settings',
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'
}, PE.Views.ChartSettings || {}));
});

15
apps/presentationeditor/main/locale/en.json
View file

@ -1382,6 +1382,21 @@
"PE.Views.ChartSettings.textSize": "Size",
"PE.Views.ChartSettings.textStyle": "Style",
"PE.Views.ChartSettings.textWidth": "Width",
"PE.Views.ChartSettings.text3dRotation": "3D Rotation",
"PE.Views.ChartSettings.textX": "X rotation",
"PE.Views.ChartSettings.textY": "Y rotation",
"PE.Views.ChartSettings.textPerspective": "Perspective",
"PE.Views.ChartSettings.text3dDepth": "Depth (% of base)",
"PE.Views.ChartSettings.text3dHeight": "Height (% of base)",
"PE.Views.ChartSettings.textLeft": "Left",
"PE.Views.ChartSettings.textRight": "Right",
"PE.Views.ChartSettings.textUp": "Up",
"PE.Views.ChartSettings.textDown": "Down",
"PE.Views.ChartSettings.textNarrow": "Narrow field of view",
"PE.Views.ChartSettings.textWiden": "Widen field of view",
"PE.Views.ChartSettings.textRightAngle": "Right Angle Axes",
"PE.Views.ChartSettings.textAutoscale": "Autoscale",
"PE.Views.ChartSettings.textDefault": "Default Rotation",
"PE.Views.ChartSettingsAdvanced.textAlt": "Alternative Text",
"PE.Views.ChartSettingsAdvanced.textAltDescription": "Description",
"PE.Views.ChartSettingsAdvanced.textAltTip": "The alternative text-based representation of the visual object information, which will be read to the people with vision or cognitive impairments to help them better understand what information there is in the image, autoshape, chart, or table.",