fixes

src/App.vue

@@ -14,8 +14,8 @@ 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 Poulpatore = '../public/deepzoom/poulpatore/dz/info.json'
+const Vignemale = '../public/deepzoom/vignemale/dz/info.json'
 const Cells = 'https://verrochi92.github.io/axolotl/data/W255B_0.dzi'
 
 import ZoomRect from './components/tools/ZoomRect.vue'
@@ -34,7 +34,7 @@ const initViewer = () => {
     prefixUrl: 'https://openseadragon.github.io/openseadragon/images/',
     showNavigator: false,
     sequenceMode: false,
-    tileSources: Poulpatore,
+    tileSources: Cells,
     showNavigationControl: false,
     drawer: 'canvas',
     preventDefaultAction: true,

src/components/tools/StoryEditor.vue

@@ -13,7 +13,7 @@
           {{ marker.name }}
         </button>
       </div>
-      <div v-if="isSelectionModeOn">
+      <div v-if="isAMarkerSelected">
         <input
           ref="textInputMarkerName"
           type="text"
@@ -31,15 +31,15 @@
 <script setup lang="ts">
 import type { Marker } from '@/types/virages'
 import { onMounted, ref, inject, nextTick, type Ref, computed } from 'vue'
-import OpenSeadragon, { imageFormatSupported } from 'openseadragon'
+import OpenSeadragon from 'openseadragon'
 
 const props = defineProps<{ markers: Marker[] }>()
 const Viewer = inject<Ref<OpenSeadragon.Viewer>>('Viewer')
-const isEditMode = ref<boolean>(false)
+const isAddingMarker = ref<boolean>(false)
 const selectedMarker = ref<Marker>({} as Marker)
 const textInputMarkerName = ref<HTMLInputElement | null>(null)
 
-const isSelectionModeOn = computed(() => {
+const isAMarkerSelected = computed(() => {
   return selectedMarker.value.id !== undefined
 })
 const sortedMarkers = computed(() => {
@@ -50,19 +50,10 @@ const goHome = () => {
   Viewer?.value.viewport.goHome(false)
 }
 
-const zoomPlus = () => {
-  Viewer?.value.viewport.zoomBy(1.2)
-  Viewer?.value.viewport.applyConstraints()
-}
-
-const zoomMinus = () => {
-  Viewer?.value.viewport.zoomBy(0.8)
-  Viewer?.value.viewport.applyConstraints()
-}
-
 const addMarker = () => {
-  isEditMode.value = true
-  document.querySelector('.openseadragon-canvas').classList.add('cursor-crosshair')
+  unselectMarker()
+  isAddingMarker.value = true
+  document.querySelector('.openseadragon-canvas')?.classList.add('cursor-crosshair')
 }
 
 const saveMarker = () => {
@@ -74,7 +65,7 @@ const selectMarker = (marker: Marker) => {
     el.classList.remove('marker-selected')
   })
   const theMarker = document.querySelector('.marker-id-' + marker.id)
-  theMarker.classList.add('marker-selected')
+  theMarker?.classList.add('marker-selected')
   Viewer?.value.viewport.zoomTo(marker.zoom, undefined, false)
   Viewer?.value.viewport.panTo(new OpenSeadragon.Point(marker.position.x, marker.position.y))
   selectedMarker.value = marker
@@ -100,7 +91,7 @@ const injectMarker = (marker: Marker) => {
   })
   overlay.addEventListener('mouseover', function () {
     Viewer?.value.setMouseNavEnabled(false)
-    Viewer.value.gestureSettingsMouse.dragToPan = false
+    // Viewer.value.gestureSettingsMouse.dragToPan = false
   })
   overlay.addEventListener('mouseout', function () {
     Viewer?.value.setMouseNavEnabled(true)
@@ -115,21 +106,22 @@ const injectMarker = (marker: Marker) => {
 
 const createMarkerOnClick = () => {
   Viewer?.value.addHandler('canvas-click', (e) => {
-    if (isEditMode.value) {
+    if (isAddingMarker.value) {
       const point = Viewer?.value.viewport.pointFromPixel(e.position)
       const zoom = Viewer?.value.viewport.getZoom()
       const newMarker: Marker = {
         id: props.markers.length, // WIP
         order: props.markers.length, // WIP
+        name: '',
         annotation: '',
         position: new OpenSeadragon.Point(point.x, point.y),
         zoom: zoom,
       }
       injectMarker(newMarker)
-      // isEditMode.value = false
+      isAddingMarker.value = false
       document.querySelector('.openseadragon-canvas').classList.remove('cursor-crosshair')
       selectMarker(newMarker)
-    } else {
+    } else if (isAMarkerSelected.value) {
       unselectMarker()
     }
   })
@@ -137,7 +129,7 @@ const createMarkerOnClick = () => {
 
 const editMarkerOnDragOrZoom = () => {
   Viewer?.value.addHandler('canvas-drag', (event) => {
-    if (isSelectionModeOn.value) {
+    if (isAMarkerSelected.value) {
       Viewer.value.gestureSettingsMouse.dragToPan = false
       const point = Viewer?.value.viewport.pointFromPixel(event.position)
       selectedMarker.value.position = point
@@ -151,7 +143,7 @@ const editMarkerOnDragOrZoom = () => {
   })
 
   Viewer?.value.addHandler('zoom', (event) => {
-    if (isSelectionModeOn.value) {
+    if (isAMarkerSelected.value) {
       selectedMarker.value.zoom = event.zoom
     }
   })
@@ -166,6 +158,7 @@ const loadStory = (markers: Marker[]) => {
 const keyboardShortcut = () => {
   // if press on escpae key
   window.addEventListener('keydown', (e) => {
+    if (e.key !== 'Escape') return
     unselectMarker()
     goHome()
   })