V:: v.0.8.2

API to change view mode programmatically.
Reset single page view mode state to not show previous pages.
Escape hatch API.
Refactoring.

Author: RussCoder

extension/manifest.json

@@ -2,7 +2,7 @@
     "manifest_version": 2,
     "name": "DjVu.js Viewer",
     "short_name": "DV",
-    "version": "0.8.1.0",
+    "version": "0.8.2.0",
     "author": "RussCoder",
     "homepage_url": "https://github.com/RussCoder/djvujs",
     "description": "Opens links to .djvu files. Allows opening files from a local disk. Processes <object> & <embed> tags.",

viewer/CHANGELOG.md

@@ -1,5 +1,15 @@
 # DjVu.js Viewer's Changelog
 
+## v.0.8.2 (23.09.2021)
+
+- Support for big images (up to 20K * 20K pixels) in the single page view mode.
+- Dynamic letter spacing in the text layer to make text fully fill its zone.
+- API to change view mode programmatically.
+- Fixed: a previous page was shown for a short while when one switched from
+  continuous scroll to single page view mode.
+- Getters, constants and action types are exposed as an escape hatch API for
+  temporary solutions.
+
 ## v.0.8.1 (11.09.2021)
 
 - Fixed a bug from the previous release (the text layer couldn't be selected).

viewer/src/DjVuViewer.js

@@ -17,9 +17,12 @@ const Events = constant({
 
 export default class DjVuViewer extends EventEmitter {
 
-    static VERSION = '0.8.1';
+    static VERSION = '0.8.2';
 
     static Events = Events;
+    static Constants = Constants;
+    static ActionTypes = ActionTypes;
+    static get = get;
 
     static getAvailableLanguages() {
         return Object.keys(dictionaries);
@@ -117,6 +120,7 @@ export default class DjVuViewer extends EventEmitter {
      * The config object is destructed merely for the purpose of documentation
      * @param {number} pageNumber
      * @param {0|90|180|270} pageRotation
+     * @param {'continuous'|'single'|'text'} viewMode
      * @param {number} pageScale
      * @param {string} language
      * @param {'dark'|'light'} theme
@@ -130,10 +134,18 @@ export default class DjVuViewer extends EventEmitter {
        }} uiOptions
      * @returns {DjVuViewer}
      */
-    configure({ pageNumber, pageRotation, pageScale, language, theme, uiOptions } = {}) {
+    configure({
+        pageNumber,
+        pageRotation,
+        viewMode,
+        pageScale,
+        language,
+        theme,
+        uiOptions,
+    } = {}) {
         this.store.dispatch({
             type: ActionTypes.CONFIGURE,
-            pageNumber, pageRotation, pageScale, language, theme, uiOptions,
+            pageNumber, pageRotation, viewMode, pageScale, language, theme, uiOptions,
         });
 
         return this;

viewer/src/components/Toolbar/ViewModeButtons.jsx

@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import { FaRegFileAlt, FaRegFileImage } from "react-icons/all";
 
 import { get } from '../../reducers';
-import Constants from '../../constants';
+import Constants, { ActionTypes } from '../../constants';
 import { TranslationContext } from '../Translation';
 import styled from 'styled-components';
 import { controlButton } from "../cssMixins";
@@ -44,15 +44,15 @@ class ViewModeButtons extends React.Component {
     static contextType = TranslationContext;
 
     enableContinuousScrollMode = () => {
-        this.props.dispatch({ type: Constants.ENABLE_CONTINUOUS_SCROLL_MODE_ACTION });
+        this.props.dispatch({ type: ActionTypes.SET_VIEW_MODE, payload: Constants.CONTINUOUS_SCROLL_MODE });
     };
 
     enableSinglePageMode = () => {
-        this.props.dispatch({ type: Constants.ENABLE_SINGLE_PAGE_MODE_ACTION });
+        this.props.dispatch({ type: ActionTypes.SET_VIEW_MODE, payload: Constants.SINGLE_PAGE_MODE });
     };
 
     enableTextMode = () => {
-        this.props.dispatch({ type: Constants.ENABLE_TEXT_MODE_ACTION });
+        this.props.dispatch({ type: ActionTypes.SET_VIEW_MODE, payload: Constants.TEXT_MODE });
     };
 
     render() {

viewer/src/constants/Constants.js

@@ -4,9 +4,9 @@ const Constants = {
     TEXT_CURSOR_MODE: null,
     GRAB_CURSOR_MODE: null,
 
-    TEXT_MODE: null,
-    CONTINUOUS_SCROLL_MODE: null,
-    SINGLE_PAGE_MODE: null,
+    TEXT_MODE: 'text',
+    CONTINUOUS_SCROLL_MODE: 'continuous',
+    SINGLE_PAGE_MODE: 'single',
 
     SET_CURSOR_MODE_ACTION: null,
     ERROR_ACTION: null,
@@ -32,9 +32,6 @@ const Constants = {
     PAGES_SIZES_ARE_GOTTEN: null,
     DROP_PAGE_ACTION: null,
     DROP_ALL_PAGES_ACTION: null,
-    ENABLE_CONTINUOUS_SCROLL_MODE_ACTION: null,
-    ENABLE_SINGLE_PAGE_MODE_ACTION: null,
-    ENABLE_TEXT_MODE_ACTION: null,
 
     SET_API_CALLBACK_ACTION: null, // A special action for interaction with sagas. Used for program API of the viewer, look at the DjVuViewer.js
 };

viewer/src/constants/actionTypes.js

@@ -28,4 +28,5 @@ export const ActionTypes = constant({
     PIN_TOOLBAR: null,
     UNPIN_TOOLBAR: null,
     UPDATE_APP_CONTEXT: null,
+    SET_VIEW_MODE: null,
 });

viewer/src/index.js

@@ -24,7 +24,7 @@ if (process.env.NODE_ENV !== 'production') {
         window.DjVuViewerInstance.render(document.getElementById('root'));
 
         window.DjVuViewerInstance.loadDocumentByUrl("/DjVu3Spec.djvu");
-        //window.DjVuViewerInstance.loadDocumentByUrl("/DjVu3Spec_indirect/index.djvu");
+        //window.DjVuViewerInstance.loadDocumentByUrl("/DjVu3Spec_indirect/index.djvu", { viewMode: 'continuous' });
 
         //window.DjVuViewerInstance.loadDocumentByUrl("/czech_indirect/index.djvu", { pageRotation: 0, djvuOptions: {baseUrl: '/czech_indirect/'} });
         //window.DjVuViewerInstance.loadDocumentByUrl("/tmp/DjVu3Spec.djvu").then(() => window.DjVuViewerInstance.configure({pageRotation: 270}));

viewer/src/reducers/commonReducer.js

@@ -8,14 +8,13 @@ const initialState = Object.freeze({
     userScale: 1,
     pageRotation: 0,
     isLoading: false,
-    isTextMode: false,
+    viewMode: Constants.SINGLE_PAGE_MODE,
     pagesQuantity: null,
     isFullPageView: false,
     error: null,
     contents: null,
     isHelpWindowShown: false,
     isOptionsWindowOpened: false,
-    isContinuousScrollMode: false,
     isIndirect: false,
     isContentsOpened: false,
     options: { // all these options are saved in localStorage
@@ -56,14 +55,12 @@ export default (state = initialState, action) => {
         case ActionTypes.UPDATE_OPTIONS:
             return { ...state, options: { ...state.options, ...payload } };
 
-        case Constants.ENABLE_CONTINUOUS_SCROLL_MODE_ACTION:
-            return { ...state, isContinuousScrollMode: true, isTextMode: false };
-
-        case Constants.ENABLE_SINGLE_PAGE_MODE_ACTION:
-            return { ...state, isContinuousScrollMode: false, isTextMode: false };
-
-        case Constants.ENABLE_TEXT_MODE_ACTION:
-            return { ...state, isContinuousScrollMode: false, isTextMode: true, isLoading: false };
+        case ActionTypes.SET_VIEW_MODE:
+            return {
+                ...state,
+                viewMode: payload,
+                isLoading: payload === Constants.TEXT_MODE ? false : state.isLoading
+            };
 
         case Constants.SET_PAGE_ROTATION_ACTION:
             return {
@@ -96,7 +93,7 @@ export default (state = initialState, action) => {
                 ...getInitialStateWithOptions(state),
                 documentId: state.documentId + 1,
                 isLoading: true,
-                isContinuousScrollMode: state.options.preferContinuousScroll ? true : state.isContinuousScrollMode,
+                viewMode: state.options.preferContinuousScroll ? Constants.CONTINUOUS_SCROLL_MODE : initialState.viewMode,
                 pagesQuantity: action.pagesQuantity,
                 fileName: action.fileName,
                 isIndirect: action.isIndirect,
@@ -168,12 +165,9 @@ export const get = {
     isLoading: state => state.isLoading,
     isDocumentLoaded: state => !!state.pagesQuantity,
     viewMode: state => {
-        if (!state.isIndirect && state.isContinuousScrollMode) {
-            return Constants.CONTINUOUS_SCROLL_MODE;
-        }
-        if (state.isTextMode) {
-            return Constants.TEXT_MODE;
+        if (state.isIndirect && state.viewMode === Constants.CONTINUOUS_SCROLL_MODE) {
+            return Constants.SINGLE_PAGE_MODE;
         }
-        return Constants.SINGLE_PAGE_MODE;
+        return state.viewMode;
     }
 };

viewer/src/reducers/pageReducer.js

@@ -83,6 +83,12 @@ export default function pageReducer(state = initialState, action) {
                 currentPageNumber: action.pageNumber
             };
 
+        case ActionTypes.SET_VIEW_MODE:
+            if (payload === Constants.CONTINUOUS_SCROLL_MODE) {
+                return { ...state, ...singlePageInitialState };
+            }
+            break;
+
         case Constants.PAGE_TEXT_FETCHED_ACTION:
             return {
                 ...state,
@@ -95,10 +101,9 @@ export default function pageReducer(state = initialState, action) {
 
         case ActionTypes.SET_TEXT_PAGE_ERROR:
             return { ...state, textPageError: payload };
-
-        default:
-            return state;
     }
+
+    return state;
 }
 
 /** @returns {function} */

viewer/src/sagas/rootSaga.js

@@ -64,7 +64,10 @@ class RootSaga {
         const state = yield select();
         const viewMode = get.viewMode(state);
 
-        if (viewMode === Constants.CONTINUOUS_SCROLL_MODE) {
+        // when an outer config is provided, and the continuous scroll isn't default,
+        // the page reset can start this saga before the manager has been crated.
+        // Must be fixed at the architectural level, maybe the manager should be created lazily.
+        if (viewMode === Constants.CONTINUOUS_SCROLL_MODE && this.continuousScrollManager) {
             yield* this.continuousScrollManager.startDataFetching();
         } else {
             const pageNumber = get.currentPageNumber(state);
@@ -116,7 +119,8 @@ class RootSaga {
         yield put(Actions.pagesSizesAreGottenAction(pagesSizes));
     }
 
-    * configure({ pageNumber, pageRotation, pageScale, language, theme, uiOptions }) {
+    * configure({ pageNumber, pageRotation, viewMode, pageScale, language, theme, uiOptions }) {
+        if (viewMode) yield put({ type: ActionTypes.SET_VIEW_MODE, payload: viewMode, notSave: true });
         if (pageNumber) yield put(Actions.setNewPageNumberAction(pageNumber, true));
         if (pageRotation) yield put(Actions.setPageRotationAction(pageRotation));
         if (pageScale) yield put(Actions.setUserScaleAction(pageScale));
@@ -173,27 +177,32 @@ class RootSaga {
             isIndirect: !isBundled,
         });
 
+        yield* this.loadContents();
+
+        const state = yield select();
+        if (get.viewMode(state) === Constants.CONTINUOUS_SCROLL_MODE) {
+            yield* this.prepareForContinuousMode();
+        }
+
         // perhaps it's better to configure the viewer before DOCUMENT_CREATED_ACTION 
         // (since the promise of the viewer.loadDocument is resolved on this action)
         // But currently DOCUMENT_CREATED_ACTION reset the state of the viewer, so the configuration is done after it.
         // The optimal variant is to resolve the promise on another action, but I'm not sure is it needed to anybody at all.
+        // Also, configuration can start some heavy sagas (e.g. viewMode or pageNumber change) which cancel all worker tasks.
+        // Thus, it's done after all other tasks (including loading of the contents) are done.
         if (config) {
             yield* this.configure(config);
         }
 
-        const state = yield select();
-        this.continuousScrollManager = null; // we don't have to reset it, since the worker was recreated and all memory was release in any case
-        if (get.viewMode(state) === Constants.CONTINUOUS_SCROLL_MODE) {
-            yield* this.prepareForContinuousMode();
-        }
+        yield* this.resetCurrentPageNumber();
+    }
 
+    * loadContents() {
         const contents = yield this.djvuWorker.doc.getContents().run();
         yield put({
             type: Constants.CONTENTS_IS_GOTTEN_ACTION,
             contents: contents
         });
-
-        yield* this.resetCurrentPageNumber();
     }
 
     * resetCurrentPageNumber() {
@@ -269,6 +278,8 @@ class RootSaga {
         this.pageStorage.reset();
         this.pagesCache.resetPagesCache();
         this.djvuWorker.reset();
+        // we don't have to reset it, since the worker was recreated and all memory was released in any case
+        this.continuousScrollManager = null;
         this.isBundling = false;
         this.documentContructorData = null;
     }
@@ -277,23 +288,23 @@ class RootSaga {
         this.callbacks[action.callbackName] = action.callback;
     }
 
-    * switchToContinuousScrollMode() {
+    * switchToContinuousScrollMode(notSave = false) {
         this.djvuWorker.cancelAllTasks();
         if (!this.continuousScrollManager) {
             yield* this.prepareForContinuousMode();
         }
         this.pagesCache.resetPagesCache();
         yield* this.resetCurrentPageNumber();
-        yield put({ type: ActionTypes.UPDATE_OPTIONS, payload: { preferContinuousScroll: true } });
+        if (!notSave) yield put({ type: ActionTypes.UPDATE_OPTIONS, payload: { preferContinuousScroll: true } });
     }
 
-    * switchToSinglePageMode() {
+    * switchToSinglePageMode(notSave = false) {
         this.djvuWorker.cancelAllTasks();
         if (this.continuousScrollManager) {
             yield* this.continuousScrollManager.reset();
         }
         yield* this.resetCurrentPageNumber();
-        yield put({ type: ActionTypes.UPDATE_OPTIONS, payload: { preferContinuousScroll: false } });
+        if (!notSave) yield put({ type: ActionTypes.UPDATE_OPTIONS, payload: { preferContinuousScroll: false } });
     }
 
     * switchToTextMode() {
@@ -304,6 +315,23 @@ class RootSaga {
         yield* this.fetchPageTextIfRequired();
     }
 
+    * handleViewModeSwitch({ notSave = false } = {}) {
+        const isLoaded = yield select(get.isDocumentLoaded);
+        const viewMode = yield select(get.viewMode);
+        if (!isLoaded) return;
+
+        switch (viewMode) {
+            case Constants.CONTINUOUS_SCROLL_MODE:
+                return yield* this.switchToContinuousScrollMode(notSave);
+            case Constants.SINGLE_PAGE_MODE:
+                return yield* this.switchToSinglePageMode(notSave);
+            case Constants.TEXT_MODE:
+                return yield* this.switchToTextMode();
+            default:
+                throw new Error('Invalid view mode: ' + payload);
+        }
+    }
+
     * updateOptions(action) {
         if (action.notSave) return;
 
@@ -464,9 +492,7 @@ class RootSaga {
         yield takeLatest(ActionTypes.SAVE_DOCUMENT, this.withErrorHandler(this.saveDocument));
         yield takeLatest(Constants.CLOSE_DOCUMENT_ACTION, this.withErrorHandler(this.resetWorkerAndStorages));
         yield takeLatest(Constants.SET_API_CALLBACK_ACTION, this.withErrorHandler(this.setCallback));
-        yield takeLatest(Constants.ENABLE_CONTINUOUS_SCROLL_MODE_ACTION, this.withErrorHandler(this.switchToContinuousScrollMode));
-        yield takeLatest(Constants.ENABLE_SINGLE_PAGE_MODE_ACTION, this.withErrorHandler(this.switchToSinglePageMode));
-        yield takeLatest(Constants.ENABLE_TEXT_MODE_ACTION, this.withErrorHandler(this.switchToTextMode));
+        yield takeLatest(ActionTypes.SET_VIEW_MODE, this.withErrorHandler(this.handleViewModeSwitch));
         yield takeLatest(ActionTypes.UPDATE_OPTIONS, this.withErrorHandler(this.updateOptions));
         yield takeLatest(ActionTypes.CONFIGURE, this.withErrorHandler(this.configure));
         yield takeLatest(ActionTypes.LOAD_DOCUMENT_BY_URL, this.loadDocumentByUrl.bind(this));