From a8e9c71d526519013c22f59528b262d6c74f3d7a Mon Sep 17 00:00:00 2001 From: JuliaSvinareva Date: Thu, 9 Jul 2020 15:44:30 +0300 Subject: [PATCH] [DE] Bug 43708 (Text art settings, Shape settings: add buttons (position, add thumb, remove thumb), change gradient slider style) --- .../main/app/template/ShapeSettings.template | 17 +++- .../app/template/TextArtSettings.template | 17 +++- .../main/app/view/ShapeSettings.js | 89 ++++++++++++++++++- .../main/app/view/TextArtSettings.js | 89 ++++++++++++++++++- apps/documenteditor/main/locale/en.json | 6 ++ 5 files changed, 212 insertions(+), 6 deletions(-) diff --git a/apps/documenteditor/main/app/template/ShapeSettings.template b/apps/documenteditor/main/app/template/ShapeSettings.template index 1418afb3b..99941da61 100644 --- a/apps/documenteditor/main/app/template/ShapeSettings.template +++ b/apps/documenteditor/main/app/template/ShapeSettings.template @@ -66,7 +66,22 @@
-
+
+
+
+ +
+
+
+ +
+
+
+
+
+
+
+
diff --git a/apps/documenteditor/main/app/template/TextArtSettings.template b/apps/documenteditor/main/app/template/TextArtSettings.template index d64e7d07d..e4e8d61fe 100644 --- a/apps/documenteditor/main/app/template/TextArtSettings.template +++ b/apps/documenteditor/main/app/template/TextArtSettings.template @@ -44,7 +44,22 @@
-
+
+
+
+ +
+
+
+ +
+
+
+
+
+
+
+
diff --git a/apps/documenteditor/main/app/view/ShapeSettings.js b/apps/documenteditor/main/app/view/ShapeSettings.js index 8fd41e2e5..432af65c4 100644 --- a/apps/documenteditor/main/app/view/ShapeSettings.js +++ b/apps/documenteditor/main/app/view/ShapeSettings.js @@ -973,6 +973,7 @@ define([ me.GradColor.currentIdx = 0; } me.sldrGradient.setActiveThumb(me.GradColor.currentIdx); + this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx]); this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD; this.FGColor = {Value: 1, Color: this.GradColor.colors[0]}; this.BGColor = {Value: 1, Color: 'ffffff'}; @@ -1348,7 +1349,7 @@ define([ this.sldrGradient = new Common.UI.MultiSliderGradient({ el: $('#shape-slider-gradient'), - width: 125, + width: 192, minValue: 0, maxValue: 100, values: [0, 100] @@ -1360,6 +1361,8 @@ define([ var color = me.GradColor.colors[me.GradColor.currentIdx]; me.btnGradColor.setColor(color); me.colorsGrad.select(color,false); + var pos = me.GradColor.values[me.GradColor.currentIdx]; + me.spnGradPosition.setValue(pos, true); }); this.sldrGradient.on('thumbdblclick', function(cmp){ me.btnGradColor.cmpEl.find('button').dropdown('toggle'); @@ -1388,6 +1391,41 @@ define([ }); this.fillControls.push(this.sldrGradient); + this.spnGradPosition = new Common.UI.MetricSpinner({ + el: $('#shape-gradient-position'), + step: 1, + width: 60, + defaultUnit : "%", + value: '50 %', + allowDecimal: false, + maxValue: 100, + minValue: 0, + disabled: this._locked + }); + this.lockedControls.push(this.spnGradPosition); + this.spnGradPosition.on('change', _.bind(this.onPositionChange, this)); + this.spnGradPosition.on('inputleave', function(){ Common.NotificationCenter.trigger('edit:complete', me);}); + + this.btnAddGradientStep = new Common.UI.Button({ + parentEl: $('#shape-gradient-add-step'), + cls: 'btn-toolbar', + iconCls: 'toolbar__icon btn-add-breakpoint', + disabled: this._locked, + hint: this.tipAddGradientPoint, + }); + this.btnAddGradientStep.on('click', _.bind(this.onAddGradientStep, this)); + this.lockedControls.push(this.btnAddGradientStep); + + this.btnRemoveGradientStep = new Common.UI.Button({ + parentEl: $('#shape-gradient-remove-step'), + cls: 'btn-toolbar', + iconCls: 'toolbar__icon btn-remove-breakpoint', + disabled: this._locked, + hint: this.tipRemoveGradientPoint + }); + this.btnRemoveGradientStep.on('click', _.bind(this.onRemoveGradientStep, this)); + this.lockedControls.push(this.btnRemoveGradientStep); + this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({ el: $('#shape-combo-border-size'), style: "width: 93px;", @@ -1817,6 +1855,50 @@ define([ } }, + onPositionChange: function(btn) { + var pos = btn.getNumberValue(); + if (this.api) { + this.GradColor.values[this.GradColor.currentIdx] = pos; + var props = new Asc.asc_CShapeProperty(); + var fill = new Asc.asc_CShapeFill(); + fill.asc_putType(Asc.c_oAscFill.FILL_TYPE_GRAD); + fill.asc_putFill( new Asc.asc_CFillGrad()); + fill.asc_getFill().asc_putGradType(this.GradFillType); + var arr = []; + this.GradColor.values.forEach(function(item){ + arr.push(item*1000); + }); + fill.asc_getFill().asc_putPositions(arr); + props.asc_putFill(fill); + this.imgprops.put_ShapeProperties(props); + this.api.ImgApply(this.imgprops); + } + }, + + onAddGradientStep: function() { + var curIndex = this.GradColor.currentIdx; + var pos = (this.GradColor.values[curIndex] + this.GradColor.values[curIndex < this.GradColor.colors.length - 1 ? curIndex + 1 : curIndex - 1]) / 2; + + this.GradColor.colors[this.GradColor.colors.length] = this.GradColor.colors[curIndex]; + this.GradColor.currentIdx = this.GradColor.colors.length - 1; + this.sldrGradient.addNewThumb(undefined, undefined, pos, curIndex); + + this.sldrGradient.trigger('change', this.sldrGradient); + this.sldrGradient.trigger('changecomplete', this.sldrGradient); + }, + + onRemoveGradientStep: function() { + if (this.GradColor.values.length < 3) return; + this.GradColor.values.splice(this.GradColor.currentIdx, 1); + this.sldrGradient.removeThumb(this.GradColor.currentIdx); + if (_.isUndefined(this.GradColor.currentIdx) || this.GradColor.currentIdx >= this.GradColor.colors.length) { + this.GradColor.currentIdx = 0; + } + this.sldrGradient.setActiveThumb(this.GradColor.currentIdx); + this.sldrGradient.trigger('change', this.sldrGradient); + this.sldrGradient.trigger('changecomplete', this.sldrGradient); + }, + txtNoBorders : 'No Line', strStroke : 'Stroke', strColor : 'Color', @@ -1875,6 +1957,9 @@ define([ textHintFlipH: 'Flip Horizontally', strShadow: 'Show shadow', textFromStorage: 'From Storage', - textSelectImage: 'Select Picture' + textSelectImage: 'Select Picture', + textPosition: 'Position', + tipAddGradientPoint: 'Add gradient point', + tipRemoveGradientPoint: 'Remove gradient point' }, DE.Views.ShapeSettings || {})); }); diff --git a/apps/documenteditor/main/app/view/TextArtSettings.js b/apps/documenteditor/main/app/view/TextArtSettings.js index 9d07d7922..7a29bfd4b 100644 --- a/apps/documenteditor/main/app/view/TextArtSettings.js +++ b/apps/documenteditor/main/app/view/TextArtSettings.js @@ -646,6 +646,7 @@ define([ me.GradColor.currentIdx = 0; } me.sldrGradient.setActiveThumb(me.GradColor.currentIdx); + this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx]); this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD; this.ShapeColor = {Value: 1, Color: this.GradColor.colors[0]}; } @@ -913,7 +914,7 @@ define([ this.sldrGradient = new Common.UI.MultiSliderGradient({ el: $('#textart-slider-gradient'), - width: 125, + width: 192, minValue: 0, maxValue: 100, values: [0, 100] @@ -925,6 +926,8 @@ define([ var color = me.GradColor.colors[me.GradColor.currentIdx]; me.btnGradColor.setColor(color); me.colorsGrad.select(color,false); + var pos = me.GradColor.values[me.GradColor.currentIdx]; + me.spnGradPosition.setValue(pos, true); }); this.sldrGradient.on('thumbdblclick', function(cmp){ me.btnGradColor.cmpEl.find('button').dropdown('toggle'); @@ -953,6 +956,41 @@ define([ }); this.lockedControls.push(this.sldrGradient); + this.spnGradPosition = new Common.UI.MetricSpinner({ + el: $('#textart-gradient-position'), + step: 1, + width: 60, + defaultUnit : "%", + value: '50 %', + allowDecimal: false, + maxValue: 100, + minValue: 0, + disabled: this._locked + }); + this.lockedControls.push(this.spnGradPosition); + this.spnGradPosition.on('change', _.bind(this.onPositionChange, this)); + this.spnGradPosition.on('inputleave', function(){ Common.NotificationCenter.trigger('edit:complete', me);}); + + this.btnAddGradientStep = new Common.UI.Button({ + parentEl: $('#textart-gradient-add-step'), + cls: 'btn-toolbar', + iconCls: 'toolbar__icon btn-add-breakpoint', + disabled: this._locked, + hint: this.tipAddGradientPoint, + }); + this.btnAddGradientStep.on('click', _.bind(this.onAddGradientStep, this)); + this.lockedControls.push(this.btnAddGradientStep); + + this.btnRemoveGradientStep = new Common.UI.Button({ + parentEl: $('#textart-gradient-remove-step'), + cls: 'btn-toolbar', + iconCls: 'toolbar__icon btn-remove-breakpoint', + disabled: this._locked, + hint: this.tipRemoveGradientPoint + }); + this.btnRemoveGradientStep.on('click', _.bind(this.onRemoveGradientStep, this)); + this.lockedControls.push(this.btnRemoveGradientStep); + this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({ el: $('#textart-combo-border-size'), style: "width: 93px;", @@ -1151,6 +1189,50 @@ define([ } }, + onPositionChange: function(btn) { + var pos = btn.getNumberValue(); + if (this.api) { + this.GradColor.values[this.GradColor.currentIdx] = pos; + var props = new Asc.asc_TextArtProperties(); + var fill = new Asc.asc_CShapeFill(); + fill.asc_putType(Asc.c_oAscFill.FILL_TYPE_GRAD); + fill.asc_putFill( new Asc.asc_CFillGrad()); + fill.asc_getFill().asc_putGradType(this.GradFillType); + var arr = []; + this.GradColor.values.forEach(function(item){ + arr.push(item*1000); + }); + fill.asc_getFill().asc_putPositions(arr); + props.asc_putFill(fill); + this.shapeprops.put_TextArtProperties(props); + this.api.ImgApply(this.imgprops); + } + }, + + onAddGradientStep: function() { + var curIndex = this.GradColor.currentIdx; + var pos = (this.GradColor.values[curIndex] + this.GradColor.values[curIndex < this.GradColor.colors.length - 1 ? curIndex + 1 : curIndex - 1]) / 2; + + this.GradColor.colors[this.GradColor.colors.length] = this.GradColor.colors[curIndex]; + this.GradColor.currentIdx = this.GradColor.colors.length - 1; + this.sldrGradient.addNewThumb(undefined, undefined, pos, curIndex); + + this.sldrGradient.trigger('change', this.sldrGradient); + this.sldrGradient.trigger('changecomplete', this.sldrGradient); + }, + + onRemoveGradientStep: function() { + if (this.GradColor.values.length < 3) return; + this.GradColor.values.splice(this.GradColor.currentIdx, 1); + this.sldrGradient.removeThumb(this.GradColor.currentIdx); + if (_.isUndefined(this.GradColor.currentIdx) || this.GradColor.currentIdx >= this.GradColor.colors.length) { + this.GradColor.currentIdx = 0; + } + this.sldrGradient.setActiveThumb(this.GradColor.currentIdx); + this.sldrGradient.trigger('change', this.sldrGradient); + this.sldrGradient.trigger('changecomplete', this.sldrGradient); + }, + txtNoBorders : 'No Line', strStroke : 'Stroke', strColor : 'Color', @@ -1169,6 +1251,9 @@ define([ textBorderSizeErr: 'The entered value is incorrect.
Please enter a value between 0 pt and 1584 pt.', textTransform: 'Transform', textTemplate: 'Template', - strType: 'Type' + strType: 'Type', + textPosition: 'Position', + tipAddGradientPoint: 'Add gradient point', + tipRemoveGradientPoint: 'Remove gradient point' }, DE.Views.TextArtSettings || {})); }); diff --git a/apps/documenteditor/main/locale/en.json b/apps/documenteditor/main/locale/en.json index 30b809527..75e36acf4 100644 --- a/apps/documenteditor/main/locale/en.json +++ b/apps/documenteditor/main/locale/en.json @@ -2018,6 +2018,9 @@ "DE.Views.ShapeSettings.txtWood": "Wood", "DE.Views.ShapeSettings.textFromStorage": "From Storage", "DE.Views.ShapeSettings.textSelectImage": "Select Picture", + "DE.Views.ShapeSettings.textPosition": "Position", + "DE.Views.ShapeSettings.tipAddGradientPoint": "Add gradient point", + "DE.Views.ShapeSettings.tipRemoveGradientPoint": "Remove gradient point", "DE.Views.SignatureSettings.notcriticalErrorTitle": "Warning", "DE.Views.SignatureSettings.strDelete": "Remove Signature", "DE.Views.SignatureSettings.strDetails": "Signature Details", @@ -2218,6 +2221,9 @@ "DE.Views.TextArtSettings.textTemplate": "Template", "DE.Views.TextArtSettings.textTransform": "Transform", "DE.Views.TextArtSettings.txtNoBorders": "No Line", + "DE.Views.TextArtSettings.textPosition": "Position", + "DE.Views.TextArtSettings.tipAddGradientPoint": "Add gradient point", + "DE.Views.TextArtSettings.tipRemoveGradientPoint": "Remove gradient point", "DE.Views.Toolbar.capBtnAddComment": "Add Comment", "DE.Views.Toolbar.capBtnBlankPage": "Blank Page", "DE.Views.Toolbar.capBtnColumns": "Columns",