devexpress-richedit 24.2.7-build-25079-0118 → 25.1.1-alpha

package/index.d.ts

@@ -1,6 +1,6 @@
 /**
 * DevExpress WebRichEdit (index.d.ts)
-* Version: 24.2.7
+* Version: 25.1.1
 * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
 * License: https://www.devexpress.com/Support/EULAs
 */

package/index.js

@@ -1,6 +1,6 @@
 /**
 * DevExpress WebRichEdit (index.js)
-* Version: 24.2.7
+* Version: 25.1.1
 * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
 * License: https://www.devexpress.com/Support/EULAs
 */

package/lib/client/_constants.d.ts

@@ -74,6 +74,7 @@ export declare class Constants {
         "4": number;
     }[];
     static getFontSizesList(): number[];
+    static getZoomLevelsList(): number[];
     static getParagraphStylesList(): string[];
     static getTableStylesList(): string[];
     private static localizedDefaultPresetStyles;

package/lib/client/_constants.js

@@ -6,6 +6,9 @@ export 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 => {

package/lib/client/bars/ribbon.d.ts

@@ -13,6 +13,7 @@ export declare class ClientRibbonBar extends RibbonBarBase implements IRibbonBar
     private _toolbarItemsCache;
     private ownerElement;
     private activeItem;
+    private focusHandler;
     constructor(ownerControl: IControlOwner, ownerElement: HTMLElement, apiRibbon: ApiRibbon, fonts: FontsSettings);
     protected updateContextItem(_commandKey: RichEditClientCommand): void;
     onCanvasMouseDown(): void;

package/lib/client/bars/ribbon.js

@@ -6,6 +6,7 @@ import { ListUtils } from '@devexpress/utils/lib/utils/list';
 import { StringMapUtils } from '@devexpress/utils/lib/utils/map/string';
 import { createInnerTab } from '../public/ribbon/creator';
 import { SizeUtils } from '../../common/utils/size-utils';
+import { FocusHelper } from '../utils/focus-helper';
 export class ClientRibbonBar extends RibbonBarBase {
     constructor(ownerControl, ownerElement, apiRibbon, fonts) {
         var _a;
@@ -14,6 +15,7 @@ export 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) {
     }
@@ -39,13 +41,13 @@ export 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);

package/lib/client/bars/rich-edit-ribbon/ribbon-items-data.js

@@ -16,6 +16,7 @@ export class RibbonItemsData {
         const fontSizes = Constants.getFontSizesList().map(s => {
             return { text: s.toString(), value: s };
         });
+        const zoomLevels = Constants.getZoomLevelsList();
         function getTrimmedMessage(id) {
             const message = formatMessage(id);
             const trimmedFromEnd = StringUtils.trimEnd(message, ['\\.']);
@@ -276,6 +277,16 @@ export class RibbonItemsData {
             { type: 'Button', text: formatMessage('XtraRichEditStringId.MenuCmd_SwitchToPrintLayoutView'), icon: 'dxre-icon-PrintLayoutView', alwaysShowText: true, name: Command.SwitchToPrintLayoutView, isToggleMode: true },
             { type: 'Button', text: formatMessage('XtraRichEditStringId.MenuCmd_ToggleShowHorizontalRuler'), icon: 'dxre-icon-RulerHorizontal', alwaysShowText: true, name: Command.ToggleShowHorizontalRuler, isToggleMode: true, beginGroup: true },
             { type: 'Button', text: formatMessage('ASPxRichEditStringId.MenuCmd_ToggleFullScreen'), icon: 'dxre-icon-FullScreen', alwaysShowText: true, name: Command.FullScreen, isToggleMode: true, beginGroup: true },
+            { type: 'SelectBox', dataSource: zoomLevels, width: 90, name: Command.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: formatMessage('ASPxRichEditStringId.PageFile'), items: fileToolBarItems, id: RibbonTabType.File },

package/lib/client/client-rich-edit.js

@@ -32,6 +32,7 @@ import { RulerVisibility } from '../common/ui/ruler/settings';
 import { FullScreenHelper } from './ui/full-screen-helper';
 import config from 'devextreme/core/config';
 import { SizeUtils } from '../common/utils/size-utils';
+import { DocumentCapability } from '../common/model/options/control';
 export class ClientRichEdit {
     get clientQuickSearchPanel() {
         if (!this._clientQuickSearchPanel)
@@ -61,8 +62,8 @@ export class ClientRichEdit {
         this.rawDataSource = settings.rawDataSource;
         this.contextMenuSettings = settings.contextMenuSettings;
         this.fullScreenHelper = new FullScreenHelper(element);
-        if ("eyJsaWNlbnNlS2V5IjoiZXdvZ0lDSm1iM0p0WVhRaU9pQXhMQW9nSUNKcGJuUmxjbTVoYkZWellXZGxTV1FpT2lBaVZqWlNVWEpJWkdZelVXRmlNbGQ1YldsWlpIZFlUU0lLZlE9PS53aEFZRnYvUVRDWlVKalVITm14M25DLzVnWE9aV09wQmFYbm9JMlg1MHJadTdrbm9Mc2lIRUs0REoyZWlQZi9tSEExRk9ySlltanFtSWdKWTZpQ2prSTVtYlVnN1N6ZEI0SUIvektuMTdlQlRUQit0YThVZDNzSThNK3NES2ZRd3NMNU5tdz09In0=")
-            config(JSON.parse(atob("eyJsaWNlbnNlS2V5IjoiZXdvZ0lDSm1iM0p0WVhRaU9pQXhMQW9nSUNKcGJuUmxjbTVoYkZWellXZGxTV1FpT2lBaVZqWlNVWEpJWkdZelVXRmlNbGQ1YldsWlpIZFlUU0lLZlE9PS53aEFZRnYvUVRDWlVKalVITm14M25DLzVnWE9aV09wQmFYbm9JMlg1MHJadTdrbm9Mc2lIRUs0REoyZWlQZi9tSEExRk9ySlltanFtSWdKWTZpQ2prSTVtYlVnN1N6ZEI0SUIvektuMTdlQlRUQit0YThVZDNzSThNK3NES2ZRd3NMNU5tdz09In0=")));
+        if ("eyJsaWNlbnNlS2V5IjoiZXdvZ0lDSm1iM0p0WVhRaU9pQXhMQW9nSUNKcGJuUmxjbTVoYkZWellXZGxTV1FpT2lBaVJWTTBSVlk0YmxKaVpYVk9OVGRWVEdSbFlVeHhZeUlLZlE9PS5MN1o0YXlNMTRnUWtScExSaEt6MGZSMDU5d1E5cWhhMi9ESThnRG83SEJxbFM2L1BMNVRtTmRrTVRzMmdUL3oyUFVQZDgyZGRMM0dsbjZiQUM0aXB4cUI0Y1ozT1FkZjhVc1pmMm9TOCs5SnliZGdCS1diYnFseXdEMUVFbkwwNmV0eWdtQT09In0=")
+            config(JSON.parse(atob("eyJsaWNlbnNlS2V5IjoiZXdvZ0lDSm1iM0p0WVhRaU9pQXhMQW9nSUNKcGJuUmxjbTVoYkZWellXZGxTV1FpT2lBaVJWTTBSVlk0YmxKaVpYVk9OVGRWVEdSbFlVeHhZeUlLZlE9PS5MN1o0YXlNMTRnUWtScExSaEt6MGZSMDU5d1E5cWhhMi9ESThnRG83SEJxbFM2L1BMNVRtTmRrTVRzMmdUL3oyUFVQZDgyZGRMM0dsbjZiQUM0aXB4cUI0Y1ozT1FkZjhVc1pmMm9TOCs5SnliZGdCS1diYnFseXdEMUVFbkwwNmV0eWdtQT09In0=")));
         this.prepareElement(element, settings);
         this.initDefaultFontsAndStyles();
         this.initBars(settings.ribbon, settings.fonts);
@@ -166,6 +167,7 @@ export 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() {

package/lib/client/commands/commands.js

@@ -432,6 +432,18 @@ export 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;

package/lib/client/i-rich-constructor-settings.d.ts

@@ -52,6 +52,8 @@ export interface IRichEditConfirmOnLosingChangesSettings {
     message?: string;
 }
 export interface IRichEditViewSettings {
+    zoomLevel?: number;
+    allowZoom?: boolean;
     viewType?: ViewType;
     simpleViewSettings?: IRichEditSimpleViewSettings;
     printLayoutViewSettings?: IRichEditPrintLayoutViewSettings;

package/lib/client/model-api/api-utils/parameter-checker.d.ts

@@ -11,7 +11,7 @@ export declare class ApiParametersChecker {
     static check<TResult>(value: any, parameterIndex: ArgsCheckerParameterIndex, canBeUndefined: boolean, pairs: Array<ApiParameterDescriptor<any, TResult>>): TResult;
     static showErrorString<TResult>(parameterIndex: number, canBeUndefined: boolean, pairs: Array<ApiParameterDescriptor<any, TResult>>): string;
     static defaultDescriptor<TResult>(getResult: () => TResult): ApiParameterDescriptor<any, TResult>;
-    static numberDescriptor<TResult>(parameterName: string, getResult: (value: number) => TResult, minBound?: number, maxBound?: number): ApiParameterDescriptor<number, TResult>;
+    static numberDescriptor<TResult>(parameterName: string, getResult: (value: number) => TResult, minBound?: number, maxBound?: number, closedMaxBound?: boolean): ApiParameterDescriptor<number, TResult>;
     static booleanDescriptor<TResult>(parameterName: string, getResult: (value: boolean) => TResult): ApiParameterDescriptor<boolean, TResult>;
     static arrayDescriptor<TResult, ArrayContentType>(parameterName: string, getResult: (value: ArrayContentType[]) => TResult): ApiParameterDescriptor<ArrayContentType[], TResult>;
     static functionDescriptor<TResult>(parameterName: string, getResult: (value: any) => TResult): ApiParameterDescriptor<() => void, TResult>;

package/lib/client/model-api/api-utils/parameter-checker.js

@@ -66,8 +66,8 @@ export class ApiParametersChecker {
     static defaultDescriptor(getResult) {
         return new ApiParameterDescriptor('', '', () => true, getResult);
     }
-    static numberDescriptor(parameterName, getResult, minBound = Constants.MIN_SAFE_INTEGER, maxBound = Constants.MAX_SAFE_INTEGER) {
-        return new ApiParameterDescriptor(parameterName, `number on interval [${minBound}, ${maxBound}]`, (value) => isNumber(value) && (value >= minBound && value < maxBound), getResult);
+    static numberDescriptor(parameterName, getResult, minBound = Constants.MIN_SAFE_INTEGER, maxBound = Constants.MAX_SAFE_INTEGER, closedMaxBound = false) {
+        return new ApiParameterDescriptor(parameterName, `number on interval [${minBound}, ${maxBound}]`, (value) => isNumber(value) && (value >= minBound && (closedMaxBound ? value <= maxBound : value < maxBound)), getResult);
     }
     static booleanDescriptor(parameterName, getResult) {
         return new ApiParameterDescriptor(parameterName, 'boolean', (value) => typeof value === 'boolean', getResult);

package/lib/client/public/commands/enum.d.ts

@@ -149,7 +149,9 @@ export declare enum ViewTabCommandId {
     SwitchToSimpleView = 405,
     SwitchToPrintLayout = 406,
     ToggleShowHorizontalRuler = 94,
-    ToggleFullScreen = 98
+    ToggleFullScreen = 98,
+    ChangeZoomLevel = 460,
+    ToggleAllowZoom = 461
 }
 export declare enum HeaderAndFooterTabCommandId {
     GoToPageHeader = 227,

package/lib/client/public/commands/enum.js

@@ -157,6 +157,8 @@ export 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 = {}));
 export var HeaderAndFooterTabCommandId;
 (function (HeaderAndFooterTabCommandId) {

package/lib/client/public/options.d.ts

@@ -75,6 +75,8 @@ export interface IConfirmOnLosingChangesSettings {
     message?: string;
 }
 export interface IViewSettings {
+    zoomLevel?: number;
+    allowZoom?: boolean;
     viewType?: ViewType;
     simpleViewSettings?: ISimpleViewSettings;
     printLayoutViewSettings?: IPrintLayoutViewSettings;

package/lib/client/public/options.js

@@ -34,6 +34,8 @@ export function createOptions() {
             showBrackets: true,
         },
         view: {
+            zoomLevel: 1.0,
+            allowZoom: true,
             simpleViewSettings: {
                 paddings: {
                     left: 15,

package/lib/client/public/rich-edit.d.ts

@@ -80,6 +80,10 @@ declare class RichEditPublic {
     set documentExtension(filePath: string);
     get hasUnsavedChanges(): boolean;
     set hasUnsavedChanges(value: boolean);
+    get zoomLevel(): number;
+    set zoomLevel(value: number);
+    get allowZoom(): boolean;
+    set allowZoom(value: boolean);
     newDocument(): void;
     openDocument(fileContent?: File | Blob | ArrayBuffer | string, documentName?: string, documentFormat?: DocumentFormatApi, callback?: (importSuccess: boolean) => void): void;
     saveDocument(documentFormat?: DocumentFormatApi, reason?: string, documentName?: string): void;

package/lib/client/public/rich-edit.js

@@ -42,6 +42,8 @@ import { DocumentProcessorApi } from './document-processor';
 import { NusaSettings } from './nusa/settings';
 import { Utils } from './utils';
 import '../../common/utils/_license';
+import { ApiParametersChecker } from '../model-api/api-utils/parameter-checker';
+import { RichUtils } from '../../common/model/rich-utils';
 class RichEditPublic {
     get events() { return this._native.events; }
     constructor(htmlElement, options) {
@@ -222,6 +224,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);

package/lib/client/ribbon/i-toolbar-item-options.d.ts

@@ -42,7 +42,7 @@ export interface IToolbarSelectBoxItemOptions extends IToolbarItemOptionsBase, I
     dataSource: any;
     icon?: string;
     width?: any;
-    displayExpr?: string;
+    displayExpr?: any;
     valueExpr?: string;
     value?: any;
     valueType?: string;

package/lib/client/settings.js

@@ -183,6 +183,10 @@ export class Settings {
         if (isDefined(settings.view)) {
             if (isDefined(settings.view.viewType))
                 result.view.viewType = settings.view.viewType;
+            if (isDefined(settings.view.zoomLevel))
+                result.view.zoomLevel = settings.view.zoomLevel;
+            if (isDefined(settings.view.allowZoom))
+                result.view.allowZoom = settings.view.allowZoom;
             if (isDefined(settings.view.simpleViewSettings)) {
                 const paddings = settings.view.simpleViewSettings.paddings;
                 if (isDefined(paddings)) {

package/lib/client/utils/focus-helper.d.ts

@@ -0,0 +1,4 @@
+import { IDisposable } from "@devexpress/utils/lib/types";
+export declare class FocusHelper {
+    static preventFocusOnClick(element: HTMLElement): IDisposable;
+}

package/lib/client/utils/focus-helper.js

@@ -0,0 +1,36 @@
+export 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;
+        }
+    }
+}

package/lib/common/canvas/canvas-manager.d.ts

@@ -3,8 +3,10 @@ import { LayoutPoint } from '../layout/layout-point';
 import { BatchUpdatableObject } from '@devexpress/utils/lib/class/batch-updatable';
 import { IEventManager } from '../interfaces/i-event-manager';
 import { CursorPointer } from '../mouse-handler/mouse-handler/mouse-handler';
+import { SimpleViewCanvasSizeManager } from './renderes/common/document-renderer';
 import { ViewManager } from './renderes/view-manager';
 export declare class CanvasManager extends BatchUpdatableObject {
+    simpleViewCanvasSizeManager: SimpleViewCanvasSizeManager;
     private viewManager;
     private eventManager;
     private scrollIntervalID;

package/lib/common/canvas/canvas-manager.js

@@ -11,6 +11,7 @@ import { RichMouseEvent } from '../event-manager';
 import { MouseEventSource } from '../mouse-handler/mouse-event-source';
 import { CursorPointer } from '../mouse-handler/mouse-handler/mouse-handler';
 import { ResizeBoxListener } from './listeners/resize-box-listener';
+import { SimpleViewCanvasSizeManager } from './renderes/common/document-renderer';
 import { SizeUtils } from '../utils/size-utils';
 const SCROLL_INTERVAL_MS = 50;
 const CSSCLASS_FOCUSED = "dxreInFocus";
@@ -29,6 +30,7 @@ export class CanvasManager extends BatchUpdatableObject {
         this.blockNotPointerEvents = false;
         this.lastPointerPosition = { x: -1, y: -1 };
         this.evtHandlersHolder = new DomEventHandlersHolder();
+        this.simpleViewCanvasSizeManager = new SimpleViewCanvasSizeManager(this, viewManager.control);
         this.viewManager = viewManager;
         this.eventManager = eventManager;
         this.initCommonEvents();
@@ -47,6 +49,8 @@ export class CanvasManager extends BatchUpdatableObject {
     }
     dispose() {
         this.evtHandlersHolder.removeAllListeners();
+        this.simpleViewCanvasSizeManager.dispose();
+        this.simpleViewCanvasSizeManager = null;
     }
     onUpdateUnlocked(_occurredEvents) {
         this.viewManager.canvasListener.updateVisibleParts();
@@ -73,7 +77,7 @@ export class CanvasManager extends BatchUpdatableObject {
             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)
@@ -235,7 +239,7 @@ export class CanvasManager extends BatchUpdatableObject {
         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)
@@ -248,12 +252,14 @@ export class CanvasManager extends BatchUpdatableObject {
         const clientY = EvtUtils.getEventY(evt) / scaleY;
         const canvasX = DomUtils.getAbsolutePositionX(canvas) / scaleX;
         const canvasY = 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];

package/lib/common/canvas/renderes/common/document-renderer.d.ts

@@ -36,7 +36,7 @@ export declare class SimpleViewCanvasSizeManager {
     private resizeFrameId;
     constructor(canvasManager: CanvasManager, control: IRichEditControl);
     dispose(): void;
-    protected changeSize(force: boolean): void;
+    changeSize(force: boolean): void;
     setViewMode(val: boolean): void;
     private changeSizeCore;
 }

package/lib/common/canvas/renderes/view-manager.d.ts

@@ -67,4 +67,8 @@ export declare class ViewManager implements ILayoutChangesListener {
     setWorkSession(layout: DocumentLayout, layoutSelection: LayoutSelection, imageCache: ImageCache): void;
     closeDocument(): void;
     ensureFirstPageIsRendered(): void;
+    get zoomLevel(): number;
+    set zoomLevel(value: number);
+    get allowZoom(): boolean;
+    set allowZoom(value: boolean);
 }

package/lib/common/canvas/renderes/view-manager.js

@@ -24,6 +24,8 @@ import { MisspelledSelectionRenderer } from './selection-renderers/misspelled-se
 import { RangePermissionRenderer } from './selection-renderers/range-permission-renderer';
 import { SearchSelectionRenderer } from './selection-renderers/search-selection-renderer';
 import { SelectionRenderer } from './selection-renderers/selection-renderer';
+import { ControlOptions, DocumentCapability } from '../../model/options/control';
+import { RichEditClientCommand } from '../../commands/client-command';
 export class ViewManager {
     get renderer() { return this.renderers[this.innerClientProperties.viewsSettings.viewType]; }
     get printLayoutRenderer() { return this.renderers[ViewType.PrintLayout]; }
@@ -128,6 +130,7 @@ export 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);
@@ -164,4 +167,18 @@ export 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 });
+    }
 }

package/lib/common/commands/client-command.d.ts

@@ -419,5 +419,7 @@ export declare enum RichEditClientCommand {
     FloatingObjectSendBackwardMenu = 456,
     NoSpellingSuggestions = 457,
     GetHtml = 458,
-    CreateEmptyIfField = 459
+    CreateEmptyIfField = 459,
+    ChangeZoomLevel = 460,
+    ToggleAllowZoom = 461
 }

package/lib/common/commands/client-command.js

@@ -421,4 +421,6 @@ export 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 = {}));

package/lib/common/commands/command-manager.js

@@ -67,6 +67,8 @@ import { GoToNextHeaderFooterCommand, GoToPreviousHeaderFooterCommand } from './
 import { InsertFooterCommand, InsertHeaderCommand } from './header-footer/insert-header-footer-commands';
 import { LinkHeaderFooterToPreviousCommand } from './header-footer/link-header-footer-commands';
 import { ApplyStyleCommand } from './layout/apply-style-command';
+import { ToggleAllowZoomCommand } from './layout/toggle-allow-zoom-command';
+import { ChangeZoomLevelCommand } from './layout/change-zoom-level-command';
 import { ClearFormattingCommand } from './layout/clear-formatting-command';
 import { ChangeViewTypeCommand, SwitchToPrintLayoutViewCommand, SwitchToSimpleViewCommand } from './layout/switch-view-command';
 import { ToggleFullScreenCommand } from './layout/toggle-full-screen-command';
@@ -555,6 +557,8 @@ export 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));
     }

package/lib/common/commands/layout/apply-style-command.d.ts

@@ -1,18 +1,23 @@
 import { CharacterStyle } from '../../model/character/character-style';
 import { ParagraphStyle } from '../../model/paragraph/paragraph-style';
-import { SubDocument } from '../../model/sub-document';
+import { SubDocumentInterval } from '../../model/sub-document';
 import { FixedInterval } from '@devexpress/utils/lib/intervals/fixed';
 import { CommandBase, CommandSimpleOptions } from '../command-base';
 import { ApplyStyleCommandState } from '../command-states';
+export interface IApplyStyleCommandParams {
+    styleName: string;
+    keepDirectFormatting?: boolean;
+}
 export declare class ApplyStyleCommand extends CommandBase<ApplyStyleCommandState> {
     getState(): ApplyStyleCommandState;
     private getStyleName;
-    executeCore(state: ApplyStyleCommandState, options: CommandSimpleOptions<string>): boolean;
-    applyCharacterStyle(interval: FixedInterval, style: CharacterStyle, isPresetStyle: boolean, subDocument: SubDocument): void;
-    applyParagraphStyle(interval: FixedInterval, style: ParagraphStyle, isPresetStyle: boolean, subDocument: SubDocument): void;
-    applyParagraphLinkedStyle(interval: FixedInterval, style: ParagraphStyle, isPresetStyle: boolean, subDocument: SubDocument): void;
-    private createCharacterStyle;
-    calculateAffectedParagraphCount(interval: FixedInterval, subDocument: SubDocument): number;
+    DEPRECATEDConvertOptionsParameter(parameter: string | IApplyStyleCommandParams): IApplyStyleCommandParams;
+    executeCore(state: ApplyStyleCommandState, options: CommandSimpleOptions<IApplyStyleCommandParams>): boolean;
+    applyCharacterStyle(subDocumentInterval: SubDocumentInterval, style: CharacterStyle, isPresetStyle: boolean): void;
+    applyParagraphStyle(subDocumentInterval: SubDocumentInterval, style: ParagraphStyle, isPresetStyle: boolean, keepDirectFormatting?: boolean): void;
+    applyParagraphLinkedStyle(subDocumentInterval: SubDocumentInterval, style: ParagraphStyle, isPresetStyle: boolean): void;
+    private addLinkedCharacterStyle;
+    calculateAffectedParagraphCount(subDocumentInterval: SubDocumentInterval): number;
     isEnabled(): boolean;
     protected canModify(): boolean;
     protected getIntervalsForModifying(): FixedInterval[];