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

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,7 +38,8 @@ export declare class SimpleViewCanvasSizeManager {
     private resizeFrameId;
     constructor(canvasManager: CanvasManager, control: IRichEditControl);
     dispose(): void;
-    protected changeSize(force: boolean): void;
+    modelChanged(change: ModelChange): void;
+    changeSize(force: boolean): void;
     setViewMode(val: boolean): void;
     private changeSizeCore;
 }

package/lib/common/canvas/renderes/common/document-renderer.js

@@ -28,6 +28,7 @@ import { CanvasUtils } from '../../utils';
 import { ScrollState } from '../../../scroll/model-states';
 import { isDefined } from '@devexpress/utils/lib/utils/common';
 import { StringUtils } from '@devexpress/utils/lib/utils/string';
+import { ModelChangeType } from '../../../model/changes/enums';
 export class SimpleViewCanvasSizeManager {
     constructor(canvasManager, control) {
         this.size = new Size(0, 0);
@@ -52,6 +53,10 @@ export class SimpleViewCanvasSizeManager {
         this.resizeFrameId = null;
         this.resizeObserver.disconnect();
     }
+    modelChanged(change) {
+        if (change.type == ModelChangeType.ZoomLevelChanged && this.control.innerClientProperties.viewsSettings.isSimpleView)
+            this.changeSize(true);
+    }
     changeSize(force) {
         const curr = new Size(this.canvasManager.getCanvasWidth(), this.canvasManager.controlHeightProvider.getVisibleAreaHeight(false));
         if (force || !curr.equals(this.size)) {

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

@@ -24,7 +24,10 @@ import { MisspelledSelectionRenderer } from './selection-renderers/misspelled-se
 import { RangePermissionRenderer } from './selection-renderers/range-permission-renderer';
 import { SearchSelectionRenderer } from './selection-renderers/search-selection-renderer';
 import { SelectionRenderer } from './selection-renderers/selection-renderer';
-export declare class ViewManager implements ILayoutChangesListener {
+import { IZoomLevelHolder } from '../../interfaces/i-zoom-level-holder';
+import { IModelChangesListener } from '../../interfaces/model-changes-listener';
+import { ModelChange } from '../../model/changes/change';
+export declare class ViewManager implements ILayoutChangesListener, IZoomLevelHolder, IModelChangesListener {
     private renderers;
     get renderer(): DocumentRenderer;
     get printLayoutRenderer(): DocumentRenderer;
@@ -56,6 +59,7 @@ export declare class ViewManager implements ILayoutChangesListener {
     readonly control: IRichEditControl;
     constructor(control: IRichEditControl, canvas: HTMLDivElement, eventManager: IEventManager, stringResources: StringResources, horizontalRuler: IRulerControl, inputController: InputController, innerClientProperties: InnerClientProperties, readOnlyPropertyHolder: IReadOnlyPropertyHolder, layoutFormatterManagerHolder: ILayoutFormatterManagerHolder, internalApi: IInternalApi, fieldOptions: FieldsSettings);
     dispose(): void;
+    modelChanged(change: ModelChange): void;
     adjust(force: boolean): void;
     NotifyPagesReady(pageChanges: PageChange[]): void;
     NotifyFullyFormatted(_pageCount: number): void;
@@ -67,4 +71,8 @@ export declare class ViewManager implements ILayoutChangesListener {
     setWorkSession(layout: DocumentLayout, layoutSelection: LayoutSelection, imageCache: ImageCache): void;
     closeDocument(): void;
     ensureFirstPageIsRendered(): void;
+    get zoomLevel(): number;
+    set zoomLevel(value: number);
+    get allowZoom(): boolean;
+    set allowZoom(value: boolean);
 }

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

@@ -24,13 +24,17 @@ import { MisspelledSelectionRenderer } from './selection-renderers/misspelled-se
 import { RangePermissionRenderer } from './selection-renderers/range-permission-renderer';
 import { SearchSelectionRenderer } from './selection-renderers/search-selection-renderer';
 import { SelectionRenderer } from './selection-renderers/selection-renderer';
+import { ControlOptions, DocumentCapability } from '../../model/options/control';
+import { RichEditClientCommand } from '../../commands/client-command';
+import { ZoomLevelChange } from '../../model/changes/model/zoom-level';
+import { ModelChangeType } from '../../model/changes/enums';
 export class ViewManager {
     get renderer() { return this.renderers[this.innerClientProperties.viewsSettings.viewType]; }
     get printLayoutRenderer() { return this.renderers[ViewType.PrintLayout]; }
     get canvasListener() { return this.canvasListeners[this.innerClientProperties.viewsSettings.viewType]; }
     constructor(control, canvas, eventManager, stringResources, horizontalRuler, inputController, innerClientProperties, readOnlyPropertyHolder, layoutFormatterManagerHolder, internalApi, fieldOptions) {
         this.cache = [];
-        this.sizes = new CanvasSizeInfo();
+        this.sizes = new CanvasSizeInfo(this);
         this.control = control;
         this.readOnlyPropertyHolder = readOnlyPropertyHolder;
         this.layoutFormatterManagerHolder = layoutFormatterManagerHolder;
@@ -65,6 +69,13 @@ export class ViewManager {
         this.selection.dispose();
         this.pagesContainer = null;
     }
+    modelChanged(change) {
+        if (change.type == ModelChangeType.ZoomLevelChanged) {
+            this.canvas.scrollTop = this.canvas.scrollTop / change.prevZoomLevel * change.zoomLevel;
+            this.pagesContainer.style.zoom = change.zoomLevel.toString();
+            this.sizes.updateSize(this.canvas);
+        }
+    }
     adjust(force) {
         if ((force || !this.sizes.isInitialized()) && this.cache.length > 0) {
             const firstRenderedPageIndex = Math.min(this.cache.length, Math.max(0, ListUtils.indexBy(this.layout.pages, (page) => page.flags.get(LayoutPageFlags.ContentRendered))));
@@ -102,7 +113,9 @@ export class ViewManager {
             const pageInfo = layoutSelection.selectionInfo.pageInfos[pageIndex];
             const item = pageInfo.oldItems[0];
             const layoutPage = this.layout.pages[pageIndex];
-            this.inputController.setPosition(layoutPage.x + this.cache[pageIndex].page.offsetLeft + item.x, this.sizes.getPageOffsetY(layoutPage) + item.y);
+            const x = layoutPage.x + this.cache[pageIndex].page.offsetLeft + item.x;
+            const y = this.sizes.getPageOffsetY(layoutPage) + item.y;
+            this.inputController.setPosition(x, y);
         }
     }
     NotifySearchSelectionLayoutChanged() {
@@ -128,6 +141,7 @@ export class ViewManager {
     }
     addTopLevelContainers() {
         this.pagesContainer = DocumentRenderer.renderContainer(RendererClassNames.PAGES);
+        this.pagesContainer.style.zoom = this.zoomLevel.toString();
         this.serviceContainer = DocumentRenderer.renderContainer(RendererClassNames.TOP_LEVEL_SERVICE_CONTAINER);
         DocumentRenderer.insertInContainer(this.canvas, 0, this.pagesContainer, (node) => node);
         this.canvas.appendChild(this.serviceContainer);
@@ -164,4 +178,15 @@ export class ViewManager {
             firstPage.flags.set(LayoutPageFlags.ContentRendered, true);
         }
     }
+    get zoomLevel() { return this.innerClientProperties.viewsSettings.zoomLevel; }
+    set zoomLevel(value) {
+        const prevZoomLevel = this.zoomLevel;
+        this.innerClientProperties.viewsSettings.zoomLevel = value;
+        this.control.modelManager.modelManipulator.notifyModelChanged(new ZoomLevelChange(this.zoomLevel, prevZoomLevel));
+    }
+    get allowZoom() { return ControlOptions.isEnabled(this.control.modelManager.richOptions.control.allowZoom); }
+    set allowZoom(value) {
+        this.control.modelManager.richOptions.control.allowZoom = value ? DocumentCapability.Enabled : DocumentCapability.Hidden;
+        this.control.barHolder.forceUpdate({ [RichEditClientCommand.ChangeZoomLevel]: true });
+    }
 }

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

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

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

@@ -421,4 +421,6 @@ export var RichEditClientCommand;
     RichEditClientCommand[RichEditClientCommand["NoSpellingSuggestions"] = 457] = "NoSpellingSuggestions";
     RichEditClientCommand[RichEditClientCommand["GetHtml"] = 458] = "GetHtml";
     RichEditClientCommand[RichEditClientCommand["CreateEmptyIfField"] = 459] = "CreateEmptyIfField";
+    RichEditClientCommand[RichEditClientCommand["ChangeZoomLevel"] = 460] = "ChangeZoomLevel";
+    RichEditClientCommand[RichEditClientCommand["ToggleAllowZoom"] = 461] = "ToggleAllowZoom";
 })(RichEditClientCommand || (RichEditClientCommand = {}));

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

@@ -67,6 +67,8 @@ import { GoToNextHeaderFooterCommand, GoToPreviousHeaderFooterCommand } from './
 import { InsertFooterCommand, InsertHeaderCommand } from './header-footer/insert-header-footer-commands';
 import { LinkHeaderFooterToPreviousCommand } from './header-footer/link-header-footer-commands';
 import { ApplyStyleCommand } from './layout/apply-style-command';
+import { ToggleAllowZoomCommand } from './layout/toggle-allow-zoom-command';
+import { ChangeZoomLevelCommand } from './layout/change-zoom-level-command';
 import { ClearFormattingCommand } from './layout/clear-formatting-command';
 import { ChangeViewTypeCommand, SwitchToPrintLayoutViewCommand, SwitchToSimpleViewCommand } from './layout/switch-view-command';
 import { ToggleFullScreenCommand } from './layout/toggle-full-screen-command';
@@ -555,6 +557,8 @@ export class CommandManager {
         this.createCommand(control, RichEditClientCommand.ChangeViewType, ChangeViewTypeCommand);
         this.createCommand(control, RichEditClientCommand.SwitchToSimpleView, SwitchToSimpleViewCommand);
         this.createCommand(control, RichEditClientCommand.SwitchToPrintLayoutView, SwitchToPrintLayoutViewCommand);
+        this.createCommand(control, RichEditClientCommand.ChangeZoomLevel, ChangeZoomLevelCommand);
+        this.createCommand(control, RichEditClientCommand.ToggleAllowZoom, ToggleAllowZoomCommand);
         this.createCommand(control, RichEditClientCommand.ShowErrorLoadPictureMessage, ShowLoadPictureErrorDialogCommand);
         this.assingCommand(RichEditClientCommand.PrintDocumentOnClient, new PrintDocumentOnClient(control, printNonce));
     }

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

@@ -6,7 +6,7 @@ import { CommandBase, CommandSimpleOptions } from '../command-base';
 import { ApplyStyleCommandState } from '../command-states';
 export interface IApplyStyleCommandParams {
     styleName: string;
-    keepCustomFormatting?: boolean;
+    keepDirectFormatting?: boolean;
 }
 export declare class ApplyStyleCommand extends CommandBase<ApplyStyleCommandState> {
     getState(): ApplyStyleCommandState;
@@ -14,7 +14,7 @@ export declare class ApplyStyleCommand extends CommandBase<ApplyStyleCommandStat
     DEPRECATEDConvertOptionsParameter(parameter: string | IApplyStyleCommandParams): IApplyStyleCommandParams;
     executeCore(state: ApplyStyleCommandState, options: CommandSimpleOptions<IApplyStyleCommandParams>): boolean;
     applyCharacterStyle(subDocumentInterval: SubDocumentInterval, style: CharacterStyle, isPresetStyle: boolean): void;
-    applyParagraphStyle(subDocumentInterval: SubDocumentInterval, style: ParagraphStyle, isPresetStyle: boolean, keepCustomFormatting?: boolean): void;
+    applyParagraphStyle(subDocumentInterval: SubDocumentInterval, style: ParagraphStyle, isPresetStyle: boolean, keepDirectFormatting?: boolean): void;
     applyParagraphLinkedStyle(subDocumentInterval: SubDocumentInterval, style: ParagraphStyle, isPresetStyle: boolean): void;
     private addLinkedCharacterStyle;
     calculateAffectedParagraphCount(subDocumentInterval: SubDocumentInterval): number;

package/lib/common/commands/layout/apply-style-command.js

@@ -70,7 +70,7 @@ export class ApplyStyleCommand extends CommandBase {
                 paragraphStyle = StylesManager.getPresetParagraphStyleByName(styleName).clone();
                 isPresetStyle = true;
             }
-            this.applyParagraphStyle(subDocumentInterval, paragraphStyle, isPresetStyle, parameter.keepCustomFormatting);
+            this.applyParagraphStyle(subDocumentInterval, paragraphStyle, isPresetStyle, parameter.keepDirectFormatting);
         }
         else if (!StylesManager.isParagraphStyle(parameter.styleName) && state.characterStyleChangeEnabled) {
             const styleName = StylesManager.getStyleNameWithoutPrefix(parameter.styleName);
@@ -105,7 +105,7 @@ export class ApplyStyleCommand extends CommandBase {
             this.modelManipulator.style.applyCharacterStyle(subDocumentInterval, characterStyle, false);
         }
     }
-    applyParagraphStyle(subDocumentInterval, style, isPresetStyle, keepCustomFormatting = false) {
+    applyParagraphStyle(subDocumentInterval, style, isPresetStyle, keepDirectFormatting = false) {
         const count = this.calculateAffectedParagraphCount(subDocumentInterval);
         if (count > 0 && ControlOptions.isEnabled(this.control.modelManager.richOptions.control.paragraphStyle)) {
             const { interval, subDocument } = subDocumentInterval;
@@ -118,7 +118,8 @@ export class ApplyStyleCommand extends CommandBase {
                 style = isPresetStyle ? modelManipulator.model.stylesManager.addParagraphStyle(style) : style;
                 this.history.addAndRedo(new ApplyParagraphStyleHistoryItem(modelManipulator, paragraphSubDocumentInterval, style));
                 this.history.addAndRedo(new ParagraphUseValueHistoryItem(modelManipulator, paragraphSubDocumentInterval, 0));
-                this.history.addAndRedo(new FontUseValueHistoryItem(modelManipulator, paragraphSubDocumentInterval, 0, keepCustomFormatting));
+                if (!keepDirectFormatting)
+                    this.history.addAndRedo(new FontUseValueHistoryItem(modelManipulator, paragraphSubDocumentInterval, 0));
                 this.history.addAndRedo(new AddParagraphToListHistoryItem(modelManipulator, subDocument, paragraphIndex, NumberingList.NumberingListNotSettedIndex, -1));
             }
         }

package/lib/common/commands/layout/change-zoom-level-command.d.ts

@@ -0,0 +1,10 @@
+import { CommandBase, CommandSimpleOptions } from '../command-base';
+import { SimpleCommandState } from '../command-states';
+export declare class ChangeZoomLevelCommand extends CommandBase<SimpleCommandState> {
+    getState(): SimpleCommandState;
+    executeCore(_state: SimpleCommandState, options: CommandSimpleOptions<number>): boolean;
+    isEnabledInReadOnlyMode(): boolean;
+    isEnabled(): boolean;
+    DEPRECATEDConvertOptionsParameter(parameter: any): number;
+    private isZoomLevelValueCorrect;
+}

package/lib/common/commands/layout/change-zoom-level-command.js

@@ -0,0 +1,30 @@
+import { isNumber } from '@devexpress/utils/lib/utils/common';
+import { CommandBase } from '../command-base';
+import { SimpleCommandState } from '../command-states';
+import { RichUtils } from '../../model/rich-utils';
+export class ChangeZoomLevelCommand extends CommandBase {
+    getState() {
+        const state = new SimpleCommandState(this.isEnabled(), this.control.viewManager.zoomLevel);
+        state.visible = this.control.viewManager.allowZoom;
+        return state;
+    }
+    executeCore(_state, options) {
+        if (options.param == this.control.viewManager.zoomLevel)
+            return false;
+        this.control.viewManager.zoomLevel = options.param;
+        return true;
+    }
+    isEnabledInReadOnlyMode() {
+        return true;
+    }
+    isEnabled() {
+        return this.control.viewManager.allowZoom;
+    }
+    DEPRECATEDConvertOptionsParameter(parameter) {
+        const res = typeof parameter == "string" ? parseFloat(parameter) : parameter;
+        return this.isZoomLevelValueCorrect(res) ? res : this.control.viewManager.zoomLevel;
+    }
+    isZoomLevelValueCorrect(size) {
+        return isNumber(size) && !isNaN(size) && size >= RichUtils.minZoomLevel && size <= RichUtils.maxZoomLevel;
+    }
+}

package/lib/common/commands/layout/toggle-allow-zoom-command.d.ts

@@ -0,0 +1,7 @@
+import { CommandBase, CommandSimpleOptions } from '../command-base';
+import { SimpleCommandState } from '../command-states';
+export declare class ToggleAllowZoomCommand extends CommandBase<SimpleCommandState> {
+    getState(): SimpleCommandState;
+    executeCore(_state: SimpleCommandState, options: CommandSimpleOptions<boolean>): boolean;
+    isEnabledInReadOnlyMode(): boolean;
+}

package/lib/common/commands/layout/toggle-allow-zoom-command.js

@@ -0,0 +1,17 @@
+import { CommandBase } from '../command-base';
+import { SimpleCommandState } from '../command-states';
+export class ToggleAllowZoomCommand extends CommandBase {
+    getState() {
+        return new SimpleCommandState(this.isEnabled(), this.control.viewManager.allowZoom);
+    }
+    executeCore(_state, options) {
+        const allowZoom = this.control.viewManager.allowZoom;
+        if (options.param === allowZoom)
+            return false;
+        this.control.viewManager.allowZoom = !allowZoom;
+        return true;
+    }
+    isEnabledInReadOnlyMode() {
+        return true;
+    }
+}

package/lib/common/commands/ruler/ruler-table-column-separators-command.d.ts

@@ -1,6 +1,8 @@
 import { CommandBase, CommandOptions, ICommandOptions } from '../command-base';
 import { SimpleCommandState } from '../command-states';
+import { IZoomLevelHolder } from '../../interfaces/i-zoom-level-holder';
 export declare class TableColumnSeparatorStruct {
+    zoomLevelHolder: IZoomLevelHolder;
     index: number;
     tableIndex: number;
     cellSpacing: number;
@@ -9,14 +11,19 @@ export declare class TableColumnSeparatorStruct {
     items: TableColumnSeparatorItem[];
     get currItem(): TableColumnSeparatorItem;
     get hasItems(): boolean;
+    constructor(zoomLevelHolder: IZoomLevelHolder);
     createItem(position: number, marginLeft: number, marginRight: number): void;
     clone(): TableColumnSeparatorStruct;
 }
 export declare class TableColumnSeparatorItem {
-    position: number;
+    zoomLevelHolder: IZoomLevelHolder;
+    private zoomablePosition;
+    get position(): number;
+    get originalPosition(): number;
+    set position(value: number);
     leftMargin: number;
     rightMargin: number;
-    constructor(position: number, leftMargin: number, rightMargin: number);
+    constructor(position: number, leftMargin: number, rightMargin: number, zoomLevelHolder: IZoomLevelHolder);
     clone(): TableColumnSeparatorItem;
 }
 export declare class RulerTableColumnSeparatorsCommand extends CommandBase<SimpleCommandState> {

package/lib/common/commands/ruler/ruler-table-column-separators-command.js

@@ -8,8 +8,16 @@ import { ListUtils } from '@devexpress/utils/lib/utils/list';
 import { SearchUtils } from '@devexpress/utils/lib/utils/search';
 import { CommandBase } from '../command-base';
 import { SimpleCommandState } from '../command-states';
+import { RulerValue } from '../../ui/ruler/controls/zoomable-value';
 export class TableColumnSeparatorStruct {
-    constructor() {
+    get currItem() {
+        return this.items[this.index];
+    }
+    get hasItems() {
+        return this.items.length > 0;
+    }
+    constructor(zoomLevelHolder) {
+        this.zoomLevelHolder = zoomLevelHolder;
         this.index = 0;
         this.tableIndex = 0;
         this.cellSpacing = 0;
@@ -17,17 +25,11 @@ export class TableColumnSeparatorStruct {
         this.maxValue = -1;
         this.items = [];
     }
-    get currItem() {
-        return this.items[this.index];
-    }
-    get hasItems() {
-        return this.items.length > 0;
-    }
     createItem(position, marginLeft, marginRight) {
-        this.items.push(new TableColumnSeparatorItem(position, marginLeft, marginRight));
+        this.items.push(new TableColumnSeparatorItem(position, marginLeft, marginRight, this.zoomLevelHolder));
     }
     clone() {
-        const result = new TableColumnSeparatorStruct();
+        const result = new TableColumnSeparatorStruct(this.zoomLevelHolder);
         result.index = this.index;
         result.tableIndex = this.tableIndex;
         result.minValue = this.minValue;
@@ -37,13 +39,20 @@ export class TableColumnSeparatorStruct {
     }
 }
 export class TableColumnSeparatorItem {
-    constructor(position, leftMargin, rightMargin) {
-        this.position = position;
+    get position() { return this.zoomablePosition.value; }
+    ;
+    get originalPosition() { return this.zoomablePosition.originalValue; }
+    ;
+    set position(value) { this.zoomablePosition.value = value; }
+    ;
+    constructor(position, leftMargin, rightMargin, zoomLevelHolder) {
+        this.zoomLevelHolder = zoomLevelHolder;
+        this.zoomablePosition = new RulerValue(position, this.zoomLevelHolder);
         this.leftMargin = leftMargin;
         this.rightMargin = rightMargin;
     }
     clone() {
-        return new TableColumnSeparatorItem(this.position, this.leftMargin, this.rightMargin);
+        return new TableColumnSeparatorItem(this.originalPosition, this.leftMargin, this.rightMargin, this.zoomLevelHolder);
     }
 }
 export class RulerTableColumnSeparatorsCommand extends CommandBase {
@@ -83,7 +92,7 @@ export class RulerTableColumnSeparatorsCommand extends CommandBase {
             }
             return sellSpacing;
         };
-        let struct = new TableColumnSeparatorStruct();
+        let struct = new TableColumnSeparatorStruct(this.control.viewManager);
         if (this.selection.tableInfo.extendedData.numRows) {
             let layoutPosition = (subDocument.isMain()
                 ? new LayoutPositionMainSubDocumentCreator(this.control.layout, subDocument, position, DocumentLayoutDetailsLevel.Character)
@@ -126,8 +135,8 @@ export class RulerTableColumnSeparatorsCommand extends CommandBase {
                         struct.createItem(lastLayoutCell.right, 0, 0);
                     }
                     struct.tableIndex = currLogicGrid.table.index;
-                    struct.items = struct.items.sort((a, b) => a.position - b.position);
-                    struct.index = SearchUtils.normedInterpolationIndexOf(struct.items, (item) => item.position, layoutCell.x);
+                    struct.items = struct.items.sort((a, b) => a.originalPosition - b.originalPosition);
+                    struct.index = SearchUtils.normedInterpolationIndexOf(struct.items, (item) => item.originalPosition, layoutCell.x);
                     if (currLayoutGrid.parentCell) {
                         struct.minValue = currLayoutGrid.parentCell.x;
                         struct.maxValue = currLayoutGrid.parentCell.right;

package/lib/common/commands/toc/set-paragraph-level-command.js

@@ -22,7 +22,7 @@ export class SetParagraphLevelCommandBase extends CommandBase {
         if (!paragraphStyle)
             paragraphStyle = StylesManager.getPresetParagraphStyleByName(styleName);
         if (paragraphStyle) {
-            const commandOptions = new CommandSimpleOptions(this.control, { styleName: StylesManager.paragraphPrefix + styleName, keepCustomFormatting: true });
+            const commandOptions = new CommandSimpleOptions(this.control, { styleName: StylesManager.paragraphPrefix + styleName, keepDirectFormatting: true });
             this.commandManager.getCommand(RichEditClientCommand.ChangeStyle).execute(this.commandManager.isPublicApiCall, commandOptions);
         }
         else {

package/lib/common/formats/rtf/import/table/normalization/apply-use-values.d.ts

@@ -0,0 +1,6 @@
+import { TableCellProperties } from '../../../../../model/tables/properties/table-cell-properties';
+import { TableProperties } from '../../../../../model/tables/properties/table-properties';
+import { TableRowProperties } from '../../../../../model/tables/properties/table-row-properties';
+export declare function applyTablePropertiesUseValues(props: TableProperties, styleProps: TableProperties): void;
+export declare function applyTableRowPropertiesUseValues(props: TableRowProperties, styleProps: TableRowProperties): void;
+export declare function applyTableCellPropertiesUseValues(props: TableCellProperties, styleProps: TableCellProperties): void;

package/lib/common/formats/rtf/import/table/normalization/apply-use-values.js

@@ -0,0 +1,90 @@
+import { TableCellPropertiesMask } from '../../../../../model/tables/properties/table-cell-properties';
+import { TablePropertiesMask } from '../../../../../model/tables/properties/table-properties';
+import { TableRowPropertiesMask } from '../../../../../model/tables/properties/table-row-properties';
+export function applyTablePropertiesUseValues(props, styleProps) {
+    props.mask = TablePropertiesMask.UseNone;
+    if (!props.borders.left.equals(styleProps.borders.left))
+        props.setUseValue(TablePropertiesMask.UseLeftBorder, true);
+    if (!props.borders.top.equals(styleProps.borders.top))
+        props.setUseValue(TablePropertiesMask.UseTopBorder, true);
+    if (!props.borders.right.equals(styleProps.borders.right))
+        props.setUseValue(TablePropertiesMask.UseRightBorder, true);
+    if (!props.borders.bottom.equals(styleProps.borders.bottom))
+        props.setUseValue(TablePropertiesMask.UseBottomBorder, true);
+    if (!props.borders.insideHorizontal.equals(styleProps.borders.insideHorizontal))
+        props.setUseValue(TablePropertiesMask.UseInsideHorizontalBorder, true);
+    if (!props.borders.insideVertical.equals(styleProps.borders.insideVertical))
+        props.setUseValue(TablePropertiesMask.UseInsideVerticalBorder, true);
+    if (!props.cellMargins.left.equals(styleProps.cellMargins.left))
+        props.setUseValue(TablePropertiesMask.UseLeftMargin, true);
+    if (!props.cellMargins.top.equals(styleProps.cellMargins.top))
+        props.setUseValue(TablePropertiesMask.UseTopMargin, true);
+    if (!props.cellMargins.right.equals(styleProps.cellMargins.right))
+        props.setUseValue(TablePropertiesMask.UseRightMargin, true);
+    if (!props.cellMargins.bottom.equals(styleProps.cellMargins.bottom))
+        props.setUseValue(TablePropertiesMask.UseBottomMargin, true);
+    if (!props.cellSpacing.equals(styleProps.cellSpacing))
+        props.setUseValue(TablePropertiesMask.UseCellSpacing, true);
+    if (!props.indent.equals(styleProps.indent))
+        props.setUseValue(TablePropertiesMask.UseTableIndent, true);
+    if (props.tableStyleColumnBandSize != styleProps.tableStyleColumnBandSize)
+        props.setUseValue(TablePropertiesMask.UseTableStyleColBandSize, true);
+    if (props.tableStyleRowBandSize != styleProps.tableStyleRowBandSize)
+        props.setUseValue(TablePropertiesMask.UseTableStyleRowBandSize, true);
+    if (props.avoidDoubleBorders != styleProps.avoidDoubleBorders)
+        props.setUseValue(TablePropertiesMask.UseAvoidDoubleBorders, true);
+    if (props.layoutType != styleProps.layoutType)
+        props.setUseValue(TablePropertiesMask.UseTableLayout, true);
+    if (!props.shadingInfo.equals(styleProps.shadingInfo))
+        props.setUseValue(TablePropertiesMask.UseShadingInfoIndex, true);
+    if (props.tableRowAlignment != styleProps.tableRowAlignment)
+        props.setUseValue(TablePropertiesMask.UseTableAlignment, true);
+    if (props.isTableOverlap != styleProps.isTableOverlap)
+        props.setUseValue(TablePropertiesMask.UseIsTableOverlap, true);
+}
+export function applyTableRowPropertiesUseValues(props, styleProps) {
+    props.mask = TableRowPropertiesMask.UseNone;
+    if (!props.cellSpacing.equals(styleProps.cellSpacing))
+        props.setUseValue(TableRowPropertiesMask.UseCellSpacing, true);
+    if (props.cantSplit != styleProps.cantSplit)
+        props.setUseValue(TableRowPropertiesMask.UseCantSplit, true);
+    if (props.hideCellMark != styleProps.hideCellMark)
+        props.setUseValue(TableRowPropertiesMask.UseHideCellMark, true);
+    if (props.tableRowAlignment != styleProps.tableRowAlignment)
+        props.setUseValue(TableRowPropertiesMask.UseTableRowAlignment, true);
+    if (props.header != styleProps.header)
+        props.setUseValue(TableRowPropertiesMask.UseHeader, true);
+    if (props.divId != styleProps.divId)
+        props.setUseValue(TableRowPropertiesMask.UseDivId, true);
+}
+export function applyTableCellPropertiesUseValues(props, styleProps) {
+    props.mask = TableCellPropertiesMask.UseNone;
+    if (!props.cellMargins.left.equals(styleProps.cellMargins.left))
+        props.setUseValue(TableCellPropertiesMask.UseLeftMargin, true);
+    if (!props.cellMargins.top.equals(styleProps.cellMargins.top))
+        props.setUseValue(TableCellPropertiesMask.UseTopMargin, true);
+    if (!props.cellMargins.bottom.equals(styleProps.cellMargins.bottom))
+        props.setUseValue(TableCellPropertiesMask.UseBottomMargin, true);
+    if (!props.cellMargins.right.equals(styleProps.cellMargins.right))
+        props.setUseValue(TableCellPropertiesMask.UseRightMargin, true);
+    if (!props.borders.left.equals(styleProps.borders.left))
+        props.setUseValue(TableCellPropertiesMask.UseLeftBorder, true);
+    if (!props.borders.top.equals(styleProps.borders.top))
+        props.setUseValue(TableCellPropertiesMask.UseTopBorder, true);
+    if (!props.borders.bottom.equals(styleProps.borders.bottom))
+        props.setUseValue(TableCellPropertiesMask.UseBottomBorder, true);
+    if (!props.borders.right.equals(styleProps.borders.right))
+        props.setUseValue(TableCellPropertiesMask.UseRightBorder, true);
+    if (props.hideCellMark != styleProps.hideCellMark)
+        props.setUseValue(TableCellPropertiesMask.UseHideCellMark, true);
+    if (props.noWrap != styleProps.noWrap)
+        props.setUseValue(TableCellPropertiesMask.UseNoWrap, true);
+    if (props.fitText != styleProps.fitText)
+        props.setUseValue(TableCellPropertiesMask.UseFitText, true);
+    if (props.textDirection != styleProps.textDirection)
+        props.setUseValue(TableCellPropertiesMask.UseTextDirection, true);
+    if (props.verticalAlignment != styleProps.verticalAlignment)
+        props.setUseValue(TableCellPropertiesMask.UseVerticalAlignment, true);
+    if (!props.shadingInfo.equals(styleProps.shadingInfo))
+        props.setUseValue(TableCellPropertiesMask.UseShadingInfoIndex, true);
+}

package/lib/common/formats/rtf/import/table/table-converter.js

@@ -7,6 +7,7 @@ import { ListUtils } from '@devexpress/utils/lib/utils/list';
 import { NumberMapUtils } from '@devexpress/utils/lib/utils/map/number';
 import { RtfTableColumnsCalculator } from './rtf-table-columns-calculator';
 import { FixedInterval } from '@devexpress/utils/lib/intervals/fixed';
+import { applyTableCellPropertiesUseValues, applyTablePropertiesUseValues, applyTableRowPropertiesUseValues } from './normalization/apply-use-values';
 export class RtfTableConverter {
     constructor(tableReader) {
         this.rtfCellMap = {};
@@ -54,8 +55,9 @@ export class RtfTableConverter {
             tablePreferredWidth.type = TableWidthUnitType.Auto;
             tablePreferredWidth.value = 0;
         }
-        if (!table.properties.coreProperties.getUseValue(TablePropertiesMask.UseRightMargin) &&
-            !table.properties.coreProperties.getUseValue(TablePropertiesMask.UseLeftMargin) && table.properties.useHalfSpace) {
+        const useMargins = table.properties.coreProperties.getUseValue(TablePropertiesMask.UseLeftMargin) &&
+            table.properties.coreProperties.getUseValue(TablePropertiesMask.UseRightMargin);
+        if (!useMargins && table.properties.useHalfSpace) {
             const margin = table.properties.halfSpace;
             table.properties.coreProperties.cellMargins.left.type = TableWidthUnitType.ModelUnits;
             table.properties.coreProperties.cellMargins.left.value = margin;
@@ -99,6 +101,7 @@ export class RtfTableConverter {
         return 0;
     }
     convertTableCore(table, rtfTable) {
+        applyTablePropertiesUseValues(table.properties, table.style.baseConditionalStyle.tableProperties);
         const tableGrid = this.calculateTableGrid(rtfTable);
         const rows = table.rows;
         const tableLayoutType = table.properties.layoutType;
@@ -201,6 +204,7 @@ export class RtfTableConverter {
         return result;
     }
     convertRow(row, rtfRow) {
+        applyTableRowPropertiesUseValues(row.properties, row.parentTable.style.baseConditionalStyle.tableRowProperties);
         const rtfCells = rtfRow.cells;
         for (let i = 0; i < rtfCells.length; i++)
             this.convertCell(row, rtfCells[i]);
@@ -209,6 +213,7 @@ export class RtfTableConverter {
         if (rtfCell.properties.horizontalMerging == TableCellMergingState.Restart)
             this.mergeCells(rtfCell);
         const cell = rtfCell.createCell(row, this.subDocument);
+        applyTableCellPropertiesUseValues(cell.properties, cell.parentRow.parentTable.style.baseConditionalStyle.tableCellProperties);
         row.cells.push(cell);
         this.rtfCellMap[rtfCell.idForParentCellMap] = cell;
     }