From d824f9dd61fde294882bf6c354628294dc8f107e Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Wed, 7 Sep 2022 15:44:27 +0300 Subject: [PATCH] [SSE] Add 3d rotation settings for charts --- .../main/app/template/ChartSettings.template | 63 +++ .../main/app/view/ChartSettings.js | 370 +++++++++++++++++- 2 files changed, 427 insertions(+), 6 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/template/ChartSettings.template b/apps/spreadsheeteditor/main/app/template/ChartSettings.template index f4a126bc0..e728e6578 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 ea4c29e05..09cb2c040 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,53 @@ define([ this._state.keepRatio=value; } - var chartSettings = this.api.asc_getChartObject(true), // don't lock chart object - series = chartSettings ? chartSettings.getSeries() : null; + var series = chartSettings ? chartSettings.getSeries() : null; this.btnSwitch.setDisabled(!series || series.length<1 || !chartSettings || !chartSettings.getRange()); + + if (props3d) { + value = props3d.asc_getRotX(); + if ((this._state.X===undefined || value===undefined)&&(this._state.X!==value) || + Math.abs(this._state.X-value)>0.001) { + this.spnX.setValue((value!==null && value !== undefined) ? value : '', true); + this._state.X = value; + } + + value = props3d.asc_getRotY(); + if ( (this._state.Y===undefined || value===undefined)&&(this._state.Y!==value) || + Math.abs(this._state.Y-value)>0.001) { + this.spnY.setValue((value!==null && value !== undefined) ? value : '', true); + this._state.Y = value; + } + + value = props3d.asc_getPerspective(); + if ( (this._state.Perspective===undefined || value===undefined)&&(this._state.Perspective!==value) || + Math.abs(this._state.Perspective-value)>0.001) { + this.spnPerspective.setValue((value!==null && value !== undefined) ? value : '', true); + this._state.Perspective = value; + } + + value = props3d.asc_getRightAngleAxes(); + if ( this._state.RightAngle!==value ) { + this.chRightAngle.setValue((value !== null && value !== undefined) ? value : 'indeterminate', true); + this._state.RightAngle=point; + } + + value = props3d.asc_getDepth(); + if ( Math.abs(this._state.Depth-value)>0.001 || + (this._state.Depth===undefined || value===undefined)&&(this._state.Depth!==value)) { + this.spn3DDepth.setValue((value!==null && value !== undefined) ? value : '', true); + this._state.Depth = value; + } + + value = props3d.asc_getHeight(); + if ( Math.abs(this._state.Height3d-value)>0.001 || + (this._state.Height3d===undefined || this._state.Height3d===null || value===null)&&(this._state.Height3d!==value)) { + (value!==null) && this.spn3DHeight.setValue(value, true); + this.chAutoscale.setValue(value===null, true); + this.spn3DHeight.setDisabled(value===null); + this._state.Height3d = value; + } + } } else { //sparkline this._originalProps = props; this.isChart = false; @@ -778,6 +827,208 @@ define([ this.btnSwitch.on('click', _.bind(this.onSwitch, this)); this.lockedControls.push(this.btnSwitch); + // 3d rotation + this.spnX = new Common.UI.MetricSpinner({ + el: $('#chart-spin-x'), + step: 10, + width: 45, + defaultUnit : "°", + value: '20 °', + maxValue: 359.9, + minValue: 0, + dataHint: '1', + dataHintDirection: 'bottom', + dataHintOffset: 'big' + }); + this.lockedControls.push(this.spnX); + this.spnX.on('change', _.bind(this.onXRotation, this)); + this.spnX.on('inputleave', function(){ Common.NotificationCenter.trigger('edit:complete', me);}); + + this.btnLeft = new Common.UI.Button({ + parentEl: $('#chart-btn-x-left', me.$el), + cls: 'btn-toolbar', + iconCls: 'toolbar__icon btn-rotate-270', + hint: this.textLeft, + dataHint: '1', + dataHintDirection: 'top' + }); + this.lockedControls.push(this.btnLeft); + this.btnLeft.on('click', _.bind(function() { + this.spnX.setValue(this.spnX.getNumberValue() - 10); + }, this)); + + this.btnRight= new Common.UI.Button({ + parentEl: $('#chart-btn-x-right', me.$el), + cls: 'btn-toolbar', + iconCls: 'toolbar__icon btn-rotate-90', + hint: this.textRight, + dataHint: '1', + dataHintDirection: 'top' + }); + this.lockedControls.push(this.btnRight); + this.btnRight.on('click', _.bind(function() { + this.spnX.setValue(this.spnX.getNumberValue() + 10); + }, this)); + + this.spnY = new Common.UI.MetricSpinner({ + el: $('#chart-spin-y'), + step: 10, + width: 45, + defaultUnit : "°", + value: '15 °', + maxValue: 90, + minValue: -90, + dataHint: '1', + dataHintDirection: 'bottom', + dataHintOffset: 'big' + }); + this.lockedControls.push(this.spnY); + this.spnY.on('change', _.bind(this.onYRotation, this)); + this.spnY.on('inputleave', function(){ Common.NotificationCenter.trigger('edit:complete', me);}); + + this.btnUp = new Common.UI.Button({ + parentEl: $('#chart-btn-y-up', me.$el), + cls: 'btn-toolbar', + iconCls: 'toolbar__icon btn-rotate-270', + hint: this.textUp, + dataHint: '1', + dataHintDirection: 'top' + }); + this.lockedControls.push(this.btnUp); + this.btnUp.on('click', _.bind(function() { + this.spnY.setValue(this.spnY.getNumberValue() + 10); + }, this)); + + this.btnDown= new Common.UI.Button({ + parentEl: $('#chart-btn-y-down', me.$el), + cls: 'btn-toolbar', + iconCls: 'toolbar__icon btn-rotate-90', + hint: this.textDown, + dataHint: '1', + dataHintDirection: 'top' + }); + this.lockedControls.push(this.btnDown); + this.btnDown.on('click', _.bind(function() { + this.spnY.setValue(this.spnY.getNumberValue() + 10); + }, this)); + + this.spnPerspective = new Common.UI.MetricSpinner({ + el: $('#chart-spin-persp'), + step: 5, + width: 45, + defaultUnit : "°", + value: '0 °', + maxValue: 100, + minValue: 0.1, + dataHint: '1', + dataHintDirection: 'bottom', + dataHintOffset: 'big' + }); + this.lockedControls.push(this.spnPerspective); + this.spnPerspective.on('change', _.bind(this.onPerspective, this)); + this.spnPerspective.on('inputleave', function(){ Common.NotificationCenter.trigger('edit:complete', me);}); + + this.btnNarrow = new Common.UI.Button({ + parentEl: $('#chart-btn-narrow', me.$el), + cls: 'btn-toolbar', + iconCls: 'toolbar__icon btn-rotate-270', + hint: this.textNarrow, + dataHint: '1', + dataHintDirection: 'top' + }); + this.lockedControls.push(this.btnNarrow); + this.btnNarrow.on('click', _.bind(function() { + this.spnPerspective.setValue(this.spnPerspective.getNumberValue() + 5); + }, this)); + + this.btnWiden= new Common.UI.Button({ + parentEl: $('#chart-btn-widen', me.$el), + cls: 'btn-toolbar', + iconCls: 'toolbar__icon btn-rotate-90', + hint: this.textWiden, + dataHint: '1', + dataHintDirection: 'top' + }); + this.lockedControls.push(this.btnWiden); + this.btnWiden.on('click', _.bind(function() { + this.spnPerspective.setValue(this.spnPerspective.getNumberValue() + 5); + }, this)); + + this.chRightAngle = new Common.UI.CheckBox({ + el: $('#chart-checkbox-right-angle'), + labelText: this.textRightAngle + }); + this.lockedControls.push(this.chRightAngle); + this.chRightAngle.on('change', _.bind(function(field, newValue, oldValue, eOpts) { + if (this.api){ + var props = this.api.asc_getChartObject(); + if (props) { + var oView3D = props.getView3d(); + if (oView3D) { + oView3D.asc_setRightAngleAxes(field.getValue()=='checked'); + props.startEdit(); + props.setView3d(oView3D); + props.endEdit(); + } + } + } + }, this)); + + this.chAutoscale = new Common.UI.CheckBox({ + el: $('#chart-checkbox-autoscale'), + labelText: this.textAutoscale + }); + this.lockedControls.push(this.chAutoscale); + this.chAutoscale.on('change', _.bind(function(field, newValue, oldValue, eOpts) { + if (this.api){ + var props = this.api.asc_getChartObject(); + if (props) { + var oView3D = props.getView3d(); + if (oView3D) { + oView3D.asc_setHeight(field.getValue()=='checked' ? null : this.spn3DHeight.getNumberValue()); + props.startEdit(); + props.setView3d(oView3D); + props.endEdit(); + } + } + } + }, this)); + + this.spn3DDepth = new Common.UI.MetricSpinner({ + el: $('#chart-spin-3d-depth'), + step: 10, + width: 78, + defaultUnit : "%", + value: '0 %', + maxValue: 2000, + minValue: 0, + dataHint: '1', + dataHintDirection: 'bottom', + dataHintOffset: 'big' + }); + this.lockedControls.push(this.spn3DDepth); + this.spn3DDepth.on('change', _.bind(this.on3DDepth, this)); + this.spn3DDepth.on('inputleave', function(){ Common.NotificationCenter.trigger('edit:complete', me);}); + + this.spn3DHeight = new Common.UI.MetricSpinner({ + el: $('#chart-spin-3d-height'), + step: 10, + width: 78, + defaultUnit : "%", + value: '50 %', + maxValue: 500, + minValue: 5, + dataHint: '1', + dataHintDirection: 'bottom', + dataHintOffset: 'big' + }); + this.lockedControls.push(this.spn3DHeight); + this.spn3DHeight.on('change', _.bind(this.on3DHeight, this)); + this.spn3DHeight.on('inputleave', function(){ Common.NotificationCenter.trigger('edit:complete', me);}); + + this.linkDefRotation = $('#chart-def-rotate-link'); + $(this.el).on('click', '#chart-def-rotate-link', _.bind(this.onDefRotation, this)); + this.linkAdvanced = $('#chart-advanced-link'); $(this.el).on('click', '#chart-advanced-link', _.bind(this.openAdvancedSettings, this)); }, @@ -789,11 +1040,12 @@ define([ this.UpdateThemeColors(); }, - ShowHideElem: function(isChart) { + ShowHideElem: function(isChart, is3D) { this.ChartSizeContainer.toggleClass('settings-hidden', !isChart); this.ChartTypesContainer.toggleClass('settings-hidden', !isChart); this.SparkTypesContainer.toggleClass('settings-hidden', isChart); this.SparkPointsContainer.toggleClass('settings-hidden', isChart); + this.Chart3DContainer.toggleClass('settings-hidden', !isChart || !is3D); }, ShowCombinedProps: function(type) { @@ -1300,6 +1552,97 @@ define([ } }, + onXRotation: function(field, newValue, oldValue, eOpts){ + if (this.api){ + var props = this.api.asc_getChartObject(); + if (props) { + var oView3D = props.getView3d(); + if (oView3D) { + oView3D.asc_setRotX(field.getNumberValue()); + props.startEdit(); + props.setView3d(oView3D); + props.endEdit(); + } + } + } + }, + + onYRotation: function(field, newValue, oldValue, eOpts){ + if (this.api){ + var props = this.api.asc_getChartObject(); + if (props) { + var oView3D = props.getView3d(); + if (oView3D) { + oView3D.asc_setRotY(field.getNumberValue()); + props.startEdit(); + props.setView3d(oView3D); + props.endEdit(); + } + } + } + }, + + onPerspective: function(field, newValue, oldValue, eOpts){ + if (this.api){ + var props = this.api.asc_getChartObject(); + if (props) { + var oView3D = props.getView3d(); + if (oView3D) { + oView3D.asc_setPerspective(field.getNumberValue()); + props.startEdit(); + props.setView3d(oView3D); + props.endEdit(); + } + } + } + }, + + on3DDepth: function(field, newValue, oldValue, eOpts){ + if (this.api){ + var props = this.api.asc_getChartObject(); + if (props) { + var oView3D = props.getView3d(); + if (oView3D) { + oView3D.asc_setDepth(field.getNumberValue()); + props.startEdit(); + props.setView3d(oView3D); + props.endEdit(); + } + } + } + }, + + on3DHeight: function(field, newValue, oldValue, eOpts){ + if (this.api){ + var props = this.api.asc_getChartObject(); + if (props) { + var oView3D = props.getView3d(); + if (oView3D) { + oView3D.asc_setHeight(field.getNumberValue()); + props.startEdit(); + props.setView3d(oView3D); + props.endEdit(); + } + } + } + }, + + onDefRotation: function() { + if (this.api){ + var props = this.api.asc_getChartObject(); + if (props) { + var oView3D = props.getView3d(); + if (oView3D) { + oView3D.asc_setRotX(20); + oView3D.asc_setRotY(15); + props.startEdit(); + props.setView3d(oView3D); + props.endEdit(); + } + } + } + }, + setLocked: function (locked) { this._locked = locked; }, @@ -1340,7 +1683,22 @@ define([ textBorderSizeErr: 'The entered value is incorrect.
Please enter a value between 0 pt and 1584 pt.', textChangeType: 'Change type', textSwitch: 'Switch Row/Column', - errorMaxRows: 'The maximum number of data series per chart is 255.' + errorMaxRows: 'The maximum number of data series per chart is 255.', + text3dRotation: '3D Rotation', + textX: 'X rotation', + textY: 'Y rotation', + textPerspective: 'Perspective', + text3dDepth: 'Depth', + text3dHeight: 'Height', + textLeft: 'Left', + textRight: 'Right', + textUp: 'Up', + textDown: 'Down', + textNarrow: 'Narrow field of view', + textWiden: 'Widen field of view', + textRightAngle: 'Right Angle Axes', + textAutoscale: 'Autoscale', + textDefault: 'Default Rotation' }, SSE.Views.ChartSettings || {})); }); \ No newline at end of file