fix: reset to only editor (perf for mobile)

README.md

@@ -14,12 +14,12 @@ CHOUK SKI
 
 ## DEADLINE
 
-28 decembre - SIENCE version
+28 decembre - SCIENCE version
 
+- close / destroy OSD instances
 - OK deploy
-- ruler
+- ruler (todo from scratch)
 - page /science
-- other microscope images
 
 8 janvier - ART version
 

src/components/StoryContainer.vue

@@ -2,11 +2,10 @@
   <section :class="'story mode-' + story.displayMode">
     <ArticleTop :story="props.story" />
     <aside
-      v-if="storyStore.isStoryOpen"
+      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 v-if="appStore.editorMode" :story="props.story" />
-      <Player v-else :story="props.story" />
+      <Editor :story="props.story" />
     </aside>
     <main class="story-openseadragon border-black border" ref="openSeadragonElt"></main>
     <ArticleBottom :story="props.story" />
@@ -17,28 +16,20 @@
 import OpenSeadragon from 'openseadragon'
 import '@/assets/plugins/openseadragon-scalebar.js'
 import '@/assets/plugins/openseadragon-bookmark-url.js'
-import '@/assets/plugins/openseadragon-measure.js'
 import { onMounted, ref, provide, onUnmounted } from 'vue'
 import type { Story, ViewerConfiguration } from '@/types/virages'
 import ArticleTop from './StoryArticleTop.vue'
 import ArticleBottom from './StoryArticleBottom.vue'
 import Editor from './canvas/StoryEditor.vue'
-import Player from './canvas/StoryPlayer.vue'
-import { useViewer } from '@/composables/Viewer'
-import { useAppStore } from '@/stores/app'
-import { useStoryStore } from '@/stores/story'
 
 const props = defineProps<{ story: Story }>()
 const Viewer = ref()
 const openSeadragonElt = ref()
-const appStore = useAppStore()
-const storyStore = useStoryStore()
 
 provide('Viewer', Viewer)
 
-const { zoomTo } = useViewer(Viewer)
-
 const defaultViewerConfiguration: ViewerConfiguration = {
+  prefixUrl: 'https://openseadragon.github.io/openseadragon/images/',
   crossOriginPolicy: 'Anonymous',
   animationTime: 2,
   showNavigator: false,
@@ -46,9 +37,8 @@ const defaultViewerConfiguration: ViewerConfiguration = {
   showNavigationControl: false,
   drawer: 'canvas',
   preventDefaultAction: true,
-  visibilityRatio: 0.5, // distance at which the navigator is visible
-  defaultZoomLevel: 1,
-  maxZoomLevel: 30,
+  visibilityRatio: 0.5,
+  defaultZoomLevel: 4,
   gestureSettingsMouse: {
     scrollToZoom: true,
     clickToZoom: false,
@@ -64,7 +54,6 @@ const initViewer = () => {
     ...defaultViewerConfiguration,
     debugMode: false,
   })
-  zoomTo(3)
 }
 
 const destroyViewer = () => {
@@ -109,12 +98,6 @@ onUnmounted(() => {
   }
 }
 
-.story-tools {
-  .mode-HIDDEN & {
-    display: none;
-  }
-}
-
 .story-openseadragon {
   transition: height 0.5s ease-in-out;
   height: 33vh;

src/components/canvas/StoryEditor.vue

@@ -52,7 +52,6 @@ const {
   getZoom,
   getBounds,
   pointFromPixel,
-  defaultZoomLevel,
 } = useViewer(Viewer)
 const store = useStoryStore()
 const isAMarkerSelected = computed(() => {
@@ -68,9 +67,9 @@ const resetView = () => {
 }
 
 const addPoint = () => {
-  document.querySelector('.openseadragon-canvas')?.classList.add('cursor-crosshair')
   unselectMarker()
   createMarkerOnClick()
+  document.querySelector('.openseadragon-canvas')?.classList.add('cursor-crosshair')
 }
 
 const saveMarker = () => {
@@ -124,8 +123,7 @@ const createMarker = (marker: Marker) => {
 }
 
 const createMarkerOnClick = () => {
-  document.querySelector('.openseadragon-canvas')?.classList.add('cursor-crosshair')
-  const clickHandler = (event) => {
+  const addPointhandler = addClickHandler((event) => {
     const newMarker: Marker = {
       id: props.story.markers.length,
       order: props.story.markers.length,
@@ -139,9 +137,8 @@ const createMarkerOnClick = () => {
     createMarker(newMarker)
     document.querySelector('.openseadragon-canvas')?.classList.remove('cursor-crosshair')
     selectMarker(newMarker)
-    removeClickHandler(clickHandler)
-  }
-  addClickHandler(clickHandler)
+    removeClickHandler(addPointhandler)
+  })
 }
 
 const editMarkerOnDragOrZoom = () => {
@@ -198,32 +195,28 @@ useEscapeKey(() => {
 onMounted(() => {
   nextTick(() => {
     Viewer?.value.clearOverlays()
+    Viewer.value.viewport.defaultZoomLevel = 1.2
     loadStory(props.story.markers)
     editMarkerOnDragOrZoom()
     initScalebar()
-    // const plugin = new OSDMeasure(viewer, {})
     Viewer.value.bookmarkUrl()
     zoomTo(1) // COMPOSABLE WORKS
-    defaultZoomLevel(1)
-    goHome()
   })
 })
 </script>
 
-<style lang="scss">
-.editorMode {
-  .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>
+.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>