ViewerSnapToNearestTest

1(() => {
2  let snapMode;
3
4  const getMouseLocation = e => {
5    const scrollElement = instance.Core.documentViewer.getScrollViewElement();
6    const scrollLeft = scrollElement.scrollLeft || 0;
7    const scrollTop = scrollElement.scrollTop || 0;
8
9    return {
10      x: e.pageX + scrollLeft,
11      y: e.pageY + scrollTop,
12    };
13  };
14
15  const mouseToPagePoint = e => {
16    const displayMode = instance.Core.documentViewer.getDisplayModeManager().getDisplayMode();
17    const windowPoint = getMouseLocation(e);
18
19    const page = displayMode.getSelectedPages(windowPoint, windowPoint);
20    const pageNumber = page.first !== null ? page.first : instance.Core.documentViewer.getCurrentPage();
21
22    return {
23      point: displayMode.windowToPage(windowPoint, pageNumber),
24      pageNumber,
25    };
26  };
27
28  const createSnapModesPanel = () => {
29    const snapModesPanel = {
30      tab: {
31        dataElement: 'snapModesPanelTab',
32        title: 'snapModesPanelTab',
33        img:
34          '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><defs><path id="a" d="M0 0h24v24H0V0z"/></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"/></clipPath><path clip-path="url(#b)" d="M19.5 9.5c-1.03 0-1.9.62-2.29 1.5h-2.92c-.39-.88-1.26-1.5-2.29-1.5s-1.9.62-2.29 1.5H6.79c-.39-.88-1.26-1.5-2.29-1.5C3.12 9.5 2 10.62 2 12s1.12 2.5 2.5 2.5c1.03 0 1.9-.62 2.29-1.5h2.92c.39.88 1.26 1.5 2.29 1.5s1.9-.62 2.29-1.5h2.92c.39.88 1.26 1.5 2.29 1.5 1.38 0 2.5-1.12 2.5-2.5s-1.12-2.5-2.5-2.5z"/></svg>',
35      },
36      panel: {
37        dataElement: 'snapModesPanel',
38        render: () => {
39          const { DEFAULT, POINT_ON_LINE, LINE_MID_POINT, LINE_INTERSECTION, PATH_ENDPOINT } = instance.Core.documentViewer.SnapMode;
40
41          const buttonContainer = document.createElement('div');
42          const map = {
43            Default: DEFAULT,
44            'Point On Line': POINT_ON_LINE,
45            'Line Midpoint': LINE_MID_POINT,
46            'Line Intersection': LINE_INTERSECTION,
47            'Path Endpoint': PATH_ENDPOINT,
48          };
49          Object.keys(map).forEach(key => {
50            const div = document.createElement('div');
51            div.style.margin = '0px 0px 12px 12px';
52
53            const radioBtn = document.createElement('input');
54            radioBtn.type = 'radio';
55            radioBtn.style.marginRight = '10px';
56            radioBtn.name = 'snapMode';
57            radioBtn.value = map[key];
58            radioBtn.id = key;
59            radioBtn.addEventListener('change', e => {
60              snapMode = parseInt(e.target.value, 10);
61            });
62
63            const label = document.createElement('label');
64            label.innerHTML = key;
65            label.for = key;
66
67            div.appendChild(radioBtn);
68            div.appendChild(label);
69            buttonContainer.appendChild(div);
70          });
71
72          // make the default radio button checked
73          buttonContainer.querySelector('input[id="Default"]').checked = true;
74
75          return buttonContainer;
76        },
77      },
78    };
79
80    instance.UI.setCustomPanel(snapModesPanel);
81
82    instance.UI.openElements([snapModesPanel.panel.dataElement]);
83  };
84
85  createSnapModesPanel();
86
87  instance.Core.documentViewer.addEventListener('pageComplete', () => {
88    const lineAnnot = new Core.Annotations.LineAnnotation();
89    lineAnnot.setStartPoint(0, 0);
90    lineAnnot.setEndPoint(0, 0);
91    lineAnnot.PageNumber = 1;
92
93    const annotationManager = instance.Core.documentViewer.getAnnotationManager();
94    annotationManager.addAnnotation(lineAnnot);
95
96    let timeout;
97    let shouldAddMouseMoveListener = true;
98    document.onmousemove = () => {
99      clearTimeout(timeout);
100      timeout = setTimeout(() => {
101        if (shouldAddMouseMoveListener) {
102          instance.Core.documentViewer.addEventListener('mouseMove', e => {
103            const result = mouseToPagePoint(e);
104            const pagePoint = result.point;
105            const pageNumber = result.pageNumber;
106            const oldPageNumber = lineAnnot.PageNumber;
107
108            lineAnnot.PageNumber = pageNumber;
109            lineAnnot.setStartPoint(pagePoint.x, pagePoint.y);
110            // refresh old page since line annotation has been removed from it
111            if (pageNumber !== oldPageNumber) {
112              annotationManager.drawAnnotations(oldPageNumber);
113            }
114
115            instance.Core.documentViewer.snapToNearest(pageNumber, pagePoint.x, pagePoint.y, snapMode).then(snapPoint => {
116              lineAnnot.setEndPoint(snapPoint.x, snapPoint.y);
117              annotationManager.redrawAnnotation(lineAnnot);
118            });
119          });
120        }
121
122        shouldAddMouseMoveListener = false;
123      }, 100);
124    };
125  });
126})(window);
127// eslint-disable-next-line spaced-comment
128//# sourceURL=config.js