Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[PE] Add placement tab in chart advanced settings, add position settings in shape advanced settings

Browse source
This commit is contained in:
JuliaSvinareva 2022-01-28 20:47:56 +03:00
parent 472427df94
commit ee84a1d160
10 changed files with 391 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
apps/presentationeditor/main/app/controller/Toolbar.js
View file

@ -1425,6 +1425,7 @@ define([
var win = new PE.Views.ShapeSettingsAdvanced(
{
shapeProps: elValue,
slideSize: PE.getController('Toolbar').currentPageSize,
handler: function(result, value) {
if (result == 'ok') {
if (me.api) {

56
apps/presentationeditor/main/app/template/ChartSettingsAdvanced.template
View file

@ -1,4 +1,58 @@
<div id="id-adv-chart-alttext" class="settings-panel active">
<div id="id-adv-chart-placement" class="settings-panel active">
<div class="inner-content">
<table cols="3">
<tr>
<td colspan="4" width="88px" class="padding-small">
<label class="header"><%= scope.textSize %></label>
</td>
</tr>
<tr>
<td width="108px" class="padding-large">
<label class="input-label"><%= scope.textWidth %></label>
<div id="chart-advanced-spin-width"></div>
</td>
<td width="28px" style="vertical-align: bottom;" class="padding-large">
<div id="chart-advanced-button-ratio"></div>
</td>
<td width="108px" class="padding-large">
<label class="input-label"><%= scope.textHeight %></label>
<div id="chart-advanced-spin-height"></div>
</td>
</tr>
</table>
</div>
<div class="padding-small"></div>
<div class="inner-content">
<table cols="2" style="width: 100%;">
<tr>
<td colspan="4" width="88px" class="padding-small">
<label class="header"><%= scope.textPosition %></label>
</td>
</tr>
<tr>
<td class="padding-small" width="115px">
<label class="input-label"><%= scope.textHorizontal %></label>
<div id="chart-advanced-spin-x"></div>
</td>
<td class="padding-small">
<label class="input-label"><%= scope.textFrom %></label>
<div id="chart-advanced-combo-from-x"></div>
</td>
</tr>
<tr>
<td class="padding-small">
<label class="input-label"><%= scope.textVertical %></label>
<div id="chart-advanced-spin-y"></div>
</td>
<td class="padding-small">
<label class="input-label"><%= scope.textFrom %></label>
<div id="chart-advanced-combo-from-y"></div>
</td>
</tr>
</table>
</div>
</div>
<div id="id-adv-chart-alttext" class="settings-panel">
<div class="inner-content">
<table cols="1" width="100%">
<tr>

35
apps/presentationeditor/main/app/template/ShapeSettingsAdvanced.template
View file

@ -1,6 +1,11 @@
<div id="id-adv-shape-width" class="settings-panel active">
<div class="inner-content">
<table cols="3">
<tr>
<td colspan="3" width="88px" class="padding-small">
<label class="header"><%= scope.textSize %></label>
</td>
</tr>
<tr>
<td width="108px">
<label class="input-label"><%= scope.textWidth %></label>
@ -16,6 +21,36 @@
</tr>
</table>
</div>
<div class="padding-large"></div>
<div class="inner-content">
<table cols="2" style="width: 100%;">
<tr>
<td colspan="4" width="88px" class="padding-small">
<label class="header"><%= scope.textPosition %></label>
</td>
</tr>
<tr>
<td class="padding-small" width="115px">
<label class="input-label"><%= scope.textHorizontal %></label>
<div id="shape-advanced-spin-x"></div>
</td>
<td class="padding-small">
<label class="input-label"><%= scope.textFrom %></label>
<div id="shape-advanced-combo-from-x"></div>
</td>
</tr>
<tr>
<td class="padding-small">
<label class="input-label"><%= scope.textVertical %></label>
<div id="shape-advanced-spin-y"></div>
</td>
<td class="padding-small">
<label class="input-label"><%= scope.textFrom %></label>
<div id="shape-advanced-combo-from-y"></div>
</td>
</tr>
</table>
</div>
</div>
<div id="id-adv-shape-rotate" class="settings-panel active">
<div class="inner-content padding-large">

1
apps/presentationeditor/main/app/view/ChartSettings.js
View file

@ -486,6 +486,7 @@ define([
(new PE.Views.ChartSettingsAdvanced(
{
chartProps: elValue,
slideSize: PE.getController('Toolbar').currentPageSize,
handler: function(result, value) {
if (result == 'ok') {
if (me.api) {

193
apps/presentationeditor/main/app/view/ChartSettingsAdvanced.js
View file

@ -50,13 +50,15 @@ define([ 'text!presentationeditor/main/app/template/ChartSettingsAdvanced.tem
height: 342,
toggleGroup: 'chart-adv-settings-group',
properties: null,
storageName: 'pe-chart-settings-adv-category'
storageName: 'pe-chart-settings-adv-category',
sizeMax: {width: 55.88, height: 55.88},
},
initialize : function(options) {
_.extend(this.options, {
title: this.textTitle,
items: [
{panelId: 'id-adv-chart-placement', panelCaption: this.textPlacement},
{panelId: 'id-adv-chart-alttext', panelCaption: this.textAlt}
],
contentTemplate: _.template(contentTemplate)({
@ -65,7 +67,10 @@ define([ 'text!presentationeditor/main/app/template/ChartSettingsAdvanced.tem
}, options);
Common.Views.AdvancedSettingsWindow.prototype.initialize.call(this, this.options);
this.spinners = [];
this._originalProps = this.options.chartProps;
this.slideSize = this.options.slideSize;
this._changedProps = null;
},
@ -74,6 +79,125 @@ define([ 'text!presentationeditor/main/app/template/ChartSettingsAdvanced.tem
var me = this;
// Placement
this.spnWidth = new Common.UI.MetricSpinner({
el: $('#chart-advanced-spin-width'),
step: .1,
width: 100,
defaultUnit : "cm",
value: '3 cm',
maxValue: 55.88,
minValue: 0
});
this.spnWidth.on('change', _.bind(function(field){
if (this.btnRatio.pressed) {
var w = field.getNumberValue();
var h = w/this._nRatio;
if (h>this.sizeMax.height) {
h = this.sizeMax.height;
w = h * this._nRatio;
this.spnWidth.setValue(w, true);
}
this.spnHeight.setValue(h, true);
}
if (this._changedProps) {
this._changedProps.put_Width(Common.Utils.Metric.fnRecalcToMM(field.getNumberValue()));
this._changedProps.put_Height(Common.Utils.Metric.fnRecalcToMM(this.spnHeight.getNumberValue()));
}
}, this));
this.spinners.push(this.spnWidth);
this.spnHeight = new Common.UI.MetricSpinner({
el: $('#chart-advanced-spin-height'),
step: .1,
width: 100,
defaultUnit : "cm",
value: '3 cm',
maxValue: 55.88,
minValue: 0
});
this.spnHeight.on('change', _.bind(function(field, newValue, oldValue, eOpts){
var h = field.getNumberValue(), w = null;
if (this.btnRatio.pressed) {
w = h * this._nRatio;
if (w>this.sizeMax.width) {
w = this.sizeMax.width;
h = w/this._nRatio;
this.spnHeight.setValue(h, true);
}
this.spnWidth.setValue(w, true);
}
if (this._changedProps) {
this._changedProps.put_Height(Common.Utils.Metric.fnRecalcToMM(field.getNumberValue()));
this._changedProps.put_Width(Common.Utils.Metric.fnRecalcToMM(this.spnWidth.getNumberValue()));
}
}, this));
this.spinners.push(this.spnHeight);
this.btnRatio = new Common.UI.Button({
parentEl: $('#chart-advanced-button-ratio'),
cls: 'btn-toolbar',
iconCls: 'toolbar__icon advanced-btn-ratio',
style: 'margin-bottom: 1px;',
enableToggle: true,
hint: this.textKeepRatio
});
this.btnRatio.on('click', _.bind(function(btn, e) {
if (btn.pressed && this.spnHeight.getNumberValue()>0) {
this._nRatio = this.spnWidth.getNumberValue()/this.spnHeight.getNumberValue();
}
if (this._changedProps) {
this._changedProps.asc_putLockAspect(btn.pressed);
}
}, this));
this.spnX = new Common.UI.MetricSpinner({
el: $('#chart-advanced-spin-x'),
step: .1,
width: 85,
defaultUnit : "cm",
defaultValue : 0,
value: '0 cm',
maxValue: 55.87,
minValue: -55.87
});
this.spinners.push(this.spnX);
this.spnY = new Common.UI.MetricSpinner({
el: $('#chart-advanced-spin-y'),
step: .1,
width: 85,
defaultUnit : "cm",
defaultValue : 0,
value: '0 cm',
maxValue: 55.87,
minValue: -55.87
});
this.spinners.push(this.spnY);
this.cmbFromX = new Common.UI.ComboBox({
el: $('#chart-advanced-combo-from-x'),
cls: 'input-group-nr',
style: "width: 100px;",
menuStyle: 'min-width: 100px;',
data: [
{ value: 'left', displayValue: this.textTopLeftCorner },
{ value: 'center', displayValue: this.textCenter }
]
});
this.cmbFromY = new Common.UI.ComboBox({
el: $('#chart-advanced-combo-from-y'),
cls: 'input-group-nr',
style: "width: 100px;",
menuStyle: 'min-width: 100px;',
data: [
{ value: 'left', displayValue: this.textTopLeftCorner },
{ value: 'center', displayValue: this.textCenter }
]
});
// Alt Text
this.inputAltTitle = new Common.UI.InputField({
@ -97,6 +221,7 @@ define([ 'text!presentationeditor/main/app/template/ChartSettingsAdvanced.tem
},
afterRender: function() {
this.updateMetricUnit();
this._setDefaults(this._originalProps);
if (this.storageName) {
var value = Common.localStorage.getItem(this.storageName);
@ -125,6 +250,28 @@ define([ 'text!presentationeditor/main/app/template/ChartSettingsAdvanced.tem
_setDefaults: function(props) {
if (props ){
this.spnWidth.setMaxValue(this.sizeMax.width);
this.spnHeight.setMaxValue(this.sizeMax.height);
this.spnWidth.setValue(Common.Utils.Metric.fnRecalcFromMM(props.get_Width()).toFixed(2), true);
this.spnHeight.setValue(Common.Utils.Metric.fnRecalcFromMM(props.get_Height()).toFixed(2), true);
var value = props.asc_getLockAspect();
this.btnRatio.toggle(value);
if (props.get_Height()>0)
this._nRatio = props.get_Width()/props.get_Height();
this.cmbFromX.setValue('left');
this.cmbFromY.setValue('left');
/*if (props.get_Position()) {
var Position = {X: props.get_Position().get_X(), Y: props.get_Position().get_Y()};
this.spnX.setValue((Position.X !== null && Position.X !== undefined) ? Common.Utils.Metric.fnRecalcFromMM(Position.X) : '', true);
this.spnY.setValue((Position.Y !== null && Position.Y !== undefined) ? Common.Utils.Metric.fnRecalcFromMM(Position.Y) : '', true);
} else {*/
this.spnX.setValue('', true);
this.spnY.setValue('', true);
/*}*/
var value = props.asc_getTitle();
this.inputAltTitle.setValue(value ? value : '');
@ -136,6 +283,23 @@ define([ 'text!presentationeditor/main/app/template/ChartSettingsAdvanced.tem
},
getSettings: function() {
/*var Position = new Asc.CPosition();
if (this.spnX.getValue() !== '') {
var x = Common.Utils.Metric.fnRecalcToMM(this.spnX.getNumberValue());
if (this.cmbFromX.getValue() === 'center') {
x = (this.slideSize.width/36000)/2 + x;
}
Position.put_X(x);
}
if (this.spnY.getValue() !== '') {
var y = Common.Utils.Metric.fnRecalcToMM(this.spnY.getNumberValue());
if (this.cmbFromY.getValue() === 'center') {
y = (this.slideSize.height/36000)/2 + y;
}
Position.put_Y(y);
}
this._changedProps.put_Position(Position);*/
if (this.isAltTitleChanged)
this._changedProps.asc_putTitle(this.inputAltTitle.getValue());
@ -145,11 +309,36 @@ define([ 'text!presentationeditor/main/app/template/ChartSettingsAdvanced.tem
return { chartProps: this._changedProps} ;
},
updateMetricUnit: function() {
if (this.spinners) {
for (var i=0; i<this.spinners.length; i++) {
var spinner = this.spinners[i];
spinner.setDefaultUnit(Common.Utils.Metric.getCurrentMetricName());
spinner.setStep(Common.Utils.Metric.getCurrentMetric()==Common.Utils.Metric.c_MetricUnits.pt ? 1 : 0.1);
}
}
this.sizeMax = {
width: Common.Utils.Metric.fnRecalcFromMM(this.options.sizeMax.width*10),
height: Common.Utils.Metric.fnRecalcFromMM(this.options.sizeMax.height*10)
};
},
textTitle: 'Chart - Advanced Settings',
textAlt: 'Alternative Text',
textAltTitle: 'Title',
textAltDescription: 'Description',
textAltTip: 'The alternative text-based representation of the visual object information, which will be read to the people with vision or cognitive impairments to help them better understand what information there is in the image, autoshape, chart or table.'
textAltTip: 'The alternative text-based representation of the visual object information, which will be read to the people with vision or cognitive impairments to help them better understand what information there is in the image, autoshape, chart or table.',
textPlacement: 'Placement',
textSize: 'Size',
textWidth: 'Width',
textHeight: 'Height',
textPosition: 'Position',
textHorizontal: 'Horizontal',
textVertical: 'Vertical',
textFrom: 'From',
textTopLeftCorner: 'Top Left Corner',
textCenter: 'Center',
textKeepRatio: 'Constant Proportions',
}, PE.Views.ChartSettingsAdvanced || {}));
});

1
apps/presentationeditor/main/app/view/DocumentHolder.js
View file

@ -2561,6 +2561,7 @@ define([
(new PE.Views.ShapeSettingsAdvanced(
{
shapeProps: elValue,
slideSize: PE.getController('Toolbar').currentPageSize,
handler: function(result, value) {
if (result == 'ok') {
if (me.api) {

1
apps/presentationeditor/main/app/view/ShapeSettings.js
View file

@ -737,6 +737,7 @@ define([
(new PE.Views.ShapeSettingsAdvanced(
{
shapeProps: elValue,
slideSize: PE.getController('Toolbar').currentPageSize,
handler: function(result, value) {
if (result == 'ok') {
if (me.api) {

87
apps/presentationeditor/main/app/view/ShapeSettingsAdvanced.js
View file

@ -61,7 +61,7 @@ define([ 'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
_.extend(this.options, {
title: this.textTitle,
items: [
{panelId: 'id-adv-shape-width', panelCaption: this.textSize},
{panelId: 'id-adv-shape-width', panelCaption: this.textPlacement},
{panelId: 'id-adv-shape-rotate', panelCaption: this.textRotation},
{panelId: 'id-adv-shape-shape', panelCaption: this.textWeightArrows},
{panelId: 'id-adv-shape-margins', panelCaption: this.textTextBox},
@ -80,6 +80,7 @@ define([ 'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
this._nRatio = 1;
this._originalProps = this.options.shapeProps;
this.slideSize = this.options.slideSize;
this._changedProps = null;
},
@ -159,6 +160,52 @@ define([ 'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
}
}, this));
this.spnX = new Common.UI.MetricSpinner({
el: $('#shape-advanced-spin-x'),
step: .1,
width: 85,
defaultUnit : "cm",
defaultValue : 0,
value: '0 cm',
maxValue: 55.87,
minValue: -55.87
});
this.spinners.push(this.spnX);
this.spnY = new Common.UI.MetricSpinner({
el: $('#shape-advanced-spin-y'),
step: .1,
width: 85,
defaultUnit : "cm",
defaultValue : 0,
value: '0 cm',
maxValue: 55.87,
minValue: -55.87
});
this.spinners.push(this.spnY);
this.cmbFromX = new Common.UI.ComboBox({
el: $('#shape-advanced-combo-from-x'),
cls: 'input-group-nr',
style: "width: 100px;",
menuStyle: 'min-width: 100px;',
data: [
{ value: 'left', displayValue: this.textTopLeftCorner },
{ value: 'center', displayValue: this.textCenter }
]
});
this.cmbFromY = new Common.UI.ComboBox({
el: $('#shape-advanced-combo-from-y'),
cls: 'input-group-nr',
style: "width: 100px;",
menuStyle: 'min-width: 100px;',
data: [
{ value: 'left', displayValue: this.textTopLeftCorner },
{ value: 'center', displayValue: this.textCenter }
]
});
// Margins
this.spnMarginTop = new Common.UI.MetricSpinner({
el: $('#shape-margin-top'),
@ -587,6 +634,18 @@ define([ 'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
var value = props.asc_getLockAspect();
this.btnRatio.toggle(value);
this.cmbFromX.setValue('left');
this.cmbFromY.setValue('left');
/*if (props.get_Position()) {
var Position = {X: props.get_Position().get_X(), Y: props.get_Position().get_Y()};
this.spnX.setValue((Position.X !== null && Position.X !== undefined) ? Common.Utils.Metric.fnRecalcFromMM(Position.X) : '', true);
this.spnY.setValue((Position.Y !== null && Position.Y !== undefined) ? Common.Utils.Metric.fnRecalcFromMM(Position.Y) : '', true);
} else {*/
this.spnX.setValue('', true);
this.spnY.setValue('', true);
/*}*/
this._setShapeDefaults(props);
var margins = props.get_paddings();
@ -643,6 +702,23 @@ define([ 'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
},
getSettings: function() {
/*var Position = new Asc.CPosition();
if (this.spnX.getValue() !== '') {
var x = Common.Utils.Metric.fnRecalcToMM(this.spnX.getNumberValue());
if (this.cmbFromX.getValue() === 'center') {
x = (this.slideSize.width/36000)/2 + x;
}
Position.put_X(x);
}
if (this.spnY.getValue() !== '') {
var y = Common.Utils.Metric.fnRecalcToMM(this.spnY.getNumberValue());
if (this.cmbFromY.getValue() === 'center') {
y = (this.slideSize.height/36000)/2 + y;
}
Position.put_Y(y);
}
this._changedProps.put_Position(Position);*/
if (this.isAltTitleChanged)
this._changedProps.asc_putTitle(this.inputAltTitle.getValue());
@ -868,7 +944,14 @@ define([ 'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
textAutofit: 'AutoFit',
textNofit: 'Do not Autofit',
textShrink: 'Shrink text on overflow',
textResizeFit: 'Resize shape to fit text'
textResizeFit: 'Resize shape to fit text',
textPlacement: 'Placement',
textPosition: 'Position',
textHorizontal: 'Horizontal',
textFrom: 'From',
textVertical: 'Vertical',
textTopLeftCorner: 'Top Left Corner',
textCenter: 'Center'
}, PE.Views.ShapeSettingsAdvanced || {}));
});

3
apps/presentationeditor/main/app/view/TableSettingsAdvanced.js
View file

@ -618,7 +618,8 @@ define([ 'text!presentationeditor/main/app/template/TableSettingsAdvanced.tem
textTopLeftCorner: 'Top Left Corner',
textCenter: 'Center',
textWidth: 'Width',
textHeight: 'Height'
textHeight: 'Height',
textKeepRatio: 'Constant Proportions'
}, PE.Views.TableSettingsAdvanced || {}));
});

19
apps/presentationeditor/main/locale/en.json
View file

@ -1321,6 +1321,17 @@
"PE.Views.ChartSettingsAdvanced.textAltTip": "The alternative text-based representation of the visual object information, which will be read to the people with vision or cognitive impairments to help them better understand what information there is in the image, autoshape, chart, or table.",
"PE.Views.ChartSettingsAdvanced.textAltTitle": "Title",
"PE.Views.ChartSettingsAdvanced.textTitle": "Chart - Advanced Settings",
"PE.Views.ChartSettingsAdvanced.textPlacement": "Placement",
"PE.Views.ChartSettingsAdvanced.textSize": "Size",
"PE.Views.ChartSettingsAdvanced.textWidth": "Width",
"PE.Views.ChartSettingsAdvanced.textHeight": "Height",
"PE.Views.ChartSettingsAdvanced.textPosition": "Position",
"PE.Views.ChartSettingsAdvanced.textHorizontal": "Horizontal",
"PE.Views.ChartSettingsAdvanced.textVertical": "Vertical",
"PE.Views.ChartSettingsAdvanced.textFrom": "From",
"PE.Views.ChartSettingsAdvanced.textTopLeftCorner": "Top Left Corner",
"PE.Views.ChartSettingsAdvanced.textCenter": "Center",
"PE.Views.ChartSettingsAdvanced.textKeepRatio": "Constant Proportions",
"PE.Views.DateTimeDialog.confirmDefault": "Set default format for {0}: \"{1}\"",
"PE.Views.DateTimeDialog.textDefault": "Set as default",
"PE.Views.DateTimeDialog.textFormat": "Formats",
@ -1866,6 +1877,13 @@
"PE.Views.ShapeSettingsAdvanced.textWeightArrows": "Weights & Arrows",
"PE.Views.ShapeSettingsAdvanced.textWidth": "Width",
"PE.Views.ShapeSettingsAdvanced.txtNone": "None",
"PE.Views.ShapeSettingsAdvanced.textPlacement": "Placement",
"PE.Views.ShapeSettingsAdvanced.textPosition": "Position",
"PE.Views.ShapeSettingsAdvanced.textHorizontal": "Horizontal",
"PE.Views.ShapeSettingsAdvanced.textFrom": "From",
"PE.Views.ShapeSettingsAdvanced.textVertical": "Vertical",
"PE.Views.ShapeSettingsAdvanced.textTopLeftCorner": "Top Left Corner",
"PE.Views.ShapeSettingsAdvanced.textCenter": "Center",
"PE.Views.SignatureSettings.notcriticalErrorTitle": "Warning",
"PE.Views.SignatureSettings.strDelete": "Remove Signature",
"PE.Views.SignatureSettings.strDetails": "Signature Details",
@ -2033,6 +2051,7 @@
"PE.Views.TableSettingsAdvanced.textFrom": "From",
"PE.Views.TableSettingsAdvanced.textTopLeftCorner": "Top Left Corner",
"PE.Views.TableSettingsAdvanced.textCenter": "Center",
"PE.Views.TableSettingsAdvanced.textKeepRatio": "Constant Proportions",
"PE.Views.TextArtSettings.strBackground": "Background color",
"PE.Views.TextArtSettings.strColor": "Color",
"PE.Views.TextArtSettings.strFill": "Fill",