virages/src/App.vue

<template>
  <div>
    <main class="inline-block bg-white bg-opacity-50 m-10 relative z-10 top-0 left-0">
      <!-- <ZoomRect /> -->
      <ZoomPoint :markers="story[0].markers" />
    </main>
    <aside class="fixed top-0 left-0 w-screen h-screen" ref="openSeadragonElt"></aside>
  </div>
</template>

<script setup lang="ts">
import OpenSeadragon from 'openseadragon'
import { onMounted, ref, provide } from 'vue'

import story from '@/assets/story.json'

import Poulpatore from '../public/deepzoom/poulpatore/dz/info.json'
import Vignemale from '../public/deepzoom/vignemale/dz/info.json'
const Cells = 'https://verrochi92.github.io/axolotl/data/W255B_0.dzi'

import ZoomRect from './components/tools/ZoomRect.vue'
import ZoomPoint from './components/tools/ZoomPoint.vue'

const Viewer = ref()
const openSeadragonElt = ref()

provide('Viewer', Viewer)

const initViewer = () => {
  Viewer.value = OpenSeadragon({
    element: openSeadragonElt.value,
    animationTime: 0.4,
    prefixUrl: 'https://openseadragon.github.io/openseadragon/images/',
    showNavigator: true,
    sequenceMode: true,
    tileSources: Poulpatore,
    showNavigationControl: true,
    drawer: 'canvas',
    preventDefaultAction: true,
    homeFillsViewer: true,
    visibilityRatio: 1,
    crossOriginPolicy: 'Anonymous',
    showZoomControl: true,
  })
}

// on hover of openseadragon element, zoom to the center of the image

onMounted(() => {
  initViewer()
})
</script>

<style scoped>
button {
  @apply border-2 border-black px-4 py-2 rounded-xl;
}
</style>