WIP: markers story

public/data.json

@@ -1,32 +0,0 @@
-[
-  {
-    "id": 0,
-    "order": 0,
-    "title": "Poulpatore",
-    "url": "https://verrochi92.github.io/axolotl/data/W255B_0.dzi",
-    "story": [
-      {
-        "id": 0,
-        "zoom": 4,
-        "x": 0.5,
-        "y": 0.7,
-        "annotation": "lorem ipsum dolor sit amet"
-      },
-      {
-        "id": 1,
-        "zoom": 3,
-        "x": 0.2,
-        "y": 0.3,
-        "annotation": "second annotation"
-      },
-      {
-        "id": 2,
-        "zoom": 5,
-        "x": 0.1,
-        "y": 0.1,
-        "annotation": "third"
-      },
-    ]
-    }]
-  }
-]

src/App.vue

@@ -2,7 +2,7 @@
   <div>
     <main class="inline-block bg-white bg-opacity-50 m-10 relative z-10 top-0 left-0">
       <!-- <ZoomRect /> -->
-      <ZoomPoint />
+      <ZoomPoint :markers="story[0].markers" />
     </main>
     <aside class="fixed top-0 left-0 w-screen h-screen" ref="openSeadragonElt"></aside>
   </div>
@@ -12,6 +12,8 @@
 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'
@@ -31,7 +33,7 @@ const initViewer = () => {
     prefixUrl: 'https://openseadragon.github.io/openseadragon/images/',
     showNavigator: true,
     sequenceMode: true,
-    tileSources: Cells,
+    tileSources: Poulpatore,
     showNavigationControl: true,
     drawer: 'canvas',
     preventDefaultAction: true,

src/assets/story.json

@@ -0,0 +1,36 @@
+[
+  {
+    "id": 0,
+    "title": "Poulpatore",
+    "url": "https://verrochi92.github.io/axolotl/data/W255B_0.dzi",
+    "markers": [
+      {
+        "order": 0,
+        "position": {
+          "x": 0.2,
+          "y": 0.2
+        },
+        "zoom": 4,
+        "annotation": "<b>lorem</b> ipsum dolor sit amet"
+      },
+      {
+        "order": 1,
+        "position": {
+          "x": 0.2,
+          "y": 0.3
+        },
+        "zoom": 3,
+        "annotation": "<b>second</b> annotation"
+      },
+      {
+        "order": 2,
+        "position": {
+          "x": 0.1,
+          "y": 0.1
+        },
+        "zoom": 7,
+        "annotation": "<b>third</b>"
+      }
+    ]
+  }
+]

src/components/tools/ZoomPoint.vue

@@ -1,9 +1,11 @@
 <template>
   <nav class="[&>*]:m-3 text-black">
     <div class="flex flex-col">
-      <h2>Clicked Point</h2>
+      <h2>Current Marker</h2>
+      {{ currentMarker }}
+      <textarea :value="currentMarker.annotation" @input="updateAnnotation"></textarea>
       <div>
-        <label for="editMode">Edit Mode </label>
+        <label for="editMode">Place point on click </label>
         <input id="editMode" type="checkbox" v-model="isEditMode" />
       </div>
     </div>
@@ -11,29 +13,34 @@
 </template>
 
 <script setup lang="ts">
+import type { Marker } from '@/types/virages'
 import { onMounted, ref, inject, nextTick } from 'vue'
 import OpenSeadragon from 'openseadragon'
 
+const props = defineProps<{ markers: Marker[] }>()
 const Viewer = inject('Viewer')
-const isEditMode = ref(false)
+const isEditMode = ref<boolean>(false)
+const currentMarker = ref<Marker>({} as Marker)
 
-const placePoint = (pixel, zoom) => {
-  const viewportPoint = Viewer.value.viewport.pointFromPixel(pixel)
+const placePoint = (point, zoom, annotation = '') => {
   const overlay = document.createElement('button')
   overlay.className =
     'w-8 h-8 rounded-full shadow-2xl bg-green-500 bg-opacity-50 hover:bg-green-600 hover:bg-opacity-100 z-index-20 hover:cursor-pointer pointer-events-auto hover:scale-150 transition-all border-2 border-white border-8'
 
   // Sauvegarde les données dans les attributs "data-*"
   overlay.setAttribute('data-zoom', zoom)
-  overlay.setAttribute('data-position-x', viewportPoint.x)
-  overlay.setAttribute('data-position-y', viewportPoint.y)
+  overlay.setAttribute('data-position-x', point.x)
+  overlay.setAttribute('data-position-y', point.y)
+  overlay.setAttribute('data-annotation', annotation)
 
   overlay.addEventListener('click', function (e) {
     const zoom = Number(overlay.getAttribute('data-zoom'))
     const x = Number(overlay.getAttribute('data-position-x'))
     const y = Number(overlay.getAttribute('data-position-y'))
+    const annotation = overlay.getAttribute('data-annotation')
     Viewer.value.viewport.zoomTo(zoom, false)
     Viewer.value.viewport.panTo(new OpenSeadragon.Point(x, y))
+    currentMarker.value.annotation = annotation
   })
   overlay.addEventListener('mouseover', function (e) {
     Viewer.value.setMouseNavEnabled(false)
@@ -42,17 +49,30 @@ const placePoint = (pixel, zoom) => {
     Viewer.value.setMouseNavEnabled(true)
   })
 
+  // Injection de l'overlay
   Viewer.value.addOverlay({
     element: overlay,
-    location: viewportPoint,
+    location: point,
   })
-  isEditMode.value = false
 }
 
 const placeAPointOnClick = () => {
   Viewer.value.addHandler('canvas-click', (e) => {
     if (!isEditMode.value) return
-    placePoint(e.position, Viewer.value.viewport.getZoom())
+    const point = Viewer.value.viewport.pointFromPixel(e.position)
+    const zoom = Viewer.value.viewport.getZoom()
+    placePoint(point, zoom)
+    isEditMode.value = false
+  })
+}
+
+const loadStory = (markers: Marker[]) => {
+  markers.forEach((marker) => {
+    placePoint(
+      new OpenSeadragon.Point(marker.position.x, marker.position.y),
+      marker.zoom,
+      marker.annotation,
+    )
   })
 }
 
@@ -60,6 +80,7 @@ onMounted(() => {
   nextTick(() => {
     Viewer.value.zoomPerClick = true
     placeAPointOnClick()
+    loadStory(props.markers)
   })
 })
 </script>

src/types/virages.d.ts

@@ -0,0 +1,13 @@
+export interface Marker {
+  order: number
+  position: OpenSeadragon.Point
+  zoom: number
+  annotation: string
+}
+
+export interface Story {
+  id: number
+  title: string
+  url: string
+  markers: Marker[]
+}