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

[DE] Add option for align objects, distribute objects

Browse source
This commit is contained in:
Julia Radzhabova 2019-02-12 15:31:27 +03:00
parent dad4ce3e90
commit 63a06b9d19
5 changed files with 122 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
apps/documenteditor/main/app/controller/PageLayout.js
View file

@ -65,6 +65,7 @@ define([
var me = this;
me.toolbar.btnImgAlign.menu.on('item:click', me.onClickMenuAlign.bind(me));
me.toolbar.btnImgAlign.menu.on('show:before', me.onBeforeShapeAlign.bind(me));
me.toolbar.btnImgWrapping.menu.on('item:click', me.onClickMenuWrapping.bind(me));
me.toolbar.btnImgGroup.menu.on('item:click', me.onClickMenuGroup.bind(me));
me.toolbar.btnImgForward.menu.on('item:click', me.onClickMenuForward.bind(me));
@ -178,21 +179,29 @@ define([
me.toolbar.btnImgWrapping.setDisabled(true);
},
onClickMenuAlign: function (menu, item, e) {
var props = new Asc.asc_CImgProperty();
if ( !_.isUndefined(item.options.halign) ) {
props.put_PositionH(new Asc.CImagePositionH());
props.get_PositionH().put_UseAlign(true);
props.get_PositionH().put_Align(item.options.halign);
props.get_PositionH().put_RelativeFrom(Asc.c_oAscRelativeFromH.Margin);
} else {
props.put_PositionV(new Asc.CImagePositionV());
props.get_PositionV().put_UseAlign(true);
props.get_PositionV().put_Align(item.options.valign);
props.get_PositionV().put_RelativeFrom(Asc.c_oAscRelativeFromV.Margin);
}
onBeforeShapeAlign: function() {
var value = this.api.asc_getSelectedDrawingObjectsCount(),
alignto = Common.Utils.InternalSettings.get("de-img-align-to");
this.toolbar.mniAlignObjects.setDisabled(value<2);
this.toolbar.mniAlignObjects.setChecked(value>1 && (!alignto || alignto==3), true);
this.toolbar.mniAlignToMargin.setChecked((value<2 && !alignto || alignto==2), true);
this.toolbar.mniAlignToPage.setChecked(alignto==1, true);
this.toolbar.mniDistribHor.setDisabled(value<3 && this.toolbar.mniAlignObjects.isChecked());
this.toolbar.mniDistribVert.setDisabled(value<3 && this.toolbar.mniAlignObjects.isChecked());
},
this.api.ImgApply(props);
onClickMenuAlign: function (menu, item, e) {
var value = this.toolbar.mniAlignToPage.isChecked() ? Asc.c_oAscObjectsAlignType.Page : (this.toolbar.mniAlignToMargin.isChecked() ? Asc.c_oAscObjectsAlignType.Margin : Asc.c_oAscObjectsAlignType.Selected);
if (item.value>-1 && item.value < 6) {
this.api.put_ShapesAlign(item.value, value);
Common.component.Analytics.trackEvent('ToolBar', 'Shape Align');
} else if (item.value == 6) {
this.api.DistributeHorizontally(value);
Common.component.Analytics.trackEvent('ToolBar', 'Distribute');
} else if (item.value == 7){
this.api.DistributeVertically(value);
Common.component.Analytics.trackEvent('ToolBar', 'Distribute');
}
this.toolbar.fireEvent('editcomplete', this.toolbar);
},

44
apps/documenteditor/main/app/view/DocumentHolder.js
View file

@ -2010,19 +2010,18 @@ define([
menu : (function(){
function onItemClick(item, e) {
if (me.api) {
var properties = new Asc.asc_CImgProperty();
if (!_.isUndefined(item.options.halign)) {
properties.put_PositionH(new Asc.CImagePositionH());
properties.get_PositionH().put_UseAlign(true);
properties.get_PositionH().put_Align(item.options.halign);
properties.get_PositionH().put_RelativeFrom(Asc.c_oAscRelativeFromH.Margin);
} else {
properties.put_PositionV(new Asc.CImagePositionV());
properties.get_PositionV().put_UseAlign(true);
properties.get_PositionV().put_Align(item.options.valign);
properties.get_PositionV().put_RelativeFrom(Asc.c_oAscRelativeFromV.Margin);
var alignto = Common.Utils.InternalSettings.get("de-img-align-to"),
value = (alignto==1) ? Asc.c_oAscObjectsAlignType.Page : ((me.api.asc_getSelectedDrawingObjectsCount()<2 && !alignto || alignto==2) ? Asc.c_oAscObjectsAlignType.Margin : Asc.c_oAscObjectsAlignType.Selected);
if (item.value < 6) {
me.api.put_ShapesAlign(item.value, value);
Common.component.Analytics.trackEvent('DocumentHolder', 'Shape Align');
} else if (item.value == 6) {
me.api.DistributeHorizontally(value);
Common.component.Analytics.trackEvent('DocumentHolder', 'Distribute Horizontally');
} else if (item.value == 7){
me.api.DistributeVertically(value);
Common.component.Analytics.trackEvent('DocumentHolder', 'Distribute Vertically');
}
me.api.ImgApply(properties);
}
me.fireEvent('editcomplete', me);
}
@ -2059,6 +2058,17 @@ define([
caption : me.textShapeAlignBottom,
iconCls : 'mnu-img-align-bottom',
valign : Asc.c_oAscAlignV.Bottom
}).on('click', onItemClick),
{caption : '--'},
new Common.UI.MenuItem({
caption : me.txtDistribHor,
iconCls : 'mnu-distrib-hor',
value : 6
}).on('click', onItemClick),
new Common.UI.MenuItem({
caption : me.txtDistribVert,
iconCls : 'mnu-distrib-vert',
value : 7
}).on('click', onItemClick)
]
})
@ -2421,6 +2431,12 @@ define([
me.menuOriginalSize.setDisabled(islocked || value.imgProps.value.get_ImageUrl()===null || value.imgProps.value.get_ImageUrl()===undefined);
menuImageAdvanced.setDisabled(islocked);
menuImageAlign.setDisabled( islocked || (wrapping == Asc.c_oAscWrapStyle2.Inline) );
if (!(islocked || (wrapping == Asc.c_oAscWrapStyle2.Inline))) {
var objcount = me.api.asc_getSelectedDrawingObjectsCount(),
alignto = Common.Utils.InternalSettings.get("de-img-align-to"); // 1 - page, 2 - margin, 3 - selected
menuImageAlign.menu.items[7].setDisabled(objcount==2 && (!alignto || alignto==3));
menuImageAlign.menu.items[8].setDisabled(objcount==2 && (!alignto || alignto==3));
}
menuImageArrange.setDisabled( wrapping == Asc.c_oAscWrapStyle2.Inline );
if (me.api) {
@ -3889,7 +3905,9 @@ define([
textSeparateList: 'Separate list',
textJoinList: 'Join to previous list',
textNumberingValue: 'Numbering Value',
bulletsText: 'Bullets and Numbering'
bulletsText: 'Bullets and Numbering',
txtDistribHor : 'Distribute Horizontally',
txtDistribVert : 'Distribute Vertically',
}, DE.Views.DocumentHolder || {}));
});

66
apps/documenteditor/main/app/view/Toolbar.js
View file

@ -1411,32 +1411,77 @@ define([
}));
me.btnImgAlign.updateHint(me.tipImgAlign);
me.mniAlignToPage = new Common.UI.MenuItem({
caption: me.txtPageAlign,
checkable: true,
toggleGroup: 'imgalign',
value: -1
}).on('click', function (mnu) {
Common.Utils.InternalSettings.set("de-img-align-to", 1);
});
me.mniAlignToMargin = new Common.UI.MenuItem({
caption: me.txtMarginAlign,
checkable: true,
toggleGroup: 'imgalign',
value: -1
}).on('click', function (mnu) {
Common.Utils.InternalSettings.set("de-img-align-to", 2);
});
me.mniAlignObjects = new Common.UI.MenuItem({
caption: me.txtObjectsAlign,
checkable: true,
toggleGroup: 'imgalign',
value: -1
}).on('click', function (mnu) {
Common.Utils.InternalSettings.set("de-img-align-to", 3);
});
me.mniDistribHor = new Common.UI.MenuItem({
caption: me.txtDistribHor,
iconCls: 'mnu-distrib-hor',
value: 6
});
me.mniDistribVert = new Common.UI.MenuItem({
caption: me.txtDistribVert,
iconCls: 'mnu-distrib-vert',
value: 7
});
me.btnImgAlign.setMenu(new Common.UI.Menu({
items: [{
caption : _holder_view.textShapeAlignLeft,
iconCls : 'mnu-img-align-left',
halign : Asc.c_oAscAlignH.Left
value: Asc.c_oAscAlignShapeType.ALIGN_LEFT
}, {
caption : _holder_view.textShapeAlignCenter,
iconCls : 'mnu-img-align-center',
halign : Asc.c_oAscAlignH.Center
value: Asc.c_oAscAlignShapeType.ALIGN_CENTER
}, {
caption : _holder_view.textShapeAlignRight,
iconCls : 'mnu-img-align-right',
halign : Asc.c_oAscAlignH.Right
value: Asc.c_oAscAlignShapeType.ALIGN_RIGHT
}, {
caption : _holder_view.textShapeAlignTop,
iconCls : 'mnu-img-align-top',
valign : Asc.c_oAscAlignV.Top
value: Asc.c_oAscAlignShapeType.ALIGN_TOP
}, {
caption : _holder_view.textShapeAlignMiddle,
iconCls : 'mnu-img-align-middle',
valign : Asc.c_oAscAlignV.Center
value: Asc.c_oAscAlignShapeType.ALIGN_MIDDLE
}, {
caption : _holder_view.textShapeAlignBottom,
iconCls : 'mnu-img-align-bottom',
valign : Asc.c_oAscAlignV.Bottom
}]
value: Asc.c_oAscAlignShapeType.ALIGN_BOTTOM
},
{caption: '--'},
me.mniDistribHor,
me.mniDistribVert,
{caption: '--'},
me.mniAlignToPage,
me.mniAlignToMargin,
me.mniAlignObjects
]
}));
me.btnImgGroup.updateHint(me.tipImgGroup);
@ -2382,7 +2427,12 @@ define([
textNoHighlight: 'No highlighting',
mniImageFromStorage: 'Image from Storage',
capBtnBlankPage: 'Blank Page',
tipBlankPage: 'Insert blank page'
tipBlankPage: 'Insert blank page',
txtDistribHor: 'Distribute Horizontally',
txtDistribVert: 'Distribute Vertically',
txtPageAlign: 'Align to Page',
txtMarginAlign: 'Align to Margin',
txtObjectsAlign: 'Align Selected Objects'
}
})(), DE.Views.Toolbar || {}));
});

9
apps/documenteditor/main/locale/en.json
View file

@ -1240,6 +1240,8 @@
"DE.Views.DocumentHolder.txtUngroup": "Ungroup",
"DE.Views.DocumentHolder.updateStyleText": "Update %1 style",
"DE.Views.DocumentHolder.vertAlignText": "Vertical Alignment",
"DE.Views.DocumentHolder.txtDistribHor": "Distribute Horizontally",
"DE.Views.DocumentHolder.txtDistribVert": "Distribute Vertically",
"DE.Views.DropcapSettingsAdvanced.cancelButtonText": "Cancel",
"DE.Views.DropcapSettingsAdvanced.okButtonText": "Ok",
"DE.Views.DropcapSettingsAdvanced.strBorders": "Borders & Fill",
@ -2144,5 +2146,10 @@
"DE.Views.Toolbar.txtScheme6": "Concourse",
"DE.Views.Toolbar.txtScheme7": "Equity",
"DE.Views.Toolbar.txtScheme8": "Flow",
"DE.Views.Toolbar.txtScheme9": "Foundry"
"DE.Views.Toolbar.txtScheme9": "Foundry",
"DE.Views.Toolbar.txtDistribHor": "Distribute Horizontally",
"DE.Views.Toolbar.txtDistribVert": "Distribute Vertically",
"DE.Views.Toolbar.txtPageAlign": "Align to Page",
"DE.Views.Toolbar.txtMarginAlign": "Align to Margin",
"DE.Views.Toolbar.txtObjectsAlign": "Align Selected Objects"
}

5
apps/documenteditor/main/resources/less/toolbar.less
View file

@ -355,9 +355,8 @@
.menu-icon-normal(mnu-img-align-top, 16, @menu-icon-size);
.menu-icon-normal(mnu-img-align-middle, 17, @menu-icon-size);
.menu-icon-normal(mnu-img-align-bottom, 18, @menu-icon-size);
//.menu-btn-icon(mnu-, 19, @menu-icon-size);
//.menu-btn-icon(mnu-, 20, @menu-icon-size);
.menu-icon-normal(mnu-distrib-hor, 19, @menu-icon-size);
.menu-icon-normal(mnu-distrib-vert, 20, @menu-icon-size);
.menu-icon-normal(mnu-align-center, 21, @menu-icon-size);
.menu-icon-normal(mnu-align-just, 22, @menu-icon-size);
.menu-icon-normal(mnu-align-left, 23, @menu-icon-size);