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

package/lib/common/input-controller.js

@@ -708,6 +708,7 @@ export class IFrameInputEditor extends InputEditorBase {
     }
     startInputIME() {
         this.inputElement.style.position = "absolute";
+        this.inputElement.style.zoom = this.control.viewManager.zoomLevel;
         const lastSelectedIntervalStartPosition = this.control.selection.lastSelectedInterval.start;
         const subDocument = this.control.selection.activeSubDocument;
         const layoutPosition = subDocument.isMain() ?
@@ -721,6 +722,9 @@ export class IFrameInputEditor extends InputEditorBase {
         const propChar = HtmlConverter.getSizeSignificantRules(this.control.inputPosition.getMergedCharacterPropertiesRaw()).join(";");
         this.editableDocument.body.style.cssText = "padding: 0px; margin: 0px; overflow: hidden; color: transparent; " + propChar;
         this.editableDocument.body.style.textIndent = currentTextIndent;
+        if (Browser.Firefox) {
+            this.editableDocument.body.style.zoom = this.control.viewManager.zoomLevel;
+        }
         let layoutX = layoutPosition.getLayoutX(this.control.measurer, DocumentLayoutDetailsLevel.Row);
         const layoutPoint = new LayoutPoint(layoutPosition.pageIndex, layoutX, layoutPosition.getLayoutY(DocumentLayoutDetailsLevel.Row));
         const pageElement = this.control.viewManager.cache[layoutPoint.pageIndex].page;

package/lib/common/interfaces/i-zoom-level-holder.d.ts

@@ -0,0 +1,3 @@
+export interface IZoomLevelHolder {
+    zoomLevel: number;
+}

package/lib/common/interfaces/i-zoom-level-holder.js

@@ -0,0 +1 @@
+export {};

package/lib/common/layout/document-layout.d.ts

@@ -2,6 +2,7 @@ import { DocumentModel } from '../model/document-model';
 import { PositionManager } from '../model/position/position-manager';
 import { LayoutAnchoredObjectBox } from './main-structures/layout-boxes/layout-anchored-object-box';
 import { LayoutPage } from './main-structures/layout-page';
+import { CanvasSizeInfo } from '../canvas/canvas-size-info';
 import { Grid } from '../layout-formatter/table/grid-engine/grid';
 import { Table } from '../model/tables/main-structures/table';
 export declare class ModelPositionHolder {
@@ -33,4 +34,5 @@ export declare class DocumentLayout {
     getLastValidPage(): LayoutPage;
     isPageValid(pageIndex: number): boolean;
     getPageBySubDocumentId(subDocumentId: number): LayoutPage;
+    findPageIndexByOffsetY(offsetY: number, sizeInfo: CanvasSizeInfo): number;
 }

package/lib/common/layout/document-layout.js

@@ -1,5 +1,6 @@
 import { NumberMapUtils } from '@devexpress/utils/lib/utils/map/number';
 import { ColorHelper } from '../model/color/color';
+import { SearchUtils } from '@devexpress/utils/lib/utils/search';
 export class ModelPositionHolder {
     constructor(pos, posManager) {
         this.pos = posManager.registerPosition(pos);
@@ -64,4 +65,7 @@ export class DocumentLayout {
     getPageBySubDocumentId(subDocumentId) {
         return this.pages.find((page) => !!page.mainSubDocumentPageAreas[subDocumentId] || !!page.otherPageAreas[subDocumentId]);
     }
+    findPageIndexByOffsetY(offsetY, sizeInfo) {
+        return Math.max(0, SearchUtils.normedInterpolationIndexOf(this.pages, (p) => sizeInfo.getPageOffsetY(p), offsetY));
+    }
 }

package/lib/common/layout-formatter/formatter/base-formatter.js

@@ -233,7 +233,8 @@ export class BaseFormatter {
             const minPageContentHeight = bottomPosition + margins.bottom;
             const minVisibleAreaHeight = minPageContentHeight +
                 pageInfo.topMargin + pageInfo.topPageBorderWidth + pageInfo.bottomPageBorderWidth + pageInfo.bottomMargin;
-            const diff = Math.floor(Math.max(0, this.manager.controlHeightProvider.getVisibleAreaHeight(false) - minVisibleAreaHeight));
+            const zoomLevel = this.manager.innerClientProperties.viewsSettings.zoomLevel;
+            const diff = Math.floor(Math.max(0, this.manager.controlHeightProvider.getVisibleAreaHeight(false) / zoomLevel - minVisibleAreaHeight));
             const finalPageHeight = minPageContentHeight + diff;
             const columnHeight = finalPageHeight - margins.vertical;
             this.layoutPosition.column.height = columnHeight;

package/lib/common/model/borders/border-info.js

@@ -5,7 +5,7 @@ import { BorderLineStyle } from './enums';
 import { LayoutBorder } from './layout-border';
 export class BorderInfo {
     constructor() {
-        this.style = BorderLineStyle.Nil;
+        this.style = BorderLineStyle.None;
         this.color = ColorModelInfoCache.defaultItem;
         this.width = 0;
         this.offset = 0;

package/lib/common/model/changes/change.d.ts

@@ -17,6 +17,7 @@ import { LoadFontInfoModelChange } from './model/load-font';
 import { PageColorModelChange } from './model/page-color';
 import { SectionsFormattingChangedModelChange } from './model/section-formatting-changed';
 import { SectionMergedSubDocumentChange } from './model/section-merged';
+import { ZoomLevelChange } from './model/zoom-level';
 import { AnchorInfoPropertyChangedSubDocumentChange } from './sub-document/anchor/anchor-info-property-changed';
 import { AnchoredTextBoxPropertiesChangedSubDocumentChange } from './sub-document/anchor/anchored-text-box-properties-changed';
 import { AnchoredTextBoxSizeChangedSubDocumentChange } from './sub-document/anchor/anchored-text-box-size-changed';
@@ -66,4 +67,4 @@ import { ParagraphMergedSubDocumentChange } from './sub-document/text/paragraph-
 import { SectionInsertedSubDocumentChange } from './sub-document/text/section-inserted';
 import { SimpleRunInsertedSubDocumentChange } from './sub-document/text/simple-run-inserted';
 import { TextBufferChangedSubDocumentChange } from './sub-document/text/text-buffer-changed';
-export type ModelChange = PageColorModelChange | DefaultTabWidthModelChange | DifferentOddAndEvenPagesModelChange | HeaderFooterCreatedModelChange | HeaderFooterIndexChangedModelChange | LoadFontInfoModelChange | SectionsFormattingChangedModelChange | CreateStyleLinkModelChange | DeleteStyleLinkModelChange | DocumentProtectionChangedModelChange | AbstractNumberingListAddedModelChange | AbstractNumberingListDeletedModelChange | NumberingListAddedModelChange | NumberingListDeletedModelChange | ListLevelPropertyChangedModelChange | ListLevelParagraphPropertyChangedModelChange | ListLevelCharacterPropertyChangedModelChange | IOverrideListLevelChangedModelChange | BookmarkCreatedSubDocumentChange | BookmarkDeletedSubDocumentChange | TabInsertedSubDocumentChange | TabDeletedSubDocumentChange | LoadPicturesInfoSubDocumentChange | InlinePictureInsertedSubDocumentChange | InlinePicturesUpdatedSubDocumentChange | AnchoredPictureInsertedSubDocumentChange | AnchoredPictureSizeChangedSubDocumentChange | InlineObjectRunPropertyChangedSubDocumentChange | FieldInsertedSubDocumentChange | FieldDeletedSubDocumentChange | HyperlinkInfoChangedSubDocumentChange | FieldsShowCodeChangedSubDocumentChange | SimpleRunInsertedSubDocumentChange | TextBufferChangedSubDocumentChange | ParagraphInsertedSubDocumentChange | SectionInsertedSubDocumentChange | AnchoredTextBoxInsertedSubDocumentChange | AnchorObjectRemovedSubDocumentChange | IntervalRemovedSubDocumentChange | ParagraphMergedSubDocumentChange | SectionMergedSubDocumentChange | CharacterFormattingChangedSubDocumentChange | CharacterPropertiesChangedSubDocumentChange | ParagraphFormattingChangedSubDocumentChange | ParagraphPropertiesChangedSubDocumentChange | ParagraphAndCharacterMergedPropertiesResetSubDocumentChange | AnchoredTextBoxSizeChangedSubDocumentChange | AnchoredTextBoxPropertiesChangedSubDocumentChange | AnchorInfoPropertyChangedSubDocumentChange | ShapeChangedSubDocumentChange | ShapePropertyChangedSubDocumentChange | CharacterStyleAppliedSubDocumentChange | ParagraphStyleAppliedSubDocumentChange | TableStyleChangedSubDocumentChange | ParagraphNumberingListChangedSubDocumentChange | TableCreatedSubDocumentChange | TableRemovedSubDocumentChange | TableStartPositionShiftedSubDocumentChange | TableCellPropertyChangedSubDocumentChange | TablePropertyChangedSubDocumentChange | TableRowPropertyChangedSubDocumentChange | TableCellSplittedHorizontallySubDocumentChange | TableCellMergedHorizontallySubDocumentChange | TableRowInsertedSubDocumentChange | TableRowRemovedSubDocumentChange | TableCellRemovedSubDocumentChange | TableCellInsertedSubDocumentChange | RangePermissionsChangedSubDocumentChange | RangePermissionsPropertiesChange;
+export type ModelChange = PageColorModelChange | DefaultTabWidthModelChange | DifferentOddAndEvenPagesModelChange | HeaderFooterCreatedModelChange | HeaderFooterIndexChangedModelChange | LoadFontInfoModelChange | SectionsFormattingChangedModelChange | CreateStyleLinkModelChange | DeleteStyleLinkModelChange | DocumentProtectionChangedModelChange | AbstractNumberingListAddedModelChange | AbstractNumberingListDeletedModelChange | NumberingListAddedModelChange | NumberingListDeletedModelChange | ListLevelPropertyChangedModelChange | ListLevelParagraphPropertyChangedModelChange | ListLevelCharacterPropertyChangedModelChange | IOverrideListLevelChangedModelChange | BookmarkCreatedSubDocumentChange | BookmarkDeletedSubDocumentChange | TabInsertedSubDocumentChange | TabDeletedSubDocumentChange | LoadPicturesInfoSubDocumentChange | InlinePictureInsertedSubDocumentChange | InlinePicturesUpdatedSubDocumentChange | AnchoredPictureInsertedSubDocumentChange | AnchoredPictureSizeChangedSubDocumentChange | InlineObjectRunPropertyChangedSubDocumentChange | FieldInsertedSubDocumentChange | FieldDeletedSubDocumentChange | HyperlinkInfoChangedSubDocumentChange | FieldsShowCodeChangedSubDocumentChange | SimpleRunInsertedSubDocumentChange | TextBufferChangedSubDocumentChange | ParagraphInsertedSubDocumentChange | SectionInsertedSubDocumentChange | AnchoredTextBoxInsertedSubDocumentChange | AnchorObjectRemovedSubDocumentChange | IntervalRemovedSubDocumentChange | ParagraphMergedSubDocumentChange | SectionMergedSubDocumentChange | CharacterFormattingChangedSubDocumentChange | CharacterPropertiesChangedSubDocumentChange | ParagraphFormattingChangedSubDocumentChange | ParagraphPropertiesChangedSubDocumentChange | ParagraphAndCharacterMergedPropertiesResetSubDocumentChange | AnchoredTextBoxSizeChangedSubDocumentChange | AnchoredTextBoxPropertiesChangedSubDocumentChange | AnchorInfoPropertyChangedSubDocumentChange | ShapeChangedSubDocumentChange | ShapePropertyChangedSubDocumentChange | CharacterStyleAppliedSubDocumentChange | ParagraphStyleAppliedSubDocumentChange | TableStyleChangedSubDocumentChange | ParagraphNumberingListChangedSubDocumentChange | TableCreatedSubDocumentChange | TableRemovedSubDocumentChange | TableStartPositionShiftedSubDocumentChange | TableCellPropertyChangedSubDocumentChange | TablePropertyChangedSubDocumentChange | TableRowPropertyChangedSubDocumentChange | TableCellSplittedHorizontallySubDocumentChange | TableCellMergedHorizontallySubDocumentChange | TableRowInsertedSubDocumentChange | TableRowRemovedSubDocumentChange | TableCellRemovedSubDocumentChange | TableCellInsertedSubDocumentChange | RangePermissionsChangedSubDocumentChange | RangePermissionsPropertiesChange | ZoomLevelChange;

package/lib/common/model/changes/enums.d.ts

@@ -67,5 +67,6 @@ export declare enum ModelChangeType {
     TableCellRemoved = 65,
     TableCellInserted = 66,
     RangePermissionsChanged = 67,
-    RangePermissionsPropertiesChanged = 68
+    RangePermissionsPropertiesChanged = 68,
+    ZoomLevelChanged = 69
 }

package/lib/common/model/changes/enums.js

@@ -69,4 +69,5 @@ export var ModelChangeType;
     ModelChangeType[ModelChangeType["TableCellInserted"] = 66] = "TableCellInserted";
     ModelChangeType[ModelChangeType["RangePermissionsChanged"] = 67] = "RangePermissionsChanged";
     ModelChangeType[ModelChangeType["RangePermissionsPropertiesChanged"] = 68] = "RangePermissionsPropertiesChanged";
+    ModelChangeType[ModelChangeType["ZoomLevelChanged"] = 69] = "ZoomLevelChanged";
 })(ModelChangeType || (ModelChangeType = {}));

package/lib/common/model/changes/model/zoom-level.d.ts

@@ -0,0 +1,8 @@
+import { ModelChangeBase } from '../change-base';
+import { ModelChangeType } from '../enums';
+export declare class ZoomLevelChange implements ModelChangeBase {
+    zoomLevel: number;
+    prevZoomLevel: number;
+    readonly type = ModelChangeType.ZoomLevelChanged;
+    constructor(zoomLevel: number, prevZoomLevel: number);
+}

package/lib/common/model/changes/model/zoom-level.js

@@ -0,0 +1,8 @@
+import { ModelChangeType } from '../enums';
+export class ZoomLevelChange {
+    constructor(zoomLevel, prevZoomLevel) {
+        this.zoomLevel = zoomLevel;
+        this.prevZoomLevel = prevZoomLevel;
+        this.type = ModelChangeType.ZoomLevelChanged;
+    }
+}

package/lib/common/model/character/character-properties.d.ts

@@ -54,7 +54,7 @@ export declare class MaskedCharacterProperties extends CharacterProperties imple
     protected calculateHash(): number;
     getUseValue(value: CharacterPropertiesMask): boolean;
     setUseValue(mask: CharacterPropertiesMask, value: boolean): void;
-    setUseValueFull(value: number, onlyForDefault?: boolean): void;
+    setUseValueFull(value: number): void;
     getLowPartUseValue(value: number): number;
     getHighPartUseValue(value: number): number;
     getUseValueFull(): number;

package/lib/common/model/character/character-properties.js

@@ -5,7 +5,6 @@ import { ColorHelper } from '../color/color';
 import { ColorModelInfo } from '../color/color-model-info';
 import { ShadingInfo } from '../shadings/shading-info';
 import { ShadingPattern } from '../shadings/shading-pattern';
-import { CharacterPropertyDescriptor } from './character-property-descriptor';
 import { CompositeFontInfo } from './composite-font-info';
 import { CharacterFormattingScript, CharacterPropertiesMask, StrikeoutType, UnderlineType } from './enums';
 import { LangInfo } from './lang-info';
@@ -144,19 +143,8 @@ export class MaskedCharacterProperties extends CharacterProperties {
             this.useValueExt &= ~this.getHighPartUseValue(mask);
         }
     }
-    setUseValueFull(value, onlyForDefault = false) {
-        const lowPartUseValue = this.getLowPartUseValue(value);
-        if (onlyForDefault) {
-            CharacterPropertyDescriptor.ALL_FIELDS.forEach((desc) => {
-                const prop = desc.getProp(this);
-                const mask = desc.maskValue();
-                if (desc.binaryEquals(prop, desc.defaultValue))
-                    this.setUseValue(mask, !!(mask & lowPartUseValue));
-            });
-        }
-        else {
-            this.useValue = lowPartUseValue;
-        }
+    setUseValueFull(value) {
+        this.useValue = this.getLowPartUseValue(value);
         this.useValueExt = this.getHighPartUseValue(value);
     }
     getLowPartUseValue(value) {

package/lib/common/model/creator/creator.js

@@ -27,6 +27,7 @@ import { TableRowProperties, TableRowPropertiesMask } from '../tables/properties
 import { TableConditionalStyle } from '../tables/styles/table-conditional-style';
 import { TableStyle } from '../tables/styles/table-style';
 import { SystemColorValues } from '../themes/enums';
+import { TableWidthUnitType } from '../tables/secondary-structures/table-units';
 export class ModelCreator {
     constructor(options) {
         this.options = options;
@@ -122,6 +123,11 @@ export class ModelCreator {
         }
         if (this.options.fillTableStyles) {
             const tableConditionalStyle = new TableConditionalStyle(templateTableProp, templateTableRowProp, templateTableCellProp, templateParProp, templateCharProps, templateTabProp);
+            tableConditionalStyle.tableProperties.cellMargins.left.type = TableWidthUnitType.ModelUnits;
+            tableConditionalStyle.tableProperties.cellMargins.left.value = 108;
+            tableConditionalStyle.tableProperties.cellMargins.right.type = TableWidthUnitType.ModelUnits;
+            tableConditionalStyle.tableProperties.cellMargins.right.value = 108;
+            tableConditionalStyle.tableProperties.mask = TablePropertiesMask.UseLeftMargin | TablePropertiesMask.UseRightMargin;
             model.stylesManager.addTableStyle(new TableStyle(TableStyle.DEFAULT_STYLENAME, TableStyle.DEFAULT_STYLENAME, false, false, false, true, {}, tableConditionalStyle, null));
         }
         if (this.options.initOfficeTheme)

package/lib/common/model/history/items/character-properties-history-items.d.ts

@@ -14,8 +14,7 @@ import { HistoryItemIntervalStateObject, HistoryItemIntervalUseStateObject } fro
 export declare class FontUseValueHistoryItem extends IntervalBasedHistoryItem {
     oldState: HistoryItemIntervalState<HistoryItemIntervalStateObject>;
     newValue: number;
-    keepCustomFormatting: boolean;
-    constructor(modelManipulator: ModelManipulator, subDocInterval: SubDocumentInterval, newValue: number, keepCustomFormatting?: boolean);
+    constructor(modelManipulator: ModelManipulator, subDocInterval: SubDocumentInterval, newValue: number);
     redo(): void;
     undo(): void;
 }

package/lib/common/model/history/items/character-properties-history-items.js

@@ -1,13 +1,12 @@
 import { Errors } from '@devexpress/utils/lib/errors';
 import { IntervalBasedHistoryItem } from '../base/interval-based-history-item';
 export class FontUseValueHistoryItem extends IntervalBasedHistoryItem {
-    constructor(modelManipulator, subDocInterval, newValue, keepCustomFormatting = false) {
+    constructor(modelManipulator, subDocInterval, newValue) {
         super(modelManipulator, subDocInterval);
         this.newValue = newValue;
-        this.keepCustomFormatting = keepCustomFormatting;
     }
     redo() {
-        this.oldState = this.modelManipulator.characterProperties.useValue.setValue(this.boundSubDocument, this.interval, this.newValue, this.keepCustomFormatting);
+        this.oldState = this.modelManipulator.characterProperties.useValue.setValue(this.boundSubDocument, this.interval, this.newValue);
     }
     undo() {
         this.modelManipulator.characterProperties.useValue.restoreValue(this.boundSubDocument, this.oldState);

package/lib/common/model/json/enums/json-control-enums.d.ts

@@ -65,5 +65,6 @@ export declare enum JSONControlOptionsProperty {
     PageBreakInsertMode = 31,
     AcceptsTab = 32,
     Download = 33,
-    RaiseClientEventsOnModificationsViaAPI = 34
+    RaiseClientEventsOnModificationsViaAPI = 34,
+    AllowZoom = 35
 }

package/lib/common/model/json/enums/json-control-enums.js

@@ -68,4 +68,5 @@ export var JSONControlOptionsProperty;
     JSONControlOptionsProperty[JSONControlOptionsProperty["AcceptsTab"] = 32] = "AcceptsTab";
     JSONControlOptionsProperty[JSONControlOptionsProperty["Download"] = 33] = "Download";
     JSONControlOptionsProperty[JSONControlOptionsProperty["RaiseClientEventsOnModificationsViaAPI"] = 34] = "RaiseClientEventsOnModificationsViaAPI";
+    JSONControlOptionsProperty[JSONControlOptionsProperty["AllowZoom"] = 35] = "AllowZoom";
 })(JSONControlOptionsProperty || (JSONControlOptionsProperty = {}));

package/lib/common/model/json/exporters/json-control-options-converter.js

@@ -74,6 +74,8 @@ export class JSONControlOptionsConverter {
             result.acceptsTab = obj[JSONControlOptionsProperty.AcceptsTab];
         if (obj[JSONControlOptionsProperty.Download] !== undefined)
             result.download = obj[JSONControlOptionsProperty.Download];
+        if (obj[JSONControlOptionsProperty.AllowZoom] !== undefined)
+            result.allowZoom = obj[JSONControlOptionsProperty.AllowZoom];
         result.raiseClientEventsOnModificationsViaAPI = !!obj[JSONControlOptionsProperty.RaiseClientEventsOnModificationsViaAPI];
         return result;
     }

package/lib/common/model/json/importers/json-importer.js

@@ -124,6 +124,8 @@ export class JSONImporter {
             controlOptions.acceptsTab = !!json[JSONControlOptionsProperty.AcceptsTab];
         if (json[JSONControlOptionsProperty.Download] !== undefined)
             controlOptions.download = json[JSONControlOptionsProperty.Download];
+        if (json[JSONControlOptionsProperty.AllowZoom] !== undefined)
+            controlOptions.allowZoom = json[JSONControlOptionsProperty.AllowZoom];
         controlOptions.raiseClientEventsOnModificationsViaAPI = !!json[JSONControlOptionsProperty.RaiseClientEventsOnModificationsViaAPI];
     }
 }

package/lib/common/model/manipulators/character-properties-manipulator.js

@@ -74,7 +74,7 @@ class CharacterPropertiesUseValueManipulator {
     constructor(manipulator) {
         this.manipulator = manipulator;
     }
-    setValue(subDocument, interval, newValue, keepCustomFormatting = false) {
+    setValue(subDocument, interval, newValue) {
         var oldState = new HistoryItemIntervalState();
         if (!ControlOptions.isEnabled(subDocument.documentModel.options.characterFormatting))
             return oldState;
@@ -84,7 +84,7 @@ class CharacterPropertiesUseValueManipulator {
             var run = iterator.currentRun;
             oldState.register(new HistoryItemIntervalStateObject(iterator.currentInterval(), run.maskedCharacterProperties.getUseValueFull()));
             var properties = run.maskedCharacterProperties.clone();
-            properties.setUseValueFull(newValue, keepCustomFormatting);
+            properties.setUseValueFull(newValue);
             run.setCharacterProperties(properties);
             run.onCharacterPropertiesChanged();
         }

package/lib/common/model/manipulators/i-properties-manipulator.d.ts

@@ -8,7 +8,7 @@ export interface IIntervalPropertyWithUseValueManipulator<T> {
     restoreValue(subDocument: SubDocument, state: HistoryItemIntervalState<HistoryItemIntervalUseStateObject>): any;
 }
 export interface IIntervalPropertyManipulator<T> {
-    setValue(subDocument: SubDocument, interval: FixedInterval, newValue: T, keepCustomFormatting?: boolean): HistoryItemIntervalState<HistoryItemIntervalStateObject>;
+    setValue(subDocument: SubDocument, interval: FixedInterval, newValue: T): HistoryItemIntervalState<HistoryItemIntervalStateObject>;
     restoreValue(subDocument: SubDocument, state: HistoryItemIntervalState<HistoryItemIntervalStateObject>): any;
 }
 export interface IListLevelPropertyManipulator<T> {

package/lib/common/model/manipulators/model-manipulator.d.ts

@@ -62,10 +62,11 @@ export declare class ModelManipulator {
     textBox: TextBoxManipulator;
     paragraph: ParagraphManipulator;
     documentMerger: DocumentMerger;
-    modelListeners: IModelChangesListener[];
+    private modelListeners;
     onFontsChanged: EventDispatcher<IFontsChangesListener>;
     constructor(modelManager: IModelManager, batchUpdatableObject: IBatchUpdatableObject);
     notifyModelChanged(change: ModelChange): void;
+    addModelListener(listener: IModelChangesListener): void;
     removeModelListener(listener: IModelChangesListener): void;
     raiseFontAdded(newFontInfo: FontInfo | null): void;
     raiseFontRemoved(font: FontInfo | null): void;

package/lib/common/model/manipulators/model-manipulator.js

@@ -61,6 +61,10 @@ export class ModelManipulator {
     notifyModelChanged(change) {
         this.modelListeners.forEach(listener => listener.modelChanged(change));
     }
+    addModelListener(listener) {
+        if (this.modelListeners.indexOf(listener) < 0)
+            this.modelListeners.push(listener);
+    }
     removeModelListener(listener) {
         const index = this.modelListeners.indexOf(listener);
         if (index >= 0)

package/lib/common/model/options/control.d.ts

@@ -33,6 +33,7 @@ export declare class ControlOptions {
     tables: DocumentCapability;
     tableStyle: DocumentCapability;
     floatingObjects: DocumentCapability;
+    allowZoom: DocumentCapability;
     acceptsTab: boolean;
     raiseClientEventsOnModificationsViaAPI: boolean;
     static isEnabled(capability: DocumentCapability): boolean;

package/lib/common/model/options/control.js

@@ -35,6 +35,7 @@ export class ControlOptions {
         this.tables = DocumentCapability.Default;
         this.tableStyle = DocumentCapability.Default;
         this.floatingObjects = DocumentCapability.Default;
+        this.allowZoom = DocumentCapability.Default;
         this.acceptsTab = true;
         this.raiseClientEventsOnModificationsViaAPI = true;
     }

package/lib/common/model/paragraph/paragraph-style.d.ts

@@ -42,14 +42,19 @@ export declare class TabProperties implements IEquatable<TabProperties>, IClonea
     setTabs(tabProp: TabProperties): void;
     merge(tabProperties: TabProperties): void;
 }
-export declare class TabInfo implements IEquatable<TabInfo>, ICloneable<TabInfo> {
+export declare abstract class TabInfoBase<T extends TabInfoBase<T>> implements IEquatable<T>, ICloneable<T> {
     alignment: TabAlign;
     leader: TabLeaderType;
-    position: number;
-    isDefault: boolean;
     deleted: boolean;
+    isDefault: boolean;
+    constructor(alignment: TabAlign, leader: TabLeaderType, deleted: boolean, isDefault: boolean);
+    equals(obj: T): boolean;
+    abstract clone(): T;
+}
+export declare class TabInfo extends TabInfoBase<TabInfo> {
+    position: number;
     readonly isParagraphIndent: boolean;
     constructor(position: number, alignment: TabAlign, leader: TabLeaderType, deleted: boolean, isDefault: boolean, isParagraphIndent?: boolean);
-    clone(): TabInfo;
     equals(obj: TabInfo): boolean;
+    clone(): TabInfo;
 }

package/lib/common/model/paragraph/paragraph-style.js

@@ -106,26 +106,32 @@ export class TabProperties {
         this.sort();
     }
 }
-export class TabInfo {
-    constructor(position, alignment, leader, deleted, isDefault, isParagraphIndent = false) {
-        this.position = position;
+export class TabInfoBase {
+    constructor(alignment, leader, deleted, isDefault) {
         this.alignment = alignment;
         this.leader = leader;
-        this.isDefault = isDefault;
         this.deleted = deleted;
-        this.isParagraphIndent = isParagraphIndent;
-    }
-    clone() {
-        return new TabInfo(this.position, this.alignment, this.leader, this.deleted, this.isDefault, this.isParagraphIndent);
+        this.isDefault = isDefault;
     }
     equals(obj) {
         if (!obj)
             return false;
-        return this.alignment == obj.alignment &&
-            this.leader == obj.leader &&
-            this.position == obj.position &&
-            this.deleted == obj.deleted &&
-            this.isDefault == obj.isDefault &&
-            this.isParagraphIndent == obj.isParagraphIndent;
+        return this.alignment === obj.alignment &&
+            this.leader === obj.leader &&
+            this.deleted === obj.deleted &&
+            this.isDefault === obj.isDefault;
+    }
+}
+export class TabInfo extends TabInfoBase {
+    constructor(position, alignment, leader, deleted, isDefault, isParagraphIndent = false) {
+        super(alignment, leader, deleted, isDefault);
+        this.position = position;
+        this.isParagraphIndent = isParagraphIndent;
+    }
+    equals(obj) {
+        return super.equals(obj) && this.position == obj.position;
+    }
+    clone() {
+        return new TabInfo(this.position, this.alignment, this.leader, this.deleted, this.isDefault);
     }
 }

package/lib/common/model/rich-utils.d.ts

@@ -9,6 +9,8 @@ export declare class RichUtils {
     static predefinedFontSizes: number[];
     static minFontSize: number;
     static maxFontSize: number;
+    static minZoomLevel: number;
+    static maxZoomLevel: number;
     static specialCharacters: SpecialCharacters;
     static getSelectedParagraphs(intervals: FixedInterval[], subDocument: SubDocument): {
         paragraphs: Paragraph[];

package/lib/common/model/rich-utils.js

@@ -63,4 +63,6 @@ RichUtils.isAlphanumeric = /^[\u00C0-\u1FFF\u2C00-\uD7FF\w]+$/;
 RichUtils.predefinedFontSizes = [8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72];
 RichUtils.minFontSize = 1;
 RichUtils.maxFontSize = 600;
+RichUtils.minZoomLevel = 0.5;
+RichUtils.maxZoomLevel = 2.0;
 RichUtils.specialCharacters = new SpecialCharacters();

package/lib/common/mouse-handler/resize-box-helper.js

@@ -64,8 +64,8 @@ export class ResizeBoxHelper {
         }
     }
     getSize(evt) {
-        var absDeltaX = evt.absolutePoint.x - (this.startScrollLeft - evt.scroll.x) - this.startX;
-        var absDeltaY = evt.absolutePoint.y - (this.startScrollTop - evt.scroll.y) - this.startY;
+        var absDeltaX = (evt.absolutePoint.x - (this.startScrollLeft - evt.scroll.x) - this.startX) / this.control.viewManager.zoomLevel;
+        var absDeltaY = (evt.absolutePoint.y - (this.startScrollTop - evt.scroll.y) - this.startY) / this.control.viewManager.zoomLevel;
         var deltaX = absDeltaX * Math.cos(this.rotation) - (-absDeltaY) * Math.sin(this.rotation);
         var deltaY = -(absDeltaX * Math.sin(this.rotation) + (-absDeltaY) * Math.cos(this.rotation));
         var newWidth, newHeight;

package/lib/common/rich-edit-core.d.ts

@@ -76,7 +76,6 @@ export declare abstract class RichEditCore implements IRichEditControl {
     private selectionFormatter;
     private scrollFormatter;
     private boxVisualizerManager;
-    private simpleViewCanvasSizeManager;
     private _isDisposed;
     get isReadOnlyPersistent(): boolean;
     lastSavedHistoryItemId: number;

package/lib/common/rich-edit-core.js

@@ -20,7 +20,6 @@ import { afterFontsLoaded, fontWebApiAvailable } from '@devexpress/utils/lib/uti
 import { StringUtils } from '@devexpress/utils/lib/utils/string';
 import { HtmlImporter } from './formats/html/import/html-importer';
 import { AutoCorrectService } from './auto-correct/auto-correct-service';
-import { SimpleViewCanvasSizeManager } from './canvas/renderes/common/document-renderer';
 import { ViewManager } from './canvas/renderes/view-manager';
 import { ClientSideEvents } from './client-side-events';
 import { RichEditClientCommand } from './commands/client-command';
@@ -90,9 +89,8 @@ export class RichEditCore {
             this.searchManager.raiseSearchReset();
             this.clientSideEvents.raiseDocumentChanged();
         });
-        this.simpleViewCanvasSizeManager = new SimpleViewCanvasSizeManager(this.viewManager.canvasManager, this);
         if (this.innerClientProperties.viewsSettings.isSimpleView)
-            this.simpleViewCanvasSizeManager.setViewMode(true);
+            this.viewManager.canvasManager.simpleViewCanvasSizeManager.setViewMode(true);
         if (fontWebApiAvailable())
             afterFontsLoaded(() => {
                 this.invalidateLayoutAfterFontsLoaded();
@@ -141,15 +139,19 @@ export class RichEditCore {
         ]);
         this.modelManager.modelManipulator.clearListeners();
         this.modelManager.history.clear();
-        this.modelManager.modelManipulator.modelListeners.push(this.inputPositionModelChangesListener);
-        this.modelManager.modelManipulator.modelListeners.push(this.layoutFormatterManager.modelChangesListener);
-        this.modelManager.modelManipulator.modelListeners.push(this.selectionModelChangesListener);
-        this.modelManager.modelManipulator.modelListeners.push(new SpellCheckerModelChangesListener(this.spellChecker));
+        this.modelManager.modelManipulator.addModelListener(this.inputPositionModelChangesListener);
+        this.modelManager.modelManipulator.addModelListener(this.layoutFormatterManager.modelChangesListener);
+        this.modelManager.modelManipulator.addModelListener(this.selectionModelChangesListener);
+        this.modelManager.modelManipulator.addModelListener(new SpellCheckerModelChangesListener(this.spellChecker));
         if (this.barHolder.ribbon)
-            this.modelManager.modelManipulator.modelListeners.push(this.barHolder.ribbon);
-        this.modelManager.modelManipulator.modelListeners.push(this.barHolder.contextMenu);
-        this.modelManager.modelManipulator.modelListeners.push(this.horizontalRulerControl);
-        this.modelManager.modelManipulator.modelListeners.push(this.selectionFormatter);
+            this.modelManager.modelManipulator.addModelListener(this.barHolder.ribbon);
+        this.modelManager.modelManipulator.addModelListener(this.barHolder.contextMenu);
+        this.modelManager.modelManipulator.addModelListener(this.horizontalRulerControl);
+        this.modelManager.modelManipulator.addModelListener(this.selectionFormatter);
+        this.modelManager.modelManipulator.addModelListener(this.viewManager);
+        this.modelManager.modelManipulator.addModelListener(this.viewManager.canvasManager.simpleViewCanvasSizeManager);
+        this.modelManager.modelManipulator.addModelListener(this.viewManager.canvasScrollManager);
+        this.modelManager.modelManipulator.addModelListener(this.viewManager.scroll);
         this.registerFontChangesListeners();
         this.selection.onChanged.add(this.searchManager);
         this.selection.onChanged.add(this.boxVisualizerManager.resizeBoxVisualizer);
@@ -166,8 +168,8 @@ export class RichEditCore {
         this.selection.onChanged.add(this.globalEventDispatcher);
         this.selection.onChanged.add(this.barHolder.publicUiChangesListener);
         this.registerActiveContextTabManager();
-        this.modelManager.modelManipulator.modelListeners.push(this.globalEventDispatcher);
-        this.modelManager.modelManipulator.modelListeners.push(this.barHolder.publicUiChangesListener);
+        this.modelManager.modelManipulator.addModelListener(this.globalEventDispatcher);
+        this.modelManager.modelManipulator.addModelListener(this.barHolder.publicUiChangesListener);
         this.inputController.initExporter();
     }
     dispose() {
@@ -182,7 +184,6 @@ export class RichEditCore {
         this.viewManager.dispose();
         this.layoutFormatterManager.dispose();
         this.eventManager.dispose();
-        this.simpleViewCanvasSizeManager.dispose();
         this.loadingPanelManager.dispose();
         this.commandManager.dispose();
         this.spellChecker.dispose();
@@ -215,7 +216,6 @@ export class RichEditCore {
         this.scrollFormatter = null;
         this.boxVisualizerManager = null;
         this.globalEventDispatcher = null;
-        this.simpleViewCanvasSizeManager = null;
         this.selectionModelChangesListener = null;
         this.loadingPanelManager = null;
         this.inputPositionModelChangesListener = null;
@@ -292,12 +292,7 @@ export class RichEditCore {
     }
     closeDocument() {
         this.selection.onChanged.remove(this.globalEventDispatcher);
-        for (let ind = 0; ind < this.modelManager.modelManipulator.modelListeners.length; ind++) {
-            if (this.modelManager.modelManipulator.modelListeners[ind] == this.globalEventDispatcher) {
-                this.modelManager.modelManipulator.modelListeners.splice(ind, 1);
-                break;
-            }
-        }
+        this.modelManager.modelManipulator.removeModelListener(this.globalEventDispatcher);
         this.barHolder.setEnabled(false);
         if (this.horizontalRulerControl)
             this.horizontalRulerControl.setEnable(false);
@@ -350,7 +345,7 @@ export class RichEditCore {
     onViewTypeChanged() {
         this.viewManager.renderer.onViewTypeChanged();
         this.horizontalRulerControl.onViewTypeChanged();
-        this.simpleViewCanvasSizeManager.setViewMode(this.innerClientProperties.viewsSettings.isSimpleView);
+        this.viewManager.canvasManager.simpleViewCanvasSizeManager.setViewMode(this.innerClientProperties.viewsSettings.isSimpleView);
     }
     getModifiedState() {
         if (this.lastSavedHistoryItemId != this.modelManager.history.getCurrentItemId())

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

@@ -1,9 +1,14 @@
 import { RulerControls } from '../manager';
 import { RulerModelData } from '../model-data';
+import { IZoomLevelHolder } from '../../../interfaces/i-zoom-level-holder';
 export declare class RulerModelState {
-    modelValue: number;
     enabled: boolean;
-    constructor(modelValue: number, enabled: boolean);
+    private zoomLevelHolder;
+    private _modelValue;
+    get modelValue(): number;
+    get originalModelValue(): number;
+    set modelValue(value: number);
+    constructor(modelValue: number, enabled: boolean, zoomLevelHolder: IZoomLevelHolder);
     clone(): RulerModelState;
 }
 export declare abstract class RulerBase {

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

@@ -1,12 +1,20 @@
 import { DomUtils } from '@devexpress/utils/lib/utils/dom';
 import { DocumentRenderer } from '../../../canvas/renderes/common/document-renderer';
+import { RulerValue } from './zoomable-value';
 export class RulerModelState {
-    constructor(modelValue, enabled) {
-        this.modelValue = modelValue;
+    get modelValue() { return this._modelValue.value; }
+    ;
+    get originalModelValue() { return this._modelValue.originalValue; }
+    ;
+    set modelValue(value) { this._modelValue.value = value; }
+    ;
+    constructor(modelValue, enabled, zoomLevelHolder) {
         this.enabled = enabled;
+        this.zoomLevelHolder = zoomLevelHolder;
+        this._modelValue = new RulerValue(modelValue, zoomLevelHolder);
     }
     clone() {
-        return new RulerModelState(this.modelValue, this.enabled);
+        return new RulerModelState(this.originalModelValue, this.enabled, this.zoomLevelHolder);
     }
 }
 export class RulerBase {