devexpress-reporting 23.2.6 → 24.1.2-beta

package/viewer/widgets/dateRange/dateRangeEditor.binding.d.ts

@@ -1,7 +1,7 @@
 /**
 * DevExpress HTML/JS Reporting (viewer\widgets\dateRange\dateRangeEditor.binding.d.ts)
-* Version:  23.2.6
-* Build date: Apr 30, 2024
+* Version:  24.1.2-beta
+* Build date: May 14, 2024
 * Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
 * License: https://www.devexpress.com/Support/EULAs/universal.xml
 */

package/viewer/widgets/dateRange/dateRangeEditor.binding.js

@@ -1,22 +1,21 @@
 /**
 * DevExpress HTML/JS Reporting (viewer\widgets\dateRange\dateRangeEditor.binding.js)
-* Version:  23.2.6
-* Build date: Apr 30, 2024
+* Version:  24.1.2-beta
+* Build date: May 14, 2024
 * Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
 * License: https://www.devexpress.com/Support/EULAs/universal.xml
 */
 import { createDateRangeEditor } from './dateRangeEditor';
 import * as ko from 'knockout';
-import * as $ from 'jquery';
 import { getTemplate } from '@devexpress/analytics-core/analytics-utils-native';
-import { addDisposeCallback } from '@devexpress/analytics-core/analytics-internal-native';
+import { $dx, addDisposeCallback } from '@devexpress/analytics-core/analytics-internal-native';
 ko.bindingHandlers['dxrvDateRangeEditor'] = {
     init: (element, valueAccessor, bindings, model, bindingContext) => {
         const rangeEditor = createDateRangeEditor(valueAccessor(), element, model);
-        $.fn.constructor(element).children().remove();
-        const templateHtml = getTemplate('dxrv-daterange-editor'), $element = $.fn.constructor(element).append(templateHtml);
+        $dx(element).empty();
+        const templateHtml = getTemplate('dxrv-daterange-editor'), $element = $dx(element).append(templateHtml);
         const context = bindingContext.createChildContext(rangeEditor.getViewModel());
-        ko.applyBindingsToDescendants(context, $element.children()[0]);
+        ko.applyBindingsToDescendants(context, $element[0].children[0]);
         addDisposeCallback(element, () => rangeEditor.dispose());
         return { controlsDescendantBindings: true };
     }

package/viewer/widgets/dateRange/dateRangeEditor.d.ts

@@ -1,10 +1,11 @@
 /**
 * DevExpress HTML/JS Reporting (viewer\widgets\dateRange\dateRangeEditor.d.ts)
-* Version:  23.2.6
-* Build date: Apr 30, 2024
+* Version:  24.1.2-beta
+* Build date: May 14, 2024
 * Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
 * License: https://www.devexpress.com/Support/EULAs/universal.xml
 */
+import { IJQueryWrapper } from '@devexpress/analytics-core/analytics-internal-native';
 import { DateRangeDialogElementsKeyboardHelper } from '../../accessibility/_dateRangeKeyboardHelper';
 import { ArrayPropertyChangedEventArgs, BaseRenderingModel, PropertyChangedEventArgs } from '@devexpress/analytics-core/analytics-serializer-native';
 import { IDateRangeEditorViewModel } from './dateRangeEditor.viewmodel';
@@ -18,7 +19,7 @@ export interface IDateRangeEditorOptions {
     isMobile?: boolean;
     displayName?: string;
 }
-declare type IKoDateRangeEditorOptions = {
+type IKoDateRangeEditorOptions = {
     value: ko.Observable<IDateRangeEditorOptions['value']>;
     isMobile?: boolean;
 };
@@ -31,7 +32,7 @@ export declare class DateRangeEditor extends BaseRenderingModel<IDateRangeEditor
     _showPopup: () => void;
     _hidePopup: () => void;
     getElement(): Element | undefined;
-    _$element: JQuery;
+    _$element: IJQueryWrapper;
     _editorInputId: string;
     _displayName: string;
     _isSelected(item: IDateRangeEditorItem): boolean;

package/viewer/widgets/dateRange/dateRangeEditor.js

@@ -1,7 +1,7 @@
 /**
 * DevExpress HTML/JS Reporting (viewer\widgets\dateRange\dateRangeEditor.js)
-* Version:  23.2.6
-* Build date: Apr 30, 2024
+* Version:  24.1.2-beta
+* Build date: May 14, 2024
 * Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
 * License: https://www.devexpress.com/Support/EULAs/universal.xml
 */
@@ -36,36 +36,6 @@ export function createDateRangeEditor(_options, element, model) {
     return rangeEditor;
 }
 export class DateRangeEditor extends BaseRenderingModel {
-    constructor(_options, editorInputId, visibilityChangedCallback) {
-        super();
-        this._options = _options;
-        this._locker = new Locker();
-        this._showPopup = () => {
-            this._popupVisible = true;
-        };
-        this._hidePopup = () => {
-            this._popupVisible = false;
-            this._$element.get(0).querySelector('input').focus();
-        };
-        this.popupTemplate = 'dxrv-daterange-editor-popup';
-        this.items = [];
-        this.calendarHeight = '100%';
-        this._visibilityChangedCallback = visibilityChangedCallback;
-        this._displayText = this._getStringValue([this.startDate, this.endDate]);
-        this.applyDate(this._options.value);
-        if (_options.isMobile) {
-            this.popupTemplate = 'dxrd-menu-parameters-content';
-            this.popupModel = new DateRangeParemeterPopupModel(this);
-        }
-        else {
-            this.popupModel = this;
-        }
-        this.items = [...predefinedDateRanges];
-        this.dialogKeyboardHelper = new DateRangeDialogElementsKeyboardHelper(this);
-        this._disposables.push(this.dialogKeyboardHelper);
-        this._editorInputId = editorInputId;
-        this._displayName = _options.displayName;
-    }
     createViewModel() {
         return createDateRangeEditorViewModel.call(this, super.createViewModel());
     }
@@ -109,6 +79,36 @@ export class DateRangeEditor extends BaseRenderingModel {
         viewModel.endRange.min = this.startDate;
         viewModel.displayValue = this._displayText;
     }
+    constructor(_options, editorInputId, visibilityChangedCallback) {
+        super();
+        this._options = _options;
+        this._locker = new Locker();
+        this._showPopup = () => {
+            this._popupVisible = true;
+        };
+        this._hidePopup = () => {
+            this._popupVisible = false;
+            this._$element.get(0).querySelector('input').focus();
+        };
+        this.popupTemplate = 'dxrv-daterange-editor-popup';
+        this.items = [];
+        this.calendarHeight = '100%';
+        this._visibilityChangedCallback = visibilityChangedCallback;
+        this._displayText = this._getStringValue([this.startDate, this.endDate]);
+        this.applyDate(this._options.value);
+        if (_options.isMobile) {
+            this.popupTemplate = 'dxrd-menu-parameters-content';
+            this.popupModel = new DateRangeParemeterPopupModel(this);
+        }
+        else {
+            this.popupModel = this;
+        }
+        this.items = [...predefinedDateRanges];
+        this.dialogKeyboardHelper = new DateRangeDialogElementsKeyboardHelper(this);
+        this._disposables.push(this.dialogKeyboardHelper);
+        this._editorInputId = editorInputId;
+        this._displayName = _options.displayName;
+    }
     _toParameterValue() {
         return [this.startDate, this.endDate];
     }

package/viewer/widgets/dateRange/dateRangeEditor.ranges.d.ts

@@ -1,7 +1,7 @@
 /**
 * DevExpress HTML/JS Reporting (viewer\widgets\dateRange\dateRangeEditor.ranges.d.ts)
-* Version:  23.2.6
-* Build date: Apr 30, 2024
+* Version:  24.1.2-beta
+* Build date: May 14, 2024
 * Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
 * License: https://www.devexpress.com/Support/EULAs/universal.xml
 */

package/viewer/widgets/dateRange/dateRangeEditor.ranges.js

@@ -1,7 +1,7 @@
 /**
 * DevExpress HTML/JS Reporting (viewer\widgets\dateRange\dateRangeEditor.ranges.js)
-* Version:  23.2.6
-* Build date: Apr 30, 2024
+* Version:  24.1.2-beta
+* Build date: May 14, 2024
 * Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
 * License: https://www.devexpress.com/Support/EULAs/universal.xml
 */
@@ -14,9 +14,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { getLocalization } from '@devexpress/analytics-core/analytics-internal-native';
 import { BaseModel, mutableArray } from '@devexpress/analytics-core/analytics-serializer-native';
 class CSDateTime {
-    constructor(_date = null) {
-        this._date = _date;
-    }
     static get today() {
         return new CSDateTime().now();
     }
@@ -32,6 +29,9 @@ class CSDateTime {
     get year() {
         return this._date.getFullYear();
     }
+    constructor(_date = null) {
+        this._date = _date;
+    }
     addMonths(months) {
         return new CSDateTime(new Date(this._date.setMonth(CSDateTime.today.month + months)));
     }

package/viewer/widgets/dateRange/dateRangeEditor.viewmodel.d.ts

@@ -1,7 +1,7 @@
 /**
 * DevExpress HTML/JS Reporting (viewer\widgets\dateRange\dateRangeEditor.viewmodel.d.ts)
-* Version:  23.2.6
-* Build date: Apr 30, 2024
+* Version:  24.1.2-beta
+* Build date: May 14, 2024
 * Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
 * License: https://www.devexpress.com/Support/EULAs/universal.xml
 */
@@ -12,11 +12,11 @@ import { Properties as CalendarProperties } from 'devextreme/ui/calendar';
 import { DateRangeEditor } from './dateRangeEditor';
 import { DateRangeDialogElementsKeyboardHelper, PredefinedDateRangesKeyboardHelper } from '../../accessibility/_dateRangeKeyboardHelper';
 import { IDateRangeEditorItem } from './dateRangeEditor.ranges';
-export declare type IDateRangeEditorPredefinedItemViewModel = IDateRangeEditorItem & {
+export type IDateRangeEditorPredefinedItemViewModel = IDateRangeEditorItem & {
     click: () => void;
     selected: boolean;
 };
-export declare type IDateRangeCalendarViewModel = {
+export type IDateRangeCalendarViewModel = {
     value: Date;
     onValueChanged: CalendarProperties['onValueChanged'];
     min: Date;

package/viewer/widgets/dateRange/dateRangeEditor.viewmodel.js

@@ -1,13 +1,12 @@
 /**
 * DevExpress HTML/JS Reporting (viewer\widgets\dateRange\dateRangeEditor.viewmodel.js)
-* Version:  23.2.6
-* Build date: Apr 30, 2024
+* Version:  24.1.2-beta
+* Build date: May 14, 2024
 * Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
 * License: https://www.devexpress.com/Support/EULAs/universal.xml
 */
-import * as $ from 'jquery';
 import { createViewModelGenerator } from '@devexpress/analytics-core/analytics-serializer-native';
-import { calculateWithZoomFactor, getLocalization, getParentContainer } from '@devexpress/analytics-core/analytics-internal-native';
+import { calculateWithZoomFactor, getLocalization, getParentContainer, $dx } from '@devexpress/analytics-core/analytics-internal-native';
 import { predefinedDateRanges, predefinedDateRangesModel } from './dateRangeEditor.ranges';
 export function createDateRangeEditorViewModel(baseViewModel) {
     let popupSettings = null;
@@ -22,7 +21,7 @@ export function createDateRangeEditorViewModel(baseViewModel) {
             .generateProperty('selected', this._isSelected(x))
             .getViewModel();
     });
-    const viewModel = createViewModelGenerator(Object.assign(Object.assign({}, baseViewModel), { showPopup: () => this._showPopup(), popupTemplate: this.popupTemplate, items: this.items, cacheElement: ($element) => this._$element = $.fn.constructor($element), scrollViewOptions: {
+    const viewModel = createViewModelGenerator(Object.assign(Object.assign({}, baseViewModel), { showPopup: () => this._showPopup(), popupTemplate: this.popupTemplate, items: this.items, cacheElement: ($element) => this._$element = $dx($element), scrollViewOptions: {
             showScrollbar: 'always',
             direction: 'horizontal',
             useNative: false,

package/viewer/widgets/editorTemplates.d.ts

@@ -1,7 +1,7 @@
 /**
 * DevExpress HTML/JS Reporting (viewer\widgets\editorTemplates.d.ts)
-* Version:  23.2.6
-* Build date: Apr 30, 2024
+* Version:  24.1.2-beta
+* Build date: May 14, 2024
 * Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
 * License: https://www.devexpress.com/Support/EULAs/universal.xml
 */

package/viewer/widgets/editorTemplates.js

@@ -1,7 +1,7 @@
 /**
 * DevExpress HTML/JS Reporting (viewer\widgets\editorTemplates.js)
-* Version:  23.2.6
-* Build date: Apr 30, 2024
+* Version:  24.1.2-beta
+* Build date: May 14, 2024
 * Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
 * License: https://www.devexpress.com/Support/EULAs/universal.xml
 */

package/viewer/widgets/pictureEditor/_imagePainter.d.ts

@@ -1,7 +1,7 @@
 /**
 * DevExpress HTML/JS Reporting (viewer\widgets\pictureEditor\_imagePainter.d.ts)
-* Version:  23.2.6
-* Build date: Apr 30, 2024
+* Version:  24.1.2-beta
+* Build date: May 14, 2024
 * Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
 * License: https://www.devexpress.com/Support/EULAs/universal.xml
 */

package/viewer/widgets/pictureEditor/_imagePainter.js

@@ -1,17 +1,12 @@
 /**
 * DevExpress HTML/JS Reporting (viewer\widgets\pictureEditor\_imagePainter.js)
-* Version:  23.2.6
-* Build date: Apr 30, 2024
+* Version:  24.1.2-beta
+* Build date: May 14, 2024
 * Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
 * License: https://www.devexpress.com/Support/EULAs/universal.xml
 */
 import { ImageAlignment, ImageSizeMode } from '../../editing/editingField';
 export class ImagePainter {
-    constructor(options) {
-        this.image = options.imageSource;
-        this.sizeMode = options.sizeMode;
-        this.alignment = options.alignment;
-    }
     _drawImage(imageSource, context, scale, contentSize) {
         return new Promise((resolve, reject) => {
             if (!imageSource) {
@@ -74,6 +69,11 @@ export class ImagePainter {
         }
         return { x: x, y: y };
     }
+    constructor(options) {
+        this.image = options.imageSource;
+        this.sizeMode = options.sizeMode;
+        this.alignment = options.alignment;
+    }
     refresh(context, scale = 1, contentSize) {
         contentSize = contentSize || {
             width: context.canvas.width,

package/viewer/widgets/pictureEditor/_imagePicker.d.ts

@@ -1,7 +1,7 @@
 /**
 * DevExpress HTML/JS Reporting (viewer\widgets\pictureEditor\_imagePicker.d.ts)
-* Version:  23.2.6
-* Build date: Apr 30, 2024
+* Version:  24.1.2-beta
+* Build date: May 14, 2024
 * Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
 * License: https://www.devexpress.com/Support/EULAs/universal.xml
 */

package/viewer/widgets/pictureEditor/_imagePicker.js

@@ -1,7 +1,7 @@
 /**
 * DevExpress HTML/JS Reporting (viewer\widgets\pictureEditor\_imagePicker.js)
-* Version:  23.2.6
-* Build date: Apr 30, 2024
+* Version:  24.1.2-beta
+* Build date: May 14, 2024
 * Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
 * License: https://www.devexpress.com/Support/EULAs/universal.xml
 */

package/viewer/widgets/pictureEditor/_ko_bindings.d.ts

@@ -1,7 +1,7 @@
 /**
 * DevExpress HTML/JS Reporting (viewer\widgets\pictureEditor\_ko_bindings.d.ts)
-* Version:  23.2.6
-* Build date: Apr 30, 2024
+* Version:  24.1.2-beta
+* Build date: May 14, 2024
 * Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
 * License: https://www.devexpress.com/Support/EULAs/universal.xml
 */

package/viewer/widgets/pictureEditor/_ko_bindings.js

@@ -1,23 +1,22 @@
 /**
 * DevExpress HTML/JS Reporting (viewer\widgets\pictureEditor\_ko_bindings.js)
-* Version:  23.2.6
-* Build date: Apr 30, 2024
+* Version:  24.1.2-beta
+* Build date: May 14, 2024
 * Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
 * License: https://www.devexpress.com/Support/EULAs/universal.xml
 */
-import { addDisposeCallback } from '@devexpress/analytics-core/analytics-internal-native';
+import { $dx, addDisposeCallback } from '@devexpress/analytics-core/analytics-internal-native';
 import { getTemplate } from '@devexpress/analytics-core/analytics-utils-native';
 import { Painter } from './_painter';
-import * as $ from 'jquery';
 import * as ko from 'knockout';
 import { PictureEditorModel } from './_pictureEditorModel';
 ko.bindingHandlers['dxPainter'] = {
     init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
         const options = valueAccessor();
-        $.fn.constructor(element).children().remove();
+        $dx(element).empty();
         const templateHtml = getTemplate('dx-painter');
-        const $element = $.fn.constructor(element).append(templateHtml);
-        const child = $element.children()[0];
+        const $element = $dx(element).append(templateHtml);
+        const child = $element[0].children[0];
         const model = new Painter(child, options);
         options.setPainter(model);
         addDisposeCallback(element, function () {
@@ -31,10 +30,10 @@ ko.bindingHandlers['dxPainter'] = {
 ko.bindingHandlers['dxPictureEditor'] = {
     init: function (element, valueAccessor) {
         const viewModel = valueAccessor();
-        $.fn.constructor(element).children().remove();
+        $dx(element).empty();
         const templateHtml = getTemplate('dx-picture-editing');
-        const $element = $.fn.constructor(element).append(templateHtml);
-        const child = $element.children()[0];
+        const $element = $dx(element).append(templateHtml);
+        const child = $element[0].children[0];
         const model = viewModel.getModel();
         const pictureEditorModel = new PictureEditorModel(model, child);
         model._setPictureEditor && model._setPictureEditor(pictureEditorModel);

package/viewer/widgets/pictureEditor/_painter.d.ts

@@ -1,7 +1,7 @@
 /**
 * DevExpress HTML/JS Reporting (viewer\widgets\pictureEditor\_painter.d.ts)
-* Version:  23.2.6
-* Build date: Apr 30, 2024
+* Version:  24.1.2-beta
+* Build date: May 14, 2024
 * Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
 * License: https://www.devexpress.com/Support/EULAs/universal.xml
 */

package/viewer/widgets/pictureEditor/_painter.js

@@ -1,7 +1,7 @@
 /**
 * DevExpress HTML/JS Reporting (viewer\widgets\pictureEditor\_painter.js)
-* Version:  23.2.6
-* Build date: Apr 30, 2024
+* Version:  24.1.2-beta
+* Build date: May 14, 2024
 * Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
 * License: https://www.devexpress.com/Support/EULAs/universal.xml
 */
@@ -21,71 +21,6 @@ import { PictureEditorActionProvider } from './_pictureEditorActionProvider';
 import { getEnumValues } from '../../internal/_utils';
 import { ImageEditingFieldViewModel } from '../../editing/models/imageEditingField';
 export class Painter extends BaseRenderingModel {
-    constructor(element, options, onResize) {
-        super();
-        this._pointerDownHandler = (e) => {
-            const point = this._getContextPoint(e);
-            point && this.signaturePainter.drawCircle(this._context, point.x, point.y, this.lineColor, this.lineWidth);
-        };
-        this._pointerMoveHandler = (e) => {
-            if (e.pointerType === 'touch' || e.pointerType === 'pen' || (e.pointerType === 'mouse' && e.originalEvent['buttons'] == 1)) {
-                const point = this._getContextPoint(e);
-                point && this.signaturePainter.drawPath(this._context, point.x, point.y, this.lineColor, this.lineWidth);
-            }
-        };
-        this._pointerLeaveHandler = (e) => {
-            this.signaturePainter.resetLastPosition();
-        };
-        this.format = (newVal) => {
-            if (newVal)
-                this.imagePainter.format = newVal;
-            return this.imagePainter.format;
-        };
-        this.image = options.imageSource;
-        this.imageSizeMode = options.sizeMode;
-        this.imageAlignment = options.alignment;
-        this.imagePainter = new ImagePainter({
-            alignment: () => this.imageAlignment,
-            imageSource: () => this.image,
-            sizeMode: () => this.imageSizeMode
-        });
-        this.getZoom = () => options.editingFieldModel.zoom;
-        this.format(options.imageType);
-        this._disposables.push(this.signaturePainter = new SignaturePainter());
-        this.addDisposable(this.signaturePainter.events.on('hasPointsChanged', (args) => {
-            if (args.newValue)
-                this._setCanvasSize(this.initialSize.width, this.initialSize.height);
-            else
-                this._setCanvasSize(this.initialSize.width * this.getZoom(), this.initialSize.height * this.getZoom());
-            this.refresh();
-            this._updateScale();
-        }));
-        this._updateScale = () => {
-            this.scale = this.hasSignature() ? this.getZoom() : 1;
-            onResize && onResize();
-        };
-        this._updateScale();
-        if (options.pictureEditorModel) {
-            this.addDisposable(options.pictureEditorModel.events.on('canDrawChanged', (args) => {
-                if (args.newValue) {
-                    this._addEvents();
-                }
-                else {
-                    this._removeEvents();
-                }
-            }));
-        }
-        this.addDisposable(options.editingFieldModel.events.on('zoomChanged', (args) => {
-            const newVal = args.newValue;
-            if (!this.signaturePainter.hasPoints) {
-                this._setCanvasSize(this.initialSize.width * newVal, this.initialSize.height * newVal);
-                this.refresh();
-            }
-            this._updateScale();
-        }));
-        this.initSize(element, options.editingFieldModel.zoom);
-        this.initCanvas(options.editingFieldModel.zoom);
-    }
     _getContextPoint(e) {
         const element = $unwrap(e.target);
         if (element.nodeName !== 'CANVAS')
@@ -159,6 +94,71 @@ export class Painter extends BaseRenderingModel {
         });
         return array;
     }
+    constructor(element, options, onResize) {
+        super();
+        this._pointerDownHandler = (e) => {
+            const point = this._getContextPoint(e);
+            point && this.signaturePainter.drawCircle(this._context, point.x, point.y, this.lineColor, this.lineWidth);
+        };
+        this._pointerMoveHandler = (e) => {
+            if (e.pointerType === 'touch' || e.pointerType === 'pen' || (e.pointerType === 'mouse' && e.originalEvent['buttons'] == 1)) {
+                const point = this._getContextPoint(e);
+                point && this.signaturePainter.drawPath(this._context, point.x, point.y, this.lineColor, this.lineWidth);
+            }
+        };
+        this._pointerLeaveHandler = (e) => {
+            this.signaturePainter.resetLastPosition();
+        };
+        this.format = (newVal) => {
+            if (newVal)
+                this.imagePainter.format = newVal;
+            return this.imagePainter.format;
+        };
+        this.image = options.imageSource;
+        this.imageSizeMode = options.sizeMode;
+        this.imageAlignment = options.alignment;
+        this.imagePainter = new ImagePainter({
+            alignment: () => this.imageAlignment,
+            imageSource: () => this.image,
+            sizeMode: () => this.imageSizeMode
+        });
+        this.getZoom = () => options.editingFieldModel.zoom;
+        this.format(options.imageType);
+        this._disposables.push(this.signaturePainter = new SignaturePainter());
+        this.addDisposable(this.signaturePainter.events.on('hasPointsChanged', (args) => {
+            if (args.newValue)
+                this._setCanvasSize(this.initialSize.width, this.initialSize.height);
+            else
+                this._setCanvasSize(this.initialSize.width * this.getZoom(), this.initialSize.height * this.getZoom());
+            this.refresh();
+            this._updateScale();
+        }));
+        this._updateScale = () => {
+            this.scale = this.hasSignature() ? this.getZoom() : 1;
+            onResize && onResize();
+        };
+        this._updateScale();
+        if (options.pictureEditorModel) {
+            this.addDisposable(options.pictureEditorModel.events.on('canDrawChanged', (args) => {
+                if (args.newValue) {
+                    this._addEvents();
+                }
+                else {
+                    this._removeEvents();
+                }
+            }));
+        }
+        this.addDisposable(options.editingFieldModel.events.on('zoomChanged', (args) => {
+            const newVal = args.newValue;
+            if (!this.signaturePainter.hasPoints) {
+                this._setCanvasSize(this.initialSize.width * newVal, this.initialSize.height * newVal);
+                this.refresh();
+            }
+            this._updateScale();
+        }));
+        this.initSize(element, options.editingFieldModel.zoom);
+        this.initCanvas(options.editingFieldModel.zoom);
+    }
     onPropertyChanged(args) { }
     createViewModel() {
         return createViewModelGenerator(super.createViewModel())

package/viewer/widgets/pictureEditor/_pictureEditorActionProvider.d.ts

@@ -1,7 +1,7 @@
 /**
 * DevExpress HTML/JS Reporting (viewer\widgets\pictureEditor\_pictureEditorActionProvider.d.ts)
-* Version:  23.2.6
-* Build date: Apr 30, 2024
+* Version:  24.1.2-beta
+* Build date: May 14, 2024
 * Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
 * License: https://www.devexpress.com/Support/EULAs/universal.xml
 */

package/viewer/widgets/pictureEditor/_pictureEditorActionProvider.js

@@ -1,7 +1,7 @@
 /**
 * DevExpress HTML/JS Reporting (viewer\widgets\pictureEditor\_pictureEditorActionProvider.js)
-* Version:  23.2.6
-* Build date: Apr 30, 2024
+* Version:  24.1.2-beta
+* Build date: May 14, 2024
 * Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
 * License: https://www.devexpress.com/Support/EULAs/universal.xml
 */
@@ -12,12 +12,7 @@ import { addToBindingsCache } from '@devexpress/analytics-core/analytics-widgets
 import { ImagePickerAction } from './_imagePicker';
 import { PictureEditorToolbarItem, PictureEditorToolbarItemWithPopup } from './_pictureEditorToolbarItem';
 import { PictureEditorActionId } from './_pictureEditorTypes';
-export class PictureEditorActionProvider extends Disposable {
-    constructor(_editorModel, _popupOptions) {
-        super();
-        this._editorModel = _editorModel;
-        this._popupOptions = _popupOptions;
-    }
+class PictureEditorActionProvider extends Disposable {
     _initPopupOptions(options) {
         return createViewModelGenerator(options)
             .generateProperty('boundary', this._popupOptions.boundary)
@@ -100,8 +95,14 @@ export class PictureEditorActionProvider extends Disposable {
         };
         return new PictureEditorToolbarItem(clearItemOptions);
     }
+    constructor(_editorModel, _popupOptions) {
+        super();
+        this._editorModel = _editorModel;
+        this._popupOptions = _popupOptions;
+    }
 }
 PictureEditorActionProvider.colors = ['#FFFFFF', '#FFC0C0', '#FFE0C0', '#FFFFC0', '#C0FFC0', '#C0FFFF', '#C0C0FF', '#FFC0FF', '#E0E0E0', '#FF8080', '#FFC080', '#FFFF80', '#80FF80', '#80FFFF', '#8080FF', '#FF80FF', '#C0C0C0', '#FF0000', '#FF8000', '#FFFF00', '#00FF00', '#00FFFF', '#0000FF', '#FF00FF', '#808080', '#C00000', '#C04000', '#C0C000', '#00C000', '#00C0C0', '#0000C0', '#C000C0', '#404040', '#800000', '#804000', '#808000', '#008000', '#008080', '#000080', '#800080', '#000000', '#400000', '#804040', '#404000', '#004000', '#004040', '#000040', '#400040'];
+export { PictureEditorActionProvider };
 addToBindingsCache('style: { fill: $data.templateOptions.contentData.lineColor }', function ($context, $element) {
     return {
         'style': function () {

package/viewer/widgets/pictureEditor/_pictureEditorModel.d.ts

@@ -1,7 +1,7 @@
 /**
 * DevExpress HTML/JS Reporting (viewer\widgets\pictureEditor\_pictureEditorModel.d.ts)
-* Version:  23.2.6
-* Build date: Apr 30, 2024
+* Version:  24.1.2-beta
+* Build date: May 14, 2024
 * Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
 * License: https://www.devexpress.com/Support/EULAs/universal.xml
 */