[PDFE] Add annotation settings panel

apps/common/main/lib/util/utils.js

@@ -118,7 +118,8 @@ define([], function () {
                 Pivot: 10,
                 Cell: 11,
                 Slicer: 12,
-                Form: 13
+                Form: 13,
+                Annotation: 14
             },
             importTextType = {
                 DRM: 0,
@@ -633,6 +634,39 @@ define([], function () {
                         return parseFloat((value / 25.4).toFixed(3));
                 }
                 return value;
+            },
+
+            fnRecalcToPt: function (value) {
+                // value in mm/cm/inch. need to convert to pt
+                if (value !== null && value !== undefined) {
+                    switch (me.currentMetric) {
+                        case me.c_MetricUnits.mm:
+                            return value * 72.0 / 25.4;
+
+                        case me.c_MetricUnits.cm:
+                            return value * 10 * 72.0 / 25.4;
+
+                        case me.c_MetricUnits.inch:
+                            return value * 72.0;
+
+                        case me.c_MetricUnits.pt:
+                            return value;
+                    }
+                }
+                return value;
+            },
+
+            fnRecalcFromPt: function (value) {
+                // value in pt. need to convert to mm/cm/inch
+                switch (me.currentMetric) {
+                    case me.c_MetricUnits.mm:
+                        return parseFloat((value * 25.4 / 72).toFixed(3));
+                    case me.c_MetricUnits.cm:
+                        return parseFloat((value * 25.4 / 72 / 10).toFixed(4));
+                    case me.c_MetricUnits.inch:
+                        return parseFloat((value / 72).toFixed(4));
+                }
+                return value;
             }
         }
     })();

apps/pdfeditor/main/app/controller/RightMenu.js

@@ -91,6 +91,7 @@ define([
             this._settings[Common.Utils.documentSettingsType.Chart] = {panelId: "id-chart-settings",          panel: rightMenu.chartSettings,    btn: rightMenu.btnChart,       hidden: 1, locked: false};
             // this._settings[Common.Utils.documentSettingsType.Signature] = {panelId: "id-signature-settings",  panel: rightMenu.signatureSettings, btn: rightMenu.btnSignature,  hidden: 1, props: {}, locked: false};
             this._settings[Common.Utils.documentSettingsType.Form] = {panelId: "id-form-settings",  panel: rightMenu.formSettings, btn: rightMenu.btnForm,  hidden: 1, props: {}, locked: false};
+            this._settings[Common.Utils.documentSettingsType.Annotation] = {panelId: "id-annotation-settings",  panel: rightMenu.annotationSettings, btn: rightMenu.btnAnnotation,  hidden: 1, props: {}, locked: false};
         },
 
         setApi: function(api) {
@@ -253,6 +254,7 @@ define([
                 this.rightmenu.imageSettings.disableControls(disabled);
                 this.rightmenu.formSettings && this.rightmenu.formSettings.disableControls(disabled);
                 this.rightmenu.chartSettings.disableControls(disabled);
+                this.rightmenu.annotationSettings.disableControls(disabled);
 
                 // if (this.rightmenu.signatureSettings) {
                 //     !allowSignature && this.rightmenu.btnSignature.setDisabled(disabled);
@@ -267,6 +269,7 @@ define([
                     this.rightmenu.btnTextArt.setDisabled(disabled);
                     this.rightmenu.btnForm && this.rightmenu.btnForm.setDisabled(disabled);
                     this.rightmenu.btnChart.setDisabled(disabled);
+                    this.rightmenu.btnAnnotation.setDisabled(disabled);
                     this.rightmenu.setDisabledAllMoreMenuItems(disabled);
                 } else {
                     var selectedElements = this.api.getSelectedElements();
@@ -390,6 +393,8 @@ define([
                     return Common.Utils.documentSettingsType.Chart;
                 case Asc.c_oAscTypeSelectElement.Field:
                     return Common.Utils.documentSettingsType.Form;
+                case Asc.c_oAscTypeSelectElement.Annot:
+                    return Common.Utils.documentSettingsType.Annotation;
             }
         },
 

apps/pdfeditor/main/app/template/AnnotationSettings.template

@@ -0,0 +1,74 @@
+<table cols="2" class="form-group">
+    <tr>
+        <td>
+            <label class="header padding-small"><%= scope.textBorder %></label>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small form-field" width="50%">
+            <label class="input-label"><%= scope.textColor %></label>
+            <div id="annotation-color-btn"></div>
+        </td>
+        <td class="padding-small form-field" width="50%">
+            <label class="input-label"><%= scope.textThickness %></label>
+            <div id="annotation-spin-border-width"></div>
+        </td>
+    </tr>
+    <tr class="form-field">
+        <td class="padding-large" width="50%"></td>
+        <td class="padding-large" width="50%">
+            <label class="input-label"><%= scope.textStyle %></label>
+            <div id="annotation-combo-line-style"></div>
+        </td>
+    </tr>
+    <tr class="form-field">
+        <td colspan=2 class="padding-small">
+            <label class="input-label" style="margin-top: 4px;"><%= scope.textBackgroundColor %></label>
+            <div id="annotation-background-color-btn" style="display: inline-block;" class="float-right"></div>
+        </td>
+    </tr>
+</table>
+<table cols="2" class="form-group">
+    <tr>
+        <td colspan=2 class="padding-small">
+            <div class="separator horizontal"></div>
+        </td>
+    </tr>
+    <tr class="form-field">
+        <td class="padding-small" colspan=2>
+            <div id="annotation-transparent-fill" style="width: 100%;">
+                <label class="header" style="display:block;"><%= scope.textOpacity %></label>
+                <div style="display: inline-block; margin-top: 3px;">
+                    <label id="annotation-lbl-opacity-start">0</label>
+                    <div id="annotation-slider-opacity" style="display: inline-block;margin: 0 4px; vertical-align: middle;"></div>
+                    <label id="annotation-lbl-opacity-end">100</label>
+                </div>
+                <div id="annotation-spin-opacity" class="float-right"></div>
+            </div>
+        </td>
+    </tr>
+</table>
+<table cols="2" class="form-group">
+    <tr>
+        <td colspan=2 class="padding-small">
+            <div class="separator horizontal"></div>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <label class="header padding-small"><%= scope.textLine %></label>
+        </td>
+    </tr>
+    <tr class="form-field">
+        <td class="padding-large">
+            <label class="input-label"><%= scope.textStart %></label>
+            <div id="annotation-combo-line-start"></div>
+        </td>
+    </tr>
+    <tr class="form-field">
+        <td class="padding-large">
+            <label class="input-label"><%= scope.textEnd %></label>
+            <div id="annotation-combo-line-end"></div>
+        </td>
+    </tr>
+</table>

apps/pdfeditor/main/app/template/RightMenu.template

@@ -10,6 +10,7 @@
         <!--        <div id="id-signature-settings" class="settings-panel">-->
         <!--        </div>-->
             <div id="id-form-settings" class="settings-panel"></div>
+            <div id="id-annotation-settings" class="settings-panel"></div>
         </div>
     </div>
     <div class="tool-menu-btns" role="menubar" aria-label="<%= scope.ariaRightMenu %>" aria-orientation="vertical">
@@ -22,6 +23,7 @@
         <button id="id-right-menu-textart" class="btn btn-category arrow-left" content-target="id-textart-settings" data-hint="0" data-hint-direction="left" data-hint-offset="big"><i class="icon toolbar__icon btn-menu-textart">&nbsp;</i></button>
 <!--        <button id="id-right-menu-signature" class="btn btn-category arrow-left hidden" content-target="id-signature-settings" data-hint="0" data-hint-direction="left" data-hint-offset="big"><i class="icon toolbar__icon btn-menu-signature">&nbsp;</i></button>-->
         <button id="id-right-menu-form" class="btn btn-category arrow-left" data-hint="0" data-hint-direction="left" data-hint-offset="big" content-target="id-form-settings"><i class="icon toolbar__icon btn-field">&nbsp;</i></button>
+        <button id="id-right-menu-annotation" class="btn btn-category arrow-left" data-hint="0" data-hint-direction="left" data-hint-offset="big" content-target="id-annotation-settings"><i class="icon toolbar__icon btn-menu-shape">&nbsp;</i></button>
         <div id="slot-right-menu-more"></div>
     </div>
 </div>

apps/pdfeditor/main/app/view/AnnotationSettings.js

@@ -0,0 +1,506 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2023
+ *
+ * This program is a free software product. You can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License (AGPL)
+ * version 3 as published by the Free Software Foundation. In accordance with
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at 20A-6 Ernesta Birznieka-Upish
+ * street, Riga, Latvia, EU, LV-1050.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+/**
+ *  AnnotationSettings.js
+ *
+ *  Created on 26.01.2026
+ *
+ */
+
+define([
+    'text!pdfeditor/main/app/template/AnnotationSettings.template',
+    'jquery',
+    'underscore',
+    'backbone',
+    'common/main/lib/component/Button'
+], function (menuTemplate, $, _, Backbone) {
+    'use strict';
+
+    PDFE.Views.AnnotationSettings = Backbone.View.extend(_.extend({
+        el: '#id-annotation-settings',
+
+        // Compile our stats template
+        template: _.template(menuTemplate),
+
+        // Delegated events for creating new items, and clearing completed ones.
+        events: {
+        },
+
+        options: {
+            alias: 'AnnotationSettings'
+        },
+
+        initialize: function () {
+            this._initSettings = true;
+            this._state = {};
+            this._originalProps = null;
+
+            this.spinners = [];
+            
+            this.render();
+        },
+
+        render: function () {
+            var el = $(this.el);
+            el.html(this.template({
+                scope: this
+            }));
+        },
+
+        setApi: function(api) {
+            this.api = api;
+            if (this.api) {
+                
+            }
+            return this;
+        },
+
+        setMode: function(mode) {
+            this.mode = mode;
+        },
+
+        createDelayedControls: function() {
+            const $markup = this.$el || $(this.el);
+            const colorConfig = Common.UI.simpleColorsConfig;
+
+            this.btnBorderColor = new Common.UI.ColorButton({
+                parentEl: $markup.findById('#annotation-color-btn'),
+                colors: colorConfig.colors,
+                dynamiccolors: colorConfig.dynamiccolors,
+                themecolors: colorConfig.themecolors,
+                effects: colorConfig.effects,
+                columns: colorConfig.columns,
+                paletteCls: colorConfig.cls,
+                paletteWidth: colorConfig.paletteWidth,
+                dataHint: '1',
+                colorHints: false,
+                dataHintDirection: 'bottom',
+                dataHintOffset: 'big'
+            });
+            this.mnuBorderColorPicker = this.btnBorderColor.getPicker();
+            this.btnBorderColor.on('color:select', this.onBorderColorSelect.bind(this));
+            // this.lockedControls.push(this.btnColor);
+
+            this.cmbBorderStyle = new Common.UI.ComboBorderType({
+                el: $markup.findById('#annotation-combo-line-style'),
+                menuStyle: 'min-width: 100%;',
+                data: [
+                    { value: AscPDF.ANNOT_COMPLEX_BORDER_TYPES.solid, imgId: 'annotation-solid' },
+                    { value: AscPDF.ANNOT_COMPLEX_BORDER_TYPES.dash1, imgId: 'annotation-dots' },
+                    { value: AscPDF.ANNOT_COMPLEX_BORDER_TYPES.dash2, imgId: 'annotation-dots-dense' },
+                    { value: AscPDF.ANNOT_COMPLEX_BORDER_TYPES.dash3, imgId: 'annotation-dashes' },
+                    { value: AscPDF.ANNOT_COMPLEX_BORDER_TYPES.dash4, imgId: 'annotation-dashes-dense' },
+                    { value: AscPDF.ANNOT_COMPLEX_BORDER_TYPES.dash5, imgId: 'annotation-dash-dot' },
+                    { value: AscPDF.ANNOT_COMPLEX_BORDER_TYPES.dash6, imgId: 'annotation-dash-dot-wide' },
+                    { value: AscPDF.ANNOT_COMPLEX_BORDER_TYPES.cloud1, imgId: 'annotation-wave' },
+                    { value: AscPDF.ANNOT_COMPLEX_BORDER_TYPES.cloud2, imgId: 'annotation-wave' }
+                ],
+                dataHint: '1',
+                dataHintDirection: 'bottom',
+                dataHintOffset: 'big',
+                ariaLabel: '123'       //TODO: Добавить
+            });
+            this.cmbBorderStyle.on('selected', this.onCmbBorderStyleChange.bind(this));
+            // this.lockedControls.push(this.cmbLineStyle);
+
+            this.numBorderWidth = new Common.UI.MetricSpinner({
+                el: $('#annotation-spin-border-width'),
+                step: 1,
+                width: '100%',
+                value: '1 pt',
+                defaultUnit : "pt",
+                maxValue: 12,
+                minValue: 1,
+                dataHint: '1',
+                dataHintDirection: 'bottom',
+                dataHintOffset: 'big',
+                ariaLabel: this.strTransparency //TODO: Добавить label
+            });
+            this.spinners.push(this.numBorderWidth);
+            this.numBorderWidth.on('change', _.bind(this.onNumBorderWidthChange, this));
+            this.numBorderWidth.on('inputleave', function(){ this.fireEvent('editcomplete', this);});
+            // this.lockedControls.push(this.numTransparency);
+
+            this.btnBackgroundColor = new Common.UI.ColorButton({
+                parentEl: $markup.findById('#annotation-background-color-btn'),
+                colors: colorConfig.colors,
+                dynamiccolors: colorConfig.dynamiccolors,
+                themecolors: colorConfig.themecolors,
+                effects: colorConfig.effects,
+                columns: colorConfig.columns,
+                paletteCls: colorConfig.cls,
+                paletteWidth: colorConfig.paletteWidth,
+                dataHint: '1',
+                colorHints: false,
+                dataHintDirection: 'bottom',
+                dataHintOffset: 'big'
+            });
+            this.mnuBackgroundColorPicker = this.btnBackgroundColor.getPicker();
+            this.btnBackgroundColor.on('color:select', this.onBackgroundColorSelect.bind(this));
+            // this.lockedControls.push(this.btnColor);
+            // this.btnColor.on('color:select', this.onColorPickerSelect.bind(this));
+
+
+            this.sldrOpacity = new Common.UI.SingleSlider({
+                el: $('#annotation-slider-opacity'),
+                width: 75,
+                minValue: 0,
+                maxValue: 100,
+                value: 100
+            });
+            this.sldrOpacity.on('change', _.bind(this.onOpacityChange, this));
+            this.sldrOpacity.on('changecomplete', _.bind(this.onOpacityChangeComplete, this));
+            // this.lockedControls.push(this.sldrTransparency);
+
+            this.lblOpacityStart = $(this.el).find('#annotation-lbl-opacity-start');
+            this.lblOpacityEnd = $(this.el).find('#annotation-lbl-opacity-end');
+
+            this.numOpacity = new Common.UI.MetricSpinner({
+                el: $('#annotation-spin-opacity'),
+                step: 1,
+                width: 62,
+                value: '100 %',
+                defaultUnit : "%",
+                maxValue: 100,
+                minValue: 0,
+                dataHint: '1',
+                dataHintDirection: 'bottom',
+                dataHintOffset: 'big',
+                ariaLabel: this.strTransparency     //TODO: Добавить label
+            });
+            this.numOpacity.on('change', _.bind(this.onNumOpacityChange, this));
+            this.numOpacity.on('inputleave', function(){ this.fireEvent('editcomplete', this);});
+            // this.lockedControls.push(this.numTransparency);
+
+
+            const lineStyleOptions = [
+                { displayValue: this.txtNone,   value: AscPDF.LINE_END_TYPE.None },
+                { displayValue: this.txtOpen,   value: AscPDF.LINE_END_TYPE.OpenArrow },
+                { displayValue: this.txtClosed,   value: AscPDF.LINE_END_TYPE.ClosedArrow },
+                { displayValue: this.txtOpenReverse,   value: AscPDF.LINE_END_TYPE.ROpenArrow },
+                { displayValue: this.txtClosedReverse,   value: AscPDF.LINE_END_TYPE.RClosedArrow },
+                { displayValue: this.txtButt,   value: AscPDF.LINE_END_TYPE.Butt },
+                { displayValue: this.txtDiamond,   value: AscPDF.LINE_END_TYPE.Diamond },
+                { displayValue: this.txtCircle,   value: AscPDF.LINE_END_TYPE.Circle },
+                { displayValue: this.txtSquare,   value: AscPDF.LINE_END_TYPE.Square },
+                { displayValue: this.txtSlash,   value: AscPDF.LINE_END_TYPE.Slash }
+            ];         
+            this.cmbLineStart = new Common.UI.ComboBox({
+                el: $markup.findById('#annotation-combo-line-start'),
+                cls: 'input-group-nr',
+                menuStyle: 'min-width: 100%;',
+                editable: false,
+                data: lineStyleOptions,
+                dataHint: '1',
+                dataHintDirection: 'bottom',
+                dataHintOffset: 'big'
+            });
+            this.cmbLineStart.on('selected', this.onLineStartChanged.bind(this));
+
+            this.cmbLineEnd = new Common.UI.ComboBox({
+                el: $markup.findById('#annotation-combo-line-end'),
+                cls: 'input-group-nr',
+                menuStyle: 'min-width: 100%;',
+                editable: false,
+                data: lineStyleOptions,
+                dataHint: '1',
+                dataHintDirection: 'bottom',
+                dataHintOffset: 'big'
+            });
+            this.cmbLineEnd.on('selected', this.onLineEndChanged.bind(this));
+        },
+
+        updateMetricUnit: function() {
+            if (this.spinners) {
+                for (var i=0; i<this.spinners.length; i++) {
+                    const spinner = this.spinners[i];
+                    spinner.setDefaultUnit(Common.Utils.Metric.getCurrentMetricName());
+                    spinner.setStep(Common.Utils.Metric.getCurrentMetric()==Common.Utils.Metric.c_MetricUnits.pt ? 1 : 0.01);
+                }
+            }
+        },
+        
+        createDelayedElements: function() {
+            this.createDelayedControls();
+            this.updateMetricUnit();
+            this._initSettings = false;
+        },
+
+        ChangeSettings: function(props) {
+            if (this._initSettings) {
+                this.createDelayedElements();
+            }
+
+            // this.disableControls(this._locked);
+
+            if (props) {
+                const getFormField = function(inputCmp) {
+                    return inputCmp.$el.closest('.form-field');
+                };
+                let $formValue;
+
+                // If a property is not supported by this annotation type, 
+                // then this property will not be present in asc_getAnnotProps.
+                const annotProps = props.asc_getAnnotProps(); 
+                this._originalProps = props;
+                
+                console.log(props);
+
+                // Border color
+                let value = props.asc_getStroke();
+                if (value) {
+                    this._state.BorderColor = Common.Utils.ThemeColor.getHexColor(value.r, value.g, value.b);
+                } else {
+                    this._state.BorderColor = 'transparent';
+                }
+                this.btnBorderColor.setColor(this._state.BorderColor);
+                this.mnuBorderColorPicker.clearSelection();
+                if(this._state.BorderColor != 'transparent') {
+                    this.mnuBorderColorPicker.selectByRGB(this._state.BorderColor, true);
+                }
+
+                // Background color
+                value = props.asc_getFill();
+                if (value) {
+                    this._state.BackgroundColor = Common.Utils.ThemeColor.getHexColor(value.r, value.g, value.b);
+                } else {
+                    this._state.BackgroundColor = 'transparent';
+                }
+                this.btnBackgroundColor.setColor(this._state.BackgroundColor);
+                this.mnuBackgroundColorPicker.clearSelection();
+                if(this._state.BackgroundColor != 'transparent') {
+                    this.mnuBackgroundColorPicker.selectByRGB(this._state.BackgroundColor, true);
+                }
+
+                //Border width
+                $formValue = getFormField(this.numBorderWidth);
+                if(annotProps?.asc_getBorderWidth) {
+                    value = annotProps.asc_getBorderWidth();
+                    if (
+                        Math.abs(this._state.BorderWidth - value) > 0.001 || 
+                        Math.abs(this.numBorderWidth.getNumberValue() - value) > 0.001 || 
+                        (this._state.BorderWidth === null || value === null) && 
+                        (this._state.BorderWidth !== value || this.numBorderWidth.getNumberValue() !== value)
+                    ) {
+                        if (value !== undefined) {
+                            this.numBorderWidth.setValue(
+                                (value !== null) ? Common.Utils.Metric.fnRecalcFromPt(value) : '', true
+                            );
+                        }
+                        this._state.BorderWidth = value;
+                    }
+                    $formValue.show();
+                } else {
+                    $formValue.hide();
+                }
+
+                //Border style
+                $formValue = getFormField(this.cmbBorderStyle);
+                if(annotProps?.asc_getBorderStyle) {
+                    value = annotProps.asc_getBorderStyle();
+                    if (this._state.BorderStyle !== value) {
+                        this.cmbBorderStyle.setValue(value, '');
+                        this._state.BorderStyle = value;
+                    }
+                    $formValue.show();
+                } else {
+                    $formValue.hide();
+                }
+
+                //Line start
+                $formValue = getFormField(this.cmbLineStart);
+                if(annotProps?.asc_getLineStart) {
+                    value = annotProps.asc_getLineStart();
+                    if (this._state.LineStart !== value) {
+                        this.cmbLineStart.setValue(value, '');
+                        this._state.LineStart = value;
+                    }
+                    $formValue.show();
+                } else {
+                    $formValue.hide();
+                }
+
+                //Line end
+                $formValue = getFormField(this.cmbLineEnd);
+                if(annotProps?.asc_getLineEnd) {
+                    value = annotProps.asc_getLineEnd();
+                    if (this._state.LineEnd !== value) {
+                        this.cmbLineEnd.setValue(value, '');
+                        this._state.LineEnd = value;
+                    }
+                    $formValue.show();
+                } else {
+                    $formValue.hide();
+                }
+
+                // Opacity
+                value = props.asc_getOpacity();
+                if (
+                    Math.abs(this._state.Opacity - value) > 0.001 || 
+                    Math.abs(this.numOpacity.getNumberValue() - value) > 0.001 || 
+                    (this._state.Opacity === null || value === null) && 
+                    (this._state.Opacity !== value || this.numOpacity.getNumberValue() !== value)
+                ) {
+                    if (value !== undefined) {
+                        this.sldrOpacity.setValue((value === null) ? 100 : value * 100, true);
+                        this.numOpacity.setValue(this.sldrOpacity.getValue(), true);
+                    }
+                    this._state.Opacity = value;
+                }
+
+                this.showHideFormGroups();
+            }
+        },
+
+        setLocked: function (locked) {
+            this._locked = locked;
+        },
+
+        showHideFormGroups: function() {
+            (this.$el || $(this.el)).find('.form-group').each(function (index, group) {
+                $(group).show();
+                const hasVisibleFields = $(group).find('.form-field:visible').length > 0;
+                if(!hasVisibleFields) {
+                    $(group).hide();
+                }
+            });
+        },
+        
+        //Event handlers
+        onBorderColorSelect: function(btn, color) {
+            // this.BorderColor = color;
+            // this._state.BorderColor = undefined;
+
+            if (this.api) {
+                if (color == 'transparent') {
+                    this.api.SetAnnotStrokeColor();
+                } else {
+                    const clr = Common.Utils.ThemeColor.getRgbColor(color);
+                    this.api.SetAnnotStrokeColor(clr.get_r(), clr.get_g(), clr.get_b());
+                }
+                this.fireEvent('editcomplete', this);
+            }
+        },
+        
+        onNumBorderWidthChange: function(field) {
+            if (this.api)  {
+                const value = field.getNumberValue();
+                this._state.BorderWidth = undefined;
+                this.api.SetAnnotStrokeWidth(Common.Utils.Metric.fnRecalcToPt(value));
+            }
+            this.fireEvent('editcomplete', this);
+        },
+
+        onCmbBorderStyleChange: function(cmb, record) {
+            if (this.api)  {
+                this._state.BorderStyle = undefined;
+                this.api.SetAnnotStrokeStyle(record.value);
+            }
+            this.fireEvent('editcomplete', this);
+        },
+
+        onBackgroundColorSelect: function(btn, color) {
+            // this.BorderColor = color;
+            this._state.BorderColor = undefined;
+
+            if (this.api) {
+                if (color == 'transparent') {
+                    this.api.SetAnnotFillColor();
+                } else {
+                    const clr = Common.Utils.ThemeColor.getRgbColor(color);
+                    this.api.SetAnnotFillColor(clr.get_r(), clr.get_g(), clr.get_b());
+                }
+                this.fireEvent('editcomplete', this);
+            }
+        },
+
+        onNumOpacityChange: function(field, newValue, oldValue, eOpts) {
+            this.sldrOpacity.setValue(field.getNumberValue(), true);
+            if (this.api)  {
+                const num = field.getNumberValue();
+                this.api.SetAnnotOpacity(num);
+            }
+        },
+        onOpacityChange: function(field, newValue, oldValue) {
+            this._sliderOpacityChanged = newValue;
+            this.numOpacity.setValue(newValue, true);
+
+            if (this._sendUndoPoint) {
+                this.api.setStartPointHistory();
+                this._sendUndoPoint = false;
+                this.updateSliderOpacity = setInterval(_.bind(this._opacityApplyFunc, this), 100);
+            }
+        },
+        onOpacityChangeComplete: function(field, newValue, oldValue) {
+            clearInterval(this.updateSliderOpacity);
+            this._sliderOpacityChanged = newValue;
+            if (!this._sendUndoPoint) { 
+                this.api.setEndPointHistory();
+                this._opacityApplyFunc();
+            }
+            this._sendUndoPoint = true;
+        },
+        _opacityApplyFunc: function() {
+            if (this._sliderOpacityChanged !== undefined) {
+                this.api.SetAnnotOpacity(this._sliderOpacityChanged);
+                this._sliderOpacityChanged = undefined;
+            }
+        },
+
+        onLineStartChanged: function(combo, record) {
+            if (this.api) {
+                this.api.SetAnnotLineStart(record.value);
+                this.fireEvent('editcomplete', this);
+            }
+        },
+
+        onLineEndChanged: function(combo, record) {
+            if (this.api ) {
+                this.api.SetAnnotLineEnd(record.value);
+                this.fireEvent('editcomplete', this);
+            }
+        },
+
+        // TODO: Move to en.js 
+        txtNone: 'None',
+        txtOpen: 'Open',
+        txtClosed: 'Closed',
+        txtOpenReverse: 'Open (Reverse)',
+        txtClosedReverse: 'Closed (Reverse)',
+        txtButt: 'Butt',
+        txtDiamond: 'Diamond',
+        txtCircle: 'Circle',    //TODO: Вомзожно назвать Round (Как в adobe)
+        txtSquare: 'Square',
+        txtSlash: 'Slash'
+        
+    }, PDFE.Views.AnnotationSettings || {}));
+});

apps/pdfeditor/main/app/view/RightMenu.js

@@ -55,6 +55,7 @@ define([
     'pdfeditor/main/app/view/TableSettings',
     'pdfeditor/main/app/view/ShapeSettings',
     'pdfeditor/main/app/view/TextArtSettings',
+    'pdfeditor/main/app/view/AnnotationSettings',
     // 'pdfeditor/main/app/view/SignatureSettings',
     'common/main/lib/component/Scroller',
     'common/main/lib/component/ListView',
@@ -130,6 +131,16 @@ define([
                 allowMouseEventsOnDisabled: true
             });
 
+            this.btnAnnotation = new Common.UI.Button({
+                hint: this.txtAnnotationSettings,
+                asctype: Common.Utils.documentSettingsType.Annotation,
+                enableToggle: true,
+                disabled: true,
+                iconCls: 'btn-menu-textart',
+                toggleGroup: 'tabpanelbtnsGroup',
+                allowMouseEventsOnDisabled: true
+            });
+
             this._settings = [];
             this._settings[Common.Utils.documentSettingsType.Paragraph]   = {panel: "id-paragraph-settings",  btn: this.btnText};
             this._settings[Common.Utils.documentSettingsType.Table]       = {panel: "id-table-settings",      btn: this.btnTable};
@@ -137,6 +148,7 @@ define([
             this._settings[Common.Utils.documentSettingsType.Shape]       = {panel: "id-shape-settings",      btn: this.btnShape};
             this._settings[Common.Utils.documentSettingsType.Chart]       = {panel: "id-chart-settings",      btn: this.btnChart};
             this._settings[Common.Utils.documentSettingsType.TextArt]     = {panel: "id-textart-settings",    btn: this.btnTextArt};
+            this._settings[Common.Utils.documentSettingsType.Annotation]  = {panel: "id-annotation-settings", btn: this.btnAnnotation};
 
             return this;
         },
@@ -168,12 +180,13 @@ define([
             Common.UI.SideMenu.prototype.render.call(this);
             this.btnMore.menu.menuAlign = 'tr-tl';
 
-            this.btnText.setElement($('#id-right-menu-text'), false);           this.btnText.render();
+            this.btnText.setElement($('#id-right-menu-text'), false);                   this.btnText.render();
-            this.btnTable.setElement($('#id-right-menu-table'), false);         this.btnTable.render();
+            this.btnTable.setElement($('#id-right-menu-table'), false);                 this.btnTable.render();
-            this.btnImage.setElement($('#id-right-menu-image'), false);         this.btnImage.render();
+            this.btnImage.setElement($('#id-right-menu-image'), false);                 this.btnImage.render();
-            this.btnChart.setElement($('#id-right-menu-chart'), false);         this.btnChart.render();
+            this.btnChart.setElement($('#id-right-menu-chart'), false);                 this.btnChart.render();
-            this.btnShape.setElement($('#id-right-menu-shape'), false);         this.btnShape.render();
+            this.btnShape.setElement($('#id-right-menu-shape'), false);                 this.btnShape.render();
-            this.btnTextArt.setElement($('#id-right-menu-textart'), false);     this.btnTextArt.render();
+            this.btnTextArt.setElement($('#id-right-menu-textart'), false);             this.btnTextArt.render();
+            this.btnAnnotation.setElement($('#id-right-menu-annotation'), false);       this.btnAnnotation.render();
 
             this.btnText.on('click',            _.bind(this.onBtnMenuClick, this));
             this.btnTable.on('click',           _.bind(this.onBtnMenuClick, this));
@@ -181,6 +194,7 @@ define([
             this.btnChart.on('click',           _.bind(this.onBtnMenuClick, this));
             this.btnShape.on('click',           _.bind(this.onBtnMenuClick, this));
             this.btnTextArt.on('click',         _.bind(this.onBtnMenuClick, this));
+            this.btnAnnotation.on('click',         _.bind(this.onBtnMenuClick, this));
 
             this.paragraphSettings = new PDFE.Views.ParagraphSettings();
             this.imageSettings = new PDFE.Views.ImageSettings();
@@ -188,6 +202,7 @@ define([
             this.tableSettings = new PDFE.Views.TableSettings();
             this.shapeSettings = new PDFE.Views.ShapeSettings();
             this.textartSettings = new PDFE.Views.TextArtSettings();
+            this.annotationSettings = new PDFE.Views.AnnotationSettings();
 
             // if (mode && mode.isSignatureSupport) {
             //     this.btnSignature = new Common.UI.Button({
@@ -247,6 +262,7 @@ define([
             this.tableSettings.setApi(api).on('editcomplete', _.bind( fire, this)).on('eyedropper', _.bind(_isEyedropperStart, this));
             this.shapeSettings.setApi(api).on('editcomplete', _.bind( fire, this)).on('eyedropper', _.bind(_isEyedropperStart, this)).on('updatescroller', _updateScroller);
             this.textartSettings.setApi(api).on('editcomplete', _.bind( fire, this)).on('eyedropper', _.bind(_isEyedropperStart, this)).on('updatescroller', _updateScroller);
+            this.annotationSettings.setApi(api).on('editcomplete', _.bind( fire, this)).on('eyedropper', _.bind(_isEyedropperStart, this)).on('updatescroller', _updateScroller);
             // if (this.signatureSettings) this.signatureSettings.setApi(api).on('editcomplete', _.bind( fire, this));
             if (this.formSettings) this.formSettings.setApi(api).on('editcomplete', fire).on('updatescroller', _updateScroller);
         },
@@ -256,6 +272,7 @@ define([
             this.shapeSettings && this.shapeSettings.setMode(mode);
             this.formSettings && this.formSettings.setMode(mode);
             this.chartSettings && this.chartSettings.setMode(mode);
+            this.annotationSettings && this.annotationSettings.setMode(mode);
         },
 
         onBtnMenuClick: function(btn, e) {
@@ -338,7 +355,7 @@ define([
         },
 
         setButtons: function () {
-            var allButtons = [this.btnShape, this.btnImage, this.btnText, this.btnTable, this.btnTextArt, this.btnChart/*, this.btnSignature*/, this.btnForm];
+            var allButtons = [this.btnShape, this.btnImage, this.btnText, this.btnTable, this.btnTextArt, this.btnChart/*, this.btnSignature*/, this.btnForm, this.btnAnnotation];
             Common.UI.SideMenu.prototype.setButtons.apply(this, [allButtons]);
         },
 
@@ -361,7 +378,8 @@ define([
         txtTextArtSettings:         'Text Art Settings',
         txtChartSettings:           'Chart Settings',
         txtSignatureSettings:       'Signature Settings',
-        ariaRightMenu:               'Right menu',
+        ariaRightMenu:              'Right menu',
-        txtFormSettings:            'Form Settings'
+        txtFormSettings:            'Form Settings',
+        txtAnnotationSettings:      'Annotation Settings'
     }, PDFE.Views.RightMenu || {}));
 });

apps/pdfeditor/main/locale/en.json

@@ -3032,5 +3032,14 @@
   "PDFE.Views.ViewTab.tipFitToPage": "Fit to page",
   "PDFE.Views.ViewTab.tipFitToWidth": "Fit to width",
   "PDFE.Views.ViewTab.tipHeadings": "Headings",
-  "PDFE.Views.ViewTab.tipInterfaceTheme": "Interface theme"
+  "PDFE.Views.ViewTab.tipInterfaceTheme": "Interface theme",
+  "PDFE.Views.AnnotationSettings.textBorder": "Border",
+  "PDFE.Views.AnnotationSettings.textColor": "Color",
+  "PDFE.Views.AnnotationSettings.textThickness": "Thickness",
+  "PDFE.Views.AnnotationSettings.textStyle": "Style",
+  "PDFE.Views.AnnotationSettings.textBackgroundColor": "Background color",
+  "PDFE.Views.AnnotationSettings.textOpacity": "Opacity",
+  "PDFE.Views.AnnotationSettings.textLine": "Line",
+  "PDFE.Views.AnnotationSettings.textStart": "Start",
+  "PDFE.Views.AnnotationSettings.textEnd": "End"
 }