resources/js/components/map/UWSuperTiles.js

   1 import OpenSeadragon from 'openseadragon';
   2 import PropTypes from 'prop-types';
   3 import React from 'react';
   4
   5 import Overlay from './Overlay';
   6 import { useOpenSeadragon } from './OpenSeadragon';
   7
   8 const dropMap = {
   9         '00': '10',
  10         '03': '02',
  11         '05': '05',
  12         '06': '05',
  13         '07': '17',
  14         '08': '07',
  15         '09': '4B',
  16         '0A': '09',
  17         '0B': '6A',
  18         '0D': '0B',
  19         '0F': '01',
  20         '10': '01',
  21         '12': '0D',
  22         '13': '0D',
  23         '14': '0D',
  24         '17': '27',
  25         '18': '12',
  26         '19': '07',
  27         '1E': '3E',
  28         '20': '01',
  29         '21': '0D',
  30         '22': '0D',
  31         '23': '0D',
  32         '24': '08',
  33         '27': '31',
  34         '29': '07',
  35         '2A': '07',
  36         '2C': '12',
  37         '2D': '06',
  38         '2E': '06',
  39         '2F': '02',
  40         '31': '77',
  41         '33': '08',
  42         '35': '08',
  43         '36': '08',
  44         '37': '08',
  45         '39': '29',
  46         '3A': '0A',
  47         '3C': '0E',
  48         '3D': '96',
  49         '43': '0A',
  50         '44': '0A',
  51         '46': '09',
  52         '47': '07',
  53         '48': '07',
  54         '49': '07',
  55         '4B': '09',
  56         '4D': 'A6',
  57         '4F': 'BE',
  58         '54': '34',
  59         '55': '09',
  60         '56': '09',
  61         '57': '09',
  62         '58': '09',
  63         '59': '07',
  64         '5A': '0E',
  65         '5B': '0E',
  66         '5E': '7E',
  67         '65': 'AC',
  68         '67': '09',
  69         '68': '07',
  70         '6D': '0B',
  71         '73': '05',
  72         '74': '05',
  73         '75': '08',
  74         '77': 'A7',
  75         '78': '9D',
  76         '79': '9D',
  77         '7A': '9D',
  78         '7B': '9D',
  79         '7C': '0E',
  80         '7D': '9B',
  81         '7E': '9E',
  82         '81': '05',
  83         '82': '05',
  84         '83': '05',
  85         '84': '05',
  86         '85': '05',
  87         '88': 'A9',
  88         '89': 'A9',
  89         '8A': '0E',
  90         '8B': '0E',
  91         '8C': '1C',
  92         '8D': '0B',
  93         '8F': '0C',
  94         '90': '0C',
  95         '92': '0C',
  96         '94': '0E',
  97         '95': '0E',
  98         '97': 'D1',
  99         '9A': '7D',
 100         '9B': '7D',
 101         '9C': '0E',
 102         '9D': '7B',
 103         '9E': 'BE',
 104         '9F': '0C',
 105         'A1': '0C',
 106         'A3': '0C',
 107         'A4': '0E',
 108         'A7': '17',
 109         'A8': '05',
 110         'A9': '89',
 111         'AA': '0A',
 112         'AC': '0B',
 113         'AF': '02',
 114         'B1': 'B2',
 115         'B2': '0C',
 116         'B3': '0D',
 117         'B7': '0D',
 118         'B8': '05',
 119         'B9': '05',
 120         'BA': '0A',
 121         'BB': '0A',
 122         'BD': '4F',
 123         'BE': '4F',
 124         'BF': '02',
 125         'C1': '0C',
 126         'C2': '0C',
 127         'C3': '0D',
 128         'C5': '0D',
 129         'C6': '0D',
 130         'C7': '05',
 131         'C8': '05',
 132         'C9': '0A',
 133         'CA': '0B',
 134         'CB': '0B',
 135         'CC': '0B',
 136         'CD': 'DE',
 137         'CE': 'DE',
 138         'D1': 'B1',
 139         'D3': '05',
 140         'D4': '05',
 141         'D5': '0D',
 142         'D6': '0D',
 143         'D7': '05',
 144         'D8': '05',
 145         'D9': '05',
 146         'DB': '0B',
 147         'DC': '0B',
 148         'DD': '06',
 149         'DE': '06',
 150         'E1': '06',
 151         'E2': '06',
 152         'E3': '14',
 153         'E4': '06',
 154         'E5': '06',
 155         'E6': '06',
 156         'E7': '06',
 157         'E8': 'F8',
 158         'E9': 'FA',
 159         'EA': 'FA',
 160         'EB': 'FB',
 161         'EC': 'FD',
 162         'ED': 'FD',
 163         'EE': 'FE',
 164         'EF': 'FF',
 165         'F0': '06',
 166         'F1': '06',
 167         'F4': '06',
 168         'F5': '06',
 169         'F9': '06',
 170         'FE': '06',
 171 };
 172
 173 const strongEG = [
 174         '08',
 175         '0C',
 176         '15',
 177         '2F',
 178         '40',
 179         '51',
 180         '52',
 181         '59',
 182         '5B',
 183         '60',
 184         '62',
 185         '66',
 186         '71',
 187         '72',
 188         '81',
 189         'A2',
 190         'A8',
 191         'A9',
 192         'AA',
 193         'B2',
 194         'B3',
 195         'B9',
 196         'C2',
 197         'C3',
 198         'CB',
 199         'CC',
 200         'DB',
 201         'DC',
 202         'DF',
 203         'E1',
 204         'E3',
 205         'FA',
 206 ];
 207
 208 const weakEG = [
 209         '07',
 210         '0A',
 211         '16',
 212         '28',
 213         '2A',
 214         '2B',
 215         '34',
 216         '35',
 217         '36',
 218         '37',
 219         '3A',
 220         '4D',
 221         '55',
 222         '61',
 223         '76',
 224         '99',
 225         'A0',
 226         'C9',
 227         'E2',
 228         'E4',
 229         'F0',
 230         'FD',
 231         'FE',
 232 ];
 233
 234 const kick = [
 235         '1B',
 236         '29',
 237         '3E',
 238         '43',
 239         '97',
 240 ];
 241
 242 const dark = [
 243         '0B',
 244         '19',
 245         '21',
 246         '22',
 247         '32',
 248         '41',
 249         '42',
 250         '69',
 251         '6A',
 252         '92',
 253         '93',
 254         'B5',
 255         'BA',
 256         'C0',
 257         'D0',
 258         'E5',
 259         'E6',
 260         'E7',
 261         'F0',
 262         'F1',
 263 ];
 264
 265 const camera = {
 266         '00': ['x', 'y'],
 267         '01': ['y'],
 268         '02': ['y'],
 269         '07': ['x', 'y'],
 270         '0A': ['x', 'y'],
 271         '0C': ['x', 'y'],
 272         '0D': ['x', 'y'],
 273         '0E': ['yu'],
 274         '10': ['x'],
 275         '11': ['x'],
 276         '12': ['x', 'y'],
 277         '13': ['x'],
 278         '14': ['x', 'y'],
 279         '15': ['x', 'y'],
 280         '16': ['y'],
 281         '17': ['x', 'y'],
 282         '18': ['x'],
 283         '19': ['xr'],
 284         '1A': ['xl'],
 285         '1B': ['yu'],
 286         '1D': ['y'],
 287         '1F': ['yu'],
 288         '20': ['x', 'y'],
 289         '21': ['y'],
 290         '22': ['y'],
 291         '26': ['yd'],
 292         '27': ['x', 'y'],
 293         '28': ['x', 'y'],
 294         '2A': ['x', 'y'],
 295         '2B': ['xl'],
 296         '2F': ['yd'],
 297         '31': ['yu'],
 298         '32': ['x', 'y'],
 299         '34': ['x', 'y'],
 300         '35': ['y'],
 301         '36': ['x', 'y'],
 302         '37': ['y'],
 303         '38': ['x'],
 304         '39': ['yu'],
 305         '3A': ['x', 'y'],
 306         '3B': ['x'],
 307         '3C': ['x', 'y'],
 308         '3E': ['yd'],
 309         '3F': ['yu'],
 310         '40': ['xl'],
 311         '41': ['x', 'y'],
 312         '42': ['y'],
 313         '43': ['yu'],
 314         '44': ['xr'],
 315         '45': ['xr'],
 316         '46': ['y'],
 317         '49': ['xr'],
 318         '4A': ['y'],
 319         '4B': ['yd'],
 320         '4C': ['x'],
 321         '4D': ['x', 'y'],
 322         '4E': ['yd'],
 323         '50': ['x'],
 324         '51': ['x', 'y'],
 325         '52': ['xl', 'yd'],
 326         '53': ['xr'],
 327         '54': ['x', 'y'],
 328         '55': ['y'],
 329         '56': ['xr'],
 330         '58': ['xr'],
 331         '59': ['x'],
 332         '5B': ['x'],
 333         '5C': ['yu'],
 334         '60': ['x'],
 335         '61': ['x', 'y'],
 336         '62': ['x', 'y'],
 337         '63': ['xr'],
 338         '64': ['yu'],
 339         '65': ['yu'],
 340         '66': ['yd'],
 341         '67': ['x'],
 342         '68': ['x', 'y'],
 343         '6A': ['x'],
 344         '6B': ['yu'],
 345         '6D': ['xr'],
 346         '72': ['y'],
 347         '74': ['y'],
 348         '75': ['xr'],
 349         '76': ['xl'],
 350         '77': ['x', 'y'],
 351         '7B': ['yu'],
 352         '7C': ['x'],
 353         '7D': ['yu'],
 354         '7E': ['xr'],
 355         '7F': ['xr'],
 356         '80': ['y'],
 357         '81': ['x', 'y'],
 358         '82': ['x', 'y'],
 359         '83': ['xr'],
 360         '84': ['x', 'y'],
 361         '85': ['xl'],
 362         '89': ['y'],
 363         '8B': ['xl'],
 364         '8D': ['xr'],
 365         '91': ['x'],
 366         '92': ['xr'],
 367         '93': ['yu'],
 368         '95': ['x'],
 369         '96': ['xl'],
 370         '97': ['xr'],
 371         '98': ['yd'],
 372         '99': ['yd'],
 373         '9B': ['yd'],
 374         '9C': ['x', 'y'],
 375         '9D': ['yd'],
 376         'A0': ['y'],
 377         'A1': ['xr', 'yu'],
 378         'A2': ['x', 'y'],
 379         'A3': ['x'],
 380         'A5': ['yd'],
 381         'A6': ['x', 'y'],
 382         'A7': ['yd'],
 383         'A8': ['xr'],
 384         'A9': ['x', 'y'],
 385         'AA': ['xl'],
 386         'B1': ['xr'],
 387         'B2': ['yu'],
 388         'B3': ['x'],
 389         'B4': ['x', 'y'],
 390         'B5': ['x', 'y'],
 391         'B7': ['x'],
 392         'B8': ['x'],
 393         'B9': ['x', 'y'],
 394         'BB': ['xl'],
 395         'BC': ['xr'],
 396         'BE': ['xl'],
 397         'C0': ['xl'],
 398         'C2': ['x', 'y'],
 399         'C3': ['x'],
 400         'C4': ['x', 'y'],
 401         'C5': ['x'],
 402         'C6': ['x', 'y'],
 403         'C7': ['x', 'y'],
 404         'C9': ['y'],
 405         'CB': ['x', 'y'],
 406         'CC': ['x', 'y'],
 407         'D0': ['xl'],
 408         'D2': ['xr'],
 409         'D5': ['x'],
 410         'D6': ['x'],
 411         'D8': ['xl'],
 412         'D9': ['yu'],
 413         'DA': ['yu'],
 414         'DB': ['x', 'y'],
 415         'DC': ['x', 'y'],
 416         'DF': ['yd'],
 417         'E1': ['x'],
 418         'E2': ['x'],
 419         'E4': ['x'],
 420         'E5': ['x', 'y'],
 421         'E6': ['xr', 'yd'],
 422         'E7': ['xr', 'yu'],
 423         'E8': ['x', 'yu'],
 424         'EA': ['xl', 'yu'],
 425         'EB': ['x'],
 426         'ED': ['x', 'yu'],
 427         'EE': ['x', 'y'],
 428         'EF': ['yd'],
 429         'F0': ['x', 'y'],
 430         'F1': ['x', 'y'],
 431         'F8': ['x', 'y'],
 432         'F9': ['xr', 'yd'],
 433         'FA': ['x', 'y'],
 434         'FB': ['xr', 'yd'],
 435         'FD': ['x', 'y'],
 436         'FE': ['xr'],
 437         'FF': ['yd'],
 438 };
 439
 440 const getClassName = key => {
 441         const classNames = [];
 442         if (strongEG.includes(key)) {
 443                 classNames.push('strong-eg');
 444         }
 445         if (weakEG.includes(key)) {
 446                 classNames.push('weak-eg');
 447         }
 448         if (kick.includes(key)) {
 449                 classNames.push('kick');
 450         }
 451         if (dark.includes(key)) {
 452                 classNames.push('dark');
 453         }
 454         if (camera[key]) {
 455                 camera[key].forEach(c => {
 456                         classNames.push(`cam-${c}`);
 457                 });
 458         }
 459         return classNames.join(' ');
 460 };
 461
 462 const UWSuperTiles = ({ show }) => {
 463         const { viewer } = useOpenSeadragon();
 464
 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;
 469
 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();
 476                 }
 477         }, [viewer]);
 478
 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>
 486                                                 {dropMap[key] ?
 487                                                         <p className="cell-drop">
 488                                                                 <a className="cell-link" data-key={dropMap[key]}>
 489                                                                         {`▶ ${dropMap[key]}`}
 490                                                                 </a>
 491                                                         </p>
 492                                                 : null}
 493                                         </div>;
 494                                 })
 495                         )}
 496                 </div>
 497         </Overlay>;
 498 };
 499
 500 UWSuperTiles.propTypes = {
 501         show: PropTypes.bool,
 502 };
 503
 504 export default UWSuperTiles;