Confusion around editing redactions

WebViewer
1

Hi,

I’m trying to use the redaction API in the webviewer but i’m having some confusion.

In the docs, set’s api is defined as follows:

set(config: { redactions: Redaction[] }).

However, when I go to run this function I get these errors:

InvalidArgumentError: Unrecognized key(s) in object: 'oid'
    set mupdf.js:1
    Blah Blah.tsx:168
    React 7

There’s this line in the Redaction documentation:

You need to set oid or name and pageIndex as the unique key. Then the property will be updated.

Which implies I can remove oid? Not sure if this is the correct interpretation or not.

But the typescript for set is defined as follows:

    set(config: {
      redactions: {
        oid: number;
        pageIndex: number;
        name: string;
        rect?: TRect;
        opacity?: number;
        author?: string;
        canBePrinted?: boolean;
        locked?: boolean;
      }[];
    }): Promise<undefined>;

So oid, pageIndex and name must be defined on the object. I can’t find any more information on ‘setting the unique key’.

I’m assuming a redaction must be exist for me to set it after right?

Just in case I’m running into an xy problem, I’ve got a react application where I’m trying to set up the webviewer to save redactions to a server and load them back when the document is loaded again.

Ideally, I would like some sort of 2 way sync between webviewer’s internal state and the server’s state.

Where the code would look something like this

// initMuPDFWebViewer is loaded into react state, on page load in a useEffect

const serverState = bunchOfRedactions // this is a prop containing the redactions from the server
const updateServerState = (redactions) => {
// upload changes to the server
}

useEffect(() => {
    // This should listen to mupdf's internal state and update the server's state accordingly
    mupdf.addEventListener(
        mupdf.refs.event.type.REDACTION_DO_STUFF,
        updateServerState
    )
    // When this event listener gets called, the server state should be updated,
    // In turn the 'serverState' should be updated and the useEffect below should be called

    return () => {
        //clean up event listener
    }
}, [deps])

useEffect(() => {
    // This should listen to any changes to serverState and update mupdf's interal state accordingly
    if (isFirstLoad) {
      mupdf.redaction.add({ redactions: serverState });
      setIsFirstLoad(false);
    } else {
      mupdf.redaction.set({ redactions: redactions });
    }
    return () => {
        // clean up mupdf's internal state
    }
}, [serverState])

I’d appreciate any help with this.

Thanks

2

Hi @39rc ,

Correct - you would need to add an annotation before setting it ( I think setting is like updating something which is already there really ).

The documentation is a little incorrect here and needs to be updated. The oid and name parameters are in fact optional! So, for example, if you do this:



mupdf.redaction.add({

redactions: [
                {
                    pageIndex: 0,
                    rect: { left: 100, top: 100, right: 200, bottom: 200 },
                },
            ],
}).then(

function successCallbackAdd(data) {
    console.error(`Success adding redaction: ${data}`);
    console.log(data.redactions[0].oid);
    console.log(data.redactions[0].name);
            },

function failureCallbackAdd(error) {
    console.error(`Error adding redaction: ${error}`);
            }
);

You will see it auto-assigns an oid and name. The oidassignation seems to starts at -1 and decrement.

An OID is not guaranteed to remain unchanged.
In the WebViewer, OIDs are always auto-numbered (sequentially assigned).
The reason it exists as a parameter is to allow an redaction retrieved via redaction.get() to be added directly using redaction.add().

Apologies as the documentation needs to be updated here as really there is no point in setting the oid when adding an redaction/annotation. The parameter exists as it conforms to the Redaction object, but it shouldn’t be used when adding.

You can set the name of the redaction if you wish, but just ensure that it is unique. After this you should be able to use set , apply, remove the redaction as required.

I think your logic for managing and syncing redactions looks sound - I would recommend maybe just sticking to name& not oid , just because as far as I understand it the oidcan change ( this might depend on the number PDF page redactions )

1 Like