From 2700c76392190e61aa03fae3cb326375b2ba4e2c Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Wed, 17 Jan 2024 13:26:22 +0100
Subject: [PATCH 1/8] Add image reset button to reset zoom, rotation and
 position

---
 packages/web-app-preview/src/App.vue          | 51 +++++++++++++------
 .../src/components/MediaControls.vue          | 22 +++++++-
 .../src/components/Sources/MediaImage.vue     | 42 +++++++++++++--
 3 files changed, 95 insertions(+), 20 deletions(-)

diff --git a/packages/web-app-preview/src/App.vue b/packages/web-app-preview/src/App.vue
index a01ae1f9e4b..ae36210205c 100644
--- a/packages/web-app-preview/src/App.vue
+++ b/packages/web-app-preview/src/App.vue
@@ -48,6 +48,9 @@
               :file="activeMediaFileCached"
               :current-image-rotation="currentImageRotation"
               :current-image-zoom="currentImageZoom"
+              :current-image-position-x="currentImagePositionX"
+              :current-image-position-y="currentImagePositionY"
+              @pan-change="onPanChanged"
             />
             <media-video
               v-else-if="activeMediaFileCached.isVideo"
@@ -71,6 +74,7 @@
             :current-image-zoom="currentImageZoom"
             @set-rotation="currentImageRotation = $event"
             @set-zoom="currentImageZoom = $event"
+            @reset-image="resetImage"
             @toggle-full-screen="toggleFullscreenMode"
             @toggle-previous="prev"
             @toggle-next="next"
@@ -152,6 +156,14 @@ export default defineComponent({
     const activeIndex = ref()
     const cachedFiles = ref<CachedFile[]>([])
     const folderLoaded = ref(false)
+    const isFileContentError = ref(false)
+    const isAutoPlayEnabled = ref(true)
+    const toPreloadImageIds = ref([])
+    const currentImageZoom = ref(1)
+    const currentImageRotation = ref(0)
+    const currentImagePositionX = ref(0)
+    const currentImagePositionY = ref(0)
+    const preloadImageCount = ref(10)
 
     const sortBy = computed(() => {
       if (!unref(contextRouteQuery)) {
@@ -183,6 +195,18 @@ export default defineComponent({
       }
     }
 
+    const onPanChanged = ({ x, y }: { x: number; y: number }) => {
+      currentImagePositionX.value = x
+      currentImagePositionY.value = y
+    }
+
+    const resetImage = () => {
+      currentImageZoom.value = 1
+      currentImageRotation.value = 0
+      currentImagePositionX.value = 0
+      currentImagePositionY.value = 0
+    }
+
     const filteredFiles = computed<Resource[]>(() => {
       if (!unref(activeFiles)) {
         return []
@@ -280,23 +304,19 @@ export default defineComponent({
       toggleFullscreenMode,
       updateLocalHistory,
       fileId,
-      space
-    }
-  },
-  data() {
-    return {
-      isFileContentError: false,
-      isAutoPlayEnabled: true,
-
-      toPreloadImageIds: [],
-
-      currentImageZoom: 1,
-      currentImageRotation: 0,
-
-      preloadImageCount: 10
+      space,
+      resetImage,
+      isFileContentError,
+      isAutoPlayEnabled,
+      toPreloadImageIds,
+      currentImageZoom,
+      currentImageRotation,
+      currentImagePositionX,
+      currentImagePositionY,
+      onPanChanged,
+      preloadImageCount
     }
   },
-
   computed: {
     pageTitle() {
       return this.$gettext('Preview for %{currentMediumName}', {
@@ -544,6 +564,7 @@ export default defineComponent({
     margin: 10px auto;
   }
 }
+
 @media (max-width: $oc-breakpoint-medium-default) {
   .preview-sidebar-open {
     display: none;
diff --git a/packages/web-app-preview/src/components/MediaControls.vue b/packages/web-app-preview/src/components/MediaControls.vue
index a235ee27a8e..440ac12a032 100644
--- a/packages/web-app-preview/src/components/MediaControls.vue
+++ b/packages/web-app-preview/src/components/MediaControls.vue
@@ -102,6 +102,18 @@
             <oc-icon fill-type="line" name="clockwise" variation="inherit" />
           </oc-button>
         </div>
+        <div class="oc-ml-m">
+          <oc-button
+            v-oc-tooltip="imageResetDescription"
+            class="preview-controls-rotate-right"
+            appearance="raw-inverse"
+            variation="brand"
+            :aria-label="imageResetDescription"
+            @click="$emit('resetImage')"
+          >
+            <oc-icon fill-type="line" name="refresh" variation="inherit" />
+          </oc-button>
+        </div>
       </div>
     </div>
   </div>
@@ -143,7 +155,14 @@ export default defineComponent({
       default: 0
     }
   },
-  emits: ['setRotation', 'setZoom', 'toggleFullScreen', 'toggleNext', 'togglePrevious'],
+  emits: [
+    'setRotation',
+    'setZoom',
+    'toggleFullScreen',
+    'toggleNext',
+    'togglePrevious',
+    'resetImage'
+  ],
   setup(props, { emit }) {
     const { $gettext } = useGettext()
 
@@ -189,6 +208,7 @@ export default defineComponent({
       exitFullScreenDescription: $gettext('Exit full screen mode'),
       imageShrinkDescription: $gettext('Shrink the image'),
       imageZoomDescription: $gettext('Enlarge the image'),
+      imageResetDescription: $gettext('Reset image zoom, rotation and position'),
       imageOriginalSizeDescription: $gettext('Show the image at its normal size'),
       imageRotateLeftDescription: $gettext('Rotate the image 90 degrees to the left'),
       imageRotateRightDescription: $gettext('Rotate the image 90 degrees to the right'),
diff --git a/packages/web-app-preview/src/components/Sources/MediaImage.vue b/packages/web-app-preview/src/components/Sources/MediaImage.vue
index 854e8de2d1e..e6420bd3974 100644
--- a/packages/web-app-preview/src/components/Sources/MediaImage.vue
+++ b/packages/web-app-preview/src/components/Sources/MediaImage.vue
@@ -11,8 +11,9 @@
 <script lang="ts">
 import { CachedFile } from '../../helpers/types'
 import { defineComponent, PropType, onMounted, ref, VNodeRef, watch, unref, nextTick } from 'vue'
-import type { PanzoomObject } from '@panzoom/panzoom'
+import type { PanzoomEventDetail, PanzoomObject } from '@panzoom/panzoom'
 import Panzoom from '@panzoom/panzoom'
+import { ElementRef } from 'react'
 
 export default defineComponent({
   name: 'MediaImage',
@@ -28,14 +29,32 @@ export default defineComponent({
     currentImageRotation: {
       type: Number,
       required: true
+    },
+    currentImagePositionX: {
+      type: Number,
+      required: true
+    },
+    currentImagePositionY: {
+      type: Number,
+      required: true
     }
   },
-  setup(props) {
+  emits: ['panChange'],
+  setup(props, { emit }) {
     const img = ref<VNodeRef>()
     const panzoom = ref<PanzoomObject>()
 
+    const onPanZoomChange = (event) => {
+      const eventDetail: PanzoomEventDetail = event.detail
+      emit('panChange', { x: eventDetail.x, y: eventDetail.y })
+    }
+
     const initPanzoom = async () => {
       if (unref(panzoom)) {
+        ;(unref(img) as unknown as HTMLElement).removeEventListener(
+          'panzoomchange',
+          onPanZoomChange
+        )
         unref(panzoom)?.destroy()
       }
 
@@ -78,13 +97,27 @@ export default defineComponent({
           )
         }
       })
+      ;(unref(img) as unknown as HTMLElement).addEventListener('panzoomchange', onPanZoomChange)
     }
 
     watch(img, initPanzoom)
-    onMounted(initPanzoom)
+    onMounted(() => initPanzoom)
 
     watch([() => props.currentImageZoom, () => props.currentImageRotation], () => {
-      unref(panzoom).zoom(props.currentImageZoom)
+      unref(panzoom).zoom(props.currentImageZoom, { animate: false })
+    })
+
+    watch([() => props.currentImagePositionX, () => props.currentImagePositionY], () => {
+      const currentPan = unref(panzoom).getPan()
+
+      if (
+        currentPan.x !== props.currentImagePositionX ||
+        currentPan.y !== props.currentImagePositionY
+      ) {
+        unref(panzoom).pan(props.currentImagePositionX, props.currentImagePositionY, {
+          animate: false
+        })
+      }
     })
 
     return {
@@ -97,5 +130,6 @@ export default defineComponent({
 img {
   max-width: 80%;
   max-height: 80%;
+  cursor: move;
 }
 </style>

From 21ed550f45c1eb4b4311b69ffb1bcbc78f1a6dfa Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Wed, 17 Jan 2024 13:29:41 +0100
Subject: [PATCH 2/8] Lint

---
 .../src/components/Sources/MediaImage.vue             | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/web-app-preview/src/components/Sources/MediaImage.vue b/packages/web-app-preview/src/components/Sources/MediaImage.vue
index e6420bd3974..6252df64be7 100644
--- a/packages/web-app-preview/src/components/Sources/MediaImage.vue
+++ b/packages/web-app-preview/src/components/Sources/MediaImage.vue
@@ -13,7 +13,6 @@ import { CachedFile } from '../../helpers/types'
 import { defineComponent, PropType, onMounted, ref, VNodeRef, watch, unref, nextTick } from 'vue'
 import type { PanzoomEventDetail, PanzoomObject } from '@panzoom/panzoom'
 import Panzoom from '@panzoom/panzoom'
-import { ElementRef } from 'react'
 
 export default defineComponent({
   name: 'MediaImage',
@@ -62,7 +61,7 @@ export default defineComponent({
       await nextTick()
 
       panzoom.value = Panzoom(unref(img) as any, {
-        animate: true,
+        animate: false,
         duration: 300,
         overflow: 'auto',
         maxScale: 10,
@@ -101,10 +100,10 @@ export default defineComponent({
     }
 
     watch(img, initPanzoom)
-    onMounted(() => initPanzoom)
+    onMounted(initPanzoom)
 
     watch([() => props.currentImageZoom, () => props.currentImageRotation], () => {
-      unref(panzoom).zoom(props.currentImageZoom, { animate: false })
+      unref(panzoom).zoom(props.currentImageZoom)
     })
 
     watch([() => props.currentImagePositionX, () => props.currentImagePositionY], () => {
@@ -114,9 +113,7 @@ export default defineComponent({
         currentPan.x !== props.currentImagePositionX ||
         currentPan.y !== props.currentImagePositionY
       ) {
-        unref(panzoom).pan(props.currentImagePositionX, props.currentImagePositionY, {
-          animate: false
-        })
+        unref(panzoom).pan(props.currentImagePositionX, props.currentImagePositionY)
       }
     })
 

From eb2369110f411feaf6530e2c1972d2c15ee892ee Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Wed, 17 Jan 2024 13:38:04 +0100
Subject: [PATCH 3/8] Add unit tests

---
 .../src/components/MediaControls.vue             |  2 +-
 .../tests/unit/components/MediaControls.spec.ts  | 16 +++++++++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/web-app-preview/src/components/MediaControls.vue b/packages/web-app-preview/src/components/MediaControls.vue
index 440ac12a032..f517142d7e2 100644
--- a/packages/web-app-preview/src/components/MediaControls.vue
+++ b/packages/web-app-preview/src/components/MediaControls.vue
@@ -105,7 +105,7 @@
         <div class="oc-ml-m">
           <oc-button
             v-oc-tooltip="imageResetDescription"
-            class="preview-controls-rotate-right"
+            class="preview-controls-image-reset"
             appearance="raw-inverse"
             variation="brand"
             :aria-label="imageResetDescription"
diff --git a/packages/web-app-preview/tests/unit/components/MediaControls.spec.ts b/packages/web-app-preview/tests/unit/components/MediaControls.spec.ts
index 565efd84147..c07aa6753e0 100644
--- a/packages/web-app-preview/tests/unit/components/MediaControls.spec.ts
+++ b/packages/web-app-preview/tests/unit/components/MediaControls.spec.ts
@@ -11,7 +11,8 @@ const selectors = {
   controlsImageOriginalSize: '.preview-controls-image-original-size',
   controlsImageZoom: '.preview-controls-image-zoom',
   controlsRotateLeft: '.preview-controls-rotate-left',
-  controlsRotateRight: '.preview-controls-rotate-right'
+  controlsRotateRight: '.preview-controls-rotate-right',
+  controlsImageReset: '.preview-controls-image-reset'
 }
 
 describe('MediaControls component', () => {
@@ -107,6 +108,19 @@ describe('MediaControls component', () => {
       })
     })
   })
+  describe('reset', () => {
+    describe('reset button', () => {
+      it('exists if file is an image', () => {
+        const { wrapper } = getWrapper({ isImage: true })
+        expect(wrapper.find(selectors.controlsImageReset).exists()).toBeTruthy()
+      })
+      it('emits "resetImage"-event on click', async () => {
+        const { wrapper } = getWrapper({ isImage: true })
+        await wrapper.find(selectors.controlsImageReset).trigger('click')
+        expect(wrapper.emitted('resetImage').length).toBeDefined()
+      })
+    })
+  })
 })
 
 function getWrapper(props = {}) {

From cc3a12c98ec0e8893734281507c1bce3226eee6b Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Wed, 17 Jan 2024 13:48:26 +0100
Subject: [PATCH 4/8] remove unused code

---
 .../src/components/Sources/MediaImage.vue                | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/packages/web-app-preview/src/components/Sources/MediaImage.vue b/packages/web-app-preview/src/components/Sources/MediaImage.vue
index 6252df64be7..c8d7b6324b2 100644
--- a/packages/web-app-preview/src/components/Sources/MediaImage.vue
+++ b/packages/web-app-preview/src/components/Sources/MediaImage.vue
@@ -107,14 +107,7 @@ export default defineComponent({
     })
 
     watch([() => props.currentImagePositionX, () => props.currentImagePositionY], () => {
-      const currentPan = unref(panzoom).getPan()
-
-      if (
-        currentPan.x !== props.currentImagePositionX ||
-        currentPan.y !== props.currentImagePositionY
-      ) {
-        unref(panzoom).pan(props.currentImagePositionX, props.currentImagePositionY)
-      }
+      unref(panzoom).pan(props.currentImagePositionX, props.currentImagePositionY)
     })
 
     return {

From ad149d1066f64c83dc26c89160e0a43725b58c1f Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Wed, 17 Jan 2024 13:59:33 +0100
Subject: [PATCH 5/8] change text

---
 .../web-app-preview/src/components/MediaControls.vue     | 2 +-
 .../src/components/Sources/MediaImage.vue                | 9 ++++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/web-app-preview/src/components/MediaControls.vue b/packages/web-app-preview/src/components/MediaControls.vue
index f517142d7e2..1994a16ac18 100644
--- a/packages/web-app-preview/src/components/MediaControls.vue
+++ b/packages/web-app-preview/src/components/MediaControls.vue
@@ -208,7 +208,7 @@ export default defineComponent({
       exitFullScreenDescription: $gettext('Exit full screen mode'),
       imageShrinkDescription: $gettext('Shrink the image'),
       imageZoomDescription: $gettext('Enlarge the image'),
-      imageResetDescription: $gettext('Reset image zoom, rotation and position'),
+      imageResetDescription: $gettext('Reset'),
       imageOriginalSizeDescription: $gettext('Show the image at its normal size'),
       imageRotateLeftDescription: $gettext('Rotate the image 90 degrees to the left'),
       imageRotateRightDescription: $gettext('Rotate the image 90 degrees to the right'),
diff --git a/packages/web-app-preview/src/components/Sources/MediaImage.vue b/packages/web-app-preview/src/components/Sources/MediaImage.vue
index c8d7b6324b2..6252df64be7 100644
--- a/packages/web-app-preview/src/components/Sources/MediaImage.vue
+++ b/packages/web-app-preview/src/components/Sources/MediaImage.vue
@@ -107,7 +107,14 @@ export default defineComponent({
     })
 
     watch([() => props.currentImagePositionX, () => props.currentImagePositionY], () => {
-      unref(panzoom).pan(props.currentImagePositionX, props.currentImagePositionY)
+      const currentPan = unref(panzoom).getPan()
+
+      if (
+        currentPan.x !== props.currentImagePositionX ||
+        currentPan.y !== props.currentImagePositionY
+      ) {
+        unref(panzoom).pan(props.currentImagePositionX, props.currentImagePositionY)
+      }
     })
 
     return {

From 801ff46c70ed646795f7705eddadc76a06f926e9 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Wed, 17 Jan 2024 14:56:10 +0100
Subject: [PATCH 6/8] Fix unit tests

---
 packages/web-app-preview/tests/unit/app.spec.ts | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/web-app-preview/tests/unit/app.spec.ts b/packages/web-app-preview/tests/unit/app.spec.ts
index 62b4e609fce..2a467601259 100644
--- a/packages/web-app-preview/tests/unit/app.spec.ts
+++ b/packages/web-app-preview/tests/unit/app.spec.ts
@@ -85,6 +85,7 @@ describe('Preview app', () => {
       await nextTick()
 
       wrapper.vm.toPreloadImageIds = []
+      wrapper.vm.preloadImageCount = 3
       wrapper.vm.setActiveFile('personal/admin/sleeping_dog.gif')
 
       await nextTick()
@@ -119,11 +120,6 @@ function createShallowMountWrapper() {
   mocks.$previewService.loadPreview.mockResolvedValue('')
   return {
     wrapper: shallowMount(App, {
-      data: function () {
-        return {
-          preloadImageCount: 3
-        }
-      },
       global: {
         plugins: [...defaultPlugins(), store],
         mocks,

From 2508f973d2b2c9f633ec1a2a8990618a6617e8c7 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Wed, 17 Jan 2024 19:15:05 +0100
Subject: [PATCH 7/8] Add changelog item

---
 .../enhancement-preview-app-add-reset-button-for-images     | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 changelog/unreleased/enhancement-preview-app-add-reset-button-for-images

diff --git a/changelog/unreleased/enhancement-preview-app-add-reset-button-for-images b/changelog/unreleased/enhancement-preview-app-add-reset-button-for-images
new file mode 100644
index 00000000000..b10957228f2
--- /dev/null
+++ b/changelog/unreleased/enhancement-preview-app-add-reset-button-for-images
@@ -0,0 +1,6 @@
+Enhancement: Preview app add reset button for images
+
+We've added a reset button in the preview app for images to reset rotation, zoom and position.
+
+https://github.com/owncloud/web/pull/10356
+https://github.com/owncloud/web/issues/9840

From c2d58f91dd588dd1bb94bc5030a714cc02728b94 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Wed, 17 Jan 2024 19:21:05 +0100
Subject: [PATCH 8/8] Improve code

---
 packages/web-app-preview/src/App.vue             | 11 ++++++-----
 .../src/components/Sources/MediaImage.vue        | 16 ++++------------
 2 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/packages/web-app-preview/src/App.vue b/packages/web-app-preview/src/App.vue
index ae36210205c..f7175cfaa75 100644
--- a/packages/web-app-preview/src/App.vue
+++ b/packages/web-app-preview/src/App.vue
@@ -50,7 +50,7 @@
               :current-image-zoom="currentImageZoom"
               :current-image-position-x="currentImagePositionX"
               :current-image-position-y="currentImagePositionY"
-              @pan-change="onPanChanged"
+              @pan-zoom-change="onPanZoomChanged"
             />
             <media-video
               v-else-if="activeMediaFileCached.isVideo"
@@ -115,6 +115,7 @@ import { CachedFile } from './helpers/types'
 import AppBanner from '@ownclouders/web-pkg/src/components/AppBanner.vue'
 import { watch } from 'vue'
 import { getCurrentInstance } from 'vue'
+import { PanzoomEventDetail } from '@panzoom/panzoom'
 
 export const appId = 'preview'
 
@@ -195,9 +196,9 @@ export default defineComponent({
       }
     }
 
-    const onPanChanged = ({ x, y }: { x: number; y: number }) => {
-      currentImagePositionX.value = x
-      currentImagePositionY.value = y
+    const onPanZoomChanged = ({ detail }: { detail: PanzoomEventDetail }) => {
+      currentImagePositionX.value = detail.x
+      currentImagePositionY.value = detail.y
     }
 
     const resetImage = () => {
@@ -313,7 +314,7 @@ export default defineComponent({
       currentImageRotation,
       currentImagePositionX,
       currentImagePositionY,
-      onPanChanged,
+      onPanZoomChanged,
       preloadImageCount
     }
   },
diff --git a/packages/web-app-preview/src/components/Sources/MediaImage.vue b/packages/web-app-preview/src/components/Sources/MediaImage.vue
index 6252df64be7..ab3754c29fc 100644
--- a/packages/web-app-preview/src/components/Sources/MediaImage.vue
+++ b/packages/web-app-preview/src/components/Sources/MediaImage.vue
@@ -11,7 +11,7 @@
 <script lang="ts">
 import { CachedFile } from '../../helpers/types'
 import { defineComponent, PropType, onMounted, ref, VNodeRef, watch, unref, nextTick } from 'vue'
-import type { PanzoomEventDetail, PanzoomObject } from '@panzoom/panzoom'
+import type { PanzoomObject } from '@panzoom/panzoom'
 import Panzoom from '@panzoom/panzoom'
 
 export default defineComponent({
@@ -38,14 +38,13 @@ export default defineComponent({
       required: true
     }
   },
-  emits: ['panChange'],
+  emits: ['panZoomChange'],
   setup(props, { emit }) {
     const img = ref<VNodeRef>()
     const panzoom = ref<PanzoomObject>()
 
     const onPanZoomChange = (event) => {
-      const eventDetail: PanzoomEventDetail = event.detail
-      emit('panChange', { x: eventDetail.x, y: eventDetail.y })
+      emit('panZoomChange', event)
     }
 
     const initPanzoom = async () => {
@@ -107,14 +106,7 @@ export default defineComponent({
     })
 
     watch([() => props.currentImagePositionX, () => props.currentImagePositionY], () => {
-      const currentPan = unref(panzoom).getPan()
-
-      if (
-        currentPan.x !== props.currentImagePositionX ||
-        currentPan.y !== props.currentImagePositionY
-      ) {
-        unref(panzoom).pan(props.currentImagePositionX, props.currentImagePositionY)
-      }
+      unref(panzoom).pan(props.currentImagePositionX, props.currentImagePositionY)
     })
 
     return {