- viewer.addOverlay(
- element,
- new OpenSeadragon.Point(x, y),
- OpenSeadragon.Placement.CENTER,
- );
- if (onClick) {
- new OpenSeadragon.MouseTracker({
- element,
- clickHandler: onClick,
- });
+ const add = () => {
+ if (width && height) {
+ viewer.addOverlay(
+ element,
+ new OpenSeadragon.Rect(x, y, width, height),
+ );
+ } else {
+ viewer.addOverlay(
+ element,
+ new OpenSeadragon.Point(x, y),
+ OpenSeadragon.Placement.CENTER,
+ );
+ }
+ if (onClick) {
+ new OpenSeadragon.MouseTracker({
+ element,
+ clickHandler: onClick,
+ });
+ }
+ };
+ const addPage = () => {
+ if (viewer.currentPage() === page) {
+ add();
+ }
+ };
+ if (typeof page !== 'undefined') {
+ viewer.addHandler('page', addPage);
+ return () => {
+ viewer.removeHandler('page', addPage);
+ viewer.removeOverlay(element);
+ };