Как подружить React, OpenSeaDragon и плагин селекта к нему?

Question

[Иван]

Есть не безизвестный OpenSeaDragon и собственно запустить его на реакте проблем вроде нету.
Также есть вот такой плагин к "дракону".
Я так понял, что в оригинале плагин "подмешивается" к "дракону" напрямую (через прототип).
Но в моем случае:

import OpenSeaDragon from 'openseadragon';
import OpenSeadragonSelection from 'openseadragonselection/dist/openseadragonselection.js';

...

  componentDidMount() {
    Axios.get(this.props.params.id + '/index.json').then(res => {
      viewer = OpenSeaDragon({
        id: "openseadragon1",
        prefixUrl: "/img/openseadragon/",
        tileSources: {
          type: 'image',
          url: res.data.src
        },
        debugMode: true,
      });
    }).catch(err => console.log(err));
  }

Не буду приводить весь код, но собственно как мне подсунуть Selector "дракону"?

Answer 1

[Иван]

Ларчик просто открывался:

import OpenSeaDragon from 'openseadragon';
import OpenSeadragonSelection from 'openseadragonselection/dist/openseadragonselection.js';
OpenSeaDragon.selection = OpenSeadragonSelection;

Answer 2

[Максим]

Судя по доке, вам достаточно "Include dist/openseadragonselection.js after OpenSeadragon in your html." (добавить openseadragonselection после вашего OpenSeadragon скрипта). Вы вроде бы так и сделали..

Думаю, стоит попробовать без npm просто в index.html подключить сначала OpenSeadragon, затем OpenSeadragonSelection (с помощью тэга scripts) и далее уже создавать viewer как вы это делаете в вопросе. Если так будет работать, то уже думать дальше, либо так и оставить. Если так работать не будет, то вопрос не в том, как подружить React + OpenSeaDragon + плагин, и стоит создать чистый index.html статичный и прямо в нем прописать в тэге scripts пример из документаций, чтобы убедиться, что все на самом деле работает.

Comments

[Иван]

Да, в оригинале оно и подключается тупо в тег script в браузере и в глобальной области видимости ты вызываешь компонент через глобальную переменную "OpenSeaDragon". Плагин же находит её и подмешивает свои переменные / методы. При AMD загрузке же так не выйдет, т.к. мне надо присвоить модулю переменную.

[Иван]

Если же я просто в html файл суну библиотеку и плагин к ней, то она не вызывается из Реакта.