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

package/viewer/internal/_actions.js

@@ -1,16 +1,21 @@
 /**
 * DevExpress HTML/JS Reporting (viewer\internal\_actions.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
 */
+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 { ActionId, ZoomAutoBy } from '../constants';
 import { EditablePreviewEnabled } from '../settings';
-import { getLocalization, Disposable } from '@devexpress/analytics-core/analytics-utils';
-import * as ko from 'knockout';
-import * as $ from 'jquery';
-import { ActionListsBase, parseZoom } from '@devexpress/analytics-core/analytics-internal';
+import { getLocalization, Disposable } from '@devexpress/analytics-core/analytics-utils-native';
+import { parseZoom, getParentContainer, ActionListsBase } from '@devexpress/analytics-core/analytics-internal-native';
+import { createViewModelGenerator, mutableArray } from '@devexpress/analytics-core/analytics-serializer-native';
 export class PreviewDesignerActions extends Disposable {
     constructor(reportPreview, fullscreen) {
         super();
@@ -22,11 +27,10 @@ export class PreviewDesignerActions extends Disposable {
             imageClassName: 'dxrd-image-design',
             imageTemplateName: 'dxrd-svg-preview-report_designer',
             templateName: reportPreview.canSwitchToDesigner ? 'dxrd-toolbar-two-way-switch' : undefined,
-            disabled: ko.observable(false),
             visible: reportPreview.canSwitchToDesigner,
             hotKey: { ctrlKey: true, keyCode: 68 },
             clickAction: () => {
-                reportPreview.previewVisible(false);
+                reportPreview.previewVisible = false;
                 reportPreview.deactivate();
             }
         };
@@ -37,19 +41,27 @@ export class PreviewDesignerActions extends Disposable {
             ]
         };
         this.actions.push(designAction);
+        const getFullScreenImageTemplateName = (fullscreen) => fullscreen ? 'dxrd-svg-toolbar-fullscreen-exit' : 'dxrd-svg-toolbar-fullscreen';
         this.actions.push({
             id: ActionId.FullScreen,
             text: getLocalization('Full Screen', 'ASPxReportsStringId.ToolBarItemText_FullScreen'),
             imageClassName: 'dxrd-image-fullscreen',
-            imageTemplateName: () => fullscreen() ? 'dxrd-svg-toolbar-fullscreen-exit' : 'dxrd-svg-toolbar-fullscreen',
-            disabled: ko.observable(false),
+            imageTemplateName: getFullScreenImageTemplateName(fullscreen()),
+            setImageTemplateNameChangedEvent: (callback) => {
+                const handler = (newValue) => callback(getFullScreenImageTemplateName(newValue));
+                const dispose = fullscreen.subscribe(handler);
+                return () => dispose();
+            },
             visible: !reportPreview.canSwitchToDesigner,
-            selected: fullscreen,
+            selected: fullscreen(),
+            setSelectedChangedEvent: (callback) => {
+                const dispose = fullscreen.subscribe(callback);
+                return () => dispose();
+            },
             clickAction: () => {
                 fullscreen(!fullscreen());
             }
         });
-        this._disposables.push(fullscreen);
     }
     dispose() {
         super.dispose();
@@ -62,17 +74,100 @@ export class PreviewDesignerActions extends Disposable {
 export class ActionLists extends ActionListsBase {
     constructor(reportPreview, globalActionProviders, customizeActions, enabled) {
         super(enabled);
-        this._reportPreview = reportPreview;
-        this.globalActionProviders = globalActionProviders;
-        this.toolbarItems = ko.computed(() => {
+        this.updateToolbarItems = () => {
             var globalActions = [];
-            globalActionProviders().forEach((actionProvider) => {
+            this.globalActionProviders.forEach((actionProvider) => {
                 globalActions.push.apply(globalActions, actionProvider.getActions(reportPreview));
             });
             customizeActions && customizeActions(globalActions);
-            return globalActions;
-        });
-        this._disposables.push(this.toolbarItems);
+            this.toolbarItems = globalActions;
+        };
+        this.globalActionProviders = globalActionProviders;
+    }
+    _isPaginationAction(action) {
+        return 'pageItems' in action;
+    }
+    _isExportAction(action) {
+        return 'eventHandlers' in action;
+    }
+    createActionViewModel(action, index) {
+        const viewModel = super.createActionViewModel(action, index);
+        if ('zoom' in action) {
+            const selectBoxViewModel = createViewModelGenerator(viewModel)
+                .configureProperty('widget', (property) => {
+                property.inputAttr = {
+                    'aria-label': getLocalization('Zoom', 'ASPxReportsStringId.WebDocumentViewer_AriaLabelZoomCombobox')
+                };
+            })
+                .getViewModel();
+            return selectBoxViewModel;
+        }
+        if (this._isPaginationAction(action)) {
+            const selectBoxViewModel = createViewModelGenerator(viewModel)
+                .generateProperty('templateName', action.templateName)
+                .generateProperty('getPopupContainer', getParentContainer)
+                .generateProperty('widget', createViewModelGenerator()
+                .generateProperty('dataSource', action.pageItems)
+                .generateProperty('displayExpr', action.displayExpr)
+                .generateProperty('value', action.selectedItem)
+                .generateProperty('searchEnabled', true)
+                .generateProperty('opened', false)
+                .generateProperty('onValueChanged', (e) => {
+                action.selectItem(e.value);
+            })
+                .generateProperty('onKeyUp', (e) => {
+                if (e.event.which !== 13)
+                    return;
+                if (action._isPageChanged(e.component.option('text'))) {
+                    selectBoxViewModel.widget.opened = false;
+                }
+            })
+                .generateProperty('searchMode', action.searchMode)
+                .generateProperty('searchTimeout', action.searchTimeout)
+                .generateProperty('itemTemplate', action.itemTemplate)
+                .generateProperty('dropDownOptions', {
+                wrapperAttr: {
+                    'aria-label': getLocalization('Pager', 'ASPxReportsStringId.WebDocumentViewer_AriaLabelPagerCombobox'),
+                    'class': 'dx-page-selectbox-popup-wrapper'
+                }
+            })
+                .generateProperty('inputAttr', {
+                'aria-label': getLocalization('Pager', 'ASPxReportsStringId.WebDocumentViewer_AriaLabelPagerCombobox')
+            })
+                .getViewModel())
+                .getViewModel();
+            this.subscribe(action.pageItems, (pageItems) => selectBoxViewModel.widget.dataSource = pageItems, action.setPageItemsChangedEvent);
+            this.subscribe(action.selectedItem, (selectedItem) => selectBoxViewModel.widget.value = selectedItem, action.setSelectedItemChangedEvent);
+            return selectBoxViewModel;
+        }
+        else if (this._isExportAction(action)) {
+            const getItems = (items) => {
+                return items.map(x => ({
+                    imageClassName: x.imageClassName,
+                    imageTemplateName: x.imageTemplateName,
+                    text: getLocalization(x.text, x.textId),
+                    format: x.format,
+                    items: x.items && getItems(x.items) || undefined
+                }));
+            };
+            const exportActionViewModel = createViewModelGenerator(viewModel)
+                .generateProperty('widget', createViewModelGenerator()
+                .generateProperty('items', getItems(action.items))
+                .generateProperty('onItemRendered', (e) => action.eventHandlers.onItemRendered(e))
+                .generateProperty('onSubmenuHiding', (e) => action.eventHandlers.onSubmenuHiding(e))
+                .generateProperty('onSubmenuShown', (e) => action.eventHandlers.onSubmenuShown(e))
+                .generateProperty('onSubmenuShowing', (container, element) => action.eventHandlers.onSubmenuShowing(container, element))
+                .getViewModel())
+                .generateProperty('getPopupContainer', getParentContainer)
+                .getViewModel();
+            this.subscribe(action.items, (items) => exportActionViewModel.widget.items = getItems(items), action.setItemsChangedEvent);
+            return exportActionViewModel;
+        }
+        return viewModel;
+    }
+    onPropertyChanged(args) {
+        if (args.propertyName === 'globalActionProviders')
+            this.updateToolbarItems();
     }
     processShortcut(actions, e) {
         if (this.shouldIgnoreProcessing(e))
@@ -81,25 +176,67 @@ export class ActionLists extends ActionListsBase {
     }
     dispose() {
         super.dispose();
-        this.resetObservableArray(this.globalActionProviders);
+        this.globalActionProviders = [];
         this.removeProperties();
     }
 }
+__decorate([
+    mutableArray(() => [])
+], ActionLists.prototype, "globalActionProviders", void 0);
 export class PreviewActions extends Disposable {
     constructor(reportPreview) {
         super();
         this.actions = [];
-        var printDisabled = reportPreview.exportDisabled;
+        const exportDisabledChangedCallbacks = [];
+        const visibilityChangedCallbacks = [];
+        const zoomChangedCallbacks = [];
+        const editingFieldsHighlightedChangedCallbacks = [];
+        const editingFieldsChangedCallbacks = [];
+        const showMultipagePreviewChangedCallbacks = [];
+        const pageIndexChangedCallbacks = [];
+        const pagesChangedCallbacks = [];
+        const pagesAndIndexChangedCallbacks = [];
+        this.addDisposable(reportPreview.events.on('zoomChanged', (args) => {
+            zoomChangedCallbacks.forEach(event => event(args.newValue));
+        }), reportPreview.events.on('editingFieldsHighlightedChanged', (args) => {
+            editingFieldsHighlightedChangedCallbacks.forEach(event => event(args.newValue));
+        }), reportPreview.events.on('showMultipagePreviewChanged', (args) => {
+            showMultipagePreviewChangedCallbacks.forEach(event => event(args.newValue));
+        }), reportPreview.events.on('pageIndexChanged', (args) => {
+            pageIndexChangedCallbacks.forEach(event => event(args.newValue));
+            pagesAndIndexChangedCallbacks.forEach(event => event(reportPreview.pages, reportPreview.pageIndex));
+        }), reportPreview.events.on('pagesChanged', (args) => {
+            pagesChangedCallbacks.forEach(event => event(reportPreview.pages));
+            pagesAndIndexChangedCallbacks.forEach(event => event(reportPreview.pages, reportPreview.pageIndex));
+        }), reportPreview.events.on('previewVisibleChanged', (args) => {
+            visibilityChangedCallbacks.forEach(event => event(args.newValue));
+        }), reportPreview.events.on('exportDisabledChanged', (args) => {
+            exportDisabledChangedCallbacks.forEach(event => event(args.newValue));
+        }), reportPreview.events.on('_editingFieldsChanged', (args) => {
+            editingFieldsChangedCallbacks.forEach(event => event(args.newValue));
+        }));
+        const goBackwardsDisabled = () => reportPreview.pageIndex < 1;
+        const setVisibleChangedEvent = (callback) => {
+            const handler = (visible) => callback(visible);
+            visibilityChangedCallbacks.push(handler);
+            return () => visibilityChangedCallbacks.splice(visibilityChangedCallbacks.indexOf(handler), 1);
+        };
         this.actions.push({
             id: ActionId.FirstPage,
             text: getLocalization('First Page', 'ASPxReportsStringId.DocumentViewer_RibbonCommandText_FirstPage'),
             imageClassName: 'dxrd-image-preview-first',
             imageTemplateName: 'dxrd-svg-preview-first_page',
-            disabled: this.wrapDisposable(ko.pureComputed(() => { return reportPreview.pageIndex() < 1; })),
-            visible: this.wrapDisposable(ko.pureComputed(() => { return reportPreview.previewVisible(); })),
+            setDisabledChangedEvent: (callback) => {
+                const handler = () => callback(goBackwardsDisabled());
+                pageIndexChangedCallbacks.push(handler);
+                return () => pageIndexChangedCallbacks.splice(pageIndexChangedCallbacks.indexOf(handler), 1);
+            },
+            getDisabled: () => goBackwardsDisabled(),
+            getVisible: () => reportPreview.previewVisible,
+            setVisibleChangedEvent: setVisibleChangedEvent,
             hotKey: { ctrlKey: true, keyCode: 37 },
             clickAction: () => {
-                if (reportPreview.pageIndex() > 0) {
+                if (reportPreview.pageIndex > 0) {
                     reportPreview.goToPage(0);
                 }
             }
@@ -109,101 +246,116 @@ export class PreviewActions extends Disposable {
             text: getLocalization('Previous Page', 'ASPxReportsStringId.ToolBarItemText_PreviousPage'),
             imageClassName: 'dxrd-image-preview-prev',
             imageTemplateName: 'dxrd-svg-preview-previous_page',
-            disabled: this.wrapDisposable(ko.pureComputed(() => { return reportPreview.pageIndex() < 1; })),
-            visible: this.wrapDisposable(ko.pureComputed(() => { return reportPreview.previewVisible(); })),
+            setDisabledChangedEvent: (callback) => {
+                const handler = () => callback(goBackwardsDisabled());
+                pageIndexChangedCallbacks.push(handler);
+                return () => pageIndexChangedCallbacks.splice(pageIndexChangedCallbacks.indexOf(handler), 1);
+            },
+            getDisabled: () => goBackwardsDisabled(),
+            getVisible: () => reportPreview.previewVisible,
+            setVisibleChangedEvent: setVisibleChangedEvent,
             hotKey: { ctrlKey: false, keyCode: 37 },
             clickAction: () => {
-                if (reportPreview.pageIndex() >= 1) {
-                    reportPreview.goToPage(reportPreview.pageIndex() - 1, false, 500);
+                if (reportPreview.pageIndex >= 1) {
+                    reportPreview.goToPage(reportPreview.pageIndex - 1, false, 500);
                 }
             },
         });
+        const getPageItems = () => {
+            var pageCount = reportPreview.pages.length;
+            if (pageCount === 0 || reportPreview.pageIndex === -1) {
+                return [];
+            }
+            var pagesArray = new Array();
+            for (var i = 0; i < pageCount;) {
+                pagesArray.push({ index: i, text: ++i });
+            }
+            return {
+                store: pagesArray,
+                paginate: pageCount > 200,
+                pageSize: 100
+            };
+        };
+        const getSelectedItem = () => {
+            if (reportPreview.pageIndex < 0) {
+                return null;
+            }
+            var items = getPageItems();
+            return items && items.store && (items.store.length > reportPreview.pageIndex) && items.store[reportPreview.pageIndex];
+        };
+        const previewHasNoPages = () => reportPreview.pages.length === 0 || reportPreview.pageIndex === -1;
         var paginationSelectBoxViewModel = {
             id: ActionId.Pagination,
             text: 'Pagination',
-            imageClassName: 'dxrd-image-pager',
-            disabled: this.wrapDisposable(ko.pureComputed(() => { return reportPreview.pages().length === 0 || reportPreview.pageIndex() === -1; })),
-            visible: this.wrapDisposable(ko.pureComputed(() => { return reportPreview.previewVisible(); })),
-            clickAction: $.noop,
-            selectedItem: this.wrapDisposable(ko.pureComputed({
-                read: () => {
-                    if (reportPreview.pageIndex() < 0) {
-                        return null;
-                    }
-                    var items = paginationSelectBoxViewModel.pageItems();
-                    return items && items.store && (items.store.length > reportPreview.pageIndex()) && items.store[reportPreview.pageIndex()];
-                },
-                write: (newValue) => {
-                    if (!!newValue && (newValue.index || newValue.index === 0)) {
-                        reportPreview.goToPage(newValue.index);
-                    }
-                },
-                deferEvaluation: true
-            })),
-            pageItems: this.wrapDisposable(ko.pureComputed(() => {
-                var pageCount = reportPreview.pages().length;
-                if (pageCount === 0 || reportPreview.pageIndex.peek() === -1) {
-                    return [];
-                }
-                var pagesArray = new Array();
-                for (var i = 0; i < pageCount;) {
-                    pagesArray.push({ index: i, text: ++i });
-                }
-                return {
-                    store: pagesArray,
-                    paginate: pageCount > 200,
-                    pageSize: 100
-                };
-            })),
-            currentPage: reportPreview._currentPageText,
-            focusOut: (e) => {
-                if (!paginationSelectBoxViewModel._isPageChanged(e.component.option('text'))) {
-                    reportPreview._currentPageText.notifySubscribers(reportPreview._currentPageText());
-                }
+            setDisabledChangedEvent: (callback) => {
+                const handler = () => callback(previewHasNoPages());
+                pagesAndIndexChangedCallbacks.push(handler);
+                return () => pagesAndIndexChangedCallbacks.splice(pagesAndIndexChangedCallbacks.indexOf(handler), 1);
             },
-            keyUp: (e) => {
-                if (e.event.which !== 13)
-                    return;
-                if (paginationSelectBoxViewModel._isPageChanged(e.component.option('text'))) {
-                    paginationSelectBoxViewModel.opened(false);
+            getDisabled: () => previewHasNoPages(),
+            getVisible: () => reportPreview.previewVisible,
+            setVisibleChangedEvent: setVisibleChangedEvent,
+            selectItem: (newValue) => {
+                if (!!newValue && (newValue.index || newValue.index === 0)) {
+                    reportPreview.goToPage(newValue.index);
                 }
             },
+            selectedItem: getSelectedItem(),
+            setSelectedItemChangedEvent: (callback) => {
+                const handler = () => callback(getSelectedItem());
+                pagesAndIndexChangedCallbacks.push(handler);
+                return () => pagesAndIndexChangedCallbacks.splice(pagesAndIndexChangedCallbacks.indexOf(handler), 1);
+            },
+            pageItems: getPageItems(),
+            setPageItemsChangedEvent: (callback) => {
+                const handler = () => callback(getPageItems());
+                pagesChangedCallbacks.push(handler);
+                return () => pagesChangedCallbacks.splice(pagesChangedCallbacks.indexOf(handler), 1);
+            },
             _isPageChanged: (value) => {
                 var val = parseInt && parseInt(value);
-                if (!!val && val-- > 0 && val < reportPreview.pages().length) {
+                if (!!val && val-- > 0 && val < reportPreview.pages.length) {
                     reportPreview.goToPage(val);
                     return true;
                 }
                 return false;
             },
             displayExpr: function (value) {
-                var pageIndex = reportPreview.pageIndex.peek();
-                if (pageIndex === -1 || !value || pageIndex === value.index) {
-                    return reportPreview._currentPageText.peek();
+                if (reportPreview.pageIndex !== -1 && value && reportPreview.pageIndex !== value.index) {
+                    return value.text;
+                }
+                if (reportPreview.pageIndex === -1) {
+                    return getLocalization('0 pages', 'ASPxReportsStringId.WebDocumentViewer_0Pages');
                 }
                 else {
-                    return value.text;
+                    var ofText = getLocalization('of', 'ASPxReportsStringId.ToolBarItemText_OfLabel');
+                    return (reportPreview.pageIndex + 1) + ' ' + ofText + ' ' + reportPreview.pages.length;
                 }
             },
             itemTemplate: function (value) { return value.text; },
             searchMode: 'startswith',
-            searchEnabled: ko.observable(true),
             searchTimeout: 10,
-            opened: ko.observable(false),
             templateName: 'dxrd-preview-pager'
         };
+        const goForwardActionDisabled = () => reportPreview.pageIndex < 0 || reportPreview.pageIndex >= reportPreview.pages.length - 1;
         this.actions.push(paginationSelectBoxViewModel);
         this.actions.push({
             id: ActionId.NextPage,
             text: getLocalization('Next Page', 'ASPxReportsStringId.ToolBarItemText_NextPage'),
             imageClassName: 'dxrd-image-preview-next',
             imageTemplateName: 'dxrd-svg-preview-next_page',
-            disabled: this.wrapDisposable(ko.pureComputed(() => { return reportPreview.pageIndex() < 0 || reportPreview.pageIndex() >= reportPreview.pages().length - 1; })),
-            visible: this.wrapDisposable(ko.pureComputed(() => { return reportPreview.previewVisible(); })),
+            setDisabledChangedEvent: (callback) => {
+                const handler = () => callback(goForwardActionDisabled());
+                pagesAndIndexChangedCallbacks.push(handler);
+                return () => pagesAndIndexChangedCallbacks.splice(pagesAndIndexChangedCallbacks.indexOf(handler), 1);
+            },
+            getDisabled: () => goForwardActionDisabled(),
+            getVisible: () => reportPreview.previewVisible,
+            setVisibleChangedEvent: setVisibleChangedEvent,
             hotKey: { ctrlKey: false, keyCode: 39 },
             clickAction: () => {
-                if (reportPreview.pageIndex() < reportPreview.pages().length - 1) {
-                    reportPreview.goToPage(reportPreview.pageIndex() + 1, false, 500);
+                if (reportPreview.pageIndex < reportPreview.pages.length - 1) {
+                    reportPreview.goToPage(reportPreview.pageIndex + 1, false, 500);
                 }
             }
         });
@@ -212,56 +364,79 @@ export class PreviewActions extends Disposable {
             text: getLocalization('Last Page', 'ASPxReportsStringId.DocumentViewer_RibbonCommandText_LastPage'),
             imageClassName: 'dxrd-image-preview-last',
             imageTemplateName: 'dxrd-svg-preview-last_page',
-            disabled: this.wrapDisposable(ko.pureComputed(() => { return reportPreview.pageIndex() < 0 || reportPreview.pageIndex() >= reportPreview.pages().length - 1; })),
-            visible: this.wrapDisposable(ko.pureComputed(() => { return reportPreview.previewVisible(); })),
+            setDisabledChangedEvent: (callback) => {
+                const handler = () => callback(goForwardActionDisabled());
+                pagesAndIndexChangedCallbacks.push(handler);
+                return () => pagesAndIndexChangedCallbacks.splice(pagesAndIndexChangedCallbacks.indexOf(handler), 1);
+            },
+            getDisabled: () => goForwardActionDisabled(),
+            getVisible: () => reportPreview.previewVisible,
+            setVisibleChangedEvent: setVisibleChangedEvent,
             hotKey: { ctrlKey: true, keyCode: 39 },
             clickAction: () => {
-                if (reportPreview.pageIndex() < reportPreview.pages().length - 1) {
-                    reportPreview.goToPage(reportPreview.pages().length - 1);
+                if (reportPreview.pageIndex < reportPreview.pages.length - 1) {
+                    reportPreview.goToPage(reportPreview.pages.length - 1);
                 }
             }
         });
-        this.actions.push({
+        const getMultipageToggleImageClassName = (showMultipagePreview) => {
+            return showMultipagePreview ? 'dxrd-image-preview-single-page' : 'dxrd-image-preview-multipage';
+        };
+        const getMultipageToggleImageTemplateName = (showMultipagePreview) => {
+            return showMultipagePreview ? 'dxrd-svg-preview-single_page' : 'dxrd-svg-preview-multi_page_preview';
+        };
+        const multipageModeAction = {
             id: ActionId.MultipageToggle,
             text: getLocalization('Toggle Multipage Mode', 'ASPxReportsStringId.WebDocumentViewer_ToggleMultipageMode'),
-            imageClassName: this.wrapDisposable(ko.pureComputed(() => { return reportPreview.showMultipagePreview() ? 'dxrd-image-preview-single-page' : 'dxrd-image-preview-multipage'; })),
-            imageTemplateName: this.wrapDisposable(ko.pureComputed(() => { return reportPreview.showMultipagePreview() ? 'dxrd-svg-preview-single_page' : 'dxrd-svg-preview-multi_page_preview'; })),
-            disabled: ko.observable(false),
-            visible: this.wrapDisposable(ko.pureComputed(() => { return reportPreview.previewVisible(); })),
+            imageClassName: getMultipageToggleImageClassName(reportPreview.showMultipagePreview),
+            imageTemplateName: getMultipageToggleImageTemplateName(reportPreview.showMultipagePreview),
+            getVisible: () => reportPreview.previewVisible,
+            setVisibleChangedEvent: setVisibleChangedEvent,
             hotKey: { ctrlKey: true, keyCode: 77 },
             clickAction: () => {
-                var zoom = reportPreview._zoom();
-                reportPreview.showMultipagePreview(!reportPreview.showMultipagePreview());
-                reportPreview.zoom(zoom);
+                var zoom = reportPreview.originalZoom;
+                reportPreview.showMultipagePreview = !reportPreview.showMultipagePreview;
+                reportPreview.zoom = zoom;
+            },
+            setImageClassNameChangedEvent: (callback) => {
+                const handler = (newValue) => callback(getMultipageToggleImageClassName(newValue));
+                showMultipagePreviewChangedCallbacks.push(handler);
+                return () => showMultipagePreviewChangedCallbacks.splice(showMultipagePreviewChangedCallbacks.indexOf(handler), 1);
+            },
+            setImageTemplateNameChangedEvent: (callback) => {
+                const handler = (newValue) => callback(getMultipageToggleImageTemplateName(newValue));
+                showMultipagePreviewChangedCallbacks.push(handler);
+                return () => showMultipagePreviewChangedCallbacks.splice(showMultipagePreviewChangedCallbacks.indexOf(handler), 1);
             },
             hasSeparator: true
-        });
+        };
+        this.actions.push(multipageModeAction);
         this.actions.push({
             id: ActionId.ZoomOut,
             text: getLocalization('Zoom Out', 'DevExpress.XtraPrinting.PrintingSystemCommand.ZoomOut'),
             imageClassName: 'dxrd-image-zoomout',
             imageTemplateName: 'dxrd-svg-toolbar-zoomout',
-            disabled: ko.observable(false),
             visible: true,
-            zoomStep: reportPreview.zoomStep,
             hotKey: { ctrlKey: false, keyCode: 109 },
             clickAction: () => {
-                var currentZoom = reportPreview.zoom();
-                var zoomLevel = currentZoom > 0 ? currentZoom : reportPreview._zoom();
-                reportPreview.zoom(Math.max(zoomLevel - reportPreview.zoomStep(), 0.1));
+                var currentZoom = reportPreview.zoom;
+                var zoomLevel = currentZoom > 0 ? currentZoom : reportPreview.originalZoom;
+                reportPreview.zoom = Math.max(zoomLevel - reportPreview.zoomStep, 0.1);
             },
             hasSeparator: true
         });
-        this.actions.push({
+        const getZoomLevels = (showMultipagePreview) => {
+            var items = reportPreview.predefinedZoomLevels.slice(0);
+            if (showMultipagePreview === false && items.indexOf(0) === -1) {
+                items.push(ZoomAutoBy.PageWidth);
+                items.push(ZoomAutoBy.WholePage);
+            }
+            return items;
+        };
+        const zoomAction = {
             id: ActionId.ZoomSelector,
-            text: getLocalization('Zoom to Whole Page', 'DevExpress.XtraPrinting.PrintingSystemCommand.ZoomToWholePage'),
-            imageClassName: 'dxrd-image-zoom',
-            disabled: ko.observable(false),
             visible: true,
             hotKey: { ctrlKey: true, keyCode: 187 },
-            clickAction: () => {
-                reportPreview.zoom(0);
-            },
             templateName: 'dxrd-zoom-autofit-select-template',
             displayExpr: (val) => {
                 if (val === ZoomAutoBy.PageWidth) {
@@ -271,65 +446,102 @@ export class PreviewActions extends Disposable {
                     return getLocalization('Whole Page', 'PreviewStringId.MenuItem_ZoomWholePage');
                 }
                 else {
-                    return Math.round((val || reportPreview.zoom.peek()) * 100) + '%';
+                    return Math.round((val || reportPreview.zoom) * 100) + '%';
                 }
             },
             onCustomItemCreating: (e) => { e.customItem = parseZoom(e.text); },
             zoom: reportPreview.zoom,
-            zoomLevels: reportPreview.predefinedZoomLevels,
-            zoomItems: this.wrapDisposable(ko.pureComputed(() => {
-                var items = reportPreview.predefinedZoomLevels.slice(0);
-                if (reportPreview.showMultipagePreview() === false && items.indexOf(0) === -1) {
-                    items.push(ZoomAutoBy.PageWidth);
-                    items.push(ZoomAutoBy.WholePage);
-                }
-                return items;
-            }))
-        });
+            zoomLevels: getZoomLevels(reportPreview.showMultipagePreview),
+            setZoomLevelsChangedEvent: (callback) => {
+                const handler = (newValue) => callback(getZoomLevels(newValue));
+                showMultipagePreviewChangedCallbacks.push(handler);
+                return () => showMultipagePreviewChangedCallbacks.splice(showMultipagePreviewChangedCallbacks.indexOf(handler), 1);
+            },
+            setZoom: (newValue) => {
+                reportPreview.zoom = newValue;
+            },
+            setZoomChangedEvent: (callback) => {
+                zoomChangedCallbacks.push(callback);
+                return () => zoomChangedCallbacks.splice(zoomChangedCallbacks.indexOf(callback), 1);
+            }
+        };
+        this.actions.push(zoomAction);
         this.actions.push({
             id: ActionId.ZoomIn,
             text: getLocalization('Zoom In', 'DevExpress.XtraPrinting.PrintingSystemCommand.ZoomIn'),
             imageClassName: 'dxrd-image-zoomin',
             imageTemplateName: 'dxrd-svg-toolbar-zoomin',
-            disabled: ko.observable(false),
             visible: true,
-            zoomStep: reportPreview.zoomStep,
             hotKey: { ctrlKey: false, keyCode: 107 },
             clickAction: () => {
-                var currentZoom = reportPreview.zoom();
-                var zoomLevel = currentZoom > 0 ? currentZoom : reportPreview._zoom();
-                reportPreview.zoom(Math.min(zoomLevel + reportPreview.zoomStep(), 10));
+                var currentZoom = reportPreview.zoom;
+                var zoomLevel = currentZoom > 0 ? currentZoom : reportPreview.originalZoom;
+                reportPreview.zoom = Math.min(zoomLevel + reportPreview.zoomStep, 10);
             }
         });
-        this.actions.push({
+        const getHighlightEditingFieldsVisible = () => EditablePreviewEnabled() && reportPreview.previewVisible;
+        const getHighlightEditingFieldsDisabled = () => reportPreview.editingFieldsProvider().length < 1;
+        const highlightingAction = {
             id: ActionId.HighlightEditingFields,
             text: getLocalization('Highlight Editing Fields', 'DevExpress.XtraPrinting.PrintingSystemCommand.HighlightEditingFields'),
             imageClassName: 'dxrp-image-hightlight-editing-fields',
             imageTemplateName: 'dxrd-svg-toolbar-hightlightEditingFields',
-            disabled: this.wrapDisposable(ko.pureComputed(() => reportPreview.editingFieldsProvider().length < 1)),
-            visible: this.wrapDisposable(ko.pureComputed(() => {
-                var available = EditablePreviewEnabled();
-                var viewerVisible = reportPreview.previewVisible();
-                return available && viewerVisible;
-            })),
-            selected: this.wrapDisposable(ko.pureComputed(() => reportPreview.editingFieldsHighlighted())),
+            setDisabledChangedEvent: (callback) => {
+                const handler = () => callback(getHighlightEditingFieldsDisabled());
+                editingFieldsChangedCallbacks.push(handler);
+                return () => editingFieldsChangedCallbacks.splice(editingFieldsChangedCallbacks.indexOf(handler), 1);
+            },
+            getDisabled: () => getHighlightEditingFieldsDisabled(),
+            getVisible: () => getHighlightEditingFieldsVisible(),
+            setVisibleChangedEvent: (callback) => {
+                const handler = () => callback(getHighlightEditingFieldsVisible());
+                visibilityChangedCallbacks.push(handler);
+                const subscriptionDispose = EditablePreviewEnabled.subscribe(handler);
+                return () => {
+                    subscriptionDispose();
+                    visibilityChangedCallbacks.splice(visibilityChangedCallbacks.indexOf(handler), 1);
+                };
+            },
+            selected: reportPreview.editingFieldsHighlighted,
+            setSelectedChangedEvent: (callback) => {
+                editingFieldsHighlightedChangedCallbacks.push(callback);
+                return () => editingFieldsHighlightedChangedCallbacks.splice(editingFieldsHighlightedChangedCallbacks.indexOf(callback), 1);
+            },
             hotKey: { ctrlKey: true, keyCode: 72 },
             clickAction: () => {
-                reportPreview.editingFieldsHighlighted(!reportPreview.editingFieldsHighlighted());
+                reportPreview.editingFieldsHighlighted = !reportPreview.editingFieldsHighlighted;
             },
             hasSeparator: true
-        });
+        };
+        this.actions.push(highlightingAction);
+        this.addDisposable(reportPreview.events.on('propertyChanged', (e) => {
+            if (e.propertyName === 'showMultipagePreview') {
+                zoomAction.zoomLevels = getZoomLevels(reportPreview.showMultipagePreview);
+                multipageModeAction.imageClassName = getMultipageToggleImageClassName(reportPreview.showMultipagePreview);
+                multipageModeAction.imageTemplateName = getMultipageToggleImageTemplateName(reportPreview.showMultipagePreview);
+            }
+            else if (e.propertyName === 'zoom') {
+                zoomAction.zoom = reportPreview.zoom;
+            }
+            else if (e.propertyName === 'editingFieldsHighlighted') {
+                highlightingAction.selected = reportPreview.editingFieldsHighlighted;
+            }
+        }));
         this.actions.push({
             id: ActionId.Print,
             text: getLocalization('Print', 'ASPxReportsStringId.DocumentViewer_RibbonPrintGroupText'),
             imageClassName: 'dxrd-image-print',
             imageTemplateName: 'dxrd-svg-preview-print',
             hasSeparator: true,
-            disabled: printDisabled,
+            getDisabled: () => reportPreview.exportDisabled,
+            setDisabledChangedEvent: (callback) => {
+                exportDisabledChangedCallbacks.push(callback);
+                return () => exportDisabledChangedCallbacks.splice(exportDisabledChangedCallbacks.indexOf(callback), 1);
+            },
             visible: true,
             hotKey: { ctrlKey: true, keyCode: 80 },
             clickAction: () => {
-                if (printDisabled()) {
+                if (reportPreview.exportDisabled) {
                     return;
                 }
                 reportPreview.printDocument();
@@ -340,18 +552,22 @@ export class PreviewActions extends Disposable {
             text: getLocalization('Print Page', 'ASPxReportsStringId.DocumentViewer_RibbonCommandText_PrintPage'),
             imageClassName: 'dxrd-image-print-page',
             imageTemplateName: 'dxrd-svg-preview-print_page',
-            disabled: printDisabled,
+            getDisabled: () => reportPreview.exportDisabled,
+            setDisabledChangedEvent: (callback) => {
+                exportDisabledChangedCallbacks.push(callback);
+                return () => exportDisabledChangedCallbacks.splice(exportDisabledChangedCallbacks.indexOf(callback), 1);
+            },
             visible: true,
             clickAction: () => {
-                if (printDisabled()) {
+                if (reportPreview.exportDisabled) {
                     return;
                 }
-                reportPreview.printDocument(reportPreview.pageIndex());
+                reportPreview.printDocument(reportPreview.pageIndex);
             }
         });
     }
     wrapDisposable(object) {
-        this._disposables.push(object);
+        this.addDisposable(object);
         return object;
     }
     dispose() {