virages/src/components/tools/StoryEditor.vue

<template>
  <nav class="[&>*]:m-3 text-black w-48">
    <div class="flex flex-col ui">
      <button @click="goHome">home</button>
      <button @click="addMarker">Add Marker</button>
      <div class="flex flex-col my-6">
        <button
          v-for="marker in sortedMarkers"
          :key="marker.order"
          @click="selectMarker(marker)"
          :class="marker.id === selectedMarker.id ? 'text-green-500 text-bold' : ''"
        >
          {{ marker.name }}
        </button>
      </div>
      <div v-if="isAMarkerSelected">
        <input
          ref="textInputMarkerName"
          type="text"
          v-model="selectedMarker.name"
          class="w-40 my-4"
        />
        <textarea v-model="selectedMarker.annotation" class="w-40 h-40"></textarea>
        <button @click="saveMarker">Save</button>
        <button @click="unselectMarker">Cancel</button>
      </div>
    </div>
  </nav>
</template>

<script setup lang="ts">
import type { Marker } from '@/types/virages'
import { onMounted, ref, inject, nextTick, type Ref, computed } from 'vue'
import OpenSeadragon from 'openseadragon'

const props = defineProps<{ markers: Marker[] }>()
const Viewer = inject<Ref<OpenSeadragon.Viewer>>('Viewer')
const isAddingMarker = ref<boolean>(false)
const selectedMarker = ref<Marker>({} as Marker)
const textInputMarkerName = ref<HTMLInputElement | null>(null)

const isAMarkerSelected = computed(() => {
  return selectedMarker.value.id !== undefined
})
const sortedMarkers = computed(() => {
  return [...props.markers].sort((a, b) => a.order - b.order)
})

const goHome = () => {
  Viewer?.value.viewport.goHome(false)
}

const addMarker = () => {
  unselectMarker()
  isAddingMarker.value = true
  document.querySelector('.openseadragon-canvas')?.classList.add('cursor-crosshair')
}

const saveMarker = () => {
  unselectMarker()
}

const selectMarker = (marker: Marker) => {
  document.querySelectorAll('.marker-selected').forEach((el) => {
    el.classList.remove('marker-selected')
  })
  const theMarker = document.querySelector('.marker-id-' + marker.id)
  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
  nextTick(() => {
    textInputMarkerName.value?.focus()
  })
}

const unselectMarker = () => {
  selectedMarker.value = {} as Marker
  document.querySelector('.marker-selected')?.classList.remove('marker-selected')
}

const injectMarker = (marker: Marker) => {
  const overlay = document.createElement('button')
  overlay.className = `marker-id-${marker.id} marker`
  overlay.title = marker.name
  overlay.onfocus = function () {
    selectMarker(marker)
  }
  overlay.addEventListener('click', function () {
    selectMarker(marker)
  })
  overlay.addEventListener('mouseover', function () {
    Viewer?.value.setMouseNavEnabled(false)
    // Viewer.value.gestureSettingsMouse.dragToPan = false
  })
  overlay.addEventListener('mouseout', function () {
    Viewer?.value.setMouseNavEnabled(true)
  })

  // Injection de l'overlay
  Viewer?.value.addOverlay({
    element: overlay,
    location: new OpenSeadragon.Point(marker.position.x, marker.position.y),
  })
}

const createMarkerOnClick = () => {
  Viewer?.value.addHandler('canvas-click', (e) => {
    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)
      isAddingMarker.value = false
      document.querySelector('.openseadragon-canvas').classList.remove('cursor-crosshair')
      selectMarker(newMarker)
    } else if (isAMarkerSelected.value) {
      unselectMarker()
    }
  })
}

const editMarkerOnDragOrZoom = () => {
  Viewer?.value.addHandler('canvas-drag', (event) => {
    if (isAMarkerSelected.value) {
      Viewer.value.gestureSettingsMouse.dragToPan = false
      const point = Viewer?.value.viewport.pointFromPixel(event.position)
      selectedMarker.value.position = point
      const overlay = document.querySelector('.marker-id-' + selectedMarker.value.id)
      Viewer?.value.updateOverlay(overlay as Element, point)
    }
  })

  Viewer?.value.addHandler('canvas-release', () => {
    Viewer.value.gestureSettingsMouse.dragToPan = true
  })

  Viewer?.value.addHandler('zoom', (event) => {
    if (isAMarkerSelected.value) {
      selectedMarker.value.zoom = event.zoom
    }
  })
}

const loadStory = (markers: Marker[]) => {
  markers.forEach((marker) => {
    injectMarker(marker)
  })
}

const keyboardShortcut = () => {
  // if press on escpae key
  window.addEventListener('keydown', (e) => {
    if (e.key !== 'Escape') return
    unselectMarker()
    goHome()
  })
}

onMounted(() => {
  nextTick(() => {
    loadStory(props.markers)
    createMarkerOnClick()
    editMarkerOnDragOrZoom()
    keyboardShortcut()
  })
})
</script>

<style>
.ui button {
  @apply border-2 border-black px-4 py-2 rounded-xl bg-slate-300 hover:bg-neutral-100 m-1;
}
.ui input,
.ui textarea {
  @apply border-2 border-black px-4 py-2;
}
.marker {
  @apply w-8 h-8 rounded-full shadow-2xl bg-green-500 bg-opacity-50 hover:bg-green-600 hover:bg-opacity-100  hover:cursor-pointer pointer-events-auto hover:scale-150 transition-all border-2 border-white border-8 transform -translate-y-1/2 -translate-x-1/2;
}
.marker-selected {
  @apply border-blue-400 border-8 bg-white animate-pulse hover:cursor-move hover:bg-white;
}
</style>