diff --git a/src/App.vue b/src/App.vue
index 816adea..6a3f4e7 100644
--- a/src/App.vue
+++ b/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,
diff --git a/src/components/tools/StoryEditor.vue b/src/components/tools/StoryEditor.vue
index 5b89673..15e2543 100644
--- a/src/components/tools/StoryEditor.vue
+++ b/src/components/tools/StoryEditor.vue
@@ -13,7 +13,7 @@
{{ marker.name }}
-
+
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[>('Viewer')
-const isEditMode = ref(false)
+const isAddingMarker = ref(false)
const selectedMarker = ref({} as Marker)
const textInputMarkerName = ref(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()
})
]