pengjunjie/web-apps
1
0
Fork 1
mirror of https://github.com/ONLYOFFICE/web-apps.git synced 2026-07-25 15:33:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2306 from ONLYOFFICE/feature/line-opacity

Browse Source 
Feature/line opacity
This commit is contained in:
Julia Radzhabova
2023-03-30 11:35:24 +03:00
committed by GitHub
parent 42001ea066 3ae2a339ed
commit e32a428152
15 changed files with 640 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
apps/documenteditor/main/app/template/ShapeSettings.template
View File

@ -142,6 +142,19 @@
</div>
</td>
</tr>
<tr class="no-form">
<td>
<div class="padding-small" id="shape-line-panel-transparent">
<label class="header"><%= scope.strTransparency %></label>
<div class="shape-slider">
<label id="shape-line-lbl-transparency-start">0</label>
<div id="shape-line-slider-transparency"></div>
<label id="shape-line-lbl-transparency-end">100</label>
</div>
<div id="shape-line-spin-transparency"></div>
</div>
</td>
</tr>
<tr class="shape-only-separator">
<td class="padding-small">
<div class="separator horizontal"></div>

13
apps/documenteditor/main/app/template/TextArtSettings.template
View File

@ -119,6 +119,19 @@
<div id="textart-combo-border-type" style="width: 93px;"></div>
</div>
</td>
</tr>
<tr>
<td>
<div class="padding-small" id="textart-line-panel-transparent" style="width: 100%;">
<label class="header" style="display:block;"><%= scope.strTransparency %></label>
<div style="display: inline-block; margin-top: 3px;">
<label id="textart-line-lbl-transparency-start">0</label>
<div id="textart-line-slider-transparency" style="display: inline-block;margin: 0 4px; vertical-align: middle;"></div>
<label id="textart-line-lbl-transparency-end">100</label>
</div>
<div id="textart-line-spin-transparency"></div>
</div>
</td>
</tr>
<tr class="textart-transform">
<td class="padding-small">

94
apps/documenteditor/main/app/view/ShapeSettings.js
View File

@ -77,6 +77,7 @@ define([
this.imgprops = null;
this._sendUndoPoint = true;
this._sliderChanged = false;
this._sliderChangedLine = false;
this._texturearray = null;
this.txtPt = Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt);
@ -602,6 +603,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 +654,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 +675,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 +684,52 @@ define([
this.fireEvent('editcomplete', this);
},
onNumLineTransparencyChange: function(field, newValue, oldValue, eOpts){
this.sldrLineTransparency.setValue(field.getNumberValue(), true);
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();
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.numLineTransparency.setValue(newValue, true);
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;
if (!this._sendUndoPoint) { // start point was added
this.api.setEndPointHistory();
this._transparencyLineApplyFunc();
}
this._sendUndoPoint = true;
},
_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();
stroke.put_transparent(this._state.LineTransparency);
props.put_stroke(stroke);
this.imgprops.put_ShapeProperties(props);
this.api.ImgApply(this.imgprops);
this._sliderChangedLine = undefined;
}
},
_ImgWrapStyleChanged: function(style) {
if (!this.cmbWrapType) return;
if (this._state.WrappingStyle!==style) {
@ -1058,8 +1108,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 +1639,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.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'),
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',
@ -2000,6 +2090,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);

94
apps/documenteditor/main/app/view/TextArtSettings.js
View File

@ -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);
@ -125,7 +126,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 +470,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 +521,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 +542,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 +551,52 @@ define([
this.fireEvent('editcomplete', this);
},
onNumLineTransparencyChange: function(field, newValue, oldValue, eOpts){
this.sldrLineTransparency.setValue(field.getNumberValue(), true);
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);
this.shapeprops.put_TextArtProperties(props);
this.api.ImgApply(this.imgprops);
}
},
onLineTransparencyChange: function(field, newValue, oldValue){
this._sliderChangedLine = newValue;
this.numLineTransparency.setValue(newValue, true);
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;
if (!this._sendUndoPoint) { // start point was added
this.api.setEndPointHistory();
this._transparencyLineApplyFunc();
}
this._sendUndoPoint = true;
},
_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();
stroke.put_transparent(this._state.LineTransparency);
props.asc_putLine(stroke);
this.shapeprops.put_TextArtProperties(props);
this.api.ImgApply(this.imgprops);
this._sliderChangedLine = 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.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,
itemHeight: 50,
@ -1314,6 +1404,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);
}
},

8
apps/documenteditor/main/resources/less/rightmenu.less
View File

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

13
apps/presentationeditor/main/app/template/ShapeSettings.template
View File

@ -142,6 +142,19 @@
</div>
</td>
</tr>
<tr>
<td>
<div class="padding-small" id="shape-line-panel-transparent" style="width: 100%;">
<label class="header" style="display:block;"><%= scope.strTransparency %></label>
<div style="display: inline-block; margin-top: 3px;">
<label id="shape-line-lbl-transparency-start">0</label>
<div id="shape-line-slider-transparency" style="display: inline-block;margin: 0 4px; vertical-align: middle;"></div>
<label id="shape-line-lbl-transparency-end">100</label>
</div>
<div id="shape-line-spin-transparency"></div>
</div>
</td>
</tr>
<tr class="shape-rotation">
<td class="padding-small">
<div class="separator horizontal"></div>

13
apps/presentationeditor/main/app/template/TextArtSettings.template
View File

@ -160,6 +160,19 @@
</div>
</td>
</tr>
<tr>
<td>
<div class="padding-small" id="textart-line-panel-transparent" style="width: 100%;">
<label class="header" style="display:block;"><%= scope.strTransparency %></label>
<div style="display: inline-block; margin-top: 3px;">
<label id="textart-line-lbl-transparency-start">0</label>
<div id="textart-line-slider-transparency" style="display: inline-block;margin: 0 4px; vertical-align: middle;"></div>
<label id="textart-line-lbl-transparency-end">100</label>
</div>
<div id="textart-line-spin-transparency"></div>
</div>
</td>
</tr>
<tr class="textart-transform">
<td class="padding-small">
<div class="separator horizontal"></div>

91
apps/presentationeditor/main/app/view/ShapeSettings.js
View File

@ -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,52 @@ define([
this.fireEvent('editcomplete', this);
},
onNumLineTransparencyChange: function(field, newValue, oldValue, eOpts){
this.sldrLineTransparency.setValue(field.getNumberValue(), true);
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();
stroke.put_transparent(this._state.LineTransparency);
props.put_stroke(stroke);
this.api.ShapeApply(props);
}
this.fireEvent('editcomplete', this);
},
onLineTransparencyChange: function(field, newValue, oldValue){
this._sliderChangedLine = newValue;
this.numLineTransparency.setValue(newValue, true);
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;
if (!this._sendUndoPoint) { // start point was added
this.api.setEndPointHistory();
this._transparencyLineApplyFunc();
}
this._sendUndoPoint = true;
},
_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();
stroke.put_transparent(this._state.LineTransparency);
props.put_stroke(stroke);
this.api.ShapeApply(props);
this._sliderChangedLine = undefined;
}
this.fireEvent('editcomplete', this);
},
setImageUrl: function(url, token) {
if (this.BlipFillType !== null) {
var props = new Asc.asc_CShapeProperty();
@ -990,6 +1039,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 +1545,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.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'),
cls: 'btn-icon-default',
@ -1865,6 +1954,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);

95
apps/presentationeditor/main/app/view/TextArtSettings.js
View File

@ -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,54 @@ define([
this.fireEvent('editcomplete', this);
},
onNumLineTransparencyChange: function(field, newValue, oldValue, eOpts){
this.sldrLineTransparency.setValue(field.getNumberValue(), true);
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);
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._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;
if (!this._sendUndoPoint) { // start point was added
this.api.setEndPointHistory();
this._transparencyLineApplyFunc();
}
this._sendUndoPoint = true;
},
_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();
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() {
var me = this;
(new Common.Views.ImageFromUrlDialog({
@ -924,6 +975,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 +1504,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.sldrLineTransparency);
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,
itemHeight: 50,
@ -1772,6 +1865,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);
}
},

4
apps/presentationeditor/main/resources/less/rightmenu.less
View File

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

13
apps/spreadsheeteditor/main/app/template/ShapeSettings.template
View File

@ -142,6 +142,19 @@
</div>
</td>
</tr>
<tr>
<td>
<div class="padding-small" id="shape-line-panel-transparent-fill" style="width: 100%;">
<label class="header" style="display:block;"><%= scope.strTransparency %></label>
<div style="display: inline-block; margin-top: 3px;">
<label id="shape-line-lbl-transparency-start">0</label>
<div id="shape-line-slider-transparency" style="display: inline-block;margin: 0 4px; vertical-align: middle;"></div>
<label id="shape-line-lbl-transparency-end">100</label>
</div>
<div id="shape-line-spin-transparency"></div>
</div>
</td>
</tr>
<tr class="shape-rotation">
<td class="padding-small">
<div class="separator horizontal"></div>

13
apps/spreadsheeteditor/main/app/template/TextArtSettings.template
View File

@ -160,6 +160,19 @@
</div>
</td>
</tr>
<tr>
<td>
<div class="padding-small" id="textart-line-panel-transparent-fill" style="width: 100%;">
<label class="header" style="display:block;"><%= scope.strTransparency %></label>
<div style="display: inline-block; margin-top: 3px;">
<label id="textart-line-lbl-transparency-start">0</label>
<div id="textart-line-slider-transparency" style="display: inline-block;margin: 0 4px; vertical-align: middle;"></div>
<label id="textart-line-lbl-transparency-end">100</label>
</div>
<div id="textart-line-spin-transparency"></div>
</div>
</td>
</tr>
<tr class="textart-transform">
<td class="padding-small">
<div class="separator horizontal"></div>

91
apps/spreadsheeteditor/main/app/view/ShapeSettings.js
View File

@ -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,52 @@ define([
Common.NotificationCenter.trigger('edit:complete', this);
},
onNumLineTransparencyChange: function(field, newValue, oldValue, eOpts){
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);
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._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;
if (!this._sendUndoPoint) { // start point was added
this.api.setEndPointHistory();
this._transparencyLineApplyFunc();
}
this._sendUndoPoint = true;
},
_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();
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 +1035,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 +1560,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.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'),
cls: 'btn-icon-default',
@ -1883,6 +1972,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);

91
apps/spreadsheeteditor/main/app/view/TextArtSettings.js
View File

@ -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,52 @@ define([
Common.NotificationCenter.trigger('edit:complete', this);
},
onNumLineTransparencyChange: function(field, newValue, oldValue, eOpts){
this.sldrLineTransparency.setValue(field.getNumberValue(), true);
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);
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._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;
if (!this._sendUndoPoint) { // start point was added
this.api.setEndPointHistory();
this._transparencyLineApplyFunc();
}
this._sendUndoPoint = true;
},
_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();
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 +970,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) {
@ -1439,6 +1498,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.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,
itemHeight: 50,
@ -1769,6 +1858,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);
}
},

4
apps/spreadsheeteditor/main/resources/less/rightmenu.less
View File

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