Files
web-apps/apps/pdfeditor/main/app/view/AnnotationSettings.js
2026-03-25 14:20:40 +03:00

576 lines
25 KiB
JavaScript

/*
* (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._noApply = true;
this._state = {
DisabledControls: false
};
this._originalProps = null;
this._locked = false;
this.lockedControls = [];
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.btnBorderColor);
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-2' }
],
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
});
this.cmbBorderStyle.on('selected', this.onCmbBorderStyleChange.bind(this));
this.lockedControls.push(this.cmbBorderStyle);
this.cmbBorderStyleForLink = new Common.UI.ComboBox({
el: $markup.findById('#annotation-combo-line-style-for-link'),
cls: 'input-group-nr',
menuStyle: 'min-width: 100%;',
editable: false,
data: [
{displayValue: this.txtSolid, value: AscPDF.BORDER_TYPES.solid},
{displayValue: this.txtDashed, value: AscPDF.BORDER_TYPES.dashed},
{displayValue: this.txtUnderline, value: AscPDF.BORDER_TYPES.underline},
{displayValue: this.txtNone, value: 'None'},
],
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
});
this.cmbBorderStyleForLink.on('selected', this.onCmbBorderStyleChange.bind(this));
this.lockedControls.push(this.cmbBorderStyleForLink);
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'
});
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.numBorderWidth);
this.btnBackgroundColor = new Common.UI.ColorButton({
parentEl: $markup.findById('#annotation-background-color-btn'),
additionalItemsBefore: [
this.mnuBackgroundColorTransparent = new Common.UI.MenuItem({
style: Common.UI.isRTL() ? 'padding-right:20px;' : 'padding-left:20px;',
caption: this.txtNoFill,
toggleGroup: 'form-settings-no-border',
checkable: true
}),
{caption: '--'}
],
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.mnuBackgroundColorTransparent.on('click', _.bind(this.onBackgroundColorTransparentClick, this));
this.mnuBackgroundColorPicker = this.btnBackgroundColor.getPicker();
this.btnBackgroundColor.on('color:select', this.onBackgroundColorSelect.bind(this));
this.lockedControls.push(this.btnBackgroundColor);
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.sldrOpacity);
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'
});
this.numOpacity.on('change', _.bind(this.onNumOpacityChange, this));
this.numOpacity.on('inputleave', function(){ this.fireEvent('editcomplete', this);});
this.lockedControls.push(this.numOpacity);
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.lockedControls.push(this.cmbLineStart);
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));
this.lockedControls.push(this.cmbLineEnd);
},
updateMetricUnit: function() {
if (this.spinners) {
for (var i=0; i<this.spinners.length; i++) {
const spinner = this.spinners[i];
const maxValue = spinner.getMaxValue();
const minValue = spinner.getMinValue();
spinner.setDefaultUnit(Common.Utils.Metric.getCurrentMetricName());
spinner.setStep(
Common.Utils.Metric.getCurrentMetric() == Common.Utils.Metric.c_MetricUnits.pt ? 1 : 0.01
);
spinner.setMinValue(Math.floor(Common.Utils.Metric.fnRecalcFromPt(minValue) * 100) / 100);
spinner.setMaxValue(Math.ceil(Common.Utils.Metric.fnRecalcFromPt(maxValue)* 100) / 100);
}
}
},
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;
let value;
// 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;
this._noApply = true;
// Border color
value = props.asc_getStroke ? props.asc_getStroke() : null; // null - property is not supported
$formValue = getFormField(this.btnBorderColor);
if(value !== null) {
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);
}
$formValue.show();
} else {
$formValue.hide();
}
// Background color
value = props.asc_getFill ? props.asc_getFill() : null; // null - property is not supported
$formValue = getFormField(this.btnBackgroundColor);
if(value !== null) {
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.mnuBackgroundColorTransparent.setChecked(this._state.BackgroundColor == 'transparent', true);
this.mnuBackgroundColorPicker.clearSelection();
if(this._state.BackgroundColor != 'transparent') {
this.mnuBackgroundColorPicker.selectByRGB(this._state.BackgroundColor, true);
}
$formValue.show();
} else {
$formValue.hide();
}
//Border width
value = (annotProps && annotProps.asc_getBorderWidth) ? annotProps.asc_getBorderWidth() : null; // null - property is not supported
$formValue = getFormField(this.numBorderWidth);
if(value !== null) {
value = Common.Utils.Metric.fnRecalcFromPt(value);
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, true);
}
this._state.BorderWidth = value;
}
$formValue.show();
} else {
$formValue.hide();
}
//Border style
const isLink = props.asc_getType() == AscPDF.ANNOTATIONS_TYPES.Link;
const cmbBorderStyle = isLink ? this.cmbBorderStyleForLink : this.cmbBorderStyle;
getFormField(isLink ? this.cmbBorderStyle : this.cmbBorderStyleForLink).hide();
value = (annotProps && annotProps.asc_getBorderStyle) ? annotProps.asc_getBorderStyle() : null;
$formValue = getFormField(cmbBorderStyle);
if(value !== null) {
const isValueNone = value === undefined;
isValueNone && (value = 'None');
if (this._state.BorderStyle !== value) {
cmbBorderStyle.setValue(value, '');
this._state.BorderStyle = value;
}
$formValue.show();
this.btnBorderColor.setDisabled(isValueNone);
this.numBorderWidth.setDisabled(isValueNone);
} else {
$formValue.hide();
}
//Line start
value = (annotProps && annotProps.asc_getLineStart) ? annotProps.asc_getLineStart() : null;
$formValue = getFormField(this.cmbLineStart);
if(value !== null) {
if (this._state.LineStart !== value) {
this.cmbLineStart.setValue(value);
this._state.LineStart = value;
}
$formValue.show();
} else {
$formValue.hide();
}
//Line end
value = (annotProps && annotProps.asc_getLineEnd) ? annotProps.asc_getLineEnd() : null;
$formValue = getFormField(this.cmbLineEnd);
if(value != null) {
if (this._state.LineEnd !== value) {
this.cmbLineEnd.setValue(value);
this._state.LineEnd = value;
}
$formValue.show();
} else {
$formValue.hide();
}
// Opacity
value = props.asc_getOpacity ? props.asc_getOpacity() : null;
$formValue = getFormField(this.sldrOpacity);
if(value != null) {
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;
}
$formValue.show();
} else {
$formValue.hide();
}
this._noApply = false;
this.showHideFormGroups();
}
},
setLocked: function (locked) {
this._locked = locked;
},
showHideFormGroups: function() {
let isFirstVisibleGroup = true;
(this.$el || $(this.el)).find('.form-group').each(function (index, group) {
$(group).show();
const hasVisibleFields = $(group).find('.form-field:visible').length > 0;
if(hasVisibleFields) {
const $separator = $(group).find('.separator');
$separator && $separator[isFirstVisibleGroup ? 'hide' : 'show']();
isFirstVisibleGroup = false;
} else {
$(group).hide();
}
});
},
//Event handlers
onBorderColorSelect: function(btn, color) {
if (this.api && !this._noApply) {
this._state.BorderColor = undefined;
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 && !this._noApply) {
this._state.BorderWidth = undefined;
const value = field.getNumberValue();
this.api.SetAnnotStrokeWidth(Common.Utils.Metric.fnRecalcToPt(value));
this.fireEvent('editcomplete', this);
}
},
onCmbBorderStyleChange: function(cmb, record) {
if (this.api && !this._noApply) {
const isValueNone = record.value === 'None';
this._state.BorderStyle = undefined;
this.api.SetAnnotStrokeStyle(isValueNone ? undefined : record.value);
this.fireEvent('editcomplete', this);
}
},
onBackgroundColorSelect: function(btn, color) {
if (this.api && !this._noApply) {
this._state.BackgroundColor = undefined;
if (color == 'transparent') {
this.api.SetAnnotFillColor(undefined);
} else {
const clr = Common.Utils.ThemeColor.getRgbColor(color);
this.api.SetAnnotFillColor(clr.get_r(), clr.get_g(), clr.get_b());
}
this.fireEvent('editcomplete', this);
}
},
onBackgroundColorTransparentClick: function(btn) {
this.onBackgroundColorSelect(btn, 'transparent');
},
onNumOpacityChange: function(field, newValue, oldValue, eOpts) {
this.sldrOpacity.setValue(field.getNumberValue(), true);
if (this.api && !this._noApply) {
const num = field.getNumberValue();
this.api.SetAnnotOpacity(num);
}
},
onOpacityChange: function(field, newValue, oldValue) {
this._sliderOpacityChanged = newValue;
this.numOpacity.setValue(newValue, true);
if (this.api && !this._noApply && 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._noApply) {
this.api.SetAnnotLineStart(record.value);
this.fireEvent('editcomplete', this);
}
},
onLineEndChanged: function(combo, record) {
if (this.api && !this._noApply) {
this.api.SetAnnotLineEnd(record.value);
this.fireEvent('editcomplete', this);
}
},
disableControls: function(disable) {
if (this._initSettings) return;
if (this._state.DisabledControls!==disable) {
this._state.DisabledControls = disable;
_.each(this.lockedControls, function(item) {
item.setDisabled(disable);
});
}
}
}, PDFE.Views.AnnotationSettings || {}));
});