devexpress-richedit 24.2.6 → 25.1.1-alpha

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

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

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

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

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

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

package/lib/common/ui/ruler/controls/zoomable-value.js

@@ -0,0 +1,15 @@
+export class RulerValue {
+    set value(value) {
+        this.originalValue = value / this.zoomLevelHolder.zoomLevel;
+    }
+    ;
+    get value() {
+        const calculatedValue = this.originalValue * this.zoomLevelHolder.zoomLevel;
+        return calculatedValue;
+    }
+    ;
+    constructor(originalValue, zoomLevelHolder) {
+        this.originalValue = originalValue;
+        this.zoomLevelHolder = zoomLevelHolder;
+    }
+}

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

@@ -1,6 +1,6 @@
 import { MinMaxNumber } from '@devexpress/utils/lib/class/min-max';
 import { RulerColumnsControl } from './controls/column';
-import { RulerDivisionsControl } from './controls/divisions';
+import { DivisionInfo, RulerDivisionsControl } from './controls/divisions';
 import { RulerFirstLineIndentDragHandle } from './controls/indent/first-line';
 import { RulerLeftIndentDragHandle } from './controls/indent/left';
 import { RulerRightIndentDragHandle } from './controls/indent/right';
@@ -34,10 +34,14 @@ export declare class RulerControls {
     readonly tables: RulerTablesControl;
     readonly tabs: RulerTabsControl;
     readonly mouseHandler: RulerMouseHandler;
-    readonly moveStepSize: number;
+    readonly modelData: RulerModelData;
+    readonly divisionInfo: DivisionInfo;
+    private moveStepSize;
     get paragraphLeftPosition(): number;
     get paragraphRightPosition(): number;
     constructor(canvas: HTMLDivElement, modelData: RulerModelData);
+    calculateMoveStepSize(): void;
+    updateZoomLevel(): void;
     dispose(): void;
     update(): void;
     private updateModelState;

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

@@ -42,13 +42,14 @@ export class RulerControls {
         this.mouseEventsManager = new RulerMouseEventsManager();
         this.viewElementScrollManager = new RulerViewElementScrollManager();
         this.canvas = canvas;
-        const divisionInfo = DivisionInfo.create(modelData.unitType);
-        const maxPageWidth = UnitConverter.twipsToPixelsF(PaperSizeConverter.calculatePaperSize(PaperKind.PrcEnvelopeNumber10Rotated).width);
-        this.moveStepSize = modelData.unitType == RichEditUnit.Inch ? divisionInfo.stepSize / 2 : divisionInfo.stepSize;
+        this.modelData = modelData;
+        this.divisionInfo = DivisionInfo.create(modelData.unitType, this.modelData.innerClientProperties.viewsSettings);
+        this.calculateMoveStepSize();
+        const maxPageWidth = UnitConverter.twipsToPixelsF(PaperSizeConverter.calculatePaperSize(PaperKind.PrcEnvelopeNumber10Rotated).width) * this.modelData.zoomLevel;
         this.wrapper = new RulerWrapper(modelData, this);
         this.ruler = new RulerControl(modelData, this);
         this.tabTypeBox = new RulerTabTypeControl(modelData, this);
-        this.divisions = new RulerDivisionsControl(modelData, this, divisionInfo, maxPageWidth);
+        this.divisions = new RulerDivisionsControl(modelData, this, this.divisionInfo, maxPageWidth);
         this.leftMargin = new RulerLeftMarginDragHandle(modelData, this, maxPageWidth);
         this.rightMargin = new RulerRightMarginDragHandle(modelData, this, maxPageWidth);
         this.leftIndent = new RulerLeftIndentDragHandle(modelData, this);
@@ -64,6 +65,12 @@ export class RulerControls {
         this.mouseEventsManager.addListener(this.mouseHandler);
         this.viewElementScrollManager.addListener(this.ruler, this.canvas);
     }
+    calculateMoveStepSize() {
+        this.moveStepSize = this.modelData.unitType == RichEditUnit.Inch ? this.divisionInfo.stepSize / 2 : this.divisionInfo.stepSize;
+    }
+    updateZoomLevel() {
+        this.divisionInfo.updateZoomLevel();
+    }
     dispose() {
         this.lineControl.dispose();
         this.wrapper.dispose();
@@ -82,8 +89,10 @@ export class RulerControls {
         this.viewElementScrollManager.dispose();
     }
     update() {
+        this.updateZoomLevel();
         this.updateModelState();
         this.updateView();
+        this.calculateMoveStepSize();
     }
     updateModelState() {
         this.ruler.updateModelState();

package/lib/common/ui/ruler/model-data.d.ts

@@ -21,6 +21,7 @@ export declare class RulerModelData {
     get isReadOnly(): boolean;
     get unitType(): RichEditUnit;
     get selection(): Selection;
+    get zoomLevel(): number;
     constructor(core: RichEditCore, settings: RulerSettings);
     private fixSettings;
     private getDefaultStyle;

package/lib/common/ui/ruler/model-data.js

@@ -13,6 +13,7 @@ export class RulerModelData {
     get isReadOnly() { return this.core.readOnly != ReadOnlyMode.None; }
     get unitType() { return this.core.uiUnitConverter.getUnits(); }
     get selection() { return this.core.selection; }
+    get zoomLevel() { return this.core.viewManager.zoomLevel; }
     constructor(core, settings) {
         this.core = core;
         this.settings = this.fixSettings(settings);

package/lib/common/view-settings/views-settings.d.ts

@@ -20,6 +20,8 @@ export declare class ViewSettings {
     fixedWidth?: number;
     pageVerticalInfo: RenderPageVertivalInfo;
     showHorizontalRuler: boolean;
+    zoomLevel: number;
+    allowZoom: boolean;
     private _widthOfPage;
     get isFixedWidthMode(): boolean;
     set widthOfPage(val: number);

package/lib/common/view-settings/views-settings.js

@@ -57,6 +57,7 @@ export class ViewSettings {
         this.paddings = new Margins(15, 15, 15, 15);
         this.pageVerticalInfo = new RenderPageVertivalInfo();
         this.showHorizontalRuler = true;
+        this.zoomLevel = 1.0;
     }
     copyFrom(obj) {
         this.paddings = new Margins(obj.paddings.left, obj.paddings.right, obj.paddings.top, obj.paddings.bottom);
@@ -64,6 +65,8 @@ export class ViewSettings {
         this._widthOfPage = obj._widthOfPage;
         this.fixedWidth = obj.fixedWidth;
         this.showHorizontalRuler = obj.showHorizontalRuler;
+        this.zoomLevel = obj.zoomLevel;
+        this.allowZoom = obj.allowZoom;
         this.pageVerticalInfo.copyFrom(obj.pageVerticalInfo);
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "devexpress-richedit",
-  "version": "24.2.6",
+  "version": "25.1.1-alpha",
   "homepage": "https://www.devexpress.com/",
   "bugs": "https://www.devexpress.com/support/",
   "author": "Developer Express Inc.",
@@ -14,18 +14,18 @@
     "build-nspell": "webpack --mode production --config=bin/nspell.webpack.config.js"
   },
   "peerDependencies": {
-    "devextreme": "24.2.6",
-    "devextreme-dist": "24.2.6"
+    "devextreme": "25.1.1-alpha",
+    "devextreme-dist": "25.1.1-alpha"
   },
   "dependencies": {
     "jszip": "~3.10.1",
-    "tslib": "2.6.0",
+    "tslib": "2.6.2",
     "@devexpress/utils": "^1.4.3"
   },
   "devDependencies": {
-    "webpack": "5.75.0",
-    "terser-webpack-plugin": "5.3.6",
-    "webpack-cli": "5.0.1",
+    "webpack": "5.89.0",
+    "terser-webpack-plugin": "5.3.10",
+    "webpack-cli": "5.1.4",
     "gulp-minify-css": "1.2.4",
     "gulp": "4.0.2",
     "gulp-concat-css": "3.1.0",