word/edit: fix (vertical) scale with different aspect ratios

diff --git a/word/editor.js b/word/editor.js
index a4b8d8edab037f4923eef8bfc6d1338cb8c38cb3..461bab0aa15a2b13ec83d57c7f58c8a43bedb4a7 100644 (file)
--- 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];
                        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 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);
                        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 => {
 
                        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) {
                                        }
                                        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 = [
                                        }
                                });
                                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) {
                                ].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
                                }
                                [0, 1].forEach(axis => {
                                        // same area center at altered scale