shivaprsd / doq Goto Github PK

The text looks garbled, but it is actually random letters missing. They are still present in the textLayer, so I strongly suspect they are somehow being rendered in the background color instead of the foreground.

Difficult to debug since I can't reliably reproduce the issue. It sometimes seem to happen after a quick window resize. This could be possibly related to the canvasData object not getting cleared and churning outdated data (as happened in #2).

PDF.js renders thumbnails as scaled down images of the corresponding page canvases. getReaderCompOp() changes the composite operation of that render when images are turned on.

An NPM package would be useful to devs wishing to integrate doq in their projects.

I am not familiar with the Node.js platform, so help in this direction is most welcome.

Link to PDF

Does not work properly at all zoom levels.

Correct:

Wrong:

It is likely related to createMask() since it happens only for dark backgrounds.

Would be a nice feature to have. Safari reader view already has it.

Need to decide whether this should apply to only the color scheme and tone, or all prefs. Also need to monitor for change in the mode by the user and update the reader accordingly.

Issue

When Reader mode is on, printing the document halts abruptly and immediately, without giving any error message.

Reason

Upon printing, PDF.js redraws the pages on a bigger offscreen canvas. Since saveCanvas() does not save imageData of unattached canvases, the old canvas data is used by getCanvasColor(), causing an invalid argument to be passed to the Color constructor.

Currently they are left unhandled, because I have not figured out exactly how to handle them.

Gradient

Can have any number of color stops, some of which can be closely spaced. It is not clear how all of them should map to the given color scheme.

Note that the CanvasGradient object is opaque when it reaches getReaderStyle(). The colors are available only in its addColorStop() method. So it needs a different treatment altogether.

Pattern

Is an image, hence should be governed by the image-mode settings. This means we need to modify the composite operation during a fill/stroke operation. Current wrapping paradigm allows modifying only one property at a time; this would need to be changed.

I am also not sure whether they are common enough in PDFs to warrant the added complexity. I plan to evaluate the requirement as I go along reading PDFs with doq.

bug: doq stopped working with previously corrupted settings

Suddenly the doq stopped working for me in Firefox. However, it still worked on Chromium.

After some debugging, I've found that the cause was a previously stored setting scheme that not matched the colorSchemes anymore.

Steps to Reproduce

I've compared the following pages:

1. Example viewer linked from the doqment repository front page.
2. Showing the same PDF of the example viewer in another Firefox tab using plain pdf.js without doqment extension installed.

Debugger Output

viewer.html
Uncaught (in promise) TypeError: scheme is undefined
    updateColorScheme https://shivaprsd.github.io/doq-demo/addon/doq.js:283
    updateReaderState https://shivaprsd.github.io/doq-demo/addon/doq.js:277
    load https://shivaprsd.github.io/doq-demo/addon/doq.js:83
    doqInit https://shivaprsd.github.io/doq-demo/addon/doq.js:16
doq.js:283:9
PDF 110dd61fd57444010b1ab5ff38782f0f [1.4 pdfeTeX-1.21a / TeX] (PDF.js: 2.13.216) app.js:1530:12

Call Stack

  updateColorScheme(index) {                   // index == 3
    const scheme = this.colorSchemes[index];   // this.colorSchemes == [{"Safari"}, {"Solarized"}] == 2 items
    if (!scheme.tones || !scheme.tones.length) // scheme === undefined --> Exception above
      return;
    ...
  },

Property Values

I've got these value inspecting variables inside the DevTools.

this.preferences

{
    flags: {
      ​​imagesOn: true,
      ​​shapesOn: true
    },
    ​​scheme: 3,  // <- does'nt matches this.colorSchemes
    ​tone: "2",
    theme: "dark"
}

localStorage.getItem('doq.preferences.dark')

{"scheme":3,"tone":"2","flags":{"shapesOn":true,"imagesOn":true}}

this.colorSchemes

Array [ {…}, {…} ]
    0: Object { name: "Safari", tones: (4) […], colors: [] }
        colors: Array []
        name: "Safari"
        tones: Array(4) [ {…}, {…}, {…}, … ]
            ​​0: Object { name: "White", background: "#FFFFFF", foreground: "#1B1B1B", … }
            ​​​1: Object { name: "Sepia", background: "#F8F1E3", foreground: "#4F321C", … }
            ​​​2: Object { name: "Gray", background: "#4A4A4D", foreground: "#D7D7D8", … }
            ​​​3: Object { name: "Night", background: "#121212", foreground: "#B0B0B0", … }
            ​​​length: 4
    ​​​1: Object { name: "Solarized", tones: (2) […], accents: (8) […], … }
        accents: Array(8) [ "#B58900", "#CB4B16", "#DC322F", … ]
        colors: Array(8) [ {…}, {…}, {…}, … ]
        name: "Solarized"
        tones: Array [ {…}, {…} ]
            ​​​0: Object { name: "Light", background: "#FDF6E3", foreground: "#657B83", … }
            ​​​1: Object { name: "Dark", background: "#002B36", foreground: "#839496", … }
            ​​​length: 2
    ​​​length: 2

Patch to fix the issue

This makes the code more reliable on bad/corrupted settings:

  updateColorScheme(index) {
    const scheme = this.colorSchemes[index];
--    if (!scheme.tones || !scheme.tones.length)
++    if (!scheme || !scheme.tones || !scheme.tones.length)
      return;
    ...
  },