-import OpenSeadragon from 'openseadragon';
import PropTypes from 'prop-types';
import React from 'react';
import { Button } from 'react-bootstrap';
import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link, useSearchParams } from 'react-router-dom';
import { useOpenSeadragon } from './OpenSeadragon';
import Icon from '../common/Icon';
const Item = ({ pin }) => {
const { viewer } = useOpenSeadragon();
+ const [, setSearchParams] = useSearchParams();
const { t } = useTranslation();
const goToLocation = React.useCallback(pin => {
- if (viewer && viewer.viewport) {
- viewer.viewport.panTo(new OpenSeadragon.Point(pin.x, pin.y));
- viewer.viewport.zoomTo(4);
+ setSearchParams({ x: pin.x, y: pin.y, z: 4 });
+ if (viewer && viewer.element) {
viewer.element.scrollIntoView();
}
}, [viewer]);