devexpress-richedit 25.1.1-alpha → 25.1.2-beta

package/index.d.ts

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

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

@@ -247,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/mail-merge-command.js

@@ -44,7 +44,8 @@ export class MailMergeCommand extends CommandBase {
         return true;
     }
     executeCore(_state, options) {
-        const docxExporter = new DocxExporter(this.control.modelManager.modelManipulator, new DocxExportOptions());
+        const exportModelOptions = this.control.getExportModelOptions();
+        const docxExporter = new DocxExporter(exportModelOptions, new DocxExportOptions());
         docxExporter.exportToBlob((blob) => {
             const docxImporter = new Importer(new ImporterOptions());
             docxImporter.importFromFile(blob, this.control.modelManager.richOptions, (documentModel, formatImagesImporter) => {

package/lib/client/formats/docx/export/data.d.ts

@@ -23,6 +23,9 @@ import { BaseSubDocumentExporter } from './exporters/sub-document/base-sub-docum
 import { TextBoxSubDocumentExporter } from './exporters/sub-document/text-box-content-exporter';
 import { IdGenerator } from './utils/id-generator';
 import { WriterHelper } from './utils/writer-helper';
+import { Grid } from '../../../../common/layout-formatter/table/grid-engine/grid';
+import { IExportModelOptions } from '../../../../common/formats/i-document-exporter';
+import { Table } from '../../../../common/model/tables/main-structures/table';
 export declare class Data {
     get writer(): XmlWriter;
     set writer(val: XmlWriter);
@@ -30,6 +33,7 @@ export declare class Data {
     get relationExporter(): RelationCollectionExporter;
     get mainSubDocumentRelations(): DocumentRelationsExporter;
     model: DocumentModel;
+    grids: Map<Table, Grid>;
     options: DocxExportOptions;
     headerCounter: number;
     footerCounter: number;
@@ -58,7 +62,7 @@ export declare class Data {
     endNotes: Map<SubDocument, number>;
     private writerStack;
     private relationExporters;
-    constructor(model: DocumentModel, options: DocxExportOptions);
+    constructor(exportModelOptions: IExportModelOptions, options: DocxExportOptions);
     popWriter(): void;
     pushRelationExporter(exporter: RelationCollectionExporter): void;
     popRelationExporter(): void;

package/lib/client/formats/docx/export/data.js

@@ -23,11 +23,12 @@ export class Data {
     get subDocumentExporter() { return this.subDocumentExporterStack.last; }
     get relationExporter() { return ListUtils.last(this.relationExporters); }
     get mainSubDocumentRelations() { return this.relationExporters[0]; }
-    constructor(model, options) {
+    constructor(exportModelOptions, options) {
         this.drawingElementId = 1;
         this.exportSubDocumentsList = [];
         this.relationExporters = [];
-        this.model = model;
+        this.model = exportModelOptions.modelManager.model;
+        this.grids = exportModelOptions.grids;
         this.options = options;
         this.constants = new DocxConstants();
         this.writerStack = new Stack();

package/lib/client/formats/docx/export/exporter.d.ts

@@ -1,11 +1,10 @@
-import { IDocumentExporter } from '../../../../common/formats/i-document-exporter';
-import { ModelManipulator } from '../../../../common/model/manipulators/model-manipulator';
+import { IDocumentExporter, IExportModelOptions } from '../../../../common/formats/i-document-exporter';
 import { DocxExportOptions } from './docx-export-options';
 export declare class DocxExporter implements IDocumentExporter {
     private data;
     private modelManipulator;
     private options;
-    constructor(modelManipulator: ModelManipulator, options: DocxExportOptions);
+    constructor(exportModelOptions: IExportModelOptions, options: DocxExportOptions);
     exportToBlob(callback: (blob: Blob) => void): void;
     exportToBase64(callback: (base64: string) => void): void;
     private exportInner;

package/lib/client/formats/docx/export/exporter.js

@@ -9,10 +9,10 @@ import { MainSubDocumentExporter } from './exporters/sub-document/main-sub-docum
 import { ThemeExporter } from './exporters/theme';
 import { EndNoteExporter, FootNoteExporter } from './exporters/sub-document/note-sub-document-exporter';
 export class DocxExporter {
-    constructor(modelManipulator, options) {
-        this.modelManipulator = modelManipulator;
+    constructor(exportModelOptions, options) {
+        this.modelManipulator = exportModelOptions.modelManager.modelManipulator;
         this.options = options;
-        this.data = new Data(modelManipulator.model, options);
+        this.data = new Data(exportModelOptions, options);
     }
     exportToBlob(callback) {
         this.modelManipulator.picture.loader.ensureAllPicturesLoaded(this.options.ensurePictureLoadedTimeout, (_loaded) => {

package/lib/client/formats/docx/export/exporters/base/sections.d.ts

@@ -11,7 +11,6 @@ export declare class SectionExporter extends BaseExporter {
     private exportSectionHeadersFootersCore;
     private exportSectionPropertiesCore;
     private exportSectionPage;
-    private shouldExportSectionPage;
     private exportSectionMargins;
     private exportSectionLineNumbering;
     private exportSectionPageNumbering;

package/lib/client/formats/docx/export/exporters/base/sections.js

@@ -75,21 +75,13 @@ export class SectionExporter extends BaseExporter {
         this.exportSectionGeneralSettings(props);
     }
     exportSectionPage(props) {
-        if (!this.shouldExportSectionPage(props))
-            return;
         this.writer.writeWpStartElement('pgSz');
-        if (props.pageSize.width != SectionExporter.defaultProps.pageSize.width)
-            this.writer.writeWpIntAttr('w', props.pageSize.width);
-        if (props.pageSize.height != SectionExporter.defaultProps.pageSize.height)
-            this.writer.writeWpIntAttr('h', props.pageSize.height);
+        this.writer.writeWpIntAttr('w', props.pageSize.width);
+        this.writer.writeWpIntAttr('h', props.pageSize.height);
         if (props.landscape)
             this.writer.writeWpStringAttr('orient', props.landscape ? 'landscape' : 'portrait');
         this.writer.endElement();
     }
-    shouldExportSectionPage(props) {
-        return !props.pageSize.equals(SectionExporter.defaultProps.pageSize) ||
-            props.landscape != SectionExporter.defaultProps.landscape;
-    }
     exportSectionMargins(props) {
         this.writer.writeWpStartElement('pgMar');
         this.writer.writeWpIntAttr('left', props.marginLeft);

package/lib/client/formats/docx/export/exporters/base/table/table.d.ts

@@ -8,7 +8,7 @@ export declare class TableExporter extends BaseExporter {
     private initTableDeferred;
     init(): void;
     checkTable(pos: number, allowInitNextTable: boolean): void;
-    getTableGrid(table: Table): number[];
+    private getTableGrid;
     private initNewTables;
     private closeTables;
     private handleNextCell;

package/lib/client/formats/docx/export/exporters/base/table/table.js

@@ -6,6 +6,7 @@ import { ListUtils } from '@devexpress/utils/lib/utils/list';
 import { BaseExporter } from '../../base';
 import { TableCellPropertiesExporter } from './table-cell-properties';
 import { TableRowPropertiesExporter } from './table-row-properties';
+import { UnitConverter } from '@devexpress/utils/lib/class/unit-converter';
 export class TableExporter extends BaseExporter {
     constructor() {
         super(...arguments);
@@ -35,10 +36,9 @@ export class TableExporter extends BaseExporter {
         }
     }
     getTableGrid(table) {
-        if (table.rows[0].logicColumnCount < 64)
-            return [];
-        const colGrid = [];
-        return colGrid;
+        var _a, _b;
+        const grid = this.data.grids.get(table);
+        return ((_b = (_a = grid === null || grid === void 0 ? void 0 : grid.columns) === null || _a === void 0 ? void 0 : _a.width) === null || _b === void 0 ? void 0 : _b.map(UnitConverter.pixelsToTwips)) || [];
     }
     initNewTables(newIndexes, allowInitNextTable) {
         for (let levelIndex = this.tableIndexes.length; levelIndex < newIndexes.length; levelIndex++) {

package/lib/client/formats/docx/import/destination/paragraph-properties/properties/paragraph-spacing-destination.js

@@ -12,10 +12,12 @@ export class ParagraphSpacingDestination extends ParagraphFormattingLeafElementD
             const spacingBefore = this.data.readerHelper.getWpSTIntegerValue(reader, 'before', Constants.MIN_SAFE_INTEGER);
             if (spacingBefore >= 0)
                 this.paragraphProperties.setValue(ParagraphPropertyDescriptor.spacingBefore, spacingBefore);
-            this.paragraphProperties.setValue(ParagraphPropertyDescriptor.beforeAutoSpacing, spacingBefore == -1 ||
-                this.data.readerHelper.getWpSTOnOffValue(reader, new WordProcessingMLValue('beforeAutospacing', 'before-autospacing').openXmlValue, false));
-            this.paragraphProperties.setValue(ParagraphPropertyDescriptor.afterAutoSpacing, spacingAfter == -1 ||
-                this.data.readerHelper.getWpSTOnOffValue(reader, new WordProcessingMLValue('afterAutospacing', 'after-autospacing').openXmlValue, false));
+            const beforeAutoSpacing = this.data.readerHelper.getWpSTOnOffValue(reader, 'beforeAutospacing', null);
+            if (spacingBefore == -1 || beforeAutoSpacing != null)
+                this.paragraphProperties.setValue(ParagraphPropertyDescriptor.beforeAutoSpacing, spacingBefore == -1 || beforeAutoSpacing);
+            const afterAutoSpacing = this.data.readerHelper.getWpSTOnOffValue(reader, 'afterAutospacing', null);
+            if (spacingAfter == -1 || afterAutoSpacing != null)
+                this.paragraphProperties.setValue(ParagraphPropertyDescriptor.afterAutoSpacing, spacingAfter == -1 || afterAutoSpacing);
             const lineSpacing = this.data.readerHelper.getWpSTIntegerValue(reader, 'line', Constants.MIN_SAFE_INTEGER);
             if (lineSpacing != Constants.MIN_SAFE_INTEGER && lineSpacing > 0) {
                 const attribute = new WordProcessingMLValue('lineRule', 'line-rule');

package/lib/client/model-api/formats/exporter.js

@@ -15,8 +15,8 @@ export function exportModelToBlob(exportModelOptions, callback) {
 function getExporter(exportModelOptions) {
     const { modelManipulator } = exportModelOptions.modelManager;
     switch (exportModelOptions.documentFormat) {
-        case DocumentFormat.OpenXml: return new DocxExporter(modelManipulator, new DocxExportOptions());
-        case DocumentFormat.Rtf: return new RtfExporter(modelManipulator, new RtfDocumentExporterOptions());
+        case DocumentFormat.OpenXml: return new DocxExporter(exportModelOptions, new DocxExportOptions());
+        case DocumentFormat.Rtf: return new RtfExporter(exportModelOptions, new RtfDocumentExporterOptions());
         case DocumentFormat.PlainText: return new TxtExporter(modelManipulator, new DocumentExporterOptions());
         case DocumentFormat.Html: return new HtmlDocumentExporter(exportModelOptions, new DocumentExporterOptions());
         default:

package/lib/client/model-api/sub-document.js

@@ -211,7 +211,7 @@ export class SubDocumentApi {
     }
     getRtf(interval) {
         const coreInterval = this._checkInterval(interval);
-        return getRtfFromSubDocumentPublic(this._processor.modelManager.richOptions, this._subDocument, coreInterval);
+        return getRtfFromSubDocumentPublic(this._processor, this._subDocument, coreInterval);
     }
     insertContent(position, content, documentFormat, callback) {
         position = ApiParametersChecker.check(position, 1, false, [

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

@@ -160,11 +160,11 @@ class RichEditPublic {
         command.execute(true, type);
     }
     get readOnly() {
-        return this._native.core.readOnly == ReadOnlyMode.Persistent;
+        return this._native.core.readOnly === ReadOnlyMode.Persistent;
     }
     set readOnly(value) {
         if (this.readOnly != value) {
-            this._native.core.readOnly = value ? ReadOnlyMode.Persistent : ReadOnlyMode.None;
+            this._native.core.setPersistentReadOnly(value);
             this._native.core.barHolder.updateItemsState();
             this._native.core.horizontalRulerControl.update();
             this._native.core.beginUpdate();

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

@@ -13,6 +13,7 @@ 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;
@@ -248,35 +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 / 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;
+        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 + visibleAreaWidth - 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 + visibleAreaHeight - 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;
     }
@@ -324,17 +330,23 @@ export class CanvasManager extends BatchUpdatableObject {
     onScrollIntervalTick() {
         const evtX = this.lastMousePosition.x;
         const evtY = this.lastMousePosition.y;
-        const inHorizontalArea = evtX >= this.canvasPosition.x && evtX <= this.canvasPosition.x + this.sizes.getVisibleAreaWidth(true);
-        const inVerticalArea = evtY >= this.canvasPosition.y && evtY <= this.canvasPosition.y + this.sizes.getVisibleAreaHeight(true);
+        const inHorizontalArea = evtX >= this.canvasPosition.x && evtX <= this.canvasPosition.x + this.sizes.getVisibleAreaWidth(false);
+        const inVerticalArea = evtY >= this.canvasPosition.y && evtY <= this.canvasPosition.y + this.sizes.getVisibleAreaHeight(false);
         if (!inHorizontalArea && !inVerticalArea)
             return;
+        const yOffsetWithoutScrollbar = this.canvasPosition.y + this.sizes.getVisibleAreaHeight(false) - evtY;
+        const yOffsetWithScrollbar = this.canvasPosition.y + this.sizes.getVisibleAreaHeight(true) - evtY;
+        const outsideHorizontalScrollbar = yOffsetWithoutScrollbar > 0 || yOffsetWithScrollbar < 0;
         if (inHorizontalArea && evtY - this.canvasPosition.y <= AUTOSCROLL_AREA_SIZE)
             this.viewManager.canvas.scrollTop -= AUTOSCROLL_STEP;
-        else if (inHorizontalArea && this.canvasPosition.y + this.sizes.getVisibleAreaHeight(true) - evtY <= AUTOSCROLL_AREA_SIZE)
+        else if (inHorizontalArea && yOffsetWithoutScrollbar <= AUTOSCROLL_AREA_SIZE && outsideHorizontalScrollbar)
             this.viewManager.canvas.scrollTop += AUTOSCROLL_STEP;
+        const xOffsetWithoutScrollbar = this.canvasPosition.x + this.sizes.getVisibleAreaWidth(false) - evtX;
+        const xOffsetWithScrollbar = this.canvasPosition.x + this.sizes.getVisibleAreaWidth(true) - evtX;
+        const outsideVerticalScrollbar = xOffsetWithoutScrollbar > 0 || xOffsetWithScrollbar < 0;
         if (inVerticalArea && evtX - this.canvasPosition.x <= AUTOSCROLL_AREA_SIZE)
             this.viewManager.canvas.scrollLeft -= AUTOSCROLL_STEP;
-        else if (inVerticalArea && this.canvasPosition.x + this.sizes.getVisibleAreaWidth(true) - evtX <= AUTOSCROLL_AREA_SIZE)
+        else if (inVerticalArea && xOffsetWithoutScrollbar <= AUTOSCROLL_AREA_SIZE && outsideVerticalScrollbar)
             this.viewManager.canvas.scrollLeft += AUTOSCROLL_STEP;
     }
     static getCursorClassName(pointer) {
@@ -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) {

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

@@ -1,6 +1,7 @@
 import { IControlHeightProvider } from './i-control-height-provider';
 import { LayoutPage } from '../layout/main-structures/layout-page';
 import { RenderPageVertivalInfo } from '../view-settings/views-settings';
+import { IZoomLevelHolder } from '../interfaces/i-zoom-level-holder';
 export declare class CanvasSizeInfo implements IControlHeightProvider {
     topSpacing: number;
     betweenPageSpacing: number;
@@ -8,11 +9,11 @@ export declare class CanvasSizeInfo implements IControlHeightProvider {
     scrollYVisible: boolean;
     private visibleAreaSize;
     private scrollWidth;
+    private zoomLevelHolder;
     pageVerticalInfo: RenderPageVertivalInfo;
-    constructor();
+    constructor(zoomLevelHolder: IZoomLevelHolder);
     isInitialized(): boolean;
     initialize(page: HTMLElement, canvas: HTMLDivElement): void;
-    findPageIndexByOffsetY(pages: LayoutPage[], offsetY: number): number;
     getPageOffsetY(layoutPage: LayoutPage): number;
     private setVisibleAreaSize;
     getVisibleAreaWidth(includeScrollBars: boolean): number;

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

@@ -1,15 +1,15 @@
 import { RenderPageVertivalInfo } from '../view-settings/views-settings';
 import { Size } from '@devexpress/utils/lib/geometry/size';
-import { SearchUtils } from '@devexpress/utils/lib/utils/search';
 import { DomUtils } from '@devexpress/utils/lib/utils/dom';
 import { SizeUtils } from '../utils/size-utils';
 export class CanvasSizeInfo {
-    constructor() {
+    constructor(zoomLevelHolder) {
         this.topSpacing = -1;
         this.betweenPageSpacing = 1;
         this.visibleAreaSize = new Size(-1, -1);
         this.scrollWidth = -1;
         this.pageVerticalInfo = new RenderPageVertivalInfo();
+        this.zoomLevelHolder = zoomLevelHolder;
         this.scrollWidth = DomUtils.getVerticalScrollBarWidth();
     }
     isInitialized() {
@@ -21,11 +21,9 @@ export class CanvasSizeInfo {
         this.betweenPageSpacing = this.pageVerticalInfo.betweenPageSpacing;
         this.setVisibleAreaSize(SizeUtils.getClientWidth(canvas), SizeUtils.getClientHeight(canvas));
     }
-    findPageIndexByOffsetY(pages, offsetY) {
-        return Math.max(0, SearchUtils.normedInterpolationIndexOf(pages, (p) => this.getPageOffsetY(p), offsetY));
-    }
     getPageOffsetY(layoutPage) {
-        return layoutPage.y + (this.topSpacing + layoutPage.index * this.betweenPageSpacing);
+        const pageOffsetY = layoutPage.y + (this.topSpacing + layoutPage.index * this.betweenPageSpacing);
+        return pageOffsetY * this.zoomLevelHolder.zoomLevel;
     }
     setVisibleAreaSize(width, height) {
         this.visibleAreaSize.width = width;

package/lib/common/canvas/renderes/canvas-listener/print-layout-view-canvas-listener.js

@@ -74,9 +74,9 @@ export class PrintLayoutViewCanvasListener extends CanvasListener {
             Log.paramsHolder.visualizerManager.show(DebugVisualizerType.LayoutBounds, this.layout, p.index); }));
     }
     updateVisiblePages() {
-        const pages = this.layout.pages;
-        this.viewManager.scroll.updatePageIndexesInfo(pages);
+        this.viewManager.scroll.updatePageIndexesInfo(this.layout);
         const renderInterval = this.viewManager.scroll.renderPageIndexInterval();
+        const pages = this.layout.pages;
         for (let pageIndex of this.handledPageIndexes)
             if (!renderInterval.contains(pageIndex)) {
                 const page = pages[pageIndex];

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

@@ -25,8 +25,10 @@ import { Size } from '@devexpress/utils/lib/geometry/size';
 import { CanvasManager } from '../../canvas-manager';
 import { ViewManager } from '../view-manager';
 import { IRichEditControl } from '../../../interfaces/i-rich-edit-core';
+import { IModelChangesListener } from '../../../interfaces/model-changes-listener';
+import { ModelChange } from '../../../model/changes/change';
 export type GetSomeCanvasElementContainer = (node: Node) => Node;
-export declare class SimpleViewCanvasSizeManager {
+export declare class SimpleViewCanvasSizeManager implements IModelChangesListener {
     protected canvasManager: CanvasManager;
     protected size: Size;
     private control;
@@ -36,6 +38,7 @@ export declare class SimpleViewCanvasSizeManager {
     private resizeFrameId;
     constructor(canvasManager: CanvasManager, control: IRichEditControl);
     dispose(): void;
+    modelChanged(change: ModelChange): void;
     changeSize(force: boolean): void;
     setViewMode(val: boolean): void;
     private changeSizeCore;