Merge branch 'feature/3d-rotation' into develop

apps/common/main/resources/less/common.less

@@ -23,6 +23,12 @@ label {
         opacity: @component-disabled-opacity-ie;
         opacity: @component-disabled-opacity;
     }
+
+    &.fixed {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
 }
 
 .menu-shapes {

apps/documenteditor/main/app/template/ChartSettings.template

@@ -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>

apps/documenteditor/main/app/view/ChartSettings.js

@@ -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) {
@@ -191,6 +192,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);
+                }
             }
         },
 
@@ -278,6 +330,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));
         },
@@ -518,6 +774,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._noApply) return;
+
+            if (this.chartProps) {
+                var props = new Asc.asc_CImgProperty();
+                var oView3D = this.chartProps.getView3d();
+                if (oView3D) {
+                    oView3D.asc_setRotX(field.getNumberValue());
+                    this.chartProps.putView3d(oView3D);
+                    props.put_ChartProperties(this.chartProps);
+                    this.api.ImgApply(props);
+                }
+            }
+        },
+
+        onYRotation: function(field, newValue, oldValue, eOpts){
+            if (this._noApply) return;
+
+            if (this.chartProps) {
+                var props = new Asc.asc_CImgProperty();
+                var oView3D = this.chartProps.getView3d();
+                if (oView3D) {
+                    oView3D.asc_setRotY(field.getNumberValue());
+                    this.chartProps.putView3d(oView3D);
+                    props.put_ChartProperties(this.chartProps);
+                    this.api.ImgApply(props);
+                }
+            }
+        },
+
+        onPerspective: function(field, newValue, oldValue, eOpts){
+            if (this._noApply) return;
+
+            if (this.chartProps) {
+                var props = new Asc.asc_CImgProperty();
+                var oView3D = this.chartProps.getView3d();
+                if (oView3D) {
+                    oView3D.asc_setPerspective(field.getNumberValue());
+                    this.chartProps.putView3d(oView3D);
+                    props.put_ChartProperties(this.chartProps);
+                    this.api.ImgApply(props);
+                }
+            }
+        },
+
+        on3DDepth: function(field, newValue, oldValue, eOpts){
+            if (this._noApply) return;
+
+            if (this.chartProps) {
+                var props = new Asc.asc_CImgProperty();
+                var oView3D = this.chartProps.getView3d();
+                if (oView3D) {
+                    oView3D.asc_setDepth(field.getNumberValue());
+                    this.chartProps.putView3d(oView3D);
+                    props.put_ChartProperties(this.chartProps);
+                    this.api.ImgApply(props);
+                }
+            }
+        },
+
+        on3DHeight: function(field, newValue, oldValue, eOpts){
+            if (this._noApply) return;
+
+            if (this.chartProps) {
+                var props = new Asc.asc_CImgProperty();
+                var oView3D = this.chartProps.getView3d();
+                if (oView3D) {
+                    oView3D.asc_setHeight(field.getNumberValue());
+                    this.chartProps.putView3d(oView3D);
+                    props.put_ChartProperties(this.chartProps);
+                    this.api.ImgApply(props);
+                }
+            }
+        },
+
+        onDefRotation: function() {
+            if (this._noApply) return;
+
+            if (this.chartProps) {
+                var props = new Asc.asc_CImgProperty();
+                var oView3D = this.chartProps.getView3d();
+                if (oView3D) {
+                    oView3D.asc_setRotX(20);
+                    oView3D.asc_setRotY(15);
+                    this.chartProps.putView3d(oView3D);
+                    props.put_ChartProperties(this.chartProps);
+                    this.api.ImgApply(props);
+                }
+            }
+        },
+
         setLocked: function (locked) {
             this._locked = locked;
         },
@@ -548,7 +899,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 || {}));
 });

apps/documenteditor/main/locale/en.json

@@ -1358,6 +1358,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",

apps/presentationeditor/main/app/template/ChartSettings.template

@@ -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>

apps/presentationeditor/main/app/view/ChartSettings.js

@@ -179,6 +179,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);
+                }
             }
         },
 
@@ -288,10 +339,215 @@ 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._noApply) return;
+                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._noApply) return;
+                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() {
@@ -533,6 +789,108 @@ 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._noApply) return;
+            if (this.api){
+                if (this.chartProps) {
+                    var props = new Asc.CAscChartProp();
+                    var oView3D = this.chartProps.getView3d();
+                    if (oView3D) {
+                        oView3D.asc_setRotX(field.getNumberValue());
+                        this.chartProps.putView3d(oView3D);
+                        props.put_ChartProperties(this.chartProps);
+                        this.api.ChartApply(props);
+                    }
+                }
+            }
+        },
+
+        onYRotation: function(field, newValue, oldValue, eOpts){
+            if (this._noApply) return;
+            if (this.api){
+                if (this.chartProps) {
+                    var props = new Asc.CAscChartProp();
+                    var oView3D = this.chartProps.getView3d();
+                    if (oView3D) {
+                        oView3D.asc_setRotY(field.getNumberValue());
+                        this.chartProps.putView3d(oView3D);
+                        props.put_ChartProperties(this.chartProps);
+                        this.api.ChartApply(props);
+                    }
+                }
+            }
+
+        },
+
+        onPerspective: function(field, newValue, oldValue, eOpts){
+            if (this._noApply) return;
+            if (this.api){
+                if (this.chartProps) {
+                    var props = new Asc.CAscChartProp();
+                    var oView3D = this.chartProps.getView3d();
+                    if (oView3D) {
+                        oView3D.asc_setPerspective(field.getNumberValue());
+                        this.chartProps.putView3d(oView3D);
+                        props.put_ChartProperties(this.chartProps);
+                        this.api.ChartApply(props);
+                    }
+                }
+            }
+        },
+
+        on3DDepth: function(field, newValue, oldValue, eOpts){
+            if (this._noApply) return;
+            if (this.api){
+                if (this.chartProps) {
+                    var props = new Asc.CAscChartProp();
+                    var oView3D = this.chartProps.getView3d();
+                    if (oView3D) {
+                        oView3D.asc_setDepth(field.getNumberValue());
+                        this.chartProps.putView3d(oView3D);
+                        props.put_ChartProperties(this.chartProps);
+                        this.api.ChartApply(props);
+                    }
+                }
+            }
+        },
+
+        on3DHeight: function(field, newValue, oldValue, eOpts){
+            if (this._noApply) return;
+            if (this.api){
+                if (this.chartProps) {
+                    var props = new Asc.CAscChartProp();
+                    var oView3D = this.chartProps.getView3d();
+                    if (oView3D) {
+                        oView3D.asc_setHeight(field.getNumberValue());
+                        this.chartProps.putView3d(oView3D);
+                        props.put_ChartProperties(this.chartProps);
+                        this.api.ChartApply(props);
+                    }
+                }
+            }
+        },
+
+        onDefRotation: function() {
+            if (this._noApply) return;
+            if (this.api){
+                if (this.chartProps) {
+                    var props = new Asc.CAscChartProp();
+                    var oView3D = this.chartProps.getView3d();
+                    if (oView3D) {
+                        oView3D.asc_setRotX(20);
+                        oView3D.asc_setRotY(15);
+                        this.chartProps.putView3d(oView3D);
+                        props.put_ChartProperties(this.chartProps);
+                        this.api.ChartApply(props);
+                    }
+                }
+            }
+        },
+
         setLocked: function (locked) {
             this._locked = locked;
         },
@@ -556,6 +914,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 || {}));
 });

apps/presentationeditor/main/locale/en.json

@@ -1394,6 +1394,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.",

apps/spreadsheeteditor/main/app/template/ChartSettings.template

@@ -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 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" id="spark-panel-types">
     <tr>
         <td>

apps/spreadsheeteditor/main/app/view/ChartSettings.js

@@ -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,57 @@ 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(this._locked || !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_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);
+                    }
                 } else { //sparkline
                     this._originalProps = props;
                     this.isChart = false;
@@ -778,6 +831,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: 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(){ 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: 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(){ 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-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(){ 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-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){
+                    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: 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(){ Common.NotificationCenter.trigger('edit:complete', 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(){ 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 +1044,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 +1556,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 +1687,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 (% 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'
 
     }, SSE.Views.ChartSettings || {}));
 });

apps/spreadsheeteditor/main/locale/en.json

@@ -1670,6 +1670,21 @@
   "SSE.Views.ChartSettings.textSwitch": "Switch Row/Column",
   "SSE.Views.ChartSettings.textType": "Type",
   "SSE.Views.ChartSettings.textWidth": "Width",
+  "SSE.Views.ChartSettings.text3dRotation": "3D Rotation",
+  "SSE.Views.ChartSettings.textX": "X rotation",
+  "SSE.Views.ChartSettings.textY": "Y rotation",
+  "SSE.Views.ChartSettings.textPerspective": "Perspective",
+  "SSE.Views.ChartSettings.text3dDepth": "Depth (% of base)",
+  "SSE.Views.ChartSettings.text3dHeight": "Height (% of base)",
+  "SSE.Views.ChartSettings.textLeft": "Left",
+  "SSE.Views.ChartSettings.textRight": "Right",
+  "SSE.Views.ChartSettings.textUp": "Up",
+  "SSE.Views.ChartSettings.textDown": "Down",
+  "SSE.Views.ChartSettings.textNarrow": "Narrow field of view",
+  "SSE.Views.ChartSettings.textWiden": "Widen field of view",
+  "SSE.Views.ChartSettings.textRightAngle": "Right Angle Axes",
+  "SSE.Views.ChartSettings.textAutoscale": "Autoscale",
+  "SSE.Views.ChartSettings.textDefault": "Default Rotation",
   "SSE.Views.ChartSettingsDlg.errorMaxPoints": "ERROR! The maximum number of points in series per chart is 4096.",
   "SSE.Views.ChartSettingsDlg.errorMaxRows": "ERROR! The maximum number of data series per chart is 255",
   "SSE.Views.ChartSettingsDlg.errorStockChart": "Incorrect row order. To build a stock chart place the data on the sheet in the following order:<br> opening price, max price, min price, closing price.",