@syncfusion/ej2-documenteditor
Version:
Feature-rich document editor control with built-in support for context menu, options pane and dialogs.
799 lines • 162 kB
JavaScript
import { L10n, createElement, isNullOrUndefined } from '@syncfusion/ej2-base';
//import { DocumentEditorRulerModel } from '../ruler-settings-model';
import { Ruler } from '../ruler/index';
import { HelperMethods, Point } from '../editor/editor-helper';
import { WTabStop } from '../format/paragraph-format';
/**
* Size defines and processes the size(width/height) of the objects
* @private
*/
var Size = /** @class */ (function () {
function Size(width, height) {
this.width = width;
this.height = height;
}
/**
* isEmpty method \
*
* @returns { boolean } isEmpty method .\
*
* @private
*/
Size.prototype.isEmpty = function () {
return this.height === 0 && this.width === 0;
};
/**
* clone method \
*
* @returns { Size } clone method .\
*
* @private
*/
Size.prototype.clone = function () {
return new Size(this.width, this.height);
};
return Size;
}());
export { Size };
/* eslint-disable */
/**
* defines the helper methods for the ruler
* @private
*/
var RulerHelper = /** @class */ (function () {
function RulerHelper() {
}
/**
* @private
*/
RulerHelper.prototype.hideTabStopSwitch = function (show) {
if (this.tabStopStwitch) {
this.showHideElement(show, this.tabStopStwitch);
}
};
/**
* @private
*/
RulerHelper.prototype.hideRulerBottom = function (show) {
if (this.hRulerBottom) {
this.showHideElement(show, this.hRulerBottom);
}
if (this.vRulerBottom) {
this.showHideElement(show, this.vRulerBottom);
}
};
RulerHelper.prototype.showHideElement = function (show, element) {
if (show) {
element.style.display = 'block';
}
else {
element.style.display = 'none';
}
};
/* eslint-enable */
/**
* createHtmlElement method \
*
* @returns {SVGSVGElement} createHtmlElement method .\
* @param { string } elementType - provide the diagramId value.
* @param { Object } attribute - provide the diagramId value.
* @private
*/
RulerHelper.prototype.createHtmlElement = function (elementType, attribute) {
var element = createElement(elementType);
this.setAttributeHtml(element, attribute);
return element;
};
/**
* createSvgElement method \
*
* @returns {SVGSVGElement} createSvgElement method .\
* @param { string } elementType - provide the elementType value.
* @param { Object } attribute - provide the attribute value.
* @private
*/
RulerHelper.prototype.createSvgElement = function (elementType, attribute) {
var element = document.createElementNS('http://www.w3.org/2000/svg', elementType);
this.setAttributeSvg(element, attribute);
return element;
};
/**
* applyStyleAgainstCsp method \
*
* @returns {void} applyStyleAgainstCsp method .\
* @param { SVGElement } svg - provide the svg value.
* @param { string } attributes - provide the boolean value.
* @private
*/
RulerHelper.prototype.applyStyleAgainstCsp = function (svg, attributes) {
var keys = attributes.split(';');
for (var i = 0; i < keys.length; i++) {
var attribute = keys[parseInt(i.toString(), 10)].split(':');
if (attribute.length === 2) {
svg.style[attribute[0].trim()] = attribute[1].trim();
}
}
};
/**
* setAttributeSvg method.
*
* @returns {void} setAttributeSvg method .\
* @param { SVGElement } svg - provide the svg value.
* @param { Object } attributes - provide the boolean value.
* @private
*/
RulerHelper.prototype.setAttributeSvg = function (svg, attributes) {
var keys = Object.keys(attributes);
for (var i = 0; i < keys.length; i++) {
// Added below condition to check whether svg is undefined or not
if (svg && keys[parseInt(i.toString(), 10)] !== 'style') {
svg.setAttribute(keys[parseInt(i.toString(), 10)], attributes[keys[parseInt(i.toString(), 10)]]);
}
else {
this.applyStyleAgainstCsp(svg, attributes[keys[parseInt(i.toString(), 10)]]);
}
}
};
/**
* setAttributeHtml method \
*
* @returns {void} setAttributeHtml method .\
* @param { HTMLElement } element - provide the svg value.
* @param { Object } attributes - provide the boolean value.
* @private
*/
RulerHelper.prototype.setAttributeHtml = function (element, attributes) {
var keys = Object.keys(attributes);
for (var i = 0; i < keys.length; i++) {
if (keys[parseInt(i.toString(), 10)] !== 'style') {
element.setAttribute(keys[parseInt(i.toString(), 10)], attributes[keys[parseInt(i.toString(), 10)]]);
}
else {
this.applyStyleAgainstCsp(element, attributes[keys[parseInt(i.toString(), 10)]]);
}
}
};
/**
* renderOverlapElement method \
*
* @returns {void} renderOverlapElement method .\
* @param { DocumentEditor} documentEditor - provide the content value.
* @private
*/
RulerHelper.prototype.renderOverlapElement = function (documentEditor) {
var rulerSize = this.getRulerSize(documentEditor);
var attributes = {
'id': documentEditor.element.id + '_overlapRuler',
style: 'height:' + rulerSize.height + 'px;width:' + rulerSize.width + 'px;position:absolute;margin-left:0;margin-top:0;diplay:none',
class: 'e-ruler-overlap'
};
var overlap = this.createHtmlElement('div', attributes);
var element = document.getElementById(documentEditor.element.id + '_viewerContainer');
element.insertBefore(overlap, element.firstChild);
return overlap;
};
RulerHelper.prototype.renderRulerMarkerIndicatorElement = function (documentEditor) {
if (!documentEditor.enableSelection) {
return;
}
var rulerSize = this.getRulerSize(documentEditor);
var attributes = {
'id': documentEditor.element.id + '_markIndicator',
style: 'height:' + rulerSize.height + 'px;width:' + rulerSize.width + 'px;position:absolute;margin-left:0;margin-top:0;z-index:5;border:1px solid #ccc;display:' + (documentEditor.layoutType === 'Pages' ? 'block;' : 'none;'),
class: 'e-de-ruler-markIndicator'
};
var markIndicator = this.createHtmlElement('div', attributes);
this.tabStopStwitch = markIndicator;
var element = document.getElementById(documentEditor.element.id + '_viewerContainer');
element.insertBefore(markIndicator, element.firstChild);
var ownerId = documentEditor.element.id;
var firstLineIndent = document.getElementById(ownerId + '_firstLineIndent').cloneNode(true);
var hangingIndent = document.getElementById(ownerId + '_hangingIndent').cloneNode(true);
firstLineIndent.style.left = '1px';
firstLineIndent.style.top = rulerSize.height / 2 - 3 + 'px';
firstLineIndent.style.display = 'none';
firstLineIndent.classList.add('e-de-ruler-marker');
firstLineIndent.setAttribute('id', ownerId + '_firstLineIndent_-1');
hangingIndent.style.left = '1px';
hangingIndent.style.top = rulerSize.height / 2 - 3 + 'px';
hangingIndent.style.display = 'none';
hangingIndent.classList.add('e-de-ruler-marker');
hangingIndent.setAttribute('id', ownerId + '_hangingIndent_-1');
markIndicator.appendChild(hangingIndent);
markIndicator.appendChild(firstLineIndent);
var justification = ['Left', 'Center', 'Right', 'Decimal', 'Bar'];
var locale = new L10n('documenteditor', documentEditor.defaultLocale);
locale.setLocale(documentEditor.locale);
for (var i = 0; i < 5; i++) {
this.renderTab(documentEditor, rulerSize, undefined, justification[parseInt(i.toString(), 10)], -1, locale);
var element_1 = document.getElementById(documentEditor.element.id + '_' + justification[parseInt(i.toString(), 10)] + 'Tab_-1');
if (!isNullOrUndefined(element_1)) {
element_1.classList.remove('e-de-ruler-tab');
element_1.classList.add('e-de-ruler-marker');
element_1.style.display = i == 0 ? 'block' : 'none';
element_1.style.position = 'absolute';
element_1.style.margin = '4px 3px';
markIndicator.appendChild(element_1);
}
}
markIndicator.addEventListener('click', function (event) {
var divElements = document.querySelector('.e-de-ruler-markIndicator');
for (var i = 0; i < divElements.childNodes.length; i++) {
var currentDiv = divElements.childNodes[parseInt(i.toString(), 10)];
if (currentDiv.style.display === 'block') {
currentDiv.style.display = 'none';
var nextIndex = (i + 1) % divElements.childNodes.length;
divElements.childNodes[parseInt(nextIndex.toString(), 10)].style.display = 'block';
break;
}
}
});
};
/**
* renderRuler method \
*
* @returns {void} renderRuler method .\
* @param { DocumentEditor} documentEditor - provide the content value.
* @param { boolean} isHorizontal - provide the content value.
* @private
*/
RulerHelper.prototype.renderRuler = function (documentEditor, isHorizontal) {
var _this = this;
if (!documentEditor.enableSelection) {
return;
}
var div = document.getElementById(documentEditor.element.id + (isHorizontal ? '_hRuler' : '_vRuler'));
var rulerSize = this.getRulerSize(documentEditor);
var rulerGeometry = this.getRulerGeometry(documentEditor);
var height = isHorizontal ? documentEditor.selection.end.paragraph.bodyWidget.page.boundingRectangle.x
: (documentEditor.selection.getPageTop(documentEditor.selection.end.paragraph.bodyWidget.page));
var margin = isHorizontal ? ('margin-left:' + height + 'px;') : ('margin-top:' + height + 'px;');
if (documentEditor.selection.isForward) {
this.position = documentEditor.selection.start;
}
else {
this.position = documentEditor.selection.end;
}
// const margin: string = isHorizontal ? ('margin-left:' + (pixelsToPoints(documentEditor.selection.end.paragraph.bodyWidget.page.boundingRectangle.x)) + 'px;') : ('margin-top:' + rulerSize.height + 'px;');
if (!div) {
var style_1 = 'height:' + (isHorizontal ? rulerSize.height : rulerGeometry.height) + 'px;overflow:hidden;width:' +
(isHorizontal ? rulerGeometry.width : rulerSize.width) + 'px;position:absolute;font-size:9px;text-align: left;z-index: 4;user-select:none;' + margin;
var attributes_1 = {
'id': documentEditor.element.id + (isHorizontal ? '_hRuler' : '_vRuler'),
style: style_1, class: (isHorizontal ? 'e-de-hRuler' : 'e-de-vRuler')
};
div = this.createHtmlElement('div', attributes_1);
}
div.addEventListener('dblclick', function () {
documentEditor.showDialog('PageSetup');
});
var pageElement = document.getElementById(documentEditor.element.id + '_pageContainer');
var style = 'height:' + (isHorizontal ? rulerSize.height : pageElement.getBoundingClientRect().height) + 'px;overflow:hidden;width:' +
(isHorizontal ? pageElement.getBoundingClientRect().width : rulerSize.width) + 'px;position:absolute;z-index: 3;';
var attributes = {
'id': documentEditor.element.id + (isHorizontal ? '_hRulerBottom' : '_vRulerBottom'),
style: style, class: (isHorizontal ? 'e-de-hRuler' : 'e-de-vRuler')
};
var overlap = this.createHtmlElement('div', attributes);
isHorizontal ? (this.hRulerBottom = overlap) : (this.vRulerBottom = overlap);
var parentElement = document.getElementById(documentEditor.element.id + '_viewerContainer');
parentElement.insertBefore(overlap, parentElement.firstChild);
var element = isHorizontal ? document.getElementById(documentEditor.element.id + '_hRulerBottom') : document.getElementById(documentEditor.element.id + '_vRulerBottom');
element.insertBefore(div, element.firstChild);
this.renderRulerMargins(documentEditor, isHorizontal, div);
//const documentEditorRuler: DocumentEditorRulerModel = isHorizontal ? documentEditor.documentEditorSettings.rulerSettings.horizontalRuler : documentEditor.documentEditorSettings.rulerSettings.verticalRuler;
var ruler = new Ruler(div, this);
ruler.orientation = isHorizontal ? 'Horizontal' : 'Vertical';
this.updateMargin(ruler, documentEditor, isHorizontal);
// ruler.pageWidth = documentEditor.selection.end.paragraph.bodyWidget.page.boundingRectangle.width;
// ruler.pageHeight = documentEditor.selection.end.paragraph.bodyWidget.page.boundingRectangle.height;
// ruler.length = (isHorizontal ? rulerGeometry.width : rulerGeometry.height) + documentEditorRuler.segmentWidth;
ruler.length = ruler.zeroPosition * 2;
ruler.appendTo();
// eslint-disable-next-line
isHorizontal ? documentEditor.hRuler = ruler : documentEditor.vRuler = ruler;
this.updateRulerPosition(documentEditor, isHorizontal);
var rulerObj = document.getElementById(documentEditor.element.id + (isHorizontal ? '_hRuler' : '_vRuler'));
// eslint-disable-next-line
isHorizontal ? documentEditor.hRuler.element = rulerObj : documentEditor.vRuler.element = rulerObj;
if (rulerObj) {
// Set the scrollLeft property to the desired value (e.g., 100 pixels)
if (isHorizontal) {
rulerObj.scrollLeft = ruler.zeroPosition -
HelperMethods.convertPointToPixel(documentEditor.selection.end.paragraph.bodyWidget.sectionFormat.leftMargin);
}
else {
rulerObj.scrollTop = ruler.zeroPosition -
HelperMethods.convertPointToPixel(documentEditor.selection.end.paragraph.bodyWidget.sectionFormat.topMargin);
}
}
this.locale = new L10n('documenteditor', documentEditor.defaultLocale);
if (isHorizontal) {
this.renderIndents(documentEditor, isHorizontal, rulerSize, rulerGeometry, this.locale);
}
var resizerEnabled = false;
var isDragging = false;
var isLeftRulerMargin = undefined;
var isLeftMultiColumn = false;
var isRightMultiColumn = false;
var multiColumnElement;
var hRuler = document.getElementById(documentEditor.element.id + '_hRuler');
var columnInitialValue;
var initialValue;
var currentScrollLeft;
var initialRightMargin;
var finalmouseXRelativeToDiv;
if (isHorizontal) {
document.addEventListener('mousemove', function (e) {
if (documentEditor.isDestroyed || !documentEditor.documentEditorSettings.showRuler) {
return;
}
var divRect = hRuler.getBoundingClientRect();
var leftMargin = documentEditor.selection.end.paragraph.bodyWidget.sectionFormat.leftMargin * documentEditor.zoomFactor;
var rightMargin = (HelperMethods.convertPixelToPoint(divRect.width) - documentEditor.selection.end.paragraph.bodyWidget.sectionFormat.rightMargin * documentEditor.zoomFactor);
var pixelValue = Math.round(e.clientX - divRect.left);
var mouseXRelativeToDiv = HelperMethods.convertPixelToPoint(pixelValue);
if (!isDragging) {
if (documentEditor.isOnIndent) {
hRuler.style.cursor = 'default';
if (hRuler.hasAttribute('title')) {
hRuler.removeAttribute('title');
}
resizerEnabled = false;
}
else if (((leftMargin - 3) <= mouseXRelativeToDiv) && ((leftMargin + 3) >= mouseXRelativeToDiv)) {
if (documentEditor.layoutType === 'Pages') {
hRuler.style.cursor = 'e-resize';
hRuler.setAttribute('title', _this.locale.getConstant('Left Margin'));
resizerEnabled = true;
isLeftRulerMargin = true;
}
}
else if ((((rightMargin - 3) <= mouseXRelativeToDiv) && ((rightMargin + 3) >= mouseXRelativeToDiv))) {
if (documentEditor.layoutType === 'Pages') {
hRuler.style.cursor = 'e-resize';
hRuler.setAttribute('title', _this.locale.getConstant('Right Margin'));
resizerEnabled = true;
isLeftRulerMargin = false;
}
}
else if (documentEditor.selection.end.paragraph.bodyWidget.sectionFormat.columns.length > 0) {
var columns = documentEditor.selection.end.paragraph.bodyWidget.sectionFormat.columns;
if (documentEditor.layoutType === 'Pages') {
for (var i = 1; i <= columns.length; i++) {
var rulerMarginDiv = document.getElementById(documentEditor.element.id + '_hRuler_Margin' + i);
var maginLeft = rulerMarginDiv.getBoundingClientRect().left;
var width = rulerMarginDiv.getBoundingClientRect().width;
if (((maginLeft - 3) <= e.clientX) && ((maginLeft + 3) >= e.clientX)) {
hRuler.style.cursor = "e-resize";
multiColumnElement = rulerMarginDiv;
hRuler.setAttribute('title', _this.locale.getConstant('Left Margin'));
isLeftMultiColumn = true;
resizerEnabled = true;
break;
}
else if (((maginLeft + width - 3) <= e.clientX) && ((maginLeft + width + 3) >= e.clientX)) {
hRuler.style.cursor = "e-resize";
multiColumnElement = rulerMarginDiv;
hRuler.setAttribute('title', _this.locale.getConstant('Right Margin'));
isRightMultiColumn = true;
resizerEnabled = true;
break;
}
else {
hRuler.style.cursor = "default";
if (hRuler.hasAttribute('title')) {
hRuler.removeAttribute('title');
}
isLeftMultiColumn = false;
isRightMultiColumn = false;
resizerEnabled = false;
}
}
}
}
else {
hRuler.style.cursor = 'default';
if (hRuler.hasAttribute('title')) {
hRuler.removeAttribute('title');
}
resizerEnabled = false;
}
}
if (isDragging) {
var rulerZeroPoint = HelperMethods.convertPointToPixel(1584 - documentEditor.selection.sectionFormat.leftMargin) * documentEditor.zoomFactor;
var pageWidth = documentEditor.selection.sectionFormat.pageWidth;
var rightMarginValue = documentEditor.selection.sectionFormat.rightMargin;
var rightIndentValue = documentEditor.selection.paragraphFormat.rightIndent;
rightIndentValue = rightIndentValue > 0 ? rightIndentValue : 0;
var minimumValue = 42;
var firstLineIndent = documentEditor.selection.paragraphFormat.firstLineIndent;
var leftMarginValue = documentEditor.selection.sectionFormat.leftMargin;
firstLineIndent = firstLineIndent >= 0 ? firstLineIndent : 0;
var leftIndent = documentEditor.selection.paragraphFormat.leftIndent;
if (isLeftRulerMargin) {
var leftMaxLimit = rulerZeroPoint + (HelperMethods.convertPointToPixel(pageWidth - rightMarginValue - rightIndentValue - minimumValue - firstLineIndent - leftIndent) * documentEditor.zoomFactor);
var leftMinLimit = rulerZeroPoint;
if (pixelValue + rulerZeroPoint > leftMaxLimit) {
pixelValue = leftMaxLimit - rulerZeroPoint;
mouseXRelativeToDiv = HelperMethods.convertPixelToPoint(pixelValue);
}
else if (pixelValue + rulerZeroPoint < leftMinLimit) {
pixelValue = leftMinLimit - rulerZeroPoint;
mouseXRelativeToDiv = HelperMethods.convertPixelToPoint(pixelValue);
}
}
else {
var rightMinLimit = rulerZeroPoint + (HelperMethods.convertPointToPixel(leftMarginValue + leftIndent + firstLineIndent + minimumValue + rightIndentValue) * documentEditor.zoomFactor);
var rightMaxLimit = rulerZeroPoint + (HelperMethods.convertPointToPixel(pageWidth) * documentEditor.zoomFactor);
if (pixelValue + rulerZeroPoint > rightMaxLimit) {
pixelValue = rightMaxLimit - rulerZeroPoint;
mouseXRelativeToDiv = HelperMethods.convertPixelToPoint(pixelValue);
}
else if (pixelValue + rulerZeroPoint < rightMinLimit) {
pixelValue = rightMinLimit - rulerZeroPoint;
mouseXRelativeToDiv = HelperMethods.convertPixelToPoint(pixelValue);
}
}
finalmouseXRelativeToDiv = mouseXRelativeToDiv;
var currentRightMargin = (HelperMethods.convertPixelToPoint(divRect.width) - (documentEditor.selection.end.paragraph.bodyWidget.sectionFormat.rightMargin * documentEditor.zoomFactor));
if (documentEditor.selection.end.paragraph.bodyWidget.sectionFormat.numberOfColumns <= 1) {
_this.resizeRulerMargins(isLeftRulerMargin, initialValue, currentScrollLeft, currentRightMargin, hRuler, mouseXRelativeToDiv, true, documentEditor);
}
var rightIndent = document.getElementById(documentEditor.element.id + '_rightIndent');
if (isLeftRulerMargin) {
var difference = mouseXRelativeToDiv - initialValue;
rightIndent.style.left = (initialRightMargin - HelperMethods.convertPointToPixel(difference)) + 'px';
}
else {
var difference = mouseXRelativeToDiv - initialValue;
rightIndent.style.left = (initialRightMargin + HelperMethods.convertPointToPixel(difference)) + 'px';
}
var startValue = documentEditor.documentHelper.currentPage.boundingRectangle.x;
var indicatorLineValue = startValue + pixelValue;
var lineSvg = document.getElementById(documentEditor.element.id + '_hRuler_indicator_svg');
lineSvg.style.left = indicatorLineValue + 'px';
}
});
var mouseDownTabValue_1;
var mouseUpTabValue_1;
hRuler.addEventListener("mouseenter", function (e) {
if (!isNullOrUndefined(_this.currentTabStopElement)) {
_this.currentTabStopElement.style.display = 'block';
}
});
hRuler.addEventListener("mouseleave", function (e) {
if (!isNullOrUndefined(_this.currentTabStopElement)) {
_this.currentTabStopElement.style.display = 'none';
//this.currentTabStopElement = undefined;
}
});
hRuler.addEventListener("mousedown", function (e) {
if (resizerEnabled && !documentEditor.isTableMarkerDragging) {
isDragging = true;
if (documentEditor.selection.end.paragraph.bodyWidget.sectionFormat.columns.length > 0) {
if (isLeftMultiColumn) {
columnInitialValue = multiColumnElement.getBoundingClientRect().left;
}
else if (isRightMultiColumn) {
columnInitialValue = multiColumnElement.getBoundingClientRect().left + multiColumnElement.getBoundingClientRect().width;
}
}
var divRect_1 = hRuler.getBoundingClientRect();
initialValue = HelperMethods.convertPixelToPoint(Math.round(e.clientX - divRect_1.left));
currentScrollLeft = hRuler.scrollLeft;
var rightIndent = document.getElementById(documentEditor.element.id + '_rightIndent');
initialRightMargin = HelperMethods.getNumberFromString(rightIndent.style.left);
var pixelValue = Math.round(e.clientX - divRect_1.left);
var startValue = documentEditor.documentHelper.currentPage.boundingRectangle.x;
var indicatorLineValue = startValue + pixelValue;
var lineSvg = document.getElementById(documentEditor.element.id + '_hRuler_indicator_svg');
lineSvg.style.left = indicatorLineValue + 'px';
lineSvg.style.display = 'block';
}
var divRect = hRuler.getBoundingClientRect();
if (divRect.y + (divRect.height / 2) <= e.clientY) {
mouseDownTabValue_1 = e.clientX - hRuler.getBoundingClientRect().left;
if (documentEditor.layoutType === 'Pages') {
mouseDownTabValue_1 = HelperMethods.convertPixelToPoint(mouseDownTabValue_1 - HelperMethods.convertPointToPixel(documentEditor.selection.end.paragraph.bodyWidget.sectionFormat.leftMargin) * documentEditor.zoomFactor);
if (_this.position.paragraph.paragraphFormat.bidi) {
var paraWidth = !isNullOrUndefined(_this.position.paragraph['absoluteXPosition']) ? parseFloat(_this.position.paragraph['absoluteXPosition']['width'].toString()) : _this.position.paragraph.width;
paraWidth = HelperMethods.convertPixelToPoint(paraWidth * documentEditor.zoomFactor);
mouseDownTabValue_1 = paraWidth - mouseDownTabValue_1;
}
}
else if (documentEditor.layoutType === 'Continuous') {
if (_this.position.paragraph.paragraphFormat.bidi) {
mouseDownTabValue_1 = HelperMethods.convertPixelToPoint((mouseDownTabValue_1) - 20);
var paraWidth = !isNullOrUndefined(_this.position.paragraph['absoluteXPosition']) ? parseFloat(_this.position.paragraph['absoluteXPosition']['width'].toString()) : _this.position.paragraph.width;
paraWidth = HelperMethods.convertPixelToPoint(paraWidth * documentEditor.zoomFactor);
mouseDownTabValue_1 = paraWidth - mouseDownTabValue_1;
}
else {
mouseDownTabValue_1 = HelperMethods.convertPixelToPoint((mouseDownTabValue_1) - 20);
}
}
}
});
hRuler.addEventListener("mouseup", function (e) {
var container = document.getElementById(documentEditor.element.id + '_markIndicator');
var divRect = hRuler.getBoundingClientRect();
if (divRect.y + (divRect.height / 2) <= e.clientY) {
mouseUpTabValue_1 = e.clientX - hRuler.getBoundingClientRect().left;
if (documentEditor.layoutType === 'Pages') {
mouseUpTabValue_1 = HelperMethods.convertPixelToPoint(mouseUpTabValue_1 - HelperMethods.convertPointToPixel(documentEditor.selection.end.paragraph.bodyWidget.sectionFormat.leftMargin) * documentEditor.zoomFactor);
if (_this.position.paragraph.paragraphFormat.bidi) {
var paraWidth = !isNullOrUndefined(_this.position.paragraph['absoluteXPosition']) ? parseFloat(_this.position.paragraph['absoluteXPosition']['width'].toString()) : _this.position.paragraph.width;
paraWidth = HelperMethods.convertPixelToPoint(paraWidth * documentEditor.zoomFactor);
mouseUpTabValue_1 = paraWidth - mouseUpTabValue_1;
}
}
else if (documentEditor.layoutType === 'Continuous') {
if (_this.position.paragraph.paragraphFormat.bidi) {
mouseUpTabValue_1 = HelperMethods.convertPixelToPoint((mouseUpTabValue_1) - 20);
var paraWidth = !isNullOrUndefined(_this.position.paragraph['absoluteXPosition']) ? parseFloat(_this.position.paragraph['absoluteXPosition']['width'].toString()) : _this.position.paragraph.width;
paraWidth = HelperMethods.convertPixelToPoint(paraWidth * documentEditor.zoomFactor);
mouseUpTabValue_1 = paraWidth - mouseUpTabValue_1;
}
else {
mouseUpTabValue_1 = HelperMethods.convertPixelToPoint((mouseUpTabValue_1) - 20);
}
}
var rightIndent = document.getElementById(documentEditor.element.id + '_rightIndent');
var rightIndentValue = HelperMethods.getNumberFromString(rightIndent.style.left);
var maxValue = rightIndentValue;
if (mouseUpTabValue_1 > 0 && mouseUpTabValue_1 < maxValue && mouseDownTabValue_1 == mouseUpTabValue_1) {
if (!isNullOrUndefined(container)) {
var visibleElement = container.querySelector('.e-de-ruler-marker[style*="display: block;"]');
if (!isNullOrUndefined(visibleElement)) {
mouseUpTabValue_1 /= documentEditor.zoomFactor;
var dataNameValue = visibleElement.getAttribute('data-name');
if (dataNameValue == 'LeftTab' || dataNameValue == 'CenterTab' || dataNameValue == 'RightTab' || dataNameValue == 'DecimalTab' || dataNameValue == 'BarTab') {
var tabStop = new WTabStop();
tabStop.position = mouseUpTabValue_1;
tabStop.tabJustification = _this.getTabJustification(dataNameValue);
tabStop.deletePosition = 0;
tabStop.tabLeader = 'None';
documentEditor.editor.onApplyParagraphFormat('tabStop', [tabStop], false, false);
}
else if (dataNameValue == 'FirstLineIndent' || dataNameValue == 'HangingIndent') {
var property = 'firstLineIndent';
if (dataNameValue == 'HangingIndent') {
var initialValue = documentEditor.selection.paragraphFormat.firstLineIndent;
var differenceValue = mouseUpTabValue_1 + initialValue;
var currentValue = documentEditor.selection.start.paragraph.paragraphFormat.firstLineIndent;
documentEditor.editor.onApplyParagraphFormat('firstLineIndent', currentValue - differenceValue, false, false);
var leftIndentCurrentValue = documentEditor.selection.start.paragraph.paragraphFormat.leftIndent + currentValue;
currentValue = currentValue - differenceValue;
documentEditor.editor.onApplyParagraphFormat('leftIndent', leftIndentCurrentValue - currentValue, false, false, true);
}
else {
documentEditor.editor.onApplyParagraphFormat(property, mouseDownTabValue_1, false, false);
}
}
}
}
}
}
});
document.addEventListener("mouseup", function (e) {
if (isDragging && !documentEditor.isTableMarkerDragging) {
var divRect = hRuler.getBoundingClientRect();
var mouseXRelativeToDiv = finalmouseXRelativeToDiv; // HelperMethods.convertPixelToPoint(Math.round(e.clientX - divRect.left));
// const currentLeftMargin = documentEditor.hRuler.startMargin * documentEditor.zoomFactor;
// const currentScrollLeft = hRuler.scrollLeft;
// const currentRightMargin = (HelperMethods.convertPixelToPoint(divRect.width) - (documentEditor.selection.end.paragraph.bodyWidget.sectionFormat.rightMargin * documentEditor.zoomFactor));
// resizeRulerMargins(isLeftRulerMargin, currentLeftMargin, currentScrollLeft, currentRightMargin, hRuler, mouseXRelativeToDiv, true, documentEditor);
// if (hRuler) {
// rulerObj.scrollLeft = rulerObj.scrollLeft - HelperMethods.convertPointToPixel((documentEditor.hRuler.leftMargin < mouseXRelativeToDiv) ? (mouseXRelativeToDiv - documentEditor.hRuler.leftMargin) : (documentEditor.hRuler.leftMargin - mouseXRelativeToDiv));
// }
// updateRuler(documentEditor, documentEditor.hRuler, true);
if (isLeftMultiColumn || isRightMultiColumn) {
var finalvalue = 0;
finalvalue = e.clientX - columnInitialValue;
var secFormat = documentEditor.selection.end.paragraph.bodyWidget.sectionFormat.cloneFormat();
var pageWidth = documentEditor.selection.sectionFormat.pageWidth - documentEditor.selection.end.paragraph.bodyWidget.sectionFormat.leftMargin - documentEditor.selection.end.paragraph.bodyWidget.sectionFormat.rightMargin;
var columnSpace = isLeftMultiColumn ? (secFormat.columns[0].space + ((HelperMethods.convertPixelToPoint(finalvalue)))) : (secFormat.columns[0].space - ((HelperMethods.convertPixelToPoint(finalvalue))));
for (var i = 0; i < secFormat.columns.length; i++) {
var col = secFormat.columns[parseInt(i.toString(), 10)];
if (columnSpace >= 0 && col.width >= 36) {
var widthCal = HelperMethods.convertPointToPixel((pageWidth - (HelperMethods.convertPixelToPoint(columnSpace) * (secFormat.numberOfColumns - 1))) / (secFormat.numberOfColumns));
col.width = widthCal;
if (i < secFormat.columns.length - 1) {
col.space = columnSpace;
}
}
else {
col[0].space = col[1].space;
}
}
documentEditor.editorModule.onApplySectionFormat(undefined, secFormat);
isLeftMultiColumn = false;
isRightMultiColumn = false;
}
else if (isLeftRulerMargin) {
documentEditor.hRuler.startMargin = (mouseXRelativeToDiv / documentEditor.zoomFactor);
documentEditor.selection.sectionFormat.leftMargin = mouseXRelativeToDiv / documentEditor.zoomFactor;
}
else {
var rightMargin = HelperMethods.convertPixelToPoint(rulerGeometry.width) - (mouseXRelativeToDiv / documentEditor.zoomFactor);
// documentEditor.hRuler.endMargin = rightMargin;
documentEditor.selection.sectionFormat.rightMargin = rightMargin;
}
resizerEnabled = false;
isDragging = false;
isLeftRulerMargin = undefined;
var lineSvg = document.getElementById(documentEditor.element.id + '_hRuler_indicator_svg');
lineSvg.style.display = 'none';
}
});
}
//Vertical Ruler Resizing
var vRuler = document.getElementById(documentEditor.element.id + '_vRuler');
var isTopRulerMargin = false;
var initialYValue;
var currentScrollTop;
if (!isHorizontal) {
document.addEventListener("mousemove", function (e) {
if (documentEditor.isDestroyed || !documentEditor.documentEditorSettings.showRuler) {
return;
}
var divRect = vRuler.getBoundingClientRect();
var topMargin = documentEditor.selection.end.paragraph.bodyWidget.sectionFormat.topMargin * documentEditor.zoomFactor;
var bottomMargin = (HelperMethods.convertPixelToPoint(divRect.height) - documentEditor.selection.end.paragraph.bodyWidget.sectionFormat.bottomMargin * documentEditor.zoomFactor);
var mouseXRelativeToDiv = HelperMethods.convertPixelToPoint(Math.round(e.clientY - divRect.top));
var pixelValue = Math.round(e.clientY - divRect.top);
if (!isDragging) {
if (((topMargin - 3) <= mouseXRelativeToDiv) && ((topMargin + 3) >= mouseXRelativeToDiv)) {
vRuler.style.cursor = "n-resize";
vRuler.setAttribute('title', _this.locale.getConstant('Top Margin'));
resizerEnabled = true;
isTopRulerMargin = true;
}
else if ((((bottomMargin - 3) <= mouseXRelativeToDiv) && ((bottomMargin + 3) >= mouseXRelativeToDiv))) {
vRuler.style.cursor = "n-resize";
vRuler.setAttribute('title', _this.locale.getConstant('Bottom Margin'));
resizerEnabled = true;
isTopRulerMargin = false;
}
else {
vRuler.style.cursor = "default";
if (vRuler.hasAttribute('title')) {
vRuler.removeAttribute('title');
}
resizerEnabled = false;
}
}
if (isDragging) {
var mouseXRelativeToDiv_1 = HelperMethods.convertPixelToPoint(Math.round(e.clientY - divRect.top));
var rulerZeroPoint = HelperMethods.convertPointToPixel(1584 - documentEditor.selection.sectionFormat.topMargin) * documentEditor.zoomFactor;
var pageHeight = documentEditor.selection.sectionFormat.pageHeight;
var minimumValue = 12;
var bottomMarginValue = documentEditor.selection.sectionFormat.bottomMargin;
var topMarginValue = documentEditor.selection.sectionFormat.topMargin;
if (isTopRulerMargin) {
var topMinLimit = rulerZeroPoint;
var topMaxLimit = rulerZeroPoint + (HelperMethods.convertPointToPixel(pageHeight - bottomMarginValue - minimumValue) * documentEditor.zoomFactor);
if (pixelValue + rulerZeroPoint > topMaxLimit) {
pixelValue = topMaxLimit - rulerZeroPoint;
mouseXRelativeToDiv_1 = HelperMethods.convertPixelToPoint(pixelValue);
}
else if (pixelValue + rulerZeroPoint < topMinLimit) {
pixelValue = topMinLimit - rulerZeroPoint;
mouseXRelativeToDiv_1 = HelperMethods.convertPixelToPoint(pixelValue);
}
}
else {
var bottomMinLimit = rulerZeroPoint + (HelperMethods.convertPointToPixel(topMarginValue + minimumValue) * documentEditor.zoomFactor);
var bottomMaxLimit = rulerZeroPoint + (HelperMethods.convertPointToPixel(pageHeight) * documentEditor.zoomFactor);
if (pixelValue + rulerZeroPoint > bottomMaxLimit) {
pixelValue = bottomMaxLimit - rulerZeroPoint;
mouseXRelativeToDiv_1 = HelperMethods.convertPixelToPoint(pixelValue);
}
else if (pixelValue + rulerZeroPoint < bottomMinLimit) {
pixelValue = bottomMinLimit - rulerZeroPoint;
mouseXRelativeToDiv_1 = HelperMethods.convertPixelToPoint(pixelValue);
}
}
var currentBottomMargin = (HelperMethods.convertPixelToPoint(divRect.height) - (documentEditor.selection.end.paragraph.bodyWidget.sectionFormat.bottomMargin * documentEditor.zoomFactor));
_this.resizeVRulerMargins(isTopRulerMargin, initialYValue, currentScrollTop, currentBottomMargin, vRuler, mouseXRelativeToDiv_1, documentEditor);
var startValue = documentEditor.documentHelper.currentPage.boundingRectangle.y * documentEditor.zoomFactor;
var indicatorLineValue = startValue + pixelValue; // + 15;
var lineSvg = document.getElementById(documentEditor.element.id + '_vRuler_indicator_svg');
lineSvg.style.top = indicatorLineValue + 'px';
}
});
vRuler.addEventListener("mousedown", function (e) {
if (resizerEnabled) {
isDragging = true;
var divRect = vRuler.getBoundingClientRect();
initialYValue = HelperMethods.convertPixelToPoint(Math.round(e.clientY - divRect.top));
currentScrollTop = vRuler.scrollTop;
var pixelValue = Math.round(e.clientY - divRect.top);
var lineSvg = document.getElementById(documentEditor.element.id + '_vRuler_indicator_svg');
var startValue = documentEditor.documentHelper.currentPage.boundingRectangle.y * documentEditor.zoomFactor;
var indicatorLineValue = (startValue + pixelValue); // + 15;
lineSvg.style.top = indicatorLineValue + 'px';
lineSvg.style.display = 'block';
}
});
document.addEventListener("mouseup", function (e) {
if (isDragging) {
var divRect = vRuler.getBoundingClientRect();
var mouseXRelativeToDiv = HelperMethods.convertPixelToPoint(Math.round(e.clientY - divRect.top));
// const currentTopMargin = documentEditor.hRuler.startMargin * documentEditor.zoomFactor;
// const currentScrollTop = vRuler.scrollTop;
// const currentBottomMargin = (HelperMethods.convertPixelToPoint(divRect.height) - (documentEditor.selection.end.paragraph.bodyWidget.sectionFormat.bottomMargin * documentEditor.zoomFactor));
// resizeVRulerMargins(isTopRulerMargin, currentTopMargin, currentScrollTop, currentBottomMargin, vRuler, mouseXRelativeToDiv, documentEditor);
// if (hRuler) {
// rulerObj.scrollLeft = rulerObj.scrollLeft - HelperMethods.convertPointToPixel((documentEditor.hRuler.leftMargin < mouseXRelativeToDiv) ? (mouseXRelativeToDiv - documentEditor.hRuler.leftMargin) : (documentEditor.hRuler.leftMargin - mouseXRelativeToDiv));
// }
// updateRuler(documentEditor, documentEditor.hRuler, true);
if (isTopRulerMargin) {
documentEditor.vRuler.startMargin = (mouseXRelativeToDiv / documentEditor.zoomFactor);
documentEditor.selection.sectionFormat.topMargin = mouseXRelativeToDiv / documentEditor.zoomFactor;
}
else {
var bottomtMargin = HelperMethods.convertPixelToPoint(rulerGeometry.height) - (mouseXRelativeToDiv / documentEditor.zoomFactor);
documentEditor.vRuler.endMargin = bottomtMargin;
documentEditor.selection.sectionFormat.bottomMargin = bottomtMargin;
}
resizerEnabled = false;
isDragging = false;
var lineSvg = document.getElementById(documentEditor.element.id + '_vRuler_indicator_svg');
lineSvg.style.display = 'none';
isTopRulerMargin = undefined;
}
});
}
};
RulerHelper.prototype.updateRulerPosition = function (documentEditor, isHorizontal) {
var rulerObj = document.getElementById(documentEditor.element.id + (isHorizontal ? '_hRuler' : '_vRuler'));
// eslint-disable-next-line
isHorizontal ? documentEditor.hRuler.element = rulerObj : documentEditor.vRuler.element = rulerObj;
if (rulerObj) {
// Set the scrollLeft property to the desired value (e.g., 100 pixels)
rulerObj.scrollLeft = 2112 - HelperMethods.convertPointToPixel(documentEditor.selection.end.paragraph.bodyWidget.sectionFormat.leftMargin);
}
};
RulerHelper.prototype.updateIndicatorLines = function (documentEditor) {
var hRulerSvg = document.getElementById(documentEditor.element.id + '_hRuler_indicator_svg');
var hRulerLine = document.getElementById(documentEditor.element.id + '_hRuler_indicator');
var vRulerSvg = document.getElementById(documentEditor.element.id + '_vRuler_indicator_svg');
var vRulerLine = document.getElementById(documentEditor.element.id + '_vRuler_indicator');
var pageContainer = document.getElementById(documentEditor.element.id + '_pageContainer');
var pageData = pageContainer.getBoundingClientRect();
var pageHeight = pageData.height;
var pageWidth = pageData.width;
hRulerSvg.style.height = pageHeight + 'px';
hRulerLine.setAttribute('y2', "" + pageHeight);
vRulerSvg.style.width = pageWidth + 'px';
vRulerLine.setAttribute('x2', "" + pageWidth);
};
RulerHelper.prototype.createIndicatorLines = function (documentEditor) {
if (!documentEditor.enableSelection) {
return;
}
var viewerContainer = document.getElementById(documentEditor.element.id + '_viewerContainer');
var pageContainer = document.getElementById(documentEditor.element.id + '_pageContainer');
// let container = document.getElementById(documentEditor.element.id);
var data = viewerContainer.getBoundingClientRect();
var pageData = pageContainer.getBoundingClientRect();
var pageHeight = pageData.height;
var pageWidth = pageData.width;
var hRuler = document.getElementById(documentEditor.element.id + '_hRuler');
var hSvgAttr = {
id: documentEditor.element.id + '_hRuler_indicator_svg',
width: 0.5 + 'px',
height: pageHeight + 'px',
style: 'position:absolute;z-index:1;display:none;'
};
var hSvg = this.createSvgElement('svg', hSvgAttr);
var verticalLineAttr = { 'x1': 0, 'y1': hRuler.getBoundingClientRect().height + 5, 'x2': 0, 'y2': pageHeight, 'stroke-width': 0.5, 'stroke': 'black' };
var vLine = this.createSvgElement('line', verticalLineAttr);
vLine.setAttribute('id', documentEditor.element.id + '_hRuler_indicator');
hSvg.appendChild(vLine);
viewerContainer.insertBefore(hSvg, viewerContainer.firstChild);
var vRuler = document.getElementById(documentEditor.element.id + '_vRuler');
var vSvgAttr = {
id: documentEditor.element.id + '_vRule