devexpress-reporting 23.2.0-build-000-1111 → 23.2.1-alpha-23254-1700

package/viewer/editing/models/imageEditingField.js

@@ -1,23 +1,27 @@
-/**
-* DevExpress HTML/JS Reporting (viewer\editing\models\imageEditingField.js)
-* Version:  23.2.1-build-23191-1448
-* Build date: Jul 10, 2023
-* Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
-* License: https://www.devexpress.com/Support/EULAs/universal.xml
-*/
-import { CssCalculator, KeyboardEnum } from '@devexpress/analytics-core/analytics-internal';
-import { Disposable, ModelSerializer } from '@devexpress/analytics-core/analytics-utils';
-import * as $ from 'jquery';
-import * as ko from 'knockout';
+/**
+* DevExpress HTML/JS Reporting (viewer\editing\models\imageEditingField.js)
+* Version:  23.2.1-alpha-23254-1700
+* Build date: Sep 11, 2023
+* Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
+* License: https://www.devexpress.com/Support/EULAs/universal.xml
+*/
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { CssCalculator, extend, KeyboardEnum } from '@devexpress/analytics-core/analytics-internal-native';
+import { mutable, currentModelSerializer } from '@devexpress/analytics-core/analytics-serializer-native';
 import { brickStyleSerializationsInfo } from '../../../common/metadata';
 import { EditingFieldExtensions } from '../../../common/utils/editingFieldExtensions';
 import { PreviewSelection } from '../../internal/_previewSelection';
-export class ImageEditingFieldViewModel extends Disposable {
-    constructor(field, pageWidth, pageHeight, zoom, bounds) {
+import { EditingFieldBase } from './editingFieldBase';
+export class ImageEditingFieldViewModel extends EditingFieldBase {
+    constructor(field, pageWidth, pageHeight, page, bounds) {
         var _a;
-        super();
+        super(page);
         this.field = field;
-        this.zoom = zoom;
         this.bounds = bounds;
         this.popupTarget = '.dx-designer';
         this.popupOptions = {
@@ -26,58 +30,52 @@ export class ImageEditingFieldViewModel extends Disposable {
             container: this.popupTarget
         };
         this.template = 'dxrp-editing-field-image';
-        this.active = ko.observable(false);
-        this.shadingEnabled = ko.observable(true);
+        this.shadingEnabled = true;
         var brickStyle = field.model().brickOptions;
         var style = { rtl: () => brickStyle.rtl };
-        new ModelSerializer().deserialize(style, JSON.parse(brickStyle.style), brickStyleSerializationsInfo);
-        var cssCalculator = new CssCalculator(style, ko.observable(!!brickStyle.rtlLayout));
-        this._disposables.push(this.alignment = ko.computed(() => {
-            return field.editValue().alignment;
-        }), this.sizeMode = ko.computed(() => {
-            return field.editValue().sizeMode;
+        currentModelSerializer().deserialize(style, JSON.parse(brickStyle.style), brickStyleSerializationsInfo);
+        var cssCalculator = new CssCalculator(style, !!brickStyle.rtlLayout);
+        this.addDisposable(this.field.events.on('editValueChanged', (args) => {
+            this.alignment = this.field.getEditValue().alignment;
+            this.sizeMode = this.field.getEditValue().sizeMode;
         }));
+        this.alignment = this.field.getEditValue().alignment;
+        this.sizeMode = this.field.getEditValue().sizeMode;
         var editor = EditingFieldExtensions.instance().editor(field.editorName()) || EditingFieldExtensions.instance().editor('ImageAndSignature');
         var options = editor.options;
-        this.shadingEnabled(!!((_a = options.registrationOptions) === null || _a === void 0 ? void 0 : _a.shadingEnabled));
+        this.shadingEnabled = !!((_a = options.registrationOptions) === null || _a === void 0 ? void 0 : _a.shadingEnabled);
         this.editMode = options.editMode;
-        this.containerStyle = () => {
-            return $.extend({
-                height: this.bounds.height * zoom() + 'px',
-                width: this.bounds.width * zoom() + 'px',
-                zIndex: this.active() ? 10 : 0,
+        this._updateContainerStyle = () => {
+            if (!this.bounds)
+                return;
+            this.containerStyle = extend({
+                height: this.bounds.height * this.zoom + 'px',
+                width: this.bounds.width * this.zoom + 'px',
+                zIndex: this.active ? 10 : 0,
                 top: this.bounds.top * 100 / pageHeight + '%',
                 left: this.bounds.left * 100 / pageWidth + '%'
             }, cssCalculator.borderCss(), cssCalculator.paddingsCss());
         };
-        this.callbacks = $.extend({
+        this._updateContainerStyle();
+        this.callbacks = extend({
             onDraw: (s) => this.onDraw(s),
             onFocusIn: (s) => this.onFocusIn(s),
             onFocusOut: (s) => this.onBlur(s)
         }, options.callbacks);
     }
+    onPropertyChanged(args) {
+        super.onPropertyChanged(args);
+        if (args.propertyName === 'zoom' || args.propertyName === 'active')
+            this._updateContainerStyle && this._updateContainerStyle();
+    }
     getImage() {
-        return this.field.editValue().image;
+        return this.field.getEditValue().image;
     }
     getImageType() {
-        return this.field.editValue().imageType;
-    }
-    getPictureEditorOptions() {
-        return {
-            image: this.getImage(),
-            imageType: this.getImageType(),
-            imageMode: ko.observable(this.editMode),
-            alignment: this.alignment,
-            sizeMode: this.sizeMode,
-            callbacks: this.callbacks,
-            active: this.active,
-            zoom: this.zoom,
-            popupOptions: this.popupOptions,
-            shadingEnabled: this.shadingEnabled
-        };
+        return this.field.getEditValue().imageType;
     }
-    onKeyDown(_, e) {
-        if (e.key == KeyboardEnum.Space) {
+    onKeyDown(event) {
+        if (event.key == KeyboardEnum.Space) {
         }
         else {
         }
@@ -90,19 +88,25 @@ export class ImageEditingFieldViewModel extends Disposable {
     }
     onBlur(s) {
         var options = s.getCurrentOptions();
-        var result = $.extend({}, this.field.editValue(), options);
+        var result = extend({}, this.field.getEditValue(), options);
         if (!!result.imageType) {
             result.imageType = result.imageType === 'svg' ? 'svg' : ImageEditingFieldViewModel.__DefaultImageType;
         }
-        var currentVal = this.field.editValue();
+        var currentVal = this.field.getEditValue();
         var isNotEqual = Object.keys(currentVal).some(x => {
             if (!result[x] && !currentVal[x])
                 return false;
             return result[x] !== currentVal[x];
         });
         if (isNotEqual)
-            this.field.editValue(result);
+            this.field.setEditValue(result);
         PreviewSelection.disabled = false;
     }
 }
 ImageEditingFieldViewModel.__DefaultImageType = 'img';
+__decorate([
+    mutable(null)
+], ImageEditingFieldViewModel.prototype, "alignment", void 0);
+__decorate([
+    mutable(null)
+], ImageEditingFieldViewModel.prototype, "sizeMode", void 0);

package/viewer/editing/models/popupImageEditingField.d.ts

@@ -1,22 +1,25 @@
-/**
-* DevExpress HTML/JS Reporting (viewer\editing\models\popupImageEditingField.d.ts)
-* Version:  23.2.1-build-23191-1448
-* Build date: Jul 10, 2023
-* Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
-* License: https://www.devexpress.com/Support/EULAs/universal.xml
-*/
-import { IPopupComponent } from '@devexpress/analytics-core/analytics-widgets-internal';
-import * as ko from 'knockout';
-import { IPainterOptions } from '../../widgets/pictureEditor/_painter';
-import { IEditingFieldViewModel } from '../editingField';
+/**
+* DevExpress HTML/JS Reporting (viewer\editing\models\popupImageEditingField.d.ts)
+* Version:  23.2.1-alpha-23254-1700
+* Build date: Sep 11, 2023
+* Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
+* License: https://www.devexpress.com/Support/EULAs/universal.xml
+*/
+import { getParentContainer } from '@devexpress/analytics-core/analytics-internal-native';
+import { ArrayPropertyChangedEventArgs, PropertyChangedEventArgs } from '@devexpress/analytics-core/analytics-serializer-native';
+import { ContentReadyEvent } from 'devextreme/ui/popup';
+import { IPainterOptions, Painter } from '../../widgets/pictureEditor/_painter';
+import { IPictureEditorFieldModel, PictureEditorModel } from '../../widgets/pictureEditor/_pictureEditorModel';
+import { IEditingFieldModel } from '../editingField';
 import { ImageEditingFieldViewModel } from './imageEditingField';
+import { IEditingFieldViewModelBase } from './editingFieldBase';
 export interface IImageEditingFieldPopupData {
     contentData: PopupImageEditingFieldViewModel;
     paintData: IPainterOptions;
     contentTemplate: string;
-    isVisible: (element: HTMLElement) => boolean;
-    getPositionTarget: (element: HTMLElement) => JQuery;
-    showContent: ko.Observable<boolean>;
+    visible: boolean;
+    getPositionTarget: (element: HTMLElement) => HTMLElement;
+    showContent: boolean;
     onShown: (e: {
         element: any;
         component: any;
@@ -25,27 +28,34 @@ export interface IImageEditingFieldPopupData {
         element: any;
         component: any;
     }) => void;
-    onContentReady: (e: {
-        element: any;
-        component: IPopupComponent;
-    }) => void;
-    renderedHandler: (element: HTMLElement, model: any) => void;
-    shading: ko.Observable<boolean>;
+    onContentReady: (event: ContentReadyEvent) => void;
+    renderedHandler: () => void;
+    shading: boolean;
+    getPopupContainer: typeof getParentContainer;
 }
-export declare class PopupImageEditingFieldViewModel extends ImageEditingFieldViewModel implements IEditingFieldViewModel {
+export interface IPopupImageEditingFieldViewModel extends IEditingFieldViewModelBase {
+    popupData: IImageEditingFieldPopupData;
     parentPopupClass: string;
+    getPainterOptions: () => IPainterOptions;
+}
+export declare class PopupImageEditingFieldViewModel extends ImageEditingFieldViewModel<IPopupImageEditingFieldViewModel> implements IEditingFieldModel, IPictureEditorFieldModel {
+    private _parentPopupClass;
     private _popupInitializedClass;
     private _getPopupContainer;
-    private _getPainterModel;
-    private _getPictureEditorModel;
     private _resetPictureEditor;
     private _resetPainter;
-    isPopupActive(element: any): any;
-    getPainter(): IPainterOptions;
-    getPopupData(): IImageEditingFieldPopupData;
-    activateEditor(viewModel: any, e: any): void;
+    private _getPainterOptions;
+    createViewModel(): IPopupImageEditingFieldViewModel;
+    _renderedHandler(): void;
+    _setPictureEditor(editor: PictureEditorModel): void;
+    updateViewModel(args: PropertyChangedEventArgs<PopupImageEditingFieldViewModel> | ArrayPropertyChangedEventArgs<PopupImageEditingFieldViewModel>): void;
+    canActivateEditor: boolean;
+    activateEditor(viewModel: PopupImageEditingFieldViewModel, e: MouseEvent): void;
+    _showContent: boolean;
     popupData: IImageEditingFieldPopupData;
     painterData: IPainterOptions;
+    painter: Painter;
+    pictureEditor: PictureEditorModel;
     template: string;
 }
 export declare var DefaultImageEditingFieldViewModel: typeof PopupImageEditingFieldViewModel;

package/viewer/editing/models/popupImageEditingField.js

@@ -1,94 +1,105 @@
-/**
-* DevExpress HTML/JS Reporting (viewer\editing\models\popupImageEditingField.js)
-* Version:  23.2.1-build-23191-1448
-* Build date: Jul 10, 2023
-* Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
-* License: https://www.devexpress.com/Support/EULAs/universal.xml
-*/
-import * as $ from 'jquery';
-import * as ko from 'knockout';
+/**
+* DevExpress HTML/JS Reporting (viewer\editing\models\popupImageEditingField.js)
+* Version:  23.2.1-alpha-23254-1700
+* Build date: Sep 11, 2023
+* Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
+* License: https://www.devexpress.com/Support/EULAs/universal.xml
+*/
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { $dx, getParentContainer } from '@devexpress/analytics-core/analytics-internal-native';
+import { createViewModelGenerator, mutable } from '@devexpress/analytics-core/analytics-serializer-native';
 import { ImageEditingFieldViewModel } from './imageEditingField';
 export class PopupImageEditingFieldViewModel extends ImageEditingFieldViewModel {
     constructor() {
         super(...arguments);
-        this.parentPopupClass = 'dxrp-editing-field-popup-container';
+        this._parentPopupClass = 'dxrp-editing-field-popup-container';
         this._popupInitializedClass = 'dxrp-editing-field-popup-container-initialized';
-        this._getPopupContainer = (element) => $.fn.constructor(element).closest('.' + this.parentPopupClass);
-        this._getPainterModel = (element) => {
-            var $painter = this._getPopupContainer(element).find('.dx-painter');
-            return $painter.length ? ko.dataFor($painter[0]) : null;
-        };
-        this._getPictureEditorModel = (element) => {
-            var $popupEditing = $.fn.constructor(element).find('.dx-picture-editing');
-            return $popupEditing.length ? ko.dataFor($popupEditing[0]) : null;
-        };
+        this._getPopupContainer = (element) => $dx(element).closest('.' + this._parentPopupClass);
         this._resetPictureEditor = (pictureEditorModel) => {
             pictureEditorModel.reset(this.painterData.imageSource, this.painterData.alignment, this.painterData.sizeMode, this.painterData.imageType);
             this._resetPainter(pictureEditorModel.painter);
         };
         this._resetPainter = (painter) => {
-            painter.imagePainter.format(painter.imageFormatByType(this.getImageType()));
-            painter.imagePainter.sizeMode(this.sizeMode());
-            painter.imagePainter.alignment(this.alignment());
-            painter.imagePainter.image(this.getImage());
+            painter.imagePainter.format = painter.imageFormatByType(this.getImageType());
+            painter.imageSizeMode = this.sizeMode;
+            painter.imageAlignment = this.alignment;
+            painter.image = this.getImage();
             painter.refresh();
         };
+        this.canActivateEditor = true;
         this.template = 'dxrp-popup-editing-field-image';
     }
-    isPopupActive(element) {
-        return this.active() && this._getPopupContainer(element).hasClass(this._popupInitializedClass);
-    }
-    getPainter() {
+    _getPainterOptions() {
         if (this.painterData == null) {
             this.painterData = {
                 imageSource: this.getImage(),
                 imageType: this.getImageType(),
-                alignment: this.alignment(),
-                sizeMode: this.sizeMode(),
-                zoom: this.zoom,
-                canDraw: ko.observable(false)
+                alignment: this.alignment,
+                sizeMode: this.sizeMode,
+                editingFieldModel: this,
+                setPainter: (painter) => this.painter = painter
             };
         }
         return this.painterData;
     }
-    getPopupData() {
-        var _showContent = ko.observable(false);
-        this.popupData = {
-            contentData: this,
-            paintData: this.painterData,
-            contentTemplate: 'dxrp-editing-field-image-editor',
-            isVisible: (element) => this.isPopupActive(element),
-            getPositionTarget: (element) => this._getPopupContainer(element),
-            shading: this.shadingEnabled,
-            showContent: _showContent,
-            onShown: (e) => {
-                _showContent(true);
-            },
-            onHiding: (e) => {
-                this._getPictureEditorModel(e.component._$popupContent[0]).painter.signaturePainter.resetLastPosition();
-                this._resetPainter(this._getPainterModel(e.element));
-                document.activeElement['blur']();
-                this.active(false);
-            },
-            onContentReady: (e) => {
-                this._resetPainter(this._getPainterModel(e.element));
-                e.component && e.component.registerKeyHandler('tab', (_) => {
-                    this.popupData.onHiding(e);
-                });
-            },
-            renderedHandler: (element, model) => {
-                this._resetPictureEditor(this._getPictureEditorModel(element));
-            }
-        };
-        return this.popupData;
+    createViewModel() {
+        return createViewModelGenerator(super.createViewModel())
+            .generateProperty('parentPopupClass', this._parentPopupClass)
+            .generateProperty('getPainterOptions', () => this._getPainterOptions())
+            .generateProperty('popupData', createViewModelGenerator()
+            .generateProperty('contentTemplate', 'dxrp-editing-field-image-editor')
+            .generateProperty('visible', this.active)
+            .generateProperty('getPositionTarget', (element) => this._getPopupContainer(element).element)
+            .generateProperty('shading', this.shadingEnabled)
+            .generateProperty('showContent', this._showContent)
+            .generateProperty('onShown', () => this._showContent = true)
+            .generateProperty('onHiding', (event) => {
+            this.pictureEditor.painter.signaturePainter.resetLastPosition();
+            this._resetPainter(this.painter);
+            document.activeElement['blur']();
+            this.active = false;
+            this._showContent = false;
+        })
+            .generateProperty('onContentReady', (event) => {
+            this._resetPainter(this.painter);
+            event.component && event.component.registerKeyHandler('tab', (_) => {
+                this.popupData.onHiding(event);
+            });
+        })
+            .generateProperty('renderedHandler', () => this._renderedHandler())
+            .generateProperty('getPopupContainer', getParentContainer)
+            .getViewModel())
+            .getViewModel();
+    }
+    _renderedHandler() {
+        this._resetPictureEditor(this.pictureEditor);
+    }
+    _setPictureEditor(editor) {
+        this.pictureEditor = editor;
+    }
+    updateViewModel(args) {
+        super.updateViewModel(args);
+        const viewModel = this.getViewModel();
+        if (args.propertyName === 'active')
+            viewModel.popupData.visible = this.active;
+        if (args.propertyName === '_showContent')
+            viewModel.popupData.showContent = this._showContent;
     }
     activateEditor(viewModel, e) {
-        if (!this.field.readOnly()) {
+        if (!this.field.readOnly) {
             var _parentPopup = this._getPopupContainer(e.target);
             if (!_parentPopup.hasClass(this._popupInitializedClass))
                 _parentPopup.addClass(this._popupInitializedClass);
-            this.active(true);
+            this.active = true;
         }
     }
 }
+__decorate([
+    mutable(false)
+], PopupImageEditingFieldViewModel.prototype, "_showContent", void 0);
 export var DefaultImageEditingFieldViewModel = PopupImageEditingFieldViewModel;

package/viewer/editing/models/textEditingField.d.ts

@@ -1,31 +1,74 @@
-/**
-* DevExpress HTML/JS Reporting (viewer\editing\models\textEditingField.d.ts)
-* Version:  23.2.1-build-23191-1448
-* Build date: Jul 10, 2023
-* Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
-* License: https://www.devexpress.com/Support/EULAs/universal.xml
-*/
-import { IEditingFieldViewModel, EditingField, IBounds } from '../editingField';
-import * as ko from 'knockout';
-export declare class TextEditingFieldViewModelBase {
-    keypressAction(data: any, event: any): void;
+/**
+* DevExpress HTML/JS Reporting (viewer\editing\models\textEditingField.d.ts)
+* Version:  23.2.1-alpha-23254-1700
+* Build date: Sep 11, 2023
+* Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
+* License: https://www.devexpress.com/Support/EULAs/universal.xml
+*/
+import { IEditingFieldModel, EditingField, IBounds } from '../editingField';
+import { getParentContainer } from '@devexpress/analytics-core/analytics-internal-native';
+import { PreviewPage } from '../../internal/_page';
+import { ArrayPropertyChangedEventArgs, PropertyChangedEventArgs } from '@devexpress/analytics-core/analytics-serializer-native';
+import { IEditingFieldViewModelBase, EditingFieldBase } from './editingFieldBase';
+export interface ITextEditingFieldViewModelBase extends IEditingFieldViewModelBase {
+    textStyle: {
+        [key: string]: string;
+    };
     hideEditor: (shouldCommit: boolean) => void;
+    keypressAction: (data: any, event: any) => void;
 }
-export declare class TextEditingFieldViewModel extends TextEditingFieldViewModelBase implements IEditingFieldViewModel {
-    constructor(field: EditingField, pageWidth: number, pageHeight: number, zoom: ko.Observable<number> | ko.Computed<number>, bounds: IBounds);
-    dispose?: () => void;
+export declare class TextEditingFieldViewModelBase<T extends ITextEditingFieldViewModelBase> extends EditingFieldBase<T> {
+    keypressAction(data: ITextEditingFieldData, event: KeyboardEvent): void;
+    createViewModel(): T;
+    canActivateEditor: boolean;
+    activateEditor(model: EditingFieldBase<IEditingFieldViewModelBase>, event: {
+        target: EventTarget;
+        currentTarget: EventTarget;
+    }, elementFocused?: boolean): void;
+    hideEditor: (shouldCommit: boolean) => void;
+    textStyle: {
+        [key: string]: string;
+    };
+}
+export interface ITextEditingFieldData {
+    value: string | Date;
+    textStyle: {
+        [key: string]: string;
+    };
+    hideEditor: (shouldCommit: boolean) => void;
+    keypressAction: (data: ITextEditingFieldData, event: KeyboardEvent) => void;
+    options: any;
+    getOptions: (options: any) => any;
+    getPopupContainer: typeof getParentContainer;
+}
+export interface ITextEditingFieldViewModel extends ITextEditingFieldViewModelBase {
+    borderStyle: {
+        [key: string]: string;
+    };
+    breakOffsetStyle: {
+        [key: string]: string;
+    };
+    wordWrap: boolean;
+    editorTemplate: string;
+    data: ITextEditingFieldData;
+}
+export declare class TextEditingFieldViewModel extends TextEditingFieldViewModelBase<ITextEditingFieldViewModel> implements IEditingFieldModel {
+    constructor(field: EditingField<string>, pageWidth: number, pageHeight: number, page: PreviewPage, bounds: IBounds);
+    onPropertyChanged(args: PropertyChangedEventArgs<EditingFieldBase> | ArrayPropertyChangedEventArgs<EditingFieldBase>): void;
+    createViewModel(): ITextEditingFieldViewModel;
+    dispose: () => void;
     template: string;
     editorTemplate: string;
     field: EditingField;
-    data: any;
-    textStyle: () => {};
-    containerStyle: () => {};
-    breakOffsetStyle: () => {};
-    borderStyle: () => {};
-    zoom: ko.Observable<number> | ko.Computed<number>;
-    htmlValue: () => string;
+    data: ITextEditingFieldData;
+    breakOffsetStyle: {
+        [key: string]: string;
+    };
+    borderStyle: {
+        [key: string]: string;
+    };
     wordWrap: boolean;
-    active: ko.Observable<boolean>;
-    activateEditor(viewModel: any, e: any): void;
+    canActivateEditor: boolean;
+    activateEditor(viewModel: TextEditingFieldViewModel, e: MouseEvent): void;
 }
 export declare function focusTextElement(target: HTMLElement): void;