devexpress-richedit 24.2.6 → 25.1.1-alpha

package/dist/dx.richedit.js

@@ -1,6 +1,6 @@
 /**
 * DevExpress WebRichEdit (dx.richedit.js)
-* Version: 24.2.6
+* Version: 25.1.1
 * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
 * License: https://www.devexpress.com/Support/EULAs
 */
@@ -14600,6 +14600,8 @@ RichUtils.isAlphanumeric = /^[\u00C0-\u1FFF\u2C00-\uD7FF\w]+$/;
 RichUtils.predefinedFontSizes = [8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72];
 RichUtils.minFontSize = 1;
 RichUtils.maxFontSize = 600;
+RichUtils.minZoomLevel = 0.5;
+RichUtils.maxZoomLevel = 2.0;
 RichUtils.specialCharacters = new SpecialCharacters();
 
 ;// CONCATENATED MODULE: ./src/common/model/numbering-lists/list-level-properties.ts
@@ -19657,7 +19659,7 @@ class ParagraphStyle extends StyleBase {
     }
 }
 ParagraphStyle.normalStyleName = "Normal";
-ParagraphStyle.headingStyleName = "heading";
+ParagraphStyle.headingStyleName = "Heading";
 ParagraphStyle.tocStyleName = "toc";
 class TabProperties {
     constructor() {
@@ -19702,25 +19704,32 @@ class TabProperties {
         this.sort();
     }
 }
-class TabInfo {
-    constructor(position, alignment, leader, deleted, isDefault) {
-        this.position = position;
+class TabInfoBase {
+    constructor(alignment, leader, deleted, isDefault) {
         this.alignment = alignment;
         this.leader = leader;
-        this.isDefault = isDefault;
         this.deleted = deleted;
-    }
-    clone() {
-        return new TabInfo(this.position, this.alignment, this.leader, this.deleted, this.isDefault);
+        this.isDefault = isDefault;
     }
     equals(obj) {
         if (!obj)
             return false;
-        return this.alignment == obj.alignment &&
-            this.leader == obj.leader &&
-            this.position == obj.position &&
-            this.deleted == obj.deleted &&
-            this.isDefault == obj.isDefault;
+        return this.alignment === obj.alignment &&
+            this.leader === obj.leader &&
+            this.deleted === obj.deleted &&
+            this.isDefault === obj.isDefault;
+    }
+}
+class TabInfo extends TabInfoBase {
+    constructor(position, alignment, leader, deleted, isDefault) {
+        super(alignment, leader, deleted, isDefault);
+        this.position = position;
+    }
+    equals(obj) {
+        return super.equals(obj) && this.position == obj.position;
+    }
+    clone() {
+        return new TabInfo(this.position, this.alignment, this.leader, this.deleted, this.isDefault);
     }
 }
 
@@ -25143,6 +25152,7 @@ var JSONControlOptionsProperty;
     JSONControlOptionsProperty[JSONControlOptionsProperty["AcceptsTab"] = 32] = "AcceptsTab";
     JSONControlOptionsProperty[JSONControlOptionsProperty["Download"] = 33] = "Download";
     JSONControlOptionsProperty[JSONControlOptionsProperty["RaiseClientEventsOnModificationsViaAPI"] = 34] = "RaiseClientEventsOnModificationsViaAPI";
+    JSONControlOptionsProperty[JSONControlOptionsProperty["AllowZoom"] = 35] = "AllowZoom";
 })(JSONControlOptionsProperty || (JSONControlOptionsProperty = {}));
 
 ;// CONCATENATED MODULE: ./src/common/model/json/enums/json-section-enums.ts
@@ -25932,6 +25942,8 @@ class JSONImporter {
             controlOptions.acceptsTab = !!json[JSONControlOptionsProperty.AcceptsTab];
         if (json[JSONControlOptionsProperty.Download] !== undefined)
             controlOptions.download = json[JSONControlOptionsProperty.Download];
+        if (json[JSONControlOptionsProperty.AllowZoom] !== undefined)
+            controlOptions.allowZoom = json[JSONControlOptionsProperty.AllowZoom];
         controlOptions.raiseClientEventsOnModificationsViaAPI = !!json[JSONControlOptionsProperty.RaiseClientEventsOnModificationsViaAPI];
     }
 }
@@ -35788,8 +35800,8 @@ class ApiParametersChecker {
     static defaultDescriptor(getResult) {
         return new ApiParameterDescriptor('', '', () => true, getResult);
     }
-    static numberDescriptor(parameterName, getResult, minBound = constants.Constants.MIN_SAFE_INTEGER, maxBound = constants.Constants.MAX_SAFE_INTEGER) {
-        return new ApiParameterDescriptor(parameterName, `number on interval [${minBound}, ${maxBound}]`, (value) => (0,common.isNumber)(value) && (value >= minBound && value < maxBound), getResult);
+    static numberDescriptor(parameterName, getResult, minBound = constants.Constants.MIN_SAFE_INTEGER, maxBound = constants.Constants.MAX_SAFE_INTEGER, closedMaxBound = false) {
+        return new ApiParameterDescriptor(parameterName, `number on interval [${minBound}, ${maxBound}]`, (value) => (0,common.isNumber)(value) && (value >= minBound && (closedMaxBound ? value <= maxBound : value < maxBound)), getResult);
     }
     static booleanDescriptor(parameterName, getResult) {
         return new ApiParameterDescriptor(parameterName, 'boolean', (value) => typeof value === 'boolean', getResult);
@@ -40173,6 +40185,7 @@ class ControlOptions {
         this.tables = DocumentCapability.Default;
         this.tableStyle = DocumentCapability.Default;
         this.floatingObjects = DocumentCapability.Default;
+        this.allowZoom = DocumentCapability.Default;
         this.acceptsTab = true;
         this.raiseClientEventsOnModificationsViaAPI = true;
     }
@@ -86264,6 +86277,8 @@ var RichEditClientCommand;
     RichEditClientCommand[RichEditClientCommand["NoSpellingSuggestions"] = 457] = "NoSpellingSuggestions";
     RichEditClientCommand[RichEditClientCommand["GetHtml"] = 458] = "GetHtml";
     RichEditClientCommand[RichEditClientCommand["CreateEmptyIfField"] = 459] = "CreateEmptyIfField";
+    RichEditClientCommand[RichEditClientCommand["ChangeZoomLevel"] = 460] = "ChangeZoomLevel";
+    RichEditClientCommand[RichEditClientCommand["ToggleAllowZoom"] = 461] = "ToggleAllowZoom";
 })(RichEditClientCommand || (RichEditClientCommand = {}));
 
 ;// CONCATENATED MODULE: ./src/common/interfaces/i-rich-edit-core.ts
@@ -92782,6 +92797,7 @@ class LayoutPageArea extends rectangle.Rectangle {
 
 
 
+
 var LayoutRowStateFlags;
 (function (LayoutRowStateFlags) {
     LayoutRowStateFlags[LayoutRowStateFlags["NormallyEnd"] = 0] = "NormallyEnd";
@@ -92792,6 +92808,7 @@ var LayoutRowStateFlags;
     LayoutRowStateFlags[LayoutRowStateFlags["DocumentEnd"] = 16] = "DocumentEnd";
     LayoutRowStateFlags[LayoutRowStateFlags["CellTableEnd"] = 64] = "CellTableEnd";
     LayoutRowStateFlags[LayoutRowStateFlags["PageBreakBefore"] = 128] = "PageBreakBefore";
+    LayoutRowStateFlags[LayoutRowStateFlags["InfinityWidth"] = 256] = "InfinityWidth";
 })(LayoutRowStateFlags || (LayoutRowStateFlags = {}));
 class layout_row_LayoutRow extends rectangle.Rectangle {
     get hasEffectToPageHeight() { return this.boxes.length != 1 || !this.boxes[0].isSectionBreakBox; }
@@ -92907,7 +92924,7 @@ class layout_row_LayoutRow extends rectangle.Rectangle {
         return lastBoxIndexWhatCanStrikeoutAndUnderline;
     }
     containsSpacesOnly() {
-        return this.boxes.length > 0 && utils_list.ListUtils.allOf(this.boxes, val => val.isWhitespace());
+        return this.boxes.length > 0 && utils_list.ListUtils.allOf(this.boxes, val => val.isWhitespace() || val.getType() === LayoutBoxType.ParagraphMark);
     }
 }
 class LayoutRowWithIndex extends (/* unused pure expression or super */ null && (layout_row_LayoutRow)) {
@@ -94011,7 +94028,8 @@ class RowFormatterResult {
             return;
         this.rowFormatter.tabInfo.shiftBoxesAfterLastTab();
         const dontJustifyLinesEndingInSoftLineBreak = this.rowFormatter.manager.model.compatibilitySettings.dontJustifyLinesEndingInSoftLineBreak;
-        BoxAligner.align(this.row, this.rowFormatter.paragraphProps.alignment, currLogicRowEndPos, this.rowBoxIndexStart, dontJustifyLinesEndingInSoftLineBreak);
+        if (!this.row.flags.get(LayoutRowStateFlags.InfinityWidth))
+            BoxAligner.align(this.row, this.rowFormatter.paragraphProps.alignment, currLogicRowEndPos, this.rowBoxIndexStart, dontJustifyLinesEndingInSoftLineBreak);
         this.rowBoxIndexStart = this.row.boxes.length;
     }
     deleteSomeAnchorObjects(index, posToRestart) {
@@ -95711,6 +95729,7 @@ class RowEndedWithPageBreakState extends RowEndedWithParagraphMarkFormatterState
 
 
 
+
 class RowTabInfo {
     get row() {
         return this.rowFormatter.row;
@@ -95781,9 +95800,10 @@ class RowTabInfo {
         if (tabXPosRelativePage > lastInterval.end) {
             if (lastInterval.end < this.rowFormatter.paragraphHorizontalBounds.end) {
                 if (this.rowFormatter.manager.model.compatibilitySettings.compatibilityMode < CompatibilityMode.Word2013) {
+                    this.currInterval.avaliableWidth = Number.MAX_SAFE_INTEGER - this.currInterval.busyWidth;
                     this.currInterval.length = Number.MAX_SAFE_INTEGER;
-                    this.currInterval.avaliableWidth = Number.MAX_SAFE_INTEGER;
                     this.row.width = Number.MAX_SAFE_INTEGER;
+                    this.row.flags.set(LayoutRowStateFlags.InfinityWidth, true);
                     return this.addTabBox();
                 }
                 else if (tabBox.right < this.rowFormatter.paragraphHorizontalBounds.end) {
@@ -99346,7 +99366,8 @@ class BaseFormatter {
             const minPageContentHeight = bottomPosition + margins.bottom;
             const minVisibleAreaHeight = minPageContentHeight +
                 pageInfo.topMargin + pageInfo.topPageBorderWidth + pageInfo.bottomPageBorderWidth + pageInfo.bottomMargin;
-            const diff = Math.floor(Math.max(0, this.manager.controlHeightProvider.getVisibleAreaHeight(false) - minVisibleAreaHeight));
+            const zoomLevel = this.manager.innerClientProperties.viewsSettings.zoomLevel;
+            const diff = Math.floor(Math.max(0, this.manager.controlHeightProvider.getVisibleAreaHeight(false) / zoomLevel - minVisibleAreaHeight));
             const finalPageHeight = minPageContentHeight + diff;
             const columnHeight = finalPageHeight - margins.vertical;
             this.layoutPosition.column.height = columnHeight;
@@ -101772,6 +101793,7 @@ class ViewSettings {
         this.paddings = new margins/* Margins */.m(15, 15, 15, 15);
         this.pageVerticalInfo = new RenderPageVertivalInfo();
         this.showHorizontalRuler = true;
+        this.zoomLevel = 1.0;
     }
     copyFrom(obj) {
         this.paddings = new margins/* Margins */.m(obj.paddings.left, obj.paddings.right, obj.paddings.top, obj.paddings.bottom);
@@ -101779,6 +101801,8 @@ class ViewSettings {
         this._widthOfPage = obj._widthOfPage;
         this.fixedWidth = obj.fixedWidth;
         this.showHorizontalRuler = obj.showHorizontalRuler;
+        this.zoomLevel = obj.zoomLevel;
+        this.allowZoom = obj.allowZoom;
         this.pageVerticalInfo.copyFrom(obj.pageVerticalInfo);
     }
 }
@@ -102225,953 +102249,6 @@ const RendererClassNames = {
     CURSOR_NO_BLINK_CLASS_NAME: "dxreSelNoblink",
 };
 
-;// CONCATENATED MODULE: ./src/common/canvas/renderes/z-index-helper.ts
-var zIndexCssClassType;
-(function (zIndexCssClassType) {
-    zIndexCssClassType[zIndexCssClassType["TextBoxBg"] = 0] = "TextBoxBg";
-    zIndexCssClassType[zIndexCssClassType["TblRowBg"] = 1] = "TblRowBg";
-    zIndexCssClassType[zIndexCssClassType["TblCellBg"] = 2] = "TblCellBg";
-    zIndexCssClassType[zIndexCssClassType["ParBg"] = 3] = "ParBg";
-    zIndexCssClassType[zIndexCssClassType["BoxBg"] = 4] = "BoxBg";
-    zIndexCssClassType[zIndexCssClassType["FieldBg"] = 5] = "FieldBg";
-    zIndexCssClassType[zIndexCssClassType["SelRange"] = 6] = "SelRange";
-    zIndexCssClassType[zIndexCssClassType["BoxSpace"] = 7] = "BoxSpace";
-    zIndexCssClassType[zIndexCssClassType["SelSearch"] = 8] = "SelSearch";
-    zIndexCssClassType[zIndexCssClassType["SelRow"] = 9] = "SelRow";
-    zIndexCssClassType[zIndexCssClassType["Box"] = 10] = "Box";
-    zIndexCssClassType[zIndexCssClassType["Bookmark"] = 11] = "Bookmark";
-    zIndexCssClassType[zIndexCssClassType["TableBorder"] = 12] = "TableBorder";
-    zIndexCssClassType[zIndexCssClassType["SelMissp"] = 13] = "SelMissp";
-    zIndexCssClassType[zIndexCssClassType["SelCursor"] = 14] = "SelCursor";
-    zIndexCssClassType[zIndexCssClassType["SelTouchBar"] = 15] = "SelTouchBar";
-    zIndexCssClassType[zIndexCssClassType["TblCursor"] = 16] = "TblCursor";
-    zIndexCssClassType[zIndexCssClassType["AnchoredPicture"] = 17] = "AnchoredPicture";
-    zIndexCssClassType[zIndexCssClassType["TextBox"] = 18] = "TextBox";
-})(zIndexCssClassType || (zIndexCssClassType = {}));
-class ZIndexHelper {
-    static getClassName(level, zIndexCssNames) {
-        return `dxre${ZIndexHelper.names[zIndexCssNames]}ZL${level}`;
-    }
-}
-ZIndexHelper.names = {
-    [zIndexCssClassType.TextBoxBg]: "TextBoxBg",
-    [zIndexCssClassType.TblRowBg]: "TblRowBg",
-    [zIndexCssClassType.TblCellBg]: "TblCellBg",
-    [zIndexCssClassType.ParBg]: "ParBg",
-    [zIndexCssClassType.BoxBg]: "BoxBg",
-    [zIndexCssClassType.FieldBg]: "FieldBg",
-    [zIndexCssClassType.SelRange]: "SelRange",
-    [zIndexCssClassType.BoxSpace]: "BoxSpace",
-    [zIndexCssClassType.SelSearch]: "SelSearch",
-    [zIndexCssClassType.SelRow]: "SelRow",
-    [zIndexCssClassType.Box]: "Box",
-    [zIndexCssClassType.Bookmark]: "Bookmark",
-    [zIndexCssClassType.TableBorder]: "TableBorder",
-    [zIndexCssClassType.SelMissp]: "SelMissp",
-    [zIndexCssClassType.SelCursor]: "SelCursor",
-    [zIndexCssClassType.SelTouchBar]: "SelTouchBar",
-    [zIndexCssClassType.TblCursor]: "TblCursor",
-    [zIndexCssClassType.AnchoredPicture]: "AnchoredPicture",
-    [zIndexCssClassType.TextBox]: "TextBox",
-};
-
-;// CONCATENATED MODULE: ./src/common/canvas/utils.ts
-class CanvasUtils {
-    static buildHyperlinkTipString(hyperlinkTip, clickText, settings) {
-        if (!hyperlinkTip)
-            hyperlinkTip = "";
-        return settings.createHyperlinkTooltip(hyperlinkTip, `\nCtrl + ${clickText}`).replace(/['|"]/g, "&quot;");
-    }
-}
-
-;// CONCATENATED MODULE: ./src/common/canvas/renderes/common/document-renderer.ts
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-class SimpleViewCanvasSizeManager {
-    constructor(canvasManager, control) {
-        this.size = new geometry_size.Size(0, 0);
-        this.isSizeObserving = false;
-        this.sizeUpdated = false;
-        this.resizeFrameId = null;
-        this.canvasManager = canvasManager;
-        this.control = control;
-        this.resizeObserver = new ResizeObserver(() => {
-            this.sizeUpdated = false;
-            this.resizeFrameId = requestAnimationFrame(() => {
-                if (!this.sizeUpdated)
-                    this.changeSize(false);
-                this.sizeUpdated = true;
-                this.resizeFrameId = null;
-            });
-        });
-    }
-    dispose() {
-        if (this.resizeFrameId)
-            cancelAnimationFrame(this.resizeFrameId);
-        this.resizeFrameId = null;
-        this.resizeObserver.disconnect();
-    }
-    changeSize(force) {
-        const curr = new geometry_size.Size(this.canvasManager.getCanvasWidth(), this.canvasManager.controlHeightProvider.getVisibleAreaHeight(false));
-        if (force || !curr.equals(this.size)) {
-            this.size = curr;
-            this.changeSizeCore();
-        }
-    }
-    setViewMode(val) {
-        if (val) {
-            this.changeSize(true);
-            if (!this.isSizeObserving) {
-                this.resizeObserver.observe(this.canvasManager.canvas);
-                this.isSizeObserving = true;
-            }
-        }
-        else {
-            if (this.isSizeObserving) {
-                this.resizeObserver.unobserve(this.canvasManager.canvas);
-                this.isSizeObserving = false;
-            }
-            this.changeSizeCore();
-        }
-        this.sizeUpdated = true;
-    }
-    changeSizeCore() {
-        {
-            utils_list.ListUtils.forEach(this.control.viewManager.cache, (_val) => this.control.viewManager.renderer.removePage(1), 1);
-            this.control.viewManager.ensureFirstPageIsRendered();
-            this.control.innerClientProperties.viewsSettings.widthOfPage = this.canvasManager.getCanvasWidth();
-            if (this.control.layoutFormatterManager) {
-                this.control.layoutFormatterManager.invalidator.onChangedAllLayout();
-                this.control.selection.scrollManager.setScroll(new ScrollState().byModelPosition(this.control.selection)
-                    .setModelPosition(this.control.selection.lastSelectedInterval.start).useStdRelativePosition().useStdOffset());
-            }
-            this.control.owner.adjustControl();
-            this.control.horizontalRulerControl.update();
-        }
-    }
-}
-class DocumentRenderer {
-    get cache() { return this.viewManager.cache; }
-    constructor(viewManager) {
-        this.viewManager = viewManager;
-        if (this.viewManager.innerClientProperties.viewsSettings.isSimpleView)
-            dom.DomUtils.addClassName(this.viewManager.canvas, RendererClassNames.SIMPLE_VIEW);
-    }
-    onViewTypeChanged() {
-        switch (this.viewManager.innerClientProperties.viewsSettings.viewType) {
-            case ViewType.Simple:
-                dom.DomUtils.addClassName(this.viewManager.canvas, RendererClassNames.SIMPLE_VIEW);
-                break;
-            case ViewType.PrintLayout:
-                dom.DomUtils.removeClassName(this.viewManager.canvas, RendererClassNames.SIMPLE_VIEW);
-                break;
-        }
-    }
-    applyPageChange(layoutPage, pageChange) {
-        Log.print(LogSource.DocumentRenderer, "applyPageChanges", `pageIndex ${pageChange.index}`);
-        const pageFromCache = this.cache[pageChange.index];
-        for (let pageAreaChange of pageChange.mainPageAreaChanges)
-            this.applyMainPageAreaChange(pageFromCache, layoutPage, pageAreaChange);
-        for (let pageAreaChange of pageChange.otherPageAreaChanges)
-            this.applyOtherPageAreaChange(pageFromCache, layoutPage, pageAreaChange);
-        for (let anchoredPictureChange of pageChange.anchoredPictureChanges)
-            this.applyAnchorPictureChange(pageFromCache, layoutPage, anchoredPictureChange);
-    }
-    applyAnchorPictureChange(cache, layoutPage, ancPicChange) {
-        const objId = ancPicChange.index;
-        switch (ancPicChange.changeType) {
-            case LayoutChangeType.Deleted: {
-                DocumentRenderer.removeFromContainerByObject(objId, DocumentRenderer.getAnchoredObjectsContainer(cache.page), cache.anchoredPicture);
-                break;
-            }
-            case LayoutChangeType.Replaced: {
-                const obj = layoutPage.anchoredObjectHolder.getObjById(objId);
-                DocumentRenderer.replaceFromContainerByObject(objId, DocumentRenderer.getAnchoredObjectsContainer(cache.page), cache.anchoredPicture, this.renderFloatingPicture(obj, layoutPage.renderLevelCalculator));
-                break;
-            }
-            case LayoutChangeType.Updated: {
-                break;
-            }
-            case LayoutChangeType.Inserted: {
-                const obj = layoutPage.anchoredObjectHolder.getObjById(objId);
-                DocumentRenderer.insertToContainerByObject(objId, DocumentRenderer.getAnchoredObjectsContainer(cache.page), cache.anchoredPicture, this.renderFloatingPicture(obj, layoutPage.renderLevelCalculator));
-                break;
-            }
-            default: throw new Error(lib_errors/* Errors */.D.InternalException);
-        }
-    }
-    applyMainPageAreaChange(pageCache, layoutPage, pageAreaChange) {
-        switch (pageAreaChange.changeType) {
-            case LayoutChangeType.Deleted:
-                DocumentRenderer.removeFromContainerByIndex(pageCache.page, pageAreaChange.canvasIndex, DocumentRenderer.getMainPageAreaContainerCore);
-                break;
-            case LayoutChangeType.Replaced:
-                DocumentRenderer.replaceInContainer(pageCache.page, pageAreaChange.canvasIndex, this.renderPageArea(layoutPage.renderLevelCalculator, pageCache, layoutPage.mainSubDocumentPageAreas[pageAreaChange.layoutIndex], null), DocumentRenderer.getMainPageAreaContainerCore);
-                break;
-            case LayoutChangeType.Updated: {
-                const layoutPageArea = layoutPage.mainSubDocumentPageAreas[pageAreaChange.layoutIndex];
-                const pageAreaElement = DocumentRenderer.getMainPageAreaContainerCore(pageCache.page).childNodes[pageAreaChange.canvasIndex];
-                for (let columnChange of pageAreaChange.columnChanges)
-                    this.applyColumnChange(pageAreaElement, layoutPageArea, columnChange, layoutPage.renderLevelCalculator.renderMainPageAreaLevel);
-                break;
-            }
-            default: throw new Error(lib_errors/* Errors */.D.InternalException);
-        }
-    }
-    applyOtherPageAreaChange(cache, layoutPage, pageAreaChange) {
-        const subDocId = pageAreaChange.index;
-        const pageArea = layoutPage.otherPageAreas[subDocId];
-        switch (pageAreaChange.changeType) {
-            case LayoutChangeType.Deleted: {
-                DocumentRenderer.removeFromContainerByObject(subDocId, DocumentRenderer.getOtherPageAreaContainerCore(cache.page), cache.otherAreas);
-                DocumentRenderer.removeFromContainerByObject(subDocId, DocumentRenderer.getTextBoxBackgroundContainer(cache.page), cache.textBoxBgElements);
-                break;
-            }
-            case LayoutChangeType.Replaced: {
-                DocumentRenderer.replaceFromContainerByObject(subDocId, DocumentRenderer.getOtherPageAreaContainerCore(cache.page), cache.otherAreas, this.renderPageArea(layoutPage.renderLevelCalculator, cache, pageArea, pageArea.subDocument.isTextBox() ? layoutPage.anchoredObjectHolder.getTextBoxByInternalSubDocId(subDocId) : null));
-                break;
-            }
-            case LayoutChangeType.Updated: {
-                const pageAreaElement = cache.otherAreas[subDocId];
-                const level = pageArea.subDocument.isTextBox() ?
-                    layoutPage.renderLevelCalculator.getRenderLevel(layoutPage.anchoredObjectHolder.getTextBoxByInternalSubDocId(subDocId).rendererLevel) :
-                    layoutPage.renderLevelCalculator.renderHeaderFooterPageAreasLevel;
-                for (let columnChange of pageAreaChange.columnChanges)
-                    this.applyColumnChange(pageAreaElement, pageArea, columnChange, level);
-                break;
-            }
-            case LayoutChangeType.Inserted: {
-                DocumentRenderer.insertToContainerByObject(subDocId, DocumentRenderer.getOtherPageAreaContainerCore(cache.page), cache.otherAreas, this.renderPageArea(layoutPage.renderLevelCalculator, cache, pageArea, pageArea.subDocument.isTextBox() ? layoutPage.anchoredObjectHolder.getTextBoxByInternalSubDocId(subDocId) : null));
-                break;
-            }
-            default: throw new Error(lib_errors/* Errors */.D.InternalException);
-        }
-    }
-    applyColumnChange(pageAreaElement, layoutPageArea, columnChange, level) {
-        switch (columnChange.changeType) {
-            case LayoutChangeType.Deleted:
-                DocumentRenderer.removeFromContainerByIndex(pageAreaElement, columnChange.canvasIndex, DocumentRenderer.getColumnsContainerCore);
-                break;
-            case LayoutChangeType.Replaced: {
-                const renderedColumn = this.renderColumn(layoutPageArea.columns[columnChange.layoutIndex], level, layoutPageArea.subDocument.isMain());
-                DocumentRenderer.replaceInContainer(pageAreaElement, columnChange.canvasIndex, renderedColumn, DocumentRenderer.getColumnsContainerCore);
-                break;
-            }
-            case LayoutChangeType.Updated: {
-                const layoutColumn = layoutPageArea.columns[columnChange.layoutIndex];
-                const columnElement = DocumentRenderer.getColumnsContainerCore(pageAreaElement).childNodes[columnChange.canvasIndex];
-                for (var rowChange of columnChange.rowChanges)
-                    DocumentRenderer.applyChange(columnElement, rowChange, DocumentRenderer.getRowsContainerCore, () => this.renderRow(layoutColumn.rows[rowChange.layoutIndex], level));
-                for (var tableChange of columnChange.tableChanges)
-                    DocumentRenderer.applyChange(columnElement, tableChange, DocumentRenderer.getTablesContainerCore, () => DocumentRenderer.renderTable(layoutColumn.tablesInfo[tableChange.layoutIndex], level, this.viewManager.innerClientProperties.showTableGridLines));
-                for (var paragraphFrameChange of columnChange.paragraphFrameChanges)
-                    DocumentRenderer.applyChange(columnElement, paragraphFrameChange, DocumentRenderer.getParagraphFramesContainerCore, () => DocumentRenderer.renderParagraphFrame(layoutColumn.paragraphFrames[paragraphFrameChange.layoutIndex], level));
-                break;
-            }
-            case LayoutChangeType.Inserted: {
-                const renderedColumn = this.renderColumn(layoutPageArea.columns[columnChange.layoutIndex], level, layoutPageArea.subDocument.isMain());
-                DocumentRenderer.insertInContainer(pageAreaElement, columnChange.canvasIndex, renderedColumn, DocumentRenderer.getColumnsContainerCore);
-                break;
-            }
-            default: throw new Error(lib_errors/* Errors */.D.InternalException);
-        }
-    }
-    static applyChange(topLevelNode, change, getContainer, getRenderedElement) {
-        switch (change.changeType) {
-            case LayoutChangeType.Deleted:
-                DocumentRenderer.removeFromContainerByIndex(topLevelNode, change.canvasIndex, getContainer);
-                break;
-            case LayoutChangeType.Replaced:
-                DocumentRenderer.replaceInContainer(topLevelNode, change.canvasIndex, getRenderedElement(), getContainer);
-                break;
-            case LayoutChangeType.Inserted:
-                DocumentRenderer.insertInContainer(topLevelNode, change.canvasIndex, getRenderedElement(), getContainer);
-                break;
-            case LayoutChangeType.Updated:
-                break;
-            default: throw new Error(lib_errors/* Errors */.D.InternalException);
-        }
-    }
-    getPageRender(layoutPageIndex, layoutPage) {
-        const cachedPage = this.cache[layoutPageIndex].page;
-        if (!DocumentRenderer.isPageElementConsiderAllContainers(cachedPage))
-            this.renderPageContent(layoutPage, layoutPageIndex);
-        return this.cache[layoutPageIndex].page;
-    }
-    renderPage(layoutPage, layoutPageIndex, renderInnerContent) {
-        layoutPage.flags.set(LayoutPageFlags.IsSelectionRendered, false);
-        layoutPage.flags.set(LayoutPageFlags.IsMisspelledSelectionRendered, false);
-        layoutPage.flags.set(LayoutPageFlags.IsRangePermissionsRendered, false);
-        let pageCache = this.cache[layoutPageIndex];
-        if (pageCache) {
-            const pageElement = pageCache.page;
-            this.updatePageClasses(pageElement);
-            this.updatePageSize(layoutPage, pageElement);
-            DocumentRenderer.updatePageColor(pageElement, this.viewManager.layout.pageColor);
-            if (!DocumentRenderer.isPageElementEmpty(pageElement))
-                this.removePageContent(layoutPageIndex);
-        }
-        else {
-            const pageElement = DocumentRenderer.renderContainer("");
-            pageElement.appendChild(DocumentRenderer.renderContainer(RendererClassNames.SERVICE_CONTAINER));
-            DocumentRenderer.updatePageColor(pageElement, this.viewManager.layout.pageColor);
-            this.updatePageClasses(pageElement);
-            this.updatePageSize(layoutPage, pageElement);
-            DocumentRenderer.insertInContainer(this.viewManager.pagesContainer, layoutPageIndex, pageElement, (node) => node);
-            this.cache.splice(layoutPageIndex, 0, new DocumentRendererPageCache(pageElement));
-        }
-        if (renderInnerContent)
-            this.renderPageContent(layoutPage, layoutPageIndex);
-    }
-    removePage(pageIndex) {
-        const pageCache = this.cache[pageIndex];
-        if (pageCache) {
-            pageCache.page.parentNode.removeChild(pageCache.page);
-            this.cache.splice(pageIndex, 1);
-        }
-    }
-    updatePageSize(page, pageElement) {
-        if (pageElement.offsetHeight != page.height || pageElement.offsetWidth != page.width)
-            dom.DomUtils.setStyleSize(pageElement.style, page);
-    }
-    updatePageClasses(pageElement) {
-        pageElement.className = RendererClassNames.PAGE;
-        if (this.viewManager.innerClientProperties.viewsSettings.isSimpleView &&
-            !this.viewManager.innerClientProperties.viewsSettings.isFixedWidthMode)
-            dom.DomUtils.addClassName(pageElement, RendererClassNames.SIMPLE_PAGE_FLOW_MODE);
-    }
-    removePageContent(pageIndex) {
-        const pageCache = this.cache[pageIndex];
-        if (pageCache)
-            pageCache.removeContent();
-    }
-    renderPageContainers(pageCache) {
-        pageCache.page.appendChild(DocumentRenderer.renderContainer(RendererClassNames.SELECTION_CONTAINER));
-        pageCache.page.appendChild(DocumentRenderer.renderContainer(RendererClassNames.SEARCH_SELECTION_CONTAINER));
-        pageCache.page.appendChild(DocumentRenderer.renderContainer(RendererClassNames.MISSPELLED_SELECTION_CONTAINER));
-        pageCache.page.appendChild(DocumentRenderer.renderContainer(RendererClassNames.RANGE_PERMISSIONS_CONTAINER));
-        const result = [
-            pageCache.page.appendChild(DocumentRenderer.renderContainer(RendererClassNames.MAIN_PAGE_AREA_CONTAINER)),
-            pageCache.page.appendChild(DocumentRenderer.renderContainer(RendererClassNames.OTHER_PAGE_AREA_CONTAINER)),
-            pageCache.page.appendChild(DocumentRenderer.renderContainer(RendererClassNames.FLOATING_OBJECTS_CONTAINER))
-        ];
-        pageCache.page.appendChild(DocumentRenderer.renderContainer(RendererClassNames.SHAPE_BG_CONTAINER));
-        return result;
-    }
-    renderPageContent(page, pageIndex) {
-        const pageCache = this.cache[pageIndex];
-        const [mainPageAreasContainer, otherPageAreasContainer, floatingObjectsContainer] = this.renderPageContainers(pageCache);
-        utils_list.ListUtils.forEach(page.mainSubDocumentPageAreas, (area) => mainPageAreasContainer.appendChild(this.renderPageArea(page.renderLevelCalculator, pageCache, area, null)));
-        if (!this.viewManager.innerClientProperties.viewsSettings.isSimpleView)
-            number/* NumberMapUtils */.j.forEach(page.otherPageAreas, (pageArea, subDocId) => {
-                if (!pageArea.subDocument.isTextBox())
-                    DocumentRenderer.insertToContainerByObject(subDocId, otherPageAreasContainer, pageCache.otherAreas, this.renderPageArea(page.renderLevelCalculator, pageCache, pageArea, null));
-            });
-        for (let ancObjProps of this.renderPageContentGetFloatingObjects(page)) {
-            switch (ancObjProps.getType()) {
-                case LayoutBoxType.AnchorTextBox:
-                    const internalSubDocId = ancObjProps.internalSubDocId;
-                    DocumentRenderer.insertToContainerByObject(internalSubDocId, otherPageAreasContainer, pageCache.otherAreas, this.renderPageArea(page.renderLevelCalculator, pageCache, page.otherPageAreas[internalSubDocId], ancObjProps));
-                    break;
-                case LayoutBoxType.AnchorPicture:
-                    DocumentRenderer.insertToContainerByObject(ancObjProps.objectId, floatingObjectsContainer, pageCache.anchoredPicture, this.renderFloatingPicture(ancObjProps, page.renderLevelCalculator));
-                    break;
-            }
-        }
-    }
-    static updatePageColor(pageElement, newColor) {
-        const newStringColor = utils_color/* ColorUtils */.i.colorToHash(newColor);
-        if (pageElement.style.backgroundColor != newStringColor)
-            pageElement.style.backgroundColor = ColorHelper.isEmptyBgColor(newColor) ? "" : newStringColor;
-    }
-    static getPageAreaClassname(area) {
-        switch (area.subDocument.info.getType()) {
-            case SubDocumentInfoType.Main:
-            case SubDocumentInfoType.Header:
-            case SubDocumentInfoType.Footer:
-                return RendererClassNames.PAGE_AREA;
-            case SubDocumentInfoType.TextBox:
-                return `${RendererClassNames.PAGE_AREA} ${RendererClassNames.FLOATING_OBJECT_TEXT_BOX_AREA}`;
-        }
-        throw new Error(lib_errors/* Errors */.D.InternalException);
-    }
-    renderPageArea(renderLevelCalculator, pageCache, area, textBox, renderContent = true) {
-        const element = DocumentRenderer.renderContainer(DocumentRenderer.getPageAreaClassname(area));
-        if (area.subDocument.isTextBox())
-            element.style.overflow = "hidden";
-        dom.DomUtils.setStyleSizeAndPosition(element.style, area);
-        let level;
-        switch (area.subDocument.info.getType()) {
-            case SubDocumentInfoType.TextBox:
-                level = renderLevelCalculator.getRenderLevel(textBox.rendererLevel);
-                break;
-            case SubDocumentInfoType.Footer:
-            case SubDocumentInfoType.Header:
-                level = renderLevelCalculator.renderHeaderFooterPageAreasLevel;
-                break;
-            case SubDocumentInfoType.Main:
-                level = renderLevelCalculator.renderMainPageAreaLevel;
-                break;
-            default: throw new Error(lib_errors/* Errors */.D.NotImplemented);
-        }
-        if (area.subDocument.isTextBox()) {
-            const textBoxShapeInfo = DocumentRenderer.renderContainer(RendererClassNames.TEXT_BOX_BG + " " + ZIndexHelper.getClassName(level, zIndexCssClassType.TextBoxBg));
-            const oldBgElem = pageCache.textBoxBgElements[area.subDocument.id];
-            if (oldBgElem)
-                dom.DomUtils.hideNode(oldBgElem);
-            pageCache.textBoxBgElements[area.subDocument.id] = textBoxShapeInfo;
-            DocumentRenderer.setShapePropertiesToElement(textBoxShapeInfo, textBox.shape, true);
-            dom.DomUtils.setStyleSize(textBoxShapeInfo.style, area);
-            dom.DomUtils.setStylePosition(textBoxShapeInfo.style, textBox.getExtendedBounds());
-            DocumentRenderer.setRotationInRadians(textBoxShapeInfo, textBox.rotationInRadians);
-            DocumentRenderer.getTextBoxBackgroundContainer(pageCache.page).appendChild(textBoxShapeInfo);
-            dom.DomUtils.setStylePosition(element.style, area);
-            if (DocumentRenderer.setRotationInRadians(element, textBox.rotationInRadians))
-                dom.DomUtils.addClassName(element, ZIndexHelper.getClassName(level, zIndexCssClassType.TextBox));
-        }
-        else {
-            const color = ColorHelper.isEmptyBgColor(this.viewManager.layout.pageColor) ?
-                utils_color/* ColorUtils */.i.LIGHT_COLOR : this.viewManager.layout.pageColor;
-            DocumentRenderer.updatePageColor(element, color);
-        }
-        if (renderContent)
-            for (let column of area.columns)
-                element.appendChild(this.renderColumn(column, level, area.subDocument.isMain()));
-        return element;
-    }
-    renderColumn(column, level, _isMainPageArea) {
-        const columnElement = DocumentRenderer.renderContainer(RendererClassNames.COLUMN);
-        dom.DomUtils.setStyleSizeAndPosition(columnElement.style, column);
-        const rowsContainer = columnElement.appendChild(DocumentRenderer.renderContainer(RendererClassNames.ROWS_CONTAINER));
-        const paragraphFramesContainer = columnElement.appendChild(DocumentRenderer.renderContainer(RendererClassNames.PARAGRAPHFRAMES_CONTAINER));
-        const tablesContainer = columnElement.appendChild(DocumentRenderer.renderContainer(RendererClassNames.TABLES_CONTAINER));
-        for (let row of column.rows)
-            rowsContainer.appendChild(this.renderRow(row, level));
-        for (let frame of column.paragraphFrames)
-            paragraphFramesContainer.appendChild(DocumentRenderer.renderParagraphFrame(frame, level));
-        for (let tableColumn of column.tablesInfo)
-            tablesContainer.appendChild(DocumentRenderer.renderTable(tableColumn, level, this.viewManager.innerClientProperties.showTableGridLines));
-        return columnElement;
-    }
-    renderRow(row, level) {
-        const lastBoxIndexWhatCanStrikeoutAndUnderline = row.getLastBoxIndexWhatCanStrikeoutAndUnderline();
-        const rowElement = DocumentRenderer.renderContainer(RendererClassNames.ROW);
-        rowElement.innerHTML = "";
-        if (row.numberingListBox) {
-            let box = this.renderBox(row, row.numberingListBox.textBox, 0 > lastBoxIndexWhatCanStrikeoutAndUnderline, level).html;
-            if (typeof box === 'string')
-                rowElement.innerHTML += box;
-            else
-                rowElement.appendChild(box);
-            if (row.numberingListBox.separatorBox) {
-                let box = this.renderBox(row, row.numberingListBox.separatorBox, 0 > lastBoxIndexWhatCanStrikeoutAndUnderline, level).html;
-                if (typeof box === 'string')
-                    rowElement.innerHTML += box;
-                else
-                    rowElement.appendChild(box);
-            }
-        }
-        let increaseRowHeight = false;
-        for (let boxIndex = 0, box; box = row.boxes[boxIndex]; boxIndex++) {
-            if (box.getType() == LayoutBoxType.AnchorTextBox || box.getType() == LayoutBoxType.AnchorPicture)
-                continue;
-            const boxRenderResult = this.renderBox(row, box, boxIndex > lastBoxIndexWhatCanStrikeoutAndUnderline, level);
-            const boxRenderResultHtml = boxRenderResult.html;
-            if (typeof boxRenderResultHtml === 'string')
-                rowElement.innerHTML += boxRenderResultHtml;
-            else
-                rowElement.appendChild(boxRenderResultHtml);
-            increaseRowHeight = increaseRowHeight || boxRenderResult.increaseRowHeight;
-        }
-        for (let bookmarkBox of row.bookmarkBoxes)
-            rowElement.appendChild(DocumentRenderer.renderBookmark(bookmarkBox, level));
-        dom.DomUtils.setStyleSizeAndPosition(rowElement.style, new rectangle.Rectangle(row.x, row.y + row.getSpacingBefore(), row.width, (row.height - row.getSpacingBefore()) + (increaseRowHeight ? 1 : 0)));
-        return rowElement;
-    }
-    renderBox(row, box, noNeedUnderlineAndStrikeout, level) {
-        let content = box.renderGetContent(this);
-        let top = box.getTop(row);
-        const left = box.x;
-        if (box.characterProperties.script === CharacterFormattingScript.Subscript) {
-            const multiplier = box.characterProperties.fontInfo.scriptMultiplier;
-            top += unit_converter/* UnitConverter */.u.pointsToPixelsF(box.characterProperties.fontSize) * (box.characterProperties.fontInfo.subScriptOffset * multiplier - multiplier + 1);
-        }
-        const delta = box.height > row.height && top >= 0 ? math.MathUtils.round(box.height - row.height) * 3 / 4 : 0;
-        let boxStyles = [];
-        boxStyles.push("left: " + math.MathUtils.round(left, 3) + "px");
-        boxStyles.push("top: " + math.MathUtils.round(top - delta, 3) + "px");
-        const height = math.MathUtils.round(box.height, 3);
-        boxStyles.push("height: " + height + "px");
-        if (browser.Browser.MacOSPlatform || browser.Browser.MacOSMobilePlatform)
-            boxStyles.push("line-height: " + height + "px");
-        if (box.characterProperties.smallCaps)
-            boxStyles.push("font-variant: small-caps");
-        const props = box.renderGetCharacterProperties();
-        const charProps = props.initProps;
-        const colorProps = props.colorInfo;
-        const underlineColor = colorProps.underlineColor;
-        const strikeoutColor = colorProps.strikeoutColor;
-        const textColor = colorProps.textColor;
-        const needUnderline = !noNeedUnderlineAndStrikeout && (charProps.fontUnderlineType != UnderlineType.None) && (box.getType() != LayoutBoxType.Space || !charProps.underlineWordsOnly);
-        const needStrikeout = !noNeedUnderlineAndStrikeout && (charProps.fontStrikeoutType != StrikeoutType.None) && (box.getType() != LayoutBoxType.Space || !charProps.strikeoutWordsOnly);
-        const noStrikeoutAndUnderline = (needStrikeout && needUnderline) || (needStrikeout && strikeoutColor != ColorHelper.AUTOMATIC_COLOR) || (needUnderline && underlineColor != ColorHelper.AUTOMATIC_COLOR);
-        let commonStyles;
-        if (noStrikeoutAndUnderline) {
-            commonStyles = HtmlConverter.getCssRules(charProps, textColor, box.renderIsWordBox(), noStrikeoutAndUnderline, true);
-            boxStyles = boxStyles.concat(HtmlConverter.getSizeSignificantRules(charProps));
-            boxStyles.push(HtmlConverter.getForeColorRule(textColor));
-            const needColor = strikeoutColor != ColorHelper.AUTOMATIC_COLOR ||
-                underlineColor != ColorHelper.AUTOMATIC_COLOR;
-            if (needColor && (!needStrikeout || strikeoutColor != ColorHelper.AUTOMATIC_COLOR)) {
-                const span = document.createElement('span');
-                span.style.cssText = commonStyles.join(";") + ';color: ' + ColorHelper.getCssString(textColor, true);
-                if (typeof content === 'string') {
-                    span.innerHTML = content;
-                }
-                else {
-                    span.appendChild(content);
-                }
-                content = span;
-            }
-            if (needStrikeout) {
-                const strikeoutColorStyle = needColor ? ("color: " + ColorHelper.getCssString(strikeoutColor == ColorHelper.AUTOMATIC_COLOR ? textColor : strikeoutColor, true)) : "";
-                const span = document.createElement('span');
-                span.style.cssText = commonStyles.join(";") + ';text-decoration: line-through;' + strikeoutColorStyle;
-                if (typeof content === 'string') {
-                    span.innerHTML = content;
-                }
-                else {
-                    span.appendChild(content);
-                }
-                content = span;
-            }
-            if (needUnderline) {
-                const underlineColorStyle = needColor ? ("color: " + ColorHelper.getCssString(underlineColor == ColorHelper.AUTOMATIC_COLOR ? textColor : underlineColor, true)) : "";
-                const span = document.createElement('span');
-                span.style.cssText = commonStyles.join(";") + ';text-decoration: underline;' + underlineColorStyle;
-                if (typeof content === 'string') {
-                    span.innerHTML = content;
-                }
-                else {
-                    span.appendChild(content);
-                }
-                content = span;
-            }
-        }
-        else
-            boxStyles = boxStyles.concat(HtmlConverter.getCssRules(charProps, textColor, box.renderIsWordBox(), noNeedUnderlineAndStrikeout, true));
-        let boxClass = "";
-        switch (box.getType()) {
-            case LayoutBoxType.Text:
-            case LayoutBoxType.LayoutDependent:
-            case LayoutBoxType.FieldCodeEnd:
-            case LayoutBoxType.FieldCodeStart:
-            case LayoutBoxType.ColumnBreak:
-            case LayoutBoxType.LineBreak:
-            case LayoutBoxType.PageBreak:
-            case LayoutBoxType.ParagraphMark:
-            case LayoutBoxType.SectionMark:
-                boxClass = RendererClassNames.BOX + " " + ZIndexHelper.getClassName(level, zIndexCssClassType.Box);
-                break;
-            default:
-                boxClass = RendererClassNames.BOX_SPACE + " " + ZIndexHelper.getClassName(level, zIndexCssClassType.BoxSpace);
-        }
-        if (charProps.hidden && this.viewManager.innerClientProperties.showHiddenSymbols)
-            boxClass += ' ' + RendererClassNames.HIDDEN_BOX;
-        const result = new DocumentFragment();
-        const contentSpan = document.createElement('span');
-        contentSpan.style.cssText = boxStyles.join(";");
-        contentSpan.setAttribute('class', boxClass);
-        if (typeof content === 'string') {
-            contentSpan.innerHTML = content;
-        }
-        else if (!!content) {
-            contentSpan.appendChild(content);
-        }
-        result.appendChild(contentSpan);
-        const backColor = colorProps.foregroundColor;
-        if (box.fieldLevel && (backColor == ColorHelper.AUTOMATIC_COLOR || backColor == ColorHelper.NO_COLOR)) {
-            let fieldBgClass = RendererClassNames.FIELD_BG + " " + ZIndexHelper.getClassName(level, zIndexCssClassType.FieldBg);
-            switch (box.fieldLevel) {
-                case 1:
-                    fieldBgClass += ' ' + RendererClassNames.FIELD_BOX_LEVEL1;
-                    break;
-                case 2:
-                    fieldBgClass += ' ' + RendererClassNames.FIELD_BOX_LEVEL2;
-                    break;
-                default: fieldBgClass += ' ' + RendererClassNames.FIELD_BOX_LEVEL3;
-            }
-            const span = document.createElement('span');
-            span.setAttribute('class', fieldBgClass);
-            span.style.cssText = 'top: ' + math.MathUtils.round(top, 3) + 'px; left: ' + math.MathUtils.round(left, 3) + 'px; width: ' +
-                math.MathUtils.round(box.width, 3) + 'px; height: ' + math.MathUtils.round(box.height, 3) + 'px';
-            result.appendChild(span);
-        }
-        if (utils_color/* ColorUtils */.i.getAlpha(backColor) > 0 && !noNeedUnderlineAndStrikeout) {
-            const height = row.height - row.getSpacingAfter();
-            const bgBoxStyle = "top: 0px; left: " + Math.floor(box.x) + "px; width: " + Math.ceil(box.width) + "px; height: " + math.MathUtils.round(height, 3) +
-                "px; background: " + ColorHelper.getCssStringInternal(backColor) + ";";
-            const span = document.createElement('span');
-            span.setAttribute('class', RendererClassNames.BOX_BG + " " + ZIndexHelper.getClassName(level, zIndexCssClassType.BoxBg));
-            span.style.cssText = bgBoxStyle;
-            result.appendChild(span);
-        }
-        if (box.hyperlinkTip) {
-            const tip = CanvasUtils.buildHyperlinkTipString(box.hyperlinkTip, this.viewManager.stringResources.commonLabels.clickToFollowHyperlink, this.viewManager.fieldOptions);
-            if (tip) {
-                const span = document.createElement('span');
-                span.setAttribute('title', tip);
-                result.replaceChild(span, contentSpan);
-                span.appendChild(contentSpan);
-            }
-        }
-        return new BoxRenderResult(result, charProps.hidden);
-    }
-    static renderBookmark(box, level) {
-        const className = (box.boxType == LayoutBookmarkBoxType.StartBox ?
-            RendererClassNames.START_BOOKMARK :
-            RendererClassNames.END_BOOKMARK) + " " + ZIndexHelper.getClassName(level, zIndexCssClassType.Bookmark);
-        const div = document.createElement('div');
-        div.setAttribute('class', className);
-        div.style.cssText = `width: ${math.MathUtils.round(box.width, 3)}px; height: ${math.MathUtils.round(box.height, 3)}px; ` +
-            `left: ${math.MathUtils.round(box.x, 3)}px; top: ${math.MathUtils.round(box.y, 3)}px; border-color: ${box.color}`;
-        return div;
-    }
-    renderPicture(box) {
-        return this.renderPictureBoxContent(box.createSize(), box.cacheInfo, box.hyperlinkTip, box.description);
-    }
-    renderFloatingPicture(box, renderLevelCalculator) {
-        const element = DocumentRenderer.renderContainer(RendererClassNames.ANCHORED_PICTURE + " " + ZIndexHelper.getClassName(renderLevelCalculator.getRenderLevel(box.rendererLevel), zIndexCssClassType.AnchoredPicture));
-        dom.DomUtils.setStyleSize(element.style, box);
-        dom.DomUtils.setStylePosition(element.style, new geometry_point.Point(box.x - box.shape.outlineWidth, box.y - box.shape.outlineWidth));
-        DocumentRenderer.setShapePropertiesToElement(element, box.shape, false);
-        DocumentRenderer.setRotationInRadians(element, box.rotationInRadians);
-        const content = box.renderGetContent(this);
-        element.innerHTML = '';
-        if (typeof content === 'string') {
-            element.innerHTML = content;
-        }
-        else {
-            element.appendChild(content);
-        }
-        return element;
-    }
-    static setShapePropertiesToElement(element, shape, isTextBox) {
-        element.style.backgroundColor = ColorHelper.getCssStringInternal(shape.fillColor);
-        element.style.borderStyle = DocumentRenderer.borderTypeToString(BorderLineStyle.Single);
-        element.style.borderColor = ColorHelper.getCssString(shape.outlineColor, false);
-        element.style.borderWidth = Math.max(isTextBox ? 1 : 0, shape.outlineWidth).toString() + "px";
-        element.style.boxSizing = "content-box";
-    }
-    static setRotationInRadians(element, rotation) {
-        const isSetRotation = rotation != 0;
-        element.style.transform = isSetRotation ? "rotate(" + rotation + "rad)" : "none";
-        return isSetRotation;
-    }
-    static renderParagraphFrame(paragraphFrame, level) {
-        const element = DocumentRenderer.renderContainer(RendererClassNames.PARAGRAPH_FRAME + " " + ZIndexHelper.getClassName(level, zIndexCssClassType.ParBg));
-        DocumentRenderer.updateParagraphFrame(paragraphFrame, element);
-        return element;
-    }
-    static updateParagraphFrame(frame, frameElement) {
-        dom.DomUtils.setStyleSizeAndPosition(frameElement.style, frame);
-        frameElement.style.background = ColorHelper.getCssStringInternal(frame.paragraphColor);
-    }
-    static renderTable(tableColumnInfo, level, showTableGridLines) {
-        const tblXPos = tableColumnInfo.x;
-        const tblYPos = tableColumnInfo.y;
-        const tblBgColor = tableColumnInfo.logicInfo.backgroundColor;
-        const tableElement = DocumentRenderer.renderContainer(RendererClassNames.TABLE_ELEMENTS_CONTAINER);
-        dom.DomUtils.setStylePosition(tableElement.style, tableColumnInfo);
-        const tblBordersContainer = tableElement.appendChild(DocumentRenderer.renderContainer(RendererClassNames.TABLE_BORDERS_CONTAINER));
-        const tblRowsBgContainer = tableElement.appendChild(DocumentRenderer.renderContainer(RendererClassNames.TABLE_ROW_BACKGROUND_CONTAINER));
-        const tblCellsBgContainer = tableElement.appendChild(DocumentRenderer.renderContainer(RendererClassNames.TABLE_CELL_BACKGROUND_CONTAINER));
-        const tblCursorsContainer = DocumentRenderer.renderContainer(RendererClassNames.TABLE_CURSORS_CONTAINER);
-        tblCursorsContainer.style.width = tableColumnInfo.width + "px";
-        tblCursorsContainer.style.height = tableColumnInfo.height + "px";
-        tableElement.appendChild(tblCursorsContainer);
-        tblCursorsContainer["dxTableIndex"] = tableColumnInfo.logicInfo.grid.table.index;
-        for (let i = 0, border; border = tableColumnInfo.horizontalBorders[i]; i++)
-            DocumentRenderer.renderHorizontalBorder(tblBordersContainer, border, level, showTableGridLines);
-        for (let i = 0, border; border = tableColumnInfo.verticalBorders[i]; i++)
-            DocumentRenderer.renderVerticalBorder(tblBordersContainer, border, level, showTableGridLines);
-        if (tableColumnInfo.logicInfo.isEditable) {
-            for (let border of tableColumnInfo.verticalCursorBorders) {
-                let element = DocumentRenderer.renderContainer(RendererClassNames.TABLE_COLUMN_CURSOR + " " +
-                    ZIndexHelper.getClassName(level, zIndexCssClassType.TblCursor));
-                dom.DomUtils.setStylePosition(element.style, new geometry_point.Point(border.xPos, border.yPos));
-                element.style.height = border.length + "px";
-                tblCursorsContainer.appendChild(element);
-            }
-            for (let border of tableColumnInfo.horizontalCursorBorders) {
-                let element = DocumentRenderer.renderContainer(RendererClassNames.TABLE_ROW_CURSOR + " " +
-                    ZIndexHelper.getClassName(level, zIndexCssClassType.TblCursor));
-                dom.DomUtils.setStylePosition(element.style, new geometry_point.Point(border.xPos, border.yPos));
-                element.style.width = border.length + "px";
-                element["dxLayoutRowIndex"] = border.layoutRowIndex;
-                tblCursorsContainer.appendChild(element);
-            }
-        }
-        for (let tblRow of tableColumnInfo.tableRows) {
-            DocumentRenderer.renderTableBackgroundElement(RendererClassNames.TABLE_ROW_BG + " " + ZIndexHelper.getClassName(level, zIndexCssClassType.TblRowBg), tblRowsBgContainer, tblRow, tblXPos, tblYPos, tblBgColor);
-            for (let cellBgInfo of tblRow.backgroundInfos)
-                DocumentRenderer.renderTableBackgroundElement(RendererClassNames.TABLE_CELL_BG + " " + ZIndexHelper.getClassName(level, zIndexCssClassType.TblCellBg), tblCellsBgContainer, cellBgInfo, 0, 0, cellBgInfo.color);
-        }
-        return tableElement;
-    }
-    static renderTableBackgroundElement(className, container, bound, tblXPos, tblYPos, color) {
-        if (ColorHelper.isEmptyBgColor(color))
-            return;
-        const elem = DocumentRenderer.renderContainer(className);
-        dom.DomUtils.setStylePosition(elem.style, new geometry_point.Point(bound.x - tblXPos, bound.y - tblYPos));
-        dom.DomUtils.setStyleSize(elem.style, bound);
-        elem.style.backgroundColor = utils_color/* ColorUtils */.i.colorToHash(color);
-        container.appendChild(elem);
-    }
-    static renderVerticalBorder(tableBordersContainer, border, level, showTableGridLines) {
-        const borderInfo = border.borderInfo;
-        if (DocumentRenderer.isNotRenderTableBorder(borderInfo)) {
-            if (showTableGridLines) {
-                const element = DocumentRenderer.createBorderElement(utils_color/* ColorUtils */.i.LIGHT_COLOR, level);
-                dom.DomUtils.setStyleSizeAndPosition(element.style, new rectangle.Rectangle(border.xPos, border.yPos, 0, border.length));
-                element.style.borderStyle = "None";
-                element.style.borderRightWidth = DocumentRenderer.getTableGridLineBorderWidth();
-                element.style.borderRightStyle = "dashed";
-                tableBordersContainer.appendChild(element);
-            }
-        }
-        else {
-            const element = DocumentRenderer.createBorderElement(borderInfo.color, level);
-            dom.DomUtils.setStyleSizeAndPosition(element.style, new rectangle.Rectangle(border.xPos, border.yPos, 0, border.length));
-            element.style.backgroundColor = "";
-            element.style.borderStyle = "None";
-            element.style.borderRightColor = utils_color/* ColorUtils */.i.colorToHash(borderInfo.color);
-            element.style.borderRightWidth = DocumentRenderer.getBorderTypeWidth(borderInfo);
-            element.style.borderRightStyle = DocumentRenderer.borderTypeToString(borderInfo.style);
-            tableBordersContainer.appendChild(element);
-        }
-    }
-    static getTableGridLineBorderWidth() {
-        const devicePixelRatio = window.devicePixelRatio;
-        if (browser.Browser.Chrome && devicePixelRatio > 1 && devicePixelRatio < 1.5)
-            return "1.5px";
-        return "1px";
-    }
-    static renderHorizontalBorder(tableBordersContainer, border, level, showTableGridLines) {
-        const borderInfo = border.borderInfo;
-        if (DocumentRenderer.isNotRenderTableBorder(borderInfo)) {
-            if (!showTableGridLines)
-                return;
-            const element = DocumentRenderer.createBorderElement(utils_color/* ColorUtils */.i.LIGHT_COLOR, level);
-            dom.DomUtils.setStyleSizeAndPosition(element.style, new rectangle.Rectangle(border.xPos, border.yPos, border.length, 0));
-            element.style.borderStyle = "None";
-            element.style.borderBottomWidth = DocumentRenderer.getTableGridLineBorderWidth();
-            element.style.borderBottomStyle = "dashed";
-            tableBordersContainer.appendChild(element);
-        }
-        else {
-            const element = DocumentRenderer.createBorderElement(borderInfo.color, level);
-            dom.DomUtils.setStyleSizeAndPosition(element.style, new rectangle.Rectangle(border.xPos, border.yPos, border.length, 0));
-            element.style.backgroundColor = "";
-            element.style.borderStyle = "None";
-            element.style.borderBottomColor = utils_color/* ColorUtils */.i.colorToHash(borderInfo.color);
-            element.style.borderBottomWidth = DocumentRenderer.getBorderTypeWidth(borderInfo);
-            element.style.borderBottomStyle = DocumentRenderer.borderTypeToString(borderInfo.style);
-            tableBordersContainer.appendChild(element);
-        }
-    }
-    static createBorderElement(color, level) {
-        const element = DocumentRenderer.renderContainer(RendererClassNames.TABLE_BORDER + " " + ZIndexHelper.getClassName(level, zIndexCssClassType.TableBorder));
-        element.style.backgroundColor = utils_color/* ColorUtils */.i.colorToHash(color);
-        return element;
-    }
-    static isNotRenderTableBorder(borderInfo) {
-        return !borderInfo || borderInfo.style == BorderLineStyle.None || borderInfo.style == BorderLineStyle.Nil;
-    }
-    static borderTypeToString(style) {
-        const str = DocumentRenderer.mapBorderTypeToString[style];
-        return str ? str : "solid";
-    }
-    static getBorderTypeWidth(borderInfo) {
-        const mimWidth = this.getBorderTypeMinWidth(borderInfo.style);
-        return Math.max(mimWidth, borderInfo.width) + "px";
-    }
-    static getBorderTypeMinWidth(style) {
-        if (style == BorderLineStyle.Double)
-            return 3;
-        return 1;
-    }
-    static getServiceContainerCore(pageElement) {
-        return pageElement.firstChild;
-    }
-    static getSelectionContainerCore(pageElement) {
-        return pageElement.childNodes[1];
-    }
-    static getSearchSelectionContainerCore(pageElement) {
-        return pageElement.childNodes[2];
-    }
-    static getMisspelledSelectionContainerCore(pageElement) {
-        return pageElement.childNodes[3];
-    }
-    static getRangePermissionsContainerCore(pageElement) {
-        return pageElement.childNodes[4];
-    }
-    static isPageElementConsiderAllContainers(pageElement) {
-        return pageElement.childNodes.length > 1;
-    }
-    static getMainPageAreaContainerCore(pageElement) {
-        return pageElement.childNodes[5];
-    }
-    static getOtherPageAreaContainerCore(pageElement) {
-        return pageElement.childNodes[6];
-    }
-    static getAnchoredObjectsContainer(pageElement) {
-        return pageElement.childNodes[7];
-    }
-    static getTextBoxBackgroundContainer(pageElement) {
-        return pageElement.childNodes[8];
-    }
-    static getRowsContainerCore(columnElement) {
-        return columnElement.firstChild;
-    }
-    static getParagraphFramesContainerCore(columnElement) {
-        return browser.Browser.Chrome ? columnElement.firstChild.nextSibling : columnElement.childNodes[1];
-    }
-    static getTablesContainerCore(columnElement) {
-        return columnElement.lastChild;
-    }
-    static getColumnsContainerCore(pageAreaElement) {
-        return pageAreaElement;
-    }
-    static renderContainer(className) {
-        const element = document.createElement("DIV");
-        element.className = className;
-        return element;
-    }
-    static removeFromContainerByIndex(node, index, getContainer) {
-        const container = getContainer(node);
-        const child = container.childNodes[index];
-        if (child)
-            container.removeChild(child);
-    }
-    static replaceInContainer(node, index, newRenderedElement, getContainer) {
-        const container = getContainer(node);
-        container.replaceChild(newRenderedElement, container.childNodes[index]);
-    }
-    static insertInContainer(node, index, newRenderedElement, getContainer) {
-        const container = getContainer(node);
-        if (index < container.childNodes.length)
-            container.insertBefore(newRenderedElement, container.childNodes[index]);
-        else
-            container.appendChild(newRenderedElement);
-    }
-    static removeFromContainerByObject(id, container, cache) {
-        const obj = cache[id];
-        if (obj) {
-            container.removeChild(obj);
-            delete cache[id];
-        }
-    }
-    static replaceFromContainerByObject(id, container, cache, newNode) {
-        container.replaceChild(newNode, cache[id]);
-        cache[id] = newNode;
-    }
-    static insertToContainerByObject(id, container, cache, newNode) {
-        cache[id] = newNode;
-        container.appendChild(newNode);
-    }
-    static isPageElementEmpty(pageElement) {
-        return pageElement.childNodes.length == 0;
-    }
-    renderPictureBoxContent(size, cacheInfo, tip, altText) {
-        const tooltip = tip ? CanvasUtils.buildHyperlinkTipString(tip, this.viewManager.stringResources.commonLabels.clickToFollowHyperlink, this.viewManager.fieldOptions) : "";
-        const img = document.createElement('img');
-        img.setAttribute('src', cacheInfo.base64);
-        if (tooltip) {
-            img.setAttribute('title', tooltip);
-        }
-        if ((0,common.isDefined)(altText) && !utils_string.StringUtils.isNullOrEmpty(altText))
-            img.alt = altText;
-        img.style.cssText = `height: ${math.MathUtils.round(size.height, 3)}px; width: ${math.MathUtils.round(size.width, 3)}px; vertical-align: baseline`;
-        img.setAttribute('class', RendererClassNames.PICTURE);
-        return img;
-    }
-}
-DocumentRenderer.mapBorderTypeToString = new MapCreator()
-    .add(BorderLineStyle.Single, "solid")
-    .add(BorderLineStyle.Dotted, "dotted")
-    .add(BorderLineStyle.Dashed, "dashed")
-    .add(BorderLineStyle.Double, "double")
-    .add(BorderLineStyle.DashSmallGap, "dashed")
-    .add(BorderLineStyle.DotDash, "dashed")
-    .add(BorderLineStyle.DotDotDash, "dashed")
-    .get();
-class DocumentRendererPageCache {
-    constructor(page) {
-        this.page = page;
-        this.init();
-    }
-    removeContent() {
-        const serviceContainer = DocumentRenderer.getServiceContainerCore(this.page);
-        dom.DomUtils.clearInnerHtml(this.page);
-        this.page.appendChild(serviceContainer);
-        this.init();
-    }
-    init() {
-        this.otherAreas = {};
-        this.anchoredPicture = {};
-        this.textBoxBgElements = {};
-    }
-}
-class BoxRenderResult {
-    constructor(html, increaseRowHeight) {
-        this.html = html;
-        this.increaseRowHeight = increaseRowHeight;
-    }
-    toString() {
-        if (typeof this.html === 'string')
-            return this.html;
-        else {
-            const result = [];
-            if (this.html) {
-                const length = this.html.children.length;
-                for (let i = 0; i < length; i++) {
-                    result.push(this.html.children.item(i).outerHTML);
-                }
-            }
-            return result.join('');
-        }
-    }
-}
-
 // EXTERNAL MODULE: ./node_modules/@devexpress/utils/lib/utils/evt.js
 var utils_evt = __webpack_require__(3714);
 // EXTERNAL MODULE: ./node_modules/@devexpress/utils/lib/class/event-handlers-holder.js
@@ -104327,6 +103404,953 @@ class LayoutAnchorObjectFinder {
     }
 }
 
+;// CONCATENATED MODULE: ./src/common/canvas/renderes/z-index-helper.ts
+var zIndexCssClassType;
+(function (zIndexCssClassType) {
+    zIndexCssClassType[zIndexCssClassType["TextBoxBg"] = 0] = "TextBoxBg";
+    zIndexCssClassType[zIndexCssClassType["TblRowBg"] = 1] = "TblRowBg";
+    zIndexCssClassType[zIndexCssClassType["TblCellBg"] = 2] = "TblCellBg";
+    zIndexCssClassType[zIndexCssClassType["ParBg"] = 3] = "ParBg";
+    zIndexCssClassType[zIndexCssClassType["BoxBg"] = 4] = "BoxBg";
+    zIndexCssClassType[zIndexCssClassType["FieldBg"] = 5] = "FieldBg";
+    zIndexCssClassType[zIndexCssClassType["SelRange"] = 6] = "SelRange";
+    zIndexCssClassType[zIndexCssClassType["BoxSpace"] = 7] = "BoxSpace";
+    zIndexCssClassType[zIndexCssClassType["SelSearch"] = 8] = "SelSearch";
+    zIndexCssClassType[zIndexCssClassType["SelRow"] = 9] = "SelRow";
+    zIndexCssClassType[zIndexCssClassType["Box"] = 10] = "Box";
+    zIndexCssClassType[zIndexCssClassType["Bookmark"] = 11] = "Bookmark";
+    zIndexCssClassType[zIndexCssClassType["TableBorder"] = 12] = "TableBorder";
+    zIndexCssClassType[zIndexCssClassType["SelMissp"] = 13] = "SelMissp";
+    zIndexCssClassType[zIndexCssClassType["SelCursor"] = 14] = "SelCursor";
+    zIndexCssClassType[zIndexCssClassType["SelTouchBar"] = 15] = "SelTouchBar";
+    zIndexCssClassType[zIndexCssClassType["TblCursor"] = 16] = "TblCursor";
+    zIndexCssClassType[zIndexCssClassType["AnchoredPicture"] = 17] = "AnchoredPicture";
+    zIndexCssClassType[zIndexCssClassType["TextBox"] = 18] = "TextBox";
+})(zIndexCssClassType || (zIndexCssClassType = {}));
+class ZIndexHelper {
+    static getClassName(level, zIndexCssNames) {
+        return `dxre${ZIndexHelper.names[zIndexCssNames]}ZL${level}`;
+    }
+}
+ZIndexHelper.names = {
+    [zIndexCssClassType.TextBoxBg]: "TextBoxBg",
+    [zIndexCssClassType.TblRowBg]: "TblRowBg",
+    [zIndexCssClassType.TblCellBg]: "TblCellBg",
+    [zIndexCssClassType.ParBg]: "ParBg",
+    [zIndexCssClassType.BoxBg]: "BoxBg",
+    [zIndexCssClassType.FieldBg]: "FieldBg",
+    [zIndexCssClassType.SelRange]: "SelRange",
+    [zIndexCssClassType.BoxSpace]: "BoxSpace",
+    [zIndexCssClassType.SelSearch]: "SelSearch",
+    [zIndexCssClassType.SelRow]: "SelRow",
+    [zIndexCssClassType.Box]: "Box",
+    [zIndexCssClassType.Bookmark]: "Bookmark",
+    [zIndexCssClassType.TableBorder]: "TableBorder",
+    [zIndexCssClassType.SelMissp]: "SelMissp",
+    [zIndexCssClassType.SelCursor]: "SelCursor",
+    [zIndexCssClassType.SelTouchBar]: "SelTouchBar",
+    [zIndexCssClassType.TblCursor]: "TblCursor",
+    [zIndexCssClassType.AnchoredPicture]: "AnchoredPicture",
+    [zIndexCssClassType.TextBox]: "TextBox",
+};
+
+;// CONCATENATED MODULE: ./src/common/canvas/utils.ts
+class CanvasUtils {
+    static buildHyperlinkTipString(hyperlinkTip, clickText, settings) {
+        if (!hyperlinkTip)
+            hyperlinkTip = "";
+        return settings.createHyperlinkTooltip(hyperlinkTip, `\nCtrl + ${clickText}`).replace(/['|"]/g, "&quot;");
+    }
+}
+
+;// CONCATENATED MODULE: ./src/common/canvas/renderes/common/document-renderer.ts
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+class SimpleViewCanvasSizeManager {
+    constructor(canvasManager, control) {
+        this.size = new geometry_size.Size(0, 0);
+        this.isSizeObserving = false;
+        this.sizeUpdated = false;
+        this.resizeFrameId = null;
+        this.canvasManager = canvasManager;
+        this.control = control;
+        this.resizeObserver = new ResizeObserver(() => {
+            this.sizeUpdated = false;
+            this.resizeFrameId = requestAnimationFrame(() => {
+                if (!this.sizeUpdated)
+                    this.changeSize(false);
+                this.sizeUpdated = true;
+                this.resizeFrameId = null;
+            });
+        });
+    }
+    dispose() {
+        if (this.resizeFrameId)
+            cancelAnimationFrame(this.resizeFrameId);
+        this.resizeFrameId = null;
+        this.resizeObserver.disconnect();
+    }
+    changeSize(force) {
+        const curr = new geometry_size.Size(this.canvasManager.getCanvasWidth(), this.canvasManager.controlHeightProvider.getVisibleAreaHeight(false));
+        if (force || !curr.equals(this.size)) {
+            this.size = curr;
+            this.changeSizeCore();
+        }
+    }
+    setViewMode(val) {
+        if (val) {
+            this.changeSize(true);
+            if (!this.isSizeObserving) {
+                this.resizeObserver.observe(this.canvasManager.canvas);
+                this.isSizeObserving = true;
+            }
+        }
+        else {
+            if (this.isSizeObserving) {
+                this.resizeObserver.unobserve(this.canvasManager.canvas);
+                this.isSizeObserving = false;
+            }
+            this.changeSizeCore();
+        }
+        this.sizeUpdated = true;
+    }
+    changeSizeCore() {
+        {
+            utils_list.ListUtils.forEach(this.control.viewManager.cache, (_val) => this.control.viewManager.renderer.removePage(1), 1);
+            this.control.viewManager.ensureFirstPageIsRendered();
+            this.control.innerClientProperties.viewsSettings.widthOfPage = this.canvasManager.getCanvasWidth();
+            if (this.control.layoutFormatterManager) {
+                this.control.layoutFormatterManager.invalidator.onChangedAllLayout();
+                this.control.selection.scrollManager.setScroll(new ScrollState().byModelPosition(this.control.selection)
+                    .setModelPosition(this.control.selection.lastSelectedInterval.start).useStdRelativePosition().useStdOffset());
+            }
+            this.control.owner.adjustControl();
+            this.control.horizontalRulerControl.update();
+        }
+    }
+}
+class DocumentRenderer {
+    get cache() { return this.viewManager.cache; }
+    constructor(viewManager) {
+        this.viewManager = viewManager;
+        if (this.viewManager.innerClientProperties.viewsSettings.isSimpleView)
+            dom.DomUtils.addClassName(this.viewManager.canvas, RendererClassNames.SIMPLE_VIEW);
+    }
+    onViewTypeChanged() {
+        switch (this.viewManager.innerClientProperties.viewsSettings.viewType) {
+            case ViewType.Simple:
+                dom.DomUtils.addClassName(this.viewManager.canvas, RendererClassNames.SIMPLE_VIEW);
+                break;
+            case ViewType.PrintLayout:
+                dom.DomUtils.removeClassName(this.viewManager.canvas, RendererClassNames.SIMPLE_VIEW);
+                break;
+        }
+    }
+    applyPageChange(layoutPage, pageChange) {
+        Log.print(LogSource.DocumentRenderer, "applyPageChanges", `pageIndex ${pageChange.index}`);
+        const pageFromCache = this.cache[pageChange.index];
+        for (let pageAreaChange of pageChange.mainPageAreaChanges)
+            this.applyMainPageAreaChange(pageFromCache, layoutPage, pageAreaChange);
+        for (let pageAreaChange of pageChange.otherPageAreaChanges)
+            this.applyOtherPageAreaChange(pageFromCache, layoutPage, pageAreaChange);
+        for (let anchoredPictureChange of pageChange.anchoredPictureChanges)
+            this.applyAnchorPictureChange(pageFromCache, layoutPage, anchoredPictureChange);
+    }
+    applyAnchorPictureChange(cache, layoutPage, ancPicChange) {
+        const objId = ancPicChange.index;
+        switch (ancPicChange.changeType) {
+            case LayoutChangeType.Deleted: {
+                DocumentRenderer.removeFromContainerByObject(objId, DocumentRenderer.getAnchoredObjectsContainer(cache.page), cache.anchoredPicture);
+                break;
+            }
+            case LayoutChangeType.Replaced: {
+                const obj = layoutPage.anchoredObjectHolder.getObjById(objId);
+                DocumentRenderer.replaceFromContainerByObject(objId, DocumentRenderer.getAnchoredObjectsContainer(cache.page), cache.anchoredPicture, this.renderFloatingPicture(obj, layoutPage.renderLevelCalculator));
+                break;
+            }
+            case LayoutChangeType.Updated: {
+                break;
+            }
+            case LayoutChangeType.Inserted: {
+                const obj = layoutPage.anchoredObjectHolder.getObjById(objId);
+                DocumentRenderer.insertToContainerByObject(objId, DocumentRenderer.getAnchoredObjectsContainer(cache.page), cache.anchoredPicture, this.renderFloatingPicture(obj, layoutPage.renderLevelCalculator));
+                break;
+            }
+            default: throw new Error(lib_errors/* Errors */.D.InternalException);
+        }
+    }
+    applyMainPageAreaChange(pageCache, layoutPage, pageAreaChange) {
+        switch (pageAreaChange.changeType) {
+            case LayoutChangeType.Deleted:
+                DocumentRenderer.removeFromContainerByIndex(pageCache.page, pageAreaChange.canvasIndex, DocumentRenderer.getMainPageAreaContainerCore);
+                break;
+            case LayoutChangeType.Replaced:
+                DocumentRenderer.replaceInContainer(pageCache.page, pageAreaChange.canvasIndex, this.renderPageArea(layoutPage.renderLevelCalculator, pageCache, layoutPage.mainSubDocumentPageAreas[pageAreaChange.layoutIndex], null), DocumentRenderer.getMainPageAreaContainerCore);
+                break;
+            case LayoutChangeType.Updated: {
+                const layoutPageArea = layoutPage.mainSubDocumentPageAreas[pageAreaChange.layoutIndex];
+                const pageAreaElement = DocumentRenderer.getMainPageAreaContainerCore(pageCache.page).childNodes[pageAreaChange.canvasIndex];
+                for (let columnChange of pageAreaChange.columnChanges)
+                    this.applyColumnChange(pageAreaElement, layoutPageArea, columnChange, layoutPage.renderLevelCalculator.renderMainPageAreaLevel);
+                break;
+            }
+            default: throw new Error(lib_errors/* Errors */.D.InternalException);
+        }
+    }
+    applyOtherPageAreaChange(cache, layoutPage, pageAreaChange) {
+        const subDocId = pageAreaChange.index;
+        const pageArea = layoutPage.otherPageAreas[subDocId];
+        switch (pageAreaChange.changeType) {
+            case LayoutChangeType.Deleted: {
+                DocumentRenderer.removeFromContainerByObject(subDocId, DocumentRenderer.getOtherPageAreaContainerCore(cache.page), cache.otherAreas);
+                DocumentRenderer.removeFromContainerByObject(subDocId, DocumentRenderer.getTextBoxBackgroundContainer(cache.page), cache.textBoxBgElements);
+                break;
+            }
+            case LayoutChangeType.Replaced: {
+                DocumentRenderer.replaceFromContainerByObject(subDocId, DocumentRenderer.getOtherPageAreaContainerCore(cache.page), cache.otherAreas, this.renderPageArea(layoutPage.renderLevelCalculator, cache, pageArea, pageArea.subDocument.isTextBox() ? layoutPage.anchoredObjectHolder.getTextBoxByInternalSubDocId(subDocId) : null));
+                break;
+            }
+            case LayoutChangeType.Updated: {
+                const pageAreaElement = cache.otherAreas[subDocId];
+                const level = pageArea.subDocument.isTextBox() ?
+                    layoutPage.renderLevelCalculator.getRenderLevel(layoutPage.anchoredObjectHolder.getTextBoxByInternalSubDocId(subDocId).rendererLevel) :
+                    layoutPage.renderLevelCalculator.renderHeaderFooterPageAreasLevel;
+                for (let columnChange of pageAreaChange.columnChanges)
+                    this.applyColumnChange(pageAreaElement, pageArea, columnChange, level);
+                break;
+            }
+            case LayoutChangeType.Inserted: {
+                DocumentRenderer.insertToContainerByObject(subDocId, DocumentRenderer.getOtherPageAreaContainerCore(cache.page), cache.otherAreas, this.renderPageArea(layoutPage.renderLevelCalculator, cache, pageArea, pageArea.subDocument.isTextBox() ? layoutPage.anchoredObjectHolder.getTextBoxByInternalSubDocId(subDocId) : null));
+                break;
+            }
+            default: throw new Error(lib_errors/* Errors */.D.InternalException);
+        }
+    }
+    applyColumnChange(pageAreaElement, layoutPageArea, columnChange, level) {
+        switch (columnChange.changeType) {
+            case LayoutChangeType.Deleted:
+                DocumentRenderer.removeFromContainerByIndex(pageAreaElement, columnChange.canvasIndex, DocumentRenderer.getColumnsContainerCore);
+                break;
+            case LayoutChangeType.Replaced: {
+                const renderedColumn = this.renderColumn(layoutPageArea.columns[columnChange.layoutIndex], level, layoutPageArea.subDocument.isMain());
+                DocumentRenderer.replaceInContainer(pageAreaElement, columnChange.canvasIndex, renderedColumn, DocumentRenderer.getColumnsContainerCore);
+                break;
+            }
+            case LayoutChangeType.Updated: {
+                const layoutColumn = layoutPageArea.columns[columnChange.layoutIndex];
+                const columnElement = DocumentRenderer.getColumnsContainerCore(pageAreaElement).childNodes[columnChange.canvasIndex];
+                for (var rowChange of columnChange.rowChanges)
+                    DocumentRenderer.applyChange(columnElement, rowChange, DocumentRenderer.getRowsContainerCore, () => this.renderRow(layoutColumn.rows[rowChange.layoutIndex], level));
+                for (var tableChange of columnChange.tableChanges)
+                    DocumentRenderer.applyChange(columnElement, tableChange, DocumentRenderer.getTablesContainerCore, () => DocumentRenderer.renderTable(layoutColumn.tablesInfo[tableChange.layoutIndex], level, this.viewManager.innerClientProperties.showTableGridLines));
+                for (var paragraphFrameChange of columnChange.paragraphFrameChanges)
+                    DocumentRenderer.applyChange(columnElement, paragraphFrameChange, DocumentRenderer.getParagraphFramesContainerCore, () => DocumentRenderer.renderParagraphFrame(layoutColumn.paragraphFrames[paragraphFrameChange.layoutIndex], level));
+                break;
+            }
+            case LayoutChangeType.Inserted: {
+                const renderedColumn = this.renderColumn(layoutPageArea.columns[columnChange.layoutIndex], level, layoutPageArea.subDocument.isMain());
+                DocumentRenderer.insertInContainer(pageAreaElement, columnChange.canvasIndex, renderedColumn, DocumentRenderer.getColumnsContainerCore);
+                break;
+            }
+            default: throw new Error(lib_errors/* Errors */.D.InternalException);
+        }
+    }
+    static applyChange(topLevelNode, change, getContainer, getRenderedElement) {
+        switch (change.changeType) {
+            case LayoutChangeType.Deleted:
+                DocumentRenderer.removeFromContainerByIndex(topLevelNode, change.canvasIndex, getContainer);
+                break;
+            case LayoutChangeType.Replaced:
+                DocumentRenderer.replaceInContainer(topLevelNode, change.canvasIndex, getRenderedElement(), getContainer);
+                break;
+            case LayoutChangeType.Inserted:
+                DocumentRenderer.insertInContainer(topLevelNode, change.canvasIndex, getRenderedElement(), getContainer);
+                break;
+            case LayoutChangeType.Updated:
+                break;
+            default: throw new Error(lib_errors/* Errors */.D.InternalException);
+        }
+    }
+    getPageRender(layoutPageIndex, layoutPage) {
+        const cachedPage = this.cache[layoutPageIndex].page;
+        if (!DocumentRenderer.isPageElementConsiderAllContainers(cachedPage))
+            this.renderPageContent(layoutPage, layoutPageIndex);
+        return this.cache[layoutPageIndex].page;
+    }
+    renderPage(layoutPage, layoutPageIndex, renderInnerContent) {
+        layoutPage.flags.set(LayoutPageFlags.IsSelectionRendered, false);
+        layoutPage.flags.set(LayoutPageFlags.IsMisspelledSelectionRendered, false);
+        layoutPage.flags.set(LayoutPageFlags.IsRangePermissionsRendered, false);
+        let pageCache = this.cache[layoutPageIndex];
+        if (pageCache) {
+            const pageElement = pageCache.page;
+            this.updatePageClasses(pageElement);
+            this.updatePageSize(layoutPage, pageElement);
+            DocumentRenderer.updatePageColor(pageElement, this.viewManager.layout.pageColor);
+            if (!DocumentRenderer.isPageElementEmpty(pageElement))
+                this.removePageContent(layoutPageIndex);
+        }
+        else {
+            const pageElement = DocumentRenderer.renderContainer("");
+            pageElement.appendChild(DocumentRenderer.renderContainer(RendererClassNames.SERVICE_CONTAINER));
+            DocumentRenderer.updatePageColor(pageElement, this.viewManager.layout.pageColor);
+            this.updatePageClasses(pageElement);
+            this.updatePageSize(layoutPage, pageElement);
+            DocumentRenderer.insertInContainer(this.viewManager.pagesContainer, layoutPageIndex, pageElement, (node) => node);
+            this.cache.splice(layoutPageIndex, 0, new DocumentRendererPageCache(pageElement));
+        }
+        if (renderInnerContent)
+            this.renderPageContent(layoutPage, layoutPageIndex);
+    }
+    removePage(pageIndex) {
+        const pageCache = this.cache[pageIndex];
+        if (pageCache) {
+            pageCache.page.parentNode.removeChild(pageCache.page);
+            this.cache.splice(pageIndex, 1);
+        }
+    }
+    updatePageSize(page, pageElement) {
+        if (pageElement.offsetHeight != page.height || pageElement.offsetWidth != page.width)
+            dom.DomUtils.setStyleSize(pageElement.style, page);
+    }
+    updatePageClasses(pageElement) {
+        pageElement.className = RendererClassNames.PAGE;
+        if (this.viewManager.innerClientProperties.viewsSettings.isSimpleView &&
+            !this.viewManager.innerClientProperties.viewsSettings.isFixedWidthMode)
+            dom.DomUtils.addClassName(pageElement, RendererClassNames.SIMPLE_PAGE_FLOW_MODE);
+    }
+    removePageContent(pageIndex) {
+        const pageCache = this.cache[pageIndex];
+        if (pageCache)
+            pageCache.removeContent();
+    }
+    renderPageContainers(pageCache) {
+        pageCache.page.appendChild(DocumentRenderer.renderContainer(RendererClassNames.SELECTION_CONTAINER));
+        pageCache.page.appendChild(DocumentRenderer.renderContainer(RendererClassNames.SEARCH_SELECTION_CONTAINER));
+        pageCache.page.appendChild(DocumentRenderer.renderContainer(RendererClassNames.MISSPELLED_SELECTION_CONTAINER));
+        pageCache.page.appendChild(DocumentRenderer.renderContainer(RendererClassNames.RANGE_PERMISSIONS_CONTAINER));
+        const result = [
+            pageCache.page.appendChild(DocumentRenderer.renderContainer(RendererClassNames.MAIN_PAGE_AREA_CONTAINER)),
+            pageCache.page.appendChild(DocumentRenderer.renderContainer(RendererClassNames.OTHER_PAGE_AREA_CONTAINER)),
+            pageCache.page.appendChild(DocumentRenderer.renderContainer(RendererClassNames.FLOATING_OBJECTS_CONTAINER))
+        ];
+        pageCache.page.appendChild(DocumentRenderer.renderContainer(RendererClassNames.SHAPE_BG_CONTAINER));
+        return result;
+    }
+    renderPageContent(page, pageIndex) {
+        const pageCache = this.cache[pageIndex];
+        const [mainPageAreasContainer, otherPageAreasContainer, floatingObjectsContainer] = this.renderPageContainers(pageCache);
+        utils_list.ListUtils.forEach(page.mainSubDocumentPageAreas, (area) => mainPageAreasContainer.appendChild(this.renderPageArea(page.renderLevelCalculator, pageCache, area, null)));
+        if (!this.viewManager.innerClientProperties.viewsSettings.isSimpleView)
+            number/* NumberMapUtils */.j.forEach(page.otherPageAreas, (pageArea, subDocId) => {
+                if (!pageArea.subDocument.isTextBox())
+                    DocumentRenderer.insertToContainerByObject(subDocId, otherPageAreasContainer, pageCache.otherAreas, this.renderPageArea(page.renderLevelCalculator, pageCache, pageArea, null));
+            });
+        for (let ancObjProps of this.renderPageContentGetFloatingObjects(page)) {
+            switch (ancObjProps.getType()) {
+                case LayoutBoxType.AnchorTextBox:
+                    const internalSubDocId = ancObjProps.internalSubDocId;
+                    DocumentRenderer.insertToContainerByObject(internalSubDocId, otherPageAreasContainer, pageCache.otherAreas, this.renderPageArea(page.renderLevelCalculator, pageCache, page.otherPageAreas[internalSubDocId], ancObjProps));
+                    break;
+                case LayoutBoxType.AnchorPicture:
+                    DocumentRenderer.insertToContainerByObject(ancObjProps.objectId, floatingObjectsContainer, pageCache.anchoredPicture, this.renderFloatingPicture(ancObjProps, page.renderLevelCalculator));
+                    break;
+            }
+        }
+    }
+    static updatePageColor(pageElement, newColor) {
+        const newStringColor = utils_color/* ColorUtils */.i.colorToHash(newColor);
+        if (pageElement.style.backgroundColor != newStringColor)
+            pageElement.style.backgroundColor = ColorHelper.isEmptyBgColor(newColor) ? "" : newStringColor;
+    }
+    static getPageAreaClassname(area) {
+        switch (area.subDocument.info.getType()) {
+            case SubDocumentInfoType.Main:
+            case SubDocumentInfoType.Header:
+            case SubDocumentInfoType.Footer:
+                return RendererClassNames.PAGE_AREA;
+            case SubDocumentInfoType.TextBox:
+                return `${RendererClassNames.PAGE_AREA} ${RendererClassNames.FLOATING_OBJECT_TEXT_BOX_AREA}`;
+        }
+        throw new Error(lib_errors/* Errors */.D.InternalException);
+    }
+    renderPageArea(renderLevelCalculator, pageCache, area, textBox, renderContent = true) {
+        const element = DocumentRenderer.renderContainer(DocumentRenderer.getPageAreaClassname(area));
+        if (area.subDocument.isTextBox())
+            element.style.overflow = "hidden";
+        dom.DomUtils.setStyleSizeAndPosition(element.style, area);
+        let level;
+        switch (area.subDocument.info.getType()) {
+            case SubDocumentInfoType.TextBox:
+                level = renderLevelCalculator.getRenderLevel(textBox.rendererLevel);
+                break;
+            case SubDocumentInfoType.Footer:
+            case SubDocumentInfoType.Header:
+                level = renderLevelCalculator.renderHeaderFooterPageAreasLevel;
+                break;
+            case SubDocumentInfoType.Main:
+                level = renderLevelCalculator.renderMainPageAreaLevel;
+                break;
+            default: throw new Error(lib_errors/* Errors */.D.NotImplemented);
+        }
+        if (area.subDocument.isTextBox()) {
+            const textBoxShapeInfo = DocumentRenderer.renderContainer(RendererClassNames.TEXT_BOX_BG + " " + ZIndexHelper.getClassName(level, zIndexCssClassType.TextBoxBg));
+            const oldBgElem = pageCache.textBoxBgElements[area.subDocument.id];
+            if (oldBgElem)
+                dom.DomUtils.hideNode(oldBgElem);
+            pageCache.textBoxBgElements[area.subDocument.id] = textBoxShapeInfo;
+            DocumentRenderer.setShapePropertiesToElement(textBoxShapeInfo, textBox.shape, true);
+            dom.DomUtils.setStyleSize(textBoxShapeInfo.style, area);
+            dom.DomUtils.setStylePosition(textBoxShapeInfo.style, textBox.getExtendedBounds());
+            DocumentRenderer.setRotationInRadians(textBoxShapeInfo, textBox.rotationInRadians);
+            DocumentRenderer.getTextBoxBackgroundContainer(pageCache.page).appendChild(textBoxShapeInfo);
+            dom.DomUtils.setStylePosition(element.style, area);
+            if (DocumentRenderer.setRotationInRadians(element, textBox.rotationInRadians))
+                dom.DomUtils.addClassName(element, ZIndexHelper.getClassName(level, zIndexCssClassType.TextBox));
+        }
+        else {
+            const color = ColorHelper.isEmptyBgColor(this.viewManager.layout.pageColor) ?
+                utils_color/* ColorUtils */.i.LIGHT_COLOR : this.viewManager.layout.pageColor;
+            DocumentRenderer.updatePageColor(element, color);
+        }
+        if (renderContent)
+            for (let column of area.columns)
+                element.appendChild(this.renderColumn(column, level, area.subDocument.isMain()));
+        return element;
+    }
+    renderColumn(column, level, _isMainPageArea) {
+        const columnElement = DocumentRenderer.renderContainer(RendererClassNames.COLUMN);
+        dom.DomUtils.setStyleSizeAndPosition(columnElement.style, column);
+        const rowsContainer = columnElement.appendChild(DocumentRenderer.renderContainer(RendererClassNames.ROWS_CONTAINER));
+        const paragraphFramesContainer = columnElement.appendChild(DocumentRenderer.renderContainer(RendererClassNames.PARAGRAPHFRAMES_CONTAINER));
+        const tablesContainer = columnElement.appendChild(DocumentRenderer.renderContainer(RendererClassNames.TABLES_CONTAINER));
+        for (let row of column.rows)
+            rowsContainer.appendChild(this.renderRow(row, level));
+        for (let frame of column.paragraphFrames)
+            paragraphFramesContainer.appendChild(DocumentRenderer.renderParagraphFrame(frame, level));
+        for (let tableColumn of column.tablesInfo)
+            tablesContainer.appendChild(DocumentRenderer.renderTable(tableColumn, level, this.viewManager.innerClientProperties.showTableGridLines));
+        return columnElement;
+    }
+    renderRow(row, level) {
+        const lastBoxIndexWhatCanStrikeoutAndUnderline = row.getLastBoxIndexWhatCanStrikeoutAndUnderline();
+        const rowElement = DocumentRenderer.renderContainer(RendererClassNames.ROW);
+        rowElement.innerHTML = "";
+        if (row.numberingListBox) {
+            let box = this.renderBox(row, row.numberingListBox.textBox, 0 > lastBoxIndexWhatCanStrikeoutAndUnderline, level).html;
+            if (typeof box === 'string')
+                rowElement.innerHTML += box;
+            else
+                rowElement.appendChild(box);
+            if (row.numberingListBox.separatorBox) {
+                let box = this.renderBox(row, row.numberingListBox.separatorBox, 0 > lastBoxIndexWhatCanStrikeoutAndUnderline, level).html;
+                if (typeof box === 'string')
+                    rowElement.innerHTML += box;
+                else
+                    rowElement.appendChild(box);
+            }
+        }
+        let increaseRowHeight = false;
+        for (let boxIndex = 0, box; box = row.boxes[boxIndex]; boxIndex++) {
+            if (box.getType() == LayoutBoxType.AnchorTextBox || box.getType() == LayoutBoxType.AnchorPicture)
+                continue;
+            const boxRenderResult = this.renderBox(row, box, boxIndex > lastBoxIndexWhatCanStrikeoutAndUnderline, level);
+            const boxRenderResultHtml = boxRenderResult.html;
+            if (typeof boxRenderResultHtml === 'string')
+                rowElement.innerHTML += boxRenderResultHtml;
+            else
+                rowElement.appendChild(boxRenderResultHtml);
+            increaseRowHeight = increaseRowHeight || boxRenderResult.increaseRowHeight;
+        }
+        for (let bookmarkBox of row.bookmarkBoxes)
+            rowElement.appendChild(DocumentRenderer.renderBookmark(bookmarkBox, level));
+        dom.DomUtils.setStyleSizeAndPosition(rowElement.style, new rectangle.Rectangle(row.x, row.y + row.getSpacingBefore(), row.width, (row.height - row.getSpacingBefore()) + (increaseRowHeight ? 1 : 0)));
+        return rowElement;
+    }
+    renderBox(row, box, noNeedUnderlineAndStrikeout, level) {
+        let content = box.renderGetContent(this);
+        let top = box.getTop(row);
+        const left = box.x;
+        if (box.characterProperties.script === CharacterFormattingScript.Subscript) {
+            const multiplier = box.characterProperties.fontInfo.scriptMultiplier;
+            top += unit_converter/* UnitConverter */.u.pointsToPixelsF(box.characterProperties.fontSize) * (box.characterProperties.fontInfo.subScriptOffset * multiplier - multiplier + 1);
+        }
+        const delta = box.height > row.height && top >= 0 ? math.MathUtils.round(box.height - row.height) * 3 / 4 : 0;
+        let boxStyles = [];
+        boxStyles.push("left: " + math.MathUtils.round(left, 3) + "px");
+        boxStyles.push("top: " + math.MathUtils.round(top - delta, 3) + "px");
+        const height = math.MathUtils.round(box.height, 3);
+        boxStyles.push("height: " + height + "px");
+        if (browser.Browser.MacOSPlatform || browser.Browser.MacOSMobilePlatform)
+            boxStyles.push("line-height: " + height + "px");
+        if (box.characterProperties.smallCaps)
+            boxStyles.push("font-variant: small-caps");
+        const props = box.renderGetCharacterProperties();
+        const charProps = props.initProps;
+        const colorProps = props.colorInfo;
+        const underlineColor = colorProps.underlineColor;
+        const strikeoutColor = colorProps.strikeoutColor;
+        const textColor = colorProps.textColor;
+        const needUnderline = !noNeedUnderlineAndStrikeout && (charProps.fontUnderlineType != UnderlineType.None) && (box.getType() != LayoutBoxType.Space || !charProps.underlineWordsOnly);
+        const needStrikeout = !noNeedUnderlineAndStrikeout && (charProps.fontStrikeoutType != StrikeoutType.None) && (box.getType() != LayoutBoxType.Space || !charProps.strikeoutWordsOnly);
+        const noStrikeoutAndUnderline = (needStrikeout && needUnderline) || (needStrikeout && strikeoutColor != ColorHelper.AUTOMATIC_COLOR) || (needUnderline && underlineColor != ColorHelper.AUTOMATIC_COLOR);
+        let commonStyles;
+        if (noStrikeoutAndUnderline) {
+            commonStyles = HtmlConverter.getCssRules(charProps, textColor, box.renderIsWordBox(), noStrikeoutAndUnderline, true);
+            boxStyles = boxStyles.concat(HtmlConverter.getSizeSignificantRules(charProps));
+            boxStyles.push(HtmlConverter.getForeColorRule(textColor));
+            const needColor = strikeoutColor != ColorHelper.AUTOMATIC_COLOR ||
+                underlineColor != ColorHelper.AUTOMATIC_COLOR;
+            if (needColor && (!needStrikeout || strikeoutColor != ColorHelper.AUTOMATIC_COLOR)) {
+                const span = document.createElement('span');
+                span.style.cssText = commonStyles.join(";") + ';color: ' + ColorHelper.getCssString(textColor, true);
+                if (typeof content === 'string') {
+                    span.innerHTML = content;
+                }
+                else {
+                    span.appendChild(content);
+                }
+                content = span;
+            }
+            if (needStrikeout) {
+                const strikeoutColorStyle = needColor ? ("color: " + ColorHelper.getCssString(strikeoutColor == ColorHelper.AUTOMATIC_COLOR ? textColor : strikeoutColor, true)) : "";
+                const span = document.createElement('span');
+                span.style.cssText = commonStyles.join(";") + ';text-decoration: line-through;' + strikeoutColorStyle;
+                if (typeof content === 'string') {
+                    span.innerHTML = content;
+                }
+                else {
+                    span.appendChild(content);
+                }
+                content = span;
+            }
+            if (needUnderline) {
+                const underlineColorStyle = needColor ? ("color: " + ColorHelper.getCssString(underlineColor == ColorHelper.AUTOMATIC_COLOR ? textColor : underlineColor, true)) : "";
+                const span = document.createElement('span');
+                span.style.cssText = commonStyles.join(";") + ';text-decoration: underline;' + underlineColorStyle;
+                if (typeof content === 'string') {
+                    span.innerHTML = content;
+                }
+                else {
+                    span.appendChild(content);
+                }
+                content = span;
+            }
+        }
+        else
+            boxStyles = boxStyles.concat(HtmlConverter.getCssRules(charProps, textColor, box.renderIsWordBox(), noNeedUnderlineAndStrikeout, true));
+        let boxClass = "";
+        switch (box.getType()) {
+            case LayoutBoxType.Text:
+            case LayoutBoxType.LayoutDependent:
+            case LayoutBoxType.FieldCodeEnd:
+            case LayoutBoxType.FieldCodeStart:
+            case LayoutBoxType.ColumnBreak:
+            case LayoutBoxType.LineBreak:
+            case LayoutBoxType.PageBreak:
+            case LayoutBoxType.ParagraphMark:
+            case LayoutBoxType.SectionMark:
+                boxClass = RendererClassNames.BOX + " " + ZIndexHelper.getClassName(level, zIndexCssClassType.Box);
+                break;
+            default:
+                boxClass = RendererClassNames.BOX_SPACE + " " + ZIndexHelper.getClassName(level, zIndexCssClassType.BoxSpace);
+        }
+        if (charProps.hidden && this.viewManager.innerClientProperties.showHiddenSymbols)
+            boxClass += ' ' + RendererClassNames.HIDDEN_BOX;
+        const result = new DocumentFragment();
+        const contentSpan = document.createElement('span');
+        contentSpan.style.cssText = boxStyles.join(";");
+        contentSpan.setAttribute('class', boxClass);
+        if (typeof content === 'string') {
+            contentSpan.innerHTML = content;
+        }
+        else if (!!content) {
+            contentSpan.appendChild(content);
+        }
+        result.appendChild(contentSpan);
+        const backColor = colorProps.foregroundColor;
+        if (box.fieldLevel && (backColor == ColorHelper.AUTOMATIC_COLOR || backColor == ColorHelper.NO_COLOR)) {
+            let fieldBgClass = RendererClassNames.FIELD_BG + " " + ZIndexHelper.getClassName(level, zIndexCssClassType.FieldBg);
+            switch (box.fieldLevel) {
+                case 1:
+                    fieldBgClass += ' ' + RendererClassNames.FIELD_BOX_LEVEL1;
+                    break;
+                case 2:
+                    fieldBgClass += ' ' + RendererClassNames.FIELD_BOX_LEVEL2;
+                    break;
+                default: fieldBgClass += ' ' + RendererClassNames.FIELD_BOX_LEVEL3;
+            }
+            const span = document.createElement('span');
+            span.setAttribute('class', fieldBgClass);
+            span.style.cssText = 'top: ' + math.MathUtils.round(top, 3) + 'px; left: ' + math.MathUtils.round(left, 3) + 'px; width: ' +
+                math.MathUtils.round(box.width, 3) + 'px; height: ' + math.MathUtils.round(box.height, 3) + 'px';
+            result.appendChild(span);
+        }
+        if (utils_color/* ColorUtils */.i.getAlpha(backColor) > 0 && !noNeedUnderlineAndStrikeout) {
+            const height = row.height - row.getSpacingAfter();
+            const bgBoxStyle = "top: 0px; left: " + Math.floor(box.x) + "px; width: " + Math.ceil(box.width) + "px; height: " + math.MathUtils.round(height, 3) +
+                "px; background: " + ColorHelper.getCssStringInternal(backColor) + ";";
+            const span = document.createElement('span');
+            span.setAttribute('class', RendererClassNames.BOX_BG + " " + ZIndexHelper.getClassName(level, zIndexCssClassType.BoxBg));
+            span.style.cssText = bgBoxStyle;
+            result.appendChild(span);
+        }
+        if (box.hyperlinkTip) {
+            const tip = CanvasUtils.buildHyperlinkTipString(box.hyperlinkTip, this.viewManager.stringResources.commonLabels.clickToFollowHyperlink, this.viewManager.fieldOptions);
+            if (tip) {
+                const span = document.createElement('span');
+                span.setAttribute('title', tip);
+                result.replaceChild(span, contentSpan);
+                span.appendChild(contentSpan);
+            }
+        }
+        return new BoxRenderResult(result, charProps.hidden);
+    }
+    static renderBookmark(box, level) {
+        const className = (box.boxType == LayoutBookmarkBoxType.StartBox ?
+            RendererClassNames.START_BOOKMARK :
+            RendererClassNames.END_BOOKMARK) + " " + ZIndexHelper.getClassName(level, zIndexCssClassType.Bookmark);
+        const div = document.createElement('div');
+        div.setAttribute('class', className);
+        div.style.cssText = `width: ${math.MathUtils.round(box.width, 3)}px; height: ${math.MathUtils.round(box.height, 3)}px; ` +
+            `left: ${math.MathUtils.round(box.x, 3)}px; top: ${math.MathUtils.round(box.y, 3)}px; border-color: ${box.color}`;
+        return div;
+    }
+    renderPicture(box) {
+        return this.renderPictureBoxContent(box.createSize(), box.cacheInfo, box.hyperlinkTip, box.description);
+    }
+    renderFloatingPicture(box, renderLevelCalculator) {
+        const element = DocumentRenderer.renderContainer(RendererClassNames.ANCHORED_PICTURE + " " + ZIndexHelper.getClassName(renderLevelCalculator.getRenderLevel(box.rendererLevel), zIndexCssClassType.AnchoredPicture));
+        dom.DomUtils.setStyleSize(element.style, box);
+        dom.DomUtils.setStylePosition(element.style, new geometry_point.Point(box.x - box.shape.outlineWidth, box.y - box.shape.outlineWidth));
+        DocumentRenderer.setShapePropertiesToElement(element, box.shape, false);
+        DocumentRenderer.setRotationInRadians(element, box.rotationInRadians);
+        const content = box.renderGetContent(this);
+        element.innerHTML = '';
+        if (typeof content === 'string') {
+            element.innerHTML = content;
+        }
+        else {
+            element.appendChild(content);
+        }
+        return element;
+    }
+    static setShapePropertiesToElement(element, shape, isTextBox) {
+        element.style.backgroundColor = ColorHelper.getCssStringInternal(shape.fillColor);
+        element.style.borderStyle = DocumentRenderer.borderTypeToString(BorderLineStyle.Single);
+        element.style.borderColor = ColorHelper.getCssString(shape.outlineColor, false);
+        element.style.borderWidth = Math.max(isTextBox ? 1 : 0, shape.outlineWidth).toString() + "px";
+        element.style.boxSizing = "content-box";
+    }
+    static setRotationInRadians(element, rotation) {
+        const isSetRotation = rotation != 0;
+        element.style.transform = isSetRotation ? "rotate(" + rotation + "rad)" : "none";
+        return isSetRotation;
+    }
+    static renderParagraphFrame(paragraphFrame, level) {
+        const element = DocumentRenderer.renderContainer(RendererClassNames.PARAGRAPH_FRAME + " " + ZIndexHelper.getClassName(level, zIndexCssClassType.ParBg));
+        DocumentRenderer.updateParagraphFrame(paragraphFrame, element);
+        return element;
+    }
+    static updateParagraphFrame(frame, frameElement) {
+        dom.DomUtils.setStyleSizeAndPosition(frameElement.style, frame);
+        frameElement.style.background = ColorHelper.getCssStringInternal(frame.paragraphColor);
+    }
+    static renderTable(tableColumnInfo, level, showTableGridLines) {
+        const tblXPos = tableColumnInfo.x;
+        const tblYPos = tableColumnInfo.y;
+        const tblBgColor = tableColumnInfo.logicInfo.backgroundColor;
+        const tableElement = DocumentRenderer.renderContainer(RendererClassNames.TABLE_ELEMENTS_CONTAINER);
+        dom.DomUtils.setStylePosition(tableElement.style, tableColumnInfo);
+        const tblBordersContainer = tableElement.appendChild(DocumentRenderer.renderContainer(RendererClassNames.TABLE_BORDERS_CONTAINER));
+        const tblRowsBgContainer = tableElement.appendChild(DocumentRenderer.renderContainer(RendererClassNames.TABLE_ROW_BACKGROUND_CONTAINER));
+        const tblCellsBgContainer = tableElement.appendChild(DocumentRenderer.renderContainer(RendererClassNames.TABLE_CELL_BACKGROUND_CONTAINER));
+        const tblCursorsContainer = DocumentRenderer.renderContainer(RendererClassNames.TABLE_CURSORS_CONTAINER);
+        tblCursorsContainer.style.width = tableColumnInfo.width + "px";
+        tblCursorsContainer.style.height = tableColumnInfo.height + "px";
+        tableElement.appendChild(tblCursorsContainer);
+        tblCursorsContainer["dxTableIndex"] = tableColumnInfo.logicInfo.grid.table.index;
+        for (let i = 0, border; border = tableColumnInfo.horizontalBorders[i]; i++)
+            DocumentRenderer.renderHorizontalBorder(tblBordersContainer, border, level, showTableGridLines);
+        for (let i = 0, border; border = tableColumnInfo.verticalBorders[i]; i++)
+            DocumentRenderer.renderVerticalBorder(tblBordersContainer, border, level, showTableGridLines);
+        if (tableColumnInfo.logicInfo.isEditable) {
+            for (let border of tableColumnInfo.verticalCursorBorders) {
+                let element = DocumentRenderer.renderContainer(RendererClassNames.TABLE_COLUMN_CURSOR + " " +
+                    ZIndexHelper.getClassName(level, zIndexCssClassType.TblCursor));
+                dom.DomUtils.setStylePosition(element.style, new geometry_point.Point(border.xPos, border.yPos));
+                element.style.height = border.length + "px";
+                tblCursorsContainer.appendChild(element);
+            }
+            for (let border of tableColumnInfo.horizontalCursorBorders) {
+                let element = DocumentRenderer.renderContainer(RendererClassNames.TABLE_ROW_CURSOR + " " +
+                    ZIndexHelper.getClassName(level, zIndexCssClassType.TblCursor));
+                dom.DomUtils.setStylePosition(element.style, new geometry_point.Point(border.xPos, border.yPos));
+                element.style.width = border.length + "px";
+                element["dxLayoutRowIndex"] = border.layoutRowIndex;
+                tblCursorsContainer.appendChild(element);
+            }
+        }
+        for (let tblRow of tableColumnInfo.tableRows) {
+            DocumentRenderer.renderTableBackgroundElement(RendererClassNames.TABLE_ROW_BG + " " + ZIndexHelper.getClassName(level, zIndexCssClassType.TblRowBg), tblRowsBgContainer, tblRow, tblXPos, tblYPos, tblBgColor);
+            for (let cellBgInfo of tblRow.backgroundInfos)
+                DocumentRenderer.renderTableBackgroundElement(RendererClassNames.TABLE_CELL_BG + " " + ZIndexHelper.getClassName(level, zIndexCssClassType.TblCellBg), tblCellsBgContainer, cellBgInfo, 0, 0, cellBgInfo.color);
+        }
+        return tableElement;
+    }
+    static renderTableBackgroundElement(className, container, bound, tblXPos, tblYPos, color) {
+        if (ColorHelper.isEmptyBgColor(color))
+            return;
+        const elem = DocumentRenderer.renderContainer(className);
+        dom.DomUtils.setStylePosition(elem.style, new geometry_point.Point(bound.x - tblXPos, bound.y - tblYPos));
+        dom.DomUtils.setStyleSize(elem.style, bound);
+        elem.style.backgroundColor = utils_color/* ColorUtils */.i.colorToHash(color);
+        container.appendChild(elem);
+    }
+    static renderVerticalBorder(tableBordersContainer, border, level, showTableGridLines) {
+        const borderInfo = border.borderInfo;
+        if (DocumentRenderer.isNotRenderTableBorder(borderInfo)) {
+            if (showTableGridLines) {
+                const element = DocumentRenderer.createBorderElement(utils_color/* ColorUtils */.i.LIGHT_COLOR, level);
+                dom.DomUtils.setStyleSizeAndPosition(element.style, new rectangle.Rectangle(border.xPos, border.yPos, 0, border.length));
+                element.style.borderStyle = "None";
+                element.style.borderRightWidth = DocumentRenderer.getTableGridLineBorderWidth();
+                element.style.borderRightStyle = "dashed";
+                tableBordersContainer.appendChild(element);
+            }
+        }
+        else {
+            const element = DocumentRenderer.createBorderElement(borderInfo.color, level);
+            dom.DomUtils.setStyleSizeAndPosition(element.style, new rectangle.Rectangle(border.xPos, border.yPos, 0, border.length));
+            element.style.backgroundColor = "";
+            element.style.borderStyle = "None";
+            element.style.borderRightColor = utils_color/* ColorUtils */.i.colorToHash(borderInfo.color);
+            element.style.borderRightWidth = DocumentRenderer.getBorderTypeWidth(borderInfo);
+            element.style.borderRightStyle = DocumentRenderer.borderTypeToString(borderInfo.style);
+            tableBordersContainer.appendChild(element);
+        }
+    }
+    static getTableGridLineBorderWidth() {
+        const devicePixelRatio = window.devicePixelRatio;
+        if (browser.Browser.Chrome && devicePixelRatio > 1 && devicePixelRatio < 1.5)
+            return "1.5px";
+        return "1px";
+    }
+    static renderHorizontalBorder(tableBordersContainer, border, level, showTableGridLines) {
+        const borderInfo = border.borderInfo;
+        if (DocumentRenderer.isNotRenderTableBorder(borderInfo)) {
+            if (!showTableGridLines)
+                return;
+            const element = DocumentRenderer.createBorderElement(utils_color/* ColorUtils */.i.LIGHT_COLOR, level);
+            dom.DomUtils.setStyleSizeAndPosition(element.style, new rectangle.Rectangle(border.xPos, border.yPos, border.length, 0));
+            element.style.borderStyle = "None";
+            element.style.borderBottomWidth = DocumentRenderer.getTableGridLineBorderWidth();
+            element.style.borderBottomStyle = "dashed";
+            tableBordersContainer.appendChild(element);
+        }
+        else {
+            const element = DocumentRenderer.createBorderElement(borderInfo.color, level);
+            dom.DomUtils.setStyleSizeAndPosition(element.style, new rectangle.Rectangle(border.xPos, border.yPos, border.length, 0));
+            element.style.backgroundColor = "";
+            element.style.borderStyle = "None";
+            element.style.borderBottomColor = utils_color/* ColorUtils */.i.colorToHash(borderInfo.color);
+            element.style.borderBottomWidth = DocumentRenderer.getBorderTypeWidth(borderInfo);
+            element.style.borderBottomStyle = DocumentRenderer.borderTypeToString(borderInfo.style);
+            tableBordersContainer.appendChild(element);
+        }
+    }
+    static createBorderElement(color, level) {
+        const element = DocumentRenderer.renderContainer(RendererClassNames.TABLE_BORDER + " " + ZIndexHelper.getClassName(level, zIndexCssClassType.TableBorder));
+        element.style.backgroundColor = utils_color/* ColorUtils */.i.colorToHash(color);
+        return element;
+    }
+    static isNotRenderTableBorder(borderInfo) {
+        return !borderInfo || borderInfo.style == BorderLineStyle.None || borderInfo.style == BorderLineStyle.Nil;
+    }
+    static borderTypeToString(style) {
+        const str = DocumentRenderer.mapBorderTypeToString[style];
+        return str ? str : "solid";
+    }
+    static getBorderTypeWidth(borderInfo) {
+        const mimWidth = this.getBorderTypeMinWidth(borderInfo.style);
+        return Math.max(mimWidth, borderInfo.width) + "px";
+    }
+    static getBorderTypeMinWidth(style) {
+        if (style == BorderLineStyle.Double)
+            return 3;
+        return 1;
+    }
+    static getServiceContainerCore(pageElement) {
+        return pageElement.firstChild;
+    }
+    static getSelectionContainerCore(pageElement) {
+        return pageElement.childNodes[1];
+    }
+    static getSearchSelectionContainerCore(pageElement) {
+        return pageElement.childNodes[2];
+    }
+    static getMisspelledSelectionContainerCore(pageElement) {
+        return pageElement.childNodes[3];
+    }
+    static getRangePermissionsContainerCore(pageElement) {
+        return pageElement.childNodes[4];
+    }
+    static isPageElementConsiderAllContainers(pageElement) {
+        return pageElement.childNodes.length > 1;
+    }
+    static getMainPageAreaContainerCore(pageElement) {
+        return pageElement.childNodes[5];
+    }
+    static getOtherPageAreaContainerCore(pageElement) {
+        return pageElement.childNodes[6];
+    }
+    static getAnchoredObjectsContainer(pageElement) {
+        return pageElement.childNodes[7];
+    }
+    static getTextBoxBackgroundContainer(pageElement) {
+        return pageElement.childNodes[8];
+    }
+    static getRowsContainerCore(columnElement) {
+        return columnElement.firstChild;
+    }
+    static getParagraphFramesContainerCore(columnElement) {
+        return browser.Browser.Chrome ? columnElement.firstChild.nextSibling : columnElement.childNodes[1];
+    }
+    static getTablesContainerCore(columnElement) {
+        return columnElement.lastChild;
+    }
+    static getColumnsContainerCore(pageAreaElement) {
+        return pageAreaElement;
+    }
+    static renderContainer(className) {
+        const element = document.createElement("DIV");
+        element.className = className;
+        return element;
+    }
+    static removeFromContainerByIndex(node, index, getContainer) {
+        const container = getContainer(node);
+        const child = container.childNodes[index];
+        if (child)
+            container.removeChild(child);
+    }
+    static replaceInContainer(node, index, newRenderedElement, getContainer) {
+        const container = getContainer(node);
+        container.replaceChild(newRenderedElement, container.childNodes[index]);
+    }
+    static insertInContainer(node, index, newRenderedElement, getContainer) {
+        const container = getContainer(node);
+        if (index < container.childNodes.length)
+            container.insertBefore(newRenderedElement, container.childNodes[index]);
+        else
+            container.appendChild(newRenderedElement);
+    }
+    static removeFromContainerByObject(id, container, cache) {
+        const obj = cache[id];
+        if (obj) {
+            container.removeChild(obj);
+            delete cache[id];
+        }
+    }
+    static replaceFromContainerByObject(id, container, cache, newNode) {
+        container.replaceChild(newNode, cache[id]);
+        cache[id] = newNode;
+    }
+    static insertToContainerByObject(id, container, cache, newNode) {
+        cache[id] = newNode;
+        container.appendChild(newNode);
+    }
+    static isPageElementEmpty(pageElement) {
+        return pageElement.childNodes.length == 0;
+    }
+    renderPictureBoxContent(size, cacheInfo, tip, altText) {
+        const tooltip = tip ? CanvasUtils.buildHyperlinkTipString(tip, this.viewManager.stringResources.commonLabels.clickToFollowHyperlink, this.viewManager.fieldOptions) : "";
+        const img = document.createElement('img');
+        img.setAttribute('src', cacheInfo.base64);
+        if (tooltip) {
+            img.setAttribute('title', tooltip);
+        }
+        if ((0,common.isDefined)(altText) && !utils_string.StringUtils.isNullOrEmpty(altText))
+            img.alt = altText;
+        img.style.cssText = `height: ${math.MathUtils.round(size.height, 3)}px; width: ${math.MathUtils.round(size.width, 3)}px; vertical-align: baseline`;
+        img.setAttribute('class', RendererClassNames.PICTURE);
+        return img;
+    }
+}
+DocumentRenderer.mapBorderTypeToString = new MapCreator()
+    .add(BorderLineStyle.Single, "solid")
+    .add(BorderLineStyle.Dotted, "dotted")
+    .add(BorderLineStyle.Dashed, "dashed")
+    .add(BorderLineStyle.Double, "double")
+    .add(BorderLineStyle.DashSmallGap, "dashed")
+    .add(BorderLineStyle.DotDash, "dashed")
+    .add(BorderLineStyle.DotDotDash, "dashed")
+    .get();
+class DocumentRendererPageCache {
+    constructor(page) {
+        this.page = page;
+        this.init();
+    }
+    removeContent() {
+        const serviceContainer = DocumentRenderer.getServiceContainerCore(this.page);
+        dom.DomUtils.clearInnerHtml(this.page);
+        this.page.appendChild(serviceContainer);
+        this.init();
+    }
+    init() {
+        this.otherAreas = {};
+        this.anchoredPicture = {};
+        this.textBoxBgElements = {};
+    }
+}
+class BoxRenderResult {
+    constructor(html, increaseRowHeight) {
+        this.html = html;
+        this.increaseRowHeight = increaseRowHeight;
+    }
+    toString() {
+        if (typeof this.html === 'string')
+            return this.html;
+        else {
+            const result = [];
+            if (this.html) {
+                const length = this.html.children.length;
+                for (let i = 0; i < length; i++) {
+                    result.push(this.html.children.item(i).outerHTML);
+                }
+            }
+            return result.join('');
+        }
+    }
+}
+
 ;// CONCATENATED MODULE: ./src/common/canvas/listeners/frame-base-listener.ts
 
 
@@ -105786,8 +105810,8 @@ class ResizeBoxHelper {
         }
     }
     getSize(evt) {
-        var absDeltaX = evt.absolutePoint.x - (this.startScrollLeft - evt.scroll.x) - this.startX;
-        var absDeltaY = evt.absolutePoint.y - (this.startScrollTop - evt.scroll.y) - this.startY;
+        var absDeltaX = (evt.absolutePoint.x - (this.startScrollLeft - evt.scroll.x) - this.startX) / this.control.viewManager.zoomLevel;
+        var absDeltaY = (evt.absolutePoint.y - (this.startScrollTop - evt.scroll.y) - this.startY) / this.control.viewManager.zoomLevel;
         var deltaX = absDeltaX * Math.cos(this.rotation) - (-absDeltaY) * Math.sin(this.rotation);
         var deltaY = -(absDeltaX * Math.sin(this.rotation) + (-absDeltaY) * Math.cos(this.rotation));
         var newWidth, newHeight;
@@ -107908,6 +107932,7 @@ class DimensionInfo {
 
 
 
+
 const SCROLL_INTERVAL_MS = 50;
 const CSSCLASS_FOCUSED = "dxreInFocus";
 const AUTOSCROLL_AREA_SIZE = 10;
@@ -107925,6 +107950,7 @@ class CanvasManager extends batch_updatable/* BatchUpdatableObject */.IS {
         this.blockNotPointerEvents = false;
         this.lastPointerPosition = { x: -1, y: -1 };
         this.evtHandlersHolder = new event_handlers_holder/* DomEventHandlersHolder */.$();
+        this.simpleViewCanvasSizeManager = new SimpleViewCanvasSizeManager(this, viewManager.control);
         this.viewManager = viewManager;
         this.eventManager = eventManager;
         this.initCommonEvents();
@@ -107943,6 +107969,8 @@ class CanvasManager extends batch_updatable/* BatchUpdatableObject */.IS {
     }
     dispose() {
         this.evtHandlersHolder.removeAllListeners();
+        this.simpleViewCanvasSizeManager.dispose();
+        this.simpleViewCanvasSizeManager = null;
     }
     onUpdateUnlocked(_occurredEvents) {
         this.viewManager.canvasListener.updateVisibleParts();
@@ -107969,7 +107997,7 @@ class CanvasManager extends batch_updatable/* BatchUpdatableObject */.IS {
             dom.DomUtils.removeClassName(this.viewManager.canvas, CSSCLASS_FOCUSED);
     }
     getCanvasWidth() {
-        return SizeUtils.getClientWidth(this.viewManager.canvas);
+        return SizeUtils.getClientWidth(this.viewManager.canvas) / this.viewManager.zoomLevel;
     }
     onCanvasMouseWheel(evt) {
         if (!this.viewManager.layout)
@@ -108131,7 +108159,7 @@ class CanvasManager extends batch_updatable/* BatchUpdatableObject */.IS {
         this.saveMousePosition(evt);
     }
     getScale(actualSize, originalSize) {
-        return actualSize != 0 && originalSize != 0 ? actualSize / originalSize : 1;
+        return (actualSize != 0 && originalSize != 0 ? actualSize / originalSize : 1) * this.viewManager.zoomLevel;
     }
     getLayoutPoint(evt, checkScroll) {
         if (!this.viewManager.layout)
@@ -108144,12 +108172,14 @@ class CanvasManager extends batch_updatable/* BatchUpdatableObject */.IS {
         const clientY = utils_evt/* EvtUtils */.g.getEventY(evt) / scaleY;
         const canvasX = dom.DomUtils.getAbsolutePositionX(canvas) / scaleX;
         const canvasY = dom.DomUtils.getAbsolutePositionY(canvas) / scaleY;
-        const offsetY = canvas.scrollTop + clientY - canvasY;
+        const offsetY = canvas.scrollTop / scaleY + clientY - canvasY;
         const pageIndex = this.sizes.findPageIndexByOffsetY(this.viewManager.layout.pages, offsetY);
+        const visibleAreaWidth = this.sizes.getVisibleAreaWidth(false) / scaleX;
+        const visibleAreaHeight = this.sizes.getVisibleAreaHeight(false) / scaleY;
         if (checkScroll) {
-            if (this.sizes.scrollYVisible && canvasX + this.sizes.getVisibleAreaWidth(false) - clientX < 0)
+            if (this.sizes.scrollYVisible && canvasX + visibleAreaWidth - clientX < 0)
                 return LayoutPoint.Empty();
-            if (this.sizes.scrollXVisible && canvasY + this.sizes.getVisibleAreaHeight(false) - clientY < 0)
+            if (this.sizes.scrollXVisible && canvasY + visibleAreaHeight - clientY < 0)
                 return LayoutPoint.Empty();
         }
         const layoutPage = this.viewManager.layout.pages[pageIndex];
@@ -109758,6 +109788,8 @@ class SelectionRenderer extends SelectionRendererBase {
 
 
 
+
+
 
 
 
@@ -109865,6 +109897,7 @@ class ViewManager {
     }
     addTopLevelContainers() {
         this.pagesContainer = DocumentRenderer.renderContainer(RendererClassNames.PAGES);
+        this.pagesContainer.style.zoom = this.zoomLevel.toString();
         this.serviceContainer = DocumentRenderer.renderContainer(RendererClassNames.TOP_LEVEL_SERVICE_CONTAINER);
         DocumentRenderer.insertInContainer(this.canvas, 0, this.pagesContainer, (node) => node);
         this.canvas.appendChild(this.serviceContainer);
@@ -109901,6 +109934,20 @@ class ViewManager {
             firstPage.flags.set(LayoutPageFlags.ContentRendered, true);
         }
     }
+    get zoomLevel() { return this.innerClientProperties.viewsSettings.zoomLevel; }
+    set zoomLevel(value) {
+        this.pagesContainer.style.zoom = value.toString();
+        this.innerClientProperties.viewsSettings.zoomLevel = value;
+        if (this.control.innerClientProperties.viewsSettings.isSimpleView) {
+            this.canvasManager.simpleViewCanvasSizeManager.changeSize(true);
+        }
+        this.control.horizontalRulerControl.update();
+    }
+    get allowZoom() { return ControlOptions.isEnabled(this.control.modelManager.richOptions.control.allowZoom); }
+    set allowZoom(value) {
+        this.control.modelManager.richOptions.control.allowZoom = value ? DocumentCapability.Enabled : DocumentCapability.Hidden;
+        this.control.barHolder.forceUpdate({ [RichEditClientCommand.ChangeZoomLevel]: true });
+    }
 }
 
 ;// CONCATENATED MODULE: ./src/common/client-side-events.ts
@@ -112394,6 +112441,8 @@ class RulerMultiControl {
         this.subControls = [];
         this.handleControlIndex = -1;
         this.viewState = [];
+        this.zoomLevel = 1.0;
+        this.zoomChanged = false;
         this.modelData = modelData;
         this.controls = controls;
     }
@@ -112409,6 +112458,8 @@ class RulerMultiControl {
     updateModelState() {
         this.currModelState = this.getModelState();
         this.prevModelState = this.currModelState.clone();
+        this.zoomChanged = this.zoomLevel != this.modelData.zoomLevel;
+        this.zoomLevel = this.modelData.zoomLevel;
     }
     onMouseMove(distance, _source) {
         this.calculateNewModelState(distance);
@@ -112493,6 +112544,23 @@ class RulerVerticalLineControl {
     }
 }
 
+;// CONCATENATED MODULE: ./src/common/ui/ruler/controls/zoomable-value.ts
+class RulerValue {
+    set value(value) {
+        this.originalValue = value / this.zoomLevelHolder.zoomLevel;
+    }
+    ;
+    get value() {
+        const calculatedValue = this.originalValue * this.zoomLevelHolder.zoomLevel;
+        return calculatedValue;
+    }
+    ;
+    constructor(originalValue, zoomLevelHolder) {
+        this.originalValue = originalValue;
+        this.zoomLevelHolder = zoomLevelHolder;
+    }
+}
+
 ;// CONCATENATED MODULE: ./src/common/ui/ruler/controls/column.ts
 
 
@@ -112503,6 +112571,7 @@ class RulerVerticalLineControl {
 
 
 
+
 const MinColumnWidth = unit_converter/* UnitConverter */.u.centimeterToPixel(1.5);
 const MinColumnSpace = unit_converter/* UnitConverter */.u.centimeterToPixel(0.25);
 const COLUMN_HANDLE_CLASS_NAME = RICH_EDIT_CLASS_NAME_PREFIX + "columnHandle";
@@ -112529,14 +112598,25 @@ var ColumnAction;
     ColumnAction[ColumnAction["ColumnWidth"] = 3] = "ColumnWidth";
 })(ColumnAction || (ColumnAction = {}));
 class RulerColumnModelState {
+    get leftPos() { return this.zoomableLeftPos.value; }
+    get originalLeftPos() { return this.zoomableLeftPos.originalValue; }
+    set leftPos(value) { this.zoomableLeftPos.value = value; }
+    get width() { return this.zoomableWidth.value; }
+    get originalWidth() { return this.zoomableWidth.originalValue; }
+    set width(value) { this.zoomableWidth.value = value; }
+    get space() { return this.zoomableSpace.value; }
+    get originalSpace() { return this.zoomableSpace.originalValue; }
+    set space(value) { this.zoomableSpace.value = value; }
     get rightPos() { return this.leftPos + this.width; }
-    constructor(leftPos, width, space) {
-        this.leftPos = leftPos;
-        this.width = width;
-        this.space = space;
+    get originalRightPos() { return this.originalLeftPos + this.originalWidth; }
+    constructor(leftPos, width, space, zoomLevelHolder) {
+        this.zoomLevelHolder = zoomLevelHolder;
+        this.zoomableLeftPos = new RulerValue(leftPos, this.zoomLevelHolder);
+        this.zoomableWidth = new RulerValue(width, this.zoomLevelHolder);
+        this.zoomableSpace = new RulerValue(space, this.zoomLevelHolder);
     }
     clone() {
-        return new RulerColumnModelState(this.leftPos, this.width, this.space);
+        return new RulerColumnModelState(this.originalLeftPos, this.originalWidth, this.originalSpace, this.zoomLevelHolder);
     }
     equals(obj) {
         return this.leftPos == obj.leftPos &&
@@ -112553,7 +112633,8 @@ class RulerColumnsModelState {
     }
     get activeColumn() { return this.columns[this.columnActiveIndex]; }
     clone() {
-        return new RulerColumnsModelState(utils_list.ListUtils.deepCopy(this.columns), this.equalWidth, this.columnActiveIndex, this.enabled);
+        const clonedColumns = utils_list.ListUtils.deepCopy(this.columns);
+        return new RulerColumnsModelState(clonedColumns, this.equalWidth, this.columnActiveIndex, this.enabled);
     }
 }
 class RulerColumnsControl extends RulerMultiControl {
@@ -112561,8 +112642,8 @@ class RulerColumnsControl extends RulerMultiControl {
         const state = this.modelData.commandManager.getCommand(RichEditClientCommand.RulerSectionColumnsSettings).getState();
         let prevColumnLeftPos = 0;
         const modelColumns = utils_list.ListUtils.map(state.value, (column) => {
-            const result = new RulerColumnModelState(prevColumnLeftPos, column.width, column.space);
-            prevColumnLeftPos = result.rightPos + result.space;
+            const result = new RulerColumnModelState(prevColumnLeftPos, column.width, column.space, this.modelData);
+            prevColumnLeftPos = result.originalRightPos + result.originalSpace;
             return result;
         });
         return new RulerColumnsModelState(modelColumns, state.equalWidth, state.activeIndex, state.enabled);
@@ -112580,7 +112661,7 @@ class RulerColumnsControl extends RulerMultiControl {
                 return result;
             }, 0, this.currModelState.columns.length - 1);
             this.setCount(this.viewState.length);
-            utils_list.ListUtils.forEach2(this.subControls, this.viewState, (control, viewState) => control.setValue(viewState));
+            utils_list.ListUtils.forEach2(this.subControls, this.viewState, (control, viewState) => control.setValue(viewState, this.zoomChanged));
         }
     }
     createSubControl() {
@@ -112592,8 +112673,8 @@ class RulerColumnsControl extends RulerMultiControl {
             const columnWidthDiff = diff / colCount;
             let prevColumnLeftPos = 0;
             this.currModelState.columns = this.prevModelState.columns.map(oldColumn => {
-                const result = new RulerColumnModelState(prevColumnLeftPos, oldColumn.width - columnWidthDiff, oldColumn.space);
-                prevColumnLeftPos = result.rightPos + result.space;
+                const result = new RulerColumnModelState(prevColumnLeftPos, oldColumn.originalWidth - columnWidthDiff, oldColumn.originalSpace, this.modelData);
+                prevColumnLeftPos = result.originalRightPos + result.originalSpace;
                 return result;
             });
         }
@@ -112618,7 +112699,7 @@ class RulerColumnsControl extends RulerMultiControl {
     }
     onMouseUp() {
         this.modelData.commandManager.getCommand(RichEditClientCommand.RulerSectionColumnsSettings)
-            .execute(this.modelData.commandManager.isPublicApiCall, this.currModelState.columns.map(col => new ColumnSectionProperties(col.width, col.space)));
+            .execute(this.modelData.commandManager.isPublicApiCall, this.currModelState.columns.map(col => new ColumnSectionProperties(col.originalWidth, col.originalSpace)));
         this.finishHandle();
     }
     calculateNewModelState(distance) {
@@ -112635,10 +112716,11 @@ class RulerColumnsControl extends RulerMultiControl {
         }
     }
     calculateNewModelStateColumnMove(distance) {
+        const minColumnWidth = MinColumnWidth * this.modelData.zoomLevel;
         const leftMargin = this.controls.leftMargin.prevModelState.modelValue;
         const column = this.prevModelState.columns[this.handleControlIndex];
         const initialPos = leftMargin + column.rightPos;
-        const newPos = this.controls.chooseClosestAnchorPosition(initialPos + distance, [initialPos], new min_max.MinMaxNumber(leftMargin + column.leftPos + MinColumnWidth, leftMargin + this.prevModelState.columns[this.handleControlIndex + 1].rightPos - MinColumnWidth - column.space));
+        const newPos = this.controls.chooseClosestAnchorPosition(initialPos + distance, [initialPos], new min_max.MinMaxNumber(leftMargin + column.leftPos + minColumnWidth, leftMargin + this.prevModelState.columns[this.handleControlIndex + 1].rightPos - minColumnWidth - column.space));
         const correctedDistance = newPos - initialPos;
         const currColumn = this.currModelState.columns[this.handleControlIndex] = this.prevModelState.columns[this.handleControlIndex].clone();
         const nextColumn = this.currModelState.columns[this.handleControlIndex + 1] = this.prevModelState.columns[this.handleControlIndex + 1].clone();
@@ -112647,15 +112729,17 @@ class RulerColumnsControl extends RulerMultiControl {
         nextColumn.width -= correctedDistance;
     }
     calculateNewModelStateColumnSpace(distance, leftEdge) {
+        const minColumnWidth = MinColumnWidth * this.modelData.zoomLevel;
+        const minColumnSpace = MinColumnSpace * this.modelData.zoomLevel;
         if (this.prevModelState.equalWidth) {
             const columnCount = this.currModelState.columns.length;
             const leftMargin = this.controls.leftMargin.prevModelState.modelValue;
             const column = this.prevModelState.columns[this.handleControlIndex];
-            const maxColumnSpace = (utils_list.ListUtils.last(this.prevModelState.columns).rightPos - MinColumnWidth * columnCount) / (columnCount - 1);
-            const maxColumnWidth = (utils_list.ListUtils.last(this.prevModelState.columns).rightPos - MinColumnSpace * (columnCount - 1)) / columnCount;
+            const maxColumnSpace = (utils_list.ListUtils.last(this.prevModelState.columns).rightPos - minColumnWidth * columnCount) / (columnCount - 1);
+            const maxColumnWidth = (utils_list.ListUtils.last(this.prevModelState.columns).rightPos - minColumnSpace * (columnCount - 1)) / columnCount;
             const bounds = leftEdge ?
-                new min_max.MinMaxNumber(leftMargin + MinColumnWidth * (this.handleControlIndex + 1) + maxColumnSpace * this.handleControlIndex, leftMargin + maxColumnWidth * (this.handleControlIndex + 1) + MinColumnSpace * this.handleControlIndex) :
-                new min_max.MinMaxNumber(leftMargin + (maxColumnWidth + MinColumnSpace) * (this.handleControlIndex + 1), leftMargin + (MinColumnWidth + maxColumnSpace) * (this.handleControlIndex + 1));
+                new min_max.MinMaxNumber(leftMargin + minColumnWidth * (this.handleControlIndex + 1) + maxColumnSpace * this.handleControlIndex, leftMargin + maxColumnWidth * (this.handleControlIndex + 1) + minColumnSpace * this.handleControlIndex) :
+                new min_max.MinMaxNumber(leftMargin + (maxColumnWidth + minColumnSpace) * (this.handleControlIndex + 1), leftMargin + (minColumnWidth + maxColumnSpace) * (this.handleControlIndex + 1));
             const initialPos = leftMargin + column.rightPos + (leftEdge ? 0 : column.space);
             const newPos = this.controls.chooseClosestAnchorPosition(initialPos + distance, [initialPos], bounds);
             const correctedDistance = newPos - initialPos;
@@ -112678,8 +112762,8 @@ class RulerColumnsControl extends RulerMultiControl {
             const leftMargin = this.controls.leftMargin.prevModelState.modelValue;
             const column = this.prevModelState.columns[this.handleControlIndex];
             const bounds = leftEdge ?
-                new min_max.MinMaxNumber(leftMargin + column.leftPos + MinColumnWidth, leftMargin + this.prevModelState.columns[this.handleControlIndex + 1].leftPos - MinColumnSpace) :
-                new min_max.MinMaxNumber(leftMargin + column.rightPos + MinColumnSpace, leftMargin + this.prevModelState.columns[this.handleControlIndex + 1].rightPos - MinColumnWidth);
+                new min_max.MinMaxNumber(leftMargin + column.leftPos + minColumnWidth, leftMargin + this.prevModelState.columns[this.handleControlIndex + 1].leftPos - minColumnSpace) :
+                new min_max.MinMaxNumber(leftMargin + column.rightPos + minColumnSpace, leftMargin + this.prevModelState.columns[this.handleControlIndex + 1].rightPos - minColumnWidth);
             const initialPos = leftMargin + column.rightPos + (leftEdge ? 0 : column.space);
             const newPos = this.controls.chooseClosestAnchorPosition(initialPos + distance, [initialPos], bounds);
             const correctedDistance = newPos - initialPos;
@@ -112728,8 +112812,8 @@ class RulerColumnState {
         }
         this.controls.lineControl.setPosition(pos, SnapTo.LeftSide);
     }
-    setValue(viewState) {
-        if (!this.viewState || !this.viewState.equals(viewState)) {
+    setValue(viewState, forceUpdate = false) {
+        if (forceUpdate || !this.viewState || !this.viewState.equals(viewState)) {
             this.viewState = viewState.clone();
             this.rootElement.style.left = RULLER_NUMBER_CORRECTION + viewState.rightPos + "px";
             this.rootElement.style.width = viewState.space + "px";
@@ -112749,13 +112833,21 @@ class RulerColumnState {
 ;// CONCATENATED MODULE: ./src/common/ui/ruler/controls/base.ts
 
 
+
 class RulerModelState {
-    constructor(modelValue, enabled) {
-        this.modelValue = modelValue;
+    get modelValue() { return this._modelValue.value; }
+    ;
+    get originalModelValue() { return this._modelValue.originalValue; }
+    ;
+    set modelValue(value) { this._modelValue.value = value; }
+    ;
+    constructor(modelValue, enabled, zoomLevelHolder) {
         this.enabled = enabled;
+        this.zoomLevelHolder = zoomLevelHolder;
+        this._modelValue = new RulerValue(modelValue, zoomLevelHolder);
     }
     clone() {
-        return new RulerModelState(this.modelValue, this.enabled);
+        return new RulerModelState(this.originalModelValue, this.enabled, this.zoomLevelHolder);
     }
 }
 class RulerBase {
@@ -112794,25 +112886,40 @@ const DIVISION_MINOR_CLASS_NAME = RULER_CLASS_NAME + "Minor" + DIVISION_CLASS_NA
 const DIVISION_MAJOR_CLASS_NAME = RULER_CLASS_NAME + "Major" + DIVISION_CLASS_NAME;
 const DIVISION_NUMBER_CLASS_NAME = RULER_CLASS_NAME + "Number" + DIVISION_CLASS_NAME;
 class RulerDivisionsControl extends RulerBase {
+    get height() { return this._height; }
     getRootClassName() { return DIVISION_CONTAINER_CLASS_NAME; }
     constructor(modelData, controls, divisionInfo, maxPageWidth) {
         super(modelData, controls);
-        this.height = 0;
-        const unitCount = Math.ceil(maxPageWidth / divisionInfo.unitSize);
-        this.rootElement.style.width = divisionInfo.unitSize * (unitCount * 2 + 1) + "px";
+        this.zoomLevel = 1.0;
+        this.zoomChanged = false;
+        this._height = 0;
+        this.divisionInfo = divisionInfo;
+        this.maxPageWidth = maxPageWidth;
         this.controls.ruler.rootElement.appendChild(this.rootElement);
+        this._height = SizeUtils.getOffsetHeight(this.rootElement);
         if (browser.Browser.IE && browser.Browser.MajorVersion <= 9)
             this.rootElement.offsetParent;
-        this.height = SizeUtils.getOffsetHeight(this.rootElement);
-        createDivisionElements(this.rootElement, unitCount, divisionInfo, this.height);
-        this.initialLeft = -(unitCount * divisionInfo.unitSize - RULLER_NUMBER_CORRECTION);
+        this.render();
+    }
+    render() {
+        const unitCount = Math.ceil(this.maxPageWidth / this.divisionInfo.unitSize);
+        this.rootElement.style.width = this.divisionInfo.unitSize * (unitCount * 2 + 1) + "px";
+        createDivisionElements(this.rootElement, unitCount, this.divisionInfo, this.height);
+        this.initialLeft = -(unitCount * this.divisionInfo.unitSize - RULLER_NUMBER_CORRECTION);
     }
     update() {
         this.updateModelState();
         this.updateView();
     }
-    updateModelState() { }
+    updateModelState() {
+        this.zoomChanged = this.zoomLevel != this.modelData.zoomLevel;
+        this.zoomLevel = this.modelData.zoomLevel;
+    }
     updateView() {
+        if (this.zoomChanged) {
+            this.render();
+            this.zoomChanged = false;
+        }
         const newViewState = this.getViewValue();
         if (newViewState != this.viewState) {
             this.viewState = newViewState;
@@ -112829,6 +112936,9 @@ class RulerDivisionsControl extends RulerBase {
     }
 }
 function createDivisionElements(rootElement, unitCount, divisionInfo, height) {
+    while (rootElement.firstChild) {
+        rootElement.removeChild(rootElement.lastChild);
+    }
     let divisionLeftPosition = 0;
     const createSimpleDivision = (className, topAndBottomMargin) => {
         const stepSize = divisionInfo.stepSize;
@@ -112880,16 +112990,26 @@ var DivisionType;
     DivisionType[DivisionType["Major"] = 2] = "Major";
 })(DivisionType || (DivisionType = {}));
 class DivisionInfo {
-    constructor(map, unitSize) {
+    get unitSize() { return this._unitSize; }
+    ;
+    get stepSize() { return this._stepSize; }
+    ;
+    constructor(map, originalUnitSize, zoomLevelHolder) {
+        this.originalUnitSize = originalUnitSize;
+        this.zoomLevelHolder = zoomLevelHolder;
         this.unitMap = map;
-        this.unitSize = unitSize;
-        this.stepSize = this.unitSize / this.unitMap.length;
+        this.updateZoomLevel();
+    }
+    updateZoomLevel() {
+        const zoomLevel = this.zoomLevelHolder.zoomLevel;
+        this._unitSize = this.originalUnitSize * zoomLevel;
+        this._stepSize = this.unitSize / this.unitMap.length;
     }
-    static create(unitType) {
+    static create(unitType, viewSettings) {
         return unitType == RichEditUnit.Inch ?
             new DivisionInfo([DivisionType.Number, DivisionType.Minor, DivisionType.Minor, DivisionType.Minor,
-                DivisionType.Major, DivisionType.Minor, DivisionType.Minor, DivisionType.Minor], unit_converter/* UnitConverter */.u.inchesToPixels(1)) :
-            new DivisionInfo([DivisionType.Number, DivisionType.Minor, DivisionType.Major, DivisionType.Minor], unit_converter/* UnitConverter */.u.centimeterToPixelF(1));
+                DivisionType.Major, DivisionType.Minor, DivisionType.Minor, DivisionType.Minor], unit_converter/* UnitConverter */.u.inchesToPixels(1), viewSettings) :
+            new DivisionInfo([DivisionType.Number, DivisionType.Minor, DivisionType.Major, DivisionType.Minor], unit_converter/* UnitConverter */.u.centimeterToPixelF(1), viewSettings);
     }
 }
 
@@ -113077,7 +113197,7 @@ class RulerFirstLineIndentDragHandle extends RulerBaseIndentControl {
     }
     getModelState() {
         const state = this.modelData.commandManager.getCommand(RichEditClientCommand.RulerParagraphLeftIndents).getState();
-        return new RulerModelState(state.value.firstLine, state.enabled);
+        return new RulerModelState(state.value.firstLine, state.enabled, this.modelData);
     }
     updateView() {
         const newViewState = this.controls.paragraphLeftPosition + this.currModelState.modelValue;
@@ -113091,7 +113211,7 @@ class RulerFirstLineIndentDragHandle extends RulerBaseIndentControl {
     }
     canHandle(source) { return source == this.rootElement; }
     onMouseUp() {
-        const commandValue = new RulerParagraphLeftIndentsCommandValue(null, this.controls.leftIndent.currModelState.modelValue, this.currModelState.modelValue);
+        const commandValue = new RulerParagraphLeftIndentsCommandValue(null, this.controls.leftIndent.currModelState.originalModelValue, this.currModelState.originalModelValue);
         commandValue.setIntervalsInfo(this.modelData.selection.intervalsInfo);
         this.modelData.commandManager.getCommand(RichEditClientCommand.RulerParagraphLeftIndents)
             .execute(this.modelData.commandManager.isPublicApiCall, commandValue);
@@ -113151,7 +113271,7 @@ class RulerLeftIndentDragHandle extends RulerBaseIndentControl {
     }
     getModelState() {
         const state = this.modelData.commandManager.getCommand(RichEditClientCommand.RulerParagraphLeftIndents).getState();
-        return new RulerModelState(state.value.hanging, state.enabled);
+        return new RulerModelState(state.value.hanging, state.enabled, this.modelData);
     }
     updateView() {
         const newViewState = this.controls.paragraphLeftPosition + this.currModelState.modelValue;
@@ -113175,7 +113295,7 @@ class RulerLeftIndentDragHandle extends RulerBaseIndentControl {
         return false;
     }
     onMouseUp() {
-        const commandValue = new RulerParagraphLeftIndentsCommandValue(null, this.currModelState.modelValue, this.controls.firstLineIndent.currModelState.modelValue);
+        const commandValue = new RulerParagraphLeftIndentsCommandValue(null, this.currModelState.originalModelValue, this.controls.firstLineIndent.currModelState.originalModelValue);
         commandValue.setIntervalsInfo(this.modelData.selection.intervalsInfo);
         this.modelData.commandManager.getCommand(RichEditClientCommand.RulerParagraphLeftIndents)
             .execute(this.modelData.commandManager.isPublicApiCall, commandValue);
@@ -113240,7 +113360,7 @@ class RulerRightIndentDragHandle extends RulerBaseIndentControl {
     getModelState() {
         const state = this.modelData.commandManager
             .getCommand(RichEditClientCommand.RulerParagraphRightIndent).getState();
-        return new RulerModelState(state.value.hanging, state.enabled);
+        return new RulerModelState(state.value.hanging, state.enabled, this.modelData);
     }
     updateView() {
         const newViewState = this.correctRelativeLeftIndents(this.controls.ruler.pageWidth - this.controls.paragraphRightPosition + this.currModelState.modelValue);
@@ -113259,7 +113379,7 @@ class RulerRightIndentDragHandle extends RulerBaseIndentControl {
     canHandle(source) { return source == this.rootElement; }
     onMouseUp() {
         this.modelData.commandManager.getCommand(RichEditClientCommand.RulerParagraphRightIndent)
-            .execute(this.modelData.commandManager.isPublicApiCall, this.currModelState.modelValue);
+            .execute(this.modelData.commandManager.isPublicApiCall, this.currModelState.originalModelValue);
         this.finishHandle();
     }
     lineControlSetPosition() {
@@ -113307,12 +113427,12 @@ class RulerBaseMarginControl extends RulerBase {
     }
     onMouseMove(distance, _source) {
         this.calculateNewModelState(distance);
-        this.controls.columns.marginsChanged(this.currModelState.modelValue - this.prevModelState.modelValue);
+        this.controls.columns.marginsChanged(this.currModelState.originalModelValue - this.prevModelState.originalModelValue);
         this.updateView();
         this.lineControlSetPosition();
     }
     onMouseUp() {
-        this.modelData.commandManager.getCommand(this.commandType).execute(this.modelData.commandManager.isPublicApiCall, this.currModelState.modelValue);
+        this.modelData.commandManager.getCommand(this.commandType).execute(this.modelData.commandManager.isPublicApiCall, this.currModelState.originalModelValue);
         this.finishHandle();
     }
     onEscPress() {
@@ -113321,7 +113441,7 @@ class RulerBaseMarginControl extends RulerBase {
     }
     getModelState() {
         const state = this.modelData.commandManager.getCommand(this.commandType).getState();
-        return new RulerModelState(state.value, state.enabled);
+        return new RulerModelState(state.value, state.enabled, this.modelData);
     }
     finishHandle() {
         this.controls.lineControl.hide();
@@ -113454,7 +113574,7 @@ class RulerControl extends RulerBase {
         this.rootElement.style.paddingTop = this.controls.firstLineIndent.heightOfProtrudingPart + "px";
     }
     updateModelState() {
-        this.currPageWidth = unit_converter/* UnitConverter */.u.twipsToPixelsF(this.modelData.inputPosition.getMergedSectionPropertiesRaw().pageSize.width);
+        this.currPageWidth = unit_converter/* UnitConverter */.u.twipsToPixelsF(this.modelData.inputPosition.getMergedSectionPropertiesRaw().pageSize.width) * this.modelData.zoomLevel;
     }
     updateView() {
         if (this.prevPageWidth != this.currPageWidth) {
@@ -113465,7 +113585,7 @@ class RulerControl extends RulerBase {
     }
     adjust() {
         const viewWidth = this.controls.canvas.clientWidth;
-        if (viewWidth > this.controls.ruler.pageWidth)
+        if (viewWidth > this.pageWidth)
             this.initialMarginLeftElement = (viewWidth - this.pageWidth - RULLER_NUMBER_CORRECTION * 2) / 2;
         else {
             const paddingLeft = dom.DomUtils.pxToInt(dom.DomUtils.getCurrentStyle(this.controls.canvas).paddingLeft);
@@ -113534,6 +113654,27 @@ class RulerTabUtils {
     }
 }
 
+;// CONCATENATED MODULE: ./src/common/ui/ruler/controls/tab/tab-info.ts
+
+
+class RulerTabInfo extends TabInfoBase {
+    get position() { return this.zoomablePosition.value; }
+    set position(value) { this.zoomablePosition.value = value; }
+    get originalPosition() { return this.zoomablePosition.originalValue; }
+    set originalPosition(value) { this.zoomablePosition.originalValue = value; }
+    constructor(position, alignment, leader, deleted, isDefault, zoomLevelHolder) {
+        super(alignment, leader, deleted, isDefault);
+        this.zoomLevelHolder = zoomLevelHolder;
+        this.zoomablePosition = new RulerValue(position, zoomLevelHolder);
+    }
+    clone() {
+        return new RulerTabInfo(this.originalPosition, this.alignment, this.leader, this.deleted, this.isDefault, this.zoomLevelHolder);
+    }
+    equals(obj) {
+        return super.equals(obj) && this.originalPosition == obj.originalPosition;
+    }
+}
+
 ;// CONCATENATED MODULE: ./src/common/ui/ruler/controls/tab/tab.ts
 
 
@@ -113564,7 +113705,8 @@ class RulerTabsControlState {
         this.enabled = enabled;
     }
     clone() {
-        return new RulerTabsControlState(utils_list.ListUtils.deepCopy(this.tabs), this.enabled);
+        const clonedTabs = utils_list.ListUtils.deepCopy(this.tabs);
+        return new RulerTabsControlState(clonedTabs, this.enabled);
     }
 }
 class RulerTabViewState {
@@ -113591,9 +113733,7 @@ class RulerTabsControl extends RulerMultiControl {
         if (this.modelData.showTabs) {
             const paragraph = this.modelData.selection.activeSubDocument.getParagraphByPosition(this.modelData.selection.intervalsInfo.interval.start);
             const tabs = utils_list.ListUtils.map(paragraph.getTabs().positions, tab => {
-                const newTab = tab.clone();
-                newTab.position = unit_converter/* UnitConverter */.u.twipsToPixelsF(tab.position);
-                return newTab;
+                return new RulerTabInfo(unit_converter/* UnitConverter */.u.twipsToPixelsF(tab.position), tab.alignment, tab.leader, tab.deleted, tab.isDefault, this.modelData);
             });
             return new RulerTabsControlState(tabs, true);
         }
@@ -113643,8 +113783,8 @@ class RulerTabsControl extends RulerMultiControl {
         if (this.isTabMarkZone(evt) && pos >= this.minPosition() && pos <= this.maxPosition()) {
             this.tabAction = TabAction.Insert;
             this.handleControlIndex = this.currModelState.tabs.length;
-            const tabPosition = this.controls.chooseClosestAnchorPosition(pos, [], new min_max.MinMaxNumber(this.minPosition(), this.maxPosition()));
-            this.newTab = new TabInfo(tabPosition, this.controls.tabTypeBox.align, TabLeaderType.None, false, false);
+            const tabPosition = this.controls.chooseClosestAnchorPosition(pos, [], new min_max.MinMaxNumber(this.minPosition(), this.maxPosition())) / this.modelData.zoomLevel;
+            this.newTab = new RulerTabInfo(tabPosition, this.controls.tabTypeBox.align, TabLeaderType.None, false, false, this.modelData);
             this.currModelState.tabs.push(this.newTab.clone());
             this.updateView();
             this.updatePresentation();
@@ -113675,20 +113815,20 @@ class RulerTabsControl extends RulerMultiControl {
                 else {
                     const tab = this.currModelState.tabs[this.handleControlIndex];
                     this.modelData.commandManager.getCommand(RichEditClientCommand.InsertTabRuler)
-                        .execute(this.modelData.commandManager.isPublicApiCall, { position: tab.position, align: tab.alignment });
+                        .execute(this.modelData.commandManager.isPublicApiCall, { position: tab.originalPosition, align: tab.alignment });
                 }
                 break;
             }
             case TabAction.Move: {
                 if (this.deleteTab) {
                     this.modelData.commandManager.getCommand(RichEditClientCommand.DeleteTabRuler)
-                        .execute(this.modelData.commandManager.isPublicApiCall, this.prevModelState.tabs[this.handleControlIndex].position);
+                        .execute(this.modelData.commandManager.isPublicApiCall, this.prevModelState.tabs[this.handleControlIndex].originalPosition);
                 }
                 else {
                     this.modelData.commandManager.getCommand(RichEditClientCommand.MoveTabRuler)
                         .execute(this.modelData.commandManager.isPublicApiCall, {
-                        start: this.prevModelState.tabs[this.handleControlIndex].position,
-                        end: this.currModelState.tabs[this.handleControlIndex].position
+                        start: this.prevModelState.tabs[this.handleControlIndex].originalPosition,
+                        end: this.currModelState.tabs[this.handleControlIndex].originalPosition
                     });
                 }
                 break;
@@ -114299,8 +114439,16 @@ class TableCellIterator {
 
 
 
+
 class TableColumnSeparatorStruct {
-    constructor() {
+    get currItem() {
+        return this.items[this.index];
+    }
+    get hasItems() {
+        return this.items.length > 0;
+    }
+    constructor(zoomLevelHolder) {
+        this.zoomLevelHolder = zoomLevelHolder;
         this.index = 0;
         this.tableIndex = 0;
         this.cellSpacing = 0;
@@ -114308,17 +114456,11 @@ class TableColumnSeparatorStruct {
         this.maxValue = -1;
         this.items = [];
     }
-    get currItem() {
-        return this.items[this.index];
-    }
-    get hasItems() {
-        return this.items.length > 0;
-    }
     createItem(position, marginLeft, marginRight) {
-        this.items.push(new TableColumnSeparatorItem(position, marginLeft, marginRight));
+        this.items.push(new TableColumnSeparatorItem(position, marginLeft, marginRight, this.zoomLevelHolder));
     }
     clone() {
-        const result = new TableColumnSeparatorStruct();
+        const result = new TableColumnSeparatorStruct(this.zoomLevelHolder);
         result.index = this.index;
         result.tableIndex = this.tableIndex;
         result.minValue = this.minValue;
@@ -114328,13 +114470,20 @@ class TableColumnSeparatorStruct {
     }
 }
 class TableColumnSeparatorItem {
-    constructor(position, leftMargin, rightMargin) {
-        this.position = position;
+    get position() { return this.zoomablePosition.value; }
+    ;
+    get originalPosition() { return this.zoomablePosition.originalValue; }
+    ;
+    set position(value) { this.zoomablePosition.value = value; }
+    ;
+    constructor(position, leftMargin, rightMargin, zoomLevelHolder) {
+        this.zoomLevelHolder = zoomLevelHolder;
+        this.zoomablePosition = new RulerValue(position, this.zoomLevelHolder);
         this.leftMargin = leftMargin;
         this.rightMargin = rightMargin;
     }
     clone() {
-        return new TableColumnSeparatorItem(this.position, this.leftMargin, this.rightMargin);
+        return new TableColumnSeparatorItem(this.originalPosition, this.leftMargin, this.rightMargin, this.zoomLevelHolder);
     }
 }
 class RulerTableColumnSeparatorsCommand extends CommandBase {
@@ -114374,7 +114523,7 @@ class RulerTableColumnSeparatorsCommand extends CommandBase {
             }
             return sellSpacing;
         };
-        let struct = new TableColumnSeparatorStruct();
+        let struct = new TableColumnSeparatorStruct(this.control.viewManager);
         if (this.selection.tableInfo.extendedData.numRows) {
             let layoutPosition = (subDocument.isMain()
                 ? new LayoutPositionMainSubDocumentCreator(this.control.layout, subDocument, position, DocumentLayoutDetailsLevel.Character)
@@ -114417,8 +114566,8 @@ class RulerTableColumnSeparatorsCommand extends CommandBase {
                         struct.createItem(lastLayoutCell.right, 0, 0);
                     }
                     struct.tableIndex = currLogicGrid.table.index;
-                    struct.items = struct.items.sort((a, b) => a.position - b.position);
-                    struct.index = search.SearchUtils.normedInterpolationIndexOf(struct.items, (item) => item.position, layoutCell.x);
+                    struct.items = struct.items.sort((a, b) => a.originalPosition - b.originalPosition);
+                    struct.index = search.SearchUtils.normedInterpolationIndexOf(struct.items, (item) => item.originalPosition, layoutCell.x);
                     if (currLayoutGrid.parentCell) {
                         struct.minValue = currLayoutGrid.parentCell.x;
                         struct.maxValue = currLayoutGrid.parentCell.right;
@@ -114488,7 +114637,7 @@ class RulerTablesControl extends RulerMultiControl {
         const state = this.modelData.commandManager.getCommand(RichEditClientCommand.RulerTableColumnSeparators).getState();
         return state.enabled ?
             new RulerTableModelState(state.value, state.value.tableIndex, state.enabled) :
-            new RulerTableModelState(new TableColumnSeparatorStruct(), -1, false);
+            new RulerTableModelState(new TableColumnSeparatorStruct(this.modelData), -1, false);
     }
     updateView() {
         const offset = this.controls.leftMargin.currModelState.modelValue + this.controls.columns.currModelState.activeColumn.leftPos;
@@ -114520,9 +114669,10 @@ class RulerTablesControl extends RulerMultiControl {
         });
     }
     onMouseUp() {
-        const oldPos = this.prevModelState.columnSeparators.items[this.handleControlIndex].position;
-        const newPos = this.currModelState.columnSeparators.items[this.handleControlIndex].position;
-        const param = new RulerChangeTableColumnWidthCommandParameters(this.currModelState.tableIndex, newPos - oldPos, null, oldPos, true);
+        const oldPos = this.prevModelState.columnSeparators.items[this.handleControlIndex].originalPosition;
+        const newPos = this.currModelState.columnSeparators.items[this.handleControlIndex].originalPosition;
+        const diffPos = newPos - oldPos;
+        const param = new RulerChangeTableColumnWidthCommandParameters(this.currModelState.tableIndex, diffPos, null, oldPos, true);
         this.modelData.commandManager.getCommand(RichEditClientCommand.RulerChangeTableColumnWidth)
             .execute(this.modelData.commandManager.isPublicApiCall, param);
         this.finishHandle();
@@ -114848,13 +114998,14 @@ class RulerControls {
         this.mouseEventsManager = new RulerMouseEventsManager();
         this.viewElementScrollManager = new RulerViewElementScrollManager();
         this.canvas = canvas;
-        const divisionInfo = DivisionInfo.create(modelData.unitType);
-        const maxPageWidth = unit_converter/* UnitConverter */.u.twipsToPixelsF(PaperSizeConverter.calculatePaperSize(PaperKind.PrcEnvelopeNumber10Rotated).width);
-        this.moveStepSize = modelData.unitType == RichEditUnit.Inch ? divisionInfo.stepSize / 2 : divisionInfo.stepSize;
+        this.modelData = modelData;
+        this.divisionInfo = DivisionInfo.create(modelData.unitType, this.modelData.innerClientProperties.viewsSettings);
+        this.calculateMoveStepSize();
+        const maxPageWidth = unit_converter/* UnitConverter */.u.twipsToPixelsF(PaperSizeConverter.calculatePaperSize(PaperKind.PrcEnvelopeNumber10Rotated).width) * this.modelData.zoomLevel;
         this.wrapper = new RulerWrapper(modelData, this);
         this.ruler = new RulerControl(modelData, this);
         this.tabTypeBox = new RulerTabTypeControl(modelData, this);
-        this.divisions = new RulerDivisionsControl(modelData, this, divisionInfo, maxPageWidth);
+        this.divisions = new RulerDivisionsControl(modelData, this, this.divisionInfo, maxPageWidth);
         this.leftMargin = new RulerLeftMarginDragHandle(modelData, this, maxPageWidth);
         this.rightMargin = new RulerRightMarginDragHandle(modelData, this, maxPageWidth);
         this.leftIndent = new RulerLeftIndentDragHandle(modelData, this);
@@ -114870,6 +115021,12 @@ class RulerControls {
         this.mouseEventsManager.addListener(this.mouseHandler);
         this.viewElementScrollManager.addListener(this.ruler, this.canvas);
     }
+    calculateMoveStepSize() {
+        this.moveStepSize = this.modelData.unitType == RichEditUnit.Inch ? this.divisionInfo.stepSize / 2 : this.divisionInfo.stepSize;
+    }
+    updateZoomLevel() {
+        this.divisionInfo.updateZoomLevel();
+    }
     dispose() {
         this.lineControl.dispose();
         this.wrapper.dispose();
@@ -114888,8 +115045,10 @@ class RulerControls {
         this.viewElementScrollManager.dispose();
     }
     update() {
+        this.updateZoomLevel();
         this.updateModelState();
         this.updateView();
+        this.calculateMoveStepSize();
     }
     updateModelState() {
         this.ruler.updateModelState();
@@ -114950,6 +115109,7 @@ class RulerModelData {
     get isReadOnly() { return this.core.readOnly != ReadOnlyMode.None; }
     get unitType() { return this.core.uiUnitConverter.getUnits(); }
     get selection() { return this.core.selection; }
+    get zoomLevel() { return this.core.viewManager.zoomLevel; }
     constructor(core, settings) {
         this.core = core;
         this.settings = this.fixSettings(settings);
@@ -115403,7 +115563,6 @@ class SearchManager {
 
 
 
-
 
 
 class RichEditCore {
@@ -115452,9 +115611,8 @@ class RichEditCore {
             this.searchManager.raiseSearchReset();
             this.clientSideEvents.raiseDocumentChanged();
         });
-        this.simpleViewCanvasSizeManager = new SimpleViewCanvasSizeManager(this.viewManager.canvasManager, this);
         if (this.innerClientProperties.viewsSettings.isSimpleView)
-            this.simpleViewCanvasSizeManager.setViewMode(true);
+            this.viewManager.canvasManager.simpleViewCanvasSizeManager.setViewMode(true);
         if ((0,utils_fonts/* fontWebApiAvailable */.lX)())
             (0,utils_fonts/* afterFontsLoaded */.mw)(() => {
                 this.invalidateLayoutAfterFontsLoaded();
@@ -115544,7 +115702,6 @@ class RichEditCore {
         this.viewManager.dispose();
         this.layoutFormatterManager.dispose();
         this.eventManager.dispose();
-        this.simpleViewCanvasSizeManager.dispose();
         this.loadingPanelManager.dispose();
         this.commandManager.dispose();
         this.spellChecker.dispose();
@@ -115577,7 +115734,6 @@ class RichEditCore {
         this.scrollFormatter = null;
         this.boxVisualizerManager = null;
         this.globalEventDispatcher = null;
-        this.simpleViewCanvasSizeManager = null;
         this.selectionModelChangesListener = null;
         this.loadingPanelManager = null;
         this.inputPositionModelChangesListener = null;
@@ -115712,7 +115868,7 @@ class RichEditCore {
     onViewTypeChanged() {
         this.viewManager.renderer.onViewTypeChanged();
         this.horizontalRulerControl.onViewTypeChanged();
-        this.simpleViewCanvasSizeManager.setViewMode(this.innerClientProperties.viewsSettings.isSimpleView);
+        this.viewManager.canvasManager.simpleViewCanvasSizeManager.setViewMode(this.innerClientProperties.viewsSettings.isSimpleView);
     }
     getModifiedState() {
         if (this.lastSavedHistoryItemId != this.modelManager.history.getCurrentItemId())
@@ -116527,6 +116683,9 @@ class Constants {
     static getFontSizesList() {
         return [8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72];
     }
+    static getZoomLevelsList() {
+        return [0.5, 0.75, 1.0, 1.25, 1.5, 2.0];
+    }
     static getParagraphStylesList() {
         const styles = Constants.getLocalizedDefaultPresetStyles();
         return styles['1'].filter(f => f['4'] == 0).map(f => {
@@ -117441,6 +117600,8 @@ var ViewTabCommandId;
     ViewTabCommandId[ViewTabCommandId["SwitchToPrintLayout"] = 406] = "SwitchToPrintLayout";
     ViewTabCommandId[ViewTabCommandId["ToggleShowHorizontalRuler"] = 94] = "ToggleShowHorizontalRuler";
     ViewTabCommandId[ViewTabCommandId["ToggleFullScreen"] = 98] = "ToggleFullScreen";
+    ViewTabCommandId[ViewTabCommandId["ChangeZoomLevel"] = 460] = "ChangeZoomLevel";
+    ViewTabCommandId[ViewTabCommandId["ToggleAllowZoom"] = 461] = "ToggleAllowZoom";
 })(ViewTabCommandId || (ViewTabCommandId = {}));
 var HeaderAndFooterTabCommandId;
 (function (HeaderAndFooterTabCommandId) {
@@ -121532,6 +121693,7 @@ class RibbonItemsData {
         const fontSizes = Constants.getFontSizesList().map(s => {
             return { text: s.toString(), value: s };
         });
+        const zoomLevels = Constants.getZoomLevelsList();
         function getTrimmedMessage(id) {
             const message = (0,external_DevExpress_localization_namespaceObject.formatMessage)(id);
             const trimmedFromEnd = utils_string.StringUtils.trimEnd(message, ['\\.']);
@@ -121792,6 +121954,16 @@ class RibbonItemsData {
             { type: 'Button', text: (0,external_DevExpress_localization_namespaceObject.formatMessage)('XtraRichEditStringId.MenuCmd_SwitchToPrintLayoutView'), icon: 'dxre-icon-PrintLayoutView', alwaysShowText: true, name: RichEditClientCommand.SwitchToPrintLayoutView, isToggleMode: true },
             { type: 'Button', text: (0,external_DevExpress_localization_namespaceObject.formatMessage)('XtraRichEditStringId.MenuCmd_ToggleShowHorizontalRuler'), icon: 'dxre-icon-RulerHorizontal', alwaysShowText: true, name: RichEditClientCommand.ToggleShowHorizontalRuler, isToggleMode: true, beginGroup: true },
             { type: 'Button', text: (0,external_DevExpress_localization_namespaceObject.formatMessage)('ASPxRichEditStringId.MenuCmd_ToggleFullScreen'), icon: 'dxre-icon-FullScreen', alwaysShowText: true, name: RichEditClientCommand.FullScreen, isToggleMode: true, beginGroup: true },
+            { type: 'SelectBox', dataSource: zoomLevels, width: 90, name: RichEditClientCommand.ChangeZoomLevel, beginGroup: true, acceptCustomValue: true, valueExpr: "this",
+                onCustomItemCreating: function (e) {
+                    const parsed = parseFloat(e.text);
+                    e.customItem = isNaN(parsed) ? e.text : parsed / 100;
+                },
+                displayExpr: function (item) {
+                    const parsed = parseFloat(item);
+                    return isNaN(parsed) ? item : Math.round(parsed * 100) + '%';
+                }
+            },
         ];
         return [
             { title: (0,external_DevExpress_localization_namespaceObject.formatMessage)('ASPxRichEditStringId.PageFile'), items: fileToolBarItems, id: RibbonTabType.File },
@@ -122503,6 +122675,44 @@ function createInnerItems(items) {
     }
 }
 
+;// CONCATENATED MODULE: ./src/client/utils/focus-helper.ts
+class FocusHelper {
+    static preventFocusOnClick(element) {
+        return new FocusBlocker(element);
+    }
+}
+class FocusBlocker {
+    constructor(target) {
+        this.target = target;
+        this.onPointerDownBinded = this.onPointerDown.bind(this);
+        this.addEventListeners(target);
+    }
+    addEventListeners(element) {
+        element.addEventListener("pointerdown", this.onPointerDownBinded);
+    }
+    removeEventListeners(element) {
+        element.removeEventListener("pointerdown", this.onPointerDownBinded);
+    }
+    onPointerDown(event) {
+        for (const element of event.composedPath()) {
+            if (!(element instanceof HTMLElement))
+                continue;
+            if (element === this.target) {
+                event.preventDefault();
+                break;
+            }
+            if (!this.target.contains(element) || element.tabIndex > -1)
+                break;
+        }
+    }
+    dispose() {
+        if (this.target) {
+            this.removeEventListeners(this.target);
+            this.target = null;
+        }
+    }
+}
+
 ;// CONCATENATED MODULE: ./src/client/bars/ribbon.ts
 
 
@@ -122512,6 +122722,7 @@ function createInnerItems(items) {
 
 
 
+
 class ClientRibbonBar extends RibbonBarBase {
     constructor(ownerControl, ownerElement, apiRibbon, fonts) {
         var _a;
@@ -122520,6 +122731,7 @@ class ClientRibbonBar extends RibbonBarBase {
         this.ownerElement = ownerElement;
         this.init(apiRibbon, fonts);
         this.createControl((_a = apiRibbon.activeTabIndex) !== null && _a !== void 0 ? _a : 1);
+        this.focusHandler = FocusHelper.preventFocusOnClick(this.ribbon.element);
     }
     updateContextItem(_commandKey) {
     }
@@ -122545,13 +122757,13 @@ class ClientRibbonBar extends RibbonBarBase {
     }
     dispose() {
         this.ribbon.dispose();
+        this.focusHandler.dispose();
     }
     checkActivateHeaderFooter(_selection) {
         return false;
     }
     createControl(activeTabIndex) {
         const element = document.createElement('div');
-        element.tabIndex = 0;
         const firstChild = this.ownerElement.firstChild;
         if (firstChild)
             this.ownerElement.insertBefore(element, firstChild);
@@ -129509,7 +129721,6 @@ class LinkHeaderFooterToPreviousCommand extends HeaderFooterCommandBase {
 
 
 
-
 class ApplyStyleCommand extends CommandBase {
     getState() {
         var interval = this.selection.lastSelectedInterval.clone();
@@ -129546,16 +129757,19 @@ class ApplyStyleCommand extends CommandBase {
     getStyleName(style) {
         return style.styleName;
     }
+    DEPRECATEDConvertOptionsParameter(parameter) {
+        return typeof parameter === 'string' ? { styleName: parameter } : parameter;
+    }
     executeCore(state, options) {
         const parameter = options.param;
-        if (utils_string.StringUtils.isNullOrEmpty(parameter))
+        if (utils_string.StringUtils.isNullOrEmpty(parameter.styleName))
             return false;
-        let interval = state.interval.clone();
+        const subDocumentInterval = new SubDocumentInterval(options.subDocument, state.interval.clone());
         let executed = true;
         let isPresetStyle = false;
         this.history.beginTransaction();
-        if (StylesManager.isParagraphStyle(parameter) && state.paragraphStyleChangeEnabled) {
-            const styleName = StylesManager.getStyleNameWithoutPrefix(parameter);
+        if (StylesManager.isParagraphStyle(parameter.styleName) && state.paragraphStyleChangeEnabled) {
+            const styleName = StylesManager.getStyleNameWithoutPrefix(parameter.styleName);
             let paragraphStyle = this.control.modelManager.model.getParagraphStyleByName(styleName);
             if (!paragraphStyle) {
                 const presetStyle = StylesManager.getPresetParagraphStyleByName(styleName);
@@ -129564,12 +129778,12 @@ class ApplyStyleCommand extends CommandBase {
                 paragraphStyle = StylesManager.getPresetParagraphStyleByName(styleName).clone();
                 isPresetStyle = true;
             }
-            this.applyParagraphStyle(interval, paragraphStyle, isPresetStyle, options.subDocument);
+            this.applyParagraphStyle(subDocumentInterval, paragraphStyle, isPresetStyle, parameter.keepDirectFormatting);
         }
-        else if (!StylesManager.isParagraphStyle(parameter) && state.characterStyleChangeEnabled) {
-            const styleName = StylesManager.getStyleNameWithoutPrefix(parameter);
-            if (interval.length == 0)
-                interval = options.subDocument.getWholeWordInterval(interval.start);
+        else if (!StylesManager.isParagraphStyle(parameter.styleName) && state.characterStyleChangeEnabled) {
+            const styleName = StylesManager.getStyleNameWithoutPrefix(parameter.styleName);
+            if (subDocumentInterval.interval.length == 0)
+                subDocumentInterval.interval = options.subDocument.getWholeWordInterval(subDocumentInterval.interval.start);
             let characterStyle = this.control.modelManager.model.getCharacterStyleByName(styleName);
             if (!characterStyle) {
                 const presetStyle = StylesManager.getPresetCharacterStyleByName(styleName);
@@ -129578,9 +129792,9 @@ class ApplyStyleCommand extends CommandBase {
                 characterStyle = presetStyle.clone();
                 isPresetStyle = true;
             }
-            if (interval.length == 0) {
+            if (subDocumentInterval.interval.length == 0) {
                 if (isPresetStyle) {
-                    let fontInfo = characterStyle.maskedCharacterProperties.fontInfo;
+                    const fontInfo = characterStyle.maskedCharacterProperties.fontInfo;
                     if (fontInfo && fontInfo.measurer === undefined)
                         characterStyle.maskedCharacterProperties.fontInfo = this.control.modelManager.model.cache.fontInfoCache.getItemByName(fontInfo.name);
                 }
@@ -129588,50 +129802,56 @@ class ApplyStyleCommand extends CommandBase {
                 executed = false;
             }
             else
-                this.applyCharacterStyle(interval, characterStyle, isPresetStyle, options.subDocument);
+                this.applyCharacterStyle(subDocumentInterval, characterStyle, isPresetStyle);
         }
         this.history.endTransaction();
         return executed;
     }
-    applyCharacterStyle(interval, style, isPresetStyle, subDocument) {
+    applyCharacterStyle(subDocumentInterval, style, isPresetStyle) {
         if (ControlOptions.isEnabled(this.control.modelManager.richOptions.control.characterStyle)) {
-            this.modelManipulator.style.applyCharacterStyle(new SubDocumentInterval(subDocument, interval), isPresetStyle ? this.control.modelManager.model.stylesManager.addCharacterStyle(style) : style, false);
+            const characterStyle = isPresetStyle ? this.control.modelManager.model.stylesManager.addCharacterStyle(style) : style;
+            this.modelManipulator.style.applyCharacterStyle(subDocumentInterval, characterStyle, false);
         }
     }
-    applyParagraphStyle(interval, style, isPresetStyle, subDocument) {
-        var count = this.calculateAffectedParagraphCount(interval, subDocument);
+    applyParagraphStyle(subDocumentInterval, style, isPresetStyle, keepDirectFormatting = false) {
+        const count = this.calculateAffectedParagraphCount(subDocumentInterval);
         if (count > 0 && ControlOptions.isEnabled(this.control.modelManager.richOptions.control.paragraphStyle)) {
-            var paragraphIndex = search.SearchUtils.normedInterpolationIndexOf(subDocument.paragraphs, p => p.startLogPosition.value, interval.start);
-            for (var i = 0; i < count; i++) {
-                var paragraph = subDocument.paragraphs[paragraphIndex + i];
-                var paragraphInterval = new fixed.FixedInterval(paragraph.startLogPosition.value, paragraph.length);
-                var modelManipulator = this.modelManipulator;
-                this.history.addAndRedo(new ApplyParagraphStyleHistoryItem(modelManipulator, new SubDocumentInterval(subDocument, paragraphInterval), isPresetStyle ? modelManipulator.model.stylesManager.addParagraphStyle(style) : style));
-                this.history.addAndRedo(new ParagraphUseValueHistoryItem(modelManipulator, new SubDocumentInterval(subDocument, paragraphInterval), 0));
-                this.history.addAndRedo(new FontUseValueHistoryItem(modelManipulator, new SubDocumentInterval(subDocument, paragraphInterval), 0));
-                this.history.addAndRedo(new AddParagraphToListHistoryItem(this.modelManipulator, subDocument, paragraphIndex, NumberingList.NumberingListNotSettedIndex, -1));
+            const { interval, subDocument } = subDocumentInterval;
+            const paragraphs = subDocument.paragraphs;
+            const paragraphIndex = search.SearchUtils.normedInterpolationIndexOf(paragraphs, p => p.startLogPosition.value, interval.start);
+            for (let i = 0; i < count; i++) {
+                const paragraph = paragraphs[paragraphIndex + i];
+                const modelManipulator = this.modelManipulator;
+                const paragraphSubDocumentInterval = new SubDocumentInterval(subDocument, paragraph.interval);
+                style = isPresetStyle ? modelManipulator.model.stylesManager.addParagraphStyle(style) : style;
+                this.history.addAndRedo(new ApplyParagraphStyleHistoryItem(modelManipulator, paragraphSubDocumentInterval, style));
+                this.history.addAndRedo(new ParagraphUseValueHistoryItem(modelManipulator, paragraphSubDocumentInterval, 0));
+                if (!keepDirectFormatting)
+                    this.history.addAndRedo(new FontUseValueHistoryItem(modelManipulator, paragraphSubDocumentInterval, 0));
+                this.history.addAndRedo(new AddParagraphToListHistoryItem(modelManipulator, subDocument, paragraphIndex, NumberingList.NumberingListNotSettedIndex, -1));
             }
         }
         else
-            this.applyParagraphLinkedStyle(interval, style, isPresetStyle, subDocument);
+            this.applyParagraphLinkedStyle(subDocumentInterval, style, isPresetStyle);
     }
-    applyParagraphLinkedStyle(interval, style, isPresetStyle, subDocument) {
+    applyParagraphLinkedStyle(subDocumentInterval, style, isPresetStyle) {
         if (ControlOptions.isEnabled(this.control.modelManager.richOptions.control.characterStyle)) {
             if (!style.linkedStyle)
-                this.createCharacterStyle(style);
-            this.applyCharacterStyle(interval, style.linkedStyle, isPresetStyle, subDocument);
+                this.addLinkedCharacterStyle(style);
+            this.applyCharacterStyle(subDocumentInterval, style.linkedStyle, isPresetStyle);
         }
     }
-    createCharacterStyle(paragraphStyle) {
-        var style = new CharacterStyle(paragraphStyle.styleName + " Char", paragraphStyle.localizedName + " Char", false, false, false, false, paragraphStyle.maskedCharacterProperties);
+    addLinkedCharacterStyle(paragraphStyle) {
+        const style = new CharacterStyle(paragraphStyle.styleName + " Char", paragraphStyle.localizedName + " Char", false, false, false, false, paragraphStyle.maskedCharacterProperties);
         this.history.addAndRedo(new CreateStyleLinkHistoryItem(this.modelManipulator, style, paragraphStyle));
     }
-    calculateAffectedParagraphCount(interval, subDocument) {
-        var paragraphs = subDocument.getParagraphsByInterval(interval);
+    calculateAffectedParagraphCount(subDocumentInterval) {
+        const { interval, subDocument } = subDocumentInterval;
+        const paragraphs = subDocument.getParagraphsByInterval(interval);
         if (paragraphs.length > 1)
             return paragraphs.length;
-        var paragraph = paragraphs[0];
-        var lastParagraphCharSelected = interval.length >= paragraph.length - 1;
+        const paragraph = paragraphs[0];
+        const lastParagraphCharSelected = interval.length >= paragraph.length - 1;
         if (interval.start === paragraph.startLogPosition.value && lastParagraphCharSelected || interval.length === 0)
             return 1;
         return 0;
@@ -129647,6 +129867,57 @@ class ApplyStyleCommand extends CommandBase {
     }
 }
 
+;// CONCATENATED MODULE: ./src/common/commands/layout/toggle-allow-zoom-command.ts
+
+
+class ToggleAllowZoomCommand extends CommandBase {
+    getState() {
+        return new SimpleCommandState(this.isEnabled(), this.control.viewManager.allowZoom);
+    }
+    executeCore(_state, options) {
+        const allowZoom = this.control.viewManager.allowZoom;
+        if (options.param === allowZoom)
+            return false;
+        this.control.viewManager.allowZoom = !allowZoom;
+        return true;
+    }
+    isEnabledInReadOnlyMode() {
+        return true;
+    }
+}
+
+;// CONCATENATED MODULE: ./src/common/commands/layout/change-zoom-level-command.ts
+
+
+
+
+class ChangeZoomLevelCommand extends CommandBase {
+    getState() {
+        const state = new SimpleCommandState(this.isEnabled(), this.control.viewManager.zoomLevel);
+        state.visible = this.control.viewManager.allowZoom;
+        return state;
+    }
+    executeCore(_state, options) {
+        if (options.param == this.control.viewManager.zoomLevel)
+            return false;
+        this.control.viewManager.zoomLevel = options.param;
+        return true;
+    }
+    isEnabledInReadOnlyMode() {
+        return true;
+    }
+    isEnabled() {
+        return this.control.viewManager.allowZoom;
+    }
+    DEPRECATEDConvertOptionsParameter(parameter) {
+        const res = typeof parameter == "string" ? parseFloat(parameter) : parameter;
+        return this.isZoomLevelValueCorrect(res) ? res : this.control.viewManager.zoomLevel;
+    }
+    isZoomLevelValueCorrect(size) {
+        return (0,common.isNumber)(size) && !isNaN(size) && size >= RichUtils.minZoomLevel && size <= RichUtils.maxZoomLevel;
+    }
+}
+
 ;// CONCATENATED MODULE: ./src/common/commands/layout/clear-formatting-command.ts
 
 
@@ -136127,24 +136398,30 @@ class RemoveNextWordCommand extends RemoveWordCommandBase {
 
 
 class SetParagraphLevelCommandBase extends CommandBase {
+    get commandManager() { return this.control.commandManager; }
+    get modelManager() { return this.control.modelManager; }
     isEnabled() {
-        return super.isEnabled() && ControlOptions.isEnabled(this.control.modelManager.richOptions.control.paragraphFormatting);
+        return super.isEnabled() && ControlOptions.isEnabled(this.modelManager.richOptions.control.paragraphFormatting);
     }
     getState() {
         const state = new SimpleCommandState(this.isEnabled());
-        state.value = this.control.commandManager.getCommand(RichEditClientCommand.ChangeHeadingLevel).getState().value == this.getLevel(null);
+        state.value = this.commandManager.getCommand(RichEditClientCommand.ChangeHeadingLevel).getState().value == this.getLevel(null);
         return state;
     }
     executeCore(_state, options) {
         const level = this.getLevel(options.param);
         const styleName = level > 0 ? `${ParagraphStyle.headingStyleName} ${level}` : ParagraphStyle.normalStyleName;
-        let paragraphStyle = this.control.modelManager.model.getParagraphStyleByName(styleName);
+        let paragraphStyle = this.modelManager.model.getParagraphStyleByName(styleName);
         if (!paragraphStyle)
             paragraphStyle = StylesManager.getPresetParagraphStyleByName(styleName);
-        if (paragraphStyle)
-            this.control.commandManager.getCommand(RichEditClientCommand.ChangeStyle).execute(this.control.commandManager.isPublicApiCall, new CommandSimpleOptions(this.control, StylesManager.paragraphPrefix + styleName));
-        else
-            this.control.commandManager.getCommand(RichEditClientCommand.ChangeHeadingLevel).execute(this.control.commandManager.isPublicApiCall, new CommandSimpleOptions(this.control, level));
+        if (paragraphStyle) {
+            const commandOptions = new CommandSimpleOptions(this.control, { styleName: StylesManager.paragraphPrefix + styleName, keepDirectFormatting: true });
+            this.commandManager.getCommand(RichEditClientCommand.ChangeStyle).execute(this.commandManager.isPublicApiCall, commandOptions);
+        }
+        else {
+            const commandOptions = new CommandSimpleOptions(this.control, level);
+            this.commandManager.getCommand(RichEditClientCommand.ChangeHeadingLevel).execute(this.commandManager.isPublicApiCall, commandOptions);
+        }
         return true;
     }
     getRelatedCommands() {
@@ -136399,6 +136676,8 @@ class UndoCommand extends CommandBase {
 
 
 
+
+
 
 
 
@@ -136784,6 +137063,8 @@ class CommandManager {
         this.createCommand(control, RichEditClientCommand.ChangeViewType, ChangeViewTypeCommand);
         this.createCommand(control, RichEditClientCommand.SwitchToSimpleView, SwitchToSimpleViewCommand);
         this.createCommand(control, RichEditClientCommand.SwitchToPrintLayoutView, SwitchToPrintLayoutViewCommand);
+        this.createCommand(control, RichEditClientCommand.ChangeZoomLevel, ChangeZoomLevelCommand);
+        this.createCommand(control, RichEditClientCommand.ToggleAllowZoom, ToggleAllowZoomCommand);
         this.createCommand(control, RichEditClientCommand.ShowErrorLoadPictureMessage, ShowLoadPictureErrorDialogCommand);
         this.assingCommand(RichEditClientCommand.PrintDocumentOnClient, new PrintDocumentOnClient(control, printNonce));
     }
@@ -140811,8 +141092,8 @@ class DialogManager {
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/__internal/core/utils/m_type.js
 /**
  * DevExtreme (esm/__internal/core/utils/m_type.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -140914,8 +141195,8 @@ const isEvent = function(object) {
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/core/utils/type.js
 /**
  * DevExtreme (esm/core/utils/type.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -140925,8 +141206,8 @@ const isEvent = function(object) {
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/__internal/core/utils/m_extend.js
 /**
  * DevExtreme (esm/__internal/core/utils/m_extend.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -140984,8 +141265,8 @@ const extend = function(target) {
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/core/utils/extend.js
 /**
  * DevExtreme (esm/core/utils/extend.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -140995,8 +141276,8 @@ const extend = function(target) {
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/__internal/core/utils/m_string.js
 /**
  * DevExtreme (esm/__internal/core/utils/m_string.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -141071,8 +141352,8 @@ const isEmpty = function() {
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/core/utils/string.js
 /**
  * DevExtreme (esm/core/utils/string.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -141082,20 +141363,20 @@ const isEmpty = function() {
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/core/version.js
 /**
  * DevExtreme (esm/core/version.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
  */
-const version = "24.2.6";
-const fullVersion = "24.2.6";
+const version = "25.1.1";
+const fullVersion = "25.1.1";
 
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/__internal/core/utils/m_console.js
 /**
  * DevExtreme (esm/__internal/core/utils/m_console.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -141135,8 +141416,8 @@ const debug = function() {
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/__internal/core/utils/m_error.js
 /**
  * DevExtreme (esm/__internal/core/utils/m_error.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -141207,8 +141488,8 @@ function error(baseErrors, errors) {
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/core/utils/error.js
 /**
  * DevExtreme (esm/core/utils/error.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -141219,8 +141500,8 @@ function error(baseErrors, errors) {
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/__internal/core/m_errors.js
 /**
  * DevExtreme (esm/__internal/core/m_errors.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -141286,8 +141567,8 @@ function error(baseErrors, errors) {
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/core/errors.js
 /**
  * DevExtreme (esm/core/errors.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -141298,8 +141579,8 @@ function error(baseErrors, errors) {
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/__internal/core/m_class.js
 /**
  * DevExtreme (esm/__internal/core/m_class.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -141432,8 +141713,8 @@ classImpl.abstract = m_class_abstract;
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/core/class.js
 /**
  * DevExtreme (esm/core/class.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -141444,8 +141725,8 @@ classImpl.abstract = m_class_abstract;
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/__internal/core/utils/m_iterator.js
 /**
  * DevExtreme (esm/__internal/core/utils/m_iterator.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -141494,8 +141775,8 @@ const reverseEach = (array, callback) => {
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/__internal/core/utils/m_dependency_injector.js
 /**
  * DevExtreme (esm/__internal/core/utils/m_dependency_injector.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -141544,8 +141825,8 @@ function injector(object) {
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/core/utils/dependency_injector.js
 /**
  * DevExtreme (esm/core/utils/dependency_injector.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -141556,8 +141837,8 @@ function injector(object) {
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/common/core/localization/ldml/date.formatter.js
 /**
  * DevExtreme (esm/common/core/localization/ldml/date.formatter.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -141710,8 +141991,8 @@ function _extends() {
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/__internal/core/m_config.js
 /**
  * DevExtreme (esm/__internal/core/m_config.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -141786,8 +142067,8 @@ if ("undefined" !== typeof DevExpress && DevExpress.config) {
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/common/config.js
 /**
  * DevExtreme (esm/common/config.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -141798,8 +142079,8 @@ if ("undefined" !== typeof DevExpress && DevExpress.config) {
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/__internal/core/m_guid.js
 /**
  * DevExtreme (esm/__internal/core/m_guid.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -141841,8 +142122,8 @@ const Guid = core_class.inherit({
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/common/guid.js
 /**
  * DevExtreme (esm/common/guid.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -141853,8 +142134,8 @@ const Guid = core_class.inherit({
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/__internal/core/templates/m_template_engine_registry.js
 /**
  * DevExtreme (esm/__internal/core/templates/m_template_engine_registry.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -141883,8 +142164,8 @@ function getCurrentTemplateEngine() {
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/core/templates/template_engine_registry.js
 /**
  * DevExtreme (esm/core/templates/template_engine_registry.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -141894,8 +142175,8 @@ function getCurrentTemplateEngine() {
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/__internal/core/m_set_template_engine.js
 /**
  * DevExtreme (esm/__internal/core/m_set_template_engine.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -141905,8 +142186,8 @@ function getCurrentTemplateEngine() {
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/common/set_template_engine.js
 /**
  * DevExtreme (esm/common/set_template_engine.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -141917,8 +142198,8 @@ function getCurrentTemplateEngine() {
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/common.js
 /**
  * DevExtreme (esm/common.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -141931,8 +142212,8 @@ function getCurrentTemplateEngine() {
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/core/config.js
 /**
  * DevExtreme (esm/core/config.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -141943,8 +142224,8 @@ function getCurrentTemplateEngine() {
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/core/guid.js
 /**
  * DevExtreme (esm/core/guid.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -141955,8 +142236,8 @@ function getCurrentTemplateEngine() {
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/core/utils/console.js
 /**
  * DevExtreme (esm/core/utils/console.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -141966,8 +142247,8 @@ function getCurrentTemplateEngine() {
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/__internal/core/utils/m_variable_wrapper.js
 /**
  * DevExtreme (esm/__internal/core/utils/m_variable_wrapper.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -141996,8 +142277,8 @@ const m_variable_wrapper_variableWrapper = dependency_injector({
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/core/utils/variable_wrapper.js
 /**
  * DevExtreme (esm/core/utils/variable_wrapper.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -142008,8 +142289,8 @@ const m_variable_wrapper_variableWrapper = dependency_injector({
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/__internal/core/utils/m_object.js
 /**
  * DevExtreme (esm/__internal/core/utils/m_object.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -142109,8 +142390,8 @@ const m_object_deepExtendArraySafe = function(target, changes, extendComplexObje
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/core/utils/object.js
 /**
  * DevExtreme (esm/core/utils/object.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -142120,8 +142401,8 @@ const m_object_deepExtendArraySafe = function(target, changes, extendComplexObje
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/__internal/core/utils/m_data.js
 /**
  * DevExtreme (esm/__internal/core/utils/m_data.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -142317,8 +142598,8 @@ const toComparable = function(value, caseSensitive) {
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/core/utils/data.js
 /**
  * DevExtreme (esm/core/utils/data.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -142328,8 +142609,8 @@ const toComparable = function(value, caseSensitive) {
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/__internal/core/utils/m_callbacks.js
 /**
  * DevExtreme (esm/__internal/core/utils/m_callbacks.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -142424,8 +142705,8 @@ const Callbacks = function(options) {
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/core/utils/callbacks.js
 /**
  * DevExtreme (esm/core/utils/callbacks.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -142436,8 +142717,8 @@ const Callbacks = function(options) {
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/__internal/core/utils/m_deferred.js
 /**
  * DevExtreme (esm/__internal/core/utils/m_deferred.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -142602,8 +142883,8 @@ function when() {
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/core/utils/deferred.js
 /**
  * DevExtreme (esm/core/utils/deferred.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -142613,8 +142894,8 @@ function when() {
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/__internal/core/utils/m_common.js
 /**
  * DevExtreme (esm/__internal/core/utils/m_common.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -142909,8 +143190,8 @@ const equalByValue = function(value1, value2) {
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/core/utils/common.js
 /**
  * DevExtreme (esm/core/utils/common.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -142920,8 +143201,8 @@ const equalByValue = function(value1, value2) {
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/__internal/core/utils/m_math.js
 /**
  * DevExtreme (esm/__internal/core/utils/m_math.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -143090,8 +143371,8 @@ function roundFloatPart(value) {
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/core/utils/math.js
 /**
  * DevExtreme (esm/core/utils/math.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -143101,8 +143382,8 @@ function roundFloatPart(value) {
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/common/core/localization/utils.js
 /**
  * DevExtreme (esm/common/core/localization/utils.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -143129,8 +143410,8 @@ function toFixed(value, precision) {
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/common/core/localization/ldml/number.js
 /**
  * DevExtreme (esm/common/core/localization/ldml/number.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -143371,8 +143652,8 @@ function getFormat(formatter) {
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/common/core/localization/currency.js
 /**
  * DevExtreme (esm/common/core/localization/currency.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -143404,8 +143685,8 @@ function getFormat(formatter) {
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/common/core/localization/cldr-data/parent_locales.js
 /**
  * DevExtreme (esm/common/core/localization/cldr-data/parent_locales.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -143590,8 +143871,8 @@ function getFormat(formatter) {
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/common/core/localization/parentLocale.js
 /**
  * DevExtreme (esm/common/core/localization/parentLocale.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -143608,8 +143889,8 @@ const PARENT_LOCALE_SEPARATOR = "-";
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/common/core/localization/core.js
 /**
  * DevExtreme (esm/common/core/localization/core.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -143650,8 +143931,8 @@ const DEFAULT_LOCALE = "en";
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/common/core/localization/open_xml_currency_format.js
 /**
  * DevExtreme (esm/common/core/localization/open_xml_currency_format.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -143693,8 +143974,8 @@ const DEFAULT_LOCALE = "en";
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/common/core/localization/cldr-data/accounting_formats.js
 /**
  * DevExtreme (esm/common/core/localization/cldr-data/accounting_formats.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -144280,8 +144561,8 @@ const DEFAULT_LOCALE = "en";
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/common/core/localization/intl/number.js
 /**
  * DevExtreme (esm/common/core/localization/intl/number.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -144364,7 +144645,8 @@ const getCurrencyFormatter = currency => new Intl.NumberFormat(core.locale(), {
         if (!format || "function" !== typeof format && !format.type && !format.formatter) {
             return intl_number_getFormatter(format)(value)
         }
-        return this.callBase.apply(this, arguments)
+        const result = this.callBase.apply(this, arguments);
+        return result
     },
     _getCurrencySymbolInfo: function(currency) {
         const formatter = getCurrencyFormatter(currency);
@@ -144401,8 +144683,8 @@ const getCurrencyFormatter = currency => new Intl.NumberFormat(core.locale(), {
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/common/core/localization/number.js
 /**
  * DevExtreme (esm/common/core/localization/number.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -144634,7 +144916,9 @@ const numberLocalization = dependency_injector({
         if (!numberConfig) {
             const formatterConfig = this._getSeparators();
             formatterConfig.unlimitedIntegerDigits = format.unlimitedIntegerDigits;
-            return this.convertDigits(number_getFormatter(format.type, formatterConfig)(value))
+            const formatter = number_getFormatter(format.type, formatterConfig)(value);
+            const result = this.convertDigits(formatter);
+            return result
         }
         return this._formatNumber(value, numberConfig, format)
     },
@@ -144707,8 +144991,8 @@ if (hasIntl) {
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/common/core/localization/ldml/date.format.js
 /**
  * DevExtreme (esm/common/core/localization/ldml/date.format.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -144905,8 +145189,8 @@ const date_format_getFormat = function(formatter) {
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/common/core/localization/ldml/date.parser.js
 /**
  * DevExtreme (esm/common/core/localization/ldml/date.parser.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -145224,8 +145508,8 @@ const getParser = function(format, dateParts) {
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/common/core/localization/default_date_names.js
 /**
  * DevExtreme (esm/common/core/localization/default_date_names.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -145261,8 +145545,8 @@ const cutCaptions = (captions, format) => {
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/common/core/localization/cldr-data/first_day_of_week_data.js
 /**
  * DevExtreme (esm/common/core/localization/cldr-data/first_day_of_week_data.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -145461,8 +145745,8 @@ const cutCaptions = (captions, format) => {
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/common/core/localization/intl/date.js
 /**
  * DevExtreme (esm/common/core/localization/intl/date.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -145779,8 +146063,8 @@ const monthNameStrategies = {
 ;// CONCATENATED MODULE: ./node_modules/devextreme/esm/common/core/localization/date.js
 /**
  * DevExtreme (esm/common/core/localization/date.js)
- * Version: 24.2.6
- * Build date: Mon Mar 17 2025
+ * Version: 25.1.1-alpha
+ * Build date: Wed Apr 02 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -146310,6 +146594,10 @@ class Settings {
         if ((0,common.isDefined)(settings.view)) {
             if ((0,common.isDefined)(settings.view.viewType))
                 result.view.viewType = settings.view.viewType;
+            if ((0,common.isDefined)(settings.view.zoomLevel))
+                result.view.zoomLevel = settings.view.zoomLevel;
+            if ((0,common.isDefined)(settings.view.allowZoom))
+                result.view.allowZoom = settings.view.allowZoom;
             if ((0,common.isDefined)(settings.view.simpleViewSettings)) {
                 const paddings = settings.view.simpleViewSettings.paddings;
                 if ((0,common.isDefined)(paddings)) {
@@ -146985,6 +147273,7 @@ var external_DevExpress_config_default = /*#__PURE__*/__webpack_require__.n(exte
 
 
 
+
 
 
 class ClientRichEdit {
@@ -147017,7 +147306,7 @@ class ClientRichEdit {
         this.contextMenuSettings = settings.contextMenuSettings;
         this.fullScreenHelper = new FullScreenHelper(element);
         if (true)
-            external_DevExpress_config_default()(JSON.parse(atob('eyJsaWNlbnNlS2V5IjoiZXdvZ0lDSm1iM0p0WVhRaU9pQXhMQW9nSUNKcGJuUmxjbTVoYkZWellXZGxTV1FpT2lBaVZqWlNVWEpJWkdZelVXRmlNbGQ1YldsWlpIZFlUU0lLZlE9PS53aEFZRnYvUVRDWlVKalVITm14M25DLzVnWE9aV09wQmFYbm9JMlg1MHJadTdrbm9Mc2lIRUs0REoyZWlQZi9tSEExRk9ySlltanFtSWdKWTZpQ2prSTVtYlVnN1N6ZEI0SUIvektuMTdlQlRUQit0YThVZDNzSThNK3NES2ZRd3NMNU5tdz09In0=')));
+            external_DevExpress_config_default()(JSON.parse(atob('eyJsaWNlbnNlS2V5IjoiZXdvZ0lDSm1iM0p0WVhRaU9pQXhMQW9nSUNKcGJuUmxjbTVoYkZWellXZGxTV1FpT2lBaVJWTTBSVlk0YmxKaVpYVk9OVGRWVEdSbFlVeHhZeUlLZlE9PS5MN1o0YXlNMTRnUWtScExSaEt6MGZSMDU5d1E5cWhhMi9ESThnRG83SEJxbFM2L1BMNVRtTmRrTVRzMmdUL3oyUFVQZDgyZGRMM0dsbjZiQUM0aXB4cUI0Y1ozT1FkZjhVc1pmMm9TOCs5SnliZGdCS1diYnFseXdEMUVFbkwwNmV0eWdtQT09In0=')));
         this.prepareElement(element, settings);
         this.initDefaultFontsAndStyles();
         this.initBars(settings.ribbon, settings.fonts);
@@ -147121,6 +147410,7 @@ class ClientRichEdit {
         options.fonts = settings.fonts;
         options.spellChecker = settings.spellCheck;
         options.nonce = settings.nonce;
+        options.control.allowZoom = settings.view.allowZoom ? DocumentCapability.Enabled : DocumentCapability.Disabled;
         this.core = new ClientRichEditCore(this, this.name, this.element, Math.random().toString(), settings.readOnly, this.barHolder, settings.unit, this.rulerSettings, options, settings.view, this.getStringResources());
     }
     initCore() {
@@ -148153,6 +148443,18 @@ function executeApiCommandCore(commandManager, commandId, parameter) {
         case ViewTabCommandId.ToggleFullScreen:
             parameter = undefined;
             break;
+        case ViewTabCommandId.ChangeZoomLevel:
+            {
+                const zoomLevel = ApiParametersChecker.check(parameter, 2, false, [
+                    ApiParametersChecker.numberDescriptor('parameter', val => val)
+                ]);
+                parameter = zoomLevel;
+                break;
+            }
+            ;
+        case ViewTabCommandId.ToggleAllowZoom:
+            parameter = undefined;
+            break;
         case HeaderAndFooterTabCommandId.GoToPageHeader:
             parameter = undefined;
             break;
@@ -149344,6 +149646,8 @@ external_DevExpress_trial_default().registerTrialPanelComponents();
 
 
 
+
+
 
 
 
@@ -149527,6 +149831,25 @@ class RichEditPublic {
     }
     get hasUnsavedChanges() { return !this._native.documentSaved; }
     set hasUnsavedChanges(value) { this._native.documentSaved = !value; }
+    get zoomLevel() {
+        return this._native.core.viewManager.zoomLevel;
+    }
+    set zoomLevel(value) {
+        const zoomLevelValue = ApiParametersChecker.check(value, 1, false, [
+            ApiParametersChecker.numberDescriptor('value', val => val, RichUtils.minZoomLevel, RichUtils.maxZoomLevel, true)
+        ]);
+        this._native.core.viewManager.zoomLevel = zoomLevelValue;
+        this._native.core.barHolder.forceUpdate({ [RichEditClientCommand.ChangeZoomLevel]: true });
+    }
+    get allowZoom() {
+        return this._native.core.viewManager.allowZoom;
+    }
+    set allowZoom(value) {
+        const allowZoomValue = ApiParametersChecker.check(value, 1, false, [
+            ApiParametersChecker.booleanDescriptor('value', val => val)
+        ]);
+        this._native.core.viewManager.allowZoom = allowZoomValue;
+    }
     newDocument() {
         this._native.core.commandManager.getCommand(RichEditClientCommand.CreateNewDocumentLocally)
             .execute(true);
@@ -150018,6 +150341,8 @@ function createOptions() {
             showBrackets: true,
         },
         view: {
+            zoomLevel: 1.0,
+            allowZoom: true,
             simpleViewSettings: {
                 paddings: {
                     left: 15,