From 63342d722331b1d8e116dce1ca6650b0d78de8eb Mon Sep 17 00:00:00 2001 From: OVSharova Date: Sat, 18 Mar 2023 18:14:24 +0300 Subject: [PATCH 1/7] add items to shape menu --- .../main/app/template/ShapeSettings.template | 13 +++ .../main/app/view/ShapeSettings.js | 89 +++++++++++++++++++ .../main/resources/less/rightmenu.less | 6 +- 3 files changed, 105 insertions(+), 3 deletions(-) diff --git a/apps/documenteditor/main/app/template/ShapeSettings.template b/apps/documenteditor/main/app/template/ShapeSettings.template index 8cde82cf07..ca2e7d5723 100644 --- a/apps/documenteditor/main/app/template/ShapeSettings.template +++ b/apps/documenteditor/main/app/template/ShapeSettings.template @@ -142,6 +142,19 @@ + + +
+ +
+ +
+ +
+
+
+ +
diff --git a/apps/documenteditor/main/app/view/ShapeSettings.js b/apps/documenteditor/main/app/view/ShapeSettings.js index a8d1cdd590..8a32bf1731 100644 --- a/apps/documenteditor/main/app/view/ShapeSettings.js +++ b/apps/documenteditor/main/app/view/ShapeSettings.js @@ -77,6 +77,8 @@ define([ this.imgprops = null; this._sendUndoPoint = true; this._sliderChanged = false; + this._sendLineUndoPoint = true; + this._sliderLineChanged = false; this._texturearray = null; this.txtPt = Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt); @@ -144,6 +146,7 @@ define([ this.FillPatternContainer = $('#shape-panel-pattern-fill'); this.FillGradientContainer = $('#shape-panel-gradient-fill'); this.TransparencyContainer = $('#shape-panel-transparent-fill'); + this.LineTransparencyContainer = $('#shape-line-panel-transparent'); this.ShapeOnlySettings = $('.shape-only'); this.CanChangeType = $('.change-type'); this.RotationSettings = $('.shape-rotation'); @@ -680,6 +683,52 @@ define([ this.fireEvent('editcomplete', this); }, + onNumLineTransparencyChange: function(field, newValue, oldValue, eOpts){ + this.sldrLineTransparency.setValue(field.getNumberValue(), true); + if (this.api) { + var num = field.getNumberValue(); + var props = new Asc.asc_CShapeProperty(); + var stroke = new Asc.asc_CStroke(); + stroke.put_transparent(num * 2.55); + props.put_stroke(stroke); + this.imgprops.put_ShapeProperties(props); + this.api.ImgApply(this.imgprops); + } + }, + + onLineTransparencyChange: function(field, newValue, oldValue){ + this._sliderLineChanged = newValue; + this.numLineTransparency.setValue(newValue, true); + if (this._sendLineUndoPoint) { + this.api.setStartPointHistory(); + this._sendLineUndoPoint = false; + this.updatesliderline = setInterval(_.bind(this._transparencyLineApplyFunc, this), 100); + } + }, + + onLineTransparencyChangeComplete: function(field, newValue, oldValue){ + clearInterval(this.updatesliderline); + this._sliderlineChanged = newValue; + if (!this._sendLineUndoPoint) { // start point was added + this.api.setEndPointHistory(); + this._transparencyLineApplyFunc(); + } + this._sendLineUndoPoint = true; + }, + + _transparencyLineApplyFunc: function() { + if (this._sliderLineChanged!==undefined) { + var props = new Asc.asc_CShapeProperty(); + var stroke = new Asc.asc_CStroke(); + stroke.put_transparent(this._sliderLineChanged * 2.55); + props.put_stroke(stroke); + + this.imgprops.put_ShapeProperties(props); + this.api.ImgApply(this.imgprops); + this._sliderLineChanged = undefined; + } + }, + _ImgWrapStyleChanged: function(style) { if (!this.cmbWrapType) return; if (this._state.WrappingStyle!==style) { @@ -1058,6 +1107,16 @@ define([ strokeType = stroke.get_type(), borderType, update = (this._state.StrokeColor == 'transparent' && this.BorderColor.Color !== 'transparent'); // border color was changed for shape without line and then shape was reselected (or apply other settings) + var transparency = stroke.get_transparent(); + if ( Math.abs(this._state.LineTransparency-transparency)>0.001 || Math.abs(this.numLineTransparency.getNumberValue()-transparency)>0.001 || + (this._state.LineTransparency===null || transparency===null)&&(this._state.LineTransparency!==transparency || this.numLineTransparency.getNumberValue()!==transparency)) { + + if (transparency !== undefined) { + this.sldrLineTransparency.setValue((transparency===null) ? 100 : transparency/255*100, true); + this.numLineTransparency.setValue(this.sldrLineTransparency.getValue(), true); + } + this._state.LineTransparency=transparency; + } if (stroke) { if ( strokeType == Asc.c_oAscStrokeType.STROKE_COLOR ) { @@ -1579,6 +1638,36 @@ define([ this.cmbBorderType.setValue(this.BorderType); this.lockedControls.push(this.cmbBorderType); + this.sldrLineTransparency = new Common.UI.SingleSlider({ + el: $('#shape-line-slider-transparency'), + width: 75, + minValue: 0, + maxValue: 100, + value: 100 + }); + this.sldrLineTransparency.on('change', _.bind(this.onLineTransparencyChange, this)); + this.sldrLineTransparency.on('changecomplete', _.bind(this.onLineTransparencyChangeComplete, this));/**/ + this.lockedControls.push(this.sldrLineTransparency); + + this.lockedControls.push( $(this.el).find('#shape-line-lbl-transparency-start')); + this.lockedControls.push( $(this.el).find('#shape-line-lbl-transparency-end')); + + this.numLineTransparency = new Common.UI.MetricSpinner({ + el: $('#shape-line-spin-transparency'), + step: 1, + width: 62, + value: '100 %', + defaultUnit : "%", + maxValue: 100, + minValue: 0, + dataHint: '1', + dataHintDirection: 'bottom', + dataHintOffset: 'big' + }); + this.numLineTransparency.on('change', _.bind(this.onNumLineTransparencyChange, this)); + this.numLineTransparency.on('inputleave', function(){ me.fireEvent('editcomplete', me);}); + this.lockedControls.push(this.numLineTransparency); + this.btnRotate270 = new Common.UI.Button({ parentEl: $('#shape-button-270', me.$el), cls: 'btn-toolbar', diff --git a/apps/documenteditor/main/resources/less/rightmenu.less b/apps/documenteditor/main/resources/less/rightmenu.less index 0fbbfb47aa..60ffe009b3 100644 --- a/apps/documenteditor/main/resources/less/rightmenu.less +++ b/apps/documenteditor/main/resources/less/rightmenu.less @@ -111,7 +111,7 @@ } &#id-shape-settings { - #shape-panel-transparent-fill { + #shape-panel-transparent-fill, #shape-line-panel-transparent { width: 100%; .header { @@ -123,7 +123,7 @@ margin-top: 3px; } - #shape-spin-transparency { + #shape-spin-transparency, #shape-line-spin-transparency { display: inline-block; float: right; @@ -132,7 +132,7 @@ } } - #shape-slider-transparency { + #shape-slider-transparency, #shape-line-slider-transparency { display: inline-block; margin: 0 4px; vertical-align: middle; From 983df7baa34e050aed623b7091b69e0eaf760b6f Mon Sep 17 00:00:00 2001 From: OVSharova Date: Mon, 20 Mar 2023 11:04:44 +0300 Subject: [PATCH 2/7] add items to textArt menu --- .../app/template/TextArtSettings.template | 13 +++ .../main/app/view/ShapeSettings.js | 5 +- .../main/app/view/TextArtSettings.js | 91 ++++++++++++++++++- .../main/resources/less/rightmenu.less | 2 +- 4 files changed, 108 insertions(+), 3 deletions(-) diff --git a/apps/documenteditor/main/app/template/TextArtSettings.template b/apps/documenteditor/main/app/template/TextArtSettings.template index f33e1ab9c7..edaaa46e43 100644 --- a/apps/documenteditor/main/app/template/TextArtSettings.template +++ b/apps/documenteditor/main/app/template/TextArtSettings.template @@ -119,6 +119,19 @@
+ + + +
+ +
+ +
+ +
+
+
+ diff --git a/apps/documenteditor/main/app/view/ShapeSettings.js b/apps/documenteditor/main/app/view/ShapeSettings.js index 8a32bf1731..870ffa5966 100644 --- a/apps/documenteditor/main/app/view/ShapeSettings.js +++ b/apps/documenteditor/main/app/view/ShapeSettings.js @@ -605,6 +605,7 @@ define([ stroke.put_color(Common.Utils.ThemeColor.getRgbColor(Common.Utils.ThemeColor.colorValue2EffectId(this.BorderColor.Color))); stroke.asc_putPrstDash(this.BorderType); stroke.put_width(this._pt2mm(this.BorderSize)); + stroke.put_transparent(this._state.LineTransparency); } props.put_stroke(stroke); this.imgprops.put_ShapeProperties(props); @@ -655,6 +656,7 @@ define([ stroke.put_color(Common.Utils.ThemeColor.getRgbColor(this.BorderColor.Color)); stroke.put_width(this._pt2mm(this.BorderSize)); stroke.asc_putPrstDash(this.BorderType); + stroke.put_transparent(this._state.LineTransparency); } props.put_stroke(stroke); this.imgprops.put_ShapeProperties(props); @@ -675,6 +677,7 @@ define([ stroke.put_color(Common.Utils.ThemeColor.getRgbColor(this.BorderColor.Color)); stroke.put_width(this._pt2mm(this.BorderSize)); stroke.asc_putPrstDash(this.BorderType); + stroke.put_transparent(this._state.LineTransparency); } props.put_stroke(stroke); this.imgprops.put_ShapeProperties(props); @@ -1107,7 +1110,7 @@ define([ strokeType = stroke.get_type(), borderType, update = (this._state.StrokeColor == 'transparent' && this.BorderColor.Color !== 'transparent'); // border color was changed for shape without line and then shape was reselected (or apply other settings) - var transparency = stroke.get_transparent(); + transparency = stroke.get_transparent(); if ( Math.abs(this._state.LineTransparency-transparency)>0.001 || Math.abs(this.numLineTransparency.getNumberValue()-transparency)>0.001 || (this._state.LineTransparency===null || transparency===null)&&(this._state.LineTransparency!==transparency || this.numLineTransparency.getNumberValue()!==transparency)) { diff --git a/apps/documenteditor/main/app/view/TextArtSettings.js b/apps/documenteditor/main/app/view/TextArtSettings.js index 7c86cdec48..14c6ec5b7a 100644 --- a/apps/documenteditor/main/app/view/TextArtSettings.js +++ b/apps/documenteditor/main/app/view/TextArtSettings.js @@ -125,7 +125,7 @@ define([ this.FillColorContainer = $('#textart-panel-color-fill'); this.FillGradientContainer = $('#textart-panel-gradient-fill'); this.TransparencyContainer = $('#textart-panel-transparent-fill'); - + this.LineTransparencyContainer = $('#textart-line-panel-transparent'); this.TransformSettings = $('.textart-transform'); $(window).on('resize', _.bind(this.onWindowResize, this)); @@ -469,6 +469,7 @@ define([ stroke.put_color(Common.Utils.ThemeColor.getRgbColor(Common.Utils.ThemeColor.colorValue2EffectId(this.BorderColor.Color))); stroke.asc_putPrstDash(this.BorderType); stroke.put_width(this._pt2mm(this.BorderSize)); + stroke.put_transparent(this._state.LineTransparency); } props.asc_putLine(stroke); this.shapeprops.put_TextArtProperties(props); @@ -519,6 +520,7 @@ define([ stroke.put_color(Common.Utils.ThemeColor.getRgbColor(this.BorderColor.Color)); stroke.put_width(this._pt2mm(this.BorderSize)); stroke.asc_putPrstDash(this.BorderType); + stroke.put_transparent(this._state.LineTransparency); } props.asc_putLine(stroke); this.shapeprops.put_TextArtProperties(props); @@ -539,6 +541,7 @@ define([ stroke.put_color(Common.Utils.ThemeColor.getRgbColor(this.BorderColor.Color)); stroke.put_width(this._pt2mm(this.BorderSize)); stroke.asc_putPrstDash(this.BorderType); + stroke.put_transparent(this._state.LineTransparency); } props.asc_putLine(stroke); this.shapeprops.put_TextArtProperties(props); @@ -547,6 +550,52 @@ define([ this.fireEvent('editcomplete', this); }, + onNumLineTransparencyChange: function(field, newValue, oldValue, eOpts){ + this.sldrLineTransparency.setValue(field.getNumberValue(), true); + if (this.api) { + var num = field.getNumberValue(); + var props = new Asc.asc_TextArtProperties(); + var stroke = new Asc.asc_CStroke(); + stroke.put_transparent(num * 2.55); + props.asc_putLine(stroke); + this.shapeprops.put_TextArtProperties(props); + this.api.ImgApply(this.imgprops); + } + }, + + onLineTransparencyChange: function(field, newValue, oldValue){ + this._sliderLineChanged = newValue; + this.numLineTransparency.setValue(newValue, true); + + if (this._sendLineUndoPoint) { + this.api.setStartPointHistory(); + this._sendLineUndoPoint = false; + this.updatesliderline = setInterval(_.bind(this._transparencyLineApplyFunc, this), 100); + } + }, + + onLineTransparencyChangeComplete: function(field, newValue, oldValue){ + clearInterval(this.updatesliderline); + this._sliderLineChanged = newValue; + if (!this._sendLineUndoPoint) { // start point was added + this.api.setEndPointHistory(); + this._transparencyLineApplyFunc(); + } + this._sendLineUndoPoint = true; + }, + + _transparencyLineApplyFunc: function() { + if (this._sliderLineChanged!==undefined) { + var props = new Asc.asc_TextArtProperties(); + var stroke = new Asc.asc_CStroke(); + stroke.put_transparent(this._sliderLineChanged * 2.55); + props.asc_putLine(stroke); + this.shapeprops.put_TextArtProperties(props); + this.api.ImgApply(this.imgprops); + this._sliderLineChanged = undefined; + } + }, + ChangeSettings: function(props) { if (this.imgprops==null) { this.imgprops = new Asc.asc_CImgProperty(); @@ -721,6 +770,16 @@ define([ update = (this._state.StrokeColor == 'transparent' && this.BorderColor.Color !== 'transparent'); // border color was changed for shape without line and then shape was reselected (or apply other settings) if (stroke) { + var transparency = stroke.get_transparent(); + if ( Math.abs(this._state.LineTransparency-transparency)>0.001 || Math.abs(this.numLineTransparency.getNumberValue()-transparency)>0.001 || + (this._state.LineTransparency===null || transparency===null)&&(this._state.LineTransparency!==transparency || this.numLineTransparency.getNumberValue()!==transparency)) { + + if (transparency !== undefined) { + this.sldrLineTransparency.setValue((transparency===null) ? 100 : transparency/255*100, true); + this.numLineTransparency.setValue(this.sldrLineTransparency.getValue(), true); + } + this._state.LineTransparency=transparency; + } if ( strokeType == Asc.c_oAscStrokeType.STROKE_COLOR ) { color = stroke.get_color(); if (color) { @@ -1122,6 +1181,36 @@ define([ this.cmbBorderType.setValue(this.BorderType); this.lockedControls.push(this.cmbBorderType); + this.numLineTransparency = new Common.UI.MetricSpinner({ + el: $('#textart-line-spin-transparency'), + step: 1, + width: 62, + value: '100 %', + defaultUnit : "%", + maxValue: 100, + minValue: 0, + dataHint: '1', + dataHintDirection: 'bottom', + dataHintOffset: 'big' + }); + this.numLineTransparency.on('change', _.bind(this.onNumLineTransparencyChange, this)); + this.numLineTransparency.on('inputleave', function(){ me.fireEvent('editcomplete', me);});/**/ + this.lockedControls.push(this.numLineTransparency); + + this.sldrLineTransparency = new Common.UI.SingleSlider({ + el: $('#textart-line-slider-transparency'), + width: 75, + minValue: 0, + maxValue: 100, + value: 100 + }); + this.sldrLineTransparency.on('change', _.bind(this.onLineTransparencyChange, this)); + this.sldrLineTransparency.on('changecomplete', _.bind(this.onLineTransparencyChangeComplete, this)); + this.lockedControls.push(this.sldrLineTransparency); + + this.lockedControls.push($(this.el).find('#textart-lbl-transparency-start')); + this.lockedControls.push($(this.el).find('#textart-lbl-transparency-end')); + this.cmbTransform = new Common.UI.ComboDataView({ itemWidth: 50, itemHeight: 50, diff --git a/apps/documenteditor/main/resources/less/rightmenu.less b/apps/documenteditor/main/resources/less/rightmenu.less index 60ffe009b3..5f5c893f5e 100644 --- a/apps/documenteditor/main/resources/less/rightmenu.less +++ b/apps/documenteditor/main/resources/less/rightmenu.less @@ -281,7 +281,7 @@ } &#id-textart-settings { - #textart-spin-transparency { + #textart-spin-transparency, #textart-line-spin-transparency { display: inline-block; float: right; From 3bad7738ee612fd00c86176187e7d99a0e55605d Mon Sep 17 00:00:00 2001 From: OVSharova Date: Wed, 22 Mar 2023 14:23:59 +0300 Subject: [PATCH 3/7] DE add border transparent DE add border transparent add items to shape menu --- .../main/app/template/ShapeSettings.template | 13 +++ .../app/template/TextArtSettings.template | 13 +++ .../main/app/view/ShapeSettings.js | 95 ++++++++++++++++++- .../main/app/view/TextArtSettings.js | 92 +++++++++++++++++- .../main/resources/less/rightmenu.less | 8 +- 5 files changed, 215 insertions(+), 6 deletions(-) diff --git a/apps/documenteditor/main/app/template/ShapeSettings.template b/apps/documenteditor/main/app/template/ShapeSettings.template index 8cde82cf07..ca2e7d5723 100644 --- a/apps/documenteditor/main/app/template/ShapeSettings.template +++ b/apps/documenteditor/main/app/template/ShapeSettings.template @@ -142,6 +142,19 @@ + + +
+ +
+ +
+ +
+
+
+ +
diff --git a/apps/documenteditor/main/app/template/TextArtSettings.template b/apps/documenteditor/main/app/template/TextArtSettings.template index f33e1ab9c7..edaaa46e43 100644 --- a/apps/documenteditor/main/app/template/TextArtSettings.template +++ b/apps/documenteditor/main/app/template/TextArtSettings.template @@ -119,6 +119,19 @@
+ + + +
+ +
+ +
+ +
+
+
+ diff --git a/apps/documenteditor/main/app/view/ShapeSettings.js b/apps/documenteditor/main/app/view/ShapeSettings.js index a8d1cdd590..719f62cef8 100644 --- a/apps/documenteditor/main/app/view/ShapeSettings.js +++ b/apps/documenteditor/main/app/view/ShapeSettings.js @@ -77,6 +77,8 @@ define([ this.imgprops = null; this._sendUndoPoint = true; this._sliderChanged = false; + this._sendLineUndoPoint = true; + this._sliderLineChanged = false; this._texturearray = null; this.txtPt = Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt); @@ -144,6 +146,7 @@ define([ this.FillPatternContainer = $('#shape-panel-pattern-fill'); this.FillGradientContainer = $('#shape-panel-gradient-fill'); this.TransparencyContainer = $('#shape-panel-transparent-fill'); + this.LineTransparencyContainer = $('#shape-line-panel-transparent'); this.ShapeOnlySettings = $('.shape-only'); this.CanChangeType = $('.change-type'); this.RotationSettings = $('.shape-rotation'); @@ -602,6 +605,7 @@ define([ stroke.put_color(Common.Utils.ThemeColor.getRgbColor(Common.Utils.ThemeColor.colorValue2EffectId(this.BorderColor.Color))); stroke.asc_putPrstDash(this.BorderType); stroke.put_width(this._pt2mm(this.BorderSize)); + stroke.put_transparent(this._state.LineTransparency); } props.put_stroke(stroke); this.imgprops.put_ShapeProperties(props); @@ -652,6 +656,7 @@ define([ stroke.put_color(Common.Utils.ThemeColor.getRgbColor(this.BorderColor.Color)); stroke.put_width(this._pt2mm(this.BorderSize)); stroke.asc_putPrstDash(this.BorderType); + stroke.put_transparent(this._state.LineTransparency); } props.put_stroke(stroke); this.imgprops.put_ShapeProperties(props); @@ -672,6 +677,7 @@ define([ stroke.put_color(Common.Utils.ThemeColor.getRgbColor(this.BorderColor.Color)); stroke.put_width(this._pt2mm(this.BorderSize)); stroke.asc_putPrstDash(this.BorderType); + stroke.put_transparent(this._state.LineTransparency); } props.put_stroke(stroke); this.imgprops.put_ShapeProperties(props); @@ -680,6 +686,53 @@ define([ this.fireEvent('editcomplete', this); }, + onNumLineTransparencyChange: function(field, newValue, oldValue, eOpts){ + this.sldrLineTransparency.setValue(field.getNumberValue(), true); + if (this.api) { + var props = new Asc.asc_CShapeProperty(); + var stroke = new Asc.asc_CStroke(); + this._state.LineTransparency = field.getNumberValue() * 2.55; + stroke.put_transparent(this._state.LineTransparency); + props.put_stroke(stroke); + this.imgprops.put_ShapeProperties(props); + this.api.ImgApply(this.imgprops); + } + }, + + onLineTransparencyChange: function(field, newValue, oldValue){ + this._sliderLineChanged = newValue; + this.numLineTransparency.setValue(newValue, true); + if (this._sendLineUndoPoint) { + this.api.setStartPointHistory(); + this._sendLineUndoPoint = false; + this.updatesliderline = setInterval(_.bind(this._transparencyLineApplyFunc, this), 100); + } + }, + + onLineTransparencyChangeComplete: function(field, newValue, oldValue){ + clearInterval(this.updatesliderline); + this._sliderlineChanged = newValue; + if (!this._sendLineUndoPoint) { // start point was added + this.api.setEndPointHistory(); + this._transparencyLineApplyFunc(); + } + this._sendLineUndoPoint = true; + }, + + _transparencyLineApplyFunc: function() { + if (this._sliderLineChanged!==undefined) { + var props = new Asc.asc_CShapeProperty(); + var stroke = new Asc.asc_CStroke(); + this._state.LineTransparency = this._sliderLineChanged * 2.55; + stroke.put_transparent(this._state.LineTransparency); + props.put_stroke(stroke); + + this.imgprops.put_ShapeProperties(props); + this.api.ImgApply(this.imgprops); + this._sliderLineChanged = undefined; + } + }, + _ImgWrapStyleChanged: function(style) { if (!this.cmbWrapType) return; if (this._state.WrappingStyle!==style) { @@ -1058,8 +1111,18 @@ define([ strokeType = stroke.get_type(), borderType, update = (this._state.StrokeColor == 'transparent' && this.BorderColor.Color !== 'transparent'); // border color was changed for shape without line and then shape was reselected (or apply other settings) - if (stroke) { + transparency = stroke.get_transparent(); + if ( Math.abs(this._state.LineTransparency-transparency)>0.001 || Math.abs(this.numLineTransparency.getNumberValue()-transparency)>0.001 || + (this._state.LineTransparency===null || transparency===null)&&(this._state.LineTransparency!==transparency || this.numLineTransparency.getNumberValue()!==transparency)) { + + if (transparency !== undefined) { + this.sldrLineTransparency.setValue((transparency===null) ? 100 : transparency/255*100, true); + this.numLineTransparency.setValue(this.sldrLineTransparency.getValue(), true); + } + this._state.LineTransparency=transparency; + } + if ( strokeType == Asc.c_oAscStrokeType.STROKE_COLOR ) { color = stroke.get_color(); if (color) { @@ -1579,6 +1642,36 @@ define([ this.cmbBorderType.setValue(this.BorderType); this.lockedControls.push(this.cmbBorderType); + this.sldrLineTransparency = new Common.UI.SingleSlider({ + el: $('#shape-line-slider-transparency'), + width: 75, + minValue: 0, + maxValue: 100, + value: 100 + }); + this.sldrLineTransparency.on('change', _.bind(this.onLineTransparencyChange, this)); + this.sldrLineTransparency.on('changecomplete', _.bind(this.onLineTransparencyChangeComplete, this));/**/ + this.lockedControls.push(this.sldrLineTransparency); + + this.lockedControls.push( $(this.el).find('#shape-line-lbl-transparency-start')); + this.lockedControls.push( $(this.el).find('#shape-line-lbl-transparency-end')); + + this.numLineTransparency = new Common.UI.MetricSpinner({ + el: $('#shape-line-spin-transparency'), + step: 1, + width: 62, + value: '100 %', + defaultUnit : "%", + maxValue: 100, + minValue: 0, + dataHint: '1', + dataHintDirection: 'bottom', + dataHintOffset: 'big' + }); + this.numLineTransparency.on('change', _.bind(this.onNumLineTransparencyChange, this)); + this.numLineTransparency.on('inputleave', function(){ me.fireEvent('editcomplete', me);}); + this.lockedControls.push(this.numLineTransparency); + this.btnRotate270 = new Common.UI.Button({ parentEl: $('#shape-button-270', me.$el), cls: 'btn-toolbar', diff --git a/apps/documenteditor/main/app/view/TextArtSettings.js b/apps/documenteditor/main/app/view/TextArtSettings.js index 7c86cdec48..15364884bd 100644 --- a/apps/documenteditor/main/app/view/TextArtSettings.js +++ b/apps/documenteditor/main/app/view/TextArtSettings.js @@ -125,7 +125,7 @@ define([ this.FillColorContainer = $('#textart-panel-color-fill'); this.FillGradientContainer = $('#textart-panel-gradient-fill'); this.TransparencyContainer = $('#textart-panel-transparent-fill'); - + this.LineTransparencyContainer = $('#textart-line-panel-transparent'); this.TransformSettings = $('.textart-transform'); $(window).on('resize', _.bind(this.onWindowResize, this)); @@ -469,6 +469,7 @@ define([ stroke.put_color(Common.Utils.ThemeColor.getRgbColor(Common.Utils.ThemeColor.colorValue2EffectId(this.BorderColor.Color))); stroke.asc_putPrstDash(this.BorderType); stroke.put_width(this._pt2mm(this.BorderSize)); + stroke.put_transparent(this._state.LineTransparency); } props.asc_putLine(stroke); this.shapeprops.put_TextArtProperties(props); @@ -519,6 +520,7 @@ define([ stroke.put_color(Common.Utils.ThemeColor.getRgbColor(this.BorderColor.Color)); stroke.put_width(this._pt2mm(this.BorderSize)); stroke.asc_putPrstDash(this.BorderType); + stroke.put_transparent(this._state.LineTransparency); } props.asc_putLine(stroke); this.shapeprops.put_TextArtProperties(props); @@ -539,6 +541,7 @@ define([ stroke.put_color(Common.Utils.ThemeColor.getRgbColor(this.BorderColor.Color)); stroke.put_width(this._pt2mm(this.BorderSize)); stroke.asc_putPrstDash(this.BorderType); + stroke.put_transparent(this._state.LineTransparency); } props.asc_putLine(stroke); this.shapeprops.put_TextArtProperties(props); @@ -547,6 +550,53 @@ define([ this.fireEvent('editcomplete', this); }, + onNumLineTransparencyChange: function(field, newValue, oldValue, eOpts){ + this.sldrLineTransparency.setValue(field.getNumberValue(), true); + if (this.api) { + this._state.LineTransparency = field.getNumberValue() * 2.55; + var props = new Asc.asc_TextArtProperties(); + var stroke = new Asc.asc_CStroke(); + stroke.put_transparent(this._state.LineTransparency); + props.asc_putLine(stroke); + this.shapeprops.put_TextArtProperties(props); + this.api.ImgApply(this.imgprops); + } + }, + + onLineTransparencyChange: function(field, newValue, oldValue){ + this._sliderLineChanged = newValue; + this.numLineTransparency.setValue(newValue, true); + + if (this._sendLineUndoPoint) { + this.api.setStartPointHistory(); + this._sendLineUndoPoint = false; + this.updatesliderline = setInterval(_.bind(this._transparencyLineApplyFunc, this), 100); + } + }, + + onLineTransparencyChangeComplete: function(field, newValue, oldValue){ + clearInterval(this.updatesliderline); + this._sliderLineChanged = newValue; + if (!this._sendLineUndoPoint) { // start point was added + this.api.setEndPointHistory(); + this._transparencyLineApplyFunc(); + } + this._sendLineUndoPoint = true; + }, + + _transparencyLineApplyFunc: function() { + if (this._sliderLineChanged!==undefined) { + var props = new Asc.asc_TextArtProperties(); + var stroke = new Asc.asc_CStroke(); + this._state.LineTransparency = this._sliderLineChanged * 2.55; + stroke.put_transparent(this._state.LineTransparency); + props.asc_putLine(stroke); + this.shapeprops.put_TextArtProperties(props); + this.api.ImgApply(this.imgprops); + this._sliderLineChanged = undefined; + } + }, + ChangeSettings: function(props) { if (this.imgprops==null) { this.imgprops = new Asc.asc_CImgProperty(); @@ -721,6 +771,16 @@ define([ update = (this._state.StrokeColor == 'transparent' && this.BorderColor.Color !== 'transparent'); // border color was changed for shape without line and then shape was reselected (or apply other settings) if (stroke) { + var transparency = stroke.get_transparent(); + if ( Math.abs(this._state.LineTransparency-transparency)>0.001 || Math.abs(this.numLineTransparency.getNumberValue()-transparency)>0.001 || + (this._state.LineTransparency===null || transparency===null)&&(this._state.LineTransparency!==transparency || this.numLineTransparency.getNumberValue()!==transparency)) { + + if (transparency !== undefined) { + this.sldrLineTransparency.setValue((transparency===null) ? 100 : transparency/255*100, true); + this.numLineTransparency.setValue(this.sldrLineTransparency.getValue(), true); + } + this._state.LineTransparency=transparency; + } if ( strokeType == Asc.c_oAscStrokeType.STROKE_COLOR ) { color = stroke.get_color(); if (color) { @@ -1122,6 +1182,36 @@ define([ this.cmbBorderType.setValue(this.BorderType); this.lockedControls.push(this.cmbBorderType); + this.numLineTransparency = new Common.UI.MetricSpinner({ + el: $('#textart-line-spin-transparency'), + step: 1, + width: 62, + value: '100 %', + defaultUnit : "%", + maxValue: 100, + minValue: 0, + dataHint: '1', + dataHintDirection: 'bottom', + dataHintOffset: 'big' + }); + this.numLineTransparency.on('change', _.bind(this.onNumLineTransparencyChange, this)); + this.numLineTransparency.on('inputleave', function(){ me.fireEvent('editcomplete', me);});/**/ + this.lockedControls.push(this.numLineTransparency); + + this.sldrLineTransparency = new Common.UI.SingleSlider({ + el: $('#textart-line-slider-transparency'), + width: 75, + minValue: 0, + maxValue: 100, + value: 100 + }); + this.sldrLineTransparency.on('change', _.bind(this.onLineTransparencyChange, this)); + this.sldrLineTransparency.on('changecomplete', _.bind(this.onLineTransparencyChangeComplete, this)); + this.lockedControls.push(this.sldrLineTransparency); + + this.lockedControls.push($(this.el).find('#textart-lbl-transparency-start')); + this.lockedControls.push($(this.el).find('#textart-lbl-transparency-end')); + this.cmbTransform = new Common.UI.ComboDataView({ itemWidth: 50, itemHeight: 50, diff --git a/apps/documenteditor/main/resources/less/rightmenu.less b/apps/documenteditor/main/resources/less/rightmenu.less index 0fbbfb47aa..5f5c893f5e 100644 --- a/apps/documenteditor/main/resources/less/rightmenu.less +++ b/apps/documenteditor/main/resources/less/rightmenu.less @@ -111,7 +111,7 @@ } &#id-shape-settings { - #shape-panel-transparent-fill { + #shape-panel-transparent-fill, #shape-line-panel-transparent { width: 100%; .header { @@ -123,7 +123,7 @@ margin-top: 3px; } - #shape-spin-transparency { + #shape-spin-transparency, #shape-line-spin-transparency { display: inline-block; float: right; @@ -132,7 +132,7 @@ } } - #shape-slider-transparency { + #shape-slider-transparency, #shape-line-slider-transparency { display: inline-block; margin: 0 4px; vertical-align: middle; @@ -281,7 +281,7 @@ } &#id-textart-settings { - #textart-spin-transparency { + #textart-spin-transparency, #textart-line-spin-transparency { display: inline-block; float: right; From a2c63f5f240b268a281682c42b8db746ae859708 Mon Sep 17 00:00:00 2001 From: OVSharova Date: Thu, 23 Mar 2023 04:42:06 +0300 Subject: [PATCH 4/7] PE add border transparent --- .../main/app/template/ShapeSettings.template | 13 +++ .../app/template/TextArtSettings.template | 13 +++ .../main/app/view/ShapeSettings.js | 87 ++++++++++++++++++ .../main/app/view/TextArtSettings.js | 92 +++++++++++++++++++ .../main/resources/less/rightmenu.less | 4 +- 5 files changed, 207 insertions(+), 2 deletions(-) diff --git a/apps/presentationeditor/main/app/template/ShapeSettings.template b/apps/presentationeditor/main/app/template/ShapeSettings.template index 87464cb905..70e1eac369 100644 --- a/apps/presentationeditor/main/app/template/ShapeSettings.template +++ b/apps/presentationeditor/main/app/template/ShapeSettings.template @@ -134,6 +134,19 @@ + + +
+ +
+ +
+ +
+
+
+ +
diff --git a/apps/presentationeditor/main/app/template/TextArtSettings.template b/apps/presentationeditor/main/app/template/TextArtSettings.template index 8956defd10..3edf0a7d77 100644 --- a/apps/presentationeditor/main/app/template/TextArtSettings.template +++ b/apps/presentationeditor/main/app/template/TextArtSettings.template @@ -160,6 +160,19 @@
+ + +
+ +
+ +
+ +
+
+
+ +
diff --git a/apps/presentationeditor/main/app/view/ShapeSettings.js b/apps/presentationeditor/main/app/view/ShapeSettings.js index e532ac8881..4be9e35a0a 100644 --- a/apps/presentationeditor/main/app/view/ShapeSettings.js +++ b/apps/presentationeditor/main/app/view/ShapeSettings.js @@ -607,6 +607,7 @@ define([ stroke.put_color(Common.Utils.ThemeColor.getRgbColor(Common.Utils.ThemeColor.colorValue2EffectId(this.BorderColor.Color))); stroke.asc_putPrstDash(this.BorderType); stroke.put_width(this._pt2mm(this.BorderSize)); + stroke.put_transparent(this._state.LineTransparency); } props.put_stroke(stroke); this.api.ShapeApply(props); @@ -656,6 +657,7 @@ define([ stroke.put_color(Common.Utils.ThemeColor.getRgbColor(this.BorderColor.Color)); stroke.put_width(this._pt2mm(this.BorderSize)); stroke.asc_putPrstDash(this.BorderType); + stroke.put_transparent(this._state.LineTransparency); } props.put_stroke(stroke); this.api.ShapeApply(props); @@ -675,6 +677,7 @@ define([ stroke.put_color(Common.Utils.ThemeColor.getRgbColor(this.BorderColor.Color)); stroke.put_width(this._pt2mm(this.BorderSize)); stroke.asc_putPrstDash(this.BorderType); + stroke.put_transparent(this._state.LineTransparency); } props.put_stroke(stroke); this.api.ShapeApply(props); @@ -682,6 +685,50 @@ define([ this.fireEvent('editcomplete', this); }, + onNumLineTransparencyChange: function(field, newValue, oldValue, eOpts){ + this.sldrLineTransparency.setValue(field.getNumberValue(), true); + if (this.api) { + var props = new Asc.asc_CShapeProperty(); + var stroke = new Asc.asc_CStroke(); + this._state.LineTransparency = field.getNumberValue() * 2.55; + stroke.put_transparent(this._state.LineTransparency); + props.put_stroke(stroke); + this.api.ShapeApply(props); + } + }, + + onLineTransparencyChange: function(field, newValue, oldValue){ + this._sliderLineChanged = newValue; + this.numLineTransparency.setValue(newValue, true); + if (this._sendLineUndoPoint) { + this.api.setStartPointHistory(); + this._sendLineUndoPoint = false; + this.updatesliderline = setInterval(_.bind(this._transparencyLineApplyFunc, this), 100); + } + }, + + onLineTransparencyChangeComplete: function(field, newValue, oldValue){ + clearInterval(this.updatesliderline); + this._sliderlineChanged = newValue; + if (!this._sendLineUndoPoint) { // start point was added + this.api.setEndPointHistory(); + this._transparencyLineApplyFunc(); + } + this._sendLineUndoPoint = true; + }, + + _transparencyLineApplyFunc: function() { + if (this._sliderLineChanged!==undefined) { + var props = new Asc.asc_CShapeProperty(); + var stroke = new Asc.asc_CStroke(); + this._state.LineTransparency = this._sliderLineChanged * 2.55; + stroke.put_transparent(this._state.LineTransparency); + props.put_stroke(stroke); + this.api.ShapeApply(props); + this._sliderLineChanged = undefined; + } + }, + setImageUrl: function(url, token) { if (this.BlipFillType !== null) { var props = new Asc.asc_CShapeProperty(); @@ -990,6 +1037,16 @@ define([ update = (this._state.StrokeColor == 'transparent' && this.BorderColor.Color !== 'transparent'); // border color was changed for shape without line and then shape was reselected (or apply other settings) if (stroke) { + transparency = stroke.get_transparent(); + if ( Math.abs(this._state.LineTransparency-transparency)>0.001 || Math.abs(this.numLineTransparency.getNumberValue()-transparency)>0.001 || + (this._state.LineTransparency===null || transparency===null)&&(this._state.LineTransparency!==transparency || this.numLineTransparency.getNumberValue()!==transparency)) { + + if (transparency !== undefined) { + this.sldrLineTransparency.setValue((transparency===null) ? 100 : transparency/255*100, true); + this.numLineTransparency.setValue(this.sldrLineTransparency.getValue(), true); + } + this._state.LineTransparency=transparency; + } if ( strokeType == Asc.c_oAscStrokeType.STROKE_COLOR ) { color = stroke.get_color(); if (color) { @@ -1486,6 +1543,36 @@ define([ this.cmbBorderType.setValue(this.BorderType); this.lockedControls.push(this.cmbBorderType); + this.numLineTransparency = new Common.UI.MetricSpinner({ + el: $('#shape-line-spin-transparency'), + step: 1, + width: 62, + value: '100 %', + defaultUnit : "%", + maxValue: 100, + minValue: 0, + dataHint: '1', + dataHintDirection: 'bottom', + dataHintOffset: 'big' + }); + this.numLineTransparency.on('change', _.bind(this.onNumLineTransparencyChange, this)); + this.numLineTransparency.on('inputleave', function(){ me.fireEvent('editcomplete', me);}); + this.lockedControls.push(this.numLineTransparency); + + this.sldrLineTransparency = new Common.UI.SingleSlider({ + el: $('#shape-line-slider-transparency'), + width: 75, + minValue: 0, + maxValue: 100, + value: 100 + }); + this.sldrLineTransparency.on('change', _.bind(this.onLineTransparencyChange, this)); + this.sldrLineTransparency.on('changecomplete', _.bind(this.onLineTransparencyChangeComplete, this)); + this.lockedControls.push(this.sldrLineTransparency); + + this.lockedControls.push( $(this.el).find('#shape-line-lbl-transparency-start')); + this.lockedControls.push( $(this.el).find('#shape-line-lbl-transparency-end')); + this.btnChangeShape = new Common.UI.Button({ parentEl: $('#shape-btn-change'), cls: 'btn-icon-default', diff --git a/apps/presentationeditor/main/app/view/TextArtSettings.js b/apps/presentationeditor/main/app/view/TextArtSettings.js index 4ba490a843..3dcb1ea205 100644 --- a/apps/presentationeditor/main/app/view/TextArtSettings.js +++ b/apps/presentationeditor/main/app/view/TextArtSettings.js @@ -594,6 +594,7 @@ define([ stroke.put_color(Common.Utils.ThemeColor.getRgbColor(Common.Utils.ThemeColor.colorValue2EffectId(this.BorderColor.Color))); stroke.asc_putPrstDash(this.BorderType); stroke.put_width(this._pt2mm(this.BorderSize)); + stroke.put_transparent(this._state.LineTransparency); } props.asc_putLine(stroke); this.shapeprops.put_TextArtProperties(props); @@ -644,6 +645,7 @@ define([ stroke.put_color(Common.Utils.ThemeColor.getRgbColor(this.BorderColor.Color)); stroke.put_width(this._pt2mm(this.BorderSize)); stroke.asc_putPrstDash(this.BorderType); + stroke.put_transparent(this._state.LineTransparency); } props.asc_putLine(stroke); this.shapeprops.put_TextArtProperties(props); @@ -664,6 +666,7 @@ define([ stroke.put_color(Common.Utils.ThemeColor.getRgbColor(this.BorderColor.Color)); stroke.put_width(this._pt2mm(this.BorderSize)); stroke.asc_putPrstDash(this.BorderType); + stroke.put_transparent(this._state.LineTransparency); } props.asc_putLine(stroke); this.shapeprops.put_TextArtProperties(props); @@ -672,6 +675,53 @@ define([ this.fireEvent('editcomplete', this); }, + onNumLineTransparencyChange: function(field, newValue, oldValue, eOpts){ + this.sldrLineTransparency.setValue(field.getNumberValue(), true); + if (this.api) { + this._state.LineTransparency = field.getNumberValue() * 2.55; + var props = new Asc.asc_TextArtProperties(); + var stroke = new Asc.asc_CStroke(); + stroke.put_transparent(this._state.LineTransparency); + props.asc_putLine(stroke); + this.shapeprops.put_TextArtProperties(props); + this.api.ShapeApply(this.shapeprops); + } + }, + + onLineTransparencyChange: function(field, newValue, oldValue){ + this._sliderChangedLine = newValue; + this.numLineTransparency.setValue(newValue, true); + + if (this._sendLineUndoPoint) { + this.api.setStartPointHistory(); + this._sendLineUndoPoint = false; + this.updatesliderline = setInterval(_.bind(this._transparencyLineApplyFunc, this), 100); + } + }, + + onLineTransparencyChangeComplete: function(field, newValue, oldValue){ + clearInterval(this.updatesliderline); + this._sliderChangedLine = newValue; + if (!this._sendLineUndoPoint) { // start point was added + this.api.setEndPointHistory(); + this._transparencyLineApplyFunc(); + } + this._sendLineUndoPoint = true; + }, + + _transparencyLineApplyFunc: function() { + if (this._sliderChangedLine!==undefined) { + var props = new Asc.asc_TextArtProperties(); + var stroke = new Asc.asc_CStroke(); + this._state.LineTransparency = this._sliderChangedLine * 2.55; + stroke.put_transparent(this._state.LineTransparency); + props.asc_putLine(stroke); + this.shapeprops.put_TextArtProperties(props); + this.api.ShapeApply(this.shapeprops); + this._sliderChangedLine = undefined; + } + }, + insertFromUrl: function() { var me = this; (new Common.Views.ImageFromUrlDialog({ @@ -924,6 +974,17 @@ define([ update = (this._state.StrokeColor == 'transparent' && this.BorderColor.Color !== 'transparent'); // border color was changed for shape without line and then shape was reselected (or apply other settings) if (stroke) { + var transparency = stroke.get_transparent(); + if ( Math.abs(this._state.LineTransparency-transparency)>0.001 || Math.abs(this.numLineTransparency.getNumberValue()-transparency)>0.001 || + (this._state.LineTransparency===null || transparency===null)&&(this._state.LineTransparency!==transparency || this.numLineTransparency.getNumberValue()!==transparency)) { + + if (transparency !== undefined) { + this.sldrLineTransparency.setValue((transparency===null) ? 100 : transparency/255*100, true); + this.numLineTransparency.setValue(this.sldrLineTransparency.getValue(), true); + } + this._state.LineTransparency=transparency; + } + if ( strokeType == Asc.c_oAscStrokeType.STROKE_COLOR ) { color = stroke.get_color(); if (color) { @@ -1442,6 +1503,37 @@ define([ this.cmbBorderType.setValue(this.BorderType); this.lockedControls.push(this.cmbBorderType); + + this.numLineTransparency = new Common.UI.MetricSpinner({ + el: $('#textart-line-spin-transparency'), + step: 1, + width: 62, + value: '100 %', + defaultUnit : "%", + maxValue: 100, + minValue: 0, + dataHint: '1', + dataHintDirection: 'bottom', + dataHintOffset: 'big' + }); + this.numLineTransparency.on('change', _.bind(this.onNumLineTransparencyChange, this)); + this.numLineTransparency.on('inputleave', function(){ me.fireEvent('editcomplete', me);}); + this.lockedControls.push(this.numLineTransparency); + + this.sldrLineTransparency = new Common.UI.SingleSlider({ + el: $('#textart-line-slider-transparency'), + width: 75, + minValue: 0, + maxValue: 100, + value: 100 + }); + this.sldrLineTransparency.on('change', _.bind(this.onLineTransparencyChange, this)); + this.sldrLineTransparency.on('changecomplete', _.bind(this.onLineTransparencyChangeComplete, this)); + this.lockedControls.push(this.sldrTransparency); + + this.lockedControls.push($(this.el).find('#textart-lbl-transparency-start')); + this.lockedControls.push( $(this.el).find('#textart-lbl-transparency-end')); + this.cmbTransform = new Common.UI.ComboDataView({ itemWidth: 50, itemHeight: 50, diff --git a/apps/presentationeditor/main/resources/less/rightmenu.less b/apps/presentationeditor/main/resources/less/rightmenu.less index ce923a72fe..59b4494a98 100644 --- a/apps/presentationeditor/main/resources/less/rightmenu.less +++ b/apps/presentationeditor/main/resources/less/rightmenu.less @@ -75,7 +75,7 @@ } &#id-shape-settings { - #shape-spin-transparency { + #shape-spin-transparency, #shape-line-spin-transparency { display: inline-block; float: right; @@ -242,7 +242,7 @@ } &#id-textart-settings { - #textart-spin-transparency { + #textart-spin-transparency, #textart-line-spin-transparency { display: inline-block; float: right; From 78a51ad8fafd38bdec84603668da3fad29e51908 Mon Sep 17 00:00:00 2001 From: OVSharova Date: Thu, 23 Mar 2023 05:50:57 +0300 Subject: [PATCH 5/7] SSE add border transparent --- .../main/app/template/ShapeSettings.template | 13 +++ .../app/template/TextArtSettings.template | 13 +++ .../main/app/view/ShapeSettings.js | 90 ++++++++++++++++++ .../main/app/view/TextArtSettings.js | 92 ++++++++++++++++++- .../main/resources/less/rightmenu.less | 4 +- 5 files changed, 209 insertions(+), 3 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/template/ShapeSettings.template b/apps/spreadsheeteditor/main/app/template/ShapeSettings.template index 4e01cc82c4..1c383cbfd0 100644 --- a/apps/spreadsheeteditor/main/app/template/ShapeSettings.template +++ b/apps/spreadsheeteditor/main/app/template/ShapeSettings.template @@ -142,6 +142,19 @@ + + +
+ +
+ +
+ +
+
+
+ +
diff --git a/apps/spreadsheeteditor/main/app/template/TextArtSettings.template b/apps/spreadsheeteditor/main/app/template/TextArtSettings.template index ac22734b72..89423ac41c 100644 --- a/apps/spreadsheeteditor/main/app/template/TextArtSettings.template +++ b/apps/spreadsheeteditor/main/app/template/TextArtSettings.template @@ -160,6 +160,19 @@ + + +
+ +
+ +
+ +
+
+
+ +
diff --git a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js index 6e4a6f05a8..eb41682968 100644 --- a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js +++ b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js @@ -595,6 +595,7 @@ define([ stroke.asc_putColor(Common.Utils.ThemeColor.getRgbColor(Common.Utils.ThemeColor.colorValue2EffectId(this.BorderColor.Color))); stroke.asc_putPrstDash(this.BorderType); stroke.asc_putWidth(this._pt2mm(this.BorderSize)); + stroke.asc_putTransparent(this._state.LineTransparency); } props.asc_putStroke(stroke); this.imgprops.asc_putShapeProperties(props); @@ -645,6 +646,7 @@ define([ stroke.put_color(Common.Utils.ThemeColor.getRgbColor(this.BorderColor.Color)); stroke.put_width(this._pt2mm(this.BorderSize)); stroke.asc_putPrstDash(this.BorderType); + stroke.asc_putTransparent(this._state.LineTransparency); } props.put_stroke(stroke); this.imgprops.asc_putShapeProperties(props); @@ -665,6 +667,7 @@ define([ stroke.asc_putColor(Common.Utils.ThemeColor.getRgbColor(this.BorderColor.Color)); stroke.asc_putWidth(this._pt2mm(this.BorderSize)); stroke.asc_putPrstDash(this.BorderType); + stroke.asc_putTransparent(this._state.LineTransparency); } props.asc_putStroke(stroke); this.imgprops.asc_putShapeProperties(props); @@ -673,6 +676,53 @@ define([ Common.NotificationCenter.trigger('edit:complete', this); }, + onNumLineTransparencyChange: function(field, newValue, oldValue, eOpts){ + this.sldrTransparency.setValue(field.getNumberValue(), true); + if (this.api) { + this._state.LineTransparency = field.getNumberValue() * 2.55; + var props = new Asc.asc_CShapeProperty(); + var stroke = new Asc.asc_CStroke(); + stroke.asc_putTransparent(this._state.LineTransparency); + props.asc_putStroke(stroke); + this.imgprops.asc_putShapeProperties(props); + this.api.asc_setGraphicObjectProps(this.imgprops); + } + }, + + onLineTransparencyChange: function(field, newValue, oldValue){ + this._sliderChangedLine = newValue; + this.numLineTransparency.setValue(newValue, true); + + if (this._sendLineUndoPoint) { + this.api.setStartPointHistory(); + this._sendLineUndoPoint = false; + this.updatesliderline = setInterval(_.bind(this._transparencyLineApplyFunc, this), 100); + } + }, + + onLineTransparencyChangeComplete: function(field, newValue, oldValue){ + clearInterval(this.updatesliderline); + this._sliderChangedLine = newValue; + if (!this._sendLineUndoPoint) { // start point was added + this.api.setEndPointHistory(); + this._transparencyLineApplyFunc(); + } + this._sendLineUndoPoint = true; + }, + + _transparencyLineApplyFunc: function() { + if (this._sliderChangedLine!==undefined) { + var props = new Asc.asc_CShapeProperty(); + var stroke = new Asc.asc_CStroke(); + this._state.LineTransparency = this._sliderChangedLine * 2.55; + stroke.asc_putTransparent(this._state.LineTransparency); + props.asc_putStroke(stroke); + this.imgprops.asc_putShapeProperties(props); + this.api.asc_setGraphicObjectProps(this.imgprops); + this._sliderChangedLine = undefined; + } + }, + setImageUrl: function(url, token) { if (this.BlipFillType !== null) { var props = new Asc.asc_CShapeProperty(); @@ -986,6 +1036,16 @@ define([ update = (this._state.StrokeColor == 'transparent' && this.BorderColor.Color !== 'transparent'); // border color was changed for shape without line and then shape was reselected (or apply other settings) if (stroke) { + transparency = stroke.asc_getTransparent(); + if ( Math.abs(this._state.LineTransparency-transparency)>0.001 || Math.abs(this.numLineTransparency.getNumberValue()-transparency)>0.001 || + (this._state.LineTransparency===null || transparency===null)&&(this._state.LineTransparency!==transparency || this.numLineTransparency.getNumberValue()!==transparency)) { + + if (transparency !== undefined) { + this.sldrLineTransparency.setValue((transparency===null) ? 100 : transparency/255*100, true); + this.numLineTransparency.setValue(this.sldrLineTransparency.getValue(), true); + } + this._state.LineTransparency=transparency; + } if ( strokeType == Asc.c_oAscStrokeType.STROKE_COLOR ) { color = stroke.asc_getColor(); if (color) { @@ -1501,6 +1561,36 @@ define([ this.cmbBorderType.setValue(this.BorderType); this.lockedControls.push(this.cmbBorderType); + this.numLineTransparency = new Common.UI.MetricSpinner({ + el: $('#shape-line-spin-transparency'), + step: 1, + width: 62, + value: '100 %', + defaultUnit : "%", + maxValue: 100, + minValue: 0, + dataHint: '1', + dataHintDirection: 'bottom', + dataHintOffset: 'big' + }); + this.numLineTransparency.on('change', _.bind(this.onNumLineTransparencyChange, this)); + this.numLineTransparency.on('inputleave', function(){ Common.NotificationCenter.trigger('edit:complete', me);}); + this.lockedControls.push(this.numLineTransparency); + + this.sldrLineTransparency = new Common.UI.SingleSlider({ + el: $('#shape-line-slider-transparency'), + width: 75, + minValue: 0, + maxValue: 100, + value: 100 + }); + this.sldrLineTransparency.on('change', _.bind(this.onLineTransparencyChange, this)); + this.sldrLineTransparency.on('changecomplete', _.bind(this.onLineTransparencyChangeComplete, this)); + this.lockedControls.push(this.sldrLineTransparency); + + this.lockedControls.push($(this.el).find('#shape-lbl-transparency-start')); + this.lockedControls.push($(this.el).find('#shape-lbl-transparency-end')); + this.btnChangeShape = new Common.UI.Button({ parentEl: $('#shape-btn-change'), cls: 'btn-icon-default', diff --git a/apps/spreadsheeteditor/main/app/view/TextArtSettings.js b/apps/spreadsheeteditor/main/app/view/TextArtSettings.js index 39b72f4049..09982d39cc 100644 --- a/apps/spreadsheeteditor/main/app/view/TextArtSettings.js +++ b/apps/spreadsheeteditor/main/app/view/TextArtSettings.js @@ -588,6 +588,7 @@ define([ stroke.asc_putColor(Common.Utils.ThemeColor.getRgbColor(Common.Utils.ThemeColor.colorValue2EffectId(this.BorderColor.Color))); stroke.asc_putPrstDash(this.BorderType); stroke.asc_putWidth(this._pt2mm(this.BorderSize)); + stroke.asc_putTransparent(this._state.LineTransparency); } props.asc_putLine(stroke); this.shapeprops.put_TextArtProperties(props); @@ -638,6 +639,7 @@ define([ stroke.put_color(Common.Utils.ThemeColor.getRgbColor(this.BorderColor.Color)); stroke.put_width(this._pt2mm(this.BorderSize)); stroke.asc_putPrstDash(this.BorderType); + stroke.asc_putTransparent(this._state.LineTransparency); } props.asc_putLine(stroke); this.shapeprops.put_TextArtProperties(props); @@ -658,6 +660,7 @@ define([ stroke.asc_putColor(Common.Utils.ThemeColor.getRgbColor(this.BorderColor.Color)); stroke.asc_putWidth(this._pt2mm(this.BorderSize)); stroke.asc_putPrstDash(this.BorderType); + stroke.asc_putTransparent(this._state.LineTransparency); } props.asc_putLine(stroke); this.shapeprops.put_TextArtProperties(props); @@ -666,6 +669,53 @@ define([ Common.NotificationCenter.trigger('edit:complete', this); }, + onNumLineTransparencyChange: function(field, newValue, oldValue, eOpts){ + this.sldrLineTransparency.setValue(field.getNumberValue(), true); + if (this.api) { + this._state.LineTransparency = field.getNumberValue() * 2.55; + var props = new Asc.asc_TextArtProperties(); + var stroke = new Asc.asc_CStroke(); + stroke.asc_putTransparent(this._state.LineTransparency); + props.asc_putLine(stroke); + this.shapeprops.put_TextArtProperties(props); + this.api.asc_setGraphicObjectProps(this.imgprops); + } + }, + + onLineTransparencyChange: function(field, newValue, oldValue){ + this._sliderChangedLine = newValue; + this.numLineTransparency.setValue(newValue, true); + + if (this._sendLineUndoPoint) { + this.api.setStartPointHistory(); + this._sendLineUndoPoint = false; + this.updatesliderline = setInterval(_.bind(this._transparencyLineApplyFunc, this), 100); + } + }, + + onLineTransparencyChangeComplete: function(field, newValue, oldValue){ + clearInterval(this.updatesliderline); + this._sliderChangedLine = newValue; + if (!this._sendLineUndoPoint) { // start point was added + this.api.setEndPointHistory(); + this._transparencyLineApplyFunc(); + } + this._sendUndoPoint = true; + }, + + _transparencyLineApplyFunc: function() { + if (this._sliderChangedLine!==undefined) { + var props = new Asc.asc_TextArtProperties(); + var stroke = new Asc.asc_CStroke(); + this._state.LineTransparency = this._sliderChangedLine * 2.55; + stroke.asc_putTransparent(this._state.LineTransparency); + props.asc_putLine(stroke); + this.shapeprops.put_TextArtProperties(props); + this.api.asc_setGraphicObjectProps(this.imgprops); + this._sliderChangedLine = undefined; + } + }, + insertFromUrl: function() { var me = this; (new Common.Views.ImageFromUrlDialog({ @@ -921,6 +971,16 @@ define([ update = (this._state.StrokeColor == 'transparent' && this.BorderColor.Color !== 'transparent'); // border color was changed for shape without line and then shape was reselected (or apply other settings) if (stroke) { + var transparency = stroke.asc_getTransparent(); + if ( Math.abs(this._state.LineTransparency-transparency)>0.001 || Math.abs(this.numLineTransparency.getNumberValue()-transparency)>0.001 || + (this._state.LineTransparency===null || transparency===null)&&(this._state.LineTransparency!==transparency || this.numLineTransparency.getNumberValue()!==transparency)) { + + if (transparency !== undefined) { + this.sldrLineTransparency.setValue((transparency===null) ? 100 : transparency/255*100, true); + this.numLineTransparency.setValue(this.sldrLineTransparency.getValue(), true); + } + this._state.LineTransparency=transparency; + } if ( strokeType == Asc.c_oAscStrokeType.STROKE_COLOR ) { color = stroke.asc_getColor(); if (color) { @@ -1427,7 +1487,7 @@ define([ this.lockedControls.push(this.cmbBorderSize); this.cmbBorderType = new Common.UI.ComboBorderType({ - el: $('#textart-combo-border-type'), + el: $('#textart-line-combo-border-type'), style: "width: 93px;", menuStyle: 'min-width: 93px;', dataHint: '1', @@ -1439,6 +1499,36 @@ define([ this.cmbBorderType.setValue(this.BorderType); this.lockedControls.push(this.cmbBorderType); + this.numLineTransparency = new Common.UI.MetricSpinner({ + el: $('#textart-line-spin-transparency'), + step: 1, + width: 62, + value: '100 %', + defaultUnit : "%", + maxValue: 100, + minValue: 0, + dataHint: '1', + dataHintDirection: 'bottom', + dataHintOffset: 'big' + }); + this.numLineTransparency.on('change', _.bind(this.onNumLineTransparencyChange, this)); + this.numLineTransparency.on('inputleave', function(){ Common.NotificationCenter.trigger('edit:complete', me);}); + this.lockedControls.push(this.numLineTransparency); + + this.sldrLineTransparency = new Common.UI.SingleSlider({ + el: $('#textart-line-slider-transparency'), + width: 75, + minValue: 0, + maxValue: 100, + value: 100 + }); + this.sldrLineTransparency.on('change', _.bind(this.onLineTransparencyChange, this)); + this.sldrLineTransparency.on('changecomplete', _.bind(this.onLineTransparencyChangeComplete, this)); + this.lockedControls.push(this.sldrLineTransparency); + + this.lockedControls.push($(this.el).find('#textart-line-lbl-transparency-start')); + this.lockedControls.push($(this.el).find('#textart-line-lbl-transparency-end')); + this.cmbTransform = new Common.UI.ComboDataView({ itemWidth: 50, itemHeight: 50, diff --git a/apps/spreadsheeteditor/main/resources/less/rightmenu.less b/apps/spreadsheeteditor/main/resources/less/rightmenu.less index 436f6cbc27..fef46ba6ef 100644 --- a/apps/spreadsheeteditor/main/resources/less/rightmenu.less +++ b/apps/spreadsheeteditor/main/resources/less/rightmenu.less @@ -113,7 +113,7 @@ } &#id-shape-settings { - #shape-spin-transparency { + #shape-spin-transparency, #shape-line-spin-transparency { display: inline-block; float: right; @@ -227,7 +227,7 @@ } &#id-textart-settings { - #textart-spin-transparency { + #textart-spin-transparency, #textart-line-spin-transparency { display: inline-block; float: right; From 9e6008984cb2efd4394f13ccbcbfaa039599cda0 Mon Sep 17 00:00:00 2001 From: OVSharova Date: Fri, 24 Mar 2023 14:34:32 +0300 Subject: [PATCH 6/7] Fix bugs refactoring --- .../main/app/view/ShapeSettings.js | 37 +++++++------------ .../main/app/view/TextArtSettings.js | 35 +++++++----------- .../main/app/template/ShapeSettings.template | 16 ++++---- .../main/app/view/ShapeSettings.js | 34 ++++++++--------- .../main/app/view/TextArtSettings.js | 29 ++++++--------- .../main/app/view/ShapeSettings.js | 27 +++++--------- .../main/app/view/TextArtSettings.js | 27 +++++--------- 7 files changed, 83 insertions(+), 122 deletions(-) diff --git a/apps/documenteditor/main/app/view/ShapeSettings.js b/apps/documenteditor/main/app/view/ShapeSettings.js index 719f62cef8..4a0c4d6c40 100644 --- a/apps/documenteditor/main/app/view/ShapeSettings.js +++ b/apps/documenteditor/main/app/view/ShapeSettings.js @@ -77,8 +77,7 @@ define([ this.imgprops = null; this._sendUndoPoint = true; this._sliderChanged = false; - this._sendLineUndoPoint = true; - this._sliderLineChanged = false; + this._sliderChangedLine = false; this._texturearray = null; this.txtPt = Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt); @@ -146,7 +145,6 @@ define([ this.FillPatternContainer = $('#shape-panel-pattern-fill'); this.FillGradientContainer = $('#shape-panel-gradient-fill'); this.TransparencyContainer = $('#shape-panel-transparent-fill'); - this.LineTransparencyContainer = $('#shape-line-panel-transparent'); this.ShapeOnlySettings = $('.shape-only'); this.CanChangeType = $('.change-type'); this.RotationSettings = $('.shape-rotation'); @@ -688,10 +686,10 @@ define([ onNumLineTransparencyChange: function(field, newValue, oldValue, eOpts){ this.sldrLineTransparency.setValue(field.getNumberValue(), true); - if (this.api) { + this._state.LineTransparency = field.getNumberValue() * 2.55; + if (this.api && this.BorderSize>0 && !this._noApply) { var props = new Asc.asc_CShapeProperty(); var stroke = new Asc.asc_CStroke(); - this._state.LineTransparency = field.getNumberValue() * 2.55; stroke.put_transparent(this._state.LineTransparency); props.put_stroke(stroke); this.imgprops.put_ShapeProperties(props); @@ -700,36 +698,27 @@ define([ }, onLineTransparencyChange: function(field, newValue, oldValue){ - this._sliderLineChanged = newValue; + this._sliderChangedLine = newValue; this.numLineTransparency.setValue(newValue, true); - if (this._sendLineUndoPoint) { - this.api.setStartPointHistory(); - this._sendLineUndoPoint = false; - this.updatesliderline = setInterval(_.bind(this._transparencyLineApplyFunc, this), 100); - } + this.updatesliderline = setInterval(_.bind(this._transparencyLineApplyFunc, this), 100); }, onLineTransparencyChangeComplete: function(field, newValue, oldValue){ clearInterval(this.updatesliderline); - this._sliderlineChanged = newValue; - if (!this._sendLineUndoPoint) { // start point was added - this.api.setEndPointHistory(); - this._transparencyLineApplyFunc(); - } - this._sendLineUndoPoint = true; + this._sliderChangedLine = newValue; + this._transparencyLineApplyFunc(); }, _transparencyLineApplyFunc: function() { - if (this._sliderLineChanged!==undefined) { + if (this._sliderChangedLine!==undefined) { + this._state.LineTransparency = this._sliderChangedLine * 2.55; var props = new Asc.asc_CShapeProperty(); var stroke = new Asc.asc_CStroke(); - this._state.LineTransparency = this._sliderLineChanged * 2.55; stroke.put_transparent(this._state.LineTransparency); props.put_stroke(stroke); - this.imgprops.put_ShapeProperties(props); this.api.ImgApply(this.imgprops); - this._sliderLineChanged = undefined; + this._sliderChangedLine = undefined; } }, @@ -1653,8 +1642,8 @@ define([ this.sldrLineTransparency.on('changecomplete', _.bind(this.onLineTransparencyChangeComplete, this));/**/ this.lockedControls.push(this.sldrLineTransparency); - this.lockedControls.push( $(this.el).find('#shape-line-lbl-transparency-start')); - this.lockedControls.push( $(this.el).find('#shape-line-lbl-transparency-end')); + this.lblLineTransparencyStart = $(this.el).find('#shape-line-lbl-transparency-start'); + this.lblLineTransparencyEnd = $(this.el).find('#shape-line-lbl-transparency-end'); this.numLineTransparency = new Common.UI.MetricSpinner({ el: $('#shape-line-spin-transparency'), @@ -2078,6 +2067,8 @@ define([ item.setDisabled(disable); }); this.linkAdvanced.toggleClass('disabled', disable); + this.lblLineTransparencyStart.toggleClass('disabled', disable); + this.lblLineTransparencyEnd.toggleClass('disabled', disable); } this.btnFlipV.setDisabled(disable || this._state.isFromSmartArtInternal); this.btnFlipH.setDisabled(disable || this._state.isFromSmartArtInternal); diff --git a/apps/documenteditor/main/app/view/TextArtSettings.js b/apps/documenteditor/main/app/view/TextArtSettings.js index 15364884bd..ce85e31505 100644 --- a/apps/documenteditor/main/app/view/TextArtSettings.js +++ b/apps/documenteditor/main/app/view/TextArtSettings.js @@ -552,48 +552,39 @@ define([ onNumLineTransparencyChange: function(field, newValue, oldValue, eOpts){ this.sldrLineTransparency.setValue(field.getNumberValue(), true); - if (this.api) { - this._state.LineTransparency = field.getNumberValue() * 2.55; + this._state.LineTransparency = field.getNumberValue() * 2.55; + if (this.api && this.BorderSize>0 && !this._noApply) { var props = new Asc.asc_TextArtProperties(); var stroke = new Asc.asc_CStroke(); stroke.put_transparent(this._state.LineTransparency); - props.asc_putLine(stroke); + props.put_stroke(stroke); this.shapeprops.put_TextArtProperties(props); this.api.ImgApply(this.imgprops); } }, onLineTransparencyChange: function(field, newValue, oldValue){ - this._sliderLineChanged = newValue; + this._sliderChangedLine = newValue; this.numLineTransparency.setValue(newValue, true); - - if (this._sendLineUndoPoint) { - this.api.setStartPointHistory(); - this._sendLineUndoPoint = false; - this.updatesliderline = setInterval(_.bind(this._transparencyLineApplyFunc, this), 100); - } + this.updatesliderline = setInterval(_.bind(this._transparencyLineApplyFunc, this), 100); }, onLineTransparencyChangeComplete: function(field, newValue, oldValue){ clearInterval(this.updatesliderline); - this._sliderLineChanged = newValue; - if (!this._sendLineUndoPoint) { // start point was added - this.api.setEndPointHistory(); - this._transparencyLineApplyFunc(); - } - this._sendLineUndoPoint = true; + this._sliderChangedLine = newValue; + this._transparencyLineApplyFunc(); }, _transparencyLineApplyFunc: function() { - if (this._sliderLineChanged!==undefined) { + if (this._sliderChangedLine!==undefined) { + this._state.LineTransparency = this._sliderChangedLine * 2.55; var props = new Asc.asc_TextArtProperties(); var stroke = new Asc.asc_CStroke(); - this._state.LineTransparency = this._sliderLineChanged * 2.55; stroke.put_transparent(this._state.LineTransparency); props.asc_putLine(stroke); this.shapeprops.put_TextArtProperties(props); this.api.ImgApply(this.imgprops); - this._sliderLineChanged = undefined; + this._sliderChangedLine = undefined; } }, @@ -1209,8 +1200,8 @@ define([ this.sldrLineTransparency.on('changecomplete', _.bind(this.onLineTransparencyChangeComplete, this)); this.lockedControls.push(this.sldrLineTransparency); - this.lockedControls.push($(this.el).find('#textart-lbl-transparency-start')); - this.lockedControls.push($(this.el).find('#textart-lbl-transparency-end')); + this.lblLineTransparencyStart = $(this.el).find('#textart-line-lbl-transparency-start'); + this.lblLineTransparencyEnd = $(this.el).find('#textart-line-lbl-transparency-end'); this.cmbTransform = new Common.UI.ComboDataView({ itemWidth: 50, @@ -1395,6 +1386,8 @@ define([ item.setDisabled(disable); }); this.numGradientAngle.setDisabled(disable || this.GradFillType !== Asc.c_oAscFillGradType.GRAD_LINEAR); + this.lblLineTransparencyStart.toggleClass('disabled', disable); + this.lblLineTransparencyEnd.toggleClass('disabled', disable); } }, diff --git a/apps/presentationeditor/main/app/template/ShapeSettings.template b/apps/presentationeditor/main/app/template/ShapeSettings.template index 70e1eac369..7a16de54df 100644 --- a/apps/presentationeditor/main/app/template/ShapeSettings.template +++ b/apps/presentationeditor/main/app/template/ShapeSettings.template @@ -134,6 +134,14 @@ + + +
+ +
+
+ +
@@ -147,14 +155,6 @@
- - -
- -
-
- -
diff --git a/apps/presentationeditor/main/app/view/ShapeSettings.js b/apps/presentationeditor/main/app/view/ShapeSettings.js index 4be9e35a0a..9cb5734b84 100644 --- a/apps/presentationeditor/main/app/view/ShapeSettings.js +++ b/apps/presentationeditor/main/app/view/ShapeSettings.js @@ -687,46 +687,40 @@ define([ onNumLineTransparencyChange: function(field, newValue, oldValue, eOpts){ this.sldrLineTransparency.setValue(field.getNumberValue(), true); - if (this.api) { + this._state.LineTransparency = field.getNumberValue() * 2.55; + if (this.api && this.BorderSize>0 && !this._noApply) { var props = new Asc.asc_CShapeProperty(); var stroke = new Asc.asc_CStroke(); - this._state.LineTransparency = field.getNumberValue() * 2.55; stroke.put_transparent(this._state.LineTransparency); props.put_stroke(stroke); this.api.ShapeApply(props); } + this.fireEvent('editcomplete', this); }, onLineTransparencyChange: function(field, newValue, oldValue){ - this._sliderLineChanged = newValue; + this._sliderChangedLine = newValue; this.numLineTransparency.setValue(newValue, true); - if (this._sendLineUndoPoint) { - this.api.setStartPointHistory(); - this._sendLineUndoPoint = false; - this.updatesliderline = setInterval(_.bind(this._transparencyLineApplyFunc, this), 100); - } + this.updatesliderline = setInterval(_.bind(this._transparencyLineApplyFunc, this), 100); }, onLineTransparencyChangeComplete: function(field, newValue, oldValue){ clearInterval(this.updatesliderline); - this._sliderlineChanged = newValue; - if (!this._sendLineUndoPoint) { // start point was added - this.api.setEndPointHistory(); - this._transparencyLineApplyFunc(); - } - this._sendLineUndoPoint = true; + this._sliderChangedLine = newValue; + this._transparencyLineApplyFunc(); }, _transparencyLineApplyFunc: function() { - if (this._sliderLineChanged!==undefined) { + if (this._sliderChangedLine!==undefined) { + this._state.LineTransparency = this._sliderChangedLine * 2.55; var props = new Asc.asc_CShapeProperty(); var stroke = new Asc.asc_CStroke(); - this._state.LineTransparency = this._sliderLineChanged * 2.55; stroke.put_transparent(this._state.LineTransparency); props.put_stroke(stroke); this.api.ShapeApply(props); - this._sliderLineChanged = undefined; + this._sliderChangedLine = undefined; } + this.fireEvent('editcomplete', this); }, setImageUrl: function(url, token) { @@ -1570,8 +1564,8 @@ define([ this.sldrLineTransparency.on('changecomplete', _.bind(this.onLineTransparencyChangeComplete, this)); this.lockedControls.push(this.sldrLineTransparency); - this.lockedControls.push( $(this.el).find('#shape-line-lbl-transparency-start')); - this.lockedControls.push( $(this.el).find('#shape-line-lbl-transparency-end')); + this.lblLineTransparencyStart = $(this.el).find('#shape-line-lbl-transparency-start'); + this.lblLineTransparencyEnd = $(this.el).find('#shape-line-lbl-transparency-end'); this.btnChangeShape = new Common.UI.Button({ parentEl: $('#shape-btn-change'), @@ -1937,6 +1931,8 @@ define([ item.setDisabled(disable); }); this.linkAdvanced.toggleClass('disabled', disable); + this.lblLineTransparencyStart.toggleClass('disabled', disable); + this.lblLineTransparencyEnd.toggleClass('disabled', disable); } this.btnFlipV.setDisabled(disable || this._state.isFromSmartArtInternal); this.btnFlipH.setDisabled(disable || this._state.isFromSmartArtInternal); diff --git a/apps/presentationeditor/main/app/view/TextArtSettings.js b/apps/presentationeditor/main/app/view/TextArtSettings.js index 3dcb1ea205..234deb1510 100644 --- a/apps/presentationeditor/main/app/view/TextArtSettings.js +++ b/apps/presentationeditor/main/app/view/TextArtSettings.js @@ -677,8 +677,8 @@ define([ onNumLineTransparencyChange: function(field, newValue, oldValue, eOpts){ this.sldrLineTransparency.setValue(field.getNumberValue(), true); - if (this.api) { - this._state.LineTransparency = field.getNumberValue() * 2.55; + this._state.LineTransparency = field.getNumberValue() * 2.55; + if (this.api && this.BorderSize>0 && !this._noApply) { var props = new Asc.asc_TextArtProperties(); var stroke = new Asc.asc_CStroke(); stroke.put_transparent(this._state.LineTransparency); @@ -686,40 +686,33 @@ define([ this.shapeprops.put_TextArtProperties(props); this.api.ShapeApply(this.shapeprops); } + this.fireEvent('editcomplete', this); }, onLineTransparencyChange: function(field, newValue, oldValue){ this._sliderChangedLine = newValue; this.numLineTransparency.setValue(newValue, true); - - if (this._sendLineUndoPoint) { - this.api.setStartPointHistory(); - this._sendLineUndoPoint = false; - this.updatesliderline = setInterval(_.bind(this._transparencyLineApplyFunc, this), 100); - } + this.updatesliderline = setInterval(_.bind(this._transparencyLineApplyFunc, this), 100); }, onLineTransparencyChangeComplete: function(field, newValue, oldValue){ clearInterval(this.updatesliderline); this._sliderChangedLine = newValue; - if (!this._sendLineUndoPoint) { // start point was added - this.api.setEndPointHistory(); - this._transparencyLineApplyFunc(); - } - this._sendLineUndoPoint = true; + this._transparencyLineApplyFunc(); }, _transparencyLineApplyFunc: function() { if (this._sliderChangedLine!==undefined) { + this._state.LineTransparency = this._sliderChangedLine * 2.55; var props = new Asc.asc_TextArtProperties(); var stroke = new Asc.asc_CStroke(); - this._state.LineTransparency = this._sliderChangedLine * 2.55; stroke.put_transparent(this._state.LineTransparency); props.asc_putLine(stroke); this.shapeprops.put_TextArtProperties(props); this.api.ShapeApply(this.shapeprops); this._sliderChangedLine = undefined; } + this.fireEvent('editcomplete', this); }, insertFromUrl: function() { @@ -1529,10 +1522,10 @@ define([ }); this.sldrLineTransparency.on('change', _.bind(this.onLineTransparencyChange, this)); this.sldrLineTransparency.on('changecomplete', _.bind(this.onLineTransparencyChangeComplete, this)); - this.lockedControls.push(this.sldrTransparency); + this.lockedControls.push(this.sldrLineTransparency); - this.lockedControls.push($(this.el).find('#textart-lbl-transparency-start')); - this.lockedControls.push( $(this.el).find('#textart-lbl-transparency-end')); + this.lblLineTransparencyStart = $(this.el).find('#textart-line-lbl-transparency-start'); + this.lblLineTransparencyEnd = $(this.el).find('#textart-line-lbl-transparency-end'); this.cmbTransform = new Common.UI.ComboDataView({ itemWidth: 50, @@ -1849,6 +1842,8 @@ define([ item.setDisabled(disable); }); this.numGradientAngle.setDisabled(disable || this.GradFillType !== Asc.c_oAscFillGradType.GRAD_LINEAR); + this.lblLineTransparencyStart.toggleClass('disabled', disable); + this.lblLineTransparencyEnd.toggleClass('disabled', disable); } }, diff --git a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js index eb41682968..2420276a77 100644 --- a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js +++ b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js @@ -677,9 +677,9 @@ define([ }, onNumLineTransparencyChange: function(field, newValue, oldValue, eOpts){ - this.sldrTransparency.setValue(field.getNumberValue(), true); - if (this.api) { - this._state.LineTransparency = field.getNumberValue() * 2.55; + this.sldrLineTransparency.setValue(field.getNumberValue(), true); + this._state.LineTransparency = field.getNumberValue() * 2.55; + if (this.api && !this._noApply) { var props = new Asc.asc_CShapeProperty(); var stroke = new Asc.asc_CStroke(); stroke.asc_putTransparent(this._state.LineTransparency); @@ -692,29 +692,20 @@ define([ onLineTransparencyChange: function(field, newValue, oldValue){ this._sliderChangedLine = newValue; this.numLineTransparency.setValue(newValue, true); - - if (this._sendLineUndoPoint) { - this.api.setStartPointHistory(); - this._sendLineUndoPoint = false; - this.updatesliderline = setInterval(_.bind(this._transparencyLineApplyFunc, this), 100); - } + this.updatesliderline = setInterval(_.bind(this._transparencyLineApplyFunc, this), 100); }, onLineTransparencyChangeComplete: function(field, newValue, oldValue){ clearInterval(this.updatesliderline); this._sliderChangedLine = newValue; - if (!this._sendLineUndoPoint) { // start point was added - this.api.setEndPointHistory(); - this._transparencyLineApplyFunc(); - } - this._sendLineUndoPoint = true; + this._transparencyLineApplyFunc(); }, _transparencyLineApplyFunc: function() { if (this._sliderChangedLine!==undefined) { + this._state.LineTransparency = this._sliderChangedLine * 2.55; var props = new Asc.asc_CShapeProperty(); var stroke = new Asc.asc_CStroke(); - this._state.LineTransparency = this._sliderChangedLine * 2.55; stroke.asc_putTransparent(this._state.LineTransparency); props.asc_putStroke(stroke); this.imgprops.asc_putShapeProperties(props); @@ -1588,8 +1579,8 @@ define([ this.sldrLineTransparency.on('changecomplete', _.bind(this.onLineTransparencyChangeComplete, this)); this.lockedControls.push(this.sldrLineTransparency); - this.lockedControls.push($(this.el).find('#shape-lbl-transparency-start')); - this.lockedControls.push($(this.el).find('#shape-lbl-transparency-end')); + this.lblLineTransparencyStart = $(this.el).find('#shape-line-lbl-transparency-start'); + this.lblLineTransparencyEnd = $(this.el).find('#shape-line-lbl-transparency-end'); this.btnChangeShape = new Common.UI.Button({ parentEl: $('#shape-btn-change'), @@ -1958,6 +1949,8 @@ define([ item.setDisabled(disable); }); this.linkAdvanced.toggleClass('disabled', disable); + this.lblLineTransparencyStart.toggleClass('disabled', disable); + this.lblLineTransparencyEnd.toggleClass('disabled', disable); } this.btnFlipV.setDisabled(disable || this._state.isFromSmartArtInternal); this.btnFlipH.setDisabled(disable || this._state.isFromSmartArtInternal); diff --git a/apps/spreadsheeteditor/main/app/view/TextArtSettings.js b/apps/spreadsheeteditor/main/app/view/TextArtSettings.js index 09982d39cc..92684110a9 100644 --- a/apps/spreadsheeteditor/main/app/view/TextArtSettings.js +++ b/apps/spreadsheeteditor/main/app/view/TextArtSettings.js @@ -671,8 +671,8 @@ define([ onNumLineTransparencyChange: function(field, newValue, oldValue, eOpts){ this.sldrLineTransparency.setValue(field.getNumberValue(), true); - if (this.api) { - this._state.LineTransparency = field.getNumberValue() * 2.55; + this._state.LineTransparency = field.getNumberValue() * 2.55; + if (this.api && this.BorderSize>0 && !this._noApply) { var props = new Asc.asc_TextArtProperties(); var stroke = new Asc.asc_CStroke(); stroke.asc_putTransparent(this._state.LineTransparency); @@ -685,29 +685,20 @@ define([ onLineTransparencyChange: function(field, newValue, oldValue){ this._sliderChangedLine = newValue; this.numLineTransparency.setValue(newValue, true); - - if (this._sendLineUndoPoint) { - this.api.setStartPointHistory(); - this._sendLineUndoPoint = false; - this.updatesliderline = setInterval(_.bind(this._transparencyLineApplyFunc, this), 100); - } + this.updatesliderline = setInterval(_.bind(this._transparencyLineApplyFunc, this), 100); }, onLineTransparencyChangeComplete: function(field, newValue, oldValue){ clearInterval(this.updatesliderline); this._sliderChangedLine = newValue; - if (!this._sendLineUndoPoint) { // start point was added - this.api.setEndPointHistory(); - this._transparencyLineApplyFunc(); - } - this._sendUndoPoint = true; + this._transparencyLineApplyFunc(); }, _transparencyLineApplyFunc: function() { if (this._sliderChangedLine!==undefined) { + this._state.LineTransparency = this._sliderChangedLine * 2.55; var props = new Asc.asc_TextArtProperties(); var stroke = new Asc.asc_CStroke(); - this._state.LineTransparency = this._sliderChangedLine * 2.55; stroke.asc_putTransparent(this._state.LineTransparency); props.asc_putLine(stroke); this.shapeprops.put_TextArtProperties(props); @@ -1487,7 +1478,7 @@ define([ this.lockedControls.push(this.cmbBorderSize); this.cmbBorderType = new Common.UI.ComboBorderType({ - el: $('#textart-line-combo-border-type'), + el: $('#textart-combo-border-type'), style: "width: 93px;", menuStyle: 'min-width: 93px;', dataHint: '1', @@ -1526,8 +1517,8 @@ define([ this.sldrLineTransparency.on('changecomplete', _.bind(this.onLineTransparencyChangeComplete, this)); this.lockedControls.push(this.sldrLineTransparency); - this.lockedControls.push($(this.el).find('#textart-line-lbl-transparency-start')); - this.lockedControls.push($(this.el).find('#textart-line-lbl-transparency-end')); + this.lblLineTransparencyStart = $(this.el).find('#textart-line-lbl-transparency-start'); + this.lblLineTransparencyEnd = $(this.el).find('#textart-line-lbl-transparency-end'); this.cmbTransform = new Common.UI.ComboDataView({ itemWidth: 50, @@ -1844,6 +1835,8 @@ define([ item.setDisabled(disable); }); this.numGradientAngle.setDisabled(disable || this.GradFillType !== Asc.c_oAscFillGradType.GRAD_LINEAR); + this.lblLineTransparencyStart.toggleClass('disabled', disable); + this.lblLineTransparencyEnd.toggleClass('disabled', disable); } }, From 3ae2a339eda61ba9ef3aa6f69b9ccf282944640c Mon Sep 17 00:00:00 2001 From: OVSharova Date: Tue, 28 Mar 2023 03:09:47 +0300 Subject: [PATCH 7/7] fix bug --- .../documenteditor/main/app/view/ShapeSettings.js | 14 +++++++++++--- .../main/app/view/TextArtSettings.js | 15 ++++++++++++--- .../main/app/view/ShapeSettings.js | 12 ++++++++++-- .../main/app/view/TextArtSettings.js | 12 ++++++++++-- .../main/app/view/ShapeSettings.js | 12 ++++++++++-- .../main/app/view/TextArtSettings.js | 12 ++++++++++-- 6 files changed, 63 insertions(+), 14 deletions(-) diff --git a/apps/documenteditor/main/app/view/ShapeSettings.js b/apps/documenteditor/main/app/view/ShapeSettings.js index 4a0c4d6c40..bc47700686 100644 --- a/apps/documenteditor/main/app/view/ShapeSettings.js +++ b/apps/documenteditor/main/app/view/ShapeSettings.js @@ -698,15 +698,23 @@ define([ }, onLineTransparencyChange: function(field, newValue, oldValue){ - this._sliderChangedLine = newValue; this.numLineTransparency.setValue(newValue, true); - this.updatesliderline = setInterval(_.bind(this._transparencyLineApplyFunc, this), 100); + this._sliderChangedLine = newValue; + if (this._sendUndoPoint) { + this.api.setStartPointHistory(); + this._sendUndoPoint = false; + this.updatesliderline = setInterval(_.bind(this._transparencyLineApplyFunc, this), 100); + } }, onLineTransparencyChangeComplete: function(field, newValue, oldValue){ clearInterval(this.updatesliderline); this._sliderChangedLine = newValue; - this._transparencyLineApplyFunc(); + if (!this._sendUndoPoint) { // start point was added + this.api.setEndPointHistory(); + this._transparencyLineApplyFunc(); + } + this._sendUndoPoint = true; }, _transparencyLineApplyFunc: function() { diff --git a/apps/documenteditor/main/app/view/TextArtSettings.js b/apps/documenteditor/main/app/view/TextArtSettings.js index ce85e31505..89142bbee7 100644 --- a/apps/documenteditor/main/app/view/TextArtSettings.js +++ b/apps/documenteditor/main/app/view/TextArtSettings.js @@ -74,6 +74,7 @@ define([ this.shapeprops = null; this._sendUndoPoint = true; this._sliderChanged = false; + this._sliderChangedLine = this._sliderChanged; this.txtPt = Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt); @@ -557,7 +558,7 @@ define([ var props = new Asc.asc_TextArtProperties(); var stroke = new Asc.asc_CStroke(); stroke.put_transparent(this._state.LineTransparency); - props.put_stroke(stroke); + props.asc_putLine(stroke); this.shapeprops.put_TextArtProperties(props); this.api.ImgApply(this.imgprops); } @@ -566,13 +567,21 @@ define([ onLineTransparencyChange: function(field, newValue, oldValue){ this._sliderChangedLine = newValue; this.numLineTransparency.setValue(newValue, true); - this.updatesliderline = setInterval(_.bind(this._transparencyLineApplyFunc, this), 100); + if (this._sendUndoPoint) { + this.api.setStartPointHistory(); + this._sendUndoPoint = false; + this.updatesliderline = setInterval(_.bind(this._transparencyLineApplyFunc, this), 100); + } }, onLineTransparencyChangeComplete: function(field, newValue, oldValue){ clearInterval(this.updatesliderline); this._sliderChangedLine = newValue; - this._transparencyLineApplyFunc(); + if (!this._sendUndoPoint) { // start point was added + this.api.setEndPointHistory(); + this._transparencyLineApplyFunc(); + } + this._sendUndoPoint = true; }, _transparencyLineApplyFunc: function() { diff --git a/apps/presentationeditor/main/app/view/ShapeSettings.js b/apps/presentationeditor/main/app/view/ShapeSettings.js index 9cb5734b84..013bbb326f 100644 --- a/apps/presentationeditor/main/app/view/ShapeSettings.js +++ b/apps/presentationeditor/main/app/view/ShapeSettings.js @@ -701,13 +701,21 @@ define([ onLineTransparencyChange: function(field, newValue, oldValue){ this._sliderChangedLine = newValue; this.numLineTransparency.setValue(newValue, true); - this.updatesliderline = setInterval(_.bind(this._transparencyLineApplyFunc, this), 100); + if (this._sendUndoPoint) { + this.api.setStartPointHistory(); + this._sendUndoPoint = false; + this.updatesliderline = setInterval(_.bind(this._transparencyLineApplyFunc, this), 100); + } }, onLineTransparencyChangeComplete: function(field, newValue, oldValue){ clearInterval(this.updatesliderline); this._sliderChangedLine = newValue; - this._transparencyLineApplyFunc(); + if (!this._sendUndoPoint) { // start point was added + this.api.setEndPointHistory(); + this._transparencyLineApplyFunc(); + } + this._sendUndoPoint = true; }, _transparencyLineApplyFunc: function() { diff --git a/apps/presentationeditor/main/app/view/TextArtSettings.js b/apps/presentationeditor/main/app/view/TextArtSettings.js index 234deb1510..11178c49e0 100644 --- a/apps/presentationeditor/main/app/view/TextArtSettings.js +++ b/apps/presentationeditor/main/app/view/TextArtSettings.js @@ -692,13 +692,21 @@ define([ onLineTransparencyChange: function(field, newValue, oldValue){ this._sliderChangedLine = newValue; this.numLineTransparency.setValue(newValue, true); - this.updatesliderline = setInterval(_.bind(this._transparencyLineApplyFunc, this), 100); + if (this._sendUndoPoint) { + this.api.setStartPointHistory(); + this._sendUndoPoint = false; + this.updatesliderline = setInterval(_.bind(this._transparencyLineApplyFunc, this), 100); + } }, onLineTransparencyChangeComplete: function(field, newValue, oldValue){ clearInterval(this.updatesliderline); this._sliderChangedLine = newValue; - this._transparencyLineApplyFunc(); + if (!this._sendUndoPoint) { // start point was added + this.api.setEndPointHistory(); + this._transparencyLineApplyFunc(); + } + this._sendUndoPoint = true; }, _transparencyLineApplyFunc: function() { diff --git a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js index 2420276a77..c684ca6a2e 100644 --- a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js +++ b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js @@ -692,13 +692,21 @@ define([ onLineTransparencyChange: function(field, newValue, oldValue){ this._sliderChangedLine = newValue; this.numLineTransparency.setValue(newValue, true); - this.updatesliderline = setInterval(_.bind(this._transparencyLineApplyFunc, this), 100); + if (this._sendUndoPoint) { + this.api.setStartPointHistory(); + this._sendUndoPoint = false; + this.updatesliderline = setInterval(_.bind(this._transparencyLineApplyFunc, this), 100); + } }, onLineTransparencyChangeComplete: function(field, newValue, oldValue){ clearInterval(this.updatesliderline); this._sliderChangedLine = newValue; - this._transparencyLineApplyFunc(); + if (!this._sendUndoPoint) { // start point was added + this.api.setEndPointHistory(); + this._transparencyLineApplyFunc(); + } + this._sendUndoPoint = true; }, _transparencyLineApplyFunc: function() { diff --git a/apps/spreadsheeteditor/main/app/view/TextArtSettings.js b/apps/spreadsheeteditor/main/app/view/TextArtSettings.js index 92684110a9..df050a9eb7 100644 --- a/apps/spreadsheeteditor/main/app/view/TextArtSettings.js +++ b/apps/spreadsheeteditor/main/app/view/TextArtSettings.js @@ -685,13 +685,21 @@ define([ onLineTransparencyChange: function(field, newValue, oldValue){ this._sliderChangedLine = newValue; this.numLineTransparency.setValue(newValue, true); - this.updatesliderline = setInterval(_.bind(this._transparencyLineApplyFunc, this), 100); + if (this._sendUndoPoint) { + this.api.setStartPointHistory(); + this._sendUndoPoint = false; + this.updatesliderline = setInterval(_.bind(this._transparencyLineApplyFunc, this), 100); + } }, onLineTransparencyChangeComplete: function(field, newValue, oldValue){ clearInterval(this.updatesliderline); this._sliderChangedLine = newValue; - this._transparencyLineApplyFunc(); + if (!this._sendUndoPoint) { // start point was added + this.api.setEndPointHistory(); + this._transparencyLineApplyFunc(); + } + this._sendUndoPoint = true; }, _transparencyLineApplyFunc: function() {