Which product are you using?
PDF.js Express Version
Detailed description of issue
Initially when I load my pdf, I am importing some annotation .I had also created a button on which click previous annotation are deleted and new xml is importing but here previous+new both annotation are showing.
Also,disabling element are also not working as expected
Expected behaviour
{Userspecific xml should load and when I tick the left checkbox It should disable that element.}
Does your issue happen with every document, or just one?
Every
Link to document
NA
UI:
Code snippet
//1)was cretaing user wise xml dropdown:suppose i ahd select 2/3 user,how to dynamically import
import React, { useRef, useEffect, useState } from "react";
import WebViewer from "@pdftron/pdfjs-express";
import "./App.css";
import axios from "axios";
// import { xmlxml } from "./xml";
import { user1, user2, user3 } from "./xml";
const AppT = () => {
const instanceRef = useRef();
const [selectedOptions, setSelectedOptions] = useState([]);
console.log(selectedOptions);
const options = [
{ value: "toolbarGroup-FillAndSign", label: "FillAndSign" },
{ value: "toolbarGroup-Measure", label: "Measure" },
{ value: "toolbarGroup-Shapes", label: "Shapes" },
{ value: "toolbarGroup-Annotate", label: "Annotate" },
];
const disableElements = () => {
instanceRef.current.UI.disableElements(selectedOptions);
};
const handleOptionToggle = (value) => {
if (selectedOptions.includes(value)) {
setSelectedOptions(selectedOptions.filter((option) => option !== value));
} else {
setSelectedOptions([...selectedOptions, value]);
}
disableElements();
};
const viewer = useRef(null);
const instance = useRef();
useEffect(() => {
if (typeof window !== "undefined") {
WebViewer(
{
path: "/webviewer/lib",
initialDoc: "/files/A.pdf",
enableMeasurement: true,
},
viewer.current
).then((instance) => {
const { Core, UI } = instance;
const {
documentViewer,
annotationManager,
Tools,
Annotations,
PDFNet,
} = Core;
instanceRef.current = instance;
instance.Core.annotationManager.setCurrentUser("nikhil");
// onclick events like loading/importing xml
const user2button = document.getElementById("user2");
user2button.addEventListener("click", () => {
const annotationsList = annotationManager.getAnnotationsList();
// Delete existing annotations
annotationManager.deleteAnnotations(annotationsList);
// Load the document
instance.UI.loadDocument("/files/A.pdf");
// Wait for annotations to be loaded
documentViewer.addEventListener("documentLoaded", () => {
// Import user2 annotations
instance.Core.annotationManager.importAnnotations(user2);
});
});
// onclick events like loading/importing xml ends
documentViewer.addEventListener("documentLoaded", () => {
instance.Core.annotationManager.importAnnotations(user1);
});
});
}
}, []);
useEffect(() => {
if (typeof window !== "undefined") {
if (instance.current) {
instance.current.loadDocument("/public/files/A.pdf");
}
}
}, []);
return (
<div className="App">
<div style={{ display: "flex", width: "100%", flexDirection: "row" }}>
<div style={{ width: "20%", padding: "10px" }}>
<button id="user2">User2XML</button>
{options.map((option) => (
<label key={option.value} style={{ display: "block" }}>
<input
type="checkbox"
value={option.value}
checked={selectedOptions.includes(option.value)}
onChange={() => handleOptionToggle(option.value)}
/>
{option.label}
</label>
))}
</div>
<div style={{ width: "80%" }}>
<div
className="webviewer"
style={{ height: "100vh", width: "210vh" }}
ref={viewer}
></div>
</div>
</div>
<button id="click">Save</button>
</div>
);
};
export default AppT;
To make this code runnable,just add pdf in /public/folder by name as in code and below i had provided user1 XML and uder2 XML but you can generate your xml too.
user1=><?xml version="1.0" encoding="UTF-8" ?><xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve"><pdf-info xmlns="http://www.pdftron.com/pdfinfo" version="2" import-version="4" /><fields /><annots><text page="0" rect="483,867.480,514,898.480" color="#E44234" flags="print,nozoom,norotate" name="e5bbce62-27f6-38fa-56fb-9ebd791e3ccd" title="user1" subject="Comment" date="D:20230603162609+05'30'" creationdate="D:20230603162600+05'30'" icon="Comment" statemodel="Review"><contents>user1 </contents><contents-richtext><body><p><span>user1 </span></p></body></contents-richtext></text><text page="0" rect="751.710,986.530,782.710,1017.530" color="#E44234" flags="print,nozoom,norotate" name="ca7ad519-71f5-3915-b8c9-4b4bb686a4b0" title="user1" subject="Comment" date="D:20230603162701+05'30'" creationdate="D:20230603162653+05'30'" icon="Comment" statemodel="Review"><contents>user1 2.0 </contents><contents-richtext><body><p><span>user1 2.0 </span></p></body></contents-richtext></text></annots><pages><defmtx matrix="1,0,0,-1,0,1191" /><pgmtx matrix="1,0,0,-1,0,1684" page="4" /></pages></xfdf>;
user2=> <?xml version="1.0" encoding="UTF-8" ?><xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve"><pdf-info xmlns="http://www.pdftron.com/pdfinfo" version="2" import-version="4" /><fields /><annots><text page="0" rect="1331.660,1017.140,1362.660,1048.140" color="#E44234" flags="print,nozoom,norotate" name="f9473cbb-4098-0ac4-7626-270c515b2390" title="user2" subject="Comment" date="D:20230603163401+05'30'" creationdate="D:20230603163356+05'30'" icon="Comment" statemodel="Review"><contents>user2.0 </contents><contents-richtext><body><p><span>user2.0 </span></p></body></contents-richtext></text><text page="0" rect="1209.200,818.160,1240.200,849.160" color="#E44234" flags="print,nozoom,norotate" name="2a97c6f9-6503-325d-9fd4-778728320e7f" title="user2" subject="Comment" date="D:20230603163443+05'30'" creationdate="D:20230603163417+05'30'" icon="Comment" statemodel="Review"><contents>user2 2.0 </contents><contents-richtext><body><p><span>user2 2.0 </span></p></body></contents-richtext></text></annots><pages><defmtx matrix="1,0,0,-1,0,1191" /><pgmtx matrix="1,0,0,-1,0,1684" page="4" /></pages></xfdf>