Fix scroll to zoom, resize small images to fill

Setting the background to white is removed since it doesn't work well
with the zooming (Outside the image boundaries is still transparent)

Signed-off-by: ktprograms <ktprograms@gmail.com>

src/components/Images.vue

@@ -24,18 +24,14 @@
  <img
  :class="{
  dragging,
- loaded,
- zoomed: zoomRatio !== 1
+ 'animate-transition': animateTransition,
  }"
  :src="data"
  :style="{
- marginTop: shiftY + 'px',
- marginLeft: shiftX + 'px',
- maxHeight: zoomRatio * 100 + '%',
- maxWidth: zoomRatio * 100 + '%',
+ transform: 'translate(' + posX + 'px, ' + posY + 'px) scale(' + zoomRatio + ', ' + zoomRatio + ')',
  }"
  @load="updateImgSize"
- @wheel="updateZoom"
+ @wheel.prevent.stop="updateZoom"
  @dblclick.prevent="onDblclick"
  @mousedown.prevent="dragStart">
 </template>
@@ -60,20 +56,12 @@ export default {
  data() {
  return {
  dragging: false,
- shiftX: 0,
- shiftY: 0,
+ animateTransition: false,
  zoomRatio: 1,
+ posX: 0,
+ posY: 0,
  }
  },
- computed: {
- zoomHeight() {
- return Math.round(this.height * this.zoomRatio)
- },
- zoomWidth() {
- return Math.round(this.width * this.zoomRatio)
- },
- },
-
  asyncComputed: {
  data() {
  switch (this.mime) {
@@ -121,47 +109,46 @@ export default {
 
  /**
  * Handle zooming
+ * Code based on https://stackoverflow.com/a/46833254/15603854
  *
  * @param {Event} event the scroll event
  * @returns {null}
  */
  updateZoom(event) {
- event.stopPropagation()
- event.preventDefault()
-
- // scrolling position relative to the image
- const scrollX = event.clientX - this.$el.x - (this.width * this.zoomRatio / 2)
- const scrollY = event.clientY - this.$el.y - (this.height * this.zoomRatio / 2)
- const scrollPercX = Math.round(scrollX / (this.width * this.zoomRatio) * 100) / 100
- const scrollPercY = Math.round(scrollY / (this.height * this.zoomRatio) * 100) / 100
  const isZoomIn = event.deltaY < 0
-
- const newZoomRatio = isZoomIn
- ? Math.min(this.zoomRatio + 0.1, 5) // prevent too big zoom
- : Math.max(this.zoomRatio - 0.1, 1) // prevent too small zoom
-
+ const delta = isZoomIn ? 0.1 : -0.1
  // do not continue, img is back to its original state
- if (newZoomRatio === 1) {
+ if (this.zoomRatio + delta === 1) {
  return this.resetZoom()
  }
 
- // calc how much the img grow from its current size
- // and adjust the margin accordingly
- const growX = this.width * newZoomRatio - this.width * this.zoomRatio
- const growY = this.height * newZoomRatio - this.height * this.zoomRatio
-
- // compensate for existing margins
  this.disableSwipe()
- this.shiftX = this.shiftX + Math.round(-scrollPercX * growX)
- this.shiftY = this.shiftY + Math.round(-scrollPercY * growY)
- this.zoomRatio = newZoomRatio
+
+ // scrolling position in the page
+ const scrollX = event.clientX - this.$el.x
+ const scrollY = event.clientY - this.$el.y
+ // scrolling position relative to the image
+ const targetX = (scrollX - this.posX) / this.zoomRatio
+ const targetY = (scrollY - this.posY) / this.zoomRatio
+
+ // apply zoom
+ this.zoomRatio += delta
+ this.zoomRatio = Math.max(1, Math.min(5, this.zoomRatio))
+ // bounds checking: ^-smallest ^-largest zoom ratio
+
+ // calculate x and y based on zoom
+ this.posX = -targetX * this.zoomRatio + scrollX
+ this.posY = -targetY * this.zoomRatio + scrollY
  },
 
  resetZoom() {
+ this.animateTransition = true
  this.enableSwipe()
  this.zoomRatio = 1
- this.shiftX = 0
- this.shiftY = 0
+ this.posX = 0
+ this.posY = 0
+ // Animation is 100ms so give it double the time to finish
+ setTimeout(() => { this.animateTransition = false }, 200)
  },
 
  /**
@@ -170,10 +157,8 @@ export default {
  * @param {Event} event the event
  */
  dragStart(event) {
- const { pageX, pageY } = event
-
- this.dragX = pageX
- this.dragY = pageY
+ this.dragX = event.clientX
+ this.dragY = event.clientY
  this.dragging = true
  this.$el.onmouseup = this.dragEnd
  this.$el.onmousemove = this.dragHandler
@@ -186,72 +171,56 @@ export default {
  this.$el.onmousemove = null
  },
  dragHandler(event) {
- event.preventDefault()
- const { pageX, pageY } = event
+ const { clientX, clientY } = event
 
- if (this.dragging && this.zoomRatio > 1 && pageX > 0 && pageY > 0) {
- const moveX = this.shiftX + (pageX - this.dragX)
- const moveY = this.shiftY + (pageY - this.dragY)
- const growX = this.zoomWidth - this.width
- const growY = this.zoomHeight - this.height
+ if (this.dragging && this.zoomRatio > 1 && clientX > 0 && clientY > 0) {
+ this.posX += (clientX - this.dragX)
+ this.posY += (clientY - this.dragY)
 
- this.shiftX = Math.min(Math.max(moveX, -growX / 2), growX / 2)
- this.shiftY = Math.min(Math.max(moveY, -growY / 2), growX / 2)
- this.dragX = pageX
- this.dragY = pageY
+ this.dragX = clientX
+ this.dragY = clientY
  }
  },
+
+ /**
+ * Double click handler
+ */
  onDblclick() {
  if (this.zoomRatio > 1) {
  this.resetZoom()
  } else {
+ this.animateTransition = true
+ // 0.15 is half of the delta in zoom,
+ // so that multiplied by width/height centers the image
+ this.posX = -(this.$el.width * 0.15)
+ this.posY = -(this.$el.height * 0.15)
  this.zoomRatio = 1.3
+ // Animation is 100ms so give it double the time to finish
+ setTimeout(() => { this.animateTransition = false }, 200)
  }
  },
  },
 }
 </script>
 
 <style scoped lang="scss">
-$checkered-size: 8px;
-$checkered-color: #efefef;
-
 img {
- max-width: 100%;
- max-height: 100%;
  align-self: center;
  justify-self: center;
- // black while loading
- background-color: #000;
- // animate zooming/resize
- transition: height 100ms ease,
- width 100ms ease,
- margin-top 100ms ease,
- margin-left 100ms ease;
- // show checkered bg on hover if not currently zooming (but ok if zoomed)
- &:hover {
- background-image: linear-gradient(45deg, #{$checkered-color} 25%, transparent 25%),
- linear-gradient(45deg, transparent 75%, #{$checkered-color} 75%),
- linear-gradient(45deg, transparent 75%, #{$checkered-color} 75%),
- linear-gradient(45deg, #{$checkered-color} 25%, #fff 25%);
- background-size: 2 * $checkered-size 2 * $checkered-size;
- background-position: 0 0, 0 0, -#{$checkered-size} -#{$checkered-size}, $checkered-size $checkered-size;
- }
- &.loaded {
- // white once done loading
- background-color: #fff;
- }
- &.zoomed {
- position: absolute;
- max-height: none;
- max-width: none;
- z-index: 10010;
- cursor: move;
- }
+ position: absolute;
+ width: 100%;
+ height: 100vh;
+ object-fit: contain;
+ transform-origin: 0 0;
+ transition: none !important;
 
  &.dragging {
  transition: none !important;
  cursor: move;
  }
+
+ &.animate-transition {
+ transition: transform 100ms ease !important;
+ }
 }
 </style>