devexpress-richedit 25.1.1-alpha → 25.1.2-beta

package/lib/common/input-controller.d.ts

@@ -17,7 +17,7 @@ export declare abstract class InputEditorBase<TInpElement extends HTMLElement> {
     previousText: string;
     canInsertTextOnInputEvent: boolean;
     needProcessShortcut: boolean;
-    initializedIfNotReadOnly: boolean;
+    editableStateInitialized: boolean;
     prevKeyCode: number;
     IMEState: IMEState;
     private inputWithAlt;
@@ -31,8 +31,8 @@ export declare abstract class InputEditorBase<TInpElement extends HTMLElement> {
     constructor(control: IRichEditControl, eventManager: IEventManager, parent: HTMLElement);
     dispose(): void;
     initialize(): void;
-    initializeIfNotReadOnly(): void;
-    initializeIfNotReadOnlyCore(): void;
+    initializeEditableState(): void;
+    initializeEditableStateCore(): void;
     initEvents(): void;
     createHierarchy(parent: HTMLElement): void;
     createHierarchyCore(): void;
@@ -78,7 +78,7 @@ export declare class DivInputEditor extends InputEditorBase<HTMLElement> {
     private onTextInputTimerId;
     constructor(control: IRichEditControl, eventManager: IEventManager, parent: HTMLElement);
     dispose(): void;
-    initializeIfNotReadOnlyCore(): void;
+    initializeEditableStateCore(): void;
     setPosition(left: number, top: number): void;
     createInputElement(): HTMLElement;
     initEvents(): void;
@@ -114,7 +114,7 @@ export declare class IFrameInputEditor extends InputEditorBase<HTMLIFrameElement
     constructor(control: IRichEditControl, eventManager: IEventManager, parent: HTMLElement);
     dispose(): void;
     createHierarchyCore(): void;
-    initializeIfNotReadOnlyCore(): void;
+    initializeEditableStateCore(): void;
     createInputElement(): HTMLIFrameElement;
     initEvents(): void;
     private isModifyEnabled;

package/lib/common/input-controller.js

@@ -51,17 +51,17 @@ export class InputEditorBase {
         clearTimeout(this.onKeyUpTimerId);
     }
     initialize() {
-        this.initializeIfNotReadOnly();
+        this.initializeEditableState();
         this.initEvents();
         this.prevKeyCode = EMPTY_KEYCODE;
     }
-    initializeIfNotReadOnly() {
-        if ((this.control.readOnly !== ReadOnlyMode.Persistent || this.control.modelManager.clientMode) && !this.initializedIfNotReadOnly) {
-            this.initializedIfNotReadOnly = true;
-            this.initializeIfNotReadOnlyCore();
+    initializeEditableState() {
+        if (!this.editableStateInitialized) {
+            this.editableStateInitialized = true;
+            this.initializeEditableStateCore();
         }
     }
-    initializeIfNotReadOnlyCore() {
+    initializeEditableStateCore() {
     }
     initEvents() {
         this.evtHandlersHolder.addListener(this.getEditableDocument(), "keydown", this.onKeyDown.bind(this));
@@ -281,8 +281,8 @@ export class DivInputEditor extends InputEditorBase {
         clearTimeout(this.composEndTimerId);
         clearTimeout(this.onTextInputTimerId);
     }
-    initializeIfNotReadOnlyCore() {
-        this.inputElement.contentEditable = "true";
+    initializeEditableStateCore() {
+        this.inputElement.contentEditable = String(!this.control.isReadOnlyPersistent);
         this.clearInputElement();
     }
     setPosition(left, top) {
@@ -530,11 +530,11 @@ export class IFrameInputEditor extends InputEditorBase {
         body.style.margin = "0px";
         body.style.overflow = "hidden";
     }
-    initializeIfNotReadOnlyCore() {
+    initializeEditableStateCore() {
         if (Browser.WebKitFamily)
-            this.editableDocument.body.setAttribute("contenteditable", "true");
+            this.editableDocument.body.setAttribute("contenteditable", String(!this.control.isReadOnlyPersistent));
         else
-            this.editableDocument.designMode = "on";
+            this.editableDocument.designMode = this.control.isReadOnlyPersistent ? "off" : "on";
     }
     createInputElement() {
         const element = document.createElement("IFRAME");
@@ -673,7 +673,7 @@ export class IFrameInputEditor extends InputEditorBase {
     recreateIfNeeded() {
         const iframeDocument = this.inputElement.contentDocument || this.inputElement.contentWindow.document;
         if (!iframeDocument.body.hasAttribute("loaded")) {
-            this.initializedIfNotReadOnly = false;
+            this.editableStateInitialized = false;
             this.createHierarchyCore();
             this.initialize();
         }
@@ -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/layout/document-layout.d.ts

@@ -2,6 +2,9 @@ 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 {
     private pos;
     private posManager;
@@ -25,9 +28,11 @@ export declare class DocumentLayout {
     isFullyFormatted: boolean;
     anchorObjectsPositionInfo: AnchorObjectsPositionInfo;
     pageColor: number;
+    get grids(): Map<Table, Grid>;
     constructor(anchorObjectsPositionInfo: AnchorObjectsPositionInfo);
     setEmptyLayout(pageColor: number): void;
     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);
@@ -37,6 +38,12 @@ export class AnchorObjectsPositionInfo {
     }
 }
 export class DocumentLayout {
+    get grids() {
+        return this.pages.reduce((res, page) => {
+            page.grids.forEach((grid, table) => res.set(table, grid));
+            return res;
+        }, new Map());
+    }
     constructor(anchorObjectsPositionInfo) {
         this.anchorObjectsPositionInfo = anchorObjectsPositionInfo;
         this.setEmptyLayout(ColorHelper.NO_COLOR);
@@ -58,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/main-structures/layout-page-area.d.ts

@@ -1,10 +1,13 @@
 import { Rectangle } from '@devexpress/utils/lib/geometry/rectangle';
 import { SubDocument } from '../../model/sub-document';
 import { LayoutColumn } from './layout-column';
+import { Grid } from '../../layout-formatter/table/grid-engine/grid';
+import { Table } from '../../model/tables/main-structures/table';
 export declare class LayoutPageArea extends Rectangle {
     subDocument: SubDocument;
     columns: LayoutColumn[];
     pageOffset: number;
+    get grids(): Map<Table, Grid>;
     constructor(subDocument: SubDocument);
     getEndPosition(): number;
     getLastColumn(): LayoutColumn;

package/lib/common/layout/main-structures/layout-page-area.js

@@ -1,6 +1,12 @@
 import { Rectangle } from '@devexpress/utils/lib/geometry/rectangle';
 import { ListUtils } from '@devexpress/utils/lib/utils/list';
 export class LayoutPageArea extends Rectangle {
+    get grids() {
+        return this.columns.reduce((res, column) => {
+            column.tablesInfo.forEach(tableInfo => res.set(tableInfo.logicInfo.grid.table, tableInfo.logicInfo.grid));
+            return res;
+        }, new Map());
+    }
     constructor(subDocument) {
         super(0, 0, 0, 0);
         this.columns = [];

package/lib/common/layout/main-structures/layout-page.d.ts

@@ -8,6 +8,8 @@ import { AnchorObjectsPositionInfo } from '../document-layout';
 import { LayoutAnchoredObjectBox } from './layout-boxes/layout-anchored-object-box';
 import { LayoutPageArea } from './layout-page-area';
 import { TableAnchoredObjectsHolder } from '../../layout-formatter/table/utils/table-anchored-objects-holder';
+import { Grid } from '../../layout-formatter/table/grid-engine/grid';
+import { Table } from '../../model/tables/main-structures/table';
 export declare enum LayoutPageFlags {
     MustBeRendered = 1,
     ContentRendered = 2,
@@ -42,6 +44,7 @@ export declare class LayoutPage extends Rectangle {
     tableAnchoredObjectsHolder: TableAnchoredObjectsHolder;
     renderLevelCalculator: RenderLevelCalculator;
     private contentIntervals;
+    get grids(): Map<Table, Grid>;
     constructor();
     setRenderLevelCalculator(anchorObjectsPositionInfo: AnchorObjectsPositionInfo, compatibilityMode: CompatibilityMode): void;
     setAbsolutePosition(pos: number): void;

package/lib/common/layout/main-structures/layout-page.js

@@ -38,6 +38,14 @@ export class LayoutOtherPageAreasInfo {
     }
 }
 export class LayoutPage extends Rectangle {
+    get grids() {
+        const result = new Map();
+        for (let pageArea of this.mainSubDocumentPageAreas)
+            pageArea.grids.forEach((grid, table) => result.set(table, grid));
+        for (let pageArea of Object.values(this.otherPageAreas))
+            pageArea.grids.forEach((grid, table) => result.set(table, grid));
+        return result;
+    }
     constructor() {
         super(0, 0, 0, 0);
         this.mainSubDocumentPageAreas = [];

package/lib/common/layout/main-structures/layout-row.js

@@ -2,7 +2,6 @@ import { Flag } from '@devexpress/utils/lib/class/flag';
 import { UnitConverter } from '@devexpress/utils/lib/class/unit-converter';
 import { Rectangle } from '@devexpress/utils/lib/geometry/rectangle';
 import { ListUtils } from '@devexpress/utils/lib/utils/list';
-import { LayoutBoxType } from './layout-boxes/layout-box';
 export var LayoutRowStateFlags;
 (function (LayoutRowStateFlags) {
     LayoutRowStateFlags[LayoutRowStateFlags["NormallyEnd"] = 0] = "NormallyEnd";
@@ -129,7 +128,7 @@ export class LayoutRow extends Rectangle {
         return lastBoxIndexWhatCanStrikeoutAndUnderline;
     }
     containsSpacesOnly() {
-        return this.boxes.length > 0 && ListUtils.allOf(this.boxes, val => val.isWhitespace() || val.getType() === LayoutBoxType.ParagraphMark);
+        return this.boxes.length > 0 && ListUtils.allOf(this.boxes, val => val.isWhitespace());
     }
 }
 export class LayoutRowWithIndex extends LayoutRow {

package/lib/common/layout-formatter/floating/position-calculators/horizontal.d.ts

@@ -11,6 +11,7 @@ export declare class AnchorObjectHorizontalPositionCalculator extends AnchorObje
     private alignment;
     private getAlignPosition;
     private absolute;
+    private getAnchorXPosition;
     private bookLayout;
     private relative;
 }

package/lib/common/layout-formatter/floating/position-calculators/horizontal.js

@@ -41,7 +41,7 @@ export class AnchorObjectHorizontalPositionCalculator extends AnchorObjectPositi
     alignment(type, alignment) {
         switch (type) {
             case AnchorObjectHorizontalPositionType.Character:
-                return this.getAlignPosition(alignment, 0);
+                return this.getAnchorXPosition() + this.getAlignPosition(alignment, 0);
             case AnchorObjectHorizontalPositionType.Column:
                 return this.isRelativeCell ?
                     this.relativeColumnPos() + this.lp.row.tableCellInfo.x +
@@ -90,17 +90,8 @@ export class AnchorObjectHorizontalPositionCalculator extends AnchorObjectPositi
                 return this.isRelativeCell ? this.relativeColumnPos() + this.lp.row.tableCellInfo.x : 0;
             case AnchorObjectHorizontalPositionType.Column:
                 return this.isRelativeCell ? this.relativeColumnPos() + this.lp.row.tableCellInfo.x + this.leftCellMargin : this.relativeColumnPos();
-            case AnchorObjectHorizontalPositionType.Character: {
-                const rowAbsPos = this.lp.getLogPosition(DocumentLayoutDetailsLevel.Row);
-                const ancBoxAbsPos = this.obj.rowOffset;
-                const boxIndex = SearchUtils.normedInterpolationIndexOf(this.lp.row.boxes, (box) => rowAbsPos + box.rowOffset, ancBoxAbsPos);
-                const box = this.lp.row.boxes[boxIndex];
-                if (!box)
-                    return this.lp.getLayoutX(null, DocumentLayoutDetailsLevel.Row);
-                const symbolCount = Math.max(0, ancBoxAbsPos - rowAbsPos - box.rowOffset);
-                return this.lp.getLayoutX(null, DocumentLayoutDetailsLevel.Row) + box.x +
-                    box.getCharOffsetXInPixels(this.manager.measurer, symbolCount);
-            }
+            case AnchorObjectHorizontalPositionType.Character:
+                return this.getAnchorXPosition();
             case AnchorObjectHorizontalPositionType.Margin:
                 return this.isRelativeCell ? this.relativeColumnPos() + this.lp.row.tableCellInfo.x + this.leftCellMargin :
                     this.manager.boundsCalculator.marginLeft;
@@ -117,6 +108,19 @@ export class AnchorObjectHorizontalPositionCalculator extends AnchorObjectPositi
                 throw new Error(Errors.InternalException);
         }
     }
+    getAnchorXPosition() {
+        const rowAbsPos = this.lp.getLogPosition(DocumentLayoutDetailsLevel.Row);
+        const ancBoxAbsPos = this.obj.rowOffset;
+        let boxIndex = SearchUtils.normedInterpolationIndexOf(this.lp.row.boxes, (box) => rowAbsPos + box.rowOffset, ancBoxAbsPos);
+        if (boxIndex < 0)
+            boxIndex = 0;
+        const box = this.lp.row.boxes[boxIndex];
+        if (!box)
+            return this.lp.getLayoutX(null, DocumentLayoutDetailsLevel.Row);
+        const symbolCount = Math.max(0, ancBoxAbsPos - rowAbsPos - box.rowOffset);
+        return this.lp.getLayoutX(null, DocumentLayoutDetailsLevel.Row) + box.x +
+            box.getCharOffsetXInPixels(this.manager.measurer, symbolCount);
+    }
     bookLayout() {
         return this.alignment(this.anchorInfo.horizontalPositionType, AnchorObjectHorizontalPositionCalculator.mapBookLayoutALignmentType[this.anchorInfo.horizontalPositionAlignment]);
     }

package/lib/common/layout-formatter/row/size-engine/row-formatting-info.d.ts

@@ -25,7 +25,10 @@ export declare class RowFormattingInfo {
     get currInterval(): RowIntervalInfo;
     indexOfFreeInterval(width: number): number;
     indexOfIntervalContainsPositon(pos: number): number;
-    calculate(): void;
+    calculate(outerHorizontalRowContentBounds?: FixedInterval): void;
+    private calculateFreeIntervals;
+    recalculate(outerHorizontalRowContentBounds?: FixedInterval): void;
+    private findIntervalIndexByPosition;
     canIncrementHeightTo(newHeight: number): boolean;
     findNextYPos(): void;
     findNextYPosWhatHasNeededSpace(requiredWidth: number): void;

package/lib/common/layout-formatter/row/size-engine/row-formatting-info.js

@@ -45,10 +45,10 @@ export class RowFormattingInfo {
         const ind = ListUtils.indexBy(this.intervals, (curr) => curr.start > pos || pos < curr.end, this.currIndex + 1);
         return ind < 0 ? this.intervals.length - 1 : ind;
     }
-    calculate() {
+    calculate(outerHorizontalRowContentBounds) {
         this.setIntersectObjects();
         this.busyIntervals = IntervalAlgorithms.getMergedIntervals(ListUtils.map(this.intersectsObjects, (objBnds) => new FixedInterval(objBnds.x, objBnds.width)), true);
-        const freeIntervals = IntervalAlgorithms.reflectIntervals(this.busyIntervals, this.outerHorizontalRowContentBounds);
+        const freeIntervals = this.calculateFreeIntervals(this.busyIntervals, outerHorizontalRowContentBounds !== null && outerHorizontalRowContentBounds !== void 0 ? outerHorizontalRowContentBounds : this.outerHorizontalRowContentBounds);
         if (freeIntervals.length) {
             this.intervals = ListUtils.map(freeIntervals, (curr) => new RowIntervalInfo(curr.start, curr.length));
             return;
@@ -56,6 +56,40 @@ export class RowFormattingInfo {
         this.resetMinY(ListUtils.min);
         Log.print(LogSource.RowFormatter, "RowFormattingInfo.calculate ", `minY:${this.minY}, height:${this.height}, currIndex: ${this.currIndex} intervals:\n${Log.join("\n", ListUtils.map(this.intervals, (curr) => LogObjToStr.fixedInterval(curr)))}`);
     }
+    calculateFreeIntervals(busyIntervals, outerHorizontalRowContentBounds) {
+        const intervals = ListUtils.reducedMap(busyIntervals, val => IntervalAlgorithms.getIntersectionNonNullLength(val, outerHorizontalRowContentBounds));
+        if (!intervals.length)
+            return [outerHorizontalRowContentBounds.clone()];
+        const lastIntervalEnd = ListUtils.last(intervals).end;
+        const result = ListUtils.reducedMap(intervals, (curr, i) => FixedInterval.fromPositions(busyIntervals[i - 1].end, curr.start), 1);
+        if (outerHorizontalRowContentBounds.start < busyIntervals[0].start)
+            result.unshift(FixedInterval.fromPositions(outerHorizontalRowContentBounds.start, busyIntervals[0].start));
+        if (outerHorizontalRowContentBounds.end > lastIntervalEnd)
+            result.push(FixedInterval.fromPositions(lastIntervalEnd, outerHorizontalRowContentBounds.end));
+        return result;
+    }
+    recalculate(outerHorizontalRowContentBounds) {
+        const currInterval = this.currInterval;
+        this.calculate(outerHorizontalRowContentBounds);
+        const pos = currInterval.start + currInterval.busyWidth;
+        const index = this.findIntervalIndexByPosition(pos);
+        const interval = this.intervals[index];
+        if (interval && interval.start < pos) {
+            const avaliableWidth = interval.length - (pos - interval.start);
+            interval.avaliableWidth = avaliableWidth;
+        }
+        this.currIndex = index;
+    }
+    findIntervalIndexByPosition(position) {
+        let index = 0;
+        while (index < this.intervals.length) {
+            const interval = this.intervals[index];
+            if (interval.start <= position && position < interval.end || position < interval.start)
+                break;
+            index++;
+        }
+        return index;
+    }
     canIncrementHeightTo(newHeight) {
         const contentBounds = ListUtils.map(this.intervals, (c) => new Rectangle(c.start, this.minY, c.busyWidth, newHeight));
         const intersectedObjects = this.calcIntersectObjects(newHeight);

package/lib/common/layout-formatter/row/states.js

@@ -21,8 +21,6 @@ export class RowBaseFormatterState {
             this.rowFormatter.finishRow();
     }
     addAnchorObject() {
-        if (!this.rowFormatter.wordHolder.pushBoxes())
-            return;
         this.rowFormatter.addAnchorObject();
     }
     addTextBox() {

package/lib/common/layout-formatter/row/tab-info.js

@@ -39,7 +39,7 @@ export class RowTabInfo {
             const tab = this.tabPositions[ind];
             const oldTabPos = tab ? tab.position : Number.MAX_VALUE;
             if (oldTabPos != pos)
-                this.tabPositions.splice(pos > oldTabPos ? ind + 1 : ind, 0, new TabInfo(pos, TabAlign.Left, TabLeaderType.None, false, false));
+                this.tabPositions.splice(pos > oldTabPos ? ind + 1 : ind, 0, new TabInfo(pos, TabAlign.Left, TabLeaderType.None, false, false, true));
         }
         for (let pos of this.tabPositions)
             pos.position += this.paragraphHorizontalBoundsStart;
@@ -85,9 +85,10 @@ export class RowTabInfo {
         const lastInterval = ListUtils.last(this.rowFormatter.rowSizesManager.rowFormattingInfo.intervals);
         if (tabXPosRelativePage > lastInterval.end) {
             if (lastInterval.end < this.rowFormatter.paragraphHorizontalBounds.end) {
-                if (this.rowFormatter.manager.model.compatibilitySettings.compatibilityMode < CompatibilityMode.Word2013) {
-                    this.currInterval.avaliableWidth = Number.MAX_SAFE_INTEGER - this.currInterval.busyWidth;
-                    this.currInterval.length = Number.MAX_SAFE_INTEGER;
+                if (this.rowFormatter.manager.model.compatibilitySettings.compatibilityMode < CompatibilityMode.Word2013 && tabPosition && !tabPosition.isParagraphIndent) {
+                    const interval = this.rowFormatter.rowSizesManager.rowFormattingInfo.outerHorizontalRowContentBounds;
+                    interval.length = Number.MAX_SAFE_INTEGER - interval.start;
+                    this.rowFormatter.rowSizesManager.rowFormattingInfo.recalculate(interval);
                     this.row.width = Number.MAX_SAFE_INTEGER;
                     this.row.flags.set(LayoutRowStateFlags.InfinityWidth, true);
                     return this.addTabBox();

package/lib/common/layout-formatter/table/info/table-info.d.ts

@@ -53,7 +53,6 @@ export declare class TableInfo {
     constructor(rowFormatter: RowFormatter, table: Table, tableMaxWidth: number, xPosition: number, yOffset: number, pageIndexFromWhichTableWasMoved: number | null);
     static checkIsTableCannotBePlacedOnCurrentPage(rowFormatter: RowFormatter, table: Table, yOffset: number, maxWidth: number): boolean;
     private init;
-    private getShiftHorizontalPosition;
     private static getEstimatedTableWidth;
     private static getRelationByColumnY;
     private static getRelationByColumnX;

package/lib/common/layout-formatter/table/info/table-info.js

@@ -8,7 +8,7 @@ import { LayoutTableColumnInfo, LayoutTableInfo } from '../../../layout/table/la
 import { TablePosition, TablePositionIndexes } from '../../../model/tables/main-structures/table';
 import { TableCellPropertiesMergerMarginLeft, TableCellPropertiesMergerMarginRight } from '../../../model/tables/properties-mergers/table-cell-properties-merger';
 import { TablePropertiesMergerShadingInfo } from '../../../model/tables/properties-mergers/table-properties-merger';
-import { ConditionalTableStyleFormatting, TableLayoutType, TableRowAlignment } from '../../../model/tables/secondary-structures/table-base-structures';
+import { ConditionalTableStyleFormatting, TableLayoutType } from '../../../model/tables/secondary-structures/table-base-structures';
 import { TableWidthUnitType } from '../../../model/tables/secondary-structures/table-units';
 import { BorderHelper } from '../borders/border-helper';
 import { createGrid } from '../grid-engine/creator';
@@ -79,25 +79,9 @@ export class TableInfo {
             tableIndent.value = 0;
         }
         const tableIndentInPixels = tableIndent.asNumberNoPercentType(UnitConverter.twipsToPixels);
-        this.xPositionStart = xPosition + tableIndentInPixels + (diff.xDiff ? diff.xDiff : -firstCellLeftMargin) +
-            this.getShiftHorizontalPosition(xPosition);
+        this.xPositionStart = xPosition + tableIndentInPixels + (diff.xDiff ? diff.xDiff : -firstCellLeftMargin);
         this.yPositionStart = yOffset + diff.yDiff;
     }
-    getShiftHorizontalPosition(xPosition) {
-        const freeSpaceFromTable = this.columnWidth - this.grid.commonWidth;
-        if (freeSpaceFromTable >= 0)
-            return 0;
-        const tableAlignment = this.table.getActualTableAlignment();
-        if (tableAlignment == TableRowAlignment.Center) {
-            let result = freeSpaceFromTable / 2 - xPosition;
-            if (result < 0 && this.isSimpleView)
-                result = 0;
-            return result;
-        }
-        else if (tableAlignment == TableRowAlignment.Right)
-            return freeSpaceFromTable - xPosition;
-        return 0;
-    }
     static getEstimatedTableWidth(table, maxWidth) {
         const preferredWidth = table.preferredWidth;
         const minWidth = 3 * table.rows[0].getTotalCellsInRowConsiderGrid();

package/lib/common/layout-formatter/table/size-compressor.js

@@ -11,6 +11,12 @@ export class LayoutTableSizeCompressor {
             LayoutTableSizeCompressor.cellCompress(cell, cell.createRectangle());
     }
     static tableCompress(tableInfo, boundsRelativeColumn) {
+        const intersection = Rectangle.getIntersection(tableInfo, boundsRelativeColumn);
+        const headOffset = intersection.x - tableInfo.x;
+        if (headOffset > 0) {
+            tableInfo.verticalBorders.forEach(b => b.xPos -= headOffset);
+            tableInfo.verticalCursorBorders.forEach(b => b.xPos -= headOffset);
+        }
         LayoutTableSizeCompressor.compress(tableInfo, boundsRelativeColumn, true, false);
         const boundsRelativeTable = tableInfo.clone().moveRectangle(-tableInfo.x, -tableInfo.y);
         for (let row of tableInfo.tableRows)
@@ -79,8 +85,9 @@ export class LayoutTableSizeCompressor {
         }
         border.length = Math.min(border.yPos + border.length, bounds.bottom) - border.yPos;
         if (border.xPos < bounds.x)
-            return true;
-        border.xPos = bounds.right;
+            border.xPos = bounds.x;
+        else
+            border.xPos = bounds.right;
         border.borderInfo.width = 0;
         return false;
     }

package/lib/common/layout-formatter/table/table-alignment-applier.js

@@ -33,8 +33,6 @@ export class TableAlignmentApplier {
                 offset = 0;
                 break;
         }
-        if (offset <= 0)
-            return;
         TableAlignmentApplier.moveAllTable(currTableColumnInfo, (rect) => rect.x += offset);
     }
     static applyCellsVerticalAlignment(defaultTableCellProps, grid, currTableColumnInfo, rowInfo) {

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/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/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/paragraph/paragraph-style.d.ts

@@ -53,7 +53,8 @@ export declare abstract class TabInfoBase<T extends TabInfoBase<T>> implements I
 }
 export declare class TabInfo extends TabInfoBase<TabInfo> {
     position: number;
-    constructor(position: number, alignment: TabAlign, leader: TabLeaderType, deleted: boolean, isDefault: boolean);
+    readonly isParagraphIndent: boolean;
+    constructor(position: number, alignment: TabAlign, leader: TabLeaderType, deleted: boolean, isDefault: boolean, isParagraphIndent?: boolean);
     equals(obj: TabInfo): boolean;
     clone(): TabInfo;
 }

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

@@ -123,9 +123,10 @@ export class TabInfoBase {
     }
 }
 export class TabInfo extends TabInfoBase {
-    constructor(position, alignment, leader, deleted, isDefault) {
+    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;

package/lib/common/model/tables/secondary-structures/table-base-structures.d.ts

@@ -94,5 +94,6 @@ export declare enum ConditionalTableStyleFormatting {
     TopRightCell = 8,
     TopLeftCell = 4,
     BottomRightCell = 2,
-    BottomLeftCell = 1
+    BottomLeftCell = 1,
+    None = 0
 }