From 63a06b9d195024b34670f48bf829fe73574c5b49 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Tue, 12 Feb 2019 15:31:27 +0300 Subject: [PATCH] [DE] Add option for align objects, distribute objects --- .../main/app/controller/PageLayout.js | 37 +++++++---- .../main/app/view/DocumentHolder.js | 44 +++++++++---- apps/documenteditor/main/app/view/Toolbar.js | 66 ++++++++++++++++--- apps/documenteditor/main/locale/en.json | 9 ++- .../main/resources/less/toolbar.less | 5 +- 5 files changed, 122 insertions(+), 39 deletions(-) diff --git a/apps/documenteditor/main/app/controller/PageLayout.js b/apps/documenteditor/main/app/controller/PageLayout.js index a3930d06c..737952852 100644 --- a/apps/documenteditor/main/app/controller/PageLayout.js +++ b/apps/documenteditor/main/app/controller/PageLayout.js @@ -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); }, diff --git a/apps/documenteditor/main/app/view/DocumentHolder.js b/apps/documenteditor/main/app/view/DocumentHolder.js index 9579be4eb..c481d9c71 100644 --- a/apps/documenteditor/main/app/view/DocumentHolder.js +++ b/apps/documenteditor/main/app/view/DocumentHolder.js @@ -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 || {})); }); \ No newline at end of file diff --git a/apps/documenteditor/main/app/view/Toolbar.js b/apps/documenteditor/main/app/view/Toolbar.js index 478f349d3..2c01a8a05 100644 --- a/apps/documenteditor/main/app/view/Toolbar.js +++ b/apps/documenteditor/main/app/view/Toolbar.js @@ -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 || {})); }); diff --git a/apps/documenteditor/main/locale/en.json b/apps/documenteditor/main/locale/en.json index f9f2abe1a..7d393094f 100644 --- a/apps/documenteditor/main/locale/en.json +++ b/apps/documenteditor/main/locale/en.json @@ -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" } \ No newline at end of file diff --git a/apps/documenteditor/main/resources/less/toolbar.less b/apps/documenteditor/main/resources/less/toolbar.less index c58ed40ee..2465dda2f 100644 --- a/apps/documenteditor/main/resources/less/toolbar.less +++ b/apps/documenteditor/main/resources/less/toolbar.less @@ -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);