setReadOnly causing page errors if I set header items

Bug Reports
1 
const textAction = {
          type: 'customElement',
          render: () => {
            const textBtn = document.createElement('img');
            textBtn.className = 'custom-icon';
            textBtn.src = LEFT_ROTATE_ICON;
            textBtn.style.width = '24px';
            textBtn.style.height = '24px';
            textBtn.style.cursor = 'pointer';
            textBtn.onclick = () => {
              // 
            };
            return textBtn;
          },
        };
        const items = header.getHeader('default').getItems();
        items.splice(8, 0, textAction);
        header.getHeader('default').update(items);

If I set headers like above when page inited, later setReadOnly(true) will cause page errors. This will blank the page. Please help find out.

2

Hey there,

I cannot reproduce your issue - which version of PDF.js Express are you using?

Are there any errors in the console? Is there any more code you have that may be relevant?

Thanks,
Logan

3

webviewer-ui.min.js:34 DOMException: Failed to execute ‘removeChild’ on ‘Node’: The node to be removed is not a child of this node.
at cl (/external/pdf-express/ui/webviewer-ui.min.js:34:86668)
at ps (/external/pdf-express/ui/webviewer-ui.min.js:34:99857)
at t.unstable_runWithPriority (/external/pdf-express/ui/webviewer-ui.min.js:42:3844)
at Uo (/external/pdf-express/ui/webviewer-ui.min.js:34:45023)
at ds (/external/pdf-express/ui/webviewer-ui.min.js:34:97717)
at Jl (/external/pdf-express/ui/webviewer-ui.min.js:34:93871)
at /external/pdf-express/ui/webviewer-ui.min.js:34:45314
at t.unstable_runWithPriority (/external/pdf-express/ui/webviewer-ui.min.js:42:3844)
at Uo (/external/pdf-express/ui/webviewer-ui.min.js:34:45023)
at qo (/external/pdf-express/ui/webviewer-ui.min.js:34:45259)
el @ webviewer-ui.min.js:34
n.callback @ webviewer-ui.min.js:34
di @ webviewer-ui.min.js:34
il @ webviewer-ui.min.js:34
ps @ webviewer-ui.min.js:34
t.unstable_runWithPriority @ webviewer-ui.min.js:42
Uo @ webviewer-ui.min.js:34
ds @ webviewer-ui.min.js:34
Jl @ webviewer-ui.min.js:34
(anonymous) @ webviewer-ui.min.js:34
t.unstable_runWithPriority @ webviewer-ui.min.js:42
Uo @ webviewer-ui.min.js:34
qo @ webviewer-ui.min.js:34
Zo @ webviewer-ui.min.js:34
es @ webviewer-ui.min.js:34
notify @ webviewer-ui.min.js:50
t.notifyNestedSubs @ webviewer-ui.min.js:50
t.handleChangeWrapper @ webviewer-ui.min.js:50
m @ webviewer-ui.min.js:6
(anonymous) @ webviewer-ui.min.js:50
dispatch @ webviewer-ui.min.js:6
(anonymous) @ webviewer-ui.min.js:50
(anonymous) @ webviewer-ui.min.js:50
(anonymous) @ webviewer-ui.min.js:50
fn @ webviewer-ui.min.js:50
(anonymous) @ webviewer-ui.min.js:50
(anonymous) @ webviewer-ui.min.js:50
(anonymous) @ webviewer-ui.min.js:221
(anonymous) @ CoreControls.js:484
f.trigger @ CoreControls.js:484
Q$ @ CoreControls.js:335
(anonymous) @ VM88582:1
Show 2 more frames
CoreControls.js:188 DOMException: Failed to execute ‘removeChild’ on ‘Node’: The node to be removed is not a child of this node.
at cl (/external/pdf-express/ui/webviewer-ui.min.js:34:86668)
at ps (/external/pdf-express/ui/webviewer-ui.min.js:34:99857)
at t.unstable_runWithPriority (/external/pdf-express/ui/webviewer-ui.min.js:42:3844)
at Uo (/external/pdf-express/ui/webviewer-ui.min.js:34:45023)
at ds /external/pdf-express/ui/webviewer-ui.min.js:34:97717)
at Jl (/external/pdf-express/ui/webviewer-ui.min.js:34:93871)
at /external/pdf-express/ui/webviewer-ui.min.js:34:45314
at t.unstable_runWithPriority (/external/pdf-express/ui/webviewer-ui.min.js:42:3844)
at Uo (/external/pdf-express/ui/webviewer-ui.min.js:34:45023)
at qo (/external/pdf-express/ui/webviewer-ui.min.js:34:45259)
da @ CoreControls.js:188
(anonymous) @ CoreControls.js:484
f.trigger @ CoreControls.js:484
Q$ @ CoreControls.js:335
(anonymous) @ VM88582:1
CoreControls.js:188 Uncaught Error: NotFoundError: Failed to execute ‘removeChild’ on ‘Node’: The node to be removed is not a child of this node.
at da (CoreControls.js:188)
at CoreControls.js:484
at Array.forEach ()
at ba.f.trigger (CoreControls.js:484)
at ba.Q$ (CoreControls.js:335)
at :1:12

errors after setReadOnly shown above, and version is 7.3.3.
Any ideas?

p.s. If I delete all customElement header items before setReadOnly(true), like:

instance.setHeaderItems(header => {
const items = header.getItems().slice(0, 7).concat(header.getItems().slice(10, 15));
header.update(items);
annotManager.setReadOnly(true);
})

then nothing exception happens.

Thanks~

4

Hey,

Can you send me all of the WebViewer code you have? Right now I only have a small snippet that doesn’t show the full context of your issue and its making it difficult to reproduce.

Also, are you using the legacy UI?

Here is the code I am using but cannot reproduce your issue:

  instance.setHeaderItems(header => {
    const textAction = {
      type: 'customElement',
      render: () => {
        const textBtn = document.createElement('img');
        // textBtn.className = 'custom-icon';
        // textBtn.src = LEFT_ROTATE_ICON;
        textBtn.style.width = '24px';
        textBtn.style.height = '24px';
        textBtn.style.cursor = 'pointer';
        textBtn.onclick = () => {
          // 
        };
        return textBtn;
      },
    };
    const items = header.getHeader('default').getItems();
    items.splice(8, 0, textAction);
    header.getHeader('default').update(items);
    instance.annotManager.setReadOnly(true);
  })

Logan