diff --git a/apps/common/main/resources/img/toolbar/1.25x/btn-rotate-down.png b/apps/common/main/resources/img/toolbar/1.25x/btn-rotate-down.png new file mode 100644 index 000000000..4714ec06d Binary files /dev/null and b/apps/common/main/resources/img/toolbar/1.25x/btn-rotate-down.png differ diff --git a/apps/common/main/resources/img/toolbar/1.25x/btn-rotate-up.png b/apps/common/main/resources/img/toolbar/1.25x/btn-rotate-up.png new file mode 100644 index 000000000..8d2bd9cf3 Binary files /dev/null and b/apps/common/main/resources/img/toolbar/1.25x/btn-rotate-up.png differ diff --git a/apps/common/main/resources/img/toolbar/1.25x/btn-rotate-y-clockwise.png b/apps/common/main/resources/img/toolbar/1.25x/btn-rotate-y-clockwise.png new file mode 100644 index 000000000..02a4ff521 Binary files /dev/null and b/apps/common/main/resources/img/toolbar/1.25x/btn-rotate-y-clockwise.png differ diff --git a/apps/common/main/resources/img/toolbar/1.25x/btn-rotate-y-counterclockwise.png b/apps/common/main/resources/img/toolbar/1.25x/btn-rotate-y-counterclockwise.png new file mode 100644 index 000000000..a14a6b47f Binary files /dev/null and b/apps/common/main/resources/img/toolbar/1.25x/btn-rotate-y-counterclockwise.png differ diff --git a/apps/common/main/resources/img/toolbar/1.5x/btn-rotate-down.png b/apps/common/main/resources/img/toolbar/1.5x/btn-rotate-down.png new file mode 100644 index 000000000..b212389a5 Binary files /dev/null and b/apps/common/main/resources/img/toolbar/1.5x/btn-rotate-down.png differ diff --git a/apps/common/main/resources/img/toolbar/1.5x/btn-rotate-up.png b/apps/common/main/resources/img/toolbar/1.5x/btn-rotate-up.png new file mode 100644 index 000000000..4e41c78fd Binary files /dev/null and b/apps/common/main/resources/img/toolbar/1.5x/btn-rotate-up.png differ diff --git a/apps/common/main/resources/img/toolbar/1.5x/btn-rotate-y-clockwise.png b/apps/common/main/resources/img/toolbar/1.5x/btn-rotate-y-clockwise.png new file mode 100644 index 000000000..4dee2fd2a Binary files /dev/null and b/apps/common/main/resources/img/toolbar/1.5x/btn-rotate-y-clockwise.png differ diff --git a/apps/common/main/resources/img/toolbar/1.5x/btn-rotate-y-counterclockwise.png b/apps/common/main/resources/img/toolbar/1.5x/btn-rotate-y-counterclockwise.png new file mode 100644 index 000000000..b8380e2c5 Binary files /dev/null and b/apps/common/main/resources/img/toolbar/1.5x/btn-rotate-y-counterclockwise.png differ diff --git a/apps/common/main/resources/img/toolbar/1.75x/btn-rotate-down.png b/apps/common/main/resources/img/toolbar/1.75x/btn-rotate-down.png new file mode 100644 index 000000000..f3d4e2348 Binary files /dev/null and b/apps/common/main/resources/img/toolbar/1.75x/btn-rotate-down.png differ diff --git a/apps/common/main/resources/img/toolbar/1.75x/btn-rotate-up.png b/apps/common/main/resources/img/toolbar/1.75x/btn-rotate-up.png new file mode 100644 index 000000000..3a9dd79b5 Binary files /dev/null and b/apps/common/main/resources/img/toolbar/1.75x/btn-rotate-up.png differ diff --git a/apps/common/main/resources/img/toolbar/1.75x/btn-rotate-y-clockwise.png b/apps/common/main/resources/img/toolbar/1.75x/btn-rotate-y-clockwise.png new file mode 100644 index 000000000..c3f40271e Binary files /dev/null and b/apps/common/main/resources/img/toolbar/1.75x/btn-rotate-y-clockwise.png differ diff --git a/apps/common/main/resources/img/toolbar/1.75x/btn-rotate-y-counterclockwise.png b/apps/common/main/resources/img/toolbar/1.75x/btn-rotate-y-counterclockwise.png new file mode 100644 index 000000000..310d95c2c Binary files /dev/null and b/apps/common/main/resources/img/toolbar/1.75x/btn-rotate-y-counterclockwise.png differ diff --git a/apps/common/main/resources/img/toolbar/1x/btn-rotate-down.png b/apps/common/main/resources/img/toolbar/1x/btn-rotate-down.png new file mode 100644 index 000000000..bb8884a3c Binary files /dev/null and b/apps/common/main/resources/img/toolbar/1x/btn-rotate-down.png differ diff --git a/apps/common/main/resources/img/toolbar/1x/btn-rotate-up.png b/apps/common/main/resources/img/toolbar/1x/btn-rotate-up.png new file mode 100644 index 000000000..8312c4328 Binary files /dev/null and b/apps/common/main/resources/img/toolbar/1x/btn-rotate-up.png differ diff --git a/apps/common/main/resources/img/toolbar/1x/btn-rotate-y-clockwise.png b/apps/common/main/resources/img/toolbar/1x/btn-rotate-y-clockwise.png new file mode 100644 index 000000000..b28afbe37 Binary files /dev/null and b/apps/common/main/resources/img/toolbar/1x/btn-rotate-y-clockwise.png differ diff --git a/apps/common/main/resources/img/toolbar/1x/btn-rotate-y-counterclockwise.png b/apps/common/main/resources/img/toolbar/1x/btn-rotate-y-counterclockwise.png new file mode 100644 index 000000000..93e1ad70b Binary files /dev/null and b/apps/common/main/resources/img/toolbar/1x/btn-rotate-y-counterclockwise.png differ diff --git a/apps/common/main/resources/img/toolbar/2x/btn-rotate-down.png b/apps/common/main/resources/img/toolbar/2x/btn-rotate-down.png new file mode 100644 index 000000000..fe5bd0a01 Binary files /dev/null and b/apps/common/main/resources/img/toolbar/2x/btn-rotate-down.png differ diff --git a/apps/common/main/resources/img/toolbar/2x/btn-rotate-up.png b/apps/common/main/resources/img/toolbar/2x/btn-rotate-up.png new file mode 100644 index 000000000..fbe974a9c Binary files /dev/null and b/apps/common/main/resources/img/toolbar/2x/btn-rotate-up.png differ diff --git a/apps/common/main/resources/img/toolbar/2x/btn-rotate-y-clockwise.png b/apps/common/main/resources/img/toolbar/2x/btn-rotate-y-clockwise.png new file mode 100644 index 000000000..42917ea79 Binary files /dev/null and b/apps/common/main/resources/img/toolbar/2x/btn-rotate-y-clockwise.png differ diff --git a/apps/common/main/resources/img/toolbar/2x/btn-rotate-y-counterclockwise.png b/apps/common/main/resources/img/toolbar/2x/btn-rotate-y-counterclockwise.png new file mode 100644 index 000000000..8fb1cd5f8 Binary files /dev/null and b/apps/common/main/resources/img/toolbar/2x/btn-rotate-y-counterclockwise.png differ diff --git a/apps/common/main/resources/less/common.less b/apps/common/main/resources/less/common.less index 3ab9deb8e..cbb386fd0 100644 --- a/apps/common/main/resources/less/common.less +++ b/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 { diff --git a/apps/documenteditor/main/app/template/ChartSettings.template b/apps/documenteditor/main/app/template/ChartSettings.template index 751395f99..6cd8a6740 100644 --- a/apps/documenteditor/main/app/template/ChartSettings.template +++ b/apps/documenteditor/main/app/template/ChartSettings.template @@ -57,6 +57,71 @@ + +
+ + | +
+ + | +
+ + + + + | +
+ + + + + | +
+ + + + + | +
+ + | +
+ + | +
+ + + | +
+ + + | +
+ + | +
diff --git a/apps/documenteditor/main/app/view/ChartSettings.js b/apps/documenteditor/main/app/view/ChartSettings.js index b88abbd84..77089a90f 100644 --- a/apps/documenteditor/main/app/view/ChartSettings.js +++ b/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 || {})); }); \ No newline at end of file diff --git a/apps/documenteditor/main/locale/en.json b/apps/documenteditor/main/locale/en.json index 11124a9d2..92876a062 100644 --- a/apps/documenteditor/main/locale/en.json +++ b/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", diff --git a/apps/presentationeditor/main/app/template/ChartSettings.template b/apps/presentationeditor/main/app/template/ChartSettings.template index c950a36ee..336294b94 100644 --- a/apps/presentationeditor/main/app/template/ChartSettings.template +++ b/apps/presentationeditor/main/app/template/ChartSettings.template @@ -49,6 +49,71 @@ |
+ + | +
+ + | +
+ + + + + | +
+ + + + + | +
+ + + + + | +
+ + | +
+ + | +
+ + + | +
+ + + | +
+ + | +
diff --git a/apps/presentationeditor/main/app/view/ChartSettings.js b/apps/presentationeditor/main/app/view/ChartSettings.js index cdd777f4f..a1beac866 100644 --- a/apps/presentationeditor/main/app/view/ChartSettings.js +++ b/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 || {})); }); \ No newline at end of file diff --git a/apps/presentationeditor/main/locale/en.json b/apps/presentationeditor/main/locale/en.json index 4c28ab77c..f130a20b7 100644 --- a/apps/presentationeditor/main/locale/en.json +++ b/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.", diff --git a/apps/spreadsheeteditor/main/app/template/ChartSettings.template b/apps/spreadsheeteditor/main/app/template/ChartSettings.template index f4a126bc0..d33d89931 100644 --- a/apps/spreadsheeteditor/main/app/template/ChartSettings.template +++ b/apps/spreadsheeteditor/main/app/template/ChartSettings.template @@ -46,6 +46,69 @@ |
+ + | +
+ + | +
+ + + + + | +
+ + + + + | +
+ + + + + | +
+ + | +
+ + | +
+ + + | +
+ + + | +
+ + | +
diff --git a/apps/spreadsheeteditor/main/app/view/ChartSettings.js b/apps/spreadsheeteditor/main/app/view/ChartSettings.js
index adedb3383..2bd693270 100644
--- a/apps/spreadsheeteditor/main/app/view/ChartSettings.js
+++ b/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. 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 || {})); }); \ No newline at end of file diff --git a/apps/spreadsheeteditor/main/locale/en.json b/apps/spreadsheeteditor/main/locale/en.json index 4f310a756..3dfb8cfc8 100644 --- a/apps/spreadsheeteditor/main/locale/en.json +++ b/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: opening price, max price, min price, closing price.", |