From 8898dfdc93f948c1b1dd90219c8deaa89c57c916 Mon Sep 17 00:00:00 2001
From: Mischa POSLAWSKY <perl@shiar.org>
Date: Sat, 22 Jan 2022 21:34:45 +0100
Subject: [PATCH] word/edit: fix (vertical) scale with different aspect ratios

---
 word/editor.js | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/word/editor.js b/word/editor.js
index a4b8d8e..461bab0 100644
--- a/word/editor.js
+++ b/word/editor.js
@@ -123,9 +123,11 @@ document.addEventListener('DOMContentLoaded', () => {
 			thumbpreview.onclick = null; // setup once
 			const cropinput = document.getElementById('crop32');
 			const imgselect = thumbpreview.children[0];
-			const border = [300,200];
+			const canvas = [thumbpreview.clientWidth, thumbpreview.clientHeight];
+			const border = [canvas[0], canvas[0] * imgpreview.height / imgpreview.width];
+			const minscale = Math.max(1, canvas[1] / border[1]); // 100% or fit width
 			let crop = cropinput.value.split(/[^0-9]/).map(pos => pos / 1000);
-			let scale = 1 / (crop[2] - crop[0]) || 1;
+			let scale = 1 / (crop[2] - crop[0]) || minscale;
 			crop.push(0); // defined y dimension
 			crop.splice(2); // end coordinates applied to zoom
 			crop = crop.map((rel, axis) => rel * border[axis % 2] * scale);
@@ -156,25 +158,27 @@ document.addEventListener('DOMContentLoaded', () => {
 
 			function recrop() {
 				[0, 1].forEach(axis => {
-					if (crop[axis] > border[axis] * (scale - 1)) {
-						crop[axis] = border[axis] * (scale - 1);
+					if (crop[axis] > border[axis] * scale - canvas[axis]) {
+						crop[axis] = border[axis] * scale - canvas[axis]; // max bound
 					}
 					if (crop[axis] < 0) {
-						crop[axis] = 0;
+						crop[axis] = 0; // min bound
 					}
 				});
 				imgselect.style.left = -crop[0]+'px';
 				imgselect.style.top  = -crop[1]+'px';
 				imgselect.style.width = (scale * 100)+'%';
 				cropinput.value = [
-					crop[0] / border[0],     crop[1] / border[1],
-					crop[0] / border[0] + 1, crop[1] / border[1] + 1,
+					crop[0] / border[0],
+					crop[1] / border[1],
+					(crop[0] + canvas[0]) / border[0],
+					(crop[1] + canvas[1]) / border[1],
 				].map(pos => Math.round(1000 * pos / scale));
 			}
 
 			function cropzoom(delta) {
-				if (scale + delta < 1) {
-					delta = 1 - scale; // scale = 1
+				if (scale + delta < minscale) {
+					delta = minscale - scale; // scale = 1
 				}
 				[0, 1].forEach(axis => {
 					// same area center at altered scale
-- 
2.30.0