1// eslint-disable-next-line no-undef
2const WebViewerConstructor = isWebComponent() ? WebViewer.WebComponent : WebViewer;
3
4WebViewerConstructor(
5 {
6 path: '../../../lib',
7 fullAPI: true,
8 initialDoc: '../../../samples/files/op-blend-test.pdf',
9 enableFilePicker: true,
10 },
11 document.getElementById('viewer')
12).then(instance => {
13 samplesSetup(instance);
14 const { documentViewer } = instance.Core;
15 const { openElements, closeElements } = instance.UI;
16 const colorsElement = document.getElementById('colors');
17
18 let colorSeparationLoaded = false;
19 documentViewer.addEventListener('documentLoaded', () => {
20 colorsElement.innerHTML = '';
21
22 const doc = documentViewer.getDocument();
23 colorSeparationLoaded = false;
24 // Enable color separation
25 doc.enableColorSeparations({ checkIfBaseColorsUsed: false });
26 // wait till the individual "colors" in the top left corner load first
27 openElements(['loadingModal']);
28
29 // Listen to each color in a PDF document
30 doc.addEventListener('colorSeparationAdded', color => {
31 colorSeparationLoaded = true;
32 const input = document.createElement('input');
33 input.id = color.name;
34 input.type = 'checkbox';
35 input.checked = color.enabled;
36 input.onchange = e => {
37 // show 'loadingModal', hide it in the 'pageComplete' event
38 openElements(['loadingModal']);
39 // Show/hide a color
40 doc.enableSeparation(color.name, e.target.checked);
41 // Redraw the canvas
42 documentViewer.refreshAll();
43 documentViewer.updateView();
44 };
45
46 const label = document.createElement('label');
47 label.id = `${color.name} label`;
48 label.htmlFor = color.name;
49 label.style.color = `rgb(${color.rgb.join(',')})`;
50 label.innerHTML = color.name;
51
52 const lineBreak = document.createElement('br');
53
54 colorsElement.appendChild(input);
55 colorsElement.appendChild(label);
56 colorsElement.appendChild(lineBreak);
57 closeElements(['loadingModal']);
58 });
59 });
60
61 documentViewer.addEventListener('mouseMove', nativeE => {
62 const mouseLocation = documentViewer.getToolMode().getMouseLocation(nativeE);
63 const displayMode = documentViewer.getDisplayModeManager().getDisplayMode();
64
65 const pageNumber = displayMode.getSelectedPages(mouseLocation, mouseLocation).first;
66 if (pageNumber !== null) {
67 const pageCoordinate = displayMode.windowToPage(mouseLocation, pageNumber);
68 if (pageCoordinate) {
69 const pageNumber = pageCoordinate.pageNumber;
70 const x = pageCoordinate.x;
71 const y = pageCoordinate.y;
72 const results = documentViewer.getColorSeparationsAtPoint(pageNumber, x, y);
73 for (let i = 0; i < results.length; ++i) {
74 // Update the text in color panel
75 const colorLabelElement = document.getElementById(`${results[i].name} label`);
76 if (colorLabelElement) {
77 colorLabelElement.innerHTML = `${results[i].name} ${results[i].value}%`;
78 }
79 }
80 }
81 }
82 });
83
84 documentViewer.addEventListener('pageComplete', () => {
85 // wait for the first 'colorSeparationAdded' event before closing the loading modal
86 // we don't want to hide the 'loadingModal' for the first 'pageComplete' event for the initial load
87 if (colorSeparationLoaded) {
88 closeElements(['loadingModal']);
89 }
90 });
91});