New: Improved detection of image border when zoom is applied

CHANGELOG.md

@@ -13,7 +13,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Option to start OpenComic directly in last reading [`00cb8c7`](https://github.com/ollm/OpenComic/commit/00cb8c7da9eb8345aaec8faa3b5c91953c2350dd)
 - Recently opened page [`d2f3065`](https://github.com/ollm/OpenComic/commit/d2f30653f506993a45e49ad5e7e5e8434c33a9be)
 - Option to move zoom and scroll whit mouse [`e8cc79c`](https://github.com/ollm/OpenComic/commit/e8cc79cbddd23ff7d47b7046190cecbad199d3c2)
-- Improved touch screen navigation (swipe gesture, 2 finger zoom and reset zoom with 2 finger click)
+- Improved touch screen navigation (swipe gesture, 2 finger zoom and reset zoom with 2 finger click) [`f848463`](https://github.com/ollm/OpenComic/commit/f84846399f1521c736b9b6e048f204513ac304da)
+- Improved detection of image border when zoom is applied
 
 ##### 🐛 Bug Fixes
 

scripts/reading.js

@@ -930,7 +930,7 @@ function goToIndex(index, animation = true, nextPrevious = false, end = false)
 
 		if((readingViewIs('scroll') && (_config.readingViewAdjustToWidth || _config.readingWebtoon)) && pageVisibilityIndex !== false)
 		{
-			imgHeight = image.height() + _config.readingMargin.top;
+			imgHeight = largerImage.height + _config.readingMargin.top;
 
 			if(imgHeight > contentHeight)
 			{
@@ -1559,6 +1559,9 @@ function applyScale(animation = true, scale = 1, center = false, zoomOut = false
 				haveZoom = true;
 			}
 
+			let withLimits = notCrossZoomLimits(translateX, translateY, scale);
+			translateX = withLimits.x;
+
 			dom.this(contentRight).find('.reading-body > div, .reading-lens > div > div', true).css({
 				transition: 'transform '+animationDurationS+'s, z-index '+animationDurationS+'s',
 				transform: 'translateX('+app.roundDPR(translateX)+'px) translateY('+app.roundDPR(translateY)+'px) scale('+scale+')',
@@ -1601,6 +1604,8 @@ function applyScale(animation = true, scale = 1, center = false, zoomOut = false
 
 				fixBlurOnZoom(scale);
 
+				applyScaleST = false;
+
 			}, animationDurationS * 1000 + 100);
 		}
 		else
@@ -1645,6 +1650,11 @@ function applyScale(animation = true, scale = 1, center = false, zoomOut = false
 				haveZoom = true;
 			}
 
+			let withLimits = notCrossZoomLimits(translateX, translateY, scale);
+
+			translateX = withLimits.x;
+			translateY = withLimits.y;
+
 			dom.this(contentRight).find('.image-position'+currentZoomIndex, true).css({
 				transition: 'transform '+animationDurationS+'s, z-index '+animationDurationS+'s',
 				transform: 'translateX('+app.roundDPR(translateX)+'px) translateY('+app.roundDPR(translateY)+'px) scale('+scale+')',
@@ -1663,11 +1673,21 @@ function applyScale(animation = true, scale = 1, center = false, zoomOut = false
 
 				fixBlurOnZoom(scale, currentZoomIndex);
 
+				applyScaleST = false;
+
 			}, animationDurationS * 1000 + 100);
 		}
 
-		zoomMoveData.x = currentPageXY.x;
-		zoomMoveData.y = currentPageXY.y;
+		if(center)
+		{
+			zoomMoveData.x = (originalRect.left + originalRect.width / 2) - (translateX / scale);
+			zoomMoveData.y = (originalRect.top + originalRect.height / 2) - (translateY / scale);
+		}
+		else
+		{
+			zoomMoveData.x = currentPageXY.x;
+			zoomMoveData.y = currentPageXY.y;
+		}
 
 		scalePrevData = {
 			tranX: translateX,
@@ -1813,20 +1833,65 @@ function fixBlurOnZoom(scale = 1, index = false)
 
 }
 
-// Drag zoom
-function dragZoom(x, y)
+function getIndexImagesSize(index)
+{
+	let contentRight = template._contentRight();
+
+	let width = 0;
+	let height = 0;
+
+	let images = contentRight.querySelectorAll('.reading-body .image-position'+index+' .r-img > *');
+
+	let len = images.length;
+
+	if(len == 1)
+		width += _config.readingMargin.left * 2;
+
+	for(let i = 0; i < len; i++)
+	{
+		let img = images[i];
+
+		width += +img.dataset.width;
+
+		if(i > 0)
+		{
+			if(i == 1)
+				width += +img.dataset.left * 3;
+			else
+				width += +img.dataset.left;
+		}
+
+		let _height = +img.dataset.height + (_config.readingMargin.top * 2);
+
+		if(_height > height) height = _height;
+	}
+
+	return {
+		width: width,
+		height: height,
+	};
+}
+
+function notCrossZoomLimits(x, y, scale = false)
 {
-	x = scalePrevData.tranX2 + x;
-	y = scalePrevData.tranY2 + y;
+	scale = scale !== false ? scale : scalePrevData.scale;
+
+	let indexSize = getIndexImagesSize((config.readingGlobalZoom && readingViewIs('scroll')) ? (currentIndex - 1) : currentZoomIndex);
 
-	let maxX = originalRect.width * 0.5 * scalePrevData.scale - originalRect.width * 0.5;
-	let minX = originalRect.width * -0.5 * scalePrevData.scale - originalRect.width * -0.5;
+	let maxX = indexSize.width * 0.5 * scale - originalRect.width * 0.5;
+	let minX = indexSize.width * -0.5 * scale - originalRect.width * -0.5;
+
+	if(maxX < 0) maxX = 0;
+	if(minX > 0) minX = 0;
 
 	let maxDiff = readingViewIs('scroll') ? ((originalRect.top + originalRect.height) - (originalRectReadingBody.top + originalRectReadingBody.height)) : 0;
 	let minDiff = readingViewIs('scroll') ? (originalRect.top - originalRectReadingBody.top) : 0;
 
-	let maxY = (originalRect.height * 0.5 * scalePrevData.scale - originalRect.height * 0.5) - (minDiff < 0 ? minDiff : 0);
-	let minY = (originalRect.height * -0.5 * scalePrevData.scale - originalRect.height * -0.5) - (maxDiff > 0 ? maxDiff + _config.readingMargin.top : 0);
+	let maxY = (indexSize.height * 0.5 * scale - originalRect.height * 0.5) - (minDiff < 0 ? minDiff : 0);
+	let minY = (indexSize.height * -0.5 * scale - originalRect.height * -0.5) - (maxDiff > 0 ? maxDiff + _config.readingMargin.top : 0);
+
+	if(maxY < 0) maxY = 0;
+	if(minY > 0) minY = 0;
 
 	if(x > maxX)
 		x = maxX;
@@ -1838,6 +1903,17 @@ function dragZoom(x, y)
 	else if(y < minY)
 		y = minY;
 
+	return {x: x, y: y, maxX: maxX, maxY: maxY};
+}
+
+// Drag zoom
+function dragZoom(x, y)
+{
+	let withLimits = notCrossZoomLimits(scalePrevData.tranX2 + x, scalePrevData.tranY2 + y);
+
+	x = withLimits.x;
+	y = withLimits.y;
+
 	let contentRight = template._contentRight();
 
 	if(config.readingGlobalZoom && readingViewIs('scroll'))
@@ -2102,6 +2178,14 @@ function magnifyingGlassControl(mode, e = false, lensData = false)
 
 function resizedWindow()
 {
+	originalRect = false;
+	originalRectReadingBody = false;
+	originalRect2 = false;
+	originalRectReadingBody2 = false;
+	contentLeftRect = false;
+	contentRightRect = false;
+	barHeaderRect = false;
+
 	if(onReading || _onReading)
 	{
 		disposeImages();
@@ -3175,13 +3259,15 @@ function mousemove(event)
 			{
 				event.preventDefault();
 
-				let _pageX = pageX - contentRightRect.left;
-				let _pageY = pageY - contentRightRect.top;
+				let withLimits = notCrossZoomLimits(0, 0);
+
+				let widthM = contentRightRect.width / 2;
+				let heightM = contentRightRect.height / 2;
 
-				let x = -(_pageX - contentRightRect.width / 2) * (scalePrevData.scale - 1);
-				let y = -(_pageY - contentRightRect.height / 2) * (scalePrevData.scale - 1);
+				let x = -(pageX - zoomMoveData.x) * (withLimits.maxX / widthM * 1.2);
+				let y = -(pageY - zoomMoveData.y) * (withLimits.maxY / heightM * 1.2);
 
-				dragZoom(x - scalePrevData.tranX2, y - scalePrevData.tranY2);
+				dragZoom(x, y);
 
 				scalePrevData.tranX = zoomMoveData.tranX;
 				scalePrevData.tranY = zoomMoveData.tranY;