Hi,
I am unable to set color to multiple tools from setStyle api.
Below is the code,make it runnable by giving path to initialDoc from your local system.
//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";
const AppT = () => {
const [rgbArray, setRgbArray] = useState([0, 0, 0]);
const [isInitialized, setisInitialized] = useState();
const instanceRef = useRef(null);
const [selectedOptions, setSelectedOptions] = useState([]);
const [selectedColor, setSelectedColor] = 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" },
{ value: "toolbarGroup-Insert", label: "Insert" },
];
const allDataElement = [
"toolbarGroup-FillAndSign",
"toolbarGroup-Measure",
"toolbarGroup-Shapes",
"toolbarGroup-Annotate",
"toolbarGroup-Insert",
];
const handleColorChange = (event) => {
const color = event.target.value;
setSelectedColor(color);
// console.log(getRGBValue(color), color);
const newRgbArray = getRGBValue(color);
console.log(newRgbArray);
setRgbArray(newRgbArray);
};
const getRGBValue = (hex) => {
hex = hex.replace("#", "");
const r = parseInt(hex.substring(0, 2), 16);
const g = parseInt(hex.substring(2, 4), 16);
const b = parseInt(hex.substring(4, 6), 16);
// Return the RGB value array
return [r, g, b];
};
//disable/enable elements logic
const disableElements = () => {
instanceRef.current.UI.disableElements(selectedOptions);
let resultArray = allDataElement.filter(
(element) => !selectedOptions.includes(element)
);
instanceRef.current.UI.enableElements(resultArray);
};
// updating aarray of elements on checkbox
const handleOptionToggle = (value) => {
if (selectedOptions.includes(value)) {
setSelectedOptions(selectedOptions.filter((option) => option !== value));
} else {
setSelectedOptions([...selectedOptions, value]);
}
};
const viewer = useRef(null);
useEffect(() => {
WebViewer(
{
path: "/webviewer/lib",
initialDoc: "/files/A.pdf",
enableMeasurement: true,
},
viewer.current
).then(async (instance) => {
const { Core, UI } = instance;
const { documentViewer, annotationManager, Tools, Annotations, PDFNet } =
Core;
documentViewer.addEventListener("documentLoaded", () => {
instanceRef.current = instance;
instance.Core.annotationManager.setCurrentUser("user1");
setisInitialized(true);
});
});
// Cleanup function
return () => {
setisInitialized(false);
};
}, []);
//2nd
useEffect(() => {
if (instanceRef.current) {
const { Core, UI } = instanceRef.current;
const { documentViewer, annotationManager, Tools, Annotations, PDFNet } =
Core;
documentViewer.getTool("AnnotationCreateFreeText4").setStyles({
StrokeColor: new Annotations.Color(
rgbArray[0],
rgbArray[1],
rgbArray[2]
),
FillColor: new Annotations.Color(rgbArray[0], rgbArray[1], rgbArray[2]),
});
}
}, [isInitialized, rgbArray]);
useEffect(() => {
if (instanceRef.current) disableElements();
}, [selectedOptions]);
return (
<div className="App">
<div style={{ display: "flex", width: "100%", flexDirection: "row" }}>
<div style={{ width: "20%", padding: "10px" }}>
import User2XML
<button id="user2">User2XML</button>
<hr></hr>
import User1XML
<button id="user1">User1XML</button>
<hr></hr>
<p>Disable Elements</p>
{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>
))}
<p>Select Color:</p>
<input
type="color"
value={selectedColor}
onChange={handleColorChange}
/>
<br></br>
<button id="getannonation">ConsoleXML</button>;
</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;
documentViewer.getTool("AnnotationCreateFreeText4").setStyles({ StrokeColor: new Annotations.Color( rgbArray[0], rgbArray[1], rgbArray[2] ), FillColor: new Annotations.Color(rgbArray[0], rgbArray[1], rgbArray[2]), });
Below tools i want to include in my getTool api to use setStyles
const t = {
ARROW: "AnnotationCreateArrow",
CALLOUT: "AnnotationCreateCallout",
ELLIPSE: "AnnotationCreateEllipse",
FREEHAND: "AnnotationCreateFreeHand",
FREEHAND_HIGHLIGHT: "AnnotationCreateFreeHandHighlight",
FREETEXT: "AnnotationCreateFreeText",
DATE_FREETEXT: "AnnotationCreateDateFreeText",
LINE: "AnnotationCreateLine",
POLYGON: "AnnotationCreatePolygon",
POLYGON_CLOUD: "AnnotationCreatePolygonCloud",
POLYLINE: "AnnotationCreatePolyline",
ARC: "AnnotationCreateArc",
RECTANGLE: "AnnotationCreateRectangle",
DISTANCE_MEASUREMENT: "AnnotationCreateDistanceMeasurement",
PERIMETER_MEASUREMENT: "AnnotationCreatePerimeterMeasurement",
ARC_MEASUREMENT: "AnnotationCreateArcMeasurement",
AREA_MEASUREMENT: "AnnotationCreateAreaMeasurement",
RECTANGULAR_AREA_MEASUREMENT: "AnnotationCreateRectangularAreaMeasurement",
CLOUDY_RECTANGULAR_AREA_MEASUREMENT:
"AnnotationCreateCloudyRectangularAreaMeasurement",
ELLIPSE_MEASUREMENT: "AnnotationCreateEllipseMeasurement",
COUNT_MEASUREMENT: "AnnotationCreateCountMeasurement",
SIGNATURE: "AnnotationCreateSignature",
STAMP: "AnnotationCreateStamp",
FILEATTACHMENT: "AnnotationCreateFileAttachment",
RUBBER_STAMP: "AnnotationCreateRubberStamp",
FORM_FILL_CROSS: "AnnotationCreateCrossStamp",
FORM_FILL_CHECKMARK: "AnnotationCreateCheckStamp",
FORM_FILL_DOT: "AnnotationCreateDotStamp",
STICKY: "AnnotationCreateSticky",
HIGHLIGHT: "AnnotationCreateTextHighlight",
SQUIGGLY: "AnnotationCreateTextSquiggly",
STRIKEOUT: "AnnotationCreateTextStrikeout",
UNDERLINE: "AnnotationCreateTextUnderline",
REDACTION: "AnnotationCreateRedaction",
TEXT_SELECT: "TextSelect",
EDIT: "AnnotationEdit",
PAN: "Pan",
CONTENT_EDIT: "ContentEditTool",
CROP: "CropPage",
MARQUEE: "MarqueeZoomTool",
ERASER: "AnnotationEraserTool",
TEXT_FORM_FIELD: "TextFormFieldCreateTool",
SIG_FORM_FIELD: "SignatureFormFieldCreateTool",
CHECK_BOX_FIELD: "CheckBoxFormFieldCreateTool",
RADIO_FORM_FIELD: "RadioButtonFormFieldCreateTool",
LIST_BOX_FIELD: "ListBoxFormFieldCreateTool",
COMBO_BOX_FIELD: "ComboBoxFormFieldCreateTool",
CHANGEVIEW: "AnnotationCreateChangeViewTool",
FREEHAND2: "AnnotationCreateFreeHand2",
FREEHAND3: "AnnotationCreateFreeHand3",
FREEHAND4: "AnnotationCreateFreeHand4",
FREEHAND_HIGHLIGHT2: "AnnotationCreateFreeHandHighlight2",
FREEHAND_HIGHLIGHT3: "AnnotationCreateFreeHandHighlight3",
FREEHAND_HIGHLIGHT4: "AnnotationCreateFreeHandHighlight4",
HIGHLIGHT2: "AnnotationCreateTextHighlight2",
HIGHLIGHT3: "AnnotationCreateTextHighlight3",
HIGHLIGHT4: "AnnotationCreateTextHighlight4",
DATEFREETEXT2: "AnnotationCreateDateFreeText2",
DATEFREETEXT3: "AnnotationCreateDateFreeText3",
DATEFREETEXT4: "AnnotationCreateDateFreeText4",
FREETEXT2: "AnnotationCreateFreeText2",
FREETEXT3: "AnnotationCreateFreeText3",
FREETEXT4: "AnnotationCreateFreeText4",
CALLOUT2: "AnnotationCreateCallout2",
CALLOUT3: "AnnotationCreateCallout3",
CALLOUT4: "AnnotationCreateCallout4",
STICKY2: "AnnotationCreateSticky2",
STICKY3: "AnnotationCreateSticky3",
STICKY4: "AnnotationCreateSticky4",
UNDERLINE2: "AnnotationCreateTextUnderline2",
UNDERLINE3: "AnnotationCreateTextUnderline3",
UNDERLINE4: "AnnotationCreateTextUnderline4",
STRIKEOUT2: "AnnotationCreateTextStrikeout2",
STRIKEOUT3: "AnnotationCreateTextStrikeout3",
STRIKEOUT4: "AnnotationCreateTextStrikeout4",
SQUIGGLY2: "AnnotationCreateTextSquiggly2",
SQUIGGLY3: "AnnotationCreateTextSquiggly3",
SQUIGGLY4: "AnnotationCreateTextSquiggly4",
REDACTION2: "AnnotationCreateRedaction2",
REDACTION3: "AnnotationCreateRedaction3",
REDACTION4: "AnnotationCreateRedaction4",
RECTANGLE2: "AnnotationCreateRectangle2",
RECTANGLE3: "AnnotationCreateRectangle3",
RECTANGLE4: "AnnotationCreateRectangle4",
ELLIPSE2: "AnnotationCreateEllipse2",
ELLIPSE3: "AnnotationCreateEllipse3",
ELLIPSE4: "AnnotationCreateEllipse4",
POLYGON2: "AnnotationCreatePolygon2",
POLYGON3: "AnnotationCreatePolygon3",
POLYGON4: "AnnotationCreatePolygon4",
POLYGON_CLOUD2: "AnnotationCreatePolygonCloud2",
POLYGON_CLOUD3: "AnnotationCreatePolygonCloud3",
POLYGON_CLOUD4: "AnnotationCreatePolygonCloud4",
LINE2: "AnnotationCreateLine2",
LINE3: "AnnotationCreateLine3",
LINE4: "AnnotationCreateLine4",
POLYLINE2: "AnnotationCreatePolyline2",
POLYLINE3: "AnnotationCreatePolyline3",
POLYLINE4: "AnnotationCreatePolyline4",
ARC2: "AnnotationCreateArc2",
ARC3: "AnnotationCreateArc3",
ARC4: "AnnotationCreateArc4",
ARROW2: "AnnotationCreateArrow2",
ARROW3: "AnnotationCreateArrow3",
ARROW4: "AnnotationCreateArrow4",
COUNT_MEASUREMENT2: "AnnotationCreateCountMeasurement2",
COUNT_MEASUREMENT3: "AnnotationCreateCountMeasurement3",
COUNT_MEASUREMENT4: "AnnotationCreateCountMeasurement4",
DISTANCE_MEASUREMENT2: "AnnotationCreateDistanceMeasurement2",
DISTANCE_MEASUREMENT3: "AnnotationCreateDistanceMeasurement3",
DISTANCE_MEASUREMENT4: "AnnotationCreateDistanceMeasurement4",
PERIMETER_MEASUREMENT2: "AnnotationCreatePerimeterMeasurement2",
PERIMETER_MEASUREMENT3: "AnnotationCreatePerimeterMeasurement3",
PERIMETER_MEASUREMENT4: "AnnotationCreatePerimeterMeasurement4",
ARC_MEASUREMENT2: "AnnotationCreateArcMeasurement2",
ARC_MEASUREMENT3: "AnnotationCreateArcMeasurement3",
ARC_MEASUREMENT4: "AnnotationCreateArcMeasurement4",
AREA_MEASUREMENT2: "AnnotationCreateAreaMeasurement2",
AREA_MEASUREMENT3: "AnnotationCreateAreaMeasurement3",
AREA_MEASUREMENT4: "AnnotationCreateAreaMeasurement4",
ELLIPSE_MEASUREMENT2: "AnnotationCreateEllipseMeasurement2",
ELLIPSE_MEASUREMENT3: "AnnotationCreateEllipseMeasurement3",
ELLIPSE_MEASUREMENT4: "AnnotationCreateEllipseMeasurement4",
RECTANGULAR_AREA_MEASUREMENT2: "AnnotationCreateRectangularAreaMeasurement2",
RECTANGULAR_AREA_MEASUREMENT3: "AnnotationCreateRectangularAreaMeasurement3",
RECTANGULAR_AREA_MEASUREMENT4: "AnnotationCreateRectangularAreaMeasurement4",
TEXT_FORM_FIELD2: "TextFormFieldCreateTool2",
TEXT_FORM_FIELD3: "TextFormFieldCreateTool3",
TEXT_FORM_FIELD4: "TextFormFieldCreateTool4",
SIG_FORM_FIELD2: "SignatureFormFieldCreateTool2",
SIG_FORM_FIELD3: "SignatureFormFieldCreateTool3",
SIG_FORM_FIELD4: "SignatureFormFieldCreateTool4",
LIST_BOX_FIELD2: "ListBoxFormFieldCreateTool2",
LIST_BOX_FIELD3: "ListBoxFormFieldCreateTool3",
LIST_BOX_FIELD4: "ListBoxFormFieldCreateTool4",
COMBO_BOX_FIELD2: "ComboBoxFormFieldCreateTool2",
COMBO_BOX_FIELD3: "ComboBoxFormFieldCreateTool3",
COMBO_BOX_FIELD4: "ComboBoxFormFieldCreateTool4",
CLOUDY_RECTANGULAR_AREA_MEASUREMENT2:
"AnnotationCreateCloudyRectangularAreaMeasurement2",
CLOUDY_RECTANGULAR_AREA_MEASUREMENT3:
"AnnotationCreateCloudyRectangularAreaMeasurement3",
CLOUDY_RECTANGULAR_AREA_MEASUREMENT4:
"AnnotationCreateCloudyRectangularAreaMeasurement4",
CHANGEVIEW2: "AnnotationCreateChangeViewTool2",
CHANGEVIEW3: "AnnotationCreateChangeViewTool3",
CHANGEVIEW4: "AnnotationCreateChangeViewTool4",
};