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

package/viewer/editing/models/characterCombEditingField.js

@@ -1,61 +1,57 @@
-/**
-* DevExpress HTML/JS Reporting (viewer\editing\models\characterCombEditingField.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 { focusTextElement, TextEditingFieldViewModelBase } from './textEditingField';
+/**
+* DevExpress HTML/JS Reporting (viewer\editing\models\characterCombEditingField.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
+*/
+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.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
-*/
+/**
+* DevExpress HTML/JS Reporting (viewer\editing\models\checkEditingField.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 { 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;
 }

package/viewer/editing/models/checkEditingField.js

@@ -1,16 +1,21 @@
-/**
-* DevExpress HTML/JS Reporting (viewer\editing\models\checkEditingField.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
-*/
+/**
+* DevExpress HTML/JS Reporting (viewer\editing\models\checkEditingField.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 { ImageSource } from '../../../common/imageSource';
-import { Disposable } from '@devexpress/analytics-core/analytics-utils';
-import * as ko from 'knockout';
-import * as $ from 'jquery';
-import { SvgTemplatesEngine } from '@devexpress/analytics-core/analytics-widgets-internal';
-import { KeyboardEnum } from '@devexpress/analytics-core/analytics-internal';
+import { SvgTemplatesEngine } from '@devexpress/analytics-core/analytics-widgets-internal-native';
+import { KeyboardEnum } from '@devexpress/analytics-core/analytics-internal-native';
+import { EditingFieldBase } from './editingFieldBase';
+import { createViewModelGenerator, mutable } from '@devexpress/analytics-core/analytics-serializer-native';
 export var GlyphStyle;
 (function (GlyphStyle) {
     GlyphStyle[GlyphStyle["StandardBox1"] = 0] = "StandardBox1";
@@ -44,100 +49,158 @@ export function createCustomGlyphStyleCss(imageSource) {
     return backgroundResult;
 }
 export function getCheckBoxTemplate(style, state, customGlyph) {
-    if (!$.isEmptyObject(customGlyph)) {
+    if (customGlyph && Object.keys(customGlyph).length > 0) {
         return 'dxrd-checkboxcustomglyph';
     }
     else {
         return SvgTemplatesEngine.getExistingTemplate('dxrd-svg-checkboxglyphs-' + style + '_' + state);
     }
 }
-export class CheckEditingFieldViewModel extends Disposable {
-    constructor(field, pageWidth, pageHeight, zoom, editingFieldsProvider) {
-        super();
-        this.focused = ko.observable(false);
+export class CheckEditingFieldViewModel extends EditingFieldBase {
+    constructor(field, pageWidth, pageHeight, page, editingFieldsProvider) {
+        super(page);
         this._editingFieldsProvider = editingFieldsProvider;
         this.template = 'dxrp-editing-field-checkbox';
         this.field = field;
-        this.zoom = zoom;
         var bounds = this.field.model().bounds;
         var checkBounds = this.field.model().brickOptions.checkBoxBounds;
         var rtl = this.field.model().brickOptions.rtlLayout;
-        this.containerStyle = () => {
-            return {
+        this._updateContainerStyle = () => {
+            if (!bounds)
+                return;
+            this.containerStyle = {
                 height: bounds.height + 'px',
                 width: bounds.width + 'px',
                 top: bounds.top * 100 / pageHeight + '%',
                 left: bounds.left * 100 / pageWidth + '%',
-                cursor: this.field.readOnly() ? 'auto' : 'pointer'
+                cursor: this.field.readOnly ? 'auto' : 'pointer'
             };
         };
-        this.checkStyle = () => {
-            var result = {
+        this._updateCheckStyle = () => {
+            if (!checkBounds)
+                return;
+            this.checkStyle = {
                 height: checkBounds.height + 'px',
                 width: checkBounds.width + 'px',
                 top: checkBounds.top + 'px',
                 left: (rtl ? (bounds.width - checkBounds.left - checkBounds.width) : checkBounds.left) + 'px'
             };
-            return result;
         };
-        this._disposables.push(this.customGlyphStyleCss = ko.pureComputed(() => {
-            var imageSourceData = field.model().brickOptions.checkBoxGlyphOptions.customGlyphs.filter(item => item.key === this.field.editValue())[0];
-            if (!imageSourceData.value)
-                return {};
+        this._updateCustomGlyphStyleCss = () => {
+            const checkBoxGlyphOptions = field.model().brickOptions.checkBoxGlyphOptions;
+            if (!checkBoxGlyphOptions)
+                return;
+            var imageSourceData = checkBoxGlyphOptions.customGlyphs.filter(item => item.key === this.field.getEditValue())[0];
+            if (!imageSourceData.value) {
+                this.customGlyphStyleCss = {};
+                return;
+            }
             var imageSource = new ImageSource(imageSourceData.value.imageType, imageSourceData.value.image);
-            return createCustomGlyphStyleCss(imageSource);
-        }));
-        this._disposables.push(this.checkStateStyleIcon = ko.pureComputed(() => {
-            return getCheckBoxTemplate(GlyphStyle[field.model().brickOptions.checkBoxGlyphOptions.glyphStyle], CheckState[this.field.editValue()], this.customGlyphStyleCss());
+            this.customGlyphStyleCss = createCustomGlyphStyleCss(imageSource);
+        };
+        this._updateCheckStateStyleIcon = () => {
+            const checkBoxGlyphOptions = field.model().brickOptions.checkBoxGlyphOptions;
+            if (!checkBoxGlyphOptions)
+                return;
+            this.checkStateStyleIcon = getCheckBoxTemplate(GlyphStyle[checkBoxGlyphOptions.glyphStyle], CheckState[this.field.getEditValue()], this.customGlyphStyleCss);
+        };
+        this.addDisposable(this.field.events.on('editValueChanged', (args) => {
+            this._updateCustomGlyphStyleCss();
+            this._updateCheckStateStyleIcon();
+            this._updateCheckedState();
+        }), this.field.events.on('readOnlyChanged', (args) => {
+            this._updateContainerStyle();
         }));
+        this._updateCheckStyle();
+        this._updateContainerStyle();
+        this._updateCheckedState();
+        this._updateCustomGlyphStyleCss();
     }
     _toggleCheckState() {
-        if (this.field.editValue() === CheckState.Checked) {
-            this.field.editValue(CheckState.Unchecked);
+        if (this.field.getEditValue() === CheckState.Checked) {
+            this.field.setEditValue(CheckState.Unchecked);
         }
         else {
-            this.field.editValue(CheckState.Checked);
+            this.field.setEditValue(CheckState.Checked);
         }
     }
-    onKeyDown(_, e) {
-        if (e.key == KeyboardEnum.Space) {
+    onPropertyChanged(args) {
+        super.onPropertyChanged(args);
+        if (args.propertyName === 'customGlyphStyleCss')
+            this._updateCheckStateStyleIcon();
+    }
+    updateViewModel(args) {
+        super.updateViewModel(args);
+        const viewModel = this.getViewModel();
+        if (args.propertyName === 'customGlyphStyleCss')
+            viewModel.customGlyphStyleCss = this.customGlyphStyleCss;
+        if (args.propertyName === 'checkStateStyleIcon')
+            viewModel.checkStateStyleIcon = this.checkStateStyleIcon;
+        if (args.propertyName === 'checked')
+            viewModel.checked = this.checked;
+    }
+    createViewModel() {
+        return createViewModelGenerator(super.createViewModel())
+            .generateProperty('checkStateStyleIcon', this.checkStateStyleIcon)
+            .generateProperty('customGlyphStyleCss', this.customGlyphStyleCss)
+            .generateProperty('checked', this.checked)
+            .generateProperty('checkStyle', this.checkStyle)
+            .generateProperty('onKeyDown', (event) => this.onKeyDown(event))
+            .generateProperty('onFocus', () => this.onFocus())
+            .generateProperty('onBlur', () => this.onBlur())
+            .getViewModel();
+    }
+    onKeyDown(event) {
+        if (event.key == KeyboardEnum.Space) {
             this.toggleCheckState();
         }
         else {
         }
     }
     onBlur() {
-        this.focused(false);
+        this.focused = false;
     }
     onFocus() {
-        this.focused(true);
+        this.focused = true;
     }
-    onClick(_, e) {
-        e.target.focus();
+    onClick(model, event) {
+        event.target.focus();
         this.toggleCheckState();
-        e.stopPropagation();
+        event.stopPropagation();
     }
-    checked() {
-        if (this.field.editValue() === CheckState.Checked) {
-            return true;
+    _updateCheckedState() {
+        if (this.field.getEditValue() === CheckState.Checked) {
+            this.checked = true;
         }
-        if (this.field.editValue() === CheckState.Unchecked) {
-            return false;
+        if (this.field.getEditValue() === CheckState.Unchecked) {
+            this.checked = false;
         }
     }
     toggleCheckState() {
-        if (this.field.readOnly())
+        if (this.field.readOnly)
             return;
         if (!this.field.groupID()) {
             this._toggleCheckState();
         }
-        else if (this.checked() === false) {
+        else if (this.checked === false) {
             this._editingFieldsProvider().forEach(value => {
                 if (value.groupID() === this.field.groupID()) {
-                    value.editValue(CheckState.Unchecked);
+                    value.setEditValue(CheckState.Unchecked);
                 }
             });
             this._toggleCheckState();
         }
     }
 }
+__decorate([
+    mutable(null)
+], CheckEditingFieldViewModel.prototype, "checkStateStyleIcon", void 0);
+__decorate([
+    mutable(null)
+], CheckEditingFieldViewModel.prototype, "customGlyphStyleCss", void 0);
+__decorate([
+    mutable(false)
+], CheckEditingFieldViewModel.prototype, "focused", void 0);
+__decorate([
+    mutable(false)
+], CheckEditingFieldViewModel.prototype, "checked", void 0);

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

@@ -0,0 +1,42 @@
+/**
+* DevExpress HTML/JS Reporting (viewer\editing\models\editingFieldBase.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 { EditingField, IEditValueContainerViewModel } from '../editingField';
+import { PreviewPage } from '../../internal/_page';
+import { ArrayPropertyChangedEventArgs, BaseRenderingModel, IViewModel, PropertyChangedEventArgs } from '@devexpress/analytics-core/analytics-serializer-native';
+export interface IEditingFieldViewModelBase extends IViewModel {
+    zoom: number;
+    active: boolean;
+    template: string;
+    field: IEditValueContainerViewModel;
+    activateEditor: (viewModel: IEditingFieldViewModelBase, event: Event) => void;
+    canActivateEditor: boolean;
+    onClick: (model: IEditingFieldViewModelBase, event: Event) => void;
+    containerStyle: {
+        [key: string]: string;
+    };
+}
+export declare class EditingFieldBase<T extends IEditingFieldViewModelBase = IEditingFieldViewModelBase> extends BaseRenderingModel<T> {
+    protected _updateContainerStyle: () => void;
+    constructor(page: PreviewPage);
+    createViewModel(): T;
+    updateViewModel(args: PropertyChangedEventArgs<EditingFieldBase> | ArrayPropertyChangedEventArgs<EditingFieldBase>): void;
+    onPropertyChanged(args: PropertyChangedEventArgs<EditingFieldBase> | ArrayPropertyChangedEventArgs<EditingFieldBase>): void;
+    canActivateEditor: boolean;
+    activateEditor(model: EditingFieldBase, event: {
+        target: EventTarget;
+        currentTarget: EventTarget;
+    }): void;
+    onClick(model: EditingFieldBase, event: Event): void;
+    template: string;
+    field: EditingField;
+    containerStyle: {
+        [key: string]: string;
+    };
+    zoom: number;
+    active: boolean;
+}

package/viewer/editing/models/editingFieldBase.js

@@ -0,0 +1,57 @@
+/**
+* DevExpress HTML/JS Reporting (viewer\editing\models\editingFieldBase.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 { BaseRenderingModel, createViewModelGenerator, mutable } from '@devexpress/analytics-core/analytics-serializer-native';
+export class EditingFieldBase extends BaseRenderingModel {
+    constructor(page) {
+        super();
+        this.canActivateEditor = false;
+        this.zoom = page.zoom;
+        this.addDisposable(page.events.on('zoomChanged', (args) => {
+            this.zoom = page.zoom;
+        }));
+    }
+    createViewModel() {
+        return createViewModelGenerator(super.createViewModel())
+            .generateProperty('zoom', this.zoom)
+            .generateProperty('template', this.template)
+            .generateProperty('field', this.field.getViewModel())
+            .generateProperty('canActivateEditor', this.canActivateEditor)
+            .generateProperty('activateEditor', (viewModel, event) => this.activateEditor(viewModel.getModel(), event))
+            .generateProperty('onClick', (viewModel, event) => this.onClick(viewModel.getModel(), event))
+            .generateProperty('containerStyle', this.containerStyle)
+            .generateProperty('active', this.active)
+            .getViewModel();
+    }
+    updateViewModel(args) {
+        const viewModel = this.getViewModel();
+        if (args.propertyName === 'zoom')
+            viewModel.zoom = this.zoom;
+        if (args.propertyName === 'active')
+            viewModel.active = this.active;
+        if (args.propertyName === 'containerStyle')
+            viewModel.containerStyle = this.containerStyle;
+    }
+    onPropertyChanged(args) { }
+    activateEditor(model, event) { }
+    onClick(model, event) { }
+}
+__decorate([
+    mutable(null)
+], EditingFieldBase.prototype, "containerStyle", void 0);
+__decorate([
+    mutable(1)
+], EditingFieldBase.prototype, "zoom", void 0);
+__decorate([
+    mutable(false)
+], EditingFieldBase.prototype, "active", void 0);

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

@@ -1,35 +1,34 @@
-/**
-* DevExpress HTML/JS Reporting (viewer\editing\models\imageEditingField.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 { Disposable } from '@devexpress/analytics-core/analytics-utils';
-import * as ko from 'knockout';
+/**
+* DevExpress HTML/JS Reporting (viewer\editing\models\imageEditingField.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 { PropertyChangedEventArgs, ArrayPropertyChangedEventArgs } from '@devexpress/analytics-core/analytics-serializer-native';
+import { PreviewPage } from '../../internal/_page';
 import { PictureEditMode } from '../../widgets/pictureEditor/pictureEditMode';
-import { IPictureEditorCallbacks, IPictureEditorOptions, IPictureEditorPopupTargetOptions, PictureEditorModel } from '../../widgets/pictureEditor/_pictureEditorModel';
-import { EditingField, IBounds, IEditingFieldViewModel, ImageAlignment, ImageSizeMode } from '../editingField';
-export declare class ImageEditingFieldViewModel extends Disposable implements IEditingFieldViewModel {
-    field: EditingField;
-    zoom: ko.Observable<number> | ko.Computed<number>;
+import { IImageEditValue, IPictureEditorCallbacks, IPictureEditorFieldModel, IPictureEditorPopupTargetOptions, PictureEditorModel } from '../../widgets/pictureEditor/_pictureEditorModel';
+import { EditingField, IBounds, IEditingFieldModel, ImageAlignment, ImageSizeMode } from '../editingField';
+import { EditingFieldBase, IEditingFieldViewModelBase } from './editingFieldBase';
+export declare class ImageEditingFieldViewModel<T extends IEditingFieldViewModelBase = IEditingFieldViewModelBase> extends EditingFieldBase<T> implements IEditingFieldModel, IPictureEditorFieldModel {
+    field: EditingField<IImageEditValue>;
     protected bounds: IBounds;
     static __DefaultImageType: string;
     protected popupTarget: string;
-    constructor(field: EditingField, pageWidth: number, pageHeight: number, zoom: ko.Observable<number> | ko.Computed<number>, bounds: IBounds);
-    getImage(): any;
-    getImageType(): any;
-    getPictureEditorOptions(): IPictureEditorOptions;
-    alignment: ko.Computed<ImageAlignment>;
-    sizeMode: ko.Computed<ImageSizeMode>;
+    protected _onZoomChanged: (newZoom: number) => void;
+    constructor(field: EditingField<IImageEditValue>, pageWidth: number, pageHeight: number, page: PreviewPage, bounds: IBounds);
+    onPropertyChanged(args: PropertyChangedEventArgs<ImageEditingFieldViewModel> | ArrayPropertyChangedEventArgs<ImageEditingFieldViewModel>): void;
+    getImage(): string;
+    getImageType(): string;
+    alignment: ImageAlignment;
+    sizeMode: ImageSizeMode;
     editMode: PictureEditMode;
     popupOptions: IPictureEditorPopupTargetOptions;
     template: string;
-    active: ko.Observable<boolean>;
-    shadingEnabled: ko.Observable<boolean>;
-    containerStyle: () => {};
+    shadingEnabled: boolean;
     callbacks: IPictureEditorCallbacks;
-    onKeyDown(_: any, e: any): void;
+    onKeyDown(event: KeyboardEvent): void;
     onFocusIn(s: PictureEditorModel): void;
     onDraw(s: PictureEditorModel): void;
     onBlur(s: PictureEditorModel): void;