devexpress-richedit 24.2.8-build-25149-0115 → 25.1.2-beta

package/index.d.ts

@@ -1,6 +1,6 @@
 /**
 * DevExpress WebRichEdit (index.d.ts)
-* Version: 24.2.8
+* Version: 25.1.2
 * 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.8
+* Version: 25.1.2
 * 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/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 ("eyJsaWNlbnNlS2V5IjoiZXdvZ0lDSm1iM0p0WVhRaU9pQXhMQW9nSUNKcGJuUmxjbTVoYkZWellXZGxTV1FpT2lBaVVUTmhiM0ZJYzFKRU0zWllaVlZOVUdSWVNEZHhOU0lLZlE9PS5rMTA4KzRjbVFYSU96S1F1bUlqUE5oQkw0ejc5N0VSNlByVkkxcTB3V1QwbnkwUTVNZnkzRkJONlV5Zk9PV2p1eUJwaDR1ZllMM0llb0g4UHhNUU5wQUhUb3VUTTFFOHZaM01CM0lac2c1L1ZoOXhUNkg4TFJQSGZoQk00Rk5HUE5zNkY0dz09In0=")
-            config(JSON.parse(atob("eyJsaWNlbnNlS2V5IjoiZXdvZ0lDSm1iM0p0WVhRaU9pQXhMQW9nSUNKcGJuUmxjbTVoYkZWellXZGxTV1FpT2lBaVVUTmhiM0ZJYzFKRU0zWllaVlZOVUdSWVNEZHhOU0lLZlE9PS5rMTA4KzRjbVFYSU96S1F1bUlqUE5oQkw0ejc5N0VSNlByVkkxcTB3V1QwbnkwUTVNZnkzRkJONlV5Zk9PV2p1eUJwaDR1ZllMM0llb0g4UHhNUU5wQUhUb3VUTTFFOHZaM01CM0lac2c1L1ZoOXhUNkg4TFJQSGZoQk00Rk5HUE5zNkY0dz09In0=")));
+        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() {
@@ -245,7 +247,7 @@ export class ClientRichEdit {
             const ribbonBar = new ClientRibbonBar(this, this.element, ribbon, fonts);
             this.barHolder.ribbon = ribbonBar;
             if (this.core) {
-                this.core.modelManager.modelManipulator.modelListeners.push(this.barHolder.ribbon);
+                this.core.modelManager.modelManipulator.addModelListener(this.barHolder.ribbon);
                 this.core.selection.onChanged.add(this.barHolder.ribbon);
                 ribbonBar.initialize(this.core);
             }

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.js

@@ -1,4 +1,3 @@
-var _a;
 export class FocusHelper {
     static preventFocusOnClick(element) {
         return new FocusBlocker(element);
@@ -11,24 +10,23 @@ class FocusBlocker {
         this.addEventListeners(target);
     }
     addEventListeners(element) {
-        element.addEventListener("mousedown", this.onPointerDownBinded);
+        element.addEventListener("pointerdown", this.onPointerDownBinded);
     }
     removeEventListeners(element) {
-        element.removeEventListener("mousedown", this.onPointerDownBinded);
+        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 (element instanceof Element && this.isFocusableElement(element))
+            if (!this.target.contains(element) || element.tabIndex > -1)
                 break;
         }
     }
-    isFocusableElement(element) {
-        return element.matches(FocusBlocker.focusableSelector);
-    }
     dispose() {
         if (this.target) {
             this.removeEventListeners(this.target);
@@ -36,18 +34,3 @@ class FocusBlocker {
         }
     }
 }
-_a = FocusBlocker;
-FocusBlocker.focusableSelectors = [
-    'a[href]',
-    'area[href]',
-    'input',
-    'select',
-    'textarea',
-    'button',
-    'iframe',
-    'object',
-    'embed',
-    '[tabindex]:not([tabindex="-1"])',
-    '[contenteditable]:not([contenteditable="false"])'
-];
-FocusBlocker.focusableSelector = _a.focusableSelectors.join(',');

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,7 +11,9 @@ 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';
+import { MixedSize } from '../utils/mixed-size';
 const SCROLL_INTERVAL_MS = 50;
 const CSSCLASS_FOCUSED = "dxreInFocus";
 const AUTOSCROLL_AREA_SIZE = 10;
@@ -29,6 +31,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 +50,8 @@ export class CanvasManager extends BatchUpdatableObject {
     }
     dispose() {
         this.evtHandlersHolder.removeAllListeners();
+        this.simpleViewCanvasSizeManager.dispose();
+        this.simpleViewCanvasSizeManager = null;
     }
     onUpdateUnlocked(_occurredEvents) {
         this.viewManager.canvasListener.updateVisibleParts();
@@ -73,7 +78,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 +240,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)
@@ -244,33 +249,40 @@ export class CanvasManager extends BatchUpdatableObject {
         const clientRect = canvas.getBoundingClientRect();
         const scaleX = this.getScale(clientRect.width, canvas.offsetWidth);
         const scaleY = this.getScale(clientRect.height, canvas.offsetHeight);
-        const clientX = EvtUtils.getEventX(evt) / scaleX;
-        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 pageIndex = this.sizes.findPageIndexByOffsetY(this.viewManager.layout.pages, offsetY);
+        const clientX = MixedSize.fromUI(EvtUtils.getEventX(evt));
+        const clientY = MixedSize.fromUI(EvtUtils.getEventY(evt));
+        const canvasX = MixedSize.fromUI(DomUtils.getAbsolutePositionX(canvas));
+        const canvasY = MixedSize.fromUI(DomUtils.getAbsolutePositionY(canvas));
+        const offsetY = MixedSize.fromUI(canvas.scrollTop).addSize(clientY).subtractSize(canvasY).useScale(scaleY);
+        const pageIndex = this.viewManager.layout.findPageIndexByOffsetY(offsetY.LayoutSize, this.sizes);
+        const visibleAreaWidth = MixedSize.fromUI(this.sizes.getVisibleAreaWidth(false));
+        const visibleAreaHeight = MixedSize.fromUI(this.sizes.getVisibleAreaHeight(false));
         if (checkScroll) {
-            if (this.sizes.scrollYVisible && canvasX + this.sizes.getVisibleAreaWidth(false) - clientX < 0)
+            const relativeX = new MixedSize().useScale(scaleX).addSize(canvasX).addSize(visibleAreaWidth).subtractSize(clientX);
+            if (this.sizes.scrollYVisible && relativeX.LayoutSize < 0)
                 return LayoutPoint.Empty();
-            if (this.sizes.scrollXVisible && canvasY + this.sizes.getVisibleAreaHeight(false) - clientY < 0)
+            const relativeY = new MixedSize().useScale(scaleY).addSize(canvasY).addSize(visibleAreaHeight).subtractSize(clientY);
+            if (this.sizes.scrollXVisible && relativeY.LayoutSize < 0)
                 return LayoutPoint.Empty();
         }
         const layoutPage = this.viewManager.layout.pages[pageIndex];
         const renderPageCacheElem = this.viewManager.cache[pageIndex];
         if (!layoutPage || !renderPageCacheElem)
             return LayoutPoint.Empty();
-        return new LayoutPoint(pageIndex, canvas.scrollLeft + clientX - (canvasX + renderPageCacheElem.page.offsetLeft), offsetY - this.sizes.getPageOffsetY(layoutPage));
+        const pageX = new MixedSize().useScale(scaleX).addUISize(canvas.scrollLeft).addSize(clientX).subtractSize(canvasX).subtractLayoutSize(renderPageCacheElem.page.offsetLeft).LayoutSize;
+        const pageY = new MixedSize().useScale(scaleY).addSize(offsetY).subtractLayoutSize(this.sizes.getPageOffsetY(layoutPage)).LayoutSize;
+        return new LayoutPoint(pageIndex, pageX, pageY);
     }
     isVisiblePosition(layoutPoint) {
-        const pages = this.viewManager.layout.pages;
-        this.scroll.updatePageIndexesInfo(pages);
+        const layout = this.viewManager.layout;
+        const zoomLevel = this.viewManager.zoomLevel;
+        this.scroll.updatePageIndexesInfo(layout);
         if (layoutPoint.pageIndex < this.scroll.startVisiblePageIndex || layoutPoint.pageIndex > this.scroll.endVisiblePageIndex)
             return false;
-        const pageY = this.sizes.getPageOffsetY(pages[layoutPoint.pageIndex]);
-        const pageX = this.viewManager.cache[layoutPoint.pageIndex].page.offsetLeft;
-        const x = pageX + layoutPoint.x;
-        const y = pageY + layoutPoint.y;
+        const pageY = MixedSize.fromLayout(this.sizes.getPageOffsetY(layout.pages[layoutPoint.pageIndex])).useScale(zoomLevel);
+        const pageX = MixedSize.fromLayout(this.viewManager.cache[layoutPoint.pageIndex].page.offsetLeft).useScale(zoomLevel);
+        const x = pageX.addLayoutSize(layoutPoint.x).UISize;
+        const y = pageY.addLayoutSize(layoutPoint.y).UISize;
         return x >= this.scroll.lastScrollLeft && x <= this.sizes.getVisibleAreaWidth(false) + this.scroll.lastScrollLeft &&
             y >= this.scroll.lastScrollTop && y <= this.sizes.getVisibleAreaHeight(false) + this.scroll.lastScrollTop;
     }
@@ -378,10 +390,12 @@ export class CanvasManager extends BatchUpdatableObject {
         return ResizeBoxListener.directionToSource[className.substr(ind + cornerPrefix.length, 2).trim()];
     }
     getScrollTopInfo() {
-        const pages = this.viewManager.layout.pages;
         const scrollTop = this.viewManager.canvas.scrollTop;
-        const pageIndex = this.sizes.findPageIndexByOffsetY(pages, scrollTop);
-        return new ScrollTopInfo(pageIndex, scrollTop - this.sizes.getPageOffsetY(pages[pageIndex]));
+        const pageIndex = this.viewManager.layout.findPageIndexByOffsetY(scrollTop, this.sizes);
+        const pages = this.viewManager.layout.pages;
+        const zoomLevel = this.viewManager.zoomLevel;
+        const pageOffsetY = this.sizes.getPageOffsetY(pages[pageIndex]);
+        return new ScrollTopInfo(pageIndex, new MixedSize().useScale(zoomLevel).addUISize(scrollTop).subtractLayoutSize(pageOffsetY).LayoutSize);
     }
 }
 export class ScrollTopInfo {

package/lib/common/canvas/canvas-scroll-info.d.ts

@@ -1,9 +1,11 @@
-import { LayoutPage } from '../layout/main-structures/layout-page';
 import { BoundaryInterval } from '@devexpress/utils/lib/intervals/boundary';
 import { FixedInterval } from '@devexpress/utils/lib/intervals/fixed';
 import { IInternalApi } from '../internal-api';
 import { CanvasSizeInfo } from './canvas-size-info';
-export declare class CanvasScrollInfo {
+import { DocumentLayout } from '../layout/document-layout';
+import { IModelChangesListener } from '../interfaces/model-changes-listener';
+import { ModelChange } from '../model/changes/change';
+export declare class CanvasScrollInfo implements IModelChangesListener {
     protected static VISIBLE_PAGES_RANGE: number;
     protected static VISIBLE_PAGES_RANGE_TOUCH: number;
     protected static VISIBLE_AREA_HEIGHT_MULTIPLIER: number;
@@ -17,11 +19,12 @@ export declare class CanvasScrollInfo {
     readonly internalApi: IInternalApi;
     private _needUpdatePageIndexes;
     constructor(canvas: HTMLDivElement, sizes: CanvasSizeInfo, internalApi: IInternalApi);
+    modelChanged(change: ModelChange): void;
     init(canvas: HTMLDivElement, sizes: CanvasSizeInfo): void;
     getStartRenderPageIndex(): number;
     getEndRenderPageIndex(): number;
     renderPageIndexInterval(): FixedInterval;
-    updatePageIndexesInfo(pages: LayoutPage[]): void;
+    updatePageIndexesInfo(layout: DocumentLayout): void;
     getVisibleInterval(): BoundaryInterval;
     private getScrollTop;
     private getVisibleHeight;

package/lib/common/canvas/canvas-scroll-info.js

@@ -1,6 +1,7 @@
 import { Browser } from '@devexpress/utils/lib/browser';
 import { BoundaryInterval } from '@devexpress/utils/lib/intervals/boundary';
 import { FixedInterval } from '@devexpress/utils/lib/intervals/fixed';
+import { ModelChangeType } from '../model/changes/enums';
 export class CanvasScrollInfo {
     constructor(canvas, sizes, internalApi) {
         this.lastScrollTop = -1;
@@ -11,6 +12,10 @@ export class CanvasScrollInfo {
         this.internalApi = internalApi;
         this.init(canvas, sizes);
     }
+    modelChanged(change) {
+        if (change.type == ModelChangeType.ZoomLevelChanged)
+            this.onCanvasSizeChanged();
+    }
     init(canvas, sizes) {
         this.canvas = canvas;
         this.sizes = sizes;
@@ -25,16 +30,16 @@ export class CanvasScrollInfo {
     renderPageIndexInterval() {
         return FixedInterval.fromPositions(this.getStartRenderPageIndex(), this.getEndRenderPageIndex() + 1);
     }
-    updatePageIndexesInfo(pages) {
-        if (!pages.length)
+    updatePageIndexesInfo(layout) {
+        if (!layout.pages.length)
             return;
         const scrollTop = this.getScrollTop();
         this.lastScrollLeft = this.canvas.scrollLeft;
         if (this.startVisiblePageIndex >= 0 && scrollTop == this.lastScrollTop && !this._needUpdatePageIndexes)
             return;
         this._needUpdatePageIndexes = false;
-        this.startVisiblePageIndex = this.sizes.findPageIndexByOffsetY(pages, scrollTop);
-        this.endVisiblePageIndex = this.sizes.findPageIndexByOffsetY(pages, scrollTop + this.getVisibleHeight());
+        this.startVisiblePageIndex = layout.findPageIndexByOffsetY(scrollTop, this.sizes);
+        this.endVisiblePageIndex = layout.findPageIndexByOffsetY(scrollTop + this.getVisibleHeight(), this.sizes);
         this.lastScrollTop = scrollTop;
     }
     getVisibleInterval() {

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

@@ -2,7 +2,9 @@ import { IScrollLayoutChangesListener } from '../interfaces/i-selection-layout-c
 import { ICanvasState } from '../scroll/canvas-states';
 import { IRulerControl } from '../ui/ruler/ruler';
 import { ViewManager } from './renderes/view-manager';
-export declare class CanvasScrollManager implements IScrollLayoutChangesListener {
+import { IModelChangesListener } from '../interfaces/model-changes-listener';
+import { ModelChange } from '../model/changes/change';
+export declare class CanvasScrollManager implements IScrollLayoutChangesListener, IModelChangesListener {
     private updateScrollTimeoutId;
     private waitForDblClickTimeoutId;
     private horizontalRuler;
@@ -11,6 +13,7 @@ export declare class CanvasScrollManager implements IScrollLayoutChangesListener
     private get sizes();
     constructor(viewManager: ViewManager, horizontalRuler: IRulerControl);
     dispose(): void;
+    modelChanged(change: ModelChange): void;
     get scrollTop(): number;
     set scrollTop(val: number);
     setScrollEnabled(enabled: boolean): void;

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

@@ -1,6 +1,8 @@
 import { DocumentLayoutDetailsLevel } from '../layout/document-layout-details-level';
 import { MouseHandler } from '../mouse-handler/mouse-handler/mouse-handler';
 import { RelativePosition } from '../scroll/model-states';
+import { MixedSize } from '../utils/mixed-size';
+import { ModelChangeType } from '../model/changes/enums';
 export class CanvasScrollManager {
     get canvas() { return this.viewManager.canvas; }
     get sizes() { return this.viewManager.sizes; }
@@ -14,6 +16,10 @@ export class CanvasScrollManager {
         clearTimeout(this.updateScrollTimeoutId);
         clearTimeout(this.waitForDblClickTimeoutId);
     }
+    modelChanged(change) {
+        if (change.type == ModelChangeType.ZoomLevelChanged)
+            this.updateScrollVisibility();
+    }
     get scrollTop() { return this.canvas.scrollTop; }
     set scrollTop(val) { this.canvas.scrollTop = val; }
     setScrollEnabled(enabled) {
@@ -32,46 +38,48 @@ export class CanvasScrollManager {
     scrollToX(canvasState) {
         const position = canvasState.lp;
         const relativePosition = canvasState.relativePosition;
-        let y = this.sizes.getPageOffsetY(this.viewManager.layout.pages[position.pageIndex]);
-        let height = 0;
+        const zoomLevel = this.viewManager.zoomLevel;
+        const page = this.viewManager.layout.pages[position.pageIndex];
+        let y = MixedSize.fromLayout(this.sizes.getPageOffsetY(page)).useScale(zoomLevel);
+        let height = new MixedSize().useScale(zoomLevel);
         if (position.detailsLevel >= DocumentLayoutDetailsLevel.PageArea) {
-            y += position.pageArea.y;
+            y.addLayoutSize(position.pageArea.y);
             if (position.detailsLevel >= DocumentLayoutDetailsLevel.Column) {
-                y += position.column.y;
+                y.addLayoutSize(position.column.y);
                 if (position.detailsLevel >= DocumentLayoutDetailsLevel.Row) {
-                    y += position.row.y;
+                    y.addLayoutSize(position.row.y);
                     if (relativePosition === RelativePosition.Bottom)
-                        y += position.row.height;
+                        y.addLayoutSize(position.row.height);
                     else if (relativePosition === RelativePosition.Inside)
-                        height = position.row.height;
+                        height.clear().addLayoutSize(position.row.height);
                 }
                 else if (relativePosition === RelativePosition.Bottom)
-                    y += position.column.height;
+                    y.addLayoutSize(position.column.height);
                 else if (relativePosition === RelativePosition.Inside)
-                    height = position.column.height;
+                    height.clear().addLayoutSize(position.column.height);
             }
             else if (relativePosition === RelativePosition.Bottom)
-                y += position.pageArea.height;
+                y.addLayoutSize(position.pageArea.height);
             else if (relativePosition === RelativePosition.Inside)
-                height = position.pageArea.height;
+                height.clear().addLayoutSize(position.pageArea.height);
         }
         else if (relativePosition === RelativePosition.Bottom)
-            y += position.page.height;
+            y.addLayoutSize(position.page.height);
         else if (relativePosition === RelativePosition.Inside)
-            height = position.page.height;
+            height.clear().addLayoutSize(position.page.height);
         if (relativePosition === RelativePosition.Bottom)
-            y -= this.sizes.getVisibleAreaHeight(false);
-        y += canvasState.getVerticalOffset(this.sizes);
+            y.subtractUISize(this.sizes.getVisibleAreaHeight(false));
+        y.addUISize(canvasState.getVerticalOffset(this.sizes));
         if (relativePosition === RelativePosition.Inside) {
             let scrollTop = this.canvas.scrollTop;
             const scrollVisibleAreaHeight = this.sizes.getVisibleAreaHeight(false);
-            if (y < scrollTop)
-                this.canvas.scrollTop = y;
-            else if (y + height > scrollVisibleAreaHeight + scrollTop)
-                this.canvas.scrollTop = y + height - scrollVisibleAreaHeight;
+            if (y.UISize < scrollTop)
+                this.canvas.scrollTop = y.UISize;
+            else if (y.UISize + height.UISize > scrollVisibleAreaHeight + scrollTop)
+                this.canvas.scrollTop = y.UISize + height.UISize - scrollVisibleAreaHeight;
         }
         else
-            this.canvas.scrollTop = y;
+            this.canvas.scrollTop = y.UISize;
     }
     NotifyScrollPositionChanged(canvasState) {
         if (this.updateScrollTimeoutId) {