experiment: rotate openlayers image

europeana · Nov 26, 2024 · a84e4be · a84e4be
1 parent cd9869a
commit a84e4be
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 4 deletions.
diff --git a/packages/portal/src/components/media/MediaImageViewer.vue b/packages/portal/src/components/media/MediaImageViewer.vue
@@ -41,6 +41,7 @@
   import { defaults } from 'ol/interaction/defaults';
 
   import useItemMediaPresentation from '@/composables/itemMediaPresentation.js';
+  import useRotation from '@/composables/rotation.js';
   import useZoom from '@/composables/zoom.js';
   import EuropeanaMediaAnnotation from '@/utils/europeana/media/Annotation.js';
   import EuropeanaMediaService from '@/utils/europeana/media/Service.js';
@@ -95,6 +96,9 @@
     },
 
     setup() {
+      const {
+        rotation
+      } = useRotation();
       const {
         current: currentZoom,
         setCurrent: setCurrentZoom,
@@ -115,6 +119,7 @@
         currentZoom,
         hasAnnotations,
         pageForAnnotationTarget,
+        rotation,
         setCurrentZoom,
         setDefaultZoom,
         setMaxZoom,
@@ -159,8 +164,9 @@
         deep: true,
         handler: 'highlightAnnotation'
       },
-      url: '$fetch',
-      currentZoom: 'setZoom'
+      currentZoom: 'setZoom',
+      rotation: 'setRotation',
+      url: '$fetch'
     },
 
     mounted() {
@@ -272,7 +278,8 @@
           constrainOnlyCenter: true,
           maxZoom: 8,
           projection,
-          resolutions: source.getTileGrid?.()?.getResolutions()
+          resolutions: source.getTileGrid?.()?.getResolutions(),
+          rotation: this.rotation
         });
         view.on('error', (olError) => this.handleOlError(olError, 'OpenLayers View error'));
 
@@ -406,6 +413,10 @@
         this.highlightAnnotation();
       },
 
+      setRotation() {
+        this.olMap.getView()?.setRotation(this.rotation);
+      },
+
       setZoom() {
         const view = this.olMap.getView();
 

diff --git a/packages/portal/src/components/media/MediaImageViewerControls.vue b/packages/portal/src/components/media/MediaImageViewerControls.vue
@@ -3,6 +3,21 @@
     id="viewer-controls"
     class="viewer-controls position-absolute d-inline-flex align-items-center justify-content-center mx-auto"
   >
+    <b-button
+      variant="light-flat"
+      class="button-icon-only btn-light-flat mr-2"
+      @click="rotateLess"
+    >
+      ↪️
+    </b-button>
+    <b-button
+      variant="light-flat"
+      class="button-icon-only btn-light-flat mr-2"
+      @click="rotateMore"
+    >
+      ↩️
+    </b-button>
+    <span class="divider" />
     <b-button
       v-b-tooltip.top="$t('media.controls.zoomIn')"
       :disabled="atMaxZoom"
@@ -61,6 +76,7 @@
 
 <script>
   import hideTooltips from '@/mixins/hideTooltips';
+  import useRotation from '@/composables/rotation.js';
   import useZoom from '@/composables/zoom.js';
 
   export default {
@@ -76,6 +92,10 @@
     },
 
     setup() {
+      const {
+        rotateLess,
+        rotateMore
+      } = useRotation();
       const {
         atMin: atMinZoom,
         atMax: atMaxZoom,
@@ -85,7 +105,7 @@
         zoomOut
       } = useZoom();
 
-      return { atMinZoom, atMaxZoom, atDefaultZoom, resetZoom, zoomIn, zoomOut };
+      return { atMinZoom, atMaxZoom, atDefaultZoom, resetZoom, rotateLess, rotateMore, zoomIn, zoomOut };
     }
   };
 </script>

diff --git a/packages/portal/src/composables/rotation.js b/packages/portal/src/composables/rotation.js
@@ -0,0 +1,27 @@
+import { ref } from 'vue';
+
+// current rotation in radians
+const rotation = ref(0);
+
+const reset = () => {
+  rotation.value = 0;
+};
+const rotateLess = () => {
+  rotation.value = rotation.value - (Math.PI / 2);
+};
+const rotateMore = () => {
+  rotation.value = rotation.value + (Math.PI / 2);
+};
+const setRotation = (value) => {
+  rotation.value = value;
+};
+
+export default function useRotation() {
+  return {
+    reset,
+    rotateLess,
+    rotateMore,
+    rotation,
+    setRotation
+  };
+}