1 import OpenSeadragon from 'openseadragon';
2 import PropTypes from 'prop-types';
3 import React from 'react';
5 import Overlay from './Overlay';
6 import { useOpenSeadragon } from './OpenSeadragon';
440 const getClassName = key => {
441 const classNames = [];
442 if (strongEG.includes(key)) {
443 classNames.push('strong-eg');
445 if (weakEG.includes(key)) {
446 classNames.push('weak-eg');
448 if (kick.includes(key)) {
449 classNames.push('kick');
451 if (dark.includes(key)) {
452 classNames.push('dark');
455 camera[key].forEach(c => {
456 classNames.push(`cam-${c}`);
459 return classNames.join(' ');
462 const UWSuperTiles = ({ show }) => {
463 const { viewer } = useOpenSeadragon();
465 const onClick = React.useCallback(e => {
466 if (e.originalTarget.tagName !== 'A') return;
467 if (e.originalTarget.className !== 'cell-link') return;
468 const key = e.originalTarget.dataset.key;
470 const x = (parseInt(key[1], 16) + 0.5) / 16;
471 const y = (parseInt(key[0], 16) + 0.5) / 16;
472 if (viewer && viewer.viewport) {
473 viewer.viewport.panTo(new OpenSeadragon.Point(x, y));
474 viewer.viewport.zoomTo(4);
475 viewer.element.scrollIntoView();
479 return <Overlay onClick={onClick} page={3} x={0} y={0} width={1} height={1}>
480 <div className={`uw-super-tiles ${show ? '' : 'd-none'}`}>
481 {[...Array(16).keys()].map(x =>
482 [...Array(16).keys()].map(y => {
483 const key = `${x.toString(16).toUpperCase()}${y.toString(16).toUpperCase()}`;
484 return <div className={getClassName(key)} key={key}>
485 <p className="cell-id">{key}</p>
487 <p className="cell-drop">
488 <a className="cell-link" data-key={dropMap[key]}>
489 {`▶ ${dropMap[key]}`}
500 UWSuperTiles.propTypes = {
501 show: PropTypes.bool,
504 export default UWSuperTiles;