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

package/lib/common/ui/ruler/controls/column.d.ts

@@ -1,5 +1,6 @@
 import { RulerControls } from '../manager';
 import { RulerMultiControl } from './owner';
+import { IZoomLevelHolder } from '../../../interfaces/i-zoom-level-holder';
 export declare enum ColumnAction {
     None = 0,
     ColumnMove = 1,
@@ -7,11 +8,22 @@ export declare enum ColumnAction {
     ColumnWidth = 3
 }
 export declare class RulerColumnModelState {
-    leftPos: number;
-    width: number;
-    space: number;
+    private zoomLevelHolder;
+    private zoomableLeftPos;
+    get leftPos(): number;
+    get originalLeftPos(): number;
+    set leftPos(value: number);
+    private zoomableWidth;
+    get width(): number;
+    get originalWidth(): number;
+    set width(value: number);
+    private zoomableSpace;
+    get space(): number;
+    get originalSpace(): number;
+    set space(value: number);
     get rightPos(): number;
-    constructor(leftPos: number, width: number, space: number);
+    get originalRightPos(): number;
+    constructor(leftPos: number, width: number, space: number, zoomLevelHolder: IZoomLevelHolder);
     clone(): RulerColumnModelState;
     equals(obj: RulerColumnModelState): boolean;
 }
@@ -47,7 +59,7 @@ declare class RulerColumnState {
     showShadow(): void;
     hideShadow(): void;
     lineControlSetPosition(): void;
-    setValue(viewState: RulerColumnModelState): void;
+    setValue(viewState: RulerColumnModelState, forceUpdate?: boolean): void;
     getAction(source: HTMLElement): ColumnAction;
 }
 export {};

package/lib/common/ui/ruler/controls/column.js

@@ -7,6 +7,7 @@ import { RichEditClientCommand } from '../../../commands/client-command';
 import { RICH_EDIT_CLASS_NAME_PREFIX, RULLER_NUMBER_CORRECTION } from '../settings';
 import { RulerMultiControl } from './owner';
 import { RulerLineDisplayType, SnapTo } from './vertical-line';
+import { RulerValue } from './zoomable-value';
 const MinColumnWidth = UnitConverter.centimeterToPixel(1.5);
 const MinColumnSpace = UnitConverter.centimeterToPixel(0.25);
 const COLUMN_HANDLE_CLASS_NAME = RICH_EDIT_CLASS_NAME_PREFIX + "columnHandle";
@@ -33,14 +34,25 @@ export var ColumnAction;
     ColumnAction[ColumnAction["ColumnWidth"] = 3] = "ColumnWidth";
 })(ColumnAction || (ColumnAction = {}));
 export class RulerColumnModelState {
+    get leftPos() { return this.zoomableLeftPos.value; }
+    get originalLeftPos() { return this.zoomableLeftPos.originalValue; }
+    set leftPos(value) { this.zoomableLeftPos.value = value; }
+    get width() { return this.zoomableWidth.value; }
+    get originalWidth() { return this.zoomableWidth.originalValue; }
+    set width(value) { this.zoomableWidth.value = value; }
+    get space() { return this.zoomableSpace.value; }
+    get originalSpace() { return this.zoomableSpace.originalValue; }
+    set space(value) { this.zoomableSpace.value = value; }
     get rightPos() { return this.leftPos + this.width; }
-    constructor(leftPos, width, space) {
-        this.leftPos = leftPos;
-        this.width = width;
-        this.space = space;
+    get originalRightPos() { return this.originalLeftPos + this.originalWidth; }
+    constructor(leftPos, width, space, zoomLevelHolder) {
+        this.zoomLevelHolder = zoomLevelHolder;
+        this.zoomableLeftPos = new RulerValue(leftPos, this.zoomLevelHolder);
+        this.zoomableWidth = new RulerValue(width, this.zoomLevelHolder);
+        this.zoomableSpace = new RulerValue(space, this.zoomLevelHolder);
     }
     clone() {
-        return new RulerColumnModelState(this.leftPos, this.width, this.space);
+        return new RulerColumnModelState(this.originalLeftPos, this.originalWidth, this.originalSpace, this.zoomLevelHolder);
     }
     equals(obj) {
         return this.leftPos == obj.leftPos &&
@@ -57,7 +69,8 @@ export class RulerColumnsModelState {
     }
     get activeColumn() { return this.columns[this.columnActiveIndex]; }
     clone() {
-        return new RulerColumnsModelState(ListUtils.deepCopy(this.columns), this.equalWidth, this.columnActiveIndex, this.enabled);
+        const clonedColumns = ListUtils.deepCopy(this.columns);
+        return new RulerColumnsModelState(clonedColumns, this.equalWidth, this.columnActiveIndex, this.enabled);
     }
 }
 export class RulerColumnsControl extends RulerMultiControl {
@@ -65,8 +78,8 @@ export class RulerColumnsControl extends RulerMultiControl {
         const state = this.modelData.commandManager.getCommand(RichEditClientCommand.RulerSectionColumnsSettings).getState();
         let prevColumnLeftPos = 0;
         const modelColumns = ListUtils.map(state.value, (column) => {
-            const result = new RulerColumnModelState(prevColumnLeftPos, column.width, column.space);
-            prevColumnLeftPos = result.rightPos + result.space;
+            const result = new RulerColumnModelState(prevColumnLeftPos, column.width, column.space, this.modelData);
+            prevColumnLeftPos = result.originalRightPos + result.originalSpace;
             return result;
         });
         return new RulerColumnsModelState(modelColumns, state.equalWidth, state.activeIndex, state.enabled);
@@ -84,7 +97,7 @@ export class RulerColumnsControl extends RulerMultiControl {
                 return result;
             }, 0, this.currModelState.columns.length - 1);
             this.setCount(this.viewState.length);
-            ListUtils.forEach2(this.subControls, this.viewState, (control, viewState) => control.setValue(viewState));
+            ListUtils.forEach2(this.subControls, this.viewState, (control, viewState) => control.setValue(viewState, this.zoomChanged));
         }
     }
     createSubControl() {
@@ -96,8 +109,8 @@ export class RulerColumnsControl extends RulerMultiControl {
             const columnWidthDiff = diff / colCount;
             let prevColumnLeftPos = 0;
             this.currModelState.columns = this.prevModelState.columns.map(oldColumn => {
-                const result = new RulerColumnModelState(prevColumnLeftPos, oldColumn.width - columnWidthDiff, oldColumn.space);
-                prevColumnLeftPos = result.rightPos + result.space;
+                const result = new RulerColumnModelState(prevColumnLeftPos, oldColumn.originalWidth - columnWidthDiff, oldColumn.originalSpace, this.modelData);
+                prevColumnLeftPos = result.originalRightPos + result.originalSpace;
                 return result;
             });
         }
@@ -122,7 +135,7 @@ export class RulerColumnsControl extends RulerMultiControl {
     }
     onMouseUp() {
         this.modelData.commandManager.getCommand(RichEditClientCommand.RulerSectionColumnsSettings)
-            .execute(this.modelData.commandManager.isPublicApiCall, this.currModelState.columns.map(col => new ColumnSectionProperties(col.width, col.space)));
+            .execute(this.modelData.commandManager.isPublicApiCall, this.currModelState.columns.map(col => new ColumnSectionProperties(col.originalWidth, col.originalSpace)));
         this.finishHandle();
     }
     calculateNewModelState(distance) {
@@ -139,10 +152,11 @@ export class RulerColumnsControl extends RulerMultiControl {
         }
     }
     calculateNewModelStateColumnMove(distance) {
+        const minColumnWidth = MinColumnWidth * this.modelData.zoomLevel;
         const leftMargin = this.controls.leftMargin.prevModelState.modelValue;
         const column = this.prevModelState.columns[this.handleControlIndex];
         const initialPos = leftMargin + column.rightPos;
-        const newPos = this.controls.chooseClosestAnchorPosition(initialPos + distance, [initialPos], new MinMaxNumber(leftMargin + column.leftPos + MinColumnWidth, leftMargin + this.prevModelState.columns[this.handleControlIndex + 1].rightPos - MinColumnWidth - column.space));
+        const newPos = this.controls.chooseClosestAnchorPosition(initialPos + distance, [initialPos], new MinMaxNumber(leftMargin + column.leftPos + minColumnWidth, leftMargin + this.prevModelState.columns[this.handleControlIndex + 1].rightPos - minColumnWidth - column.space));
         const correctedDistance = newPos - initialPos;
         const currColumn = this.currModelState.columns[this.handleControlIndex] = this.prevModelState.columns[this.handleControlIndex].clone();
         const nextColumn = this.currModelState.columns[this.handleControlIndex + 1] = this.prevModelState.columns[this.handleControlIndex + 1].clone();
@@ -151,15 +165,17 @@ export class RulerColumnsControl extends RulerMultiControl {
         nextColumn.width -= correctedDistance;
     }
     calculateNewModelStateColumnSpace(distance, leftEdge) {
+        const minColumnWidth = MinColumnWidth * this.modelData.zoomLevel;
+        const minColumnSpace = MinColumnSpace * this.modelData.zoomLevel;
         if (this.prevModelState.equalWidth) {
             const columnCount = this.currModelState.columns.length;
             const leftMargin = this.controls.leftMargin.prevModelState.modelValue;
             const column = this.prevModelState.columns[this.handleControlIndex];
-            const maxColumnSpace = (ListUtils.last(this.prevModelState.columns).rightPos - MinColumnWidth * columnCount) / (columnCount - 1);
-            const maxColumnWidth = (ListUtils.last(this.prevModelState.columns).rightPos - MinColumnSpace * (columnCount - 1)) / columnCount;
+            const maxColumnSpace = (ListUtils.last(this.prevModelState.columns).rightPos - minColumnWidth * columnCount) / (columnCount - 1);
+            const maxColumnWidth = (ListUtils.last(this.prevModelState.columns).rightPos - minColumnSpace * (columnCount - 1)) / columnCount;
             const bounds = leftEdge ?
-                new MinMaxNumber(leftMargin + MinColumnWidth * (this.handleControlIndex + 1) + maxColumnSpace * this.handleControlIndex, leftMargin + maxColumnWidth * (this.handleControlIndex + 1) + MinColumnSpace * this.handleControlIndex) :
-                new MinMaxNumber(leftMargin + (maxColumnWidth + MinColumnSpace) * (this.handleControlIndex + 1), leftMargin + (MinColumnWidth + maxColumnSpace) * (this.handleControlIndex + 1));
+                new MinMaxNumber(leftMargin + minColumnWidth * (this.handleControlIndex + 1) + maxColumnSpace * this.handleControlIndex, leftMargin + maxColumnWidth * (this.handleControlIndex + 1) + minColumnSpace * this.handleControlIndex) :
+                new MinMaxNumber(leftMargin + (maxColumnWidth + minColumnSpace) * (this.handleControlIndex + 1), leftMargin + (minColumnWidth + maxColumnSpace) * (this.handleControlIndex + 1));
             const initialPos = leftMargin + column.rightPos + (leftEdge ? 0 : column.space);
             const newPos = this.controls.chooseClosestAnchorPosition(initialPos + distance, [initialPos], bounds);
             const correctedDistance = newPos - initialPos;
@@ -182,8 +198,8 @@ export class RulerColumnsControl extends RulerMultiControl {
             const leftMargin = this.controls.leftMargin.prevModelState.modelValue;
             const column = this.prevModelState.columns[this.handleControlIndex];
             const bounds = leftEdge ?
-                new MinMaxNumber(leftMargin + column.leftPos + MinColumnWidth, leftMargin + this.prevModelState.columns[this.handleControlIndex + 1].leftPos - MinColumnSpace) :
-                new MinMaxNumber(leftMargin + column.rightPos + MinColumnSpace, leftMargin + this.prevModelState.columns[this.handleControlIndex + 1].rightPos - MinColumnWidth);
+                new MinMaxNumber(leftMargin + column.leftPos + minColumnWidth, leftMargin + this.prevModelState.columns[this.handleControlIndex + 1].leftPos - minColumnSpace) :
+                new MinMaxNumber(leftMargin + column.rightPos + minColumnSpace, leftMargin + this.prevModelState.columns[this.handleControlIndex + 1].rightPos - minColumnWidth);
             const initialPos = leftMargin + column.rightPos + (leftEdge ? 0 : column.space);
             const newPos = this.controls.chooseClosestAnchorPosition(initialPos + distance, [initialPos], bounds);
             const correctedDistance = newPos - initialPos;
@@ -232,8 +248,8 @@ class RulerColumnState {
         }
         this.controls.lineControl.setPosition(pos, SnapTo.LeftSide);
     }
-    setValue(viewState) {
-        if (!this.viewState || !this.viewState.equals(viewState)) {
+    setValue(viewState, forceUpdate = false) {
+        if (forceUpdate || !this.viewState || !this.viewState.equals(viewState)) {
             this.viewState = viewState.clone();
             this.rootElement.style.left = RULLER_NUMBER_CORRECTION + viewState.rightPos + "px";
             this.rootElement.style.width = viewState.space + "px";

package/lib/common/ui/ruler/controls/divisions.d.ts

@@ -2,6 +2,8 @@ import { RichEditUnit } from '../../../utils/unit-converter';
 import { RulerControls } from '../manager';
 import { RulerModelData } from '../model-data';
 import { RulerBase } from './base';
+import { ViewSettings } from '../../../view-settings/views-settings';
+import { IZoomLevelHolder } from '../../../interfaces/i-zoom-level-holder';
 export declare const MINOR_TOP_AND_BOTTOM_MARGIN: number;
 export declare const MAJOR_TOP_AND_BOTTOM_MARGIN: number;
 export declare const DIVISION_CONTAINER_CLASS_NAME: string;
@@ -12,9 +14,15 @@ export declare const DIVISION_NUMBER_CLASS_NAME: string;
 export declare class RulerDivisionsControl extends RulerBase {
     viewState: number;
     private initialLeft;
-    readonly height: number;
+    private divisionInfo;
+    private maxPageWidth;
+    private zoomLevel;
+    private zoomChanged;
+    private _height;
+    get height(): number;
     protected getRootClassName(): string;
     constructor(modelData: RulerModelData, controls: RulerControls, divisionInfo: DivisionInfo, maxPageWidth: number);
+    render(): void;
     update(): void;
     updateModelState(): void;
     updateView(): void;
@@ -26,9 +34,14 @@ export declare enum DivisionType {
     Major = 2
 }
 export declare class DivisionInfo {
+    readonly originalUnitSize: number;
+    private zoomLevelHolder;
     readonly unitMap: DivisionType[];
-    readonly unitSize: number;
-    readonly stepSize: number;
-    constructor(map: number[], unitSize: number);
-    static create(unitType: RichEditUnit): DivisionInfo;
+    get unitSize(): number;
+    get stepSize(): number;
+    private _stepSize;
+    private _unitSize;
+    constructor(map: number[], originalUnitSize: number, zoomLevelHolder: IZoomLevelHolder);
+    updateZoomLevel(): void;
+    static create(unitType: RichEditUnit, viewSettings: ViewSettings): DivisionInfo;
 }

package/lib/common/ui/ruler/controls/divisions.js

@@ -13,25 +13,40 @@ export const DIVISION_MINOR_CLASS_NAME = RULER_CLASS_NAME + "Minor" + DIVISION_C
 export const DIVISION_MAJOR_CLASS_NAME = RULER_CLASS_NAME + "Major" + DIVISION_CLASS_NAME;
 export const DIVISION_NUMBER_CLASS_NAME = RULER_CLASS_NAME + "Number" + DIVISION_CLASS_NAME;
 export class RulerDivisionsControl extends RulerBase {
+    get height() { return this._height; }
     getRootClassName() { return DIVISION_CONTAINER_CLASS_NAME; }
     constructor(modelData, controls, divisionInfo, maxPageWidth) {
         super(modelData, controls);
-        this.height = 0;
-        const unitCount = Math.ceil(maxPageWidth / divisionInfo.unitSize);
-        this.rootElement.style.width = divisionInfo.unitSize * (unitCount * 2 + 1) + "px";
+        this.zoomLevel = 1.0;
+        this.zoomChanged = false;
+        this._height = 0;
+        this.divisionInfo = divisionInfo;
+        this.maxPageWidth = maxPageWidth;
         this.controls.ruler.rootElement.appendChild(this.rootElement);
+        this._height = SizeUtils.getOffsetHeight(this.rootElement);
         if (Browser.IE && Browser.MajorVersion <= 9)
             this.rootElement.offsetParent;
-        this.height = SizeUtils.getOffsetHeight(this.rootElement);
-        createDivisionElements(this.rootElement, unitCount, divisionInfo, this.height);
-        this.initialLeft = -(unitCount * divisionInfo.unitSize - RULLER_NUMBER_CORRECTION);
+        this.render();
+    }
+    render() {
+        const unitCount = Math.ceil(this.maxPageWidth / this.divisionInfo.unitSize);
+        this.rootElement.style.width = this.divisionInfo.unitSize * (unitCount * 2 + 1) + "px";
+        createDivisionElements(this.rootElement, unitCount, this.divisionInfo, this.height);
+        this.initialLeft = -(unitCount * this.divisionInfo.unitSize - RULLER_NUMBER_CORRECTION);
     }
     update() {
         this.updateModelState();
         this.updateView();
     }
-    updateModelState() { }
+    updateModelState() {
+        this.zoomChanged = this.zoomLevel != this.modelData.zoomLevel;
+        this.zoomLevel = this.modelData.zoomLevel;
+    }
     updateView() {
+        if (this.zoomChanged) {
+            this.render();
+            this.zoomChanged = false;
+        }
         const newViewState = this.getViewValue();
         if (newViewState != this.viewState) {
             this.viewState = newViewState;
@@ -48,6 +63,9 @@ export class RulerDivisionsControl extends RulerBase {
     }
 }
 function createDivisionElements(rootElement, unitCount, divisionInfo, height) {
+    while (rootElement.firstChild) {
+        rootElement.removeChild(rootElement.lastChild);
+    }
     let divisionLeftPosition = 0;
     const createSimpleDivision = (className, topAndBottomMargin) => {
         const stepSize = divisionInfo.stepSize;
@@ -99,15 +117,25 @@ export var DivisionType;
     DivisionType[DivisionType["Major"] = 2] = "Major";
 })(DivisionType || (DivisionType = {}));
 export class DivisionInfo {
-    constructor(map, unitSize) {
+    get unitSize() { return this._unitSize; }
+    ;
+    get stepSize() { return this._stepSize; }
+    ;
+    constructor(map, originalUnitSize, zoomLevelHolder) {
+        this.originalUnitSize = originalUnitSize;
+        this.zoomLevelHolder = zoomLevelHolder;
         this.unitMap = map;
-        this.unitSize = unitSize;
-        this.stepSize = this.unitSize / this.unitMap.length;
+        this.updateZoomLevel();
+    }
+    updateZoomLevel() {
+        const zoomLevel = this.zoomLevelHolder.zoomLevel;
+        this._unitSize = this.originalUnitSize * zoomLevel;
+        this._stepSize = this.unitSize / this.unitMap.length;
     }
-    static create(unitType) {
+    static create(unitType, viewSettings) {
         return unitType == RichEditUnit.Inch ?
             new DivisionInfo([DivisionType.Number, DivisionType.Minor, DivisionType.Minor, DivisionType.Minor,
-                DivisionType.Major, DivisionType.Minor, DivisionType.Minor, DivisionType.Minor], UnitConverter.inchesToPixels(1)) :
-            new DivisionInfo([DivisionType.Number, DivisionType.Minor, DivisionType.Major, DivisionType.Minor], UnitConverter.centimeterToPixelF(1));
+                DivisionType.Major, DivisionType.Minor, DivisionType.Minor, DivisionType.Minor], UnitConverter.inchesToPixels(1), viewSettings) :
+            new DivisionInfo([DivisionType.Number, DivisionType.Minor, DivisionType.Major, DivisionType.Minor], UnitConverter.centimeterToPixelF(1), viewSettings);
     }
 }

package/lib/common/ui/ruler/controls/indent/first-line.js

@@ -30,7 +30,7 @@ export class RulerFirstLineIndentDragHandle extends RulerBaseIndentControl {
     }
     getModelState() {
         const state = this.modelData.commandManager.getCommand(RichEditClientCommand.RulerParagraphLeftIndents).getState();
-        return new RulerModelState(state.value.firstLine, state.enabled);
+        return new RulerModelState(state.value.firstLine, state.enabled, this.modelData);
     }
     updateView() {
         const newViewState = this.controls.paragraphLeftPosition + this.currModelState.modelValue;
@@ -44,7 +44,7 @@ export class RulerFirstLineIndentDragHandle extends RulerBaseIndentControl {
     }
     canHandle(source) { return source == this.rootElement; }
     onMouseUp() {
-        const commandValue = new RulerParagraphLeftIndentsCommandValue(null, this.controls.leftIndent.currModelState.modelValue, this.currModelState.modelValue);
+        const commandValue = new RulerParagraphLeftIndentsCommandValue(null, this.controls.leftIndent.currModelState.originalModelValue, this.currModelState.originalModelValue);
         commandValue.setIntervalsInfo(this.modelData.selection.intervalsInfo);
         this.modelData.commandManager.getCommand(RichEditClientCommand.RulerParagraphLeftIndents)
             .execute(this.modelData.commandManager.isPublicApiCall, commandValue);

package/lib/common/ui/ruler/controls/indent/left.js

@@ -44,7 +44,7 @@ export class RulerLeftIndentDragHandle extends RulerBaseIndentControl {
     }
     getModelState() {
         const state = this.modelData.commandManager.getCommand(RichEditClientCommand.RulerParagraphLeftIndents).getState();
-        return new RulerModelState(state.value.hanging, state.enabled);
+        return new RulerModelState(state.value.hanging, state.enabled, this.modelData);
     }
     updateView() {
         const newViewState = this.controls.paragraphLeftPosition + this.currModelState.modelValue;
@@ -68,7 +68,7 @@ export class RulerLeftIndentDragHandle extends RulerBaseIndentControl {
         return false;
     }
     onMouseUp() {
-        const commandValue = new RulerParagraphLeftIndentsCommandValue(null, this.currModelState.modelValue, this.controls.firstLineIndent.currModelState.modelValue);
+        const commandValue = new RulerParagraphLeftIndentsCommandValue(null, this.currModelState.originalModelValue, this.controls.firstLineIndent.currModelState.originalModelValue);
         commandValue.setIntervalsInfo(this.modelData.selection.intervalsInfo);
         this.modelData.commandManager.getCommand(RichEditClientCommand.RulerParagraphLeftIndents)
             .execute(this.modelData.commandManager.isPublicApiCall, commandValue);

package/lib/common/ui/ruler/controls/indent/right.js

@@ -29,7 +29,7 @@ export class RulerRightIndentDragHandle extends RulerBaseIndentControl {
     getModelState() {
         const state = this.modelData.commandManager
             .getCommand(RichEditClientCommand.RulerParagraphRightIndent).getState();
-        return new RulerModelState(state.value.hanging, state.enabled);
+        return new RulerModelState(state.value.hanging, state.enabled, this.modelData);
     }
     updateView() {
         const newViewState = this.correctRelativeLeftIndents(this.controls.ruler.pageWidth - this.controls.paragraphRightPosition + this.currModelState.modelValue);
@@ -48,7 +48,7 @@ export class RulerRightIndentDragHandle extends RulerBaseIndentControl {
     canHandle(source) { return source == this.rootElement; }
     onMouseUp() {
         this.modelData.commandManager.getCommand(RichEditClientCommand.RulerParagraphRightIndent)
-            .execute(this.modelData.commandManager.isPublicApiCall, this.currModelState.modelValue);
+            .execute(this.modelData.commandManager.isPublicApiCall, this.currModelState.originalModelValue);
         this.finishHandle();
     }
     lineControlSetPosition() {

package/lib/common/ui/ruler/controls/margin/base.js

@@ -31,12 +31,12 @@ export class RulerBaseMarginControl extends RulerBase {
     }
     onMouseMove(distance, _source) {
         this.calculateNewModelState(distance);
-        this.controls.columns.marginsChanged(this.currModelState.modelValue - this.prevModelState.modelValue);
+        this.controls.columns.marginsChanged(this.currModelState.originalModelValue - this.prevModelState.originalModelValue);
         this.updateView();
         this.lineControlSetPosition();
     }
     onMouseUp() {
-        this.modelData.commandManager.getCommand(this.commandType).execute(this.modelData.commandManager.isPublicApiCall, this.currModelState.modelValue);
+        this.modelData.commandManager.getCommand(this.commandType).execute(this.modelData.commandManager.isPublicApiCall, this.currModelState.originalModelValue);
         this.finishHandle();
     }
     onEscPress() {
@@ -45,7 +45,7 @@ export class RulerBaseMarginControl extends RulerBase {
     }
     getModelState() {
         const state = this.modelData.commandManager.getCommand(this.commandType).getState();
-        return new RulerModelState(state.value, state.enabled);
+        return new RulerModelState(state.value, state.enabled, this.modelData);
     }
     finishHandle() {
         this.controls.lineControl.hide();

package/lib/common/ui/ruler/controls/owner.d.ts

@@ -16,6 +16,8 @@ export declare abstract class RulerMultiControl<TSubControl extends IRulerSubCon
     protected handleControlIndex: number;
     protected get activeSubControl(): TSubControl;
     protected viewState: TVisualState[];
+    protected zoomLevel: number;
+    protected zoomChanged: boolean;
     protected abstract getModelState(): TModelState;
     abstract updateView(): void;
     protected abstract createSubControl(): TSubControl;

package/lib/common/ui/ruler/controls/owner.js

@@ -4,6 +4,8 @@ export class RulerMultiControl {
         this.subControls = [];
         this.handleControlIndex = -1;
         this.viewState = [];
+        this.zoomLevel = 1.0;
+        this.zoomChanged = false;
         this.modelData = modelData;
         this.controls = controls;
     }
@@ -19,6 +21,8 @@ export class RulerMultiControl {
     updateModelState() {
         this.currModelState = this.getModelState();
         this.prevModelState = this.currModelState.clone();
+        this.zoomChanged = this.zoomLevel != this.modelData.zoomLevel;
+        this.zoomLevel = this.modelData.zoomLevel;
     }
     onMouseMove(distance, _source) {
         this.calculateNewModelState(distance);

package/lib/common/ui/ruler/controls/ruler.js

@@ -30,7 +30,7 @@ export class RulerControl extends RulerBase {
         this.rootElement.style.paddingTop = this.controls.firstLineIndent.heightOfProtrudingPart + "px";
     }
     updateModelState() {
-        this.currPageWidth = UnitConverter.twipsToPixelsF(this.modelData.inputPosition.getMergedSectionPropertiesRaw().pageSize.width);
+        this.currPageWidth = UnitConverter.twipsToPixelsF(this.modelData.inputPosition.getMergedSectionPropertiesRaw().pageSize.width) * this.modelData.zoomLevel;
     }
     updateView() {
         if (this.prevPageWidth != this.currPageWidth) {
@@ -41,9 +41,13 @@ export class RulerControl extends RulerBase {
     }
     adjust() {
         const viewWidth = this.controls.canvas.clientWidth;
-        const paddingLeft = DomUtils.pxToInt(DomUtils.getCurrentStyle(this.controls.canvas).paddingLeft);
-        const minValue = paddingLeft - RULLER_NUMBER_CORRECTION;
-        this.initialMarginLeftElement = Math.max((viewWidth - this.pageWidth - RULLER_NUMBER_CORRECTION * 2) / 2, minValue);
+        if (viewWidth > this.pageWidth)
+            this.initialMarginLeftElement = (viewWidth - this.pageWidth - RULLER_NUMBER_CORRECTION * 2) / 2;
+        else {
+            const paddingLeft = DomUtils.pxToInt(DomUtils.getCurrentStyle(this.controls.canvas).paddingLeft);
+            const pageAreaBorderWidth = (this.controls.canvas.scrollWidth - paddingLeft - this.pageWidth) / 2;
+            this.initialMarginLeftElement = paddingLeft + pageAreaBorderWidth - RULLER_NUMBER_CORRECTION;
+        }
         this.rootElement.style.left = this.calculateLeftOffset();
         this.setPaddings();
         this.canHandleScroll = this.controls.canvas.scrollWidth > this.controls.canvas.offsetWidth;

package/lib/common/ui/ruler/controls/tab/tab-info.d.ts

@@ -0,0 +1,15 @@
+import { TabAlign } from '../../../../model/paragraph/paragraph';
+import { TabLeaderType } from '../../../../layout/main-structures/layout-boxes/layout-tab-space-box';
+import { IZoomLevelHolder } from '../../../../interfaces/i-zoom-level-holder';
+import { TabInfoBase } from '../../../../model/paragraph/paragraph-style';
+export declare class RulerTabInfo extends TabInfoBase<RulerTabInfo> {
+    zoomLevelHolder: IZoomLevelHolder;
+    private zoomablePosition;
+    get position(): number;
+    set position(value: number);
+    get originalPosition(): number;
+    set originalPosition(value: number);
+    constructor(position: number, alignment: TabAlign, leader: TabLeaderType, deleted: boolean, isDefault: boolean, zoomLevelHolder: IZoomLevelHolder);
+    clone(): RulerTabInfo;
+    equals(obj: RulerTabInfo): boolean;
+}

package/lib/common/ui/ruler/controls/tab/tab-info.js

@@ -0,0 +1,19 @@
+import { RulerValue } from '../zoomable-value';
+import { TabInfoBase } from '../../../../model/paragraph/paragraph-style';
+export class RulerTabInfo extends TabInfoBase {
+    get position() { return this.zoomablePosition.value; }
+    set position(value) { this.zoomablePosition.value = value; }
+    get originalPosition() { return this.zoomablePosition.originalValue; }
+    set originalPosition(value) { this.zoomablePosition.originalValue = value; }
+    constructor(position, alignment, leader, deleted, isDefault, zoomLevelHolder) {
+        super(alignment, leader, deleted, isDefault);
+        this.zoomLevelHolder = zoomLevelHolder;
+        this.zoomablePosition = new RulerValue(position, zoomLevelHolder);
+    }
+    clone() {
+        return new RulerTabInfo(this.originalPosition, this.alignment, this.leader, this.deleted, this.isDefault, this.zoomLevelHolder);
+    }
+    equals(obj) {
+        return super.equals(obj) && this.originalPosition == obj.originalPosition;
+    }
+}

package/lib/common/ui/ruler/controls/tab/tab.d.ts

@@ -1,13 +1,13 @@
 import { TabAlign } from '../../../../model/paragraph/paragraph';
-import { TabInfo } from '../../../../model/paragraph/paragraph-style';
 import { RulerControls } from '../../manager';
 import { RulerModelData } from '../../model-data';
 import { RulerMultiControl } from '../owner';
 import { RulerShadow } from '../shadow';
+import { RulerTabInfo } from './tab-info';
 export declare class RulerTabsControlState {
-    tabs: TabInfo[];
+    tabs: RulerTabInfo[];
     enabled: boolean;
-    constructor(tabs: TabInfo[], enabled: boolean);
+    constructor(tabs: RulerTabInfo[], enabled: boolean);
     clone(): RulerTabsControlState;
 }
 export declare class RulerTabViewState {

package/lib/common/ui/ruler/controls/tab/tab.js

@@ -1,7 +1,6 @@
 import { EvtUtils } from '@devexpress/utils/lib/utils/evt';
 import { TabLeaderType } from '../../../../layout/main-structures/layout-boxes/layout-tab-space-box';
 import { TabAlign } from '../../../../model/paragraph/paragraph';
-import { TabInfo } from '../../../../model/paragraph/paragraph-style';
 import { MinMaxNumber } from '@devexpress/utils/lib/class/min-max';
 import { UnitConverter } from '@devexpress/utils/lib/class/unit-converter';
 import { DomUtils } from '@devexpress/utils/lib/utils/dom';
@@ -13,6 +12,7 @@ import { RulerMultiControl } from '../owner';
 import { RulerShadow } from '../shadow';
 import { RulerLineDisplayType, SnapTo } from '../vertical-line';
 import { RulerTabUtils } from './utils';
+import { RulerTabInfo } from './tab-info';
 const RULLER_TABMARK_Y_POSITION = 6;
 var TabAction;
 (function (TabAction) {
@@ -27,7 +27,8 @@ export class RulerTabsControlState {
         this.enabled = enabled;
     }
     clone() {
-        return new RulerTabsControlState(ListUtils.deepCopy(this.tabs), this.enabled);
+        const clonedTabs = ListUtils.deepCopy(this.tabs);
+        return new RulerTabsControlState(clonedTabs, this.enabled);
     }
 }
 export class RulerTabViewState {
@@ -54,9 +55,7 @@ export class RulerTabsControl extends RulerMultiControl {
         if (this.modelData.showTabs) {
             const paragraph = this.modelData.selection.activeSubDocument.getParagraphByPosition(this.modelData.selection.intervalsInfo.interval.start);
             const tabs = ListUtils.map(paragraph.getTabs().positions, tab => {
-                const newTab = tab.clone();
-                newTab.position = UnitConverter.twipsToPixelsF(tab.position);
-                return newTab;
+                return new RulerTabInfo(UnitConverter.twipsToPixelsF(tab.position), tab.alignment, tab.leader, tab.deleted, tab.isDefault, this.modelData);
             });
             return new RulerTabsControlState(tabs, true);
         }
@@ -106,8 +105,8 @@ export class RulerTabsControl extends RulerMultiControl {
         if (this.isTabMarkZone(evt) && pos >= this.minPosition() && pos <= this.maxPosition()) {
             this.tabAction = TabAction.Insert;
             this.handleControlIndex = this.currModelState.tabs.length;
-            const tabPosition = this.controls.chooseClosestAnchorPosition(pos, [], new MinMaxNumber(this.minPosition(), this.maxPosition()));
-            this.newTab = new TabInfo(tabPosition, this.controls.tabTypeBox.align, TabLeaderType.None, false, false);
+            const tabPosition = this.controls.chooseClosestAnchorPosition(pos, [], new MinMaxNumber(this.minPosition(), this.maxPosition())) / this.modelData.zoomLevel;
+            this.newTab = new RulerTabInfo(tabPosition, this.controls.tabTypeBox.align, TabLeaderType.None, false, false, this.modelData);
             this.currModelState.tabs.push(this.newTab.clone());
             this.updateView();
             this.updatePresentation();
@@ -138,20 +137,20 @@ export class RulerTabsControl extends RulerMultiControl {
                 else {
                     const tab = this.currModelState.tabs[this.handleControlIndex];
                     this.modelData.commandManager.getCommand(RichEditClientCommand.InsertTabRuler)
-                        .execute(this.modelData.commandManager.isPublicApiCall, { position: tab.position, align: tab.alignment });
+                        .execute(this.modelData.commandManager.isPublicApiCall, { position: tab.originalPosition, align: tab.alignment });
                 }
                 break;
             }
             case TabAction.Move: {
                 if (this.deleteTab) {
                     this.modelData.commandManager.getCommand(RichEditClientCommand.DeleteTabRuler)
-                        .execute(this.modelData.commandManager.isPublicApiCall, this.prevModelState.tabs[this.handleControlIndex].position);
+                        .execute(this.modelData.commandManager.isPublicApiCall, this.prevModelState.tabs[this.handleControlIndex].originalPosition);
                 }
                 else {
                     this.modelData.commandManager.getCommand(RichEditClientCommand.MoveTabRuler)
                         .execute(this.modelData.commandManager.isPublicApiCall, {
-                        start: this.prevModelState.tabs[this.handleControlIndex].position,
-                        end: this.currModelState.tabs[this.handleControlIndex].position
+                        start: this.prevModelState.tabs[this.handleControlIndex].originalPosition,
+                        end: this.currModelState.tabs[this.handleControlIndex].originalPosition
                     });
                 }
                 break;

package/lib/common/ui/ruler/controls/table.js

@@ -39,7 +39,7 @@ export class RulerTablesControl extends RulerMultiControl {
         const state = this.modelData.commandManager.getCommand(RichEditClientCommand.RulerTableColumnSeparators).getState();
         return state.enabled ?
             new RulerTableModelState(state.value, state.value.tableIndex, state.enabled) :
-            new RulerTableModelState(new TableColumnSeparatorStruct(), -1, false);
+            new RulerTableModelState(new TableColumnSeparatorStruct(this.modelData), -1, false);
     }
     updateView() {
         const offset = this.controls.leftMargin.currModelState.modelValue + this.controls.columns.currModelState.activeColumn.leftPos;
@@ -71,9 +71,10 @@ export class RulerTablesControl extends RulerMultiControl {
         });
     }
     onMouseUp() {
-        const oldPos = this.prevModelState.columnSeparators.items[this.handleControlIndex].position;
-        const newPos = this.currModelState.columnSeparators.items[this.handleControlIndex].position;
-        const param = new RulerChangeTableColumnWidthCommandParameters(this.currModelState.tableIndex, newPos - oldPos, null, oldPos, true);
+        const oldPos = this.prevModelState.columnSeparators.items[this.handleControlIndex].originalPosition;
+        const newPos = this.currModelState.columnSeparators.items[this.handleControlIndex].originalPosition;
+        const diffPos = newPos - oldPos;
+        const param = new RulerChangeTableColumnWidthCommandParameters(this.currModelState.tableIndex, diffPos, null, oldPos, true);
         this.modelData.commandManager.getCommand(RichEditClientCommand.RulerChangeTableColumnWidth)
             .execute(this.modelData.commandManager.isPublicApiCall, param);
         this.finishHandle();

package/lib/common/ui/ruler/controls/vertical-line.js

@@ -1,7 +1,6 @@
 import { DomUtils } from '@devexpress/utils/lib/utils/dom';
 import { DocumentRenderer } from '../../../canvas/renderes/common/document-renderer';
 import { RULLER_NUMBER_CORRECTION } from '../settings';
-import { SizeUtils } from '../../../../common/utils/size-utils';
 export const TABLE_COLUMN_SEPARATOR_RULER_LINE_CLASS_NAME = " table";
 export var SnapTo;
 (function (SnapTo) {
@@ -34,7 +33,7 @@ export class RulerVerticalLineControl {
             DomUtils.addClassName(this.rootElement, TABLE_COLUMN_SEPARATOR_RULER_LINE_CLASS_NAME);
         else
             DomUtils.removeClassName(this.rootElement, TABLE_COLUMN_SEPARATOR_RULER_LINE_CLASS_NAME);
-        this.rootElement.style.height = SizeUtils.getClientHeight(this.canvas) + "px";
+        this.rootElement.style.height = this.canvas.clientHeight + "px";
         this.rootElement.style.top = this.canvas.offsetTop + "px";
         this.rulerControlLeft = this.rulerControlElement.offsetLeft;
         this.rulerControlWidth = this.rulerControlElement.offsetWidth;

package/lib/common/ui/ruler/controls/zoomable-value.d.ts

@@ -0,0 +1,8 @@
+import { IZoomLevelHolder } from '../../../interfaces/i-zoom-level-holder';
+export declare class RulerValue {
+    originalValue: number;
+    private zoomLevelHolder;
+    set value(value: number);
+    get value(): number;
+    constructor(originalValue: number, zoomLevelHolder: IZoomLevelHolder);
+}