Mirador-image-tools : problem after clearing UI and recreating mirador

[ydvelaitzky]

Hi
The html:

<div id="container">
      <div id="demo"></div>
  </div>

In some case I need to empty the container element and rebuild the viewer.
I do it with the following simple js code:

//clear the element:
document.getElementById('container').innerHTML = '<div id="demo"></div>';
 
 //rebuild mirador:
 const config = {
               id: 'demo',
               windows: [{
                   manifestId: 'https://iiif.bodleian.ox.ac.uk/iiif/manifest/e32a277e-91e2-4a6d-8ba6-cc4bad230410.json',
               }],
  };
 
 
 Mirador.viewer(config, [
 ]);

Everything worked fine until added the mirador-image-tools plugin. Now after clearing the element and rebuild mirador :
Mirador.viewer(config, [ ...miradorImageToolsPlugin, ]);
mirador navigation is displayed strange , something is wrong with the css:

I uploaded the sample to https://fjmstest.genizah.org/Temp/testMirador.html
You can see it in live. There are 2 buttons, one for seeing it in a regular case – without image-tools , and the second includes image-tools and shows the problem in the navigation area. Try to click twice on that button.

Can you please help me? Thank you so much!

[mejackreed]

Similarly to ProjectMirador/mirador#3234 (comment) can you see if this approach works?

[ydvelaitzky]

Sorry, but It didn't solve the problem!
(The above link-sample now is updated to the code you offered)
Your help is very important to me, can you please think about another idea ?

[mejackreed]

@ydvelaitzky can you now try the updated approach here: ProjectMirador/mirador#3234 (comment)

[ydvelaitzky]

I have tried the above solution, and discovered that while that issue has been solved, this mirador-image-tools issue has not been solved. it seems that adding image-tools plugin still causes a problem.
In your sample at codesandbox.io if you will add the mirador-image-tools plugin -I assume that you will see that things are displayed wrong especially when thumbnails are displayed, for example - the paging navigation is disappear.
By the way, if you modify the code in codesandbox.io by adding the mirador-image-tools plugin - let me know how you do it, because I have no idea how to do it myself. When added a reference to the mirador-image-tools.min.js, as the following:
<script src="https://unpkg.com/[email protected]/umd/mirador-image-tools.js"></script>
for some reasons, the "miradorImageToolsPlugin" variable that I expected to be known in the scope - was not known and adding the miradorImageToolsPlugin as a plugin to the mirador initailization as the following:
viewerInstance = Mirador.viewer(config, [miradorImageToolsPlugin]);
causes the following error:
Uncaught ReferenceError: miradorImageToolsPlugin is not defined

Thanks.

[miriamg16]

Is there a solution to this?