cleanup
Hunter
Monday, October 20th, 2025 at 3:18 PM
279 // Transform: translate from center (-50%, -50%), scale, rotate, then pan
280 // Pan is applied after rotation so it stays relative to the image's rotated state
281 imgElement.style.transform = `translate(-50%, -50%) scale(${totalScale}) rotate(${img.rotation}deg) translate(${img.panX}px, ${img.panY}px)`;
-
- // Store transform parameters as CSS variables for print recalculation
- img.container.style.setProperty('--user-scale', img.userScale);
- img.container.style.setProperty('--rotation', img.rotation);
- img.container.style.setProperty('--pan-x', img.panX);
- img.container.style.setProperty('--pan-y', img.panY);
- img.container.style.setProperty('--natural-width', img.naturalWidth);
- img.container.style.setProperty('--natural-height', img.naturalHeight);
282 }
283 }
284
607 });
608 });
609
-// Store original transforms before print
-let beforePrintTransforms = [];
610 +// Adjust image scales for print and restore after
611 +const PRINT_CELL_SIZE_PX = 4 * 96 / 25.4; // 4mm in pixels at 96 DPI
612
-// Recalculate image transforms for print
613 window.addEventListener('beforeprint', () => {
- const PRINT_CELL_SIZE_MM = 4;
- const MM_TO_PX_PRINT = 96 / 25.4; // Conversion for print
- const printCellSizePx = PRINT_CELL_SIZE_MM * MM_TO_PX_PRINT;
-
- // Store current transforms and container styles
- beforePrintTransforms = images.map(img => {
- const imgElement = img.container.querySelector('img');
- return {
- container: img.container,
- transform: imgElement ? imgElement.style.transform : '',
- left: img.container.style.left,
- top: img.container.style.top,
- width: img.container.style.width,
- height: img.container.style.height
- };
- });
-
614 images.forEach(img => {
615 const imgElement = img.container.querySelector('img');
- if (imgElement && img.naturalWidth > 0 && img.naturalHeight > 0) {
- // Calculate container size at print (in px)
- const containerWidth = img.widthCells * printCellSizePx;
- const containerHeight = img.heightCells * printCellSizePx;
-
- // Calculate base scale for print
- const isRotated90or270 = img.rotation % 180 !== 0;
- const effectiveWidth = isRotated90or270 ? img.naturalHeight : img.naturalWidth;
- const effectiveHeight = isRotated90or270 ? img.naturalWidth : img.naturalHeight;
-
- const scaleX = containerWidth / effectiveWidth;
- const scaleY = containerHeight / effectiveHeight;
- const printBaseScale = Math.max(scaleX, scaleY);
- const printTotalScale = printBaseScale * img.userScale;
-
- // Apply transform for print
- imgElement.style.transform = `translate(-50%, -50%) scale(${printTotalScale}) rotate(${img.rotation}deg) translate(${img.panX}px, ${img.panY}px)`;
- }
616 + if (!imgElement || !img.naturalWidth || !img.naturalHeight) return;
617 +
618 + // Calculate print container size
619 + const printWidth = img.widthCells * PRINT_CELL_SIZE_PX;
620 + const printHeight = img.heightCells * PRINT_CELL_SIZE_PX;
621 +
622 + // Recalculate base scale for print
623 + const isRotated = img.rotation % 180 !== 0;
624 + const effectiveW = isRotated ? img.naturalHeight : img.naturalWidth;
625 + const effectiveH = isRotated ? img.naturalWidth : img.naturalHeight;
626 + const printBaseScale = Math.max(printWidth / effectiveW, printHeight / effectiveH);
627 +
628 + // Apply print transform
629 + const printScale = printBaseScale * img.userScale;
630 + imgElement.style.transform = `translate(-50%, -50%) scale(${printScale}) rotate(${img.rotation}deg) translate(${img.panX}px, ${img.panY}px)`;
631 });
632 });
633
-// Restore screen transforms after print
634 window.addEventListener('afterprint', () => {
- // Restore the exact transforms and positions from before print
- beforePrintTransforms.forEach(saved => {
- const imgElement = saved.container.querySelector('img');
- if (imgElement) {
- imgElement.style.transform = saved.transform;
- }
- saved.container.style.left = saved.left;
- saved.container.style.top = saved.top;
- saved.container.style.width = saved.width;
- saved.container.style.height = saved.height;
- });
- beforePrintTransforms = [];
635 + // Just recalculate everything based on current screen size
636 + images.forEach(img => updateImagePosition(img));
637 });