From a1e8c45d1ef8983288073a0df360b829dd2b0dd9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Thu, 7 Mar 2019 21:31:09 +0100
Subject: [PATCH 1/5] Zoom scrolling enhancement
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 src/components/Images.vue | 79 +++++++++++++++++++++++++++++++++++++--
 src/views/Viewer.vue      |  2 +
 2 files changed, 78 insertions(+), 3 deletions(-)

diff --git a/src/components/Images.vue b/src/components/Images.vue
index 5b33a81be..b978259e0 100644
--- a/src/components/Images.vue
+++ b/src/components/Images.vue
@@ -22,12 +22,17 @@
 
 <template>
 	<img
+		:class="{zoomed: zoomRatio !== 1}"
 		:src="data"
 		:style="{
-			height: height + 'px',
-			width: width + 'px'
+			height: zoomHeight + 'px',
+			width: zoomWidth + 'px',
+			marginTop: shiftY + 'px',
+			marginLeft: shiftX + 'px'
 		}"
-		@load="updateImgSize">
+		@load="updateImgSize"
+		@wheel="updateZoom"
+		@dblclick="resetZoom">
 </template>
 
 <script>
@@ -44,6 +49,21 @@ export default {
 	mixins: [
 		mime
 	],
+	data() {
+		return {
+			shiftX: 0,
+			shiftY: 0,
+			zoomRatio: 1
+		}
+	},
+	computed: {
+		zoomHeight() {
+			return Math.round(this.height * this.zoomRatio)
+		},
+		zoomWidth() {
+			return Math.round(this.width * this.zoomRatio)
+		}
+	},
 	asyncComputed: {
 		data() {
 			if (this.mime !== 'image/svg+xml') {
@@ -52,6 +72,14 @@ export default {
 			return this.getBase64FromImage()
 		}
 	},
+	watch: {
+		active: function(val, old) {
+			// the item was hidden before and is now the current view
+			if (val === true && old === false) {
+				this.resetZoom()
+			}
+		}
+	},
 	mounted() {
 		window.addEventListener('resize', debounce(() => {
 			this.updateImgSize()
@@ -80,6 +108,40 @@ export default {
 		async getBase64FromImage() {
 			const file = await axios.get(this.path)
 			return `data:${this.mime};base64,${btoa(file.data)}`
+		},
+
+		/**
+		 * Handle zooming
+		 *
+		 * @param {Event} event the scroll event
+		 */
+		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.2, 5)		// prevent too big zoom
+				: Math.max(this.zoomRatio - 0.2, 1)		// prevent too small zoom
+
+			// 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.shiftX = this.shiftX + Math.round(-scrollPercX * growX)
+			this.shiftY = this.shiftY + Math.round(-scrollPercY * growY)
+			this.zoomRatio = newZoomRatio
+		},
+		resetZoom() {
+			this.zoomRatio = 1
 		}
 	}
 }
@@ -94,6 +156,11 @@ img {
 	max-height: 100%;
 	align-self: center;
 	justify-self: center;
+	// animate zooming/resize
+	transition: height 100ms ease,
+		width 100ms ease,
+		margin-top 100ms ease,
+		margin-left 100ms ease;
 	&:hover {
 		background-image: linear-gradient(45deg, #{$checkered-color} 25%, transparent 25%),
 			linear-gradient(45deg, transparent 75%, #{$checkered-color} 75%),
@@ -102,5 +169,11 @@ img {
 		background-size: 2 * $checkered-size 2 * $checkered-size;
 		background-position: 0 0, 0 0, -#{$checkered-size} -#{$checkered-size}, $checkered-size $checkered-size;
 	}
+	&.zoomed {
+		position: absolute;
+		max-height: none;
+		max-width: none;
+		z-index: 10000;
+	}
 }
 </style>
diff --git a/src/views/Viewer.vue b/src/views/Viewer.vue
index f53e8a274..2c6c7d381 100644
--- a/src/views/Viewer.vue
+++ b/src/views/Viewer.vue
@@ -506,6 +506,8 @@ export default {
 		width: auto !important;
 		border-radius: 0 !important;
 		background-color: white;
+		justify-content: center;
+		align-items: center;
 	}
 
 	// dark bg while loading to avoid flashing white screen

From e07b6a7a77a5eb6ee38befbf9339ea2f1332482e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Fri, 8 Mar 2019 09:53:48 +0100
Subject: [PATCH 2/5] Zoom reset fix
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 src/components/Images.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/components/Images.vue b/src/components/Images.vue
index b978259e0..ecc16a363 100644
--- a/src/components/Images.vue
+++ b/src/components/Images.vue
@@ -114,6 +114,7 @@ export default {
 		 * Handle zooming
 		 *
 		 * @param {Event} event the scroll event
+		 * @returns {null}
 		 */
 		updateZoom(event) {
 			event.stopPropagation()
@@ -130,6 +131,11 @@ export default {
 				? Math.min(this.zoomRatio + 0.2, 5)		// prevent too big zoom
 				: Math.max(this.zoomRatio - 0.2, 1)		// prevent too small zoom
 
+			// do not continue, img is back to its original state
+			if (newZoomRatio === 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
@@ -140,8 +146,11 @@ export default {
 			this.shiftY = this.shiftY + Math.round(-scrollPercY * growY)
 			this.zoomRatio = newZoomRatio
 		},
+
 		resetZoom() {
 			this.zoomRatio = 1
+			this.shiftX = 0
+			this.shiftY = 0
 		}
 	}
 }

From d70c71b1de5ffa6684c46e61b6fb469bfb792a1a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Fri, 8 Mar 2019 10:59:30 +0100
Subject: [PATCH 3/5] Move zoomed image
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 src/components/Images.vue | 46 ++++++++++++++++++++++++++++++++++++++-
 1 file changed, 45 insertions(+), 1 deletion(-)

diff --git a/src/components/Images.vue b/src/components/Images.vue
index ecc16a363..23f76cdc2 100644
--- a/src/components/Images.vue
+++ b/src/components/Images.vue
@@ -22,7 +22,11 @@
 
 <template>
 	<img
-		:class="{zoomed: zoomRatio !== 1}"
+		:class="{
+			dragging,
+			zoomed: zoomRatio !== 1
+		}"
+		:draggable="true"
 		:src="data"
 		:style="{
 			height: zoomHeight + 'px',
@@ -30,6 +34,9 @@
 			marginTop: shiftY + 'px',
 			marginLeft: shiftX + 'px'
 		}"
+		@drag="dragHandler"
+		@dragstart="dragStart"
+		@dragend="dragEnd"
 		@load="updateImgSize"
 		@wheel="updateZoom"
 		@dblclick="resetZoom">
@@ -51,6 +58,7 @@ export default {
 	],
 	data() {
 		return {
+			dragging: false,
 			shiftX: 0,
 			shiftY: 0,
 			zoomRatio: 1
@@ -151,6 +159,36 @@ export default {
 			this.zoomRatio = 1
 			this.shiftX = 0
 			this.shiftY = 0
+		},
+
+		/**
+		 * Dragging handlers
+		 *
+		 * @param {Event} event the event
+		 * @returns {Boolean} false
+		 */
+		dragStart(event) {
+			// cursor hack
+			event.dataTransfer.effectAllowed = 'move'
+			this.dragX = event.pageX
+			this.dragY = event.pageY
+			this.dragging = true
+			return false
+		},
+		dragEnd() {
+			this.dragging = false
+		},
+		dragHandler({ pageX, pageY }) {
+			if (this.zoomRatio > 1) {
+				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
+				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
+			}
 		}
 	}
 }
@@ -183,6 +221,12 @@ img {
 		max-height: none;
 		max-width: none;
 		z-index: 10000;
+		cursor: move;
+	}
+
+	&.dragging {
+		transition: none !important;
+		cursor: move;
 	}
 }
 </style>

From 84e4130d8294d895592af5b590f15a27f0e507cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Fri, 8 Mar 2019 11:24:53 +0100
Subject: [PATCH 4/5] Fix dragging out of window and FF dragging
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 src/components/Images.vue | 39 ++++++++++++++++++++++++---------------
 1 file changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/components/Images.vue b/src/components/Images.vue
index 23f76cdc2..ce4084ffb 100644
--- a/src/components/Images.vue
+++ b/src/components/Images.vue
@@ -26,7 +26,6 @@
 			dragging,
 			zoomed: zoomRatio !== 1
 		}"
-		:draggable="true"
 		:src="data"
 		:style="{
 			height: zoomHeight + 'px',
@@ -34,12 +33,10 @@
 			marginTop: shiftY + 'px',
 			marginLeft: shiftX + 'px'
 		}"
-		@drag="dragHandler"
-		@dragstart="dragStart"
-		@dragend="dragEnd"
 		@load="updateImgSize"
 		@wheel="updateZoom"
-		@dblclick="resetZoom">
+		@dblclick="resetZoom"
+		@mousedown="dragStart">
 </template>
 
 <script>
@@ -89,9 +86,12 @@ export default {
 		}
 	},
 	mounted() {
+		// update image size on window resize
 		window.addEventListener('resize', debounce(() => {
 			this.updateImgSize()
 		}, 100))
+		// end the dragging if your mouse go out of the content
+		window.addEventListener('mouseout', this.dragEnd)
 	},
 	methods: {
 		// Updates the dimensions of the modal
@@ -165,25 +165,34 @@ export default {
 		 * Dragging handlers
 		 *
 		 * @param {Event} event the event
-		 * @returns {Boolean} false
 		 */
 		dragStart(event) {
-			// cursor hack
-			event.dataTransfer.effectAllowed = 'move'
-			this.dragX = event.pageX
-			this.dragY = event.pageY
+			event.preventDefault()
+			const { pageX, pageY } = event
+
+			this.dragX = pageX
+			this.dragY = pageY
 			this.dragging = true
-			return false
+			this.$el.onmouseup = this.dragEnd
+			this.$el.onmousemove = this.dragHandler
 		},
-		dragEnd() {
+		dragEnd(event) {
+			event.preventDefault()
+
 			this.dragging = false
+			this.$el.onmouseup = null
+			this.$el.onmousemove = null
 		},
-		dragHandler({ pageX, pageY }) {
-			if (this.zoomRatio > 1) {
+		dragHandler(event) {
+			event.preventDefault()
+			const { pageX, pageY } = 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
+
 				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
@@ -220,7 +229,7 @@ img {
 		position: absolute;
 		max-height: none;
 		max-width: none;
-		z-index: 10000;
+		z-index: 10010;
 		cursor: move;
 	}
 

From e382fc6f5583861e6ff1e32fe5e25d5dd613f378 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Thu, 14 Mar 2019 15:50:24 +0100
Subject: [PATCH 5/5] Toggle swipe
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 src/components/Images.vue |  6 ++++--
 src/mixins/Mime.js        | 10 ++++++++++
 src/views/Viewer.vue      |  5 +++--
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/components/Images.vue b/src/components/Images.vue
index ce4084ffb..041e99ede 100644
--- a/src/components/Images.vue
+++ b/src/components/Images.vue
@@ -136,8 +136,8 @@ export default {
 			const isZoomIn = event.deltaY < 0
 
 			const newZoomRatio = isZoomIn
-				? Math.min(this.zoomRatio + 0.2, 5)		// prevent too big zoom
-				: Math.max(this.zoomRatio - 0.2, 1)		// prevent too small zoom
+				? Math.min(this.zoomRatio + 0.1, 5)		// prevent too big zoom
+				: Math.max(this.zoomRatio - 0.1, 1)		// prevent too small zoom
 
 			// do not continue, img is back to its original state
 			if (newZoomRatio === 1) {
@@ -150,12 +150,14 @@ export default {
 			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
 		},
 
 		resetZoom() {
+			this.enableSwipe()
 			this.zoomRatio = 1
 			this.shiftX = 0
 			this.shiftY = 0
diff --git a/src/mixins/Mime.js b/src/mixins/Mime.js
index f88f81458..bbad4f053 100644
--- a/src/mixins/Mime.js
+++ b/src/mixins/Mime.js
@@ -33,6 +33,10 @@ export default {
 		mime: {
 			type: String,
 			required: true
+		},
+		canSwipe: {
+			type: Boolean,
+			default: true
 		}
 	},
 
@@ -93,6 +97,12 @@ export default {
 					this.width = contentWidth
 				}
 			}
+		},
+		enableSwipe() {
+			this.$emit('update:canSwipe', true)
+		},
+		disableSwipe() {
+			this.$emit('update:canSwipe', false)
 		}
 	}
 }
diff --git a/src/views/Viewer.vue b/src/views/Viewer.vue
index 2c6c7d381..123256a15 100644
--- a/src/views/Viewer.vue
+++ b/src/views/Viewer.vue
@@ -31,7 +31,7 @@
 		:has-previous="hasPrevious"
 		:has-next="hasNext"
 		:title="currentFileName"
-		:disable-swipe="disableSwipe"
+		:enable-swipe="canSwipe"
 		:size="isMobile ? 'full' : 'large'"
 		:style="{width: showSidebar ? `calc(100% - ${sidebarWidth}px)` : null}"
 		@close="close"
@@ -60,6 +60,7 @@
 			:mime="currentFile.mime"
 			:path="getPath(currentFile)"
 			:active="true"
+			:can-swipe.sync="canSwipe"
 			class="file-view"
 			@loaded="doneLoading"
 			@error="currentFailed" />
@@ -119,7 +120,7 @@ export default {
 		showSidebar: false,
 		sidebarWidth: 0,
 
-		disableSwipe: false,
+		canSwipe: true,
 		failed: false,
 		loading: true,