devexpress-richedit 25.1.12 → 25.1.13

package/lib/common/ui/ruler/controls/indent/left.d.ts

@@ -6,12 +6,13 @@ export declare class RulerLeftIndentDragHandle extends RulerBaseIndentControl {
     private topElement;
     private bodyElement;
     private isActionLeftIndent;
-    readonly leftCorrection: number;
-    private readonly _heightOfProtrudingPart;
+    leftCorrection: number;
+    private _heightOfProtrudingPart;
     get heightOfProtrudingPart(): number;
     protected getRootClassName(): string;
     constructor(modelData: RulerModelData, controls: RulerControls);
-    private adjustByTop;
+    recalculateLayout(): void;
+    private applyLayout;
     protected getModelState(): RulerModelState;
     updateView(): void;
     protected canHandle(source: HTMLElement): boolean;

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

@@ -25,23 +25,25 @@ export class RulerLeftIndentDragHandle extends RulerBaseIndentControl {
         this.rootElement.appendChild(this.topElement);
         this.rootElement.appendChild(this.bodyElement);
         this.controls.ruler.rootElement.appendChild(this.rootElement);
-        this.adjustByTop();
+        this.bodyElement.title = this.modelData.titles.leftIndent;
+        this.topElement.title = this.modelData.titles.hangingIndent;
+        this.applyLayout();
+    }
+    recalculateLayout() {
+        this.applyLayout();
+        if (this.modelData.showLeftIndent)
+            this.rootElement.style.left = this.viewState + RULLER_NUMBER_CORRECTION - this.leftCorrection + "px";
+    }
+    applyLayout() {
         const mainElementWidth = this.topElement.offsetWidth;
         this.bodyElement.style.width = mainElementWidth + "px";
         const style = this.rootElement.style;
         style.height = SizeUtils.getOffsetHeight(this.topElement) + SizeUtils.getOffsetHeight(this.bodyElement) + "px";
         style.width = mainElementWidth + "px";
         style.marginTop = this.controls.divisions.height / 2 + "px";
-        this.bodyElement.title = this.modelData.titles.leftIndent;
-        this.topElement.title = this.modelData.titles.hangingIndent;
         this.leftCorrection = Math.round(SizeUtils.getOffsetWidth(this.rootElement) / 2);
         this._heightOfProtrudingPart = SizeUtils.getOffsetHeight(this.rootElement) - this.controls.divisions.height / 2;
     }
-    adjustByTop() {
-        const mainElementHeight = SizeUtils.getOffsetHeight(this.rootElement);
-        const divisionsControlHeight = this.controls.divisions.height;
-        this.rootElement.style.marginTop = (mainElementHeight - divisionsControlHeight) / 2 + "px";
-    }
     getModelState() {
         const state = this.modelData.commandManager.getCommand(RichEditClientCommand.RulerParagraphLeftIndents).getState();
         return new RulerModelState(state.value.hanging, state.enabled, this.modelData);

package/lib/common/ui/ruler/controls/indent/right.d.ts

@@ -4,9 +4,11 @@ import { RulerModelState } from '../base';
 import { RulerBaseIndentControl } from './base';
 export declare class RulerRightIndentDragHandle extends RulerBaseIndentControl {
     get viewStateRelativeLeft(): number;
-    private readonly leftCorrection;
+    private leftCorrection;
     protected getRootClassName(): string;
     constructor(modelData: RulerModelData, controls: RulerControls);
+    recalculateLayout(): void;
+    private applyLayout;
     private adjustByTop;
     protected getModelState(): RulerModelState;
     updateView(): void;

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

@@ -19,6 +19,14 @@ export class RulerRightIndentDragHandle extends RulerBaseIndentControl {
             this.rootElement.innerHTML = template;
         this.rootElement.title = this.modelData.titles.rightIndent;
         this.controls.ruler.rootElement.appendChild(this.rootElement);
+        this.applyLayout();
+    }
+    recalculateLayout() {
+        this.applyLayout();
+        if (this.modelData.showRightIndent)
+            this.rootElement.style.right = this.viewState + RULLER_NUMBER_CORRECTION - this.leftCorrection + "px";
+    }
+    applyLayout() {
         this.adjustByTop();
         this.leftCorrection = Math.round(this.rootElement.offsetWidth / 2);
     }

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

@@ -21,6 +21,7 @@ export declare class RulerTabsControl extends RulerMultiControl<RulerTabControl,
     private tabAction;
     private newTab;
     private deleteTab;
+    recalculateSubControlLayouts(): void;
     protected getModelState(): RulerTabsControlState;
     updateView(): void;
     protected createSubControl(): RulerTabControl;
@@ -44,6 +45,8 @@ declare class RulerTabControl {
     protected controls: RulerControls;
     protected shadow: RulerShadow | null;
     constructor(modelData: RulerModelData, controls: RulerControls);
+    recalculateLayout(): void;
+    private applyLayout;
     dispose(): void;
     setVisible(visible: boolean): void;
     canHandle(source: HTMLElement): boolean;

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

@@ -50,6 +50,10 @@ export class RulerTabsControl extends RulerMultiControl {
         this.newTab = null;
         this.deleteTab = false;
     }
+    recalculateSubControlLayouts() {
+        for (const control of this.subControls)
+            control.recalculateLayout();
+    }
     getModelState() {
         this.modelData.showTabs = this.modelData.commandManager.getCommand(RichEditClientCommand.InsertTabRuler).getState().enabled;
         if (this.modelData.showTabs) {
@@ -197,7 +201,14 @@ class RulerTabControl {
         this.rootElement = DocumentRenderer.renderContainer(modelData.styles.tab.className + " " + RulerTabUtils.getSpriteClassName(this.viewState.align, modelData.styles));
         this.applyTemplate();
         controls.ruler.rootElement.appendChild(this.rootElement);
-        this.rootElement.style.marginTop = (controls.divisions.height - this.rootElement.offsetHeight) + "px";
+        this.applyLayout();
+    }
+    recalculateLayout() {
+        this.applyLayout();
+        this.rootElement.style.left = this.viewState.position - this.leftCorrection + RULLER_NUMBER_CORRECTION + "px";
+    }
+    applyLayout() {
+        this.rootElement.style.marginTop = (this.controls.divisions.height - this.rootElement.offsetHeight) + "px";
         this.setCorrection();
     }
     dispose() {

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

@@ -18,6 +18,7 @@ export declare class RulerTableColumnViewState {
     clone(): RulerTableColumnViewState;
 }
 export declare class RulerTablesControl extends RulerMultiControl<RulerTableColumnState, RulerTableModelState, RulerTableColumnViewState> {
+    recalculateSubControlLayouts(): void;
     protected getModelState(): RulerTableModelState;
     updateView(): void;
     protected createSubControl(): RulerTableColumnState;
@@ -29,9 +30,11 @@ declare class RulerTableColumnState {
     private rootElement;
     private separatorElement;
     private viewState;
-    private readonly corectionValue;
+    private corectionValue;
     private readonly controls;
     constructor(modelData: RulerModelData, controls: RulerControls);
+    recalculateLayout(): void;
+    private applyLayout;
     dispose(): void;
     showShadow(): void;
     hideShadow(): void;

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

@@ -35,6 +35,10 @@ export class RulerTableColumnViewState {
     }
 }
 export class RulerTablesControl extends RulerMultiControl {
+    recalculateSubControlLayouts() {
+        for (const control of this.subControls)
+            control.recalculateLayout();
+    }
     getModelState() {
         const state = this.modelData.commandManager.getCommand(RichEditClientCommand.RulerTableColumnSeparators).getState();
         return state.enabled ?
@@ -102,6 +106,14 @@ class RulerTableColumnState {
             this.separatorElement.innerHTML = template;
         this.rootElement.appendChild(this.separatorElement);
         controls.ruler.rootElement.appendChild(this.rootElement);
+        this.applyLayout();
+    }
+    recalculateLayout() {
+        this.applyLayout();
+        if (this.viewState)
+            this.separatorElement.style.left = this.viewState.rightMarginOfPrevColumn - this.corectionValue + "px";
+    }
+    applyLayout() {
         this.corectionValue = Math.floor(this.separatorElement.offsetWidth / 2);
     }
     dispose() {

package/lib/common/ui/ruler/layout-recalculation-guard.d.ts

@@ -0,0 +1,12 @@
+export declare const DEFAULT_SVG_SIZE = 300;
+export interface LayoutRecalculationGuardTarget {
+    readonly rootElement: HTMLElement;
+}
+export interface LayoutRecalculationGuardOptions {
+    divisions: LayoutRecalculationGuardTarget;
+    leftIndent: LayoutRecalculationGuardTarget;
+    divisionsHeight: number;
+    leftIndentWidth: number;
+    onHealthy: () => void;
+}
+export declare function installLayoutRecalculationGuard(options: LayoutRecalculationGuardOptions): ResizeObserver | null;

package/lib/common/ui/ruler/layout-recalculation-guard.js

@@ -0,0 +1,23 @@
+export const DEFAULT_SVG_SIZE = 300;
+export function installLayoutRecalculationGuard(options) {
+    const { divisions, leftIndent, divisionsHeight, leftIndentWidth, onHealthy } = options;
+    const isSuspicious = divisionsHeight === 0 || leftIndentWidth >= DEFAULT_SVG_SIZE;
+    if (!isSuspicious)
+        return null;
+    const targets = [divisions.rootElement, leftIndent.rootElement];
+    const initialSizes = targets.map(el => ({ width: el.offsetWidth, height: el.offsetHeight }));
+    const observer = new ResizeObserver(() => {
+        const hasRealChange = targets.some((el, i) => {
+            const w = el.offsetWidth;
+            const h = el.offsetHeight;
+            const changed = w !== initialSizes[i].width || h !== initialSizes[i].height;
+            return changed && (w > 0 || h > 0);
+        });
+        if (!hasRealChange)
+            return;
+        observer.disconnect();
+        onHealthy();
+    });
+    targets.forEach(el => observer.observe(el));
+    return observer;
+}

package/lib/common/ui/ruler/manager.d.ts

@@ -37,9 +37,12 @@ export declare class RulerControls {
     readonly modelData: RulerModelData;
     readonly divisionInfo: DivisionInfo;
     private moveStepSize;
+    private layoutRecalculationObserver;
     get paragraphLeftPosition(): number;
     get paragraphRightPosition(): number;
     constructor(canvas: HTMLDivElement, modelData: RulerModelData);
+    private setupLayoutRecalculationGuard;
+    recalculateLayout(): void;
     calculateMoveStepSize(): void;
     updateZoomLevel(): void;
     dispose(): void;

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

@@ -19,6 +19,7 @@ import { RulerWrapper } from './controls/wrapper';
 import { RulerMouseEventsManager } from './events/mouse';
 import { RulerViewElementScrollManager } from './events/scroll';
 import { RulerMouseHandler } from './mouse-handler';
+import { installLayoutRecalculationGuard } from './layout-recalculation-guard';
 export class RulerControls {
     get paragraphLeftPosition() {
         let pos = this.leftMargin.currModelState.modelValue + this.columns.currModelState.activeColumn.leftPos;
@@ -41,6 +42,7 @@ export class RulerControls {
     constructor(canvas, modelData) {
         this.mouseEventsManager = new RulerMouseEventsManager();
         this.viewElementScrollManager = new RulerViewElementScrollManager();
+        this.layoutRecalculationObserver = null;
         this.canvas = canvas;
         this.modelData = modelData;
         this.divisionInfo = DivisionInfo.create(modelData.unitType, this.modelData.innerClientProperties.viewsSettings);
@@ -64,6 +66,29 @@ export class RulerControls {
         this.mouseHandler = new RulerMouseHandler(modelData, this);
         this.mouseEventsManager.addListener(this.mouseHandler);
         this.viewElementScrollManager.addListener(this.ruler, this.canvas);
+        this.setupLayoutRecalculationGuard();
+    }
+    setupLayoutRecalculationGuard() {
+        this.layoutRecalculationObserver = installLayoutRecalculationGuard({
+            divisions: this.divisions,
+            leftIndent: this.leftIndent,
+            divisionsHeight: this.divisions.height,
+            leftIndentWidth: this.leftIndent.leftCorrection * 2,
+            onHealthy: () => {
+                this.layoutRecalculationObserver = null;
+                this.recalculateLayout();
+            },
+        });
+    }
+    recalculateLayout() {
+        this.divisions.recalculateLayout();
+        this.leftIndent.recalculateLayout();
+        this.firstLineIndent.recalculateLayout();
+        this.rightIndent.recalculateLayout();
+        this.tabs.recalculateSubControlLayouts();
+        this.tables.recalculateSubControlLayouts();
+        this.ruler.init();
+        this.tabTypeBox.adjust();
     }
     calculateMoveStepSize() {
         this.moveStepSize = this.modelData.unitType == RichEditUnit.Inch ? this.divisionInfo.stepSize / 2 : this.divisionInfo.stepSize;
@@ -72,6 +97,10 @@ export class RulerControls {
         this.divisionInfo.updateZoomLevel();
     }
     dispose() {
+        if (this.layoutRecalculationObserver) {
+            this.layoutRecalculationObserver.disconnect();
+            this.layoutRecalculationObserver = null;
+        }
         this.lineControl.dispose();
         this.wrapper.dispose();
         this.ruler.dispose();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "devexpress-richedit",
-  "version": "25.1.12",
+  "version": "25.1.13",
   "homepage": "https://www.devexpress.com/",
   "bugs": "https://www.devexpress.com/support/",
   "author": "Developer Express Inc.",
@@ -11,19 +11,21 @@
     "build-nspell": "webpack --mode production --config=bin/nspell.webpack.config.js"
   },
   "peerDependencies": {
-    "devextreme": "25.1.12",
-    "devextreme-dist": "25.1.12"
+    "devextreme": "25.1.13",
+    "devextreme-dist": "25.1.13"
   },
   "devDependencies": {
     "dictionary-en": "3.2.0",
     "gulp": "^5.0.1",
+    "gulp-concat": "^2.6.1",
+    "gulp-clean-css": "^4.3.0",
     "nspell": "2.1.5",
     "terser-webpack-plugin": "5.3.10",
     "webpack": "5.89.0",
     "webpack-cli": "5.1.4"
   },
   "dependencies": {
-    "@devexpress/utils": "^2.1.1",
+    "@devexpress/utils": "^2.1.2",
     "@types/pdfkit": "0.13.3",
     "jszip": "~3.10.1",
     "pdfkit": "0.14.0",