Add image reset button to reset zoom, rotation and position

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

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-zoom-change="onPanZoomChanged"
             />
             <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"
@@ -111,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'
 
@@ -152,6 +157,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 +196,18 @@ export default defineComponent({
       }
     }
 
+    const onPanZoomChanged = ({ detail }: { detail: PanzoomEventDetail }) => {
+      currentImagePositionX.value = detail.x
+      currentImagePositionY.value = detail.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 +305,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,
+      onPanZoomChanged,
+      preloadImageCount
     }
   },
-
   computed: {
     pageTitle() {
       return this.$gettext('Preview for %{currentMediumName}', {
@@ -544,6 +565,7 @@ export default defineComponent({
     margin: 10px auto;
   }
 }
+
 @media (max-width: $oc-breakpoint-medium-default) {
   .preview-sidebar-open {
     display: none;

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-image-reset"
+            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'),
       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'),

packages/web-app-preview/src/components/Sources/MediaImage.vue

@@ -28,22 +28,39 @@ export default defineComponent({
     currentImageRotation: {
       type: Number,
       required: true
+    },
+    currentImagePositionX: {
+      type: Number,
+      required: true
+    },
+    currentImagePositionY: {
+      type: Number,
+      required: true
     }
   },
-  setup(props) {
+  emits: ['panZoomChange'],
+  setup(props, { emit }) {
     const img = ref<VNodeRef>()
     const panzoom = ref<PanzoomObject>()
 
+    const onPanZoomChange = (event) => {
+      emit('panZoomChange', event)
+    }
+
     const initPanzoom = async () => {
       if (unref(panzoom)) {
+        ;(unref(img) as unknown as HTMLElement).removeEventListener(
+          'panzoomchange',
+          onPanZoomChange
+        )
         unref(panzoom)?.destroy()
       }
 
       // wait for next tick until image is rendered
       await nextTick()
 
       panzoom.value = Panzoom(unref(img) as any, {
-        animate: true,
+        animate: false,
         duration: 300,
         overflow: 'auto',
         maxScale: 10,
@@ -78,6 +95,7 @@ export default defineComponent({
           )
         }
       })
+      ;(unref(img) as unknown as HTMLElement).addEventListener('panzoomchange', onPanZoomChange)
     }
 
     watch(img, initPanzoom)
@@ -87,6 +105,10 @@ export default defineComponent({
       unref(panzoom).zoom(props.currentImageZoom)
     })
 
+    watch([() => props.currentImagePositionX, () => props.currentImagePositionY], () => {
+      unref(panzoom).pan(props.currentImagePositionX, props.currentImagePositionY)
+    })
+
     return {
       img
     }
@@ -97,5 +119,6 @@ export default defineComponent({
 img {
   max-width: 80%;
   max-height: 80%;
+  cursor: move;
 }
 </style>

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,

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 = {}) {