feat(wip): composabel viewer

src/components/StoryArticleTop.vue

@@ -0,0 +1,8 @@
+<template>
+  <!-- <header>top</header> -->
+</template>
+
+<script setup lang="ts">
+import type { Story } from '@/types/virages'
+defineProps<{ story: Story }>()
+</script>

src/components/StoryContainer.vue

@@ -1,13 +1,14 @@
 <template>
   <section :class="'story mode-' + story.displayMode">
+    <ArticleTop :story="props.story" />
     <aside
       v-if="story.displayMode === 'EDITOR'"
       class="story-tools fixed inline-block bg-white bg-opacity-50 m-10 z-10 top-0 left-0"
     >
       <Editor :story="props.story" />
     </aside>
-    <main class="story-openseadragon" ref="openSeadragonElt"></main>
-    <Article :story="props.story" />
+    <main class="story-openseadragon border-black border" ref="openSeadragonElt"></main>
+    <ArticleBottom :story="props.story" />
   </section>
 </template>
 
@@ -17,7 +18,8 @@ import '@/assets/plugins/openseadragon-scalebar.js'
 import '@/assets/plugins/openseadragon-bookmark-url.js'
 import { onMounted, ref, provide, onUnmounted } from 'vue'
 import type { Story, ViewerConfiguration } from '@/types/virages'
-import Article from './StoryArticle.vue'
+import ArticleTop from './StoryArticleTop.vue'
+import ArticleBottom from './StoryArticleBottom.vue'
 import Editor from './player/StoryEditor.vue'
 
 const props = defineProps<{ story: Story }>()

src/components/player/StoryEditor.vue

@@ -1,7 +1,7 @@
 <template>
   <nav class="[&>*]:m-3 text-black w-48">
     <div class="flex flex-col ui">
-      <button @click="goHome">home</button>
+      <button @click="resetView">home</button>
       <button @click="addPoint">Add Point</button>
       <div class="flex flex-col my-6">
         <button
@@ -39,10 +39,20 @@ import { useEscapeKey } from '@/composables/EscapeKey'
 
 const props = defineProps<{ story: Story }>()
 const Viewer = inject<Ref<OpenSeadragon.Viewer>>('Viewer')
-const isAddingPoint = ref<boolean>(false)
 const selectedMarker = ref<Marker>({} as Marker)
 const textInputMarkerName = ref<HTMLInputElement | null>(null)
-const { zoomTo } = useViewer(Viewer)
+const {
+  zoomTo,
+  goHome,
+  enableMouseNav,
+  disableMouseNav,
+  injectMarker,
+  addClickHandler,
+  removeClickHandler,
+  getZoom,
+  getBounds,
+  pointFromPixel,
+} = useViewer(Viewer)
 const store = useStoryStore()
 const isAMarkerSelected = computed(() => {
   return selectedMarker.value.id !== undefined
@@ -51,14 +61,14 @@ const sortedMarkers = computed(() => {
   return [...props.story.markers].sort((a, b) => a.order - b.order)
 })
 
-const goHome = () => {
-  Viewer?.value.viewport.goHome(false)
+const resetView = () => {
+  goHome()
   unselectMarker()
 }
 
 const addPoint = () => {
   unselectMarker()
-  isAddingPoint.value = true
+  createMarkerOnClick()
   document.querySelector('.openseadragon-canvas')?.classList.add('cursor-crosshair')
 }
 
@@ -93,7 +103,7 @@ const unselectMarker = () => {
   document.querySelector('.marker-selected')?.classList.remove('marker-selected')
 }
 
-const injectMarker = (marker: Marker) => {
+const createMarker = (marker: Marker) => {
   const overlay = document.createElement('button')
   overlay.className = `marker-id-${marker.id} marker`
   overlay.title = marker.name
@@ -104,44 +114,30 @@ const injectMarker = (marker: Marker) => {
     selectMarker(marker)
   })
   overlay.addEventListener('mouseover', function () {
-    Viewer?.value.setMouseNavEnabled(false)
-    // Viewer.value.gestureSettingsMouse.dragToPan = false
+    disableMouseNav()
   })
   overlay.addEventListener('mouseout', function () {
-    Viewer?.value.setMouseNavEnabled(true)
-  })
-
-  // Injection de l'overlay
-  Viewer?.value.addOverlay({
-    element: overlay,
-    location: new OpenSeadragon.Point(marker.point.x, marker.point.y),
+    enableMouseNav()
   })
+  injectMarker(marker, overlay)
 }
 
 const createMarkerOnClick = () => {
-  Viewer?.value.addHandler('canvas-click', (event) => {
-    // adding point
-    if (isAddingPoint.value) {
-      const point = Viewer?.value.viewport.pointFromPixel(event.position)
-      const zoom = Viewer?.value.viewport.getZoom()
-      const bounds = Viewer?.value.viewport.getBounds()
-      const newMarker: Marker = {
-        id: props.story.markers.length,
-        order: props.story.markers.length,
-        name: '',
-        bounds: bounds,
-        point: new OpenSeadragon.Point(point.x, point.y),
-        zoom: zoom,
-        annotation: '',
-      }
-      store.addMarker(props.story, newMarker)
-      injectMarker(newMarker)
-      isAddingPoint.value = false
-      document.querySelector('.openseadragon-canvas')?.classList.remove('cursor-crosshair')
-      selectMarker(newMarker)
-    } else if (isAMarkerSelected.value) {
-      unselectMarker()
+  const addPointhandler = addClickHandler((event) => {
+    const newMarker: Marker = {
+      id: props.story.markers.length,
+      order: props.story.markers.length,
+      name: '',
+      bounds: getBounds(),
+      point: pointFromPixel(event.position),
+      zoom: getZoom(),
+      annotation: '',
     }
+    store.addMarker(props.story, newMarker)
+    createMarker(newMarker)
+    document.querySelector('.openseadragon-canvas')?.classList.remove('cursor-crosshair')
+    selectMarker(newMarker)
+    removeClickHandler(addPointhandler)
   })
 }
 
@@ -171,7 +167,7 @@ const editMarkerOnDragOrZoom = () => {
 
 const loadStory = (markers: Marker[]) => {
   markers.forEach((marker) => {
-    injectMarker(marker)
+    createMarker(marker)
   })
 }
 
@@ -193,7 +189,7 @@ const initScalebar = () => {
 
 useEscapeKey(() => {
   unselectMarker()
-  goHome()
+  resetView()
 })
 
 onMounted(() => {
@@ -201,7 +197,6 @@ onMounted(() => {
     Viewer?.value.clearOverlays()
     // Viewer.value.viewport.defaultZoomLevel = 1
     loadStory(props.story.markers)
-    createMarkerOnClick()
     editMarkerOnDragOrZoom()
     initScalebar()
     Viewer.value.bookmarkUrl()

src/composables/Viewer.ts

@@ -1,10 +1,70 @@
-import type OpenSeadragon from 'openseadragon'
-import { type Ref } from 'vue'
+import OpenSeadragon from 'openseadragon'
+import type { Marker } from '@/types/virages'
 
 export function useViewer(Viewer: Ref<OpenSeadragon.Viewer>) {
   const zoomTo = (zoomLevel: number) => {
     Viewer.value.viewport.zoomTo(zoomLevel, undefined, false)
   }
 
-  return { zoomTo }
+  const goHome = () => {
+    Viewer.value.viewport.goHome(false)
+  }
+
+  const enableMouseNav = () => {
+    Viewer.value.setMouseNavEnabled(true)
+  }
+
+  const disableMouseNav = () => {
+    Viewer.value.setMouseNavEnabled(false)
+    // Viewer.value.gestureSettingsMouse.dragToPan = false
+  }
+
+  const injectMarker = (marker: Marker, overlay: HTMLElement) => {
+    Viewer.value.addOverlay({
+      element: overlay,
+      location: new OpenSeadragon.Point(marker.point.x, marker.point.y),
+    })
+  }
+
+  const addHandlerOnce = (eventName: string, handler: (event) => void) => {
+    return Viewer.value.addHandler(eventName, handler)
+  }
+
+  const addClickHandler = (handler: (event) => void) => {
+    return Viewer.value.addHandler('canvas-click', handler)
+  }
+  // const addClickHandler = (handler(event): (event: Event) => typeof handler) => {
+  //   return Viewer.value.addHandler('canvas-click', handler)
+  // }
+
+  const removeClickHandler = (handler) => {
+    Viewer.value.removeHandler('canvas-click', handler)
+  }
+
+  const getZoom = () => {
+    return Viewer.value.viewport.getZoom()
+  }
+
+  const getBounds = () => {
+    return Viewer.value.viewport.getBounds()
+  }
+
+  const pointFromPixel = (position) => {
+    const point = Viewer.value.viewport.pointFromPixel(position)
+    return new OpenSeadragon.Point(point.x, point.y)
+  }
+
+  return {
+    zoomTo,
+    goHome,
+    enableMouseNav,
+    disableMouseNav,
+    injectMarker,
+    addClickHandler,
+    addHandlerOnce,
+    removeClickHandler,
+    getZoom,
+    getBounds,
+    pointFromPixel,
+  }
 }