devexpress-reporting 23.1.5 → 23.2.1-alpha-23254-1700

package/viewer/editing/editingField.js

@@ -1,14 +1,20 @@
 /**
 * DevExpress HTML/JS Reporting (viewer\editing\editingField.js)
-* Version:  23.1.5
-* Build date: Aug 29, 2023
+* 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 { Disposable, fromEnum } from '@devexpress/analytics-core/analytics-utils';
-import { editorTemplates } from '@devexpress/analytics-core/analytics-widgets';
-import * as $ from 'jquery';
-import * as ko from 'knockout';
+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 { extend } from '@devexpress/analytics-core/analytics-internal-native';
+import { BaseRenderingModel, createViewModelGenerator, mutable } from '@devexpress/analytics-core/analytics-serializer-native';
+import { fromEnum } from '@devexpress/analytics-core/analytics-utils-native';
+import { editorTemplates } from '@devexpress/analytics-core/analytics-widgets-native';
 import { EditablePreviewEnabled } from '../settings';
 import { CharacterCombEditingFieldViewModel } from './models/characterCombEditingField';
 import { CheckEditingFieldViewModel } from './models/checkEditingField';
@@ -60,84 +66,110 @@ export var imageAlignment = {
         { value: 'BottomRight', displayValue: 'Bottom Right', localizationId: 'DevExpress.XtraPrinting.ImageAlignment.BottomRight' }
     ]
 };
-export class EditingField extends Disposable {
+export class EditingField extends BaseRenderingModel {
     constructor(model, index, htmlProvider) {
         super();
         this._needToUseHtml = false;
         this._index = -1;
-        this._model = model;
+        this._fieldModel = model;
         this._index = index;
-        this._readOnly = ko.observable(model.readOnly);
-        this._disposables.push(this.readOnly = ko.pureComputed({
-            read: () => {
-                return this._readOnly() || !EditablePreviewEnabled();
-            },
-            write: (newVal) => {
-                this._readOnly(newVal);
-            }
+        this.readOnly = model.readOnly || !EditablePreviewEnabled();
+        this.addDisposable(EditablePreviewEnabled.subscribe(value => {
+            if (!value)
+                this.readOnly = false;
         }));
-        this.modelValue = ko.observable(model.editValue);
-        this.editValue = ko.computed({
-            read: () => {
-                return this.modelValue();
-            },
-            write: (newVal) => {
-                var oldVal = this.modelValue();
-                this.modelValue(newVal);
-                var val = this.editingFieldChanged(this, oldVal, newVal);
-                val = val == null ? newVal : val;
-                if (val !== oldVal) {
-                    this._refreshHtmlValue(val);
-                }
-                if (val !== newVal) {
-                    this.modelValue(val);
-                    this._editorValue(val);
-                }
-            }
-        });
-        this._editorValue = ko.observable(model.editValue);
-        this.htmlValue = ko.observable(model.htmlValue);
+        this.editValue = model.editValue;
+        this._editorValue = model.editValue;
+        this.htmlValue = model.htmlValue;
         this._htmlProvider = htmlProvider;
     }
     _refreshHtmlValue(newValue) {
-        this.htmlValue(null);
+        this.htmlValue = null;
         if (this._needToUseHtml) {
             this._htmlProvider.getEditingFieldHtml(newValue, this._index).done((html) => {
-                this.htmlValue(html);
+                this.htmlValue = html;
             });
         }
     }
+    setEditValue(newVal) {
+        var oldVal = this.editValue;
+        this.editValue = newVal;
+        var val = this.editingFieldChanged(this, oldVal, newVal);
+        val = val == null ? newVal : val;
+        if (val !== oldVal) {
+            this._refreshHtmlValue(val);
+        }
+        if (val !== newVal) {
+            this.editValue = val;
+            this._editorValue = val;
+        }
+    }
+    getEditValue() {
+        return this.editValue;
+    }
+    onPropertyChanged(args) { }
     editingFieldChanged(field, oldVal, newVal) {
         return newVal;
     }
-    editorName() { return this._model.editorName; }
-    id() { return this._model.id; }
-    groupID() { return this._model.groupID; }
-    pageIndex() { return this._model.pageIndex; }
-    type() { return this._model.type; }
+    createViewModel() {
+        return createViewModelGenerator(super.createViewModel())
+            .generateProperty('readOnly', this.readOnly)
+            .generateProperty('editValue', this.editValue)
+            .generateProperty('htmlValue', this.htmlValue)
+            .generateProperty('editorValue', this._editorValue)
+            .getViewModel();
+    }
+    updateViewModel(args) {
+        const viewModel = this.getViewModel();
+        if (args.propertyName === 'readOnly')
+            viewModel.readOnly = this.readOnly;
+        if (args.propertyName === 'editValue')
+            viewModel.editValue = this.editValue;
+        if (args.propertyName === 'htmlValue')
+            viewModel.htmlValue = this.htmlValue;
+        if (args.propertyName === '_editorValue')
+            viewModel.editorValue = this._editorValue;
+    }
+    editorName() { return this._fieldModel.editorName; }
+    id() { return this._fieldModel.id; }
+    groupID() { return this._fieldModel.groupID; }
+    pageIndex() { return this._fieldModel.pageIndex; }
+    type() { return this._fieldModel.type; }
     model() {
-        return $.extend({}, this._model, {
-            readOnly: this.readOnly.peek(),
-            editValue: this.editValue.peek(),
-            htmlValue: this.htmlValue.peek(),
+        return extend({}, this._fieldModel, {
+            readOnly: this.readOnly,
+            editValue: this.editValue,
+            htmlValue: this.htmlValue,
         });
     }
-    createViewModel(zoom, pageWidth, pageHeight, editingFieldsProvider, bounds) {
-        if (this._model.type === 'check') {
-            return new CheckEditingFieldViewModel(this, pageWidth, pageHeight, zoom, editingFieldsProvider);
+    createModel(page, pageWidth, pageHeight, editingFieldsProvider, bounds) {
+        if (this._fieldModel.type === 'check') {
+            return new CheckEditingFieldViewModel(this, pageWidth, pageHeight, page, editingFieldsProvider);
         }
-        else if (this._model.type === 'text') {
-            this._needToUseHtml = bounds.height !== this._model.bounds.height || !!this._model.brickOptions.formatString;
+        else if (this._fieldModel.type === 'text') {
+            this._needToUseHtml = bounds.height !== this._fieldModel.bounds.height || !!this._fieldModel.brickOptions.formatString;
             if (!this._needToUseHtml) {
-                this.htmlValue(null);
+                this.htmlValue = null;
             }
-            return new TextEditingFieldViewModel(this, pageWidth, pageHeight, zoom, bounds);
+            return new TextEditingFieldViewModel(this, pageWidth, pageHeight, page, bounds);
         }
-        else if (this._model.type === 'charactercomb') {
-            return new CharacterCombEditingFieldViewModel(this, pageWidth, pageHeight, zoom, bounds);
+        else if (this._fieldModel.type === 'charactercomb') {
+            return new CharacterCombEditingFieldViewModel(this, pageWidth, pageHeight, page, bounds);
         }
-        else if (this._model.type === 'image') {
-            return new DefaultImageEditingFieldViewModel(this, pageWidth, pageHeight, zoom, bounds);
+        else if (this._fieldModel.type === 'image') {
+            return new DefaultImageEditingFieldViewModel(this, pageWidth, pageHeight, page, bounds);
         }
     }
 }
+__decorate([
+    mutable(false)
+], EditingField.prototype, "readOnly", void 0);
+__decorate([
+    mutable(null)
+], EditingField.prototype, "editValue", void 0);
+__decorate([
+    mutable(null)
+], EditingField.prototype, "_editorValue", void 0);
+__decorate([
+    mutable(null)
+], EditingField.prototype, "htmlValue", void 0);

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

@@ -1,29 +1,29 @@
 /**
 * DevExpress HTML/JS Reporting (viewer\editing\models\characterCombEditingField.d.ts)
-* Version:  23.1.5
-* Build date: Aug 29, 2023
+* 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 { TextEditingFieldViewModelBase } from './textEditingField';
-import { IEditingFieldViewModel, EditingField, IBounds } from '../editingField';
-import * as ko from 'knockout';
-export declare class CharacterCombEditingFieldViewModel extends TextEditingFieldViewModelBase implements IEditingFieldViewModel {
-    field: EditingField;
-    constructor(field: EditingField, pageWidth: number, pageHeight: number, zoom: ko.Observable<number> | ko.Computed<number>, bounds: IBounds);
-    cells: {
-        text: string;
-        style: any;
-    }[];
-    rowsCount: number;
-    colsCount: number;
+import { ITextEditingFieldViewModelBase, TextEditingFieldViewModelBase } from './textEditingField';
+import { IEditingFieldModel, EditingField, IBounds } from '../editingField';
+import { PreviewPage } from '../../internal/_page';
+interface ICharacterCombCell {
+    text: string;
+    style: any;
+}
+export interface ICharacterCombEditingFieldViewModel extends ITextEditingFieldViewModelBase {
+    cells: ICharacterCombCell[];
+}
+export declare class CharacterCombEditingFieldViewModel extends TextEditingFieldViewModelBase<ICharacterCombEditingFieldViewModel> implements IEditingFieldModel {
+    field: EditingField<string>;
+    constructor(field: EditingField<string>, pageWidth: number, pageHeight: number, page: PreviewPage, bounds: IBounds);
+    private _createCellViewModels;
+    createViewModel(): ICharacterCombEditingFieldViewModel;
+    cells: ICharacterCombCell[];
     template: string;
-    containerStyle: () => {};
-    textStyle: () => {};
-    zoom: ko.Observable<number> | ko.Computed<number>;
-    active: ko.Observable<boolean>;
-    activateEditor(viewModel: any, e: any): void;
-    static setText(cells: {
-        text: string;
-    }[], textAlignment: string, rtl: boolean, text: string, rowsCount: number, colsCount: number): void;
+    canActivateEditor: boolean;
+    activateEditor(viewModel: CharacterCombEditingFieldViewModel, event: MouseEvent): void;
+    static setText(cells: ICharacterCombCell[], textAlignment: string, rtl: boolean, text: string, rowsCount: number, colsCount: number): void;
 }
+export {};

package/viewer/editing/models/characterCombEditingField.js

@@ -1,61 +1,57 @@
 /**
 * DevExpress HTML/JS Reporting (viewer\editing\models\characterCombEditingField.js)
-* Version:  23.1.5
-* Build date: Aug 29, 2023
+* 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 { focusTextElement, TextEditingFieldViewModelBase } from './textEditingField';
+import { TextEditingFieldViewModelBase } from './textEditingField';
 import { brickStyleSerializationsInfo } from '../../../common/metadata';
-import { ModelSerializer } from '@devexpress/analytics-core/analytics-utils';
-import { CssCalculator } from '@devexpress/analytics-core/analytics-internal';
-import * as ko from 'knockout';
-import * as $ from 'jquery';
+import { CssCalculator, extend } from '@devexpress/analytics-core/analytics-internal-native';
+import { createViewModelGenerator, currentModelSerializer, currentMultiPlatformEngine } from '@devexpress/analytics-core/analytics-serializer-native';
 export class CharacterCombEditingFieldViewModel extends TextEditingFieldViewModelBase {
-    constructor(field, pageWidth, pageHeight, zoom, bounds) {
-        super();
+    constructor(field, pageWidth, pageHeight, page, bounds) {
+        super(page);
         this.field = field;
         this.template = 'dxrp-character-comb-editing-field';
-        this.active = ko.observable(false);
+        this.canActivateEditor = 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));
+        currentModelSerializer().deserialize(style, JSON.parse(brickStyle.style), brickStyleSerializationsInfo);
+        var cssCalculator = new CssCalculator(style, !!brickStyle.rtlLayout);
         var verticalPadding = parseInt(cssCalculator.paddingsCss()['paddingTop']) + parseInt(cssCalculator.paddingsCss()['paddingBottom']);
         var borderCss = cssCalculator.borderCss();
         if (borderCss['borderTop'] !== 'none') {
-            verticalPadding += style['borderWidth']();
+            verticalPadding += currentMultiPlatformEngine.unwrap(style['borderWidth']);
         }
         if (borderCss['borderBottom'] !== 'none') {
-            verticalPadding += style['borderWidth']();
+            verticalPadding += currentMultiPlatformEngine.unwrap(style['borderWidth']);
         }
-        this.textStyle = () => $.extend({}, cssCalculator.fontCss(), cssCalculator.foreColorCss(), cssCalculator.textAlignmentCss());
+        this.textStyle = extend({}, cssCalculator.fontCss(), cssCalculator.foreColorCss(), cssCalculator.textAlignmentCss());
         this.hideEditor = (shouldCommit) => {
             setTimeout(() => {
                 if (shouldCommit) {
-                    field.editValue(field._editorValue());
+                    field.setEditValue(field._editorValue);
                 }
                 else {
-                    field._editorValue(field.editValue());
+                    field._editorValue = field.getEditValue();
                 }
-                this.active(false);
+                this.active = false;
             });
         };
-        this.containerStyle = ko.pureComputed(() => {
-            return $.extend({
-                width: bounds.width + 'px',
-                height: bounds.height + 'px',
-                'line-height': (bounds.height - verticalPadding) + 'px',
-                top: bounds.top * 100 / pageHeight + '%',
-                left: bounds.left * 100 / pageWidth + '%'
-            }, cssCalculator.fontCss(), cssCalculator.foreColorCss());
-        });
+        this.containerStyle = extend({
+            width: bounds.width + 'px',
+            height: bounds.height + 'px',
+            'line-height': (bounds.height - verticalPadding) + 'px',
+            top: bounds.top * 100 / pageHeight + '%',
+            left: bounds.left * 100 / pageWidth + '%'
+        }, cssCalculator.fontCss(), cssCalculator.foreColorCss());
         var cellVerticalPadding = 0;
         var borderCellStyle = 'none';
         ['Left', 'Top', 'Right', 'Bottom'].forEach((item) => {
             if (borderCss['border' + item] !== 'none') {
                 borderCellStyle = borderCss['border' + item];
-                cellVerticalPadding = style['borderWidth']() * 2;
+                cellVerticalPadding = currentMultiPlatformEngine.unwrap(style['borderWidth']) * 2;
             }
         });
         var cellStyle = {
@@ -66,11 +62,11 @@ export class CharacterCombEditingFieldViewModel extends TextEditingFieldViewMode
             'border-color': 'transparent'
         };
         var characterCombBounds = field.model().brickOptions.characterCombBounds;
-        this.cells = [];
+        const cells = [];
         var rowTops = {};
         for (var i = 0; i < characterCombBounds.length; i++) {
-            this.cells.push({
-                style: $.extend({
+            cells.push({
+                style: extend({
                     width: characterCombBounds[i].width + 'px',
                     height: characterCombBounds[i].height + 'px',
                     'line-height': (characterCombBounds[i].height - cellVerticalPadding) + 'px',
@@ -82,17 +78,31 @@ export class CharacterCombEditingFieldViewModel extends TextEditingFieldViewMode
             rowTops[characterCombBounds[i].top] = i;
         }
         var rowsCount = Object.keys(rowTops).length;
-        var colsCount = this.cells.length / rowsCount;
-        CharacterCombEditingFieldViewModel.setText(this.cells, style['textAlignment'](), style.rtl(), field.editValue.peek(), rowsCount, colsCount);
-        field.editValue.subscribe(newValue => {
-            CharacterCombEditingFieldViewModel.setText(this.cells, style['textAlignment'](), style.rtl(), newValue, rowsCount, colsCount);
-        });
-        this.zoom = zoom;
+        var colsCount = cells.length / rowsCount;
+        this.cells = this._createCellViewModels(cells);
+        CharacterCombEditingFieldViewModel.setText(this.cells, style['textAlignment'](), style.rtl(), field.getEditValue(), rowsCount, colsCount);
+        this.addDisposable(this.field.events.on('editValueChanged', (args) => {
+            CharacterCombEditingFieldViewModel.setText(this.cells, style['textAlignment'](), style.rtl(), args.newValue, rowsCount, colsCount);
+        }));
+    }
+    _createCellViewModels(cells) {
+        return cells.map(cell => createViewModelGenerator()
+            .createDefaultModel(this)
+            .generateProperty('text', cell.text)
+            .generateProperty('style', cell.style)
+            .getViewModel());
+    }
+    createViewModel() {
+        return createViewModelGenerator(super.createViewModel())
+            .generateProperty('cells', this.cells)
+            .generateProperty('hideEditor', (data) => this.hideEditor(!!data))
+            .generateProperty('keypressAction', (data, event) => this.keypressAction(data, event))
+            .getViewModel();
     }
-    activateEditor(viewModel, e) {
-        if (!this.field.readOnly() && !this.active()) {
-            this.active(true);
-            focusTextElement(e && e.currentTarget);
+    activateEditor(viewModel, event) {
+        if (!this.field.readOnly && !this.active) {
+            this.active = true;
+            super.activateEditor(viewModel, event);
         }
     }
     static setText(cells, textAlignment, rtl, text, rowsCount, colsCount) {

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

@@ -1,14 +1,15 @@
 /**
 * DevExpress HTML/JS Reporting (viewer\editing\models\checkEditingField.d.ts)
-* Version:  23.1.5
-* Build date: Aug 29, 2023
+* 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 { ImageSource } from '../../../common/imageSource';
-import { IEditingFieldViewModel, EditingField } from '../editingField';
-import { Disposable } from '@devexpress/analytics-core/analytics-utils';
-import * as ko from 'knockout';
+import { IEditingFieldModel, EditingField } from '../editingField';
+import { PreviewPage } from '../../internal/_page';
+import { EditingFieldBase, IEditingFieldViewModelBase } from './editingFieldBase';
+import { ArrayPropertyChangedEventArgs, PropertyChangedEventArgs } from '@devexpress/analytics-core/analytics-serializer-native';
 export declare enum GlyphStyle {
     StandardBox1 = 0,
     StandardBox2 = 1,
@@ -27,24 +28,48 @@ export declare enum CheckState {
     Checked = 1,
     Indeterminate = 2
 }
-export declare function createCustomGlyphStyleCss(imageSource: ImageSource): {};
-export declare function getCheckBoxTemplate(style: string, state: string, customGlyph: {}): any;
-export declare class CheckEditingFieldViewModel extends Disposable implements IEditingFieldViewModel {
+export declare function createCustomGlyphStyleCss(imageSource: ImageSource): {
+    [key: string]: string;
+};
+export declare function getCheckBoxTemplate(style: string, state: string, customGlyph: {}): string;
+export interface ICheckEditingFieldViewModel extends IEditingFieldViewModelBase {
+    onKeyDown: (event: KeyboardEvent) => void;
+    onBlur: () => void;
+    onFocus: () => void;
+    checkStyle: {
+        [key: string]: string;
+    };
+    checkStateStyleIcon: string;
+    customGlyphStyleCss: {
+        [key: string]: string;
+    };
+    checked: boolean;
+}
+export declare class CheckEditingFieldViewModel extends EditingFieldBase<ICheckEditingFieldViewModel> implements IEditingFieldModel {
     private _editingFieldsProvider;
     private _toggleCheckState;
-    constructor(field: EditingField, pageWidth: number, pageHeight: number, zoom: ko.Observable<number> | ko.Computed<number>, editingFieldsProvider: () => EditingField[]);
+    private _updateCustomGlyphStyleCss;
+    private _updateCheckStateStyleIcon;
+    private _updateCheckStyle;
+    constructor(field: EditingField<number>, pageWidth: number, pageHeight: number, page: PreviewPage, editingFieldsProvider: () => EditingField[]);
+    onPropertyChanged(args: PropertyChangedEventArgs<CheckEditingFieldViewModel> | ArrayPropertyChangedEventArgs<CheckEditingFieldViewModel>): void;
+    updateViewModel(args: PropertyChangedEventArgs<CheckEditingFieldViewModel> | ArrayPropertyChangedEventArgs<CheckEditingFieldViewModel>): void;
+    createViewModel(): ICheckEditingFieldViewModel;
     template: string;
-    field: EditingField;
-    containerStyle: () => {};
-    checkStyle: () => {};
-    checkStateStyleIcon: any;
-    customGlyphStyleCss: any;
-    zoom: ko.Observable<number> | ko.Computed<number>;
-    focused: ko.Observable<boolean>;
-    onKeyDown(_: any, e: any): void;
+    field: EditingField<number>;
+    checkStyle: {
+        [key: string]: string;
+    };
+    checkStateStyleIcon: string;
+    customGlyphStyleCss: {
+        [key: string]: string;
+    };
+    focused: boolean;
+    checked: boolean;
+    onKeyDown(event: KeyboardEvent): void;
     onBlur(): void;
     onFocus(): void;
-    onClick(_: any, e: any): void;
-    checked(): boolean;
+    onClick(model: EditingFieldBase, event: UIEvent): void;
+    private _updateCheckedState;
     toggleCheckState(): void;
 }