From 2caa32e5eba53c27f4e8db50528b474361a691e0 Mon Sep 17 00:00:00 2001 From: "Julia.Radzhabova" Date: Mon, 18 Aug 2025 21:10:40 +0300 Subject: [PATCH] [PDF] Add annotations --- apps/pdfeditor/main/app/controller/Toolbar.js | 71 ++++++++++++++++++- .../main/app/template/Toolbar.template | 1 + apps/pdfeditor/main/app/view/Toolbar.js | 69 ++++++++++++++++++ apps/pdfeditor/main/locale/en.json | 12 ++++ 4 files changed, 152 insertions(+), 1 deletion(-) diff --git a/apps/pdfeditor/main/app/controller/Toolbar.js b/apps/pdfeditor/main/app/controller/Toolbar.js index c7c96b936a..b0eb06ebee 100644 --- a/apps/pdfeditor/main/app/controller/Toolbar.js +++ b/apps/pdfeditor/main/app/controller/Toolbar.js @@ -83,7 +83,9 @@ define([ initEditing: true }; this.editMode = true; - this.binding = {}; + this.binding = { + checkInsertShapeComment: _.bind(this.checkInsertShapeComment, this) + }; this.addListeners({ 'Toolbar': { @@ -270,6 +272,8 @@ define([ toolbar.chShowComments.on('change', _.bind(this.onShowCommentsChange, this)); toolbar.btnTextComment.on('click', _.bind(this.onBtnTextCommentClick, this)); toolbar.btnTextComment.menu.on('item:click', _.bind(this.onMenuTextCommentClick, this)); + toolbar.btnShapeComment.on('click', _.bind(this.onBtnShapeCommentClick, this)); + toolbar.btnShapeComment.menu.on('item:click', _.bind(this.onMenuShapeCommentClick, this)); toolbar.btnStamp.on('click', _.bind(this.onBtnStampClick, this)); toolbar.btnStamp.menu.on('item:click', _.bind(this.onMenuStampClick, this)); toolbar.btnStamp.menu.on('show:after', _.bind(this.onStampShowAfter, this)); @@ -424,6 +428,7 @@ define([ this.api.asc_registerCallback('asc_onStampsReady', _.bind(this.onApiStampsReady, this)); this.getApplication().getController('Common.Controllers.Fonts').setApi(this.api); this.api.asc_registerCallback('asc_onCanPastePage', _.bind(this.onApiCanPastePage, this)); + this.api.asc_registerCallback('asc_onStartAddShapeChanged', _.bind(this.onStartAddShapeChanged, this)); //for shape comments if (this.mode.canPDFEdit) { this.api.asc_registerCallback('asc_onMathTypes', _.bind(this.onApiMathTypes, this)); @@ -1235,6 +1240,70 @@ define([ Common.component.Analytics.trackEvent('ToolBar', 'Add Text'); }, + onBtnShapeCommentClick: function(btn, e) { + btn.menu.getItems(true).filter(function(item) { + return item.value == btn.options.shapeType + })[0].setChecked(true); + if(!btn.pressed) { + btn.menu.clearAll(true); + } + this.onInsertShapeComment(btn.options.shapeType, btn, e); + }, + + onMenuShapeCommentClick: function(menu, item, e) { + var oldType = this.toolbar.btnShapeComment.options.shapeType; + var newType = item.value; + + this.toolbar.btnShapeComment.toggle(true); + if(newType !== oldType){ + this.toolbar.btnShapeComment.changeIcon({ + next: item.options.iconClsForMainBtn, + curr: this.toolbar.btnShapeComment.menu.getItems(true).filter(function(mnu){return mnu.value == oldType})[0].options.iconClsForMainBtn + }); + this.toolbar.btnShapeComment.updateHint(item.options.tipForMainBtn); + this.toolbar.btnShapeComment.setCaption(item.options.captionForMainBtn); + this.toolbar.btnShapeComment.options.shapeType = newType; + } + this.onInsertShapeComment(newType, this.toolbar.btnShapeComment, item); + }, + + onInsertShapeComment: function(type, btn, item) { + if (btn.pressed) { + this.api.StartAddAnnot(type, true); + $(document.body).on('mouseup', this.binding.checkInsertShapeComment); + } else { + this.api.StartAddAnnot('', false); + $(document.body).off('mouseup', this.binding.checkInsertShapeComment); + } + + Common.NotificationCenter.trigger('edit:complete', this.toolbar, this.toolbar.btnShapeComment); + Common.component.Analytics.trackEvent('ToolBar', 'Add Shape Annotation'); + }, + + onStartAddShapeChanged: function() { + if ( this.toolbar.btnShapeComment.pressed ) + this.toolbar.btnShapeComment.toggle(false, true); + + $(document.body).off('mouseup', this.binding.checkInsertShapeComment); + }, + + checkInsertShapeComment: function(e) { + var cmp = $(e.target), + cmp_sdk = cmp.closest('#editor_sdk'), + btn_id = cmp.closest('button').attr('id'); + if (btn_id===undefined) + btn_id = cmp.closest('.btn-group').attr('id'); + + if (cmp.attr('id') != 'editor_sdk' && cmp_sdk.length<=0) { + if ( this.toolbar.btnShapeComment.pressed && this.toolbar.btnShapeComment.id !== btn_id ) { + this.api.StartAddAnnot('', false); + $(document.body).off('mouseup', this.binding.checkInsertShapeComment); + this.toolbar.btnShapeComment.toggle(false, true); + Common.NotificationCenter.trigger('edit:complete', this.toolbar); + } + } + }, + onBtnStampClick: function(btn, e) { this.onInsertStamp(btn.options.stampType, btn, e); }, diff --git a/apps/pdfeditor/main/app/template/Toolbar.template b/apps/pdfeditor/main/app/template/Toolbar.template index 7959f7a00c..0f875ce3a0 100644 --- a/apps/pdfeditor/main/app/template/Toolbar.template +++ b/apps/pdfeditor/main/app/template/Toolbar.template @@ -179,6 +179,7 @@
+
diff --git a/apps/pdfeditor/main/app/view/Toolbar.js b/apps/pdfeditor/main/app/view/Toolbar.js index d2ecfc15b3..a70ad57e8d 100644 --- a/apps/pdfeditor/main/app/view/Toolbar.js +++ b/apps/pdfeditor/main/app/view/Toolbar.js @@ -909,6 +909,22 @@ define([ }); this.toolbarControls.push(this.btnTextComment); + this.btnShapeComment = new Common.UI.Button({ + id: 'tlbtn-shapecomment', + cls: 'btn-toolbar x-huge icon-top', + iconCls: 'toolbar__icon btn-big-shape-comment', + lock: [_set.pageDeleted, _set.disableOnStart], + caption: this.capBtnRectComment, + menu: true, + split: true, + enableToggle: true, + action: 'insert-shape-comment', + dataHint: '1', + dataHintDirection: 'bottom', + dataHintOffset: 'small' + }); + this.toolbarControls.push(this.btnShapeComment); + this.chShowComments = new Common.UI.CheckBox({ lock: [_set.disableOnStart], labelText: this.capBtnShowComments, @@ -1448,6 +1464,7 @@ define([ _injectComponent('#slot-btn-underline', this.btnUnderline); _injectComponent('#slot-btn-highlight', this.btnHighlight); _injectComponent('#slot-btn-text-comment', this.btnTextComment); + _injectComponent('#slot-btn-shape-comment', this.btnShapeComment); _injectComponent('#slot-btn-stamp', this.btnStamp); this.btnEditMode ? _injectComponent('#slot-btn-tb-edit-mode', this.btnEditMode) : $host.findById('#slot-btn-tb-edit-mode').parents('.group').hide().next('.separator').hide(); }, @@ -1614,6 +1631,57 @@ define([ ] })); } + if (me.btnShapeComment) { + me.btnShapeComment.options.shapeType = AscPDF.ANNOTATIONS_TYPES.Square; + me.btnShapeComment.setMenu(new Common.UI.Menu({ + items: [ + { + tipForMainBtn: me.tipInsertRectComment, + caption: me.txtRectComment, + checkable: true, + checkmark: false, + toggleGroup: 'shapecomment', + iconCls : 'menu__icon btn-rect-comment', + value: AscPDF.ANNOTATIONS_TYPES.Square, + iconClsForMainBtn: 'btn-big-rect-comment', + captionForMainBtn: me.capBtnRectComment + }, + { + tipForMainBtn: me.tipInsertCircleComment, + caption: me.txtCircleComment, + checkable: true, + checkmark: false, + toggleGroup: 'shapecomment', + iconCls : 'menu__icon btn-circle-comment', + value: AscPDF.ANNOTATIONS_TYPES.Circle, + iconClsForMainBtn: 'btn-big-circle-comment', + captionForMainBtn: me.capBtnCircleComment + }, + { + tipForMainBtn: me.tipInsertArrowComment, + caption: me.txtArrowComment, + checkable: true, + checkmark: false, + toggleGroup: 'shapecomment', + iconCls : 'menu__icon btn-arrow-comment', + value: AscPDF.ANNOTATIONS_TYPES.Line, + iconClsForMainBtn: 'btn-big-arrow-comment', + captionForMainBtn: me.capBtnArrowComment + }, + { + tipForMainBtn: me.tipInsertPolyLineComment, + caption: me.txtPolyLineComment, + checkable: true, + checkmark: false, + toggleGroup: 'shapecomment', + iconCls : 'menu__icon btn-polyline-comment', + value: AscPDF.ANNOTATIONS_TYPES.PolyLine, + iconClsForMainBtn: 'btn-big-polyline-comment', + captionForMainBtn: me.capBtnPolyLineComment + }, + ] + })); + } if (me.btnStamp) { me.btnStamp.setMenu(new Common.UI.Menu({ restoreHeight: 500 @@ -1668,6 +1736,7 @@ define([ this.btnHighlight.updateHint(this.textHighlight); // this.btnTextComment.updateHint([this.tipInsertTextComment, this.tipInsertText]); this.btnTextComment.updateHint(this.tipInsertTextComment); + this.btnShapeComment.updateHint(this.tipInsertRectComment); this.btnStamp.updateHint(this.tipInsertStamp); this.btnEditMode && this.btnEditMode.updateHint(this.tipEditMode); }, diff --git a/apps/pdfeditor/main/locale/en.json b/apps/pdfeditor/main/locale/en.json index bd1ca3e53c..f2c79d9125 100644 --- a/apps/pdfeditor/main/locale/en.json +++ b/apps/pdfeditor/main/locale/en.json @@ -2231,6 +2231,18 @@ "PDFE.Views.Toolbar.txtRotatePageRight": "Rotate page right", "PDFE.Views.Toolbar.txtRotateRight": "Rotate right", "PDFE.Views.Toolbar.txtUngroup": "Ungroup", + "PDFE.Views.Toolbar.capBtnRectComment": "Rectangle", + "PDFE.Views.Toolbar.capBtnCircleComment": "Circle", + "PDFE.Views.Toolbar.capBtnArrowComment": "Arrow", + "PDFE.Views.Toolbar.capBtnPolyLineComment": "Connected Lines", + "PDFE.Views.Toolbar.txtRectComment": "Rectangle", + "PDFE.Views.Toolbar.txtCircleComment": "Circle", + "PDFE.Views.Toolbar.txtArrowComment": "Arrow", + "PDFE.Views.Toolbar.txtPolyLineComment": "Connected lines", + "PDFE.Views.Toolbar.tipInsertRectComment": "Draw a rectangle or square", + "PDFE.Views.Toolbar.tipInsertCircleComment": "Draw a circle or oval", + "PDFE.Views.Toolbar.tipInsertArrowComment": "Draw an arrow", + "PDFE.Views.Toolbar.tipInsertPolyLineComment": "Draw lines that connect to each other", "PDFE.Views.ViewTab.textAlwaysShowToolbar": "Always Show Toolbar", "PDFE.Views.ViewTab.textDarkDocument": "Dark Document", "PDFE.Views.ViewTab.textFill": "Fill",