Adding shapes merge button

ONLYOFFICE · Nov 27, 2024 · 2c78bb8 · 2c78bb8
1 parent 0306583
commit 2c78bb8
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 6 deletions.
diff --git a/apps/documenteditor/main/app/controller/PageLayout.js b/apps/documenteditor/main/app/controller/PageLayout.js
@@ -79,6 +79,8 @@ define([
                 toolbar.btnImgForward.on('click', me.onClickMenuForward.bind(me, 'forward'));
                 toolbar.btnImgBackward.on('click', me.onClickMenuForward.bind(me, 'backward'));
 
+                toolbar.btnShapesMerge.menu.on('item:click', me.onClickMenuShapesMerge.bind(me));
+
                 toolbar.btnsPageBreak.forEach( function(btn) {
                     var _menu_section_break = btn.menu.items[2].menu;
                     _menu_section_break.on('item:click', function (menu, item, e) {
@@ -179,10 +181,10 @@ define([
                         paraProps = objects[i].get_ObjectValue()
                     }
                 }
-                me.toolbar.lockToolbar(Common.enumLock.noObjectSelected, no_object, {array: [me.toolbar.btnImgAlign, me.toolbar.btnImgGroup, me.toolbar.btnImgWrapping, me.toolbar.btnImgForward, me.toolbar.btnImgBackward]});
-                me.toolbar.lockToolbar(Common.enumLock.imageLock, islocked, {array: [me.toolbar.btnImgAlign, me.toolbar.btnImgGroup, me.toolbar.btnImgWrapping]});
-                me.toolbar.lockToolbar(Common.enumLock.contentLock, content_locked, {array: [me.toolbar.btnImgAlign, me.toolbar.btnImgGroup, me.toolbar.btnImgWrapping, me.toolbar.btnImgForward, me.toolbar.btnImgBackward]});
-                me.toolbar.lockToolbar(Common.enumLock.inImageInline, wrapping == Asc.c_oAscWrapStyle2.Inline, {array: [me.toolbar.btnImgAlign, me.toolbar.btnImgGroup]});
+                me.toolbar.lockToolbar(Common.enumLock.noObjectSelected, no_object, {array: [me.toolbar.btnImgAlign, me.toolbar.btnImgGroup, me.toolbar.btnImgWrapping, me.toolbar.btnImgForward, me.toolbar.btnImgBackward, me.toolbar.btnShapesMerge]});
+                me.toolbar.lockToolbar(Common.enumLock.imageLock, islocked, {array: [me.toolbar.btnImgAlign, me.toolbar.btnImgGroup, me.toolbar.btnImgWrapping, me.toolbar.btnShapesMerge]});
+                me.toolbar.lockToolbar(Common.enumLock.contentLock, content_locked, {array: [me.toolbar.btnImgAlign, me.toolbar.btnImgGroup, me.toolbar.btnImgWrapping, me.toolbar.btnImgForward, me.toolbar.btnImgBackward, me.toolbar.btnShapesMerge]});
+                me.toolbar.lockToolbar(Common.enumLock.inImageInline, wrapping == Asc.c_oAscWrapStyle2.Inline, {array: [me.toolbar.btnImgAlign, me.toolbar.btnImgGroup, me.toolbar.btnShapesMerge]});
                 me.toolbar.lockToolbar(Common.enumLock.inSmartartInternal, shapeProps && shapeProps.asc_getFromSmartArtInternal(), {array: [me.toolbar.btnImgForward, me.toolbar.btnImgBackward]});
                 me.toolbar.lockToolbar(Common.enumLock.cantGroup, !canGroupUngroup, {array: [me.toolbar.btnImgGroup]});
                 me.toolbar.lockToolbar(Common.enumLock.cantWrap, disable.wrapping, {array: [me.toolbar.btnImgWrapping]});
@@ -222,6 +224,14 @@ define([
                 this.toolbar.fireEvent('editcomplete', this.toolbar);
             },
 
+            onClickMenuShapesMerge: function (menu, item, e) {
+                if (item && item.value) {
+                    this.api.asc_mergeSelectedShapes(item.value); 
+                    Common.component.Analytics.trackEvent('ToolBar', 'Shapes Merge'); 
+                }
+                this.toolbar.fireEvent('editcomplete', this.toolbar);
+            },
+
             onClickMenuWrapping: function (menu, item, e) {
                 if (item.options.wrapType=='edit') {
                     this.api.StartChangeWrapPolygon();

diff --git a/apps/documenteditor/main/app/template/Toolbar.template b/apps/documenteditor/main/app/template/Toolbar.template
@@ -169,6 +169,7 @@
                     <span class="btn-slot text x-huge" id="slot-img-movebkwd"></span>
                     <span class="btn-slot text x-huge" id="slot-img-align"></span>
                     <span class="btn-slot text x-huge" id="slot-img-group"></span>
+                    <span class="btn-slot text x-huge" id="slot-shapes-merge"></span>
                 </div>
                 <div class="separator long"></div>
                 <div class="group">

diff --git a/apps/documenteditor/main/app/view/Toolbar.js b/apps/documenteditor/main/app/view/Toolbar.js
@@ -1561,6 +1561,19 @@ define([
                         dataHintDirection: 'bottom',
                         dataHintOffset: 'small'
                     });
+
+                    me.btnShapesMerge = new Common.UI.Button({
+                        cls: 'btn-toolbar x-huge icon-top',
+                        iconCls: 'toolbar__icon',
+                        lock: [_set.imageLock, _set.contentLock, _set.inImageInline, _set.noObjectSelected, _set.previewReviewMode, _set.viewFormMode, _set.lostConnect, _set.disableOnStart, _set.docLockView, _set.docLockForms, _set.docLockComments, _set.viewMode],
+                        caption: me.capShapesMerge,
+                        menu: true,
+                        action: 'shapes-merge',
+                        dataHint: '1',
+                        dataHintDirection: 'bottom',
+                        dataHintOffset: 'small'
+                    });
+
                     me.btnImgForward = new Common.UI.Button({
                         cls: 'btn-toolbar x-huge icon-top',
                         iconCls: 'toolbar__icon btn-img-frwd',
@@ -1643,7 +1656,7 @@ define([
                     });
 
                     me.toolbarControls.push(me.btnImgAlign,
-                        me.btnImgGroup, me.btnImgForward, me.btnImgBackward, me.btnImgWrapping, me.btnWatermark, me.btnPageColor);
+                        me.btnImgGroup, me.btnImgForward, me.btnImgBackward, me.btnImgWrapping, me.btnWatermark, me.btnPageColor, me.btnShapesMerge);
 
                     //
                     // Menus
@@ -2112,10 +2125,11 @@ define([
                 _injectComponent('#slot-btn-paracolor', this.btnParagraphColor);
                 _injectComponent('#slot-field-styles', this.listStyles);
                 _injectComponent('#slot-img-align', this.btnImgAlign);
-                _injectComponent('#slot-img-group', this.btnImgGroup);
+                _injectComponent('#slot-img-group', this.btnImgGroup); 
                 _injectComponent('#slot-img-movefrwd', this.btnImgForward);
                 _injectComponent('#slot-img-movebkwd', this.btnImgBackward);
                 _injectComponent('#slot-img-wrapping', this.btnImgWrapping);
+                _injectComponent('#slot-shapes-merge', this.btnShapesMerge);
                 _injectComponent('#slot-btn-watermark', this.btnWatermark);
                 _injectComponent('#slot-btn-hyphenation', this.btnHyphenation);
                 _injectComponent('#slot-spin-ind-left', this.numIndentsLeft);
@@ -2364,6 +2378,38 @@ define([
                         ]
                     }));
 
+                    me.btnShapesMerge.updateHint(me.tipShapesMerge);
+                    me.btnShapesMerge.setMenu(new Common.UI.Menu({
+                        cls: 'shifted-right',
+                        items: [
+                            {
+                                caption: me.textShapesUnion, 
+                                iconCls: 'menu__icon btn-shapes-union',
+                                value: 'unite',
+                            },
+                            {
+                                caption: me.textShapesCombine, 
+                                iconCls: 'menu__icon btn-shapes-combine',
+                                value: 'exclude',
+                            },
+                            {
+                                caption: me.textShapesFragment, 
+                                iconCls: 'menu__icon btn-shapes-fragment',
+                                value: 'divide',
+                            },
+                            {
+                                caption: me.textShapesIntersect, 
+                                iconCls: 'menu__icon btn-shapes-intersect',
+                                value: 'intersect',
+                            },
+                            {
+                                caption: me.textShapesSubtract, 
+                                iconCls: 'menu__icon btn-shapes-subtract',
+                                value: 'subtract',
+                            },
+                        ]
+                    }));
+
                     me.btnImgGroup.updateHint(me.tipImgGroup);
                     me.btnImgGroup.setMenu(new Common.UI.Menu({
                         items: [{

diff --git a/apps/documenteditor/main/locale/en.json b/apps/documenteditor/main/locale/en.json
@@ -3393,6 +3393,7 @@
   "DE.Views.Toolbar.capImgBackward": "Send Backward",
   "DE.Views.Toolbar.capImgForward": "Bring Forward",
   "DE.Views.Toolbar.capImgGroup": "Group",
+  "DE.Views.Toolbar.capShapesMerge": "Merge Shapes",
   "DE.Views.Toolbar.capImgWrapping": "Wrapping",
   "DE.Views.Toolbar.mniCapitalizeWords": "Capitalize Each Word",
   "DE.Views.Toolbar.mniCustomTable": "Insert custom table",
@@ -3536,6 +3537,11 @@
   "DE.Views.Toolbar.textTradeMark": "Trade Mark Sign",
   "DE.Views.Toolbar.textUnderline": "Underline",
   "DE.Views.Toolbar.textYen": "Yen Sign",
+  "DE.Views.Toolbar.textShapesUnion": "Union",
+  "DE.Views.Toolbar.textShapesCombine": "Combine",
+  "DE.Views.Toolbar.textShapesFragment": "Fragment",
+  "DE.Views.Toolbar.textShapesIntersect": "Intersect",
+  "DE.Views.Toolbar.textShapesSubtract": "Subtract",
   "DE.Views.Toolbar.tipAlignCenter": "Align center",
   "DE.Views.Toolbar.tipAlignJust": "Justified",
   "DE.Views.Toolbar.tipAlignLeft": "Align left",
@@ -3566,6 +3572,7 @@
   "DE.Views.Toolbar.tipHyphenation": "Change hyphenation",
   "DE.Views.Toolbar.tipImgAlign": "Align objects",
   "DE.Views.Toolbar.tipImgGroup": "Group objects",
+  "DE.Views.Toolbar.tipShapesMerge": "Merge objects",
   "DE.Views.Toolbar.tipImgWrapping": "Wrap text",
   "DE.Views.Toolbar.tipIncFont": "Increment font size",
   "DE.Views.Toolbar.tipIncPrLeft": "Increase indent",